:root {
    --main-light-blue: #00B1FF;
    --main-medium-blue: #005995;
    --main-dark-blue: #002855;
    --main-neon-yellow: #FAEC20;
    --main-pink: #EB0C8B;
    --main-dark-grey: #2C2C2C;
    --main-medium-grey: #545454;
    --light-grey: #D4D4D4;
    --close-white: #F6F6F6;
    --white: #ffffff;
    --black: #000000;
    --nude-green: #00C783;
}

/* =========================
   GLOBAL PAGE LOADER
   ========================= */
.bmc-site-loader{
  position: fixed;
  inset: 0;
  background: #ffffff;        
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;

  /* smooth appearance */
  opacity: 0;
  transition: opacity .18s ease;
}

.bmc-site-loader.is-on{
  display: flex;
  opacity: 1;
}

/* remove the “box” look */
.bmc-site-loader-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  padding: 0;                  
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* spinner */
.bmc-site-loader-spinner{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,0.12);
  border-top-color: #2563eb;    
  animation: bmcSpin .85s linear infinite;
}

.bmc-site-loader-text{
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.65);
  letter-spacing: .2px;
}

@keyframes bmcSpin{
  to { transform: rotate(360deg); }
}

/* Optional: prevent scrolling while loading */
body.bmc-loading{
  overflow: hidden;
}

/* ==========================
   WhatsApp Custom Widget
   (isolated wa-* classes)
   ========================== */

/* Floating launcher button */
.wa-launcher{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: #25D366;
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  cursor: pointer;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Font Awesome icon */
.wa-launcher i{
  font-size: 30px;
  color: #fff;
  line-height: 1;
}

/* Widget container */
.wa-widget{
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: 360px;
  max-width: calc(100vw - 36px);
  z-index: 9999;
}

/* Card */
.wa-card{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  background: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.wa-head{
  background: #0B6156;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
}
.wa-head-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.wa-avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ffffff;         
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.wa-avatar img{
  width: 70%;                  
  height: 70%;
  object-fit: contain;          
  display: block;
}
.wa-title{
  font-weight: 700;
  line-height: 1.1;
}
.wa-sub{
  font-size: 12px;
  opacity: .9;
  margin-top: 2px;
}

/* Close button */
.wa-close{
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wa-close i{
  font-size: 18px;
  line-height: 1;
}
.wa-close:hover{
  background: rgba(255,255,255,.12);
}

/* Body chat area */
.wa-body{
  background: #EAE6DF;
  background-image: radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 18px 18px;
  padding: 14px;
  max-height: 280px;
  overflow: auto;
}

/* Messages */
.wa-msg{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 14px;
  margin: 6px 0;
  max-width: 90%;
  font-size: 14px;
}
.wa-msg-in{
  background: #fff;
  border-top-left-radius: 6px;
}
.wa-msg-out{
  background: #D9FDD3;
  border-top-right-radius: 6px;
  margin-left: auto;
  display: block;
  width: fit-content;
}

/* Form */
.wa-form{
  display:flex;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
}
.wa-input{
  flex: 1;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.wa-input:focus{
  border-color: rgba(11,97,86,.55);
  box-shadow: 0 0 0 3px rgba(11,97,86,.12);
}
.wa-send{
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.wa-send:hover{
  filter: brightness(.95);
}

/* Footer */
.wa-foot{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  padding: 10px 12px 12px;
  background: #fff;
}
.wa-foot-you{
  font-weight: 700;
  color: rgba(0,0,0,.65);
}

/* Mobile tweak */
@media (max-width: 420px){
  .wa-launcher{
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
  }
  .wa-launcher i{ font-size: 28px; }
  .wa-widget{
    right: 14px;
    bottom: 76px;
  }
}

/*  ==================================================================   */
/*                          PRIMARY SECTION                              */
/*  ==================================================================   */
/* GENERAL */
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: var(--white);
}

/* NAVBAR */
.navbar {
  position: sticky;
  top: 40px; 
  width: calc(100% - 80px);
  margin: 0 auto;
  max-width: 1150px;

  background: linear-gradient(60deg, #131313 100%, #000000 100%);
  padding: 22px 40px;

  border-radius: 100px;
  border: 1px solid var(--white);

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 999;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  /* No top animation */
  transition:
    padding 0.3s ease,
    border-radius 0.3s ease,
    box-shadow 0.3s ease;
}

/* Shrunk navbar */
.navbar.shrink {
  padding: 12px 40px;
  border-radius: 60px;
}

/* LOGO */
.navbar .logo img {
  height: 70px;
  width: auto;
  object-fit: contain;
  transition: height 0.3s ease;
}

/* Shrink the logo when navbar shrinks */
.navbar.shrink .logo img {
  height: 50px;
}

/* NAVIGATION */
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 15px;

  /* FULL CAPS */
  text-transform: uppercase;

  /* Optional: makes uppercase look cleaner */
  letter-spacing: 0.10px;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--main-light-blue);
}

.nav-links .active {
  font-weight: 600;
  border-bottom: 2px solid var(--main-pink);
}

/*===================================
        PRIMARY DROPDOWN
================================== */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  background: none;
  border: none;
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.arrow {
  transition: transform 0.3s ease;
}

.dropdown-menu {
  position: absolute;
  top: 32px;
  left: 0;
  background: var(--black);
  border-radius: 12px;
  min-width: 360px;
  padding: 10px 0;
  display: none;
}

/* LINKS */
.dropdown-menu a {
  display: block;
  padding: 10px 18px;

  margin: 4px 12px;   
  border-radius: 8px; 

  color: var(--white);
  text-decoration: none;

  transition: background-color 0.35s ease,
              color 0.35s ease;
}

/* Smooth hover */
.dropdown-menu a:hover {
  background-color: rgba(255,255,255,0.08);
  color: var(--main-light-blue);
}

.dropdown-menu.open {
  display: block;
}

.arrow.rotate {
  transform: rotate(180deg);
}

/* NAV BUTTONS */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.login-btn {
  color: var(--white);
  text-decoration: none;

  /* FULL CAPS */
  text-transform: uppercase;

  /* Optional styling for consistency */
  letter-spacing: 0.10px;
  font-weight: 500;
}

.login-btn:hover {
  color: var(--main-light-blue);
}

/* Profile / Account Icon */
.profile-icon {
  display: inline-block;
  margin-right: 8px;
}

.profile-icon img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.2s;
}

.profile-icon img:hover {
  transform: scale(1.1);
}

/* Header Nav Account Avatar */
.profile-icon .nav-avatar{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #ffffff;
  background: #ffffff;
}

/* Mobile menu account avatar (white ring) */
.mobile-login img{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #ffffff;
  background: #ffffff;        
  box-sizing: border-box;
}

/* ================================
   PRIMARY AVATAR DROPDOWN
================================ */

/* Wrapper */
.avatar-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Avatar trigger button */
.avatar-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Avatar image */
.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff; 
}

/* Dropdown menu */
.avatar-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: auto;
  right: 0;
  min-width: 180px;

  background: var(--black);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

  padding: 8px 0;
  display: none;
  z-index: 1000;
}

/* Open state */
.avatar-dropdown.is-open .avatar-menu {
  display: block;
}

/*  ==============================
            DROPDOWN ITEMS
==============================  */
.avatar-menu a {
  display: block;
  padding: 10px 16px;

  margin: 4px 10px;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;

  background: transparent;

  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

/* Hover state */
.avatar-menu a:hover {
  background-color: rgba(255,255,255,0.08);
  color: #4fc3f7;
}

/* Logout emphasis */
.avatar-menu a:last-child {
  color: #e53935;
}

.avatar-menu a:last-child:hover {
  background-color: rgba(229,57,53,0.12);
  color: #ff6b6b;
}

.buy-btn {
  background: var(--white);
  color: var(--main-medium-blue);
  padding: 10px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}

.buy-btn:hover {
  background: var(--main-neon-yellow);
  color: var(--black);
}

/* =========================================================
   PRIMARY CART ICON + BADGE (DESKTOP) — RESTORED TO ORIGINAL
   - small BLUE CIRCLE badge
   - anchored top-right of the icon
========================================================= */
header.navbar .cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

header.navbar .cart-button img {
  display: block;
  width: 24px;
  height: 24px;
}

header.navbar .cart-button:hover img {
  filter: invert(54%) sepia(96%) saturate(2400%) hue-rotate(165deg)
        brightness(103%) contrast(101%);
}

/* EXACT style from your screenshot: small circular badge */
header.navbar .cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;

  width: 16px;
  height: 16px;

  background: var(--main-light-blue);
  color: var(--white);

  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;

  border-radius: 50%;
  display: inline-block;
}

/* ===============================
   MOBILE NAVIGATION
   =============================== */

/* Hide hamburger by default (desktop) */
.hamburger {
  display: none;
}

/* Hide X on desktop by default */
.mobile-close {
  display: none;
}

/* Desktop default: hide mobile-only bottom actions */
.mobile-menu-actions {
  display: none;
}

/* HARD STOP: mobile cart count NEVER shows on desktop (prevents purple "5") */
@media (min-width: 993px) {
  header.navbar .mobile-menu-actions,
  header.navbar .cart-count {
    display: none !important;
  }
}

/* ===============================
   MOBILE / TABLET / SMALL LAPTOP
   ONLY (<= 992px)
   =============================== */
@media (max-width: 992px) {

  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Keep header visible while scrolling on mobile/tablet */
  header.navbar {
    position: fixed;
    top: 40px; /* constant */
    left: 16px;
    right: 16px;
    width: auto;
    margin: 0;
    z-index: 5000;
  }

  /* Shrink ONLY size, never position */
  header.navbar.shrink {
    padding: 12px 32px;
    border-radius: 50px;
  }

  body {
    padding-top: 110px;
  }

  /* hamburger visible */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 6000;
  }

  .hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .hamburger.active span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.active span:nth-child(2){ opacity: 0; }
  .hamburger.active span:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); }

  /* ===== FULL-SCREEN BLUE MENU (REFERENCE STYLE) ===== */
  nav.nav-links {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    background: linear-gradient(160deg, #0b3a66 0%, #005995 100%);
    color: #ffffff;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 92px 26px 26px;
    gap: 6px;

    transform: translateX(110%);
    transition: transform 0.28s ease;

    z-index: 9000;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  nav.nav-links.open { transform: translateX(0); }

  /* X button inside menu (MOBILE ONLY) */
  .mobile-close {
    display: block;
    position: absolute;
    top: 22px;
    right: 22px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 9100;
    padding: 6px;
  }

  .mobile-close:active { transform: scale(0.98); }

  /* Links look like clean menu rows */
  nav.nav-links > a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 4px;
    border-radius: 10px;
    text-align: left;
  }

  nav.nav-links > a:active { background: rgba(255,255,255,0.10); }

  /* ----- PRODUCTS ROW ----- */
  nav.nav-links .dropdown { width: 100%; }

  nav.nav-links .dropdown-toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;

    color: #ffffff;
    font-size: 18px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 4px;
    border-radius: 10px;
    text-align: left;
  }

  nav.nav-links .dropdown-toggle:active { background: rgba(255,255,255,0.10); }

  /* Right chevron style (rotate the ▾ into >) */
  nav.nav-links .arrow {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
    color: #ffffff;
    opacity: 0.95;
  }

  /* When open, rotate down */
  nav.nav-links .arrow.rotate { transform: rotate(0deg); }

  /* Dropdown menu (accordion) */
  nav.nav-links .dropdown-menu {
    position: relative;
    top: 0;
    left: 0;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    background: rgba(255,255,255,0.10);
    border-radius: 12px;

    display: none;
    padding: 6px 0 10px;
    margin: 0 0 6px;

    box-sizing: border-box;
    overflow: hidden;
  }

  nav.nav-links .dropdown.open .dropdown-menu { display: block; }

  nav.nav-links .dropdown-menu a {
    display: block;
    padding: 14px 18px;
    font-size: 16px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px;
  }

  nav.nav-links .dropdown-menu a:active { background: rgba(255,255,255,0.10); }

  /* ===============================
     MOBILE BOTTOM ACTIONS
     (only visible on mobile/tablet)
     =============================== */
  .mobile-menu-actions{
    display: flex;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.18);
    flex-direction: column;
    gap: 16px;
  }

  .mobile-login{
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
  }

  .mobile-login img{
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }

  .mobile-buy-btn{
    display: block;
    width: 100%;
    box-sizing: border-box;

    background: var(--white);
    color: var(--black) !important;
    text-align: center;

    padding: 14px 16px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-buy-btn:hover{
    background: var(--main-neon-yellow);
    color: var(--black) !important;
  }

  .mobile-cart{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
  }

  .mobile-cart img{
    width: 22px;
    height: 22px;
  }

  .cart-count{
    background: var(--main-light-blue);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1;
  }

  /* Hide the separate nav-buttons panel on mobile/tablet */
  .nav-buttons{
    display: none !important;
  }

  /* Hide desktop badge while mobile menu is used */
  header.navbar .cart-badge{
    display: none;
  }
}

/* Optional: ensure nav is horizontal on desktop */
@media (min-width: 992px) {
  .nav-links,
  .nav-buttons {
    display: flex;
    position: static;
    flex-direction: row;
    height: auto;
    width: auto;
    background: none;
    padding: 0;
  }
}


/* HERO SECTION */
.hero {
    position: relative;
    height: 690px;
    display: flex;
    align-items: center;
    padding: 0 160px;
    color: var(--white);
    background-image: url('images/hero/IFPP_IHB.png');
    background-size: cover;
    background-position: center;
}

.hero {
    margin-top: -130px; 
    padding-top: 120px; 
}

/* GRADIENT OVERLAY */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        60deg,
        rgba(0, 30, 80, 0.85) 0%,
        rgba(0, 80, 150, 0.60) 80%,
        rgba(0, 120, 200, 0.25) 100%
    );
    z-index: 1;
}

/* HERO CONTENT */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero h1 {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.highlight {
    color: var(--main-neon-yellow);
}

.subtitle {
    font-size: 30px;
    margin-bottom: 35px;
    max-width: 800px;
}

.secsubtitle {
    font-size: 10px;
    margin-bottom: 35px;
    max-width: 800px;
}

.hero-btn {
    background: var(--white);
    color: var(--main-medium-blue);
    padding: 12px 32px;
    border-radius: 100px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
}

.hero-btn:hover {
    background: var(--main-neon-yellow);
    color: var(--black);
}

/* HERO CONTENT APPEAR MOTION */
.hero-motion {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.hero-motion.active {
    opacity: 1;
    transform: translateY(0);
}

/* Adjust hero section for mobile/tablet */
@media (max-width: 768px) {
    .hero {
        height: 700px;
        padding: 0 40px; 
    }

    .hero h1 {
        font-size: 50px; 
        margin-bottom: 15px;
    }

    .highlight {
        font-size: 1.1em;
    }

    .subtitle {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .hero-btn {
        padding: 10px 25px; 
        font-size: 16px; 
    }

    .hero-motion {
        transform: translateY(20px); 
    }
}

@media (max-width: 480px) {
    .hero {
        height: 800px; 
        padding: 0 20px;
    }

    .hero h1 {
        font-size: 35px; 
        margin-bottom: 10px;
    }

    .subtitle {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .hero-btn {
        padding: 11px 35px;
        font-size: 16px; 
    }

    .hero-motion {
        transform: translateY(10px); 
    }
}

/* SMART BUSINESS CARDS SECTION */
.smart-section {
    width: 100%;
    padding: 80px 0;
    margin: 70px 0 70px 0;
    display: flex;
    justify-content: center;
    background: var(--close-white);
}

.smart-container {
    max-width: 1250px;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 20px;
}

.smart-image-box {
    border-radius: 25px;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.smart-image {
    width: 580px;
    height: auto;
    border-radius: 15px;
}

.smart-text {
    max-width: 550px;
}

.smart-text h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
}

.smart-blue {
    color: var(--main-light-blue);
}

.smart-text p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 18px;
    color: var(--black);
}

/* Initial state: off-screen & transparent */
.motion-left {
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.motion-right {
    transform: translateX(50px);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Active state: slide into place */
.motion-left.active,
.motion-right.active {
    transform: translateX(0);
    opacity: 1;
}

/* Adjust Smart Business Cards Section for mobile/tablet */
@media (max-width: 768px) {
    .smart-container {
        max-width: 90%;
        flex-direction: column; 
        align-items: center; 
        gap: 40px;
    }

    .smart-image-box {
        padding: 30px;
    }

    .smart-image {
        width: 250px;
        height: auto;
    }

    .smart-text {
        max-width: 100%;
        padding: 0 20px;
    }

    .smart-text h2 {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .smart-text p {
        font-size: 15px; 
        line-height: 1.5;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .smart-container {
        gap: 30px; 
    }

    .smart-image {
        width: 300px;
        height: auto;
    }

    .smart-text h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .smart-text p {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .smart-image-box {
        padding: 20px;
    }
}

/* DIGITAL BUSINESS CARD SECTION BASE */
.dbc-section {
    position: relative;
    width: 100%;
    padding: 140px 0 160px;
    overflow: hidden;
    background: #004C85;
}

/* GRADIENT OVER EVERYTHING */
.dbc-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0,100,160,1) 0%,
        rgba(0,150,200,0.65) 50%,
        rgba(0,80,130,1) 100%
    );
    opacity: 0.9;
    pointer-events: none;
}

/* CENTER WRAPPER */
.dbc-wrapper {
    position: relative;
    max-width: 1250px;
    margin: auto;
    text-align: center;
    z-index: 5;
}

/* --- CAROUSEL AREA --- */
.dbc-carousel {
    position: relative;
    height: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

/* PHONE IN CENTER */
.dbc-phone {
    position: absolute;
    width: 300px;
    height: auto;
    z-index: 2;
    top: 10px;
}

/* SLIDER TRACK */
.dbc-slider {
    position: relative;
    width: 680px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CARD BASE */
.dbc-card {
    position: absolute;
    width: 260px;
    height: auto;
    margin-bottom: -90px;
    border-radius: 18px;

    transition:
        transform 0.9s ease,
        opacity 0.9s ease,
        filter 0.6s ease;

    background: transparent;
    overflow: hidden;
}

/* SVG inside card */
.dbc-shape{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* CENTER CARD */
.dbc-card.active {
    transform: translateX(0) scale(1);
    opacity: 1;
    filter: blur(0px);
    z-index: 4;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}

/* LEFT SIDE CARD */
.dbc-card.left {
    transform: translateX(-260px) scale(0.9);
    opacity: 0.28;
    filter: blur(2px);
    z-index: 1;
}

/* RIGHT SIDE CARD */
.dbc-card.right {
    transform: translateX(260px) scale(0.9);
    opacity: 0.28;
    filter: blur(2px);
    z-index: 1;
}

/* HIDDEN OFFSCREEN CARDS */
.dbc-card.off-left {
    transform: translateX(-450px) scale(0.85);
    opacity: 0;
}

.dbc-card.off-right {
    transform: translateX(450px) scale(0.85);
    opacity: 0;
}

/* DOTS */
.dbc-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 35px;
    padding-top: 80px;
    position: relative;
    z-index: 50;
}

.dbc-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--main-dark-blue);
    opacity: 0.45;
    transition: 0.2s;
    cursor: pointer;
}

.dbc-dots .dot.active {
    opacity: 1;
    color: var(--main-light-blue);
    transform: scale(1.3);
}

/* TEXT */
.dbc-text {
    margin-top: 40px;
}

.dbc-text h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--white);
}

.dbc-text h2 span {
    color: var(--main-neon-yellow);
}

.dbc-text p {
    max-width: 750px;
    margin: 0 auto;
    font-size: 17px;
    color: var(--white);
    line-height: 1.6;
}

/* NEW CTA BUTTON */
.dbc-btn{
    display: inline-block;
    margin-top: 26px;
    padding: 14px 34px;
    border-radius: 999px;

    background: var(--main-neon-yellow);
    color: var(--black);

    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    transition: background 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
}

.dbc-btn:hover{
    background: var(--white);
    color: var(--main-medium-blue);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}

/* Initial state: slide from bottom */
.dbc-motion {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Active state: final position */
.dbc-motion.active {
    opacity: 1;
    transform: translateY(0);
}

/* Adjust for mobile/tablet */
@media (max-width: 768px) {
    .dbc-section {
        padding: 100px 0 100px;
    }

    .dbc-wrapper {
        max-width: 90%;
        margin: auto;
        text-align: center;
    }

    /* CAROUSEL AREA */
    .dbc-carousel {
        height: 380px;
        margin-bottom: 40px;
    }

    /* PHONE IN CENTER */
    .dbc-phone {
        width: 220px;
        top: 0;
    }

    /* SLIDER TRACK */
    .dbc-slider {
        width: 100%;
        height: 100%;
    }

    /* CARD BASE */
    .dbc-card {
        width: 180px;
        height: 260px;
        margin-top: -45px;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }

    /* LEFT CARD */
    .dbc-card.left {
        transform: translateX(-180px) scale(0.85);
        opacity: 0.5;
    }

    /* RIGHT CARD */
    .dbc-card.right {
        transform: translateX(180px) scale(0.85);
        opacity: 0.5;
    }

    /* DOTS */
    .dbc-dots {
        gap: 6px;
        margin-bottom: 25px;
    }

    /* TEXT */
    .dbc-text h2 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .dbc-text p {
        font-size: 15px;
        max-width: 650px;
    }

    /* BUTTON */
    .dbc-btn{
        font-size: 15px;
        margin-top: 22px;
    }
}

@media (max-width: 480px) {
    .dbc-section {
        padding: 80px 0 80px;
    }

    .dbc-phone {
        width: 180px;
        top: 0;
    }

    .dbc-card {
        width: 140px;
        height: 230px;
        margin-bottom: -55px;
    }

    .dbc-dots {
        gap: 4px;
        margin-bottom: 25px;
        margin-top: -100px;
    }

    .dbc-text h2 {
        font-size: 28px;
    }

    .dbc-text p {
        font-size: 14px;
        max-width: 600px;
    }

    /* BUTTON FULL WIDTH ON MOBILE */
    .dbc-btn{
        width: auto;
        max-width: none;

        padding: 13px 26px;

        font-size: 15px;
        border-radius: 999px;

        margin-top: 18px;
    }
}

/* =========================
   BMC NFC ORDER SECTION
========================= */
.bmc-nfc-order,
.bmc-nfc-order *{
  box-sizing: border-box;
}

.bmc-nfc-order{
  /* FIX: prevents sticky/fixed header overlap */
  scroll-margin-top: 120px;
  padding: 130px 16px 90px;
  background: #f2f4f7;
  position: relative;
  overflow: hidden;
}

/* REMOVED: */
.bmc-nfc-order::before{
  content: none;
  display: none;
}

.bmc-nfc-wrap{
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 26px;
  align-items: center;
}

.bmc-nfc-left{
  color: var(--black);
  padding: 6px 10px;
}

.bmc-nfc-title{
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: -0.6px;
}

.bmc-nfc-sub{
  margin: 0 0 16px;
  opacity: 0.92;
  max-width: 560px;
  font-size: 15px;
}

.bmc-nfc-bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  opacity: 0.95;
}
.bmc-nfc-bullets li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.bmc-nfc-bullets li span{
  color: var(--main-light-blue);
  font-weight: 800;
  line-height: 1;
  transform: translateY(2px);
}

/* ===== NEW: IMAGE UNDER BULLETS ===== */
.bmc-nfc-left-media{
  margin-top: 22px;
  width: 100%;
  max-width: 620px;
}

.bmc-nfc-left-img{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* RIGHT PANEL: */
.bmc-nfc-right{
  justify-self: end;
  width: 100%;
  max-width: 620px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
}

.bmc-nfc-form{
  width: 100%;
  background: #0b0f14;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}

.bmc-nfc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.bmc-span-2{ grid-column: span 2; }

.bmc-field label{
  display: block;
  color: #fff;
  font-weight: 650;
  margin: 0 0 8px;
  font-size: 14px;
}
.bmc-field label span{ color: var(--main-light-blue); }

.bmc-field input[type="text"],
.bmc-field input[type="email"],
.bmc-field input[type="url"]{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 0 14px;
  outline: none;
}
.bmc-field input[type="text"]:focus,
.bmc-field input[type="email"]:focus,
.bmc-field input[type="url"]:focus{
  border-color: rgba(231,255,47,0.45);
  box-shadow: 0 0 0 3px rgba(231,255,47,0.10);
}

/* FILE INPUT: */
.bmc-field input[type="file"]{
  width: 100%;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
  padding: 10px 12px;
  outline: none;
}
.bmc-field input[type="file"]::file-selector-button{
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  margin-right: 10px;
  cursor: pointer;
  font-weight: 800;
  background: var(--main-light-blue);
  color: var(--white);
}
.bmc-field input[type="file"]::-webkit-file-upload-button{
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  margin-right: 10px;
  cursor: pointer;
  font-weight: 800;
  background: var(--main-light-blue);
  color: var(--white);
}

.bmc-help{
  display: block;
  color: rgba(255,255,255,0.72);
  margin-top: 6px;
  font-size: 12px;
}

.bmc-err{
  display: block;
  min-height: 16px;
  margin-top: 6px;
  color: #ff6b6b;
  font-size: 12px;
}

/* Payment box */
.bmc-paybox{
  margin-top: 16px;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.bmc-payhead{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.bmc-payhead h3{
  margin: 0;
  color: #fff;
  font-size: 16px;
}
.bmc-paystatus{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.35);
  color: #fff;
}
.bmc-paystatus.is-paid{
  background: rgba(231,255,47,0.16);
  border-color: rgba(231,255,47,0.45);
  color: #e7ff2f;
}

.bmc-paynote{
  margin: 10px 0 12px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
}

.bmc-paypal{
  padding: 10px 0 6px;
  overflow: visible;
}

.bmc-payfoot{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.bmc-submit{
  height: 48px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.2px;
  background: var(--main-light-blue);
  color: var(--white);
}
.bmc-submit:disabled{
  cursor: not-allowed;
  opacity: 0.45;
}

.bmc-lock{
  display: block;
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
}

/* =========================
   RESPONSIVE OPTIMIZATION
   Breakpoints: 992 / 768 / 480
========================= */

/* ---------- ≤ 992px (Tablets / small laptops) ---------- */
@media (max-width: 992px){
  .bmc-nfc-wrap{
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .bmc-nfc-left{
    padding-bottom: 20px;
  }

  .bmc-nfc-right{
    justify-self: center;
    max-width: 720px;
  }

  .bmc-nfc-title{
    font-size: 38px;
  }

  /* center the image on stacked layout */
  .bmc-nfc-left-media{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- ≤ 768px (Tablets / large phones) ---------- */
@media (max-width: 768px){
  .bmc-nfc-order{
    padding: 110px 14px 70px;
  }

  .bmc-nfc-title{
    font-size: 32px;
  }

  .bmc-nfc-sub{
    font-size: 14px;
  }

  .bmc-nfc-grid{
    grid-template-columns: 1fr;
  }

  .bmc-span-2{
    grid-column: auto;
  }

  .bmc-nfc-right{
    max-width: 100%;
  }

  .bmc-nfc-left-media{
    margin-top: 18px;
    max-width: 100%;
  }

  .bmc-nfc-left-img{
    border-radius: 16px;
  }
}

/* ---------- ≤ 480px (Mobile phones) ---------- */
@media (max-width: 480px){
  .bmc-nfc-order{
    padding: 95px 12px 60px;
  }

  .bmc-nfc-title{
    font-size: 26px;
    line-height: 1.1;
  }

  .bmc-nfc-sub{
    font-size: 13px;
  }

  .bmc-field input[type="text"],
  .bmc-field input[type="email"],
  .bmc-field input[type="url"]{
    height: 44px;
  }

  .bmc-submit{
    height: 46px;
    font-size: 14px;
  }

  .bmc-payhead{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .bmc-nfc-left-media{
    margin-top: 16px;
  }

  .bmc-nfc-left-img{
    border-radius: 14px;
  }
}

/* TRUSTED COMPANIES SECTION */
.trusted-section {
    text-align: center;
    padding: 70px 0 100px 0;
    background: var(--close-white);
}

.trusted-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 50px;
    color: var(--black);
    line-height: 1.2;
}

.trusted-blue {
    color: var(--main-light-blue);
}

.trusted-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.logo-box {
    width: 170px;
    height: 130px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    transition: transform 0.25s ease;
}

.logo-box img {
    max-width: 100%;
    max-height: 100%;
}

.logo-box:hover {
    transform: translateY(-5px);
}

/* Animation for text and logos */
/* Text fade-in */
.trusted-motion {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.trusted-motion.active {
    opacity: 1;
    transform: translateY(0);
}

/* Logo slide from left */
.logo-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* Logo slide from right */
.logo-right {
    opacity: 0;
    transform: translateX(50px);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* Active logos */
.logo-left.active,
.logo-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Mobile/Tablet Specific Adjustments */
@media (max-width: 768px) {
    .trusted-title {
        font-size: 32px; 
        margin-bottom: 30px; 
    }

    .trusted-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
        max-width: 100%; 
        margin: 0 auto;
        justify-items: center; 
    }

    .logo-box {
        width: 120px; 
        height: 100px;
        padding: 10px;
    }

    .logo-box img {
        max-width: 100%;
        max-height: 100%;
    }

    .trusted-motion {
        transform: translateY(20px);
    }

    /* Logo slide from left */
    .logo-left {
        transform: translateX(-30px);
    }

    /* Logo slide from right */
    .logo-right {
        transform: translateX(30px);
    }
}

@media (max-width: 480px) {

  /* Section itself */
  .trusted-section {
    padding: 50px 0 70px;
  }

  /* Title spacing */
  .trusted-title {
    font-size: 26px;
    margin-bottom: 10px;
    line-height: 1.15;
  }

  /* Logos grid — STOP stretching full width */
  .trusted-logos {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;                
    column-gap: 12px;                      
    row-gap: 14px;                              
    margin: 0 auto;
    padding-top: 0;
  }

  /* Logo cards */
  .logo-box {
    width: 120px; 
    height: 95px;
    padding: 6px;
  }

  /* Keep animations subtle */
  .trusted-motion { transform: translateY(10px); }
  .logo-left { transform: translateX(-12px); }
  .logo-right { transform: translateX(12px); }
}

/* =========================================================
   HOW TO SCAN – 3 COLUMN SECTION
========================================================= */

.scan3-section{
  width: 100%;
  padding: 80px 0;
  display: flex;
  justify-content: center;
  background: #0B0F14;
}

.scan3-container{
  max-width: 1250px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr; /* Apple | Android | Content */
  gap: 28px;
  padding: 20px;
  align-items: start;
}

/* =========================================================
   IMAGE COLUMNS
========================================================= */

.scan3-card{
  background: rgba(15, 23, 32, 0.55); /* darker glass */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 20px;
  padding: 18px;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 10px 35px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);

  transition: transform .35s ease, box-shadow .35s ease;
}

.scan3-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.scan3-imgwrap{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.scan3-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* =========================================================
   CONTENT COLUMN – DARK GLASS
========================================================= */

.scan3-content{
  background: rgba(15, 23, 32, 0.65); /* darker glass */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 20px;
  padding: 24px;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 10px 35px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.scan3-title{
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffffff;
}

.scan3-subtitle{
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 18px;
  color: rgba(255,255,255,0.75);
}

/* NEW INTRO PARAGRAPH */
.scan3-intro{
  margin: 14px 0 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.scan3-copy{
  margin-top: 18px;
}

.scan3-h3{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffffff;
}

.scan3-p{
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
  color: rgba(255,255,255,0.85);
}

/* Notice / Disclaimer (TEXT) */
.scan3-notice{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.scan3-noticetext{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #ff4d4d; /* stronger visibility on dark */
}

.scan3-noticetext strong{
  font-weight: 800;
}

/* =========================================================
   APPEAR TRANSITION (FADE ONLY)
========================================================= */

.scan3-appear{
  opacity: 0;
  transition: opacity 0.9s ease;
}

.scan3-appear.active{
  opacity: 1;
}

/* =========================================================
   TABLET (<= 992px)
   - 2 columns
   - Content spans full width
========================================================= */

@media (max-width: 992px){

  .scan3-section{
    padding: 70px 0;
  }

  .scan3-container{
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding: 0 22px;
  }

  .scan3-col--content{
    grid-column: 1 / -1; /* span both columns */
  }

  .scan3-content{
    padding: 20px;
  }

  .scan3-title{
    font-size: 34px;
  }

  .scan3-intro{
    font-size: 15.25px;
    margin: 12px 0 18px;
  }

  .scan3-p{
    font-size: 15.25px;
  }
}

/* =========================================================
   MOBILE (<= 768px)
   - Fully stacked
========================================================= */

@media (max-width: 768px){

  .scan3-section{
    padding: 65px 0;
  }

  .scan3-container{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 18px;
  }

  .scan3-card{
    padding: 14px;
    border-radius: 18px;
  }

  .scan3-content{
    padding: 18px;
    border-radius: 18px;
  }

  .scan3-title{
    font-size: 28px;
  }

  .scan3-subtitle{
    font-size: 15px;
    margin-bottom: 12px;
  }

  .scan3-intro{
    font-size: 15px;
    line-height: 1.75;
    margin: 12px 0 18px;
  }

  .scan3-h3{
    font-size: 15.5px;
  }

  .scan3-p{
    font-size: 15px;
    line-height: 1.75;
  }

  .scan3-noticetext{
    font-size: 14.75px;
  }
}

/* =========================================================
   SMALL MOBILE (<= 480px)
========================================================= */

@media (max-width: 480px){

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

  .scan3-container{
    padding: 0 16px;
  }

  .scan3-title{
    font-size: 24px;
  }

  .scan3-intro{
    font-size: 14.75px;
    margin: 10px 0 16px;
  }

  .scan3-p{
    font-size: 14.75px;
  }
}

/* HOW IT WORKS SECTION */
.how-section {
  background: #0B0F14;
  padding: 50px 0 100px;
  text-align: center;
}

.how-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--white);
}

/* grid layout for 3 reels */
.how-grid{
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.how-card{
  width: 100%;
}

/* Shadow shell */
.how-video-shell {
  width: 100%;
  border-radius: 20px;
  box-shadow: none;

  /* SEAM FIX */
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}

/* Clip container (rounded corners + overflow only) */
.how-video-container {
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  transform: translateZ(0);
}

/* Ratio wrapper */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;

  /*  thumbnail preview */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Shorts ratio (vertical reels) */
.video-embed.is-short{
  aspect-ratio: 9 / 16;
}

/* Iframe fills the ratio box */
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Overlay button sits above iframe until activated */
.video-activate {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;

  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Play indicator */
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);

  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.video-play::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid rgba(255,255,255,0.95);
}

/* ---------- ≤ 992px (2 columns) ---------- */
@media (max-width: 992px){
  .how-title{
    font-size: 36px;
    margin-bottom: 30px;
  }

  .how-grid{
    grid-template-columns: repeat(2, 1fr);
    max-width: 980px;
    gap: 18px;
  }
}

/* ---------- ≤ 768px (1 column) ---------- */
@media (max-width: 768px) {
  .how-title {
    font-size: 32px;
    margin-bottom: 26px;
  }

  .how-grid{
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .how-video-shell{
    border-radius: 18px;
  }

  .how-video-container{
    border-radius: 18px;
  }

  .video-play {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .video-play::before {
    left: 23px;
    top: 17px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 16px solid rgba(255,255,255,0.95);
  }
}

/* ---------- ≤ 480px (still 1 column, tighter spacing) ---------- */
@media (max-width: 480px) {
  .how-title {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .how-grid{
    padding: 0 12px;
    max-width: 440px;
    gap: 16px;
  }

  .how-video-shell{
    border-radius: 16px;
  }

  .how-video-container{
    border-radius: 16px;
  }
}

/* PERF FIX: backdrop-filter can cause buffering on mobile/tablet GPUs */
@media (max-width: 992px) {
  .video-play {
    backdrop-filter: none !important;
    background: rgba(0,0,0,0.50) !important;
  }
}

/* TALK TO SALES SECTION */
.sales-section {
  width: 100%;
  padding: 60px 20px;
  background: linear-gradient(
    90deg,
    var(--main-dark-blue),
    var(--main-light-blue)
  );
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  /* keep layout stable */
  overflow: hidden;
  isolation: isolate;
}

.sales-content {
  max-width: 1100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  color: var(--white);
}

/* Text */
.sales-text h2 {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 15px;
}

.sales-text h2 span {
  color: var(--main-neon-yellow);
}

.sales-text p {
  max-width: 500px;
  line-height: 1.6;
  font-size: 16px;
  opacity: 0.95;
}

/* Button */
.sales-btn-box .sales-btn {
  background: var(--white);
  padding: 14px 32px;
  border-radius: 100px;
  color: var(--main-light-blue);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.25s ease, transform 0.25s ease;
}

.sales-btn-box .sales-btn:hover {
  background: #e8f5ff;
  transform: translateY(-2px);
}

/* =========================================================
   NO SCROLL ANIMATION (FOR ALL DEVICES)
========================================================= */
.sales-text-motion,
.sales-btn-motion {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
  backface-visibility: visible;
}

/* ============================
   RESPONSIVENESS
============================ */

/* Tablet */
@media (max-width: 1024px) {
  .sales-content {
    flex-direction: column;
    text-align: center;
    gap: 22px;
  }

  .sales-text p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 17px;
  }

  .sales-text h2 {
    font-size: 38px;
  }

  .sales-btn-box {
    width: 100%;
    text-align: center;
  }
}

/* Large Mobile */
@media (max-width: 768px) {
  .sales-section {
    padding: 50px 20px;
  }

  .sales-text h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .sales-text p {
    font-size: 15px;
  }

  .sales-btn-box .sales-btn {
    padding: 12px 28px;
    font-size: 16px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .sales-section {
    padding: 45px 18px;
  }

  .sales-text h2 {
    font-size: 28px;
  }

  .sales-text p {
    font-size: 14px;
  }

  .sales-btn-box .sales-btn {
    padding: 12px 24px;
    font-size: 15px;
  }
}

/* =========================================================
   TALK TO SALES POPUP MODAL (NO OVERLAP + RESPONSIVE)
   Breakpoints: 992 / 768 / 480
========================================================= */

.talksales-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.62);
  z-index: 9999;

  /* prevents cut-offs on short screens */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.talksales-modal.is-open{
  display: flex;
}

.talksales-dialog{
  width: 100%;
  max-width: 860px; /* CHANGED: wider for horizontal form */
  background: #fff;
  color: #111;
  border-radius: 18px;
  padding: 26px 22px 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  position: relative;
  animation: talksalesIn .18s ease-out;

  /* safety so content never “touches edges” */
  margin: 12px auto;
}

@keyframes talksalesIn{
  from{ opacity: 0; transform: translateY(14px) scale(.985); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}

.talksales-close{
  position: absolute;
  top: 14px;
  right: 14px;

  border: none;
  background: transparent;
  cursor: pointer;

  padding: 0;
  line-height: 1;
}

/* Font Awesome Icon */
.talksales-close i{
  font-size: 22px;
  color: rgba(0,0,0,.55);
  transition: color .15s ease, transform .15s ease;
}

.talksales-close:hover i{
  color: var(--main-light-blue);
  transform: scale(1.12);
}

.talksales-dialog h2{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.talksales-sub{
  margin: 0 0 16px;
  font-size: 14px;
  color: rgba(0,0,0,.65);
}

/* =========================
   FORM (NO OVERLAP)
========================= */

.talksales-form{
  display: grid;
  gap: 14px;           /* this replaces margin hacks */
}

/* Labels are grid items */
.talksales-form label{
  display: grid;       /* text + field stack cleanly */
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,.72);
  margin: 0;          /* remove any default spacing issues */
  line-height: 1.2;
}

.talksales-form input,
.talksales-form textarea{
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.16);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #fff;
  line-height: 1.25;
  box-sizing: border-box;
}

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

.talksales-form input:focus,
.talksales-form textarea:focus{
  border-color: rgba(0,123,255,.6);
  box-shadow: 0 0 0 4px rgba(0,123,255,.12);
}

/* Submit button */
.talksales-submit{
  width: 100%;
  margin: 0;
  padding: 13px 14px;
  border-radius: 100px;
  border: 0;
  cursor: pointer;
  background: var(--main-light-blue);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  transition: background 0.3s;
}

.talksales-submit:hover{
  background: var(--black);
}

.talksales-submit:disabled{
  opacity: .7;
  cursor: not-allowed;
}

/* Status messages inside modal */
.talksales-status{
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  min-height: 18px;
  text-align: center;
}

.talksales-status.is-loading{ color: rgba(0,0,0,.65); }
.talksales-status.is-success{ color: #0b7a34; font-weight: 700; }
.talksales-status.is-error{ color: #b00020; font-weight: 700; }

.talksales-foot{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  text-align: center;
}

/* Ensure your CTA button styles apply to <button> too */
.sales-btn-box .sales-btn{
  border: 0;
  cursor: pointer;
}

/* =========================
   HORIZONTAL (2-COLUMN) LAYOUT FOR LAPTOPS
   - Keeps modal shorter on smaller laptop screens
   - Reverts to 1-column on mobile (<=768)
========================= */
@media (min-width: 768px){
  .talksales-form{
    grid-template-columns: 1fr 1fr; /* 2 columns */
    column-gap: 14px;
    row-gap: 14px;
  }

  /* Message label is the 5th label in your HTML */
  .talksales-form label:nth-of-type(5){
    grid-column: 1 / -1; /* span both columns */
  }

  /* Make the textarea less tall in horizontal mode */
  .talksales-form label:nth-of-type(5) textarea{
    min-height: 96px;
  }

  /* Full-width elements */
  .talksales-submit,
  .talksales-status,
  .talksales-foot{
    grid-column: 1 / -1;
  }
}

/* =========================
   RESPONSIVENESS
========================= */

/* <= 992px */
@media (max-width: 992px){
  .talksales-modal{ padding: 16px; }
  .talksales-dialog{
    max-width: 760px;
    padding: 24px 20px 16px;
  }
}

/* <= 768px */
@media (max-width: 768px){
  .talksales-modal{
    padding: 14px;
    align-items: flex-start; 
  }
  .talksales-dialog{
    margin: 16px auto;
    max-width: 560px;
    padding: 22px 18px 14px;
    border-radius: 16px;
  }
  .talksales-dialog h2{ font-size: 21px; }
  .talksales-form{ gap: 12px; } /* 1 column naturally */
}

/* <= 480px */
@media (max-width: 480px){
  .talksales-modal{ padding: 10px; }
  .talksales-dialog{
    margin: 12px auto;
    padding: 18px 14px 12px;
    border-radius: 14px;
  }
  .talksales-dialog h2{ font-size: 19px; }
  .talksales-sub{ font-size: 13px; margin-bottom: 12px; }
  .talksales-close{ width: 36px; height: 36px; border-radius: 12px; }
  .talksales-form input,
  .talksales-form textarea{
    padding: 11px 12px;
    border-radius: 12px;
  }
  .talksales-submit{
    padding: 12px 12px;
    border-radius: 100px;
    font-size: 14px;
  }
}

/* RATING SECTION */
.ratings-section {
    text-align: center;
    padding: 40px 0;
    padding-bottom: 60px;
    margin: 70px 0 70px 0;
    background: var(--close-white);
    font-family: Arial, sans-serif;
}

/* Title */
.ratings-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* Carousel container */
.ratings-carousel {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 20px;

    /* OPTIMIZATION: prevents awkward overflow/jumps between breakpoints */
    flex-wrap: wrap;
}

/* Cards */
.rating-card {
    width: 260px;
    background: #000;
    color: var(--light-grey);
    padding: 25px;
    border-radius: 200px;

    text-align: center;           
    display: flex;
    flex-direction: column;
    align-items: center;         
    gap: 12px;

    /* OPTIMIZATION: prevents padding from affecting width calculations */
    box-sizing: border-box;
}

/* Stars */
.stars {
    font-size: 16px;
    letter-spacing: 3px;
    margin-bottom: 6px;

    /* OPTIMIZATION: real centering (removes “wide/off” look) */
    padding-left: 0;
    width: 100%;
    text-align: center;
}

/* Profile layout */
.profile {
    display: flex;
    align-items: center;
    justify-content: center;    
    gap: 12px;
    text-align: left;    
}

/* OPTIMIZATION: keep media tidy */
.profile img {
    width: 65px;
    height: 65px;
    margin-top: -30px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Name + info */
.info h3 {
    font-size: 15px;
    margin: 0;
    font-weight: 600;
}

.info p {
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.85;
}

/* MOBILE + TABLET (up to 1024px) */
@media (max-width: 1024px) {

    .ratings-carousel {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        flex-wrap: nowrap;
    }

    .rating-card {
        width: 88%;
        max-width: 360px;
        padding: 28px 30px;
        border-radius: 20px;
        text-align: center;  
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        box-sizing: border-box;
    }

    /* Stars aligned with text */
    .stars {
        font-size: 15px;
        letter-spacing: 2px;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
    }

    /* Center image + increase size */
    .profile {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .profile img {
        width: 75px;
        height: 75px;
        margin: 0 auto;       
        display: block;
        object-fit: cover;
        border-radius: 50%;
    }

    /* Center text under image */
    .info h3 {
        font-size: 16px;
        text-align: center;
        margin: 0;
    }

    .info p {
        font-size: 13px;
        margin-top: 3px;
        text-align: center;
    }
}

/* SMALL MOBILE (up to 450px) */
@media (max-width: 450px) {

    .rating-card {
        width: 92%;
        max-width: 330px;
        border-radius: 50px;
        padding: 24px 24px;
        box-sizing: border-box;
    }

    .profile img {
        width: 70px;
        height: 70px;
    }

    .stars {
        font-size: 14px;
    }
}

/*  ======================================
                SECONDARY NAV
======================================== */
header.nav-bar{
  position: sticky;
  top: 40px; 
  width: calc(100% - 80px);
  margin: 0 auto;
  max-width: 1150px;

  background: linear-gradient(60deg, var(--close-white) 100%, var(--white) 100%);
  padding: 22px 40px;

  border-radius: 100px;
  border: 1px solid var(--black);

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 999;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  /* No top animation */
  transition:
    padding 0.3s ease,
    border-radius 0.3s ease,
    box-shadow 0.3s ease;
}

header.nav-bar.shrink{
  padding: 12px 40px;
  border-radius: 60px;
}

/* LOGO */
header.nav-bar .sec-logo-img{
  height: 70px;
  width: auto;
  object-fit: contain;
  transition: height 0.3s ease;
}

header.nav-bar.shrink .sec-logo-img{
  height: 50px;
}

/* NAV LINKS (DESKTOP) */
header.nav-bar .sec-nav-links{
  display: flex;
  gap: 32px;
  align-items: center;
}

header.nav-bar .sec-nav-links a{
  color: var(--black);
  text-decoration: none;
  font-size: 15px;

  /* FULL CAPS */
  text-transform: uppercase;

  /* Optional: nicer spacing */
  letter-spacing: 0.10px;
  font-weight: 500;
}
header.nav-bar .sec-nav-links a:hover{
  color: var(--main-light-blue);
}

/*  ==============================
        SECONDARY DROPDOWN
==============================  */
header.nav-bar .sec-dropdown{
  position: relative;
}

header.nav-bar .sec-dropdown-toggle{
  background: none;
  border: none;
  color: var(--black);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

header.nav-bar .sec-arrow{
  transition: transform 0.3s ease;
}

header.nav-bar .sec-dropdown-menu{
  position: absolute;
  top: 32px;
  left: 0;

  background: var(--black);
  border-radius: 12px;  
  min-width: 360px;

  padding: 10px 0;
  display: none;
}

/* LINKS */
header.nav-bar .sec-dropdown-menu a{
  display: block;
  padding: 10px 18px;

  margin: 4px 12px;    
  border-radius: 8px;   

  color: var(--white);
  text-decoration: none;

  transition: background-color 0.35s ease,
              color 0.35s ease;
}

/* Smooth hover */
header.nav-bar .sec-dropdown-menu a:hover{
  background-color: rgba(255,255,255,0.08);
  color: var(--main-light-blue);
}

/* JS open classes */
header.nav-bar .sec-dropdown-menu.open{
  display: block;
}

header.nav-bar .sec-arrow.rotate{
  transform: rotate(180deg);
}

/* DESKTOP BUTTONS */
header.nav-bar .sec-nav-buttons{
  display: flex;
  align-items: center;
  gap: 15px;
}

header.nav-bar .sec-login-btn{
    color: var(--black);
    text-decoration: none;
    
    /* FULL CAPS */
    text-transform: uppercase;
    
    /* Optional: cleaner uppercase spacing */
    letter-spacing: 0.10px;
    font-weight: 500;
}

header.nav-bar .sec-login-btn:hover{
  color: var(--main-light-blue);
}

header.nav-bar .sec-profile-icon{
  display: inline-block;
  margin-right: 8px;
}

header.nav-bar .sec-profile-icon img{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.2s;
}
header.nav-bar .sec-profile-icon img:hover{
  transform: scale(1.1);
}

header.nav-bar .sec-buy-btn{
  background: var(--black);
  color: var(--white);
  padding: 10px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}
header.nav-bar .sec-buy-btn:hover{
  background: var(--main-light-blue);
  color: var(--white);
}

/* ===========================================
        DESKTOP CART ICON + BLUE BADGE
=========================================== */
header.nav-bar a.sec-cart-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* prevent underline / visited link styling from affecting any child */
header.nav-bar a.sec-cart-button,
header.nav-bar a.sec-cart-button:visited,
header.nav-bar a.sec-cart-button *{
  text-decoration: none !important;
}

/* icon (normal state: unchanged) */
header.nav-bar a.sec-cart-button img{
  display: block;
  width: 24px;
  height: 24px;
}

/* hover: Blu Media Connect Blue (#00B1FF) */
header.nav-bar a.sec-cart-button:hover img{
  filter: invert(54%) sepia(96%) saturate(2400%) hue-rotate(165deg)
          brightness(103%) contrast(101%);
}

/* BLUE BADGE — styles the REAL number (<?= $cart_count ?>) */
header.nav-bar .sec-cart-badge{
  position: absolute;
  top: -7px;
  right: -7px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;

  background: var(--main-light-blue);
  color: var(--white) !important;

  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;

  border-radius: 50%;
  display: inline-block;

  /* ensure it never looks like a link */
  text-decoration: none !important;
  pointer-events: none;
}

/* If empty string (count=0), hide it cleanly */
header.nav-bar .sec-cart-badge:empty{
  display: none !important;
}

/* Desktop: NEVER show the mobile pill */
@media (min-width: 993px){
  header.nav-bar .sec-cart-count{
    display: none !important;
  }
  header.nav-bar .sec-mobile-actions{
    display: none !important;
  }
}

/* Desktop defaults: hide mobile UI */
header.nav-bar .sec-hamburger{ display: none; }
header.nav-bar .sec-mobile-close{ display: none; }
header.nav-bar .sec-mobile-actions{ display: none; }

/* ===============================
   MOBILE / TABLET (<= 992px)
   Placement matches PRIMARY
=============================== */
@media (max-width: 992px){

  html, body{
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Header fixed */
  header.nav-bar{
    position: fixed;
    top: 40px; /* constant */
    left: 16px;
    right: 16px;
    width: auto;
    margin: 0;
    z-index: 5000;
  }

  header.nav-bar.shrink{
    padding: 12px 32px;
    border-radius: 50px;
  }

  /* secondary pages only */
  body.secondary-page{
    padding-top: 110px;
  }

  /* Hamburger */
  header.nav-bar .sec-hamburger{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 6000;
  }

  header.nav-bar .sec-hamburger span{
    display: block;
    height: 3px;
    width: 100%;
    background: var(--black);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  header.nav-bar .sec-hamburger.active span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
  header.nav-bar .sec-hamburger.active span:nth-child(2){ opacity: 0; }
  header.nav-bar .sec-hamburger.active span:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); }

  /* Full-screen menu */
  header.nav-bar nav.sec-nav-links{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    background: var(--white);
    color: var(--black);

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 92px 26px 26px;
    gap: 6px;

    transform: translateX(110%);
    transition: transform 0.28s ease;

    z-index: 9000;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  header.nav-bar nav.sec-nav-links.open{
    transform: translateX(0);
  }

  /* X close */
  header.nav-bar .sec-mobile-close{
    display: block;
    position: absolute;
    top: 22px;
    right: 22px;
    background: none;
    border: none;
    color: var(--black);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 9100;
    padding: 6px;
  }

  /* Menu links */
  header.nav-bar nav.sec-nav-links > a{
    color: var(--black);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 4px;
    border-radius: 10px;
    text-align: left;
  }

  /* Products row button */
  header.nav-bar nav.sec-nav-links .sec-dropdown{
    width: 100%;
  }

  header.nav-bar nav.sec-nav-links .sec-dropdown-toggle{
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;

    color: var(--black);
    font-size: 18px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 4px;
    border-radius: 10px;
    text-align: left;
  }

  header.nav-bar nav.sec-nav-links .sec-arrow{
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
    color: var(--black);
    opacity: 0.95;
  }
  header.nav-bar nav.sec-nav-links .sec-arrow.rotate{
    transform: rotate(0deg);
  }

  /* Dropdown panel */
  header.nav-bar nav.sec-nav-links .sec-dropdown-menu{
    position: relative;
    top: 0;
    left: 0;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    background: rgba(0,0,0,0.05);
    border-radius: 12px;

    display: none;
    padding: 6px 0 10px;
    margin: 0 0 6px;

    box-sizing: border-box;
    overflow: hidden;
  }

  header.nav-bar nav.sec-nav-links .sec-dropdown.open .sec-dropdown-menu{
    display: block;
  }

  header.nav-bar nav.sec-nav-links .sec-dropdown-menu a{
    display: block;
    padding: 14px 18px;
    font-size: 16px;
    color: var(--black);
    text-decoration: none;
    border-radius: 10px;
  }

  /* ===== MOBILE BOTTOM ACTIONS ===== */
  header.nav-bar .sec-mobile-actions{
    display: flex;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(0,0,0,0.15);
    flex-direction: column;
    gap: 16px;
  }

  header.nav-bar .sec-mobile-login{
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--black);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
  }

  header.nav-bar .sec-mobile-login img{
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }

  /* BUY button */
  header.nav-bar .sec-mobile-buy-btn{
    display: block;
    width: 100%;
    box-sizing: border-box;

    background: var(--black);
    color: var(--white) !important;
    text-align: center;

    padding: 14px 16px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
  }

  /* Cart row (mobile menu) */
  header.nav-bar .sec-mobile-cart{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--black);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
  }

  /* Prevent underline/visited styles from touching the number */
  header.nav-bar .sec-mobile-cart,
  header.nav-bar .sec-mobile-cart:visited,
  header.nav-bar .sec-mobile-cart *{
    text-decoration: none !important;
  }

  header.nav-bar .sec-mobile-cart img{
    width: 22px;
    height: 22px;
    display: block;
  }

  /* MOBILE BLUE PILL COUNT — styles REAL value (<?= $cart_count ?>) */
  header.nav-bar .sec-cart-count{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: var(--main-light-blue);
    color: var(--white) !important;

    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;

    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
  }

  /* If empty string (count=0), hide it cleanly */
  header.nav-bar .sec-cart-count:empty{
    display: none !important;
  }

  /* Hide desktop row on mobile */
  header.nav-bar .sec-nav-buttons{
    display: none !important;
  }
}

/* Secondary navbar avatar (desktop) */
.sec-profile-icon .sec-nav-avatar{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #000000;
  background: #000000;
}

/* Secondary mobile menu avatar (white ring) */
.sec-mobile-login img{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #000000; 
  background: #000000;
  box-sizing: border-box;
}

/* =========================================================
   SECONDARY NAVBAR – AVATAR + DROPDOWN
   Mirrors PRIMARY behavior
   ========================================================= */

/* Wrapper */
.avatar-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Avatar button */
.avatar-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Avatar image */
.sec-nav-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #ffffff;
}

/* Dropdown menu */
.avatar-menu {
  position: absolute;
  top: calc(100% + 10px);

  right: 0;  
  left: auto;   

  min-width: 260px;

  background: var(--black);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  padding: 8px 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 9999;
}

/* Show menu */
.avatar-dropdown.is-open .avatar-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menu links */
.avatar-menu a {
  display: block;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

/* Hover */
.avatar-menu a:hover {
  background: #f3f4f6;
}

/* Logout emphasis */
.avatar-menu a:last-child {
  color: #e53935;
}

.avatar-menu a:last-child:hover {
  background: #fdecea;
  color: #b71c1c;
}

/* ==================================
   AVATAR MENU: WALLET BALANCE ROW
================================== */
.avatar-menu .avatar-wallet-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  margin: 6px 10px 8px;
  padding: 10px 12px;

  border-radius: 10px;

  /* Keep it consistent with your dropdown */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(34,197,94,0.22);

  text-transform: none;
}

.avatar-menu .avatar-wallet-row:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(34,197,94,0.35);
}

/* LEFT cluster */
.avatar-menu .awr-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Icon: subtle green */
.avatar-menu .awr-left i{
  flex: 0 0 auto;
  font-size: 15px;
  opacity: 0.95;
  color: rgba(34,197,94,0.85);
}

/* Label: clean single line */
.avatar-menu .awr-label{
  flex: 1 1 auto;
  min-width: 0;

  font-size: 13.5px;
  font-weight: 600;

  white-space: nowrap;    
  overflow: hidden;
  text-overflow: ellipsis;

  color: rgba(255,255,255,0.92);
}

/* Amount: the “green” you wanted */
.avatar-menu .awr-amount{
  flex: 0 0 auto;
  white-space: nowrap;

  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .2px;

  color: #22c55e;
}

.avatar-menu .avatar-divider{
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 0 10px 6px;
}

/* ====================================================
                        CART PAGE
==================================================== */
.cart-page{
  max-width: 1250px;
  margin: 110px auto;
  padding: 0 20px;
}

.cart-title{
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 26px;
  color: var(--black);
}

/* 2-column layout */
.cart-layout{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 34px;
  align-items: start;
}

/* LEFT */
.cart-left{
  width: 100%;
}

.cart-container{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Item card */
.cart-item{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: start;

  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
}

.cart-item-media{
  width: 100%;
}

.cart-item-image{
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 14px; 
  display: block;
}

.cart-item-info{
  min-width: 0;
}

.cart-item-name{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
}

.cart-item-material{
  margin: 0 0 6px;
  color: var(--main-medium-grey);
  font-size: 14px;
}

.cart-item-price{
  margin: 0 0 12px;
  font-weight: 800;
  color: var(--black);
}

/* Actions row */
.cart-item-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Quantity controls (modern pill) */
.qty-controls{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  border: 1px solid rgba(0,0,0,0.12);
  background: var(--close-white);
  border-radius: 999px;
  padding: 8px 10px;
}

.qty-btn{
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  transition: 0.2s ease;
}

.qty-btn:hover{
  background: var(--main-light-blue);
  color: var(--white);
}

.qty-value{
  min-width: 26px;
  text-align: center;
  font-weight: 800;
  color: var(--black);
}

/* Remove icon button */
.remove-item-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: transparent;
  border: none;
  color: #cc0000;
  cursor: pointer;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 12px;
  transition: 0.2s ease;
}

.remove-item-btn:hover{
  background: rgba(204,0,0,0.08);
}

.remove-item-btn i{
  font-size: 18px;
}

.remove-text{
  font-size: 14px;
}

/* RIGHT summary (sticky on scroll) */
.cart-right{
  position: sticky;
  top: 120px;
}

.cart-summary{
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.cart-summary-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 14px;
}

.cart-total-label{
  margin: 0;
  font-weight: 800;
  color: var(--black);
  font-size: 16px;
}

.cart-total-price{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
  color: var(--black);
}

.checkout-button{
  display: block;
  width: auto;
  padding: 13px 18px;
  margin-top: 12px;

  background-color: var(--main-light-blue);
  color: var(--white);
  text-decoration: none;
  text-align: center;

  border-radius: 999px;
  font-weight: 900;
  transition: 0.25s ease;
}

.checkout-button:hover{
  background-color: var(--black);
  color: var(--white);
}

/* =========================================================
        BLOCKED CHECKOUT BUTTON (Details Required)
========================================================= */
#checkoutBlockedBtn{
  background: rgba(220,38,38,0.12) !important;
  color: #b91c1c !important;
  border: 2px solid rgba(220,38,38,0.35) !important;

  cursor: not-allowed !important;
  opacity: 1 !important;

  box-shadow: none !important;
}

/* Prevent hover styling from activating */
#checkoutBlockedBtn:hover{
  background: rgba(220,38,38,0.12) !important;
  color: #b91c1c !important;
}

.cart-summary-note{
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--main-medium-grey);
  line-height: 1.5;
}

/* Empty state */
.cart-empty{
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

.cart-empty h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
}

.cart-empty p{
  margin: 0 0 14px;
  color: var(--main-medium-grey);
}

.cart-empty-btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  background: var(--black);
  color: var(--white);
  font-weight: 900;
}

.cart-empty-btn:hover{
  background: var(--main-light-blue);
}

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

/* <= 992px */
@media (max-width: 992px){
  .cart-layout{
    grid-template-columns: 1fr;
  }

  .cart-right{
    position: static;
  }
}

/* <= 768px */
@media (max-width: 768px){
  .cart-page{
    margin: 95px auto;
    padding: 0 16px;
  }

  .cart-title{
    font-size: 28px;
  }

  .cart-item{
    grid-template-columns: 110px 1fr;
    padding: 14px;
  }

  .cart-item-image{
    height: 100px;
  }
}

/* <= 480px */
@media (max-width: 480px){
  .cart-item{
    grid-template-columns: 1fr;
  }

  .cart-item-image{
    height: 190px;
  }

  .cart-item-actions{
    justify-content: flex-start;
  }
}

/*      ======================================================    */
/*                          CHECKOUT LAYOUT                       */
/*      ======================================================    */
.checkout-wrapper{
  max-width: 1250px;
  margin: 70px auto;
  padding: 20px;
  padding-bottom: 80px;
}

/* Title */
.checkout-title{
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 26px;
  color: var(--black);
}

.checkout-wrapper,
.checkout-grid,
.checkout-left,
.checkout-right,
.order-summary{
  overflow: visible !important;
}

/* Grid */
.checkout-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: start;
}

/* LEFT */
.checkout-left{
  background: var(--white);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

/* Items */
.cart-items{
  display: flex;
  flex-direction: column;
}

.checkout-item{
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.checkout-item:last-child{
  border-bottom: none;
}

.checkout-item img{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.checkout-item-info{
  min-width: 0;
}

.checkout-item-info h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
}

.checkout-item-info p{
  margin: 3px 0;
  font-size: 13.5px;
  color: var(--main-medium-grey);
  line-height: 1.45;
}

.checkout-item-price{
  font-weight: 900;
  font-size: 14.5px;
  color: var(--black);
  white-space: nowrap;
  text-align: right;
}

/* RIGHT  */
.checkout-right{
  align-self: start;  
  position: relative;
  min-height: 1px;
  position: sticky;
  top: 120px;
}

/* Summary card look */
.order-summary{
  background: var(--white);
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.order-summary h2{
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 900;
  color: var(--black);
}

/* Order Summary Breakdown */
.summary-breakdown{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.summary-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}

.summary-row + .summary-row{
  border-top: 1px solid rgba(0,0,0,0.06);
}

.tax-label{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.tax-rate{
  font-size: 12px;
  font-weight: 700;
  color: var(--main-medium-grey);
}

.summary-total{
  font-size: 16px;
  font-weight: 900;
}

.summary-total .checkout-total{
  font-size: 18px;
  font-weight: 900;
  color: var(--main-dark-grey);
}

.summary-line{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.10);

  font-size: 16px;
  font-weight: 900;
  color: var(--main-light-blue);
}

.checkout-total{
  font-size: 18px;
  font-weight: 900;
  color: var(--main-light-blue);
  white-space: nowrap;
}

/* Wallet section */
.wallet-balance-summary{
  margin: 14px 0 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
}

.wallet-balance-summary p{
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--main-dark-grey);
}

.wallet-balance-summary label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--black);
  margin: 8px 0;
  cursor: pointer;
}

.wallet-balance-summary input[type="radio"]{
  accent-color: var(--main-light-blue);
  transform: translateY(-0.5px);
}

/* PayPal container */
#paypal-button-container{
  margin-top: 12px;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   CHECKOUT — RESPONSIVE (992 / 768 / 480)
   (Keeps your desktop intact)
========================================================= */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .checkout-wrapper{
    margin: 110px auto;
    padding: 0 18px;
    padding-bottom: 30px;
  }

  .checkout-grid{
    grid-template-columns: 1fr; /* stack */
    gap: 22px;
  }

  .checkout-right{
    position: static;
    top: auto;
  }

  .checkout-left{
    padding: 20px;
    border-radius: 16px;
  }

  .checkout-item{
    grid-template-columns: 82px 1fr auto;
    gap: 14px;
    padding: 16px 0;
  }

  .checkout-item img{
    width: 82px;
    height: 82px;
    border-radius: 12px;
  }

  .order-summary{
    padding: 20px;
    border-radius: 16px;
  }

  #paypal-button-container{
    max-width: 520px;
  }
}

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

  .checkout-wrapper{
    margin: 110px auto;
    padding: 0 16px;
    padding-bottom: 20px !important;
  }

  .checkout-title{
    font-size: 28px;
  }

  .checkout-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .checkout-left{
    padding: 18px;
    border-radius: 14px;
  }

  .checkout-item{
    grid-template-columns: 74px 1fr;
    grid-template-areas:
      "img info"
      "price price";
    align-items: start;
    gap: 12px;
    padding: 14px 0;
  }

  .checkout-item img{
    grid-area: img;
    width: 74px;
    height: 74px;
    border-radius: 12px;
  }

  .checkout-item-info{
    grid-area: info;
  }

  .checkout-item-price{
    grid-area: price;
    text-align: left;
    margin-top: 6px;
  }

  .checkout-item-info h3{
    font-size: 15.5px;
  }

  .checkout-item-info p{
    font-size: 13.5px;
  }

  .order-summary{
    padding: 18px;
    border-radius: 14px;
  }

  .summary-line{
    font-size: 15.5px;
  }

  .checkout-total{
    font-size: 17px;
  }

  #paypal-button-container{
    max-width: 520px;
  }

  .checkout-right{
    position: static;
    top: auto;
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .checkout-wrapper{
    margin: 100px auto;
    padding: 0 14px;
    padding-bottom: 20px !important;
  }

  .checkout-left{
    padding: 16px;
    border-radius: 14px;
  }

  .checkout-item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "info"
      "price";
    gap: 10px;
    padding: 14px 0;
  }

  .checkout-item img{
    width: 100%;
    height: 190px;
    border-radius: 14px;
  }

  .checkout-item-price{
    text-align: left;
    font-size: 14px;
  }

  .order-summary{
    padding: 16px;
    border-radius: 14px;
  }

  .order-summary h2{
    font-size: 18px;
  }

  .summary-line{
    font-size: 15px;
  }

  .checkout-total{
    font-size: 16.5px;
  }

  .wallet-balance-summary{
    padding: 12px;
    border-radius: 12px;
  }

  #paypal-button-container{
    max-width: 100%;
  }

  /* ensure the right column is not sticky */
  .checkout-right{
    position: static;
    top: auto;
  }
}

/* STRIPE CARD FORM STYLING 
#card-submit-button {
    background-color: var(--main-light-blue);
    color: var(--white);
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 20px auto 0 auto;
}

#card-submit-button:hover {
    background-color: var(--black);
    color: var(--white); 
    transform: translateY(-2px);
}

#card-submit-button:active {
    transform: translateY(0);
}

#card-errors {
    font-size: 14px;
    color: red;
    margin-top: 10px;
    text-align: center;
} */


/* ABOUT HERO SECTION */
.sec-hero {
    position: relative;
    height: 680px;
    display: flex;
    align-items: center;
    padding: 0 160px;
    color: var(--white);
    background-image: url('images/hero/IFPP_IHB_Six.png');
    background-size: cover;
    background-position: center;
}

.sec-hero {
    margin-top: -130px; /* adjust if needed */
    padding-top: 120px; /* re-add the lost space so content stays aligned */
}


/* GRADIENT OVERLAY (separate element to avoid browser bugs) */
.sec-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        60deg,
        rgb(0, 0, 0) 20%,
        rgba(0, 0, 0, 0.637) 80%,
        rgba(0, 0, 0, 0.25) 100%
    );
    z-index: 1;
}

/* HERO CONTENT */
.sec-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

.sec-hero h1 {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.subtitle {
    font-size: 30px;
    margin-bottom: 35px;
    max-width: 800px;
}

/* HERO CONTENT APPEAR MOTION */
.sec-hero-motion {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.sec-hero-motion.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   SECONDARY HERO — MOBILE & TABLET
   (MATCHES PRIMARY HERO FONT SIZING)
========================================= */

/* Tablet + large mobile */
@media (max-width: 768px) {

  .sec-hero{
    height: auto;
    min-height: 560px;
    padding: 0 40px;
    align-items: flex-start;
  }

  /* More specific than generic .sec-hero-content rules */
  .sec-hero .sec-hero-content{
    padding-top: 210px; 
    margin-top: 0;   
  }

  .sec-hero h1{
    font-size: 50px;
    margin-bottom: 15px;
    line-height: 1.15;
  }

  .sec-hero .subtitle{
    font-size: 22px;
    margin-bottom: 20px;
  }

  .sec-hero-motion{
    transform: translateY(20px);
  }
}

/* Small mobile */
@media (max-width: 480px) {

  .sec-hero{
    height: auto;
    min-height: 520px;
    padding: 0 20px;
    align-items: flex-start;
  }

  .sec-hero .sec-hero-content{
    padding-top: 200px;
    margin-top: 0;
  }

  .sec-hero h1{
    font-size: 35px;
    margin-bottom: 10px;
    line-height: 1.2;
  }

  .sec-hero .subtitle{
    font-size: 18px;
    margin-bottom: 15px;
  }

  .sec-hero-motion{
    transform: translateY(10px);
  }
}

/* =========================================================
   FOUNDER SECTION
========================================================= */

.founder-section {
  width: 100%;
  padding: 80px 0;
  margin: 70px 0;
  display: flex;
  justify-content: center;
  background: var(--close-white);
}

.founder-container {
  max-width: 1250px;
  display: flex;
  align-items: center;
  gap: 55px;
  padding: 20px;
}

/* Reverse layout */
.founder-reverse {
  flex-direction: row-reverse;
}

.founder-image {
  width: 300px;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

.founder-text {
  max-width: 550px;
}

.founder-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 25px;
  color: var(--main-medium-blue);
}

.founder-text p {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 18px;
  color: var(--black);
}

/* =========================================================
   APPEAR ANIMATION (FADE ONLY)
========================================================= */

.founder-appear{
  opacity: 0;
  transition: opacity 0.9s ease-out;
}

.founder-appear.active{
  opacity: 1;
}

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

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .founder-section{
    padding: 70px 0;
    margin: 70px 0;
  }

  .founder-container{
    gap: 28px;
    padding: 0 22px;
    flex-wrap: wrap;
    display: flow-root;
  }

  .founder-image{
    width: 360px;
    height: auto;
  }

  .founder-text{
    max-width: 620px;
  }

  .founder-text p{
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
}

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

  .founder-section{
    padding: 70px 0;
    margin: 70px 0;
  }

  .founder-container{
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    display: flow-root;
  }

  .founder-image-box{
    width: 100%;
  }

  .founder-image{
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  .founder-text{
    max-width: 520px;
    text-align: left;
  }

  .founder-text p{
    font-size: 15.5px;
    line-height: 1.7;
    margin-bottom: 0;
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .founder-section{
    padding: 70px 0;
    margin: 70px 0;
  }

  .founder-container{
    padding: 0 16px;
    display: flow-root;
  }

  .founder-image{
    height: auto;
    border-radius: 12px;
  }

  .founder-text p{
    font-size: 15px;
  }
}

/* ABOUT SMARTCONNECT SOLUTIONS SECTION */
.smartcon-section {
    width: 100%;
    padding: 80px 0;
    margin: 70px 0;
    display: flex;
    justify-content: center;
    background: linear-gradient(90deg, var(--main-dark-blue), var(--main-light-blue));
}

.smartcon-container {
    max-width: 1250px;
    display: flex;
    align-items: center;
    gap: 55px;
    padding: 20px;
}

.smartcon-image {
    width: 300px;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

.smartcon-text {
    max-width: 550px;
}

.smartcon-text p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 18px;
    color: var(--white);
}

/* Motion Animations */
.smart-motion-left {
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.smart-motion-right {
    transform: translateX(50px);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.smart-motion-left.active,
.smart-motion-right.active {
    transform: translateX(0);
    opacity: 1;
}

/* =========================================================
   ABOUT SMARTCONNECT SECTION — RESPONSIVE ONLY (UPDATED)
   - Keeps desktop unchanged
   - Tablet breakpoint: 992px
   - Adds margin-collapse protection for consistent top/bottom spacing
   - Prevents the smallest breakpoint from unintentionally increasing spacing
========================================================= */

/* ---------- TABLET (<= 992px): reduce gap, allow wrapping ---------- */
@media (max-width: 992px){

  .smartcon-section{
    padding: 70px 0;
    margin: 70px 0;
  }

  .smartcon-container{
    gap: 28px;
    padding: 0 22px;
    flex-wrap: wrap;

    /* Prevent margin-collapsing so top/bottom spacing stays consistent */
    display: flow-root;
  }

  .smartcon-image{
    width: 360px;
    height: auto;
  }

  .smartcon-text{
    max-width: 620px;
  }

  .smartcon-text p{
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }

  /* Motion: reduce travel distance on smaller screens */
  .smart-motion-left{ transform: translateX(-24px); }
  .smart-motion-right{ transform: translateX(24px); }
}

/* ---------- MOBILE (<= 768px): stack image above text ---------- */
@media (max-width: 768px){

  .smartcon-section{
    padding: 70px 0;
    margin: 70px 0;
  }

  .smartcon-container{
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 18px;

    /* Prevent margin-collapsing so top/bottom spacing stays consistent */
    display: flow-root;
  }

  .smartcon-image-box{
    width: 100%;
  }

  .smartcon-image{
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  .smartcon-text{
    max-width: 520px;
    text-align: left;
  }

  .smartcon-text p{
    font-size: 15.5px;
    line-height: 1.7;
    margin-bottom: 0;
  }

  /* Motion: no sideways slide on mobile */
  .smart-motion-left,
  .smart-motion-right{
    transform: translateY(18px);
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  /* Keep spacing consistent (do NOT increase beyond mobile rules) */
  .smartcon-section{
    padding: 70px 0;
    margin: 70px 0;
  }

  .smartcon-container{
    padding: 0 16px;

    /* keep margin-collapsing protection */
    display: flow-root;
  }

  .smartcon-image{
    height: auto;
    border-radius: 12px;
  }

  .smartcon-text p{
    font-size: 15px;
  }
}

/*   ======================================    */
/*          SMARTCONNECT INTRO SECTION         */
/*   ======================================    */
.smartconnect-intro {
    width: 100%;
    background: var(--close-white); 
    padding: 80px 0;
    margin: 70px 0;
    display: flex;
    justify-content: center;
    text-align: center;
}

.sc-intro-container {
    max-width: 900px;
    padding: 0 20px;
}

/* Heading */
.sc-intro-heading {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--black);
}

.sc-intro-heading .blue-text {
    color: var(--black);
}

/* Subtext */
.sc-intro-subtext {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 auto 35px auto;
    max-width: 650px;
    color: var(--black);
}

/* Buttons wrapper */
.sc-intro-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Buttons */
.sc-btn {
    padding: 12px 28px;
    font-size: 14px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
}

.black-btn {
    background: none;
    border: 2px solid var(--black); 
    color: var(--black);
    padding: 12px 28px;       
    border-radius: 25px;           
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.black-btn:hover {
    background: var(--black);
    color: var(--white);
}

.blue-btn {
    background: none;
    border: 2px solid var(--main-medium-blue); 
    color: var(--main-medium-blue);
    padding: 12px 28px;          
    border-radius: 25px;       
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.blue-btn:hover {
    background: var(--main-medium-blue);
    color: var(--white)
}

/* Upward slide animation */
.sc-animate-up {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Active state when visible */
.sc-animate-up.active {
    transform: translateY(0);
    opacity: 1;
}

/* ==================================================
   RESPONSIVE ONLY — SMARTCONNECT INTRO (UPDATED)
   ================================================== */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){
  .smartconnect-intro{
    padding: 70px 0;
    margin: 70px 0;
  }

  .sc-intro-container{
    max-width: 820px;
    padding: 0 18px;

    /* Prevent margin-collapsing so top/bottom spacing stays consistent */
    display: flow-root;
  }

  .sc-intro-heading{
    font-size: 32px;
    margin-top: 0;      
    margin-bottom: 20px;
  }

  .sc-intro-subtext{
    font-size: 16px;
    max-width: 620px;
    margin-bottom: 28px;
  }

  .sc-intro-buttons{
    gap: 14px;
    margin-bottom: 0; 
  }

  .sc-btn,
  .black-btn,
  .blue-btn{
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* ---------- MOBILE (<= 768px) ---------- */
@media (max-width: 768px){
  .smartconnect-intro{
    padding: 60px 0;
    margin: 60px 0;
  }

  .sc-intro-container{
    padding: 0 16px;

    /* Prevent margin-collapsing so top/bottom spacing stays consistent */
    display: flow-root;
  }

  .sc-intro-heading{
    font-size: 26px;
    line-height: 1.25;
    margin-top: 0;      
    margin-bottom: 16px;
  }

  .sc-intro-subtext{
    font-size: 15px;
    max-width: 100%;
    margin-bottom: 22px;
  }

  .sc-intro-buttons{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;    
  }

  .sc-btn,
  .black-btn,
  .blue-btn{
    width: auto;       
    text-align: center;
    padding: 13px 18px;
    white-space: normal;
  }
}

/* ---------- SMALL MOBILE (<= 420px) ---------- */
@media (max-width: 420px){
  .smartconnect-intro{
    padding: 60px 0;    
    margin: 60px 0;
  }

  .sc-intro-container{
    padding: 0 16px;

    /* keep margin-collapsing protection */
    display: flow-root;
  }

  .sc-intro-heading{
    font-size: 23px;
    margin-top: 0;
    margin-bottom: 16px;
  }

  .sc-intro-subtext{
    font-size: 14px;
  }
}

/* =========================================================
   reCAPTCHA v3 badge - force above overlays
========================================================= */
.grecaptcha-badge{
  z-index: 999999 !important;
  position: fixed !important;
}

/* If your hero overlay is covering the whole page, keep it below content */
.contact-hero{
  position: relative;
}

.contact-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none; 
}

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

/* =========================================================
   Contact form alerts (aligned with form, NOT centered)
========================================================= */

/* Wrapper under the submit button */
#formAlertArea{
  width: 100%;
  margin-top: 14px;
}

/* Alert pill */
.form-alert{
  display: inline-block;          /* shrink to text width */
  width: auto;
  max-width: 100%;
  margin: 0;                      /* keep aligned with form column */
  padding: 10px 18px;

  border-radius: 999px;           /* pill */
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;               /* aligned text */
  white-space: normal;

  /* animation */
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .35s ease,
    transform .35s ease,
    max-height .35s ease,
    margin .35s ease,
    padding .35s ease;

  max-height: 120px;
}

/* SUCCESS */
.form-alert-success{
  background: #e9f9ee;
  border: 1px solid #2ecc71;
  color: #146c2e;
}

/* ERROR */
.form-alert-error{
  background: #ffecec;
  border: 1px solid #ff4d4d;
  color: #8b1a1a;
}

/* hidden state */
.form-alert.is-hidden{
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
}

/* =========================================================
   Responsive: 992px
========================================================= */
@media (max-width: 992px){
  .form-alert{
    font-size: 12.5px;
    padding: 9px 16px;
  }
}

/* =========================================================
   Responsive: 768px
========================================================= */
@media (max-width: 768px){
  .form-alert{
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 16px;
  }
}

/* =========================================================
   Responsive: 480px
========================================================= */
@media (max-width: 480px){
  .form-alert{
    font-size: 11.5px;
    padding: 8px 12px;
    border-radius: 14px;
  }
}


/* CONTACT HERO SECTION */
.contact-hero {
    position: relative;
    height: 680px;
    display: flex;
    align-items: center;
    padding: 0 160px;
    color: var(--white);
    background-image: url(images/2149034552.jpg);
    background-size: cover;
    background-position: center;
    margin-top: -130px;
    padding-top: 120px;
}

/* Overlay */
.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        60deg,
        rgb(0, 0, 0) 20%,
        rgba(0, 0, 0, 0.637) 80%,
        rgba(0, 0, 0, 0.25) 100%
    );
    z-index: 1;
}

/* Content */
.contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

.contact-hero h1 {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

/* Animation */
.contact-hero-motion {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.contact-hero-motion.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   CONTACT HERO — OPTIMIZED TO MATCH ABOUT HERO
   BREAKPOINTS: 992 / 768 / 480
========================================================= */

/* CONTACT HERO SECTION (DESKTOP BASE) */
.contact-hero{
  position: relative;
  height: 680px;
  display: flex;
  align-items: center;
  padding: 0 160px;
  color: var(--white);
  background-image: url(images/hero/IFPP_IHB_Two.png);
  background-size: cover;
  background-position: center;

  /* Match about hero structure */
  margin-top: -130px;
  padding-top: 120px;
}

/* Overlay */
.contact-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    60deg,
    rgb(0, 0, 0) 20%,
    rgba(0, 0, 0, 0.637) 80%,
    rgba(0, 0, 0, 0.25) 100%
  );
  z-index: 1;
}

/* Content */
.contact-hero-content{
  position: relative;
  z-index: 2;
  max-width: 1000px;
}

.contact-hero h1{
  font-size: 80px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}

/* Animation */
.contact-hero-motion{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.contact-hero-motion.active{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   TABLET (<= 992px)
========================================= */
@media (max-width: 992px){
  .contact-hero{
    height: auto;
    min-height: 620px;
    padding: 0 80px;
    align-items: flex-start;
  }

  .contact-hero .contact-hero-content{
    padding-top: 210px;
    margin-top: 0;
  }

  .contact-hero h1{
    font-size: 60px;
    margin-bottom: 16px;
    line-height: 1.12;
  }

  .contact-hero-motion{
    transform: translateY(20px);
  }
}

/* =========================================
   MOBILE (<= 768px)
========================================= */
@media (max-width: 768px){
  .contact-hero{
    min-height: 560px;
    padding: 0 40px;
    align-items: flex-start;
  }

  .contact-hero .contact-hero-content{
    padding-top: 210px;
    margin-top: 0;
  }

  .contact-hero h1{
    font-size: 50px;
    margin-bottom: 15px;
    line-height: 1.15;
  }
  
    .contact-hero .subtitle{
    font-size: 22px;
    margin-bottom: 20px;
  }

  .contact-hero-motion{
    transform: translateY(20px);
  }
}

/* =========================================
   SMALL MOBILE (<= 480px)
========================================= */
@media (max-width: 480px){
  .contact-hero{
    min-height: 520px;
    padding: 0 20px;
    align-items: flex-start;
  }

  .contact-hero .contact-hero-content{
    padding-top: 300px;
    margin-top: 0;
  }

  .contact-hero h1{
    font-size: 35px;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  
    .contact-hero .subtitle{
    font-size: 18px;
    margin-bottom: 15px;
  }

  .contact-hero-motion{
    transform: translateY(10px);
  }
}

/* ==============
   CONTACT FORM
================= */

.contact-form{
  width: 100%;
  max-width: 800px;
  margin: 60px auto;
  font-family: "Inter", sans-serif;
}

.contact-form label{
  font-weight: 600;
  display: block;
  margin: 30px 0 8px;
  padding-left: 18px;
  font-size: 15px;
  color: var(--black);
}

/* ------------------------------
   TEXT INPUTS & EMAIL FIELDS
   ------------------------------ */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--main-medium-grey);
  border-radius: 20px;
  font-size: 15px;
  height: 45px;
  outline: none;
  background: var(--white);
  box-sizing: border-box;
}

.contact-form input::placeholder,
.contact-form input[type="email"]::placeholder{
  color: var(--main-medium-grey);
}

/* Focus */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color: var(--black);
}

/* ------------------------------
   PHONE INPUT (intl-tel-input) — DESKTOP FIX
   ------------------------------ */
.iti{
  width: 100%;
}

/* Give the typing area more room so it never clashes with the dial code */
.iti--allow-dropdown #phone,
.iti--separate-dial-code #phone,
#phone{
  padding-left: 98px !important;
  border-radius: 100px;
  border: 1px solid var(--black);
  height: 45px;
  font-size: 15px;
  background: var(--white);
  box-sizing: border-box;
}

#phone:focus{
  border-color: var(--black) !important;
}

/* Keep the flag/dial-code area clean and give it space */
.iti__flag-container{
  padding-left: 14px;
  padding-right: 14px;
}

/* If you're using separate dial code mode, ensure dial code has padding */
.iti--separate-dial-code .iti__selected-flag{
  padding-right: 14px !important;
}

.iti__selected-flag{
  background-color: transparent !important;
  border-radius: 100px;
  height: 100%;
  display: flex;
  align-items: center;
}

/* ------------------------------
   SELECT FIELDS — CUSTOM DROPDOWN ARROW
   ------------------------------ */
.contact-form select{
  appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 16px center;
  background-size: 15px;
  padding-right: 50px;
}

/* Hide the real selects but keep them submitting + required */
.native-select{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Make the custom dropdown feel premium */
.custom-select-options{
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
  padding: 8px 0;
}

.custom-select-option{
  padding: 12px 16px;
  border-radius: 12px;
  margin: 2px 8px;
}

/* ------------------------------
   TEXTAREA (Additional Information)
   ------------------------------ */
.contact-form textarea{
  height: 140px;
  resize: none;
  padding: 16px;

  border-radius: 20px;              
  border: 1px solid var(--main-medium-grey);
  font-size: 15px;

  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  white-space: pre-wrap;         
  overflow-wrap: anywhere;          
  word-break: break-word;         

  /* prevent scrollbar/radius clipping */
  padding-right: 26px;             
  background-clip: padding-box;
  scrollbar-gutter: stable;
}

/* cleaner scrollbar inside rounded textarea */
.contact-form textarea::-webkit-scrollbar{
  width: 10px;
}
.contact-form textarea::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 20px;
  margin: 12px 0;
}
.contact-form textarea::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.20);
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.contact-form textarea::-webkit-scrollbar-corner{
  background: transparent;
}

/* ------------------------------
   SUBMIT BUTTON
   ------------------------------ */
.submit-btn{
  background: var(--black);
  color: var(--white);
  padding: 12px 34px;
  border: none;
  border-radius: 100px;
  margin-top: 25px;
  cursor: pointer;
  font-size: 15px;
  transition: 0.2s;
}

.submit-btn:hover{
  opacity: 0.85;
}

.required-tag{
  color: red;
  font-size: 13px;
  font-weight: 600;
  margin-left: 6px;
}

/* ===============================================
   GLOBAL CUSTOM SELECT (auto-applies to all <select>)
   =============================================== */

.custom-select-wrapper{
  position: relative;
  width: 100%;
}

/* Closed select (pill) */
.custom-select-display{
  padding: 12px 16px;
  height: 45px;
  border: 1px solid var(--main-medium-grey);
  border-radius: 20px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 15px;
}

/* Arrow */
.custom-select-display::after{
  content: "";
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Dropdown container */
.custom-select-options{
  position: absolute;
  top: 52px;
  left: 0;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--main-medium-grey);
  border-radius: 16px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.13);
  max-height: 270px;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 6px 0;

  /* KEY FIXES */
  background-clip: padding-box;
  scrollbar-gutter: stable;   /* reserves only actual scrollbar width */

  display: none;
  z-index: 100;
}

/* Show menu */
.custom-select-wrapper.open .custom-select-options{
  display: block;
}

/* Options */
.custom-select-option{
  padding: 10px 16px;
  cursor: pointer;
  font-size: 15px;
  border-radius: 12px;
  margin: 2px 8px;
}

.custom-select-option:hover{
  background: var(--black);
  color: var(--white);
}

.custom-select-option.selected{
  background: var(--black);
  color: var(--white);
  font-weight: 600;
}

/* Optgroup label */
.custom-select-optgroup-label{
  padding: 8px 16px 6px;
  font-weight: 700;
  color: var(--main-medium-grey);
  font-size: 13px;
  opacity: 0.8;
}

/* Scrollbar styling — CLEAN, NOT CLIPPED */
.custom-select-options::-webkit-scrollbar{
  width: 10px;
}

.custom-select-options::-webkit-scrollbar-track{
  background: transparent;
  margin: 12px 0;   /* pulls scrollbar away from rounded corners */
}

.custom-select-options::-webkit-scrollbar-thumb{
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.custom-select-options::-webkit-scrollbar-corner{
  background: transparent;
}

/* ===============================================
   CUSTOM SELECT — SUBTLE OPEN/CLOSE ANIMATION
   =============================================== */

/* Ensure wrapper is the positioning context */
.custom-select-wrapper{
  position: relative;
}

/* Animated dropdown (default closed) */
.custom-select-options{
  /* keep your existing positioning/top/left/width/etc. */
  transform-origin: top;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 160ms ease,
    transform 180ms ease,
    visibility 0ms linear 180ms;
}

/* Open state */
.custom-select-wrapper.open .custom-select-options{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0) scale(1);
  transition:
    opacity 160ms ease,
    transform 180ms ease,
    visibility 0ms;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .custom-select-options{
    transition: none;
    transform: none;
  }
}

/* ==================================================
   RESPONSIVE ONLY — CONTACT FORM
   BREAKPOINTS: 992 / 768 / 480
   (desktop remains unchanged)
================================================== */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .contact-form{
    max-width: 720px;
    margin: 50px auto;
    padding: 0 22px;
    box-sizing: border-box;
  }

  .contact-form label{
    margin: 24px 0 8px;
    padding-left: 10px;
    font-size: 14.5px;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea,
  .contact-form select{
    font-size: 14.5px;
    height: 44px;
    border-radius: 18px;
    padding: 12px 14px;
  }

  .contact-form textarea{
    height: 135px;
    padding: 14px;
    border-radius: 18px;
  }

  /* Phone (intl-tel-input) */
  #phone{
    height: 44px;
    font-size: 14.5px;
    padding-left: 72px !important;
    border-radius: 100px;
  }

  .iti__flag-container{
    padding-left: 12px;
  }

  /* Native select arrow spacing */
  .contact-form select{
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 46px;
  }

  /* Custom select */
  .custom-select-display{
    height: 44px;
    font-size: 14.5px;
    border-radius: 18px;
    padding: 12px 14px;
  }

  .custom-select-options{
    top: 50px;
    border-radius: 16px;
    max-height: 260px;
  }

  .custom-select-option{
    font-size: 14.5px;
    padding: 10px 14px;
  }

  .submit-btn{
    font-size: 14.5px;
    padding: 12px 30px;
    margin-top: 22px;
  }
}

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

  .contact-form{
    max-width: 620px;
    margin: 40px auto;
    padding: 0 18px;
    box-sizing: border-box;
  }

  .contact-form label{
    margin: 20px 0 8px;
    padding-left: 6px;
    font-size: 14px;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea,
  .contact-form select{
    font-size: 14px;
    height: 44px;
    border-radius: 16px;
    padding: 12px 14px;
  }

  .contact-form textarea{
    height: 140px;
    padding: 14px;
    border-radius: 16px;
  }

  /* Phone (intl-tel-input) */
  #phone{
    height: 44px;
    font-size: 14px;
    padding-left: 70px !important;
    border-radius: 100px;
  }

  .iti__flag-container{
    padding-left: 12px;
  }

  /* Native select arrow spacing */
  .contact-form select{
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 46px;
  }

  /* Custom select */
  .custom-select-display{
    height: 44px;
    font-size: 14px;
    border-radius: 16px;
    padding: 12px 14px;
  }

  .custom-select-options{
    top: 50px;
    border-radius: 14px;
    max-height: 250px;
  }

  .custom-select-option{
    font-size: 14px;
    padding: 10px 14px;
  }

  .required-tag{
    font-size: 12.5px;
  }

  .submit-btn{
    width: 100%;
    max-width: 520px;
    display: block;
    margin: 22px auto 0;
    font-size: 14px;
    padding: 13px 18px;
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .contact-form{
    max-width: 100%;
    margin: 32px auto;
    padding: 0 14px;
    box-sizing: border-box;
  }

  .contact-form label{
    margin: 18px 0 7px;
    padding-left: 4px;
    font-size: 13.5px;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea,
  .contact-form select{
    font-size: 13.5px;
    height: 42px;
    border-radius: 14px;
    padding: 11px 12px;
  }

  .contact-form textarea{
    height: 140px;
    padding: 13px 12px;
    border-radius: 14px;
  }

  /* Phone (intl-tel-input) */
  #phone{
    height: 42px;
    font-size: 13.5px;
    padding-left: 66px !important;
    border-radius: 100px;
  }

  .iti__flag-container{
    padding-left: 10px;
  }

  /* Native select arrow spacing */
  .contact-form select{
    background-position: right 12px center;
    background-size: 13px;
    padding-right: 42px;
  }

  /* Custom select */
  .custom-select-display{
    height: 42px;
    font-size: 13.5px;
    border-radius: 14px;
    padding: 11px 12px;
  }

  .custom-select-options{
    top: 48px;
    border-radius: 12px;
    max-height: 240px;
  }

  .custom-select-option{
    font-size: 13.5px;
    padding: 10px 12px;
  }

  .submit-btn{
    width: 100%;
    max-width: 100%;
    font-size: 13.5px;
    padding: 13px 16px;
    margin: 20px 0 0;
  }
}


/* SMART BUSINESS CARDS HERO SECTION */
.smarbiscar-hero{
  position: relative;
  height: 680px;
  display: flex;
  align-items: center;
  padding: 0 160px;
  color: var(--white);
  background-image: url(images/hero/IFPP_IHBFive.png);
  background-size: cover;
  background-position: center;
  margin-top: -130px;
  padding-top: 120px;
}

/* Overlay */
.smarbiscar-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    60deg,
    rgb(0, 0, 0) 20%,
    rgba(0, 0, 0, 0.637) 80%,
    rgba(0, 0, 0, 0.25) 100%
  );
  z-index: 1;
}

/* Content */
.smarbiscar-hero-content{
  position: relative;
  z-index: 2;
  max-width: 1100px;
}

.smarbiscar-hero h1{
  font-size: 80px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}

.smartitle{
  font-size: 30px;
  margin-bottom: 35px;
  max-width: 1000px;
}

.smarsubtitle{
  font-size: 20px;
  margin-bottom: 35px;
  max-width: 900px;
}

/* Animation */
.smarbiscar-hero-motion{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.smarbiscar-hero-motion.active{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   SMART BUSINESS CARDS HERO — RESPONSIVE (992 / 768 / 480)
   DO NOT TOUCH DESKTOP (only overrides below)
========================================================= */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .smarbiscar-hero{
    height: auto;
    min-height: 620px;
    padding: 0 80px;
    padding-bottom: 110px;
    align-items: flex-start;
  }

  .smarbiscar-hero .smarbiscar-hero-content{
    padding-top: 210px;
    margin-top: 0;
  }

  .smarbiscar-hero h1{
    font-size: 60px;
    margin-bottom: 16px;
    line-height: 1.12;
  }

  .smarbiscar-hero .smartitle{
    font-size: 24px;
    margin-bottom: 22px;
    max-width: 900px;
  }

  .smarbiscar-hero .smarsubtitle{
    font-size: 18px;
    margin-bottom: 22px;
    max-width: 820px;
  }

  .smarbiscar-hero-motion{
    transform: translateY(20px);
  }
}

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

  .smarbiscar-hero{
    height: auto;
    min-height: 560px;
    padding: 0 40px;
    padding-bottom: 100px;
    align-items: flex-start;
  }

  .smarbiscar-hero .smarbiscar-hero-content{
    padding-top: 210px;
    margin-top: 0;
  }

  .smarbiscar-hero h1{
    font-size: 50px;
    margin-bottom: 15px;
    line-height: 1.15;
  }

  .smarbiscar-hero .smartitle{
    font-size: 22px;
    margin-bottom: 20px;
    max-width: 800px;
  }

  .smarbiscar-hero .smarsubtitle{
    font-size: 16px;
    margin-bottom: 20px;
    max-width: 720px;
  }

  .smarbiscar-hero-motion{
    transform: translateY(20px);
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .smarbiscar-hero{
    height: auto;
    min-height: 520px;
    padding: 0 20px;
    padding-bottom: 90px;
    align-items: flex-start;
  }

  .smarbiscar-hero .smarbiscar-hero-content{
    padding-top: 200px;
    margin-top: 0;
  }

  .smarbiscar-hero h1{
    font-size: 35px;
    margin-bottom: 10px;
    line-height: 1.2;
  }

  .smarbiscar-hero .smartitle{
    font-size: 18px;
    margin-bottom: 15px;
    max-width: 100%;
  }

  .smarbiscar-hero .smarsubtitle{
    font-size: 15px;
    margin-bottom: 15px;
    max-width: 100%;
  }

  .smarbiscar-hero-motion{
    transform: translateY(10px);
  }
}

/* =========================================================
   SMART BUSINESS CARDS — DESKTOP (UPDATED)
   - NOW MATCHES Smart Signs wrap + grid + pagination behavior
   - Uses: .smartbusiness-wrap (like .smart-signs-wrap)
   - Grid stays clean; pagination sits inside wrap (same alignment)
   - Price + Add to Cart on SAME ROW (via .price-row)
========================================================= */

/* =========================================================
   WRAP (MATCH SMART SIGNS WRAP)
========================================================= */
.smartbusiness-wrap{
  max-width: 1250px;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================================================
   SMART BUSINESS CARDS GRID (MATCH SMART SIGNS GRID)
========================================================= */
.smartbusiness-wrap .product-section{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 0;
  background: transparent;
  margin: 0 auto;
  width: auto;
}

/* Card becomes vertical */
.smartbusiness-wrap .product-card{
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 18px;
  box-sizing: border-box;
  text-align: left;

  /* allow footer row to sit nicely */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Image full width in card */
.smartbusiness-wrap .product-image{
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Typography */
.smartbusiness-wrap .product-info h2{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--black);
}

.smartbusiness-wrap .blue-text{
  color: var(--black);
}

.smartbusiness-wrap .product-details{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  line-height: 1.6;
  color: var(--main-medium-grey);
}

/* Optional product description (if you use it) */
.smartbusiness-wrap .product-desc{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,0.68);
}

/* =========================================================
   OPTION TOGGLES (RADIO GROUPS) — MATCH SMART SIGNS
========================================================= */
.smartbusiness-wrap .product-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}

.smartbusiness-wrap .product-options label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.78);
  user-select: none;
  line-height: 1.2;
}

.smartbusiness-wrap .product-options input[type="radio"]{
  width: 16px;
  height: 16px;
  accent-color: var(--main-medium-blue);
  cursor: pointer;
}

/* =========================================================
   PRICE ROW (same behavior as Smart Signs)
========================================================= */
.smartbusiness-wrap .price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: auto;
  padding-top: 10px;
}

.smartbusiness-wrap .product-price{
  font-size: 15px;
  font-weight: 700;
  color: var(--main-dark-grey);
  margin: 0;
  white-space: nowrap;
}

.smartbusiness-wrap .add-to-cart-btn{
  width: auto;
  padding: 10px 18px;
  background-color: var(--main-medium-blue);
  color: var(--white);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  transition: 0.25s ease;
  white-space: nowrap;
}

.smartbusiness-wrap .add-to-cart-btn:hover{
  background-color: var(--black);
  color: var(--white);
}

/* =========================================================
   PAGINATION (MATCH SMART SIGNS)
========================================================= */
.smartbusiness-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 26px 0 10px;
  user-select: none;
}

.smartbusiness-pagination button{
  border: 1px solid rgba(0,0,0,0.14);
  background: var(--white);
  color: var(--black);
  height: 42px;
  min-width: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.smartbusiness-pagination button:hover{
  background: rgba(0,0,0,0.05);
}

.smartbusiness-pagination button.is-active{
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.smartbusiness-pagination button.is-disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.smartbusiness-pagination .dots{
  padding: 0 6px;
  color: rgba(0,0,0,0.55);
  font-weight: 800;
}

/* =========================================================
   SMART BUSINESS CARDS — RESPONSIVE (992 / 768 / 480)
   Pagination INCLUDED (matches Smart Signs)
========================================================= */

/* <= 992px: 2 columns (4 per page via JS) */
@media (max-width: 992px){
  .smartbusiness-wrap{
    padding: 70px 18px 65px; /* top + sides + bottom */
  }

  .smartbusiness-wrap .product-section{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .smartbusiness-wrap .product-image{
    height: 230px;
  }

  /* Keep price + button one row on tablet */
  .smartbusiness-wrap .price-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
  }

  .smartbusiness-wrap .product-price{
    margin: 0;
    white-space: nowrap;
  }

  .smartbusiness-wrap .add-to-cart-btn{
    width: auto;
    white-space: nowrap;
  }

  .smartbusiness-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
  }

  .smartbusiness-pagination button{
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 12px;
  }
}

/* <= 768px: 1 column (3 per page via JS) */
@media (max-width: 768px){
  .smartbusiness-wrap{
    padding: 70px 16px 65px; /* top + sides + bottom */
  }

  .smartbusiness-wrap .product-section{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .smartbusiness-wrap .product-card{
    padding: 16px;
  }

  .smartbusiness-wrap .product-image{
    height: 220px;
  }

  /* Stack price + button cleanly on mobile */
  .smartbusiness-wrap .price-row{
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .smartbusiness-wrap .add-to-cart-btn{
    width: 100%;
    text-align: center;
  }

  .smartbusiness-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }

  .smartbusiness-pagination button{
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 12px;
  }
}

/* <= 480px: 1 column (3 per page via JS) */
@media (max-width: 480px){
  .smartbusiness-wrap{
    padding: 70px 14px 65px; /* top + sides + bottom */
  }

  .smartbusiness-wrap .product-section{
    gap: 18px;
  }

  .smartbusiness-wrap .product-image{
    height: 200px;
  }

  .smartbusiness-wrap .product-info h2{
    font-size: 20px;
  }

  /* Keep stacked CTA comfortable */
  .smartbusiness-wrap .price-row{
    gap: 10px;
    padding-top: 12px;
  }

  .smartbusiness-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
  }

  .smartbusiness-pagination button{
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border-radius: 10px;
  }
}

/* =========================================================
   DETAILS MODAL (Popup Form) — MATCH SMART SIGNS
========================================================= */
#detailsModal.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;              /* JS toggles to flex */
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

#detailsModal .modal{
  width: min(560px, 100%);
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  padding: 18px;
  box-sizing: border-box;
}

#detailsModal .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

#detailsModal .modal-header h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--black);
}

#detailsModal .modal-x{
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: rgba(0,0,0,0.70);
  padding: 4px 8px;
  border-radius: 10px;
  transition: 0.2s ease;
}

#detailsModal .modal-x:hover{
  background: rgba(0,0,0,0.06);
  color: var(--black);
}

#detailsModal .modal-sub{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,0.68);
}

/* Form fields container */
#detailsModal #detailsFields .field{
  margin: 10px 0;
}

#detailsModal #detailsFields label{
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(0,0,0,0.78);
}

/* Inputs */
#detailsModal #detailsFields input,
#detailsModal #detailsFields select,
#detailsModal #detailsFields textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.16);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

#detailsModal #detailsFields textarea{
  resize: vertical;
  min-height: 92px;
}

#detailsModal #detailsFields input:focus,
#detailsModal #detailsFields select:focus,
#detailsModal #detailsFields textarea:focus{
  border-color: rgba(0,0,0,0.32);
}

/* Action buttons */
#detailsModal .modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

#detailsModal .btn-primary,
#detailsModal .btn-secondary{
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
  border: 1px solid transparent;
}

#detailsModal .btn-primary{
  background: var(--main-medium-blue);
  color: var(--white);
}

#detailsModal .btn-primary:hover{
  background: var(--black);
  color: var(--white);
}

#detailsModal .btn-secondary{
  background: var(--white);
  color: var(--black);
  border-color: rgba(0,0,0,0.18);
}

#detailsModal .btn-secondary:hover{
  background: rgba(0,0,0,0.06);
}

/* =========================================================
   RESPONSIVE MODAL TWEAKS
========================================================= */
@media (max-width: 768px){
  #detailsModal .modal{
    padding: 16px;
    border-radius: 16px;
  }

  #detailsModal .modal-actions{
    flex-direction: column;
    align-items: stretch;
  }

  #detailsModal .btn-primary,
  #detailsModal .btn-secondary{
    width: 100%;
    text-align: center;
  }
}

/* SMART SIGNS SECTION */
.smartsigns-hero {
    position: relative;
    height: 680px;
    display: flex;
    align-items: center;
    padding: 0 160px;
    color: var(--white);
    background-image: url(images/hero/IFPP_IHB_Four.png);
    background-size: cover;
    background-position: center;
    margin-top: -130px;
    padding-top: 120px;
}

/* Overlay */
.smartsigns-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        60deg,
        rgb(0, 0, 0) 20%,
        rgba(0, 0, 0, 0.637) 80%,
        rgba(0, 0, 0, 0.25) 100%
    );
    z-index: 1;
}

/* Content */
.smartsigns-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
}

.smartsigns-hero h1 {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.smartsignstitle {
    font-size: 30px;
    margin-bottom: 35px;
    max-width: 1000px;
}

/* Animation */
.smartsigns-hero-motion {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.smartsigns-hero-motion.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   SMART SIGNS HERO — RESPONSIVE (992 / 768 / 480)
   Matches the Smart Business Cards hero behavior
   (Desktop unchanged — only overrides below)
========================================================= */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .smartsigns-hero{
    height: auto;
    min-height: 620px;
    padding: 0 80px;
    padding-bottom: 80px;
    align-items: flex-start;
  }

  .smartsigns-hero .smartsigns-hero-content{
    padding-top: 270px;
    margin-top: 0;
  }

  .smartsigns-hero h1{
    font-size: 60px;
    margin-bottom: 16px;
    line-height: 1.12;
  }

  .smartsigns-hero .smartsignstitle{
    font-size: 24px;
    margin-bottom: 22px;
    max-width: 900px;
  }

  .smartsigns-hero-motion{
    transform: translateY(20px);
  }
}

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

  .smartsigns-hero{
    height: auto;
    min-height: 560px;
    padding: 0 40px;
    padding-bottom: 80px;
    align-items: flex-start;
  }

  .smartsigns-hero .smartsigns-hero-content{
    padding-top: 270px;
    margin-top: 0;
  }

  .smartsigns-hero h1{
    font-size: 50px;
    margin-bottom: 15px;
    line-height: 1.15;
  }

  .smartsigns-hero .smartsignstitle{
    font-size: 22px;
    margin-bottom: 20px;
    max-width: 800px;
  }

  .smartsigns-hero-motion{
    transform: translateY(20px);
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .smartsigns-hero{
    height: auto;
    min-height: 520px;
    padding: 0 20px;
    padding-bottom: 30px;
    align-items: flex-start;
  }

  .smartsigns-hero .smartsigns-hero-content{
    padding-top: 250px;
    margin-top: 0;
  }

  .smartsigns-hero h1{
    font-size: 35px;
    margin-bottom: 10px;
    line-height: 1.2;
  }

  .smartsigns-hero .smartsignstitle{
    font-size: 18px;
    margin-bottom: 15px;
    max-width: 100%;
  }

  .smartsigns-hero-motion{
    transform: translateY(10px);
  }
}

/* =========================================================
   SMART SIGNS — DESKTOP (UPDATED)
   - Matches Smart Business Cards layout
   - 3 columns grid + premium cards + pagination
   - Price + Add to Cart on SAME ROW (via .price-row)
========================================================= */

.smart-signs-wrap{
  max-width: 1250px;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Desktop grid (3 columns) */
.smart-signs.smart-signs-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 0;
  background: transparent;
  margin: 0 auto;
}

/* Card styling */
.smart-signs.smart-signs-grid .product{
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 18px;
  box-sizing: border-box;
  text-align: left;

  /* NEW: allow footer row to sit nicely */
  display: flex;
  flex-direction: column;
}

/* Image */
.smart-signs.smart-signs-grid .product img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin: 0 0 14px;
}

/* Title */
.smart-signs.smart-signs-grid .product-name{
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--black);
}

/* Price + button row (LIKE SMART BUSINESS CARDS) */
.smart-signs.smart-signs-grid .price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: auto;   
  padding-top: 10px;   
}

/* Price */
.smart-signs.smart-signs-grid .product-price{
  font-size: 15px;
  font-weight: 700;
  color: var(--main-dark-grey);
  margin: 0;
  white-space: nowrap;
}

/* Button */
.smart-signs.smart-signs-grid .add-to-cart{
  width: auto;
  padding: 10px 18px;
  background-color: var(--main-medium-blue);
  color: var(--white);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  transition: 0.25s ease;
  white-space: nowrap;
}

.smart-signs.smart-signs-grid .add-to-cart:hover{
  background-color: var(--black);
  color: var(--white);
}

/* Pagination (desktop) */
.smart-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 26px 0 10px;
  user-select: none;
}

.smart-pagination button{
  border: 1px solid rgba(0,0,0,0.14);
  background: var(--white);
  color: var(--black);
  height: 42px;
  min-width: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.smart-pagination button:hover{
  background: rgba(0,0,0,0.05);
}

.smart-pagination button.is-active{
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.smart-pagination button.is-disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.smart-pagination .dots{
  padding: 0 6px;
  color: rgba(0,0,0,0.55);
  font-weight: 800;
}


/* =========================================================
   SMART SIGNS — RESPONSIVE (992 / 768 / 480)
   Pagination INCLUDED
   Updated for NEW .price-row structure (price + button inline)
========================================================= */

/* <= 992px: 2 columns (4 per page via JS) */
@media (max-width: 992px){
  .smart-signs-wrap{
    padding: 70px 18px 65px; /* top + sides + bottom */
  }

  .smart-signs.smart-signs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .smart-signs.smart-signs-grid .product img{
    height: 230px;
  }

  /* Keep price + button on one row on tablet */
  .smart-signs.smart-signs-grid .price-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
  }

  .smart-signs.smart-signs-grid .product-price{
    margin: 0;
    white-space: nowrap;
  }

  .smart-signs.smart-signs-grid .add-to-cart{
    width: auto;
    white-space: nowrap;
  }

  .smart-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
  }

  .smart-pagination button{
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 12px;
  }
}

/* <= 768px: 1 column (3 per page via JS) */
@media (max-width: 768px){
  .smart-signs-wrap{
    padding: 70px 16px 65px; /* top + sides + bottom */
  }

  .smart-signs.smart-signs-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .smart-signs.smart-signs-grid .product{
    padding: 16px;
  }

  .smart-signs.smart-signs-grid .product img{
    height: 220px;
  }

  /* Stack price + button cleanly on mobile */
  .smart-signs.smart-signs-grid .price-row{
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .smart-signs.smart-signs-grid .add-to-cart{
    width: 100%;
    text-align: center;
  }

  .smart-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }

  .smart-pagination button{
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 12px;
  }
}

/* <= 480px: 1 column (3 per page via JS) */
@media (max-width: 480px){
  .smart-signs-wrap{
    padding: 70px 14px 65px; /* top + sides + bottom */
  }

  .smart-signs.smart-signs-grid{
    gap: 18px;
  }

  .smart-signs.smart-signs-grid .product img{
    height: 200px;
  }

  .smart-signs.smart-signs-grid .product-name{
    font-size: 16px;
  }

  /* Keep stacked CTA comfortable */
  .smart-signs.smart-signs-grid .price-row{
    gap: 10px;
    padding-top: 12px;
  }

  .smart-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
  }

  .smart-pagination button{
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border-radius: 10px;
  }
}

/* =========================================================
   ADD-ONS FOR NEW PRODUCTS
   - product descriptions
   - option toggles (radio groups)
   - details popup modal
   Works with your existing .smart-signs.smart-signs-grid layout
========================================================= */

/* Optional product description (under title) */
.smart-signs.smart-signs-grid .product-desc{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,0.68);
}

/* Option toggles block */
.smart-signs.smart-signs-grid .product-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}

/* Each option row */
.smart-signs.smart-signs-grid .product-options label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.78);
  user-select: none;
  line-height: 1.2;
}

/* Radio input */
.smart-signs.smart-signs-grid .product-options input[type="radio"]{
  width: 16px;
  height: 16px;
  accent-color: var(--main-medium-blue);
  cursor: pointer;
}

/* =========================================================
   DETAILS MODAL (Popup Form)
========================================================= */

#detailsModal.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;              /* JS toggles to flex */
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

#detailsModal .modal{
  width: min(560px, 100%);
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  padding: 18px;
  box-sizing: border-box;
}

#detailsModal .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

#detailsModal .modal-header h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--black);
}

#detailsModal .modal-x{
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: rgba(0,0,0,0.70);
  padding: 4px 8px;
  border-radius: 10px;
  transition: 0.2s ease;
}

#detailsModal .modal-x:hover{
  background: rgba(0,0,0,0.06);
  color: var(--black);
}

#detailsModal .modal-sub{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,0.68);
}

/* Form fields container */
#detailsModal #detailsFields .field{
  margin: 10px 0;
}

#detailsModal #detailsFields label{
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(0,0,0,0.78);
}

/* Inputs */
#detailsModal #detailsFields input,
#detailsModal #detailsFields select,
#detailsModal #detailsFields textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.16);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

#detailsModal #detailsFields textarea{
  resize: vertical;
  min-height: 92px;
}

#detailsModal #detailsFields input:focus,
#detailsModal #detailsFields select:focus,
#detailsModal #detailsFields textarea:focus{
  border-color: rgba(0,0,0,0.32);
}

/* Action buttons */
#detailsModal .modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

#detailsModal .btn-primary,
#detailsModal .btn-secondary{
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
  border: 1px solid transparent;
}

#detailsModal .btn-primary{
  background: var(--main-medium-blue);
  color: var(--white);
}

#detailsModal .btn-primary:hover{
  background: var(--black);
  color: var(--white);
}

#detailsModal .btn-secondary{
  background: var(--white);
  color: var(--black);
  border-color: rgba(0,0,0,0.18);
}

#detailsModal .btn-secondary:hover{
  background: rgba(0,0,0,0.06);
}

/* =========================================================
   RESPONSIVE MODAL TWEAKS
========================================================= */
@media (max-width: 768px){
  #detailsModal .modal{
    padding: 16px;
    border-radius: 16px;
  }

  #detailsModal .modal-actions{
    flex-direction: column;
    align-items: stretch;
  }

  #detailsModal .btn-primary,
  #detailsModal .btn-secondary{
    width: 100%;
    text-align: center;
  }
}

/* EVENT SOLUTIONS HERO SECTION */
.event-hero {
    position: relative;
    height: 680px;
    display: flex;
    align-items: center;
    padding: 0 160px;
    color: var(--white);
    background-image: url(images/hero/IFPP_IHB_Three.png);
    background-size: cover;
    background-position: center;
    margin-top: -130px;
    padding-top: 120px;
}

/* Overlay */
.event-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        60deg,
        rgb(0, 0, 0) 20%,
        rgba(0, 0, 0, 0.637) 80%,
        rgba(0, 0, 0, 0.25) 100%
    );
    z-index: 1;
}

/* Content */
.event-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
}

.event-hero h1 {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.eventtitle {
    font-size: 30px;
    margin-bottom: 35px;
    max-width: 1000px;
}

/* Animation */
.event-hero-motion {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.event-hero-motion.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   EVENT HERO — RESPONSIVE (992 / 768 / 480)
   Matches the hero system we used previously
   (Desktop unchanged — only overrides below)
========================================================= */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .event-hero{
    height: auto;
    min-height: 620px;
    padding: 0 80px;
    padding-bottom: 110px;
    align-items: flex-start;
  }

  .event-hero .event-hero-content{
    padding-top: 230px;
    margin-top: 0;
  }

  .event-hero h1{
    font-size: 60px;
    margin-bottom: 16px;
    line-height: 1.12;
  }

  .event-hero .eventtitle{
    font-size: 24px;
    margin-bottom: 22px;
    max-width: 900px;
  }

  .event-hero-motion{
    transform: translateY(20px);
  }
}

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

  .event-hero{
    height: auto;
    min-height: 560px;
    padding: 0 40px;
    padding-bottom: 100px;
    align-items: flex-start;
  }

  .event-hero .event-hero-content{
    padding-top: 210px;
    margin-top: 0;
  }

  .event-hero h1{
    font-size: 50px;
    margin-bottom: 15px;
    line-height: 1.15;
  }

  .event-hero .eventtitle{
    font-size: 22px;
    margin-bottom: 20px;
    max-width: 800px;
  }

  .event-hero-motion{
    transform: translateY(20px);
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .event-hero{
    height: auto;
    min-height: 520px;
    padding: 0 20px;
    padding-bottom: 40px;
    align-items: flex-start;
  }

  .event-hero .event-hero-content{
    padding-top: 230px;
    margin-top: 0;
  }

  .event-hero h1{
    font-size: 35px;
    margin-bottom: 10px;
    line-height: 1.2;
  }

  .event-hero .eventtitle{
    font-size: 18px;
    margin-bottom: 15px;
    max-width: 100%;
  }

  .event-hero-motion{
    transform: translateY(10px);
  }
}

/* EVENT SOLUTIONS WEARABLE SECTION */
.wearables-section {
  text-align: center;
  margin-top: 70px;
  margin-bottom: 70px;
  background-color: var(--white);
}

.wearables-title {
  font-size: 36px;
  font-weight: bold;
  color: var(--main-light-blue);
  margin-bottom: 40px;
}

.wear-highlight {
  font-size: 36px;
  font-weight: bold;
  color: var(--black);
}

.wearables-image {
  width: 600px;
  height: auto;
  border-radius: 15px;
}

/* =========================================================
   EVENT SOLUTIONS WEARABLE — RESPONSIVE (992 / 768 / 480)
   Desktop styles remain untouched
========================================================= */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .wearables-section{
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 0 24px;
  }

  .wearables-title,
  .wear-highlight{
    font-size: 30px;
    margin-bottom: 32px;
  }

  .wearables-image{
    border-radius: 14px;
  }
}

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

  .wearables-section{
    margin-top: 55px;
    margin-bottom: 55px;
    padding: 0 20px;
  }

  .wearables-title,
  .wear-highlight{
    font-size: 26px;
    margin-bottom: 26px;
  }

  .wearables-image{
    width: 300px;
    height: auto;
    border-radius: 12px;
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .wearables-section{
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 0 16px;
  }

  .wearables-title,
  .wear-highlight{
    font-size: 22px;
    margin-bottom: 22px;
  }

  .wearables-image{
    width: 300px;
    height: auto;
    border-radius: 10px;
  }
}

/* EVENT SOLUTIONS WEARSBLES SPECIFICATIONS SECTION */
.wear-section {
    background-color: #f6f7f9;
    padding: 80px 20px;
}

/* CARD CONTAINER */
.wearables-container {
    max-width: 1200px;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* CARD */
.wearable-card {
    background-color: var(--white);
    border-radius: 14px;
    padding: 50px 30px 40px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* ICON BADGE */
.icon-badge img {
    width: 90px;
    height: auto;
}

/* HEADINGS */
.wearable-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-light-blue);
    margin-bottom: 18px;
}

/* TEXT */
.wearable-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--black);
    margin-bottom: 10px;
}

/* CTA */
.cta-wrapper {
    text-align: center;
}

.quote-btn{
  display: inline-block;
  padding: 14px 34px;
  background-color: var(--main-light-blue);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;

  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;

  transition: background 0.25s ease, transform 0.25s ease;
}

.quote-btn:hover{
  background-color: var(--black);
}

/* =========================================================
   WEARABLES SPECIFICATIONS — RESPONSIVE (992 / 768 / 480)
   Desktop remains unchanged
========================================================= */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .wear-section{
    padding: 70px 20px;
  }

  .wearables-container{
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin: 0 auto 40px;
    padding: 0 14px;
    box-sizing: border-box;
  }

  .wearable-card{
    padding: 44px 26px 34px;
    border-radius: 14px;
  }

  .icon-badge img{
    width: 80px;
  }

  .wearable-card h3{
    font-size: 19px;
    margin-bottom: 16px;
  }

  .wearable-card p{
    font-size: 14.5px;
    line-height: 1.65;
  }

  .quote-btn{
    border-radius: 9999px;
    padding: 14px 32px;
    font-size: 14px;
  }
}

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

  .wear-section{
    padding: 60px 18px;
  }

  .wearables-container{
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 0 auto 34px;
    padding: 0;
  }

  .wearable-card{
    padding: 40px 22px 30px;
    border-radius: 14px;
  }

  .icon-badge img{
    width: 74px;
  }

  .wearable-card h3{
    font-size: 18px;
    margin-bottom: 14px;
  }

  .wearable-card p{
    font-size: 14.5px;
    line-height: 1.7;
  }

  .quote-btn{
    width: auto;
    border-radius: 9999px;
    max-width: 520px;
    text-align: center;
    padding: 14px 18px;
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .wear-section{
    padding: 50px 16px;
  }

  .wearables-container{
    gap: 18px;
    margin: 0 auto 28px;
  }

  .wearable-card{
    padding: 34px 18px 26px;
    border-radius: 12px;
  }

  .icon-badge img{
    width: 66px;
  }

  .wearable-card h3{
    font-size: 17px;
    margin-bottom: 12px;
  }

  .wearable-card p{
    font-size: 14px;
  }

  .quote-btn{
    width: auto;
    border-radius: 9999px;
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 20px;
  }
}

/* =========================================================
   REQUEST A QUOTE POPUP MODAL
   (Matches Talk to Sales style)
========================================================= */

.quote-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.62);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.quote-modal.is-open{ display: flex; }

.quote-dialog{
  width: 100%;
  max-width: 900px; /* wider so the desktop form can be horizontal */
  background: #fff;
  color: #111;
  border-radius: 18px;
  padding: 26px 22px 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  position: relative;
  margin: 12px auto;
}

.quote-close{
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.quote-close i{
  font-size: 22px;
  color: rgba(0,0,0,.55);
  transition: color .15s ease, transform .15s ease;
}

.quote-close:hover i{
  color: var(--main-light-blue);
  transform: scale(1.12);
}

.quote-dialog h2{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.quote-sub{
  margin: 0 0 16px;
  font-size: 14px;
  color: rgba(0,0,0,.65);
}

.quote-form{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr); /* horizontal on desktop */
}

.quote-form label{
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.72);
  margin: 0;
  line-height: 1.2;
}

/* Make the Details (last label) full width on desktop */
.quote-form label:last-of-type{
  grid-column: 1 / -1;
}

/* Make submit + status + foot full width on desktop */
.quote-submit,
.quote-status,
.quote-foot{
  grid-column: 1 / -1;
}

.quote-form input,
.quote-form textarea{
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.16);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #fff;
  line-height: 1.25;
  box-sizing: border-box;
}

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

.quote-form input:focus,
.quote-form textarea:focus{
  border-color: rgba(0,123,255,.6);
  box-shadow: 0 0 0 4px rgba(0,123,255,.12);
}

.quote-submit{
  width: 100%;
  margin: 0;
  padding: 13px 14px;
  border-radius: 100px;
  border: 0;
  cursor: pointer;
  background: var(--main-light-blue);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  transition: background .25s ease;
}

.quote-submit:hover{ background: var(--black); }
.quote-submit:disabled{ opacity: .7; cursor: not-allowed; }

.quote-status{
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  min-height: 18px;
  text-align: center;
}

.quote-status.is-loading{ color: rgba(0,0,0,.65); }
.quote-status.is-success{ color: #0b7a34; font-weight: 800; }
.quote-status.is-error{ color: #b00020; font-weight: 800; }

.quote-foot{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  text-align: center;
}

/* Responsive */
@media (max-width: 768px){
  .quote-modal{ padding: 14px; align-items: flex-start; }
  .quote-dialog{ margin: 16px auto; max-width: 560px; padding: 22px 18px 14px; border-radius: 16px; }
  .quote-dialog h2{ font-size: 21px; }
  .quote-form{ gap: 12px; grid-template-columns: 1fr; } /* stack on mobile */
}

@media (max-width: 480px){
  .quote-modal{ padding: 10px; }
  .quote-dialog{ margin: 12px auto; padding: 18px 14px 12px; border-radius: 14px; }
  .quote-dialog h2{ font-size: 19px; }
  .quote-sub{ font-size: 13px; margin-bottom: 12px; }
  .quote-form input, .quote-form textarea{ padding: 11px 12px; border-radius: 12px; }
  .quote-submit{ padding: 12px 12px; font-size: 14px; }
}


/* =========================================================
   EVENT PACKAGES — PRICING TABLE STYLE (BMC)
   Optimized: 992 / 768 / 480
========================================================= */

.packages-section{
  background: #0B0F14;
  padding: 60px 0 80px;
  text-align: center;
}

.packages-title{
  color: var(--white);
  font-size: 34px;
  font-weight: 900;
  margin: 0 0 50px;
}

/* GRID */
.packages-wrapper{
  max-width: 1050px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

/* Default grid: 2 columns */
.packages-grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/* Desktop 3-column upgrade (keeps your class name the same) */
@media (min-width: 769px){
  .packages-wrapper.packages-grid-2{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* CARD BASE */
.pricing-card{
  background: #fff;
  border-radius: 22px;
  padding: 28px 26px;
  text-align: left;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

/* TOP BRAND STRIP */
.pricing-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:10px;
}

.pricing-card.is-starter::before{ background: var(--main-pink); }
.pricing-card.is-standard::before{ background: var(--main-light-blue); }

/* Wristband card strip */
.pricing-card.is-wristband::before{ background: var(--main-dark-blue); }

/* RECOMMENDED BADGE */
.recommended-badge{
  position: absolute;
  top: 22px;
  left: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 14px;
  font-size: 12px;
  text-align: center;
  font-weight: 800;
  line-height: 1;

  border-radius: 999px;
  background: var(--black);
  color: var(--main-light-blue);
}

/* TITLE */
.pricing-name{
  font-size: 22px;
  font-weight: 900;
  margin: 18px 0 10px;
}

/* PRICE */
.pricing-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom: 14px;
}

.currency{
  font-size:18px;
  font-weight:800;
}

.amount{
  font-size:55px;
  font-weight:950;
  line-height:1;
}

.per{
  font-size:14px;
  color: rgba(0,0,0,.55);
}

/* Optional helper for "Request Quote" text inside pricing-price */
.amount.is-quote{
  font-size: 34px;
  font-weight: 950;
  line-height: 1.1;
}

/* DESCRIPTION */
.pricing-tagline{
  font-weight:800;
  margin: 0 0 8px;
}

.pricing-desc{
  font-size:14px;
  color: rgba(0,0,0,.65);
  margin: 0 0 18px;
  line-height:1.5;
}

/* BUTTONS */
.is-starter .pricing-btn{
  width:100%;
  padding: 12px 16px;
  border-radius:999px;
  border:2px solid var(--main-pink);
  color: var(--main-pink);
  font-weight:900;
  cursor:pointer;
  background: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.pricing-btn:active{ transform: translateY(1px); }

/* Starter */
.is-starter .pricing-btn:hover{
  background: #FFC2E8;
  color:var(--main-pink);
}

.is-standard .pricing-btn{
  width:100%;
  padding: 12px 16px;
  border-radius:999px;
  border:2px solid var(--main-light-blue);
  color: var(--main-dark-blue);
  font-weight:900;
  cursor:pointer;
  background: var(--main-light-blue);
  transition: background 0.25s ease, transform 0.25s ease;
}

.is-standard .pricing-btn:hover{
  background: #A4DFFF;
  color: var(--main-dark-blue);
}

/* Wristband quote button */
.is-wristband .pricing-btn{
  width:100%;
  padding: 12px 16px;
  border-radius:999px;
  border:2px solid var(--main-dark-blue);
  color: var(--main-dark-blue);
  font-weight:900;
  cursor:pointer;
  background: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.is-wristband .pricing-btn:hover{
  background: #489ad8;
  color: var(--main-dark-blue);
}

/* =========================================================
   RESPONSIVE: <= 992px
========================================================= */
@media (max-width: 992px){

  .packages-section{
    padding: 50px 18px 70px;
  }

  .packages-title{
    font-size: 30px;
    margin-bottom: 42px;
  }

  .packages-wrapper{
    max-width: 900px;
    gap: 18px;
  }

  .pricing-card{
    padding: 26px 22px;
    border-radius: 20px;
  }

  .pricing-name{
    font-size: 21px;
  }

  .amount{
    font-size: 48px;
  }

  .pricing-desc{
    font-size: 13.75px;
  }
}

/* =========================================================
   RESPONSIVE: <= 768px (stack)
========================================================= */
@media (max-width: 768px){

  .packages-section{
    padding: 50px 16px 64px;
  }

  .packages-title{
    font-size: 26px;
    margin-bottom: 34px;
  }

  .packages-grid-2{
    grid-template-columns: 1fr;
  }

  .packages-wrapper{
    gap: 16px;
  }

  .pricing-card{
    padding: 24px 20px;
    border-radius: 18px;
  }

  .pricing-card.is-recommended{
    padding-top: 40px;
  }

  /* Badge sits neatly with space above it */
  .recommended-badge{
    top: 18px;
    left: 14px;
    font-size: 11px;
    padding: 6px 12px;
  }

  /* Title spacing stays clean */
  .pricing-name{
    font-size: 20px;
    margin-top: 14px;
  }

  .amount{
    font-size: 46px;
  }

  .pricing-btn{
    padding: 12px 14px;
  }
}

/* =========================================================
   RESPONSIVE: <= 480px
========================================================= */
@media (max-width: 480px){

  .packages-section{
    padding: 60px 14px 56px;
  }

  .packages-title{
    font-size: 22px;
    margin-bottom: 26px;
  }

  .pricing-card{
    padding: 20px 16px;
    border-radius: 16px;
  }

  .pricing-name{
    font-size: 18px;
    margin: 14px 0 8px;
  }

  .currency{
    font-size: 16px;
  }

  .amount{
    font-size: 40px;
  }

  .per{
    font-size: 13px;
  }

  .pricing-desc{
    font-size: 13.5px;
    margin-bottom: 16px;
  }

  .pricing-btn{
    padding: 12px 14px;
    font-size: 13.5px;
  }
}

/* CUSTOMER SUPPORT SECTION */
.support-container {
  display: flex;
  margin-top: 70px;
  justify-content: flex-start;
  align-items: center;

  height: auto;
  min-height: 520px;

  padding: 40px 24px;

  background: url('images/hero/IFPP_CSS.png') no-repeat center center/cover;
  box-sizing: border-box;
}

.support-content {
  background-color: var(--main-medium-blue);
  color: var(--white);
  padding: 30px;
  border-radius: 30px;
  max-width: 400px;
  width: 100%;
  margin-left: 180px;
}

.support-content h1 {
  font-size: 24px;
  color: var(--main-neon-yellow);
  font-weight: normal;
}

.support-content h2 {
  font-size: 50px;
  font-weight: normal;
  margin-top: 10px;
}

.support-content p {
  margin-top: 15px;
  font-size: 16px;
}

.contact-info {
  margin-top: 20px;
}

.contact-info a {
  color: var(--main-neon-yellow);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* =========================================================
   CUSTOMER SUPPORT SECTION — RESPONSIVE (992 / 768 / 480)
   Desktop remains unchanged
========================================================= */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .support-container{
    margin-top: 60px;
    height: auto;              
    min-height: 520px;
    padding: 40px 24px;
  }

  .support-content{
    margin-left: 0;           
    max-width: 520px;
    padding: 28px;
    border-radius: 26px;
  }

  .support-content h1{
    font-size: 22px;
  }

  .support-content h2{
    font-size: 42px;
    margin-top: 8px;
  }

  .support-content p{
    font-size: 15.5px;
  }
}

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

  .support-container{
    margin-top: 50px;
    height: auto;
    min-height: 520px;
    padding: 34px 18px;
    justify-content: center;
    align-items: flex-end;     
  }

  .support-content{
    margin-left: 0;
    width: 100%;
    max-width: 520px;
    padding: 24px;
    border-radius: 24px;
  }

  .support-content h1{
    font-size: 20px;
  }

  .support-content h2{
    font-size: 34px;
    margin-top: 8px;
    line-height: 1.15;
  }

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

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .support-container{
    margin-top: 45px;
    min-height: 500px;
    padding: 28px 14px;
    align-items: flex-end;
  }

  .support-content{
    max-width: 100%;
    padding: 20px;
    border-radius: 20px;
  }

  .support-content h1{
    font-size: 18px;
  }

  .support-content h2{
    font-size: 28px;
  }

  .support-content p{
    font-size: 14.5px;
  }
}

/* PRODUCTS HERO SECTION */
.products-hero{
  position: relative;
  height: 680px;
  display: flex;
  align-items: center;
  padding: 0 160px;
  color: var(--white);
  background-image: url(images/hero/IFPP_IHBProduct.png);
  background-size: cover;
  background-position: center;
  margin-top: -130px;
  padding-top: 120px;
}

/* Overlay */
.products-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    60deg,
    rgb(0, 0, 0) 20%,
    rgba(0, 0, 0, 0.637) 80%,
    rgba(0, 0, 0, 0.25) 100%
  );
  z-index: 1;
}

/* Content */
.products-hero-content{
  position: relative;
  z-index: 2;
  max-width: 1100px;
}

.products-hero h1{
  font-size: 80px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}

.products-title{
  font-size: 30px;
  margin-bottom: 35px;
  max-width: 1000px;
}

.productssub-title{
  font-size: 20px;
  margin-bottom: 35px;
  max-width: 900px;
}

/* Animation */
.products-hero-motion{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.products-hero-motion.active{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   SMART BUSINESS CARDS HERO — RESPONSIVE (992 / 768 / 480)
   DO NOT TOUCH DESKTOP (only overrides below)
========================================================= */

/* ---------- TABLET (<= 992px) ---------- */
@media (max-width: 992px){

  .products-hero{
    height: auto;
    min-height: 620px;
    padding: 0 80px;
    padding-bottom: 110px;
    align-items: flex-start;
  }

  .products-hero .products-hero-content{
    padding-top: 210px;
    margin-top: 0;
  }

  .products-hero h1{
    font-size: 60px;
    margin-bottom: 16px;
    line-height: 1.12;
  }

  .products-hero .products-title{
    font-size: 24px;
    margin-bottom: 22px;
    max-width: 900px;
  }

  .products-hero .productssub-title{
    font-size: 18px;
    margin-bottom: 22px;
    max-width: 820px;
  }

  .products-hero-motion{
    transform: translateY(20px);
  }
}

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

  .products-hero{
    height: auto;
    min-height: 560px;
    padding: 0 40px;
    padding-bottom: 100px;
    align-items: flex-start;
  }

  .products-hero .products-hero-content{
    padding-top: 210px;
    margin-top: 0;
  }

  .products-hero h1{
    font-size: 50px;
    margin-bottom: 15px;
    line-height: 1.15;
  }

  .products-hero .products-title{
    font-size: 22px;
    margin-bottom: 20px;
    max-width: 800px;
  }

  .products-hero .productssub-title{
    font-size: 16px;
    margin-bottom: 20px;
    max-width: 720px;
  }

  .products-hero-motion{
    transform: translateY(20px);
  }
}

/* ---------- SMALL MOBILE (<= 480px) ---------- */
@media (max-width: 480px){

  .products-hero{
    height: auto;
    min-height: 520px;
    padding: 0 20px;
    padding-bottom: 30px;
    align-items: flex-start;
  }

  .products-hero .products-hero-content{
    padding-top: 200px;
    margin-top: 50px;
  }

  .products-hero h1{
    font-size: 35px;
    margin-bottom: 10px;
    line-height: 1.2;
  }

  .products-hero .products-title{
    font-size: 18px;
    margin-bottom: 15px;
    max-width: 100%;
  }

  .products-hero .productssub-title{
    font-size: 15px;
    margin-bottom: 15px;
    max-width: 100%;
  }

  .products-hero-motion{
    transform: translateY(10px);
  }
}

/* =========================================================
   WRISTBAND PACKAGES — PRICING TABLE STYLE (BMC)
   PRODUCTS VERSION
   Supports 2-column & 3-column layouts
   Optimized: 992 / 768 / 480
========================================================= */

.packages-section{
  background: #0B0F14;
  padding: 60px 0 80px;
  margin-top: 70px;
  text-align: center;
}

.packages-title{
  color: var(--white);
  font-size: 34px;
  font-weight: 900;
  margin: 0 0 50px;
}

/* GRID BASE */
.packages-wrapper{
  max-width: 1050px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

/* 2 COLUMN (original event layout) */
.packages-grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/* 3 COLUMN (Products page layout) */
.packages-grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* CARD BASE */
.pricing-card{
  background: #fff;
  border-radius: 22px;
  padding: 28px 26px;
  text-align: left;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

/* TOP BRAND STRIP */
.pricing-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:10px;
}

.pricing-card.is-starter::before{ background: var(--main-pink); }
.pricing-card.is-standard::before{ background: var(--main-light-blue); }

/* RECOMMENDED BADGE */
.recommended-badge{
  position: absolute;
  top: 22px;
  left: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  border-radius: 999px;
  background: var(--black);
  color: var(--main-light-blue);
}

/* TITLE */
.pricing-name{
  font-size: 22px;
  font-weight: 900;
  margin: 18px 0 10px;
}

/* PRICE */
.pricing-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom: 14px;
}

.currency{
  font-size:18px;
  font-weight:800;
}

.amount{
  font-size:55px;
  font-weight:950;
  line-height:1;
}

.per{
  font-size:14px;
  color: rgba(0,0,0,.55);
}

/* DESCRIPTION */
.pricing-tagline{
  font-weight:800;
  margin: 0 0 8px;
}

.pricing-desc{
  font-size:14px;
  color: rgba(0,0,0,.65);
  margin: 0 0 18px;
  line-height:1.5;
}

/* BUTTONS */
.pricing-btn{
  width:100%;
  padding: 12px 16px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

/* Make cards stretch and align buttons */
.pricing-card{
  display: flex;
  flex-direction: column;
}

/* Push button to bottom */
.pricing-btn{
  margin-top: auto;
}

.pricing-btn:active{
  transform: translateY(1px);
}

/* Starter */
.is-starter .pricing-btn{
  border:2px solid var(--main-pink);
  color: var(--main-pink);
  background: none;
}

.is-starter .pricing-btn:hover{
  background: #FFC2E8;
  color:var(--main-pink);
}

/* Standard */
.is-standard .pricing-btn{
  border:2px solid var(--main-light-blue);
  color: var(--main-dark-blue);
  background: var(--main-light-blue);
}

.is-standard .pricing-btn:hover{
  background: #A4DFFF;
  color: var(--main-dark-blue);
}

/* =========================================================
   3RD COLUMN IMAGE — NO BOX, NO CROP
========================================================= */

.packages-image-col{
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.packages-image-col img{
  width: 100%;
  height: auto;       
  object-fit: contain; 
  display: block;
}

/* =========================================================
   RESPONSIVE: <= 992px
========================================================= */
@media (max-width: 992px){

  .packages-section{
    padding: 50px 18px 70px;
  }

  .packages-title{
    font-size: 30px;
    margin-bottom: 42px;
  }

  .packages-wrapper{
    max-width: 900px;
    gap: 18px;
  }

  .packages-grid-3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .packages-image-col{
    grid-column: 1 / -1; /* image spans full width */
    min-height: 320px;
  }

  .pricing-card{
    padding: 26px 22px;
    border-radius: 20px;
  }

  .pricing-name{
    font-size: 21px;
  }

  .amount{
    font-size: 48px;
  }

  .pricing-desc{
    font-size: 13.75px;
  }
}

/* =========================================================
   RESPONSIVE: <= 768px
========================================================= */
@media (max-width: 768px){

  .packages-section{
    padding: 50px 16px 64px;
  }

  .packages-title{
    font-size: 26px;
    margin-bottom: 34px;
  }

  .packages-grid-2,
  .packages-grid-3{
    grid-template-columns: 1fr;
  }

  .packages-wrapper{
    gap: 16px;
  }

  .pricing-card{
    padding: 24px 20px;
    border-radius: 18px;
  }

  .pricing-card.is-recommended{
    padding-top: 40px;
  }

  .recommended-badge{
    top: 18px;
    left: 14px;
    font-size: 11px;
    padding: 6px 12px;
  }

  .pricing-name{
    font-size: 20px;
    margin-top: 14px;
  }

  .amount{
    font-size: 46px;
  }

  .pricing-btn{
    padding: 12px 14px;
  }
}

/* =========================================================
   RESPONSIVE: <= 480px
========================================================= */
@media (max-width: 480px){

  .packages-section{
    padding: 60px 14px 56px;
  }

  .packages-title{
    font-size: 22px;
    margin-bottom: 26px;
  }

  .pricing-card{
    padding: 20px 16px;
    border-radius: 16px;
  }

  .pricing-name{
    font-size: 18px;
    margin: 14px 0 8px;
  }

  .currency{
    font-size: 16px;
  }

  .amount{
    font-size: 40px;
  }

  .per{
    font-size: 13px;
  }

  .pricing-desc{
    font-size: 13.5px;
    margin-bottom: 16px;
  }

  .pricing-btn{
    padding: 12px 14px;
    font-size: 13.5px;
  }
}

/* =========================================================
        PRODUCTS PAGE ONLY — SMART BUSINESS CARDS
========================================================= */

#productsSmartBusinessCards{
  max-width: 1250px;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

/* optional title if you use it */
#productsSmartBusinessCards .smartbusiness-title{
  margin: 0 0 22px;
  font-size: 34px;
  font-weight: 900;
  color: var(--black);
  text-align: center;
}

/* GRID: 4 columns desktop (ONE ROW look) */
#productsSmartBusinessCards .product-section{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  background: transparent;
}

/* Card (NO extra shadows) */
#productsSmartBusinessCards .product-card{
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 18px;
  box-sizing: border-box;
  text-align: left;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Image: */
#productsSmartBusinessCards .product-image{
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: transparent;
  border-radius: 16px;
  display: block;
}

/* Typography */
#productsSmartBusinessCards .product-info h2{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--black);
}

#productsSmartBusinessCards .blue-text{
  color: var(--black);
}

#productsSmartBusinessCards .product-details{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  line-height: 1.6;
  color: var(--main-medium-grey);
}

/* Options */
#productsSmartBusinessCards .product-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}

#productsSmartBusinessCards .product-options label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  color: rgba(0,0,0,0.78);
  user-select: none;
  line-height: 1.2;
}

#productsSmartBusinessCards .product-options input[type="radio"]{
  width: 16px;
  height: 16px;
  accent-color: var(--main-medium-blue);
  cursor: pointer;
}

/* Price row */
#productsSmartBusinessCards .price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: auto;
  padding-top: 10px;
}

#productsSmartBusinessCards .product-price{
  font-size: 15px;
  font-weight: 900;
  color: var(--main-dark-grey);
  margin: 0;
  white-space: nowrap;
}

#productsSmartBusinessCards .add-to-cart-btn{
  width: auto;
  padding: 10px 18px;
  background-color: var(--main-medium-blue);
  color: var(--white);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  font-size: 14px;
  transition: 0.25s ease;
  white-space: nowrap;
}

#productsSmartBusinessCards .add-to-cart-btn:hover{
  background-color: var(--black);
  color: var(--white);
}

/* Pagination (Products page only) */
#productsSmartBusinessCards .smartbusiness-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 26px 0 10px;
  user-select: none;
}

#productsSmartBusinessCards .smartbusiness-pagination button{
  border: 1px solid rgba(0,0,0,0.14);
  background: var(--white);
  color: var(--black);
  height: 42px;
  min-width: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

#productsSmartBusinessCards .smartbusiness-pagination button:hover{
  background: rgba(0,0,0,0.05);
}

#productsSmartBusinessCards .smartbusiness-pagination button.is-active{
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

#productsSmartBusinessCards .smartbusiness-pagination button.is-disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

#productsSmartBusinessCards .smartbusiness-pagination .dots{
  padding: 0 6px;
  color: rgba(0,0,0,0.55);
  font-weight: 900;
}

/* =========================
   Responsive
========================= */

/* <= 992px: 2 columns */
@media (max-width: 992px){
  #productsSmartBusinessCards{
    padding: 70px 18px 65px;
  }

  #productsSmartBusinessCards .product-section{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  #productsSmartBusinessCards .product-image{
    height: 220px;
  }

  #productsSmartBusinessCards .smartbusiness-pagination{
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
  }

  #productsSmartBusinessCards .smartbusiness-pagination button{
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
  }
}

/* <= 768px: 1 column */
@media (max-width: 768px){
  #productsSmartBusinessCards{
    padding: 70px 16px 65px;
  }

  #productsSmartBusinessCards .product-section{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #productsSmartBusinessCards .product-card{
    padding: 16px;
  }

  #productsSmartBusinessCards .product-image{
    height: 210px;
  }

  #productsSmartBusinessCards .price-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #productsSmartBusinessCards .add-to-cart-btn{
    width: 100%;
    text-align: center;
  }
}

/* <= 480px */
@media (max-width: 480px){
  #productsSmartBusinessCards{
    padding: 70px 14px 65px;
  }

  #productsSmartBusinessCards .product-image{
    height: 200px;
  }

  #productsSmartBusinessCards .product-info h2{
    font-size: 19px;
  }
}

/* =========================================================
        PRODUCTS PAGE ONLY — SMART SIGNS (SCOPED)
========================================================= */

.products-smart-signs .smart-signs-wrap{
  max-width: 1250px;
  margin: 0 auto;
  padding-top: 70px;
  margin-bottom: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Desktop grid (4 columns) */
.products-smart-signs .smart-signs.smart-signs-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding: 0;
  background: transparent;
  margin: 0 auto;
}

/* Card styling */
.products-smart-signs .smart-signs.smart-signs-grid .product{
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 18px;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* Image */
.products-smart-signs .smart-signs.smart-signs-grid .product img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin: 0 0 14px;
}

/* Title */
.products-smart-signs .smart-signs.smart-signs-grid .product-name{
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--black);
}

/* Price + button row */
.products-smart-signs .smart-signs.smart-signs-grid .price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
}

/* Price */
.products-smart-signs .smart-signs.smart-signs-grid .product-price{
  font-size: 15px;
  font-weight: 700;
  color: var(--main-dark-grey);
  margin: 0;
  white-space: nowrap;
}

/* Button */
.products-smart-signs .smart-signs.smart-signs-grid .add-to-cart{
  width: auto;
  padding: 10px 18px;
  background-color: var(--main-medium-blue);
  color: var(--white);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  transition: 0.25s ease;
  white-space: nowrap;
}

.products-smart-signs .smart-signs.smart-signs-grid .add-to-cart:hover{
  background-color: var(--black);
  color: var(--white);
}

/* Pagination */
.products-smart-signs .smart-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 26px 0 10px;
  user-select: none;
}

.products-smart-signs .smart-pagination button{
  border: 1px solid rgba(0,0,0,0.14);
  background: var(--white);
  color: var(--black);
  height: 42px;
  min-width: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.products-smart-signs .smart-pagination button:hover{
  background: rgba(0,0,0,0.05);
}

.products-smart-signs .smart-pagination button.is-active{
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.products-smart-signs .smart-pagination button.is-disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.products-smart-signs .smart-pagination .dots{
  padding: 0 6px;
  color: rgba(0,0,0,0.55);
  font-weight: 800;
}

/* =========================================================
   RESPONSIVE (992 / 768 / 480)
========================================================= */

/* <= 992px: 2 columns */
@media (max-width: 992px){
  .products-smart-signs .smart-signs-wrap{
    padding: 70px 18px 65px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .product img{
    height: 230px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .price-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .product-price{
    margin: 0;
    white-space: nowrap;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .add-to-cart{
    width: auto;
    white-space: nowrap;
  }

  .products-smart-signs .smart-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
  }

  .products-smart-signs .smart-pagination button{
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 12px;
  }
}

/* <= 768px: 1 column */
@media (max-width: 768px){
  .products-smart-signs .smart-signs-wrap{
    padding: 70px 16px 65px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .product{
    padding: 16px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .product img{
    height: 220px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .price-row{
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .add-to-cart{
    width: 100%;
    text-align: center;
  }

  .products-smart-signs .smart-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }

  .products-smart-signs .smart-pagination button{
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 12px;
  }
}

/* <= 480px */
@media (max-width: 480px){
  .products-smart-signs .smart-signs-wrap{
    padding: 70px 14px 65px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid{
    gap: 18px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .product img{
    height: 200px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .product-name{
    font-size: 16px;
  }

  .products-smart-signs .smart-signs.smart-signs-grid .price-row{
    gap: 10px;
    padding-top: 12px;
  }

  .products-smart-signs .smart-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
  }

  .products-smart-signs .smart-pagination button{
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border-radius: 10px;
  }
}

/* =========================================================
   ADD-ONS (desc + options)
========================================================= */

.products-smart-signs .smart-signs.smart-signs-grid .product-desc{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,0.68);
}

.products-smart-signs .smart-signs.smart-signs-grid .product-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}

.products-smart-signs .smart-signs.smart-signs-grid .product-options label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.78);
  user-select: none;
  line-height: 1.2;
}

.products-smart-signs .smart-signs.smart-signs-grid .product-options input[type="radio"]{
  width: 16px;
  height: 16px;
  accent-color: var(--main-medium-blue);
  cursor: pointer;
}

/* =========================================================
   DETAILS MODAL (Scoped so it doesn't override other pages)
========================================================= */

.products-smart-signs #detailsModal.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.products-smart-signs #detailsModal .modal{
  width: min(560px, 100%);
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  padding: 18px;
  box-sizing: border-box;
}

.products-smart-signs #detailsModal .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.products-smart-signs #detailsModal .modal-header h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--black);
}

.products-smart-signs #detailsModal .modal-x{
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: rgba(0,0,0,0.70);
  padding: 4px 8px;
  border-radius: 10px;
  transition: 0.2s ease;
}

.products-smart-signs #detailsModal .modal-x:hover{
  background: rgba(0,0,0,0.06);
  color: var(--black);
}

.products-smart-signs #detailsModal .modal-sub{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,0.68);
}

.products-smart-signs #detailsModal #detailsFields .field{
  margin: 10px 0;
}

.products-smart-signs #detailsModal #detailsFields label{
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(0,0,0,0.78);
}

.products-smart-signs #detailsModal #detailsFields input,
.products-smart-signs #detailsModal #detailsFields select,
.products-smart-signs #detailsModal #detailsFields textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.16);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.products-smart-signs #detailsModal #detailsFields textarea{
  resize: vertical;
  min-height: 92px;
}

.products-smart-signs #detailsModal #detailsFields input:focus,
.products-smart-signs #detailsModal #detailsFields select:focus,
.products-smart-signs #detailsModal #detailsFields textarea:focus{
  border-color: rgba(0,0,0,0.32);
}

.products-smart-signs #detailsModal .modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.products-smart-signs #detailsModal .btn-primary,
.products-smart-signs #detailsModal .btn-secondary{
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
  border: 1px solid transparent;
}

.products-smart-signs #detailsModal .btn-primary{
  background: var(--main-medium-blue);
  color: var(--white);
}

.products-smart-signs #detailsModal .btn-primary:hover{
  background: var(--black);
  color: var(--white);
}

.products-smart-signs #detailsModal .btn-secondary{
  background: var(--white);
  color: var(--black);
  border-color: rgba(0,0,0,0.18);
}

.products-smart-signs #detailsModal .btn-secondary:hover{
  background: rgba(0,0,0,0.06);
}

@media (max-width: 768px){
  .products-smart-signs #detailsModal .modal{
    padding: 16px;
    border-radius: 16px;
  }

  .products-smart-signs #detailsModal .modal-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .products-smart-signs #detailsModal .btn-primary,
  .products-smart-signs #detailsModal .btn-secondary{
    width: 100%;
    text-align: center;
  }
}

/*          CREATE DIGITAL BUSINESS CARD HEADER         */
.create-new-card-hero {
    position: relative;
    height: 680px;
    display: flex;
    align-items: center;
    padding: 0 160px;
    color: var(--white);
    background-image: url(images/hero/IFPP_IHB_One.png);
    background-size: cover;
    background-position: center;
    margin-top: -130px;
    padding-top: 120px;
}

/* Overlay */
.create-new-card-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        60deg,
        rgb(0, 0, 0) 20%,
        rgba(0, 0, 0, 0.637) 80%,
        rgba(0, 0, 0, 0.25) 100%
    );
    z-index: 1;
}

/* Content */
.create-new-card-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
}

.create-new-card-hero h1 {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

/* Animation */
.create-new-card-hero-motion {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.create-new-card-hero-motion.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   TABLET (<= 992px)
========================================= */
@media (max-width: 992px){
  .create-new-card-hero{
    height: auto;
    min-height: 620px;
    padding: 0 80px;
    align-items: flex-start;
  }

  .create-new-card .create-new-card-hero-content{
    padding-top: 210px;
    margin-top: 0;
  }

  .create-new-card-hero h1{
    font-size: 60px;
    margin-bottom: 16px;
    line-height: 1.12;
  }

  .create-new-card-hero-motion{
    transform: translateY(20px);
  }
}

/* =========================================
   MOBILE (<= 768px)
========================================= */
@media (max-width: 768px){
  .create-new-card-hero{
    min-height: 560px;
    padding: 0 40px;
    align-items: flex-start;
  }

  .create-new-card-hero .create-new-card-hero-content{
    padding-top: 210px;
    margin-bottom: 100px;
  }

  .create-new-card-hero h1{
    font-size: 50px;
    margin-bottom: 15px;
    line-height: 1.15;
  }
  
    .create-new-card-hero .subtitle{
    font-size: 22px;
    margin-bottom: 20px;
  }

  .create-new-card-hero-motion{
    transform: translateY(20px);
  }
}

/* =========================================
   SMALL MOBILE (<= 480px)
========================================= */
@media (max-width: 480px){
  .create-new-card-hero{
    min-height: 520px;
    padding: 0 20px;
    align-items: flex-start;
  }

  .create-new-card-hero .create-new-card-hero-content{
    padding-top: 240px;
    margin-bottom: 90px;
  }

  .create-new-card-hero h1{
    font-size: 35px;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  
    .create-new-card-hero .subtitle{
    font-size: 18px;
    margin-bottom: 15px;
  }

  .create-new-card-hero-motion{
    transform: translateY(10px);
  }
}

/* =========================================================
   CARD BUILDER (SCOPED to avoid tampering with site footer)
========================================================= */
.card-builder-container {
  max-width: 1250px;
  margin: 40px auto;
  background: #f5f7fb;
  border-radius: 14px;
  padding: 20px;
}

/* =========================================================
   BUILDER BASELINE (prevents global site CSS from bleeding in)
========================================================= */
.card-builder-container,
.card-builder-container *{
  box-sizing: border-box;
}

.card-builder-container button,
.card-builder-container input,
.card-builder-container textarea,
.card-builder-container select{
  font: inherit;
}

/* Tabs */
.card-builder-container .builder-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #e0e4ee;
  padding-bottom: 12px;
}

.card-builder-container .builder-tabs .tab {
  background: transparent;
  border: none;
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  color: var(--main-medium-grey);
  border-bottom: 3px solid transparent;
}

.card-builder-container .builder-tabs .tab.active {
  color: var(--main-dark-blue);
  border-bottom-color: var(--main-light-blue);
}

/* Layout */
.card-builder-container .builder-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 30px;
  margin-top: 25px;
}

/* Tab panels */
.card-builder-container .tab-panel { display: none; }
.card-builder-container .tab-panel.active { display: block; }

/* =========================================================
   PROFILE: Upload placeholders inside dropdown
========================================================= */
.card-builder-container .upload-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 10px;
}

.card-builder-container .upload-block{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
}

.card-builder-container .upload-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.card-builder-container .upload-title{
  font-weight: 800;
  font-size: 13px;
  color: #111827;
}

.card-builder-container .upload-dims{
  font-weight: 700;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.card-builder-container .upload-row{
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 10px;
  align-items: center;
}

.card-builder-container .upload-thumb{
  height: 86px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #e5e7eb;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-builder-container .upload-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo contained */
.card-builder-container .upload-thumb.upload-thumb-logo{
  background: #ffffff;
}

.card-builder-container .upload-thumb.upload-thumb-logo img{
  object-fit: contain;
  padding: 10px;
  background: #ffffff;
}

/* Smaller upload tile to match reference */
.card-builder-container .upload-tile.upload-tile-sm{
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
}

/* Mobile stacking */
@media (max-width: 560px){
  .card-builder-container .upload-pair{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LEFT FORM
========================================================= */
.card-builder-container .builder-form {
  background: var(--white);
  border-radius: 14px;
  padding: 25px;
  overflow-y: auto;
  max-height: 80vh;
}

.card-builder-container .builder-form label {
  font-weight: 600;
  font-size: 14px;
  margin-top: 18px;
  display: block;
}

.card-builder-container .builder-form input,
.card-builder-container .builder-form textarea,
.card-builder-container .builder-form select {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  box-sizing: border-box;
}

.card-builder-container .builder-form textarea {
  resize: vertical;
  min-height: 80px;
}

/* =================================
   PAGE URL (FINAL FIX)
   ================================= */
.card-builder-container .page-url-wrapper{
  display: flex;
  align-items: center;
  height: 42px;
  width: 100%;
  min-width: 0;

  border: 1px solid var(--light-grey);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
  margin-top: 6px;
}

/* Prefix chip (left segment) */
.card-builder-container .page-url-wrapper .url-prefix{
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;

  background: var(--close-white);
  border-right: 1px solid var(--light-grey);

  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--main-dark-blue);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Important: don't let it steal clicks */
  pointer-events: none;
  user-select: none;

  /* Important: keep prefix sized to content (but still truncatable) */
  flex: 0 1 auto;
  max-width: 55%;
  min-width: 120px; /* prevents tiny collapsed prefix */
}

/* Slug input (right segment) */
.card-builder-container .page-url-wrapper #pageSlug{
  /* Important: flex should control the width */
  flex: 1 1 auto;
  min-width: 0;

 
  width: 1%;

  height: 100%;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;

  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;

  /* Let user see what they're typing */
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* Optional: better disabled look */
.card-builder-container .page-url-wrapper #pageSlug:disabled{
  background: #f3f4f6;
  cursor: not-allowed;
}

/* =================================
   PAGE URL (ALIGNMENT OVERRIDE)
   ================================= */
.card-builder-container .page-url-wrapper{
  height: 42px;
}

.card-builder-container .page-url-wrapper .url-prefix{
  height: 42px;
  display: inline-flex;
  align-items: center;
  line-height: 1;          /* stop baseline tricks */
  padding: 0 12px;         /* ensure true vertical centering */
}

.card-builder-container .page-url-wrapper #pageSlug{
  height: 42px;
  line-height: 1;          /* stop baseline tricks */
  padding: 0 12px;         /* ensure true vertical centering */
  margin: 0;

  /* remove browser default styling that can shift text */
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;

  /* ensure consistent box sizing */
  box-sizing: border-box;
}

/* =========================================================
   TEMPLATE GRID (VERTICAL PREVIEW CARDS)
========================================================= */

.card-builder-container .template-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 10px;
}

/* Vertical card container */
.card-builder-container .template-card{
  aspect-ratio: 9 / 16;   /* vertical shape */
  border-radius: 8px;
  background: #f3f4f6;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .2s ease,
              border-color .2s ease,
              box-shadow .2s ease;
}

/* SVG Preview */
.card-builder-container .template-preview{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill vertically */
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Hover */
.card-builder-container .template-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 24px rgba(0,0,0,0.15);
}

/* Active */
.card-builder-container .template-card.active{
  border-color: var(--main-light-blue);
  box-shadow: 0 16px 28px rgba(0,0,0,0.18);
}

/* Focus accessibility */
.card-builder-container .template-card:focus{
  outline: none;
}

.card-builder-container .template-card:focus-visible{
  outline: 3px solid rgba(0,170,255,0.35);
  outline-offset: 3px;
}

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

@media (max-width: 768px){
  .card-builder-container .template-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px){
  .card-builder-container .template-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* =========================================================
   BUILDER SECTIONS (DROPDOWNS)
========================================================= */
.card-builder-container .builder-section {
  margin-top: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.card-builder-container .builder-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--close-white);
  cursor: pointer;
}

.card-builder-container .builder-section-header h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.card-builder-container .builder-section-body {
  padding: 16px;
  display: none;
}

.card-builder-container .builder-section.open .builder-section-body {
  display: block;
}

/* =========================================================
   TWO COLUMN
========================================================= */
.card-builder-container .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* =========================================================
   CONNECT ROWS
========================================================= */
.card-builder-container .connect-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.card-builder-container .connect-row label {
  min-width: 80px;
  margin-top: 0;
}

/* =========================================================
   TOGGLE SWITCH
========================================================= */
.card-builder-container .toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  margin-top: 4px;
}

.card-builder-container .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.card-builder-container .toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: 0.3s;
}

.card-builder-container .toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: 0.3s;
}

.card-builder-container .toggle-switch input:checked + .toggle-slider {
  background: var(--main-light-blue);
}

.card-builder-container .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.card-builder-container .toggle-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 500;
}

.card-builder-container .section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-weight: 600;
}

.card-builder-container .section-row .toggle-switch { margin-top: 0; }

/* =========================================================
   IMAGES SECTION
========================================================= */
.card-builder-container .grid-options {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.card-builder-container .grid-option {
  width: 70px;
  height: 70px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  background: #ffffff;
}

.card-builder-container .grid-option.active,
.card-builder-container .grid-option:hover {
  border-color: var(--main-light-blue);
}

.card-builder-container .grid-preview {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 4px;
}

.card-builder-container .grid-preview span {
  background: #d1d5db;
  border-radius: 4px;
}

.card-builder-container .grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-builder-container .grid-4 { grid-template-columns: repeat(2, 1fr); }
.card-builder-container .grid-6 { grid-template-columns: repeat(3, 1fr); }

.card-builder-container .image-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.card-builder-container .image-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
}

.card-builder-container .image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-builder-container .image-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-builder-container .upload-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--close-white);
  cursor: pointer;
  border: 1px dashed #d1d5db;
}

.card-builder-container .upload-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

/* =========================================================
   ADD MORE BUTTONS + FOOTER ACTIONS
========================================================= */
.card-builder-container .add-more {
  margin-top: 15px;
  padding: 10px;
  background: #eef2ff;
  border: 1px dashed var(--main-light-blue);
  border-radius: 8px;
  color: var(--main-light-blue);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.card-builder-container .add-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card-builder-container .builder-footer-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;          /* slightly tighter */
  gap: 12px;
}

/* Base button */
.card-builder-container .builder-footer-actions button{
  padding: 8px 14px;         /* ⬅ reduced size */
  border-radius: 100px;        /* ⬅ more defined */
  font-weight: 700;
  font-size: 13px;           /* ⬅ smaller text */
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}

/* Reset Template */
.card-builder-container .builder-footer-actions button:first-child{
  background: #D4D4D4;
  color: #111827;
}

/* Save Draft (inherits base, stays neutral) */
.card-builder-container .builder-footer-actions button#saveDraftBtn{
  background: #D4D4D4;
  color: #111827;
}

/* Next button (primary action) */
.card-builder-container .builder-footer-actions .next-tab{
  background: var(--main-light-blue);
  color: var(--white);
  padding: 8px 16px;         /* slightly emphasized, not bulky */
}

/* Hover polish */
.card-builder-container .builder-footer-actions button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* Active state */
.card-builder-container .builder-footer-actions button:active{
  transform: translateY(0);
  box-shadow: none;
}

.card-builder-container .builder-footer-actions .next-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 14px;
  font-size: 15px;          /* controls icon size */
  line-height: 1;

  background: var(--main-light-blue);
  color: var(--white);
}

/* Link remove button */
.card-builder-container .remove-link{
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
  font-weight: 700;
}

/* =========================================================
   RIGHT PREVIEW CARD
========================================================= */
.card-builder-container .builder-preview{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;    
  max-width: 100%;
}

@media (min-width: 1025px){
  .card-builder-container .builder-preview{
    position: sticky;
    top: 20px;
    align-self: start;
  }
}

.card-builder-container .preview-card{
  width: 100%;
  min-width: 0;    
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
}

/* Row 1 */
.card-builder-container .preview-top{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;     
}

/* URL text */
.card-builder-container .preview-link{
  font-size: 13px;
  font-weight: 600;
  color: var(--main-medium-grey);
  text-decoration: none;
  display: block;          
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-builder-container .preview-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.card-builder-container .icon-btn{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
}

.card-builder-container .icon-btn:hover{
  background: #f3f4f6;
}

/* Row 2 */
.card-builder-container .preview-tools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}

.card-builder-container .tools-left{
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-builder-container .tool-btn{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
}

.card-builder-container .tool-icon{
  width: 18px;
  height: 18px;
  display: block;
  color: #111827;
}

.card-builder-container .tool-btn:hover{
  background: #f3f4f6;
}

/* ===============================
   SAVE BUTTON — PILL
=============================== */

.card-builder-container .save-btn{
  padding: 10px 18px;
  min-height: 40px;
  border-radius: 999px; /* pill */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;

  background: var(--main-light-blue); /* flat blue */
  color: #ffffff;
  border: none;

  cursor: pointer;
  white-space: nowrap;

  box-shadow: 0 4px 10px rgba(0,0,0,0.12);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

/* Icon */
.card-builder-container .save-btn i{
  font-size: 14px;
  line-height: 1;
}

/* Hover */
.card-builder-container .save-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.14);
}

/* Active */
.card-builder-container .save-btn:active{
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

/* Phone area */
.card-builder-container .preview-phone-area{
  background: var(--white);
  padding: 18px 14px 22px;
}

.card-builder-container .phone-wrapper{
  position: relative;
  width: 300px;
  margin: 0 auto;
}

.card-builder-container .phone-frame{
  width: 100%;
  display: block;
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.card-builder-container .phone-screen{
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 22px;
  right: 22px;
  bottom: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 22px;
  background: #ffffff;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.card-builder-container .phone-screen::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.card-builder-container #phoneContent{
  width: 100%;
  min-height: 100%;
}

/* =========================================================
   PREVIEW TEMPLATE STYLES (SCOPED)
========================================================= */
.card-builder-container .card-page{
  width: 100%;
  padding: 14px 12px 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  font-family: var(--ds-font, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
}

.panel{
  border-color: var(--ds-border);
}

.card-builder-container .panel{
  background: var(--ds-panel-bg, #ffffff);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 14px;
  padding: 12px;
  text-align: left;
}

.card-builder-container .panel-title{
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: var(--ds-title-weight, 800);
  color: var(--ds-heading);
}

.card-builder-container .panel-text,
.card-builder-container .panel p,
.card-builder-container .panel .desc{
  color: var(--ds-paragraph, #111827);
}

.card-builder-container .p-name{
  margin: 0;
  font-size: 20px;
  font-weight: var(--ds-title-weight, 900);
}

.card-builder-container .p-title,
.card-builder-container .p-company{
  margin: 0;
  font-size: 13px;
  color: var(--ds-title-company);
}

.card-builder-container .list{ display: grid; gap: 8px; }
.card-builder-container .list-item{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  color: var(--ds-text, #111827);
  background: var(--ds-panel-bg, #ffffff);
  
  overflow-wrap: anywhere;
  word-break: break-word;
}

.card-builder-container .addr{ display:grid; gap:2px; margin-top:6px; color:#374151; }

.card-builder-container .chip-row{ display: flex; gap: 8px; margin-top: 8px; }
.card-builder-container .chip{
  flex: 1;
  border-radius: 999px;
  padding: 10px 0;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.15);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  backdrop-filter: blur(6px);
}

/* common preview elements */
.card-builder-container .pv-gallery{
  display: grid;
  gap: 8px;
}
.card-builder-container .pv-gallery[data-gallery-grid="3"]{ grid-template-columns: repeat(3, 1fr); }
.card-builder-container .pv-gallery[data-gallery-grid="4"]{ grid-template-columns: repeat(2, 1fr); }
.card-builder-container .pv-gallery[data-gallery-grid="6"]{ grid-template-columns: repeat(3, 1fr); }

.card-builder-container .pv-img{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #e5e7eb;
  background-size: cover;
  background-position: center;
}
.card-builder-container .pv-img.ph{ background: #e5e7eb; }

/* Section background toggle ONLY (does not touch card-page / body) */
[data-pv-section].pv-bg-on {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
}

.card-builder-container .pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card-builder-container .pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  color: #111827;
  font-weight: 800;
  font-size: 12px;
  background: #ffffff;
}

.card-builder-container .pill.is-empty{
  opacity: 0.45;
  pointer-events: none;
}

.card-builder-container .pv-links-list{
  display: grid;
  gap: 10px;
}

.card-builder-container .pv-linkbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border-radius: 14px;
  background: var(--main-light-blue);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

.card-builder-container .pv-empty{
  font-size: 13px;
  color: #6b7280;
}

/* ---------------- Template 1 (photo hero look) ---------------- */
.card-builder-container .t1 .hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #d1d5db;
  margin-top: 0;
  padding: 0;
  aspect-ratio: 5 / 6.25;
  height: auto;
}

.card-builder-container .t1 .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.10));
}

.card-builder-container .t1 .hero-text{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  color: var(--white);
  width: calc(100% - 24px);
}

.card-builder-container .t1 .p-name{ color: var(--ds-name);
}
.card-builder-container .t1 .hero-text .p-title,
.card-builder-container .t1 .hero-text .p-company{ color: var(--ds-title-company); }
.card-builder-container .t1 .hero-photo-slot{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center; /* use this to control framing */
  z-index: 0;
}

.card-builder-container .t1 .brand-badge{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-builder-container .t1 .brand-logo{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #e5e7eb;
  background-size: cover;
  background-position: center;
}

/* ===============================
   FLOATING CTA BUTTON (ICON + TEXT)
================================ */

.card-builder-container .cta-float{
  margin-top: 10px;
  width: 100%;

  display: flex;                 /* REQUIRED */
  align-items: center;           /* vertical center */
  justify-content: center;       /* horizontal center */
  gap: 10px;                     /* space between icon + text */

  padding: 14px 16px;
  border-radius: 14px;
  border: 0;

  background: #111827;
  color: #ffffff;

  font-weight: 700;
  font-size: 15px;

  text-decoration: none;         /* removes underline */
  cursor: pointer;

  transition: transform 0.2s ease, background 0.2s ease;
}

/* Icon sizing */
.card-builder-container .cta-float i{
  font-size: 16px;
  line-height: 1;
}

/* Hover feedback */
.card-builder-container .cta-float:hover{
  background: #0f172a;
  transform: translateY(-1px);
}

/* Active press */
.card-builder-container .cta-float:active{
  transform: translateY(0);
}

.card-builder-container #phoneContent .card-page.ds-enabled .cta-float{
  background: var(--ds-cta-bg);
  color: var(--ds-cta-text);
}

/* =========================================================
            TEMPLATE 1: Default placeholders
========================================================= */

/* Profile photo placeholder for Template 1 */
.card-builder-container .t1 .hero-photo-slot[data-preview-img="profilePhoto"]:not(.has-img){
  background-image: url("images/Digital-Business-Card-Template_One.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Brand logo placeholder for Template 1 */
.card-builder-container .t1 .brand-logo[data-preview-img="brandLogo"]:not(.has-img){
  background-image: url("images/Logo-Placeholder-01.jpg");
  background-size: contain;    
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--white);   
}

.card-builder-container .chip-link{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
            TEMPLATE 2 — Minimal Avatar Header
========================================================= */

/* FIX: Template 2 text should be BLACK */
.card-builder-container .card-page.t2{
  --ds-name: #111827;         
  --ds-title-company: #374151; 
}

/* Ensures profile section does not stretch */
.card-builder-container .t2 .pv-profile{
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

/* Ensures card stacks from top */
.card-builder-container .card-page.t2{
  justify-content: flex-start;
}

/* =========================
        HERO HEADER
========================= */
.card-builder-container .t2 .hero.hero-min{
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 54px 1fr 40px;
  gap: 10px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px;
  height: auto;
  min-height: 0;
  margin: 0;
}

/* =========================
        TEXT COLUMN
========================= */
.card-builder-container .t2 .hero-text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* Name must ALWAYS be visible */
.card-builder-container .t2 .p-name{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--ds-name);
  white-space: normal;
  overflow: visible;
  line-height: 1.15;
}

/* Title + Company may truncate */
.card-builder-container .t2 .p-title,
.card-builder-container .t2 .p-company{
  margin: 0;
  font-size: 13px;
  color: var(--ds-title-company);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
        CONNECT ICONS
========================= */
.card-builder-container .t2 .mini-icons{
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.card-builder-container .t2 .mi{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #111827;
}

/* =========================
   AVATAR (PROFILE PHOTO)
========================= */
.card-builder-container .t2 .avatar{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background-image: url("images/Digital-Business-Card-Template_Two.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Uploaded image overrides placeholder */
.card-builder-container .t2 .avatar.has-img{
  background-size: cover;
  background-position: center;
}

/* =========================
   BRAND LOGO
========================= */
.card-builder-container .t2 .brand-logo-sm{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-image: url("images/Logo-Placeholder-01.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--white);
}

/* Uploaded logo overrides placeholder */
.card-builder-container .t2 .brand-logo-sm.has-img{
  background-size: contain;
  background-position: center;
}

/* =========================================================
   TEMPLATE 2 — LIVE + PREVIEW (FIX)
   Reason: live card.php does NOT have .card-builder-container
========================================================= */

/* Variables (Template 2 defaults) */
#phoneContent .card-page.t2,
.card-builder-container .card-page.t2{
  --ds-name: #111827;
  --ds-title-company: #374151;
}

/* Prevent profile section stretching */
#phoneContent .t2 .pv-profile,
.card-builder-container .t2 .pv-profile{
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

/* Stack from top */
#phoneContent .card-page.t2,
.card-builder-container .card-page.t2{
  justify-content: flex-start;
}

/* HERO HEADER */
#phoneContent .t2 .hero.hero-min,
.card-builder-container .t2 .hero.hero-min{
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 54px 1fr 40px;
  gap: 10px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px;
  height: auto;
  min-height: 0;
  margin: 0;
}

/* TEXT COLUMN */
#phoneContent .t2 .hero-text,
.card-builder-container .t2 .hero-text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* Name */
#phoneContent .t2 .p-name,
.card-builder-container .t2 .p-name{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--ds-name);
  white-space: normal;
  overflow: visible;
  line-height: 1.15;
}

/* Title + Company */
#phoneContent .t2 .p-title,
#phoneContent .t2 .p-company,
.card-builder-container .t2 .p-title,
.card-builder-container .t2 .p-company{
  margin: 0;
  font-size: 13px;
  color: var(--ds-title-company);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CONNECT ICONS */
#phoneContent .t2 .mini-icons,
.card-builder-container .t2 .mini-icons{
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

#phoneContent .t2 .mi,
.card-builder-container .t2 .mi{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111827;
}

/* AVATAR */
#phoneContent .t2 .avatar,
.card-builder-container .t2 .avatar{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background-image: url("images/Digital-Business-Card-Template_Two.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#phoneContent .t2 .avatar.has-img,
.card-builder-container .t2 .avatar.has-img{
  background-size: cover;
  background-position: center;
}

/* BRAND LOGO */
#phoneContent .t2 .brand-logo-sm,
.card-builder-container .t2 .brand-logo-sm{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-image: url("images/Logo-Placeholder-01.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--white);
}

#phoneContent .t2 .brand-logo-sm.has-img,
.card-builder-container .t2 .brand-logo-sm.has-img{
  background-size: contain;
  background-position: center;
}

/* ---------------- Template 3 (banner + soft panels) ---------------- */

/* FIX: Template 3 defaults (prevents ds inheritance from other templates) */
.card-builder-container .card-page.t3{
  --ds-name: #111827;           /* name default = black */
  --ds-title-company: #4b5563;  /* title/company default = slate */
}

.card-builder-container .t3 .banner{
  width: 100%;
  height: 310px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  overflow: hidden;

  /* Default banner placeholder image */
  background-image: url("images/Digital-Business-Card-Template_Three.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Stack spacing below banner */
.card-builder-container .t3 .stack{
  text-align: left;
  padding: 10px 2px 0;
}

/* About soft panel */
.card-builder-container .t3 .panel-soft{
  background: #f8fafc;
}

/* Logo position (top-right, slightly overlapping banner) */
.card-builder-container .t3 .brand-inline{
  display: flex;
  justify-content: flex-end;
  margin-top: -22px;
  margin-bottom: 6px;
}

/* Brand logo (placeholder + upload override) */
.card-builder-container .t3 .brand-logo-sm{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background-color: var(--white);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Default logo placeholder (until user uploads) */
.card-builder-container .t3 .brand-logo-sm[data-preview-img="brandLogo"]:not(.has-img){
  background-image: url("images/Logo-Placeholder-01.jpg");
}

/* Text styling (prevents weird color inheritance issues) */
.card-builder-container .t3 .p-name{
  margin: 6px 0 2px;
  font-size: 20px;
  font-weight: 900;
  color: var(--ds-name);
  line-height: 1.15;
}

.card-builder-container .t3 .p-title,
.card-builder-container .t3 .p-company{
  margin: 0;
  font-size: 13px;
  color: var(--ds-title-company);
}

/* Chips */
.card-builder-container .t3 .chips-compact{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.card-builder-container .t3 .chip-lite{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  font-weight: 900;
  font-size: 12px;
}

.card-builder-container .t3 .chip-lite i{
  font-size: 13px;
}

/* ---------------- Template 4 (split hero + CTAs) ---------------- */

/* FIX: Template 4 defaults (prevents ds inheritance from other templates) */
.card-builder-container .card-page.t4{
  --ds-name: #111827;           /* name default = black */
  --ds-title-company: #4b5563;  /* title/company default = slate */
}

/* Main split hero container */
.card-builder-container .t4 .hero-split{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

/* LEFT SIDE (text + logo + CTAs) */
.card-builder-container .t4 .split-left{
  padding: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* RIGHT SIDE (profile image) */
.card-builder-container .t4 .split-right{
  background-color: #d1d5db;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- PROFILE PHOTO PLACEHOLDER ---------- */
.card-builder-container
.t4
.split-right[data-preview-img="profilePhoto"]:not(.has-img){
  background-image: url("images/Digital-Business-Card-Template_Four.jpg");
}

/* ---------- BRAND LOGO ---------- */
.card-builder-container .t4 .brand-inline{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.card-builder-container .t4 .brand-logo-sm{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;

  background-color: #ffffff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Default logo placeholder */
.card-builder-container
.t4
.brand-logo-sm[data-preview-img="brandLogo"]:not(.has-img){
  background-image: url("images/Logo-Placeholder-01.jpg");
}

/* ---------- NAME / TITLE / COMPANY ---------- */
.card-builder-container .t4 .p-name{
  margin: 6px 0 2px;
  font-size: 20px;
  font-weight: 900;
  color: var(--ds-name);
  line-height: 1.15;
}

.card-builder-container .t4 .p-title,
.card-builder-container .t4 .p-company{
  margin: 0;
  font-size: 13px;
  color: var(--ds-title-company);
}

/* ---------- CTA BUTTONS ---------- */
.card-builder-container .t4 .cta-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.card-builder-container .t4 .cta{
  border-radius: 14px;
  padding: 12px 10px;
  border: 0;
  background: var(--main-light-blue);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.card-builder-container .t4 .cta.secondary{
  background: #111827;
}

/* Upload image blocks in preview */
.card-builder-container [data-preview-img]{
  background-repeat: no-repeat;
}
.card-builder-container [data-preview-img].has-img{
  background-size: cover;
  background-position: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .card-builder-container .builder-body {
    grid-template-columns: 1fr;
  }
  .card-builder-container .builder-preview {
    margin-top: 30px;
  }
}

/* =========================================================
   DESIGN / SETTINGS — SAFE MODE (NO TEMPLATE OVERRIDES)
========================================================= */

.card-builder-container #phoneContent{
  --ds-bg-image: none;
  --ds-bg-overlay: 0;

  position: relative;
  overflow: hidden;
  min-height: 100%;
}

/* Background image behind the template */
.card-builder-container #phoneContent::before{
  content:"";
  position: absolute;
  inset: 0;
  background-image: var(--ds-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Dark overlay behind the template */
.card-builder-container #phoneContent::after{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--ds-bg-overlay));
  z-index: 1;
  pointer-events: none;
}

/* Ensure the template content stays above background + overlay */
.card-builder-container #phoneContent > *{
  position: relative;
  z-index: 2;
}

/* =========================================================
            DESIGN / SETTINGS UI (Design tab only)
========================================================= */
.card-builder-container #phoneContent .card-page{
  --ds-primary: var(--main-light-blue);
  --ds-text: #111827;
  --ds-card: #ffffff;
  --ds-border: #e5e7eb;

  --ds-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-title-weight: 900;

  --ds-card-radius: 0px;  
  --ds-panel-radius: 0px;
  --ds-shadow-alpha: 0;  
  --ds-btn-radius: 0px;   

  --ds-bg-image: none;  
  --ds-bg-overlay: 0;      
}

/* Apply theme ONLY when enabled (JS should toggle .ds-enabled on the active template) */
.card-builder-container #phoneContent .card-page.ds-enabled{
  font-family: var(--ds-font);
  color: var(--ds-paragraph);
  background-image: var(--ds-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Overlay ONLY when enabled */
.card-builder-container #phoneContent .card-page.ds-enabled::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--ds-bg-overlay, 0));
  pointer-events:none;
  z-index: 0;
}

/* Ensure all template content stays above overlay */
.card-builder-container #phoneContent .card-page.ds-enabled > *{
  position: relative;
  z-index: 1;
}

/* Panels ONLY when enabled */
.card-builder-container #phoneContent .card-page.ds-enabled .panel{
  background: var(--ds-card);
  border-color: var(--ds-border);

  /* Default is 0px, so it won't change templates unless you move sliders */
  border-radius: var(--ds-panel-radius);

  box-shadow: 0 10px 24px rgba(0,0,0,var(--ds-shadow-alpha, 0));
}


/* White Panels (list items) — controlled from Design tab */
.card-builder-container #phoneContent .card-page.ds-enabled .list-item{
  background: var(--ds-panel-bg);
  border-color: var(--ds-border);
  color: var(--ds-panel-sub, #111827);
}
.card-builder-container #phoneContent .card-page.ds-enabled .list-item strong{
  color: var(--ds-panel-heading);
}
/* Titles/text ONLY when enabled */
.card-builder-container #phoneContent .card-page.ds-enabled .panel-title{
  color: var(--ds-heading);
  font-weight: var(--ds-title-weight);
}

.card-builder-container #phoneContent .card-page.ds-enabled .panel.white .panel-title{
  color: var(--ds-panel-heading);
}

.card-builder-container #phoneContent .card-page.ds-enabled .panel-text,
.card-builder-container #phoneContent .card-page.ds-enabled .panel p,
.card-builder-container #phoneContent .card-page.ds-enabled .desc{
  color: var(--ds-paragraph);
}

/* Buttons ONLY when enabled */
/* .card-builder-container #phoneContent .card-page.ds-enabled .pv-linkbtn,
.card-builder-container #phoneContent .card-page.ds-enabled.t4 .cta{
  background: var(--ds-primary);
  border-radius: var(--ds-btn-radius); 
} */

/* Template 1 chips stay pill always (not controlled by DS) */
.card-builder-container #phoneContent .chip{
  border-radius: 999px;
}

/* =========================================================
   DESIGN / SETTINGS — BUTTON COLOR OVERRIDES
   (Safe extension — no class or behavior changes)
========================================================= */

/* Link buttons */
.card-builder-container #phoneContent .card-page.ds-enabled .pv-linkbtn{
  background: var(--ds-linkbtn-bg);
  color: var(--ds-linkbtn-text);
}

/* Template 4 CTA */
.card-builder-container #phoneContent .card-page.ds-enabled.t4 .cta{
  background: var(--ds-cta-bg, var(--ds-primary));
  color: var(--ds-cta-text, #ffffff);
}

/* =========================================================
            DESIGN / SETTINGS UI (Design tab only)
========================================================= */
.card-builder-container #design .ds-wrap{
  display: grid;
  gap: 14px;
}

.card-builder-container #design .ds-section{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.card-builder-container #design .ds-head{
  width: 100%;
  padding: 14px 14px;
  background: #f5f7fb;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 800;
  color: #111827;
}

.card-builder-container #design .ds-icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  font-weight: 900;
}

.card-builder-container #design .ds-body{
  padding: 14px;
  display: none;
}

.card-builder-container #design .ds-section.open .ds-body{
  display: block;
}

.card-builder-container #design .ds-row{
  display: flex;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.card-builder-container #design .ds-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--main-light-blue);
  background: none;
  color: var(--main-light-blue);
  font-weight: 800;
  cursor: pointer;
}

.card-builder-container #design .ds-btn:hover{
  background: none;
  border: 1px solid var(--black);
  color: var(--black);
}

.card-builder-container #design .ds-upload{
  position: relative;
  overflow: hidden;
}

.card-builder-container #design .ds-grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

@media (max-width: 900px){
  .card-builder-container #design .ds-grid{
    grid-template-columns: repeat(6, 1fr);
  }
}

.card-builder-container #design .ds-swatch{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  background: #e5e7eb;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.card-builder-container #design .ds-swatch.active{
  border-color: var(--main-light-blue);
}

.card-builder-container #design .ds-field{
  margin-top: 12px;
}

.card-builder-container #design .ds-label{
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 6px;
}

.card-builder-container #design .ds-color-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 900px){
  .card-builder-container #design .ds-color-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-builder-container #design .ds-color input[type="color"]{
  width: 100%;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
}

/* Preview-only loader overlay */
.card-builder-container .ds-loader{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  z-index: 50;
}

.card-builder-container .ds-loader.on{
  display: flex;
}

.card-builder-container .ds-spinner{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  animation: dsSpin 0.9s linear infinite;
}

@keyframes dsSpin{
  to{ transform: rotate(360deg); }
}

/* White Panels — Sub Heading / Body color (body text inside list items) */
#phoneContent .card-page.ds-enabled .list-item{
  color: var(--ds-panel-sub, #111827);
}

/* Address lines inside the white panel (if you use .addr) */
#phoneContent .card-page.ds-enabled .addr{
  color: var(--ds-panel-sub, #111827);
}

/* Keep the label/bold text controlled by "Heading" */
#phoneContent .card-page.ds-enabled .list-item strong{
  color: var(--ds-panel-heading, #111827);
}

/* =========================================================
   COLORS (Design tab) — palette circles + target pills + hex row
========================================================= */
.card-builder-container #design .ds-color-target{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 10px;
  flex-wrap: wrap;
}

.card-builder-container #design .ds-target-label{
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.card-builder-container #design .ds-target-pills{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.card-builder-container #design .ds-pill{
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  padding: 7px 10px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.card-builder-container #design .ds-pill.active{
  border-color: var(--main-light-blue);
  color: var(--main-light-blue);
}

.card-builder-container #design .ds-palette{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin: 10px 0 14px;
}

@media (max-width: 900px){
  .card-builder-container #design .ds-palette{
    grid-template-columns: repeat(6, 1fr);
  }
}

.card-builder-container #design .ds-color-dot{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 2px solid #e5e7eb;
  background: #e5e7eb;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.card-builder-container #design .ds-color-dot::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: var(--dot, #e5e7eb);
}

/* Optional: highlight last clicked palette color */
.card-builder-container #design .ds-color-dot.is-active{
  border-color: var(--main-light-blue);
}

/* Color input + hex input row */
.card-builder-container #design .ds-color-row{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
}

.card-builder-container #design .ds-color-row input[type="color"]{
  width: 52px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
}

.card-builder-container #design .ds-hex{
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  font-weight: 700;
  color: #111827;
  outline: none;
}

.card-builder-container #design .ds-hex:focus{
  border-color: var(--main-light-blue);
  box-shadow: 0 0 0 3px rgba(0,177,255,0.18);
}

/* Make the color picker swatch match your rounded "Border" look */
.card-builder-container #design .ds-color-row{
  display: flex;
  gap: 10px;
  align-items: center;
}

.card-builder-container #design input[type="color"]{
  -webkit-appearance: none;
  appearance: none;
  width: 54px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
}

/* Chrome/Safari swatch wrapper */
.card-builder-container #design input[type="color"]::-webkit-color-swatch-wrapper{
  padding: 0;
}

/* Chrome/Safari actual swatch */
.card-builder-container #design input[type="color"]::-webkit-color-swatch{
  border: 0;
  border-radius: 12px;
}

/* Firefox swatch */
.card-builder-container #design input[type="color"]::-moz-color-swatch{
  border: 0;
  border-radius: 12px;
}

/* ================================
   FONT STYLE (Design tab only)
   ================================ */

/* Grid like reference */
.card-builder-container #design .ds-font-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 1100px){
  .card-builder-container #design .ds-font-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 900px){
  .card-builder-container #design .ds-font-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .card-builder-container #design .ds-font-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tile */
.card-builder-container #design .ds-font-tile{
  position: relative;
  width: 100%;
  text-align: center;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 10px 12px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.card-builder-container #design .ds-font-tile:hover{
  border-color: #cbd5e1;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

/* Selected indicator (circle in top-left) */
.card-builder-container #design .ds-font-tile::before{
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: #ffffff;
}

.card-builder-container #design .ds-font-tile.active{
  border-color: var(--main-light-blue);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

.card-builder-container #design .ds-font-tile.active::before{
  border-color: var(--main-light-blue);
  background: radial-gradient(circle at center, var(--main-light-blue) 0 55%, #ffffff 56% 100%);
}

/* "Aa" + name like reference */
.card-builder-container #design .ds-font-aa{
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #111827;
  margin-top: 6px;
}

.card-builder-container #design .ds-font-name{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

/* Make select + range match the design tab look */
.card-builder-container #design #themeFont{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 0 12px;
  font-weight: 600;
  color: #111827;
}

.card-builder-container #design #themeTitleWeight{
  width: 100%;
}

/* Optional: make the range accent blue (modern browsers) */
.card-builder-container #design input[type="range"]{
  accent-color: var(--main-light-blue);
}

/* ================================
   PAGE LOADER (Design tab only)
================================ */
.card-builder-container .ds-loader-row{
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-top: 12px !important;
}

/* Make both tiles the exact same box model */
.card-builder-container .ds-loader-thumb,
.card-builder-container .ds-loader-upload{
  width: 64px !important;
  height: 64px !important;
  box-sizing: border-box !important;
  flex: 0 0 64px !important;
  margin: 0 !important;
}

/* Thumbnail tile */
.card-builder-container .ds-loader-thumb{
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-builder-container .ds-loader-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Upload tile */
.card-builder-container .ds-loader-upload{
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #ffffff;
  cursor: pointer;

  /* Always stack icon + text consistently */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 4px !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* Hard override any global absolute-centering icon rules */
.card-builder-container .ds-loader-upload .upload-icon{
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: 26px !important;
  height: 26px !important;
  display: block !important;
  opacity: 0.9;
}

/* Ratio label */
.card-builder-container .ds-loader-upload .ds-loader-meta{
  margin: 6px 0 0 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #6b7280 !important;
  line-height: 1 !important;
  display: block !important;
}

/* ================================
   PREVIEW-ONLY LOADER OVERLAY
================================ */
.card-builder-container .ds-loader{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.75);
  z-index: 50;
}

.card-builder-container .ds-loader.on{
  display: flex;
}

.card-builder-container .ds-loader-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.card-builder-container .ds-loader-img{
  width: 86px;
  height: 86px;
  object-fit: contain;
}

/* Spinner fallback */
.card-builder-container .ds-spinner{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.55);
  animation: dsSpin 0.9s linear infinite;
}

@keyframes dsSpin{
  to { transform: rotate(360deg); }
}

/* ======================================================
   PUBLIC PAGE LOADER (Future) — NAMESPACED (SAFE)
====================================================== */
.bmc-page-loader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.bmc-page-loader.is-active{
  display: flex;
  opacity: 1;
}

.bmc-page-loader.is-hiding{
  opacity: 0;
}

.bmc-page-loader__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

.bmc-page-loader__logo{
  width: 110px;
  height: 110px;
  object-fit: contain;
  display: none;
}

.bmc-page-loader__logo.is-visible{
  display: block;
}

.bmc-page-loader__spinner{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 4px solid rgba(17,24,39,0.12);
  border-top-color: rgba(17,24,39,0.70);
  animation: pageLoaderSpin 0.9s linear infinite;
  display: none;
}

.bmc-page-loader__spinner.is-visible{
  display: block;
}

@keyframes pageLoaderSpin{
  to { transform: rotate(360deg); }
}

/* Lock scroll when loader is active (namespaced) */
html.bmc-loader-lock,
body.bmc-loader-lock{
  height: 100%;
  overflow: hidden !important;
}

/* =========================================================
                DESIGN TAB — FOOTER NEXT FIX
========================================================= */
.card-builder-container #design .ds-footer{
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e5e7eb !important;

  /* kill layout bugs caused by earlier styles */
  position: static !important;
  float: none !important;
  clear: both !important;
}

/* Ensure the button itself isn't being absolutely positioned or stretched strangely */
.card-builder-container #design .ds-footer .ds-next-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--main-light-blue) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.card-builder-container #design .ds-footer .ds-next-btn:hover{
  background: var(--black) !important;
}

/* ========================================================
            QR TAB + QR PREVIEW (STRICTLY SCOPED)
========================================================= */

/* tool active state */
.card-builder-container .tool-btn.is-active{
  border-color: var(--main-light-blue);
  box-shadow: 0 0 0 3px rgba(0,177,255,0.12);
}

/* preview views switcher */
.card-builder-container .preview-view{ display:none; }
.card-builder-container .preview-view.is-active{ display:block; }

/* ==========================================
                QR LEFT UI
========================================== */
.card-builder-container #qr .qr-left{
  padding: 6px 2px 0;
}

.card-builder-container #qr .qr-title{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  color: #111827;
}

.card-builder-container #qr .qr-subtitle{
  margin: 0 0 14px;
  color: #6b7280;
  font-weight: 600;
}

/* =============================================================
                   DROPDOWN SECTIONS (4 ONLY)
                   MATCH DESIGN ACCORDION LOOK
============================================================= */
.card-builder-container #qr .qr-dropdowns{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* ======================================================================
        QR DROPDOWNS (DETAILS SHELL) + SHAPES GRID (FULL UPDATE)
====================================================================== */

/* ==========================
   DETAILS SHELL
========================== */
.card-builder-container #qr details.qr-dd{
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
}

/* remove default marker */
.card-builder-container #qr details.qr-dd > summary{
  list-style: none;
}
.card-builder-container #qr details.qr-dd > summary::-webkit-details-marker{
  display: none;
}

/* summary row (Designed accordion header look) */
.card-builder-container #qr .qr-dd-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 16px 16px;
  cursor: pointer;
  user-select: none;

  font-weight: 900;
  color: #111827;

  /* keeps the same header background open AND closed */
  background: #f5f7fb;

  /* removes focus outline */
  outline: none;
}

/* keeps header background identical when open */
.card-builder-container #qr details.qr-dd[open] .qr-dd-summary{
  background: #f5f7fb;
}

/* title */
.card-builder-container #qr .qr-dd-title{
  font-size: 13px;
  letter-spacing: .2px;
}

/* icon pill (round, centered, consistent) */
.card-builder-container #qr .qr-dd-icon{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 0;
  flex: 0 0 auto;
}

/* draw the symbol only via ::before */
.card-builder-container #qr .qr-dd-icon::before{
  content: "+";
  display: inline-block;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  color: #111827;

  /* optical centering tweak */
  transform: translateY(1px);
}

/* OPEN STATE: no blue outline around entire card */
.card-builder-container #qr details.qr-dd[open]{
  border-color: #e5e7eb;
  box-shadow: none;
}

/* icon changes only */
.card-builder-container #qr details.qr-dd[open] .qr-dd-icon{
  border-color: #e5e7eb;
}

/* swap + to − without JS (and color the symbol) */
.card-builder-container #qr details.qr-dd[open] .qr-dd-icon::before{
  content: "−";
  transform: translateY(0px);
  color: var(--main-light-blue);
}

/* body */
.card-builder-container #qr .qr-dd-body{
  border-top: 1px solid #e5e7eb;
  padding: 16px 16px 18px;
  background: #ffffff;
}

/* ==========================================================
                        PANEL TITLES
========================================================== */
.card-builder-container #qr .qr-panel-title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  color: #111827;
}

/* ========================================================================
                            SHAPES: ICON TILE GRID
======================================================================== */

/* Tile grids */
.card-builder-container #qr .qr-tile-grid{
  display: grid;
  gap: 10px;
}

/* Modules: compact grid */
.card-builder-container #qr .qr-tile-grid--modules{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Eye frame / eyeball: denser grid */
.card-builder-container #qr .qr-tile-grid--eyes,
.card-builder-container #qr .qr-tile-grid--eyeballs{
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

/* Responsive */
@media (max-width: 900px){
  .card-builder-container #qr .qr-tile-grid--eyes,
  .card-builder-container #qr .qr-tile-grid--eyeballs{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (max-width: 700px){
  .card-builder-container #qr .qr-tile-grid--modules{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .card-builder-container #qr .qr-tile-grid--eyes,
  .card-builder-container #qr .qr-tile-grid--eyeballs{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .card-builder-container #qr .qr-tile-grid--modules{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-builder-container #qr .qr-tile-grid--eyes,
  .card-builder-container #qr .qr-tile-grid--eyeballs{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Individual tile */
.card-builder-container #qr .qr-tile{
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.card-builder-container #qr .qr-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* Active */
.card-builder-container #qr .qr-tile.is-active{
  border-color: var(--main-light-blue);
  box-shadow: 0 0 0 3px rgba(0,177,255,0.15);
}

/* Icon wrapper */
.card-builder-container #qr .qr-tile-icon{
  display: grid;
  place-items: center;
}

/* SVG icon style */
.card-builder-container #qr .qr-tile svg{
  display: block;
  fill: #111827;
}

/* crisp strokes */
.card-builder-container #qr .qr-tile svg rect,
.card-builder-container #qr .qr-tile svg circle,
.card-builder-container #qr .qr-tile svg path{
  vector-effect: non-scaling-stroke;
}

/* outline icons */
.card-builder-container #qr .qr-tile svg rect[fill="none"],
.card-builder-container #qr .qr-tile svg circle[fill="none"]{
  stroke: #111827;
}

/* Keyboard focus */
.card-builder-container #qr .qr-tile:focus-visible{
  outline: 3px solid rgba(0,177,255,0.35);
  outline-offset: 2px;
}

/* ============================================================
                    BACKWARD COMPATIBILITY 
============================================================ */
.card-builder-container #qr .qr-choice-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 520px){
  .card-builder-container #qr .qr-choice-row{
    grid-template-columns: 1fr;
  }
}

.card-builder-container #qr .qr-choice{
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 10px;
  font-weight: 900;
  color: #111827;
  cursor: pointer;
  text-align: center;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.card-builder-container #qr .qr-choice:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.card-builder-container #qr .qr-choice.is-active{
  border-color: var(--main-light-blue);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}


/* fields inside panels */
.card-builder-container #qr .qr-field{
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.card-builder-container #qr .qr-field label{
  display:block;
  font-weight: 800;
  font-size: 13px;
  color: #111827;
  margin-bottom: 0;
}

.card-builder-container #qr .qr-field input[type="color"]{
  width: 64px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

.card-builder-container #qr .qr-field input[type="file"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

.card-builder-container #qr .qr-hint{
  display:block;
  margin-top: 6px;
  color: #6b7280;
  font-weight: 600;
  font-size: 12px;
}

/* Remove logo button */
.card-builder-container #qr .qr-clear-logo-btn{
  margin-top: 10px;
  width: fit-content;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.card-builder-container #qr .qr-clear-logo-btn:hover{
  border-color: var(--main-light-blue);
}

/* Controls section */
.card-builder-container #qr .qr-shape-controls{
  border-top: 1px solid #e5e7eb;
  margin-top: 14px;
  padding-top: 14px;
  display: grid;
  gap: 14px;
}

/* Range block: label left, reset right */
.card-builder-container #qr .qr-shape-control{
  display: grid;
  gap: 8px;
}

.card-builder-container #qr .qr-shape-control-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-builder-container #qr .qr-shape-control label{
  font-weight: 900;
  color: #111827;
}

.card-builder-container #qr .qr-shape-reset{
  border: 0;
  background: transparent;
  color: var(--main-light-blue);
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.card-builder-container #qr .qr-shape-control input[type="range"]{
  width: 100%;
}

/* ===============================================================
                    QR PREVIEW (RIGHT SIDE)
=============================================================== */
.card-builder-container .preview-qr-view{
  padding: 18px 14px 22px;
}

.card-builder-container .qr-stage{
  width: 260px;      
  margin: 0 auto;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.card-builder-container .qr-canvas #qrLogoOverlay{
  position: absolute;
  width: 66px;
  height: 66px;
  border-radius: 0;
  object-fit: contain;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  display: none;
}

/* ===============================
   QR DOWNLOAD BUTTONS — PILL (COMPACT)
=============================== */

.card-builder-container .qr-download-row{
  width: 100%;
  display: flex;                 /* ⬅ switch to flex for compact buttons */
  justify-content: center;
  gap: 12px;
}

/* Base pill button */
.card-builder-container .qr-download-btn{
  padding: 10px 18px;
  min-width: 120px;              /* ⬅ controlled width */
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;

  cursor: pointer;
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;

  /* ✅ IDENTICAL shadow for ALL buttons */
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}

/* Icon */
.card-builder-container .qr-download-btn i{
  font-size: 14px;
  line-height: 1;
}

/* PRIMARY — PNG */
.card-builder-container .qr-download-btn:not(.is-secondary){
  background: var(--main-light-blue);
  color: #ffffff;
  border-color: transparent;
}

/* SECONDARY — SVG */
.card-builder-container .qr-download-btn.is-secondary{
  background: #ffffff;
  color: #111827;
}

/* Hover — SAME elevation */
.card-builder-container .qr-download-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.14);
}

/* Active */
.card-builder-container .qr-download-btn:active{
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

/* Mobile stack */
@media (max-width: 520px){
  .card-builder-container .qr-download-row{
    flex-direction: column;
    align-items: center;
  }

  .card-builder-container .qr-download-btn{
    width: 100%;
    max-width: 240px;
  }
}


/* ==============================================================
                    COLORS DROPDOWN (ONLY)
============================================================== */
.card-builder-container #qr .qr-colors{
  display: grid;
  gap: 14px;
}

/* One color group block */
.card-builder-container #qr .qr-color-block{
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

/* Label row + current color indicator */
.card-builder-container #qr .qr-color-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* (Your HTML uses <label> above, but keep this safe anyway) */
.card-builder-container #qr .qr-color-row label{
  font-weight: 900;
  font-size: 13px;
  color: #111827;
  margin: 0;
}

/* Current selected color chip (button in HTML) */
.card-builder-container #qr .qr-color-current{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
}

/* The small swatch box inside the "current" button */
.card-builder-container #qr .qr-color-current .qr-color-swatch{
  width: 38px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #111827;
  box-shadow: none;
  flex: 0 0 auto;
}

/* Hex value text */
.card-builder-container #qr .qr-color-current .qr-color-value{
  font-weight: 800;
  font-size: 12px;
  color: #111827;
  letter-spacing: .2px;
}

/* Swatch palette grid */
.card-builder-container #qr .qr-swatch-grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 700px){
  .card-builder-container #qr .qr-swatch-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .card-builder-container #qr .qr-swatch-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ==================================================================
                            SWATCH BUTTON
================================================================== */
.card-builder-container #qr .qr-swatch{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;

  /* protective */
  position: relative;
  overflow: hidden;
}

/* HARD KILL global button pseudo overlays */
.card-builder-container #qr .qr-swatch::before,
.card-builder-container #qr .qr-swatch::after{
  content: none !important;
  display: none !important;
}

/* The colored dot */
.card-builder-container #qr .qr-swatch > span{
  width: 72%;
  height: 72%;
  border-radius: 999px;
  display: block;
  background: #111827;   
  background-image: none;
  box-shadow: none;
  filter: none;
}

/* Hover */
.card-builder-container #qr .qr-swatch:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* Active selected swatch highlight */
.card-builder-container #qr .qr-swatch.is-active{
  border-color: var(--main-light-blue);
  box-shadow: 0 0 0 3px rgba(0,177,255,0.15);
}

/* Keyboard focus */
.card-builder-container #qr .qr-swatch:focus-visible{
  outline: 3px solid rgba(0,177,255,0.35);
  outline-offset: 2px;
}

/* ==================================================
                LOGO DROPDOWN (ONLY)
================================================== */

/* grid */
.card-builder-container #qr .qr-logo-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 700px){
  .card-builder-container #qr .qr-logo-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .card-builder-container #qr .qr-logo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* tile */
.card-builder-container #qr .qr-logo-tile{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  overflow: hidden;
}

.card-builder-container #qr .qr-logo-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* active highlight */
.card-builder-container #qr .qr-logo-tile.is-active{
  border-color: var(--main-light-blue);
  box-shadow: 0 0 0 3px rgba(0,177,255,0.15);
}

/* the <img> inside each tile */
.card-builder-container #qr .qr-logo-tile img{
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}

/* none tile */
.card-builder-container #qr .qr-logo-none{
  font-weight: 900;
  font-size: 12px;
  color: #111827;
  letter-spacing: .2px;
}

/* upload area wrapper */
.card-builder-container #qr .qr-logo-upload{
  display: grid;
  gap: 10px;
}

/* upload tile */
.card-builder-container #qr .qr-upload-tile{
  border: 1px dashed #d1d5db;
  background: #f9fafb;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.card-builder-container #qr .qr-upload-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  border-color: #cbd5e1;
}

/* your actual upload icon image */
.card-builder-container #qr .qr-upload-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 8px;
  object-fit: contain;
  display: block;
}

/* upload text */
.card-builder-container #qr .qr-upload-text strong{
  display: block;
  font-weight: 900;
  color: #111827;
  font-size: 13px;
}

.card-builder-container #qr .qr-upload-text small{
  display: block;
  margin-top: 2px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
}

/* scaling block */
.card-builder-container #qr .qr-logo-scale{
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}

.card-builder-container #qr .qr-scale-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.card-builder-container #qr .qr-scale-title{
  font-weight: 900;
  font-size: 13px;
  color: #111827;
}

.card-builder-container #qr .qr-scale-reset{
  border: none;
  background: transparent;
  color: var(--main-light-blue);
  font-weight: 900;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}

.card-builder-container #qr .qr-scale-reset:hover{
  background: rgba(0,177,255,0.10);
}

/* remove logo button */
.card-builder-container #qr .qr-clear-logo-btn{
  margin-top: 14px;
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 10px;
  font-weight: 900;
  color: #111827;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.card-builder-container #qr .qr-clear-logo-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* ===============================
   SOCIAL ICON ROW (ALL TEMPLATES)
================================ */

.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

/* Anchor reset (IMPORTANT) */
.social-icons a,
.social-icons a:visited,
.social-icons a:hover,
.social-icons a:active {
  text-decoration: none;
}

/* Icon button */
.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #111827;
  font-size: 18px;
  line-height: 1;

  transition: background 0.2s ease,
              color 0.2s ease,
              transform 0.2s ease;
}

/* Hover */
.social-icon:hover {
  background: #111827;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Hide empty / inactive links */
.social-icon:empty,
.social-icon[href=""],
.social-icon[href="#"] {
  display: none;
}

/* =========================================================
   DESIGN SETTINGS — FONT APPLY (BUILDER + LIVE)
   The variable is already being set as --ds-font, but it was
   NOT being used anywhere. This makes the saved font apply.
========================================================= */

/* Load the font families used in the Font Style UI (safe to include once) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Poppins:wght@400;600;700;900&family=Roboto:wght@400;500;700;900&family=Playfair+Display:wght@400;600;700;900&display=swap");

/* BUILDER preview scope */
.card-builder-container #phoneContent .card-page.ds-enabled{
  font-family: var(--ds-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* LIVE card scope (card.php) */
#phoneContent .card-page.ds-enabled,
.card-page.ds-enabled{
  font-family: var(--ds-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* =========================================================
   BUILDER PREVIEW — HIDE ACTION BAR (ONLY IN BUILDER)
========================================================= */
.card-builder-container #phoneContent .dbc-actions-wrap{
  display: none !important;
}

/* =========================================================
   LIVE CARD — FORCE ACTION BAR ON (OVERRIDES BUILDER RULES)
========================================================= */
.dbc-live #phoneContent .dbc-actions-wrap{
  display: flex !important;
}

/* ===============================================================
                        FOOTER SECTION
 =============================================================  */
.footer {
  background: var(--main-pink);
  color: var(--white);
  padding: 80px 40px;
  font-family: "Poppins", sans-serif;
}

.footer-container {
  max-width: 1250px;
  margin: 0 auto;
}

/* ==================================================
                TOP AREA: Brand + Links
================================================== */
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 60px;
}

/* Brand block */
.footer-brand {
  display: grid;
  gap: 18px;
}

/* IMPORTANT */
.footer-brand-row,
.footer-brand-name,
.footer-cta {
  display: none !important;
}

/* LOGO: NORMAL */
.footer-logo {
  width: 250px;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

/* KEEP TAGLINE */
.footer-tagline {
  margin: 0;
  font-size: 18px;
  opacity: 0.92;
  max-width: 420px;
}

/* Socials (round buttons */
.footer-socials {
  display: flex;
  gap: 14px;
  align-items: center;
}

.footer-social {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--white);
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.footer-social i {
  font-size: 18px;
}

.footer-social:hover {
  background: var(--white);
  color: var(--black);
  transform: scale(1.06);
}

/* ============================================
            NEW: Right-side wrapper
============================================ */
.footer-right{
  display: grid;
  gap: 40px;
}

/* Links wrapper (3 columns) */
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 40px;
}

/* Column headings + links */
.footer-col h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  color: var(--white);
  text-decoration: none;
  font-size: 18px;
  margin: 10px 0;
  opacity: 0.95;
  position: relative;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: var(--black);
  transition: width 0.25s ease;
}

.footer-col a:hover {
  color: var(--black);
  opacity: 1;
}

.footer-col a:hover::after {
  width: 100%;
}

/* ======================================================================
                    MIDDLE (match footer-links columns)
====================================================================== */
.footer-middle {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)); /* CHANGED */
  gap: 40px;
  margin: 0; /* CHANGED: avoid pushing it away */
  align-items: start;
}

.footer-middle h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}

/* NEW: hide filler column visually */
.footer-middle-empty{
  visibility: hidden;
}

/* MIDDLE INFO TEXT */
.footer-info {
  margin-top: 12px;
  font-size: 18px;
  opacity: 0.92;
  line-height: 1.1;
}

/* ICON + TEXT ROW */
.footer-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* SVG ICONS */
.footer-info-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* Make "Get In Touch" links look like your footer text */
.footer-info-row a{
  color: var(--white);
  text-decoration: none;
  opacity: 0.92;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.footer-info-row a:hover{
  color: var(--black);
  opacity: 1;
  text-decoration: underline;
}

/* WHITE LINE */
.footer-line {
  border: none;
  border-top: 2px solid var(--white);
  margin: 40px 0 26px 0;
}

/* ==============================
            BOTTOM AREA
============================== */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 16px;
  opacity: 0.92;
  margin: 0;
}

.footer-bottom a {
  color: var(--close-white);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
}

.footer-bottom a:hover {
  color: var(--black);
}

/* FOOTER ICONS (bottom-right) */
.footer-icons {
  display: flex;
  gap: 18px;
  align-items: center;
}

/* BOTTOM BAR TEXT LINKS  */
.footer-bottom-link{
  color: var(--white);
  text-decoration: none;
  font-size: 16px;
  font-weight: 200;
  opacity: 0.92;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-bottom-link:hover{
  color: var(--black);
  opacity: 1;
}

.footer-icons .social-icon {
  color: var(--white);
  font-size: 26px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer-icons .social-icon:hover {
  color: var(--black);
  transform: scale(1.12);
}

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

/* Tablet (1024px and down) */
@media (max-width: 1024px) {
  .footer {
    padding: 70px 30px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 34px;
  }

  .footer-middle{
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 34px;
  }

  .footer-middle-empty{
    display: none;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
  }
  
  .footer-col h3 {
    font-size: 20px;
  }
  
  .footer-bottom p {
    font-size: 15px;
  }
}

/* Large Mobile (768px and down) */
@media (max-width: 768px) {
  .footer {
    padding: 60px 25px;
  }

  .footer-tagline {
    font-size: 16px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer-middle{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer-middle-empty{
    display: none;
  }

  .footer-middle h3{
    font-size: 20px;   
    margin-bottom: 14px; 
  }

  .footer-info{
    font-size: 15px;   
    line-height: 1.4;   
    margin-top: 10px;  
  }

  .footer-info-row{
    gap: 10px;
  }

  .footer-info-icon{
    width: 16px;
    height: 16px;
  }

  .footer-col h3 {
    font-size: 20px;
  }

  .footer-col a {
    font-size: 15px;
  }

  .footer-icons .social-icon {
    font-size: 24px;
  }
} 

/* Small Mobile */
@media (max-width: 480px) {
  .footer {
    padding: 50px 20px;
  }

  .footer-logo {
    width: 240px;
    height: auto;
  }

  .footer-icons {
    gap: 14px;
  }

  .footer-bottom p {
    font-size: 12px;
  }
}