* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', sans-serif;
  }

  /* ===== BREADCRUMB ===== */
  .breadcrumb {

      font-size: 12px;
      border: 1px solid #01328E;
      margin-left: 405px;
      text-align: left;
      padding: 6px 16px;
      margin-top: 20px;
      width: fit-content;
      border-radius: 50px;
  }


  @media (max-width: 1422px) {

      .breadcrumb {
          font-size: 12px;
          border: 1px solid #01328E;
          margin-left: 161px;
          text-align: left;
          padding: 6px 16px;
          margin-top: 20px;
          width: fit-content;
          border-radius: 50px;
      }

  }

  @media (max-width: 1673px) {

      .breadcrumb {
          font-size: 12px;
          border: 1px solid #01328E;
          margin-left: 283px;
          text-align: left;
          padding: 6px 16px;
          margin-top: 20px;
          width: fit-content;
          border-radius: 50px;
      }

  }

  .breadcrumb a {
      color: #01328E;
      text-decoration: none;
      transition: color 0.2s;
  }

  .breadcrumb a:hover {
      color: var(--navy);
  }

  .breadcrumb span {
      margin: 0 6px;
  }

  /* ===== HERO SECTION ===== */
  .hero {
      padding: 32px 48px 0;
      text-align: center;
      /* Centered intentionally */
  }

  .hero h1 {
      font-size: 40px;
      font-weight: 500;

      color: #01328E;
      margin-bottom: 12px;
      /* font-family: 'DM Serif Display', serif; */
      text-align: left;
      margin-left: 360px;
  }

  .hero p {
      color: #01328E;
      font-size: 14px;
      max-width: 650px;
      margin: 0 auto 24px auto;
      line-height: 1.6;
      margin-left: 360px;
      text-align: left;
  }

  @media (max-width: 1673px) {

      .hero h1 {
          font-size: 40px;
          font-weight: 500;

          color: #01328E;
          margin-bottom: 12px;
          /* font-family: 'DM Serif Display', serif; */
          text-align: left;
          margin-left: 235px;
      }

      .hero p {
          color: #01328E;
          font-size: 14px;
          max-width: 650px;
          margin: 0 auto 24px auto;
          line-height: 1.6;
          margin-left: 235px;
          text-align: left;
      }

  }

  @media (max-width: 1422px) {

      .hero h1 {
          font-size: 40px;
          font-weight: 500;

          color: #01328E;
          margin-bottom: 12px;
          /* font-family: 'DM Serif Display', serif; */
          text-align: left;
          margin-left: 115px;
      }

      .hero p {
          color: #01328E;
          font-size: 14px;
          max-width: 650px;
          margin: 0 auto 24px auto;
          line-height: 1.6;
          margin-left: 115px;
          text-align: left;
      }

  }

  @media (max-width: 1400px) {

      .hero h1 {
          font-size: 40px;
          font-weight: 700;
          color: #01328E;
          margin-bottom: 12px;
          /* font-family: 'DM Serif Display', serif; */
          text-align: left;
          margin-left: 113px;
      }

      .hero p {
          color: #01328E;
          font-size: 14px;
          max-width: 650px;
          margin: 0 auto 24px auto;
          line-height: 1.6;
          margin-left: 113px;
          text-align: left;
      }

      .breadcrumb {
          /* padding: 24px 48px 0; */
          font-size: 12px;
          /* color: var(--muted); */
          font-weight: 600;
          border: 1px solid #01328E;
          margin-left: 160px;
          text-align: left;
          padding: 6px 11px;
          margin-top: 20px;
          width: fit-content;
          border-radius: 50px;
      }
  }


  .btn-store {
      text-decoration: none;
      display: inline-block;
  }

  .btn-store img {
      display: block;
  }

  /* BASE STYLES */
  .image-section {
      width: 100%;
      padding: 0px 20px 0;
      background: #fff;
  }

  .image-container {
      max-width: 1100px;
      margin: auto;
      height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin-top: -40px;
  }

  .image-container img {
      width: 100%;
      max-width: 1156px;
      height: auto;
      border-radius: 10px;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
      /* optional hover zoom */
  }

  /* Tags Row */
  .tags-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1100px;
      margin: 0 auto 32px auto;
      border-bottom: 1px solid var(--border);
      padding-bottom: 24px;
  }

  .tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
  }

  .tag {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #F6F5F2;
      color: #01328E;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 700;
  }


  .tag-count {
      background: #01328E;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
  }

  .btn-view-store {
      background: #01328E;
      color: white;
      border: none;
      border-radius: 50px;
      text-decoration: none;
      padding: 11px 37px;
      font-size: 12px;
      /* font-weight: 700; */
      cursor: pointer;
      /* font-family: 'DM Sans', sans-serif; */
      display: inline-flex;
      align-items: center;
      margin-left: 198px;
      gap: 8px;
      transition: var(--transition);
  }

  .btn-store {
      background: #01328E;
      color: white;
      border: none;
      padding: 14px 14px;
      /* width: 56px; */
      border-radius: 50px;
      /* font-size: 32px; */
      /* font-weight: 700; */
      cursor: pointer;
      /* font-family: 'DM Sans', sans-serif; */
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition);
  }

  .btn-store img {
      width: 10px;
      height: 10px;
  }

  .btn-view-store:hover {
      background: #08A1DD;
      transform: translateY(-1px);
  }

  .btn-store:hover {
      background: #08A1DD;
      transform: translateY(-1px);
  }

  /* Initial State */
  .hero h1,
  .hero p,
  .tags {
      opacity: 0;
      transform: translateX(-60px);
      animation: slideFromLeft 0.9s ease forwards;
  }

  .hero p {
      animation-delay: 0.2s;
  }

  .tags {
      animation-delay: 0.4s;
  }

  .btn-view-store,
  .btn-store {
      opacity: 0;
      transform: translateX(60px);
      animation: slideFromRight 0.9s ease forwards;
  }

  .btn-view-store {
      animation-delay: 0.6s;
  }

  .btn-store {
      animation-delay: 0.8s;
  }

  /* Animations */
  @keyframes slideFromLeft {
      from {
          opacity: 0;
          transform: translateX(-60px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes slideFromRight {
      from {
          opacity: 0;
          transform: translateX(60px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  .btn-store img {
      width: 10px;
      height: 10px;
      filter: brightness(0) invert(1);
  }

  .btn-store:hover img {
      filter: brightness(0) invert(1);
  }

  .tag-count img {
      width: 10px;
      height: 10px;
      filter: brightness(0) invert(1);
  }

  /* Hero Image Banner */
  .hero-img-placeholder {
      width: 100%;
      height: 380px;
      border-radius: 24px;
      background: linear-gradient(160deg, #2d5a9e 0%, #1a3060 50%, #0d1b4b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
      border: 1px solid var(--border);
  }

  .hero-img-placeholder::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url("../proflioimg/ChatGPT-Image-Jun-12,-2026,-08_37_06-PM.jpg") center/cover no-repeat;
      opacity: 0.95;
  }

  .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: 1100px;
      margin: 70px auto;
      background: #fff;
  }

  .stat-item {
      padding: 20px 32px;
      border-right: 1px solid #d9d9d9;
  }

  .stat-item:last-child {
      border-right: none;
  }

  .stat-value {
      display: inline-block;
      padding: 8px 12px;
      background: #f3f4f6;
      border-radius: 8px;
      color: #2b6cb0;
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 8px;
  }

  .stat-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #01328E;
      font-weight: 600;
  }

  @media (max-width: 768px) {
      .stats-row {
          grid-template-columns: repeat(2, 1fr);
      }

      .stat-item:nth-child(odd) {
          border-right: 1px solid #d9d9d9;
      }

      .stat-item:nth-child(-n+2) {
          border-bottom: 1px solid #d9d9d9;
      }
  }

  /* Stats Section Animation */
  .stat-item {
      padding: 20px 32px;
      border-right: 1px solid #d9d9d9;

      opacity: 0;
      transform: translateY(40px);
      animation: statFadeUp 0.8s ease forwards;
  }

  /* Stagger Effect */
  .stat-item:nth-child(1) {
      animation-delay: 0.2s;
  }

  .stat-item:nth-child(2) {
      animation-delay: 0.4s;
  }

  .stat-item:nth-child(3) {
      animation-delay: 0.6s;
  }

  .stat-item:nth-child(4) {
      animation-delay: 0.8s;
  }

  @keyframes statFadeUp {
      from {
          opacity: 0;
          transform: translateY(40px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* ===== SECTION SYSTEM BADGES ===== */
  .section-badge {
      display: inline-block;
      font-size: 9.5px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid #01328E;
      text-align: left;
  }

  main {
      max-width: 1200px;
      margin: 80px auto;
      padding: 0 20px;
      display: grid;
      gap: 50px;
      align-items: center;
  }

  @media (min-width:1024px) {
      main {
          grid-template-columns: 5fr 7fr;
      }
  }

  /* LEFT SIDE */

  .section-badge {
      display: inline-block;
      padding: 6px 14px;
      border: 1px solid #01328E;
      border-radius: 30px;
      font-size: 11px;
      font-weight: 700;
      color: #01328E;
      margin-bottom: 15px;
  }

  .what-left h2 {
      font-size: 42px;
      color: #01328E;
      margin-bottom: 15px;
  }

  .what-left p {
      color: #01328E;
      line-height: 1.8;
      margin-bottom: 20px;
  }

  .check-list {
      list-style: none;
  }

  .check-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 15px;
      color: #01328E;
      line-height: 1.6;
      font-size: 15px;
  }

  .check-list img {
      width: 15px;
      height: 15px;
      margin-top: 4px;
  }

  .btn-row {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      margin-top: 30px;
  }

  .btn-primary,
  .btn-outline {
      text-decoration: none;
      padding: 11px 37px;
      border-radius: 30px;
      font-size: 13px;
      font-weight: 400;
      transition: .3s;
  }

  .btn-primary {
      background: #01328E;
      color: #fff;
  }

  .btn-primary:hover {
      background: #08A1DD;
  }

  .btn-outline {
      color: white;
      background-color: #01328E;
  }

  .btn-outline:hover {
      background: #08A1DD;
      color: #fff;
  }

  /* COLLAGE */

  .collage-section {
      display: flex;
      justify-content: center;
  }

  .collage-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      height: 520px;
  }

  .collage-card {
      position: absolute;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
      transition: .4s;
  }

  .collage-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .collage-container:hover .collage-card {
      opacity: .5;
  }

  .collage-card:hover {
      opacity: 1 !important;
      transform: scale(1.05) !important;
      z-index: 99 !important;
  }

  /* CARD 1 */

  .card-1 {
      width: 230px;
      height: 290px;
      left: 0;
      top: 20px;
      z-index: 10;
      transform: rotate(-4deg);
  }

  .card-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding: 20px;
      color: white;
      background: linear-gradient(transparent, rgba(0, 0, 0, .6));
  }

  .brand-name {
      font-size: 22px;
      letter-spacing: 4px;
  }

  .brand-sub {
      font-size: 11px;
  }

  /* CARD 2 */

  .card-2 {
      width: 210px;
      height: 280px;
      right: 0;
      top: 50px;
      z-index: 20;
      transform: rotate(3deg);
  }

  .new-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255, 255, 255, .9);
      padding: 5px 12px;
      border-radius: 30px;
      font-size: 11px;
  }

  /* CARD 3 */

  .card-3 {
      width: 220px;
      height: 280px;
      left: 70px;
      bottom: 0;
      z-index: 15;
      transform: rotate(-2deg);
  }

  /* CARD 4 */

  .card-4 {
      width: 280px;
      height: 360px;
      left: 180px;
      top: 80px;
      padding: 10px;
      z-index: 30;
      transform: rotate(1deg);
  }

  .card-4-inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 8px;
  }

  .card-4-inner img {
      transition: .5s;
  }

  .card-4:hover img {
      transform: scale(1.1);
  }

  /* MOBILE */

  @media (max-width:768px) {

      .what-left h2 {
          font-size: 32px;
      }

      .collage-container {
          height: 400px;
      }

      .card-1 {
          width: 150px;
          height: 200px;
      }

      .card-2 {
          width: 140px;
          height: 180px;
      }

      .card-3 {
          width: 150px;
          height: 190px;
          left: 20px;
      }

      .card-4 {
          width: 190px;
          height: 260px;
          left: 100px;
          top: 60px;
      }
  }

  .what-left {
      margin-left: -25px;
  }


  /* ===== EBAY STORE GRAPHICAL CARD ===== */
  .products-section {
      max-width: 1100px;
      margin: 80px auto;
      padding: 0 20px;
  }

  .products-header {
      text-align: center;
      margin-bottom: 40px;
  }

  .section-badge {
      display: inline-block;
      padding: 6px 16px;
      border: 1px solid #b7c5ff;
      border-radius: 999px;
      font-size: 10px;
      color: #01328E;
      margin-bottom: 18px;
      text-transform: uppercase;
  }

  .products-header h2 {
      font-size: 46px;
      font-weight: 700;
      color: #17338f;
      margin-bottom: 15px;
  }

  .products-header p {
      max-width: 650px;
      margin: 0 auto;
      color: #555;
      line-height: 1.6;
      font-size: 15px;
  }

  .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
  }

  .product-card {
      background: #fff;
      border: 1px solid #cfd8f6;
      border-radius: 12px;
      padding: 18px;
      transition: 0.3s;
  }

  .product-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
  }

  .product-card.active {
      background: #eaf6ff;
      border-color: #9fc5ff;
  }

  .product-tag {
      display: inline-block;
      padding: 4px 10px;
      border: 1px solid #9fb7ff;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 700;
      color: #17338f;
      margin-bottom: 14px;
      text-transform: uppercase;
  }

  .product-name {
      font-size: 15px;
      line-height: 1.5;
      color: #17338f;
      font-weight: 600;
      margin-bottom: 18px;
  }

  .product-bottom {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
  }

  .product-price {
      font-size: 32px;
      font-weight: 700;
      color: #2f8cff;
  }

  .product-delivery {
      font-size: 13px;
      color: #444;
  }

  @media (max-width: 991px) {
      .products-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .products-header h2 {
          font-size: 36px;
      }
  }

  @media (max-width: 768px) {
      .products-grid {
          grid-template-columns: 1fr;
      }

      .products-header h2 {
          font-size: 30px;
      }

      .product-price {
          font-size: 28px;
      }
  }

  /* ===== RESULTS SECTION ===== */

  .stats-section {
      padding: 60px 20px;
      background: white;
  }

  .stats-container {
      max-width: 1100px;
      margin: auto;
      background: #01328E;
      border-radius: 12px;
      padding: 35px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
  }

  .stat-box {
      flex: 1;
      min-width: 180px;
      text-align: center;
      color: #fff;
  }

  .stat-box .icon {
      font-size: 20px;
      text-align: left;
  }

  .stat-box h2 {
      font-size: 38px;
      font-weight: 700;
      margin-bottom: 8px;
  }

  .stat-box p {
      font-size: 16px;
      line-height: 1.4;
      color: #e5e5e5;
      text-align: center;
  }

  /* .divider {
      width: 1px;
      height: 121px;
      background: white;
      margin-left: 49px;
  } */

  /* Smooth number effect */
  .counter {
      transition: 0.3s ease;
  }

  @media (max-width: 768px) {
      .stats-container {
          flex-direction: column;
          gap: 30px;
      }

      .divider {
          width: 100%;
          height: 1px;
      }
  }

  /* ===== TESTIMONIALS SECTION ===== */
  .testimonial-section {
      padding: 22px 20px;
      background: #fff;
  }

  .testimonial-container {
      max-width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 70px;
      align-items: center;
  }

  /* LEFT */
  .testimonial-tag {
      display: inline-block;
      padding: 8px 18px;
      border: 1px solid #01328E;
      border-radius: 30px;
      font-size: 11px;
      font-weight: 600;
      color: #01328E;
      margin-bottom: 28px;
  }

  .testimonial-left h2 {
      font-size: 54px;

      line-height: 1.15;
      color: #01328E;
      margin-bottom: 60px;
      font-weight: 400;
  }

  /* BUTTON + REVIEW */
  .testimonial-bottom {
      display: flex;
      align-items: center;
      gap: 30px;
      flex-wrap: wrap;
  }

  .testimonial-btn {
      background: #01328E;
      color: white;
      text-decoration: none;
      padding: 11px 37px;
      border-radius: 40px;
      font-size: 14px;
      font-weight: 400;
      transition: 0.3s;
  }

  .testimonial-btn:hover {
      background: #08A1DD;
  }

  .google-review {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .google-review img {
      width: 40px;
      height: 40px;
  }

  .google-review h4 {
      font-size: 18px;
      color: #01328E;
      margin-bottom: 3px;
      font-weight: 700;
  }

  .google-review p {
      font-size: 10px;
      letter-spacing: 0.7px;
      color: #666;
      font-weight: 600;
  }

  /* ===== CARD ===== */
  .testimonial-card {
      background: #f7f7f7;
      border-radius: 24px;
      padding: 42px;
      position: relative;
  }

  /* QUOTE */
  .quote-icon {
      font-size: 54px;
      color: #28A8FF;
      line-height: 1;
      margin-bottom: 16px;
  }

  /* TEXT */
  .testimonial-text {
      font-size: 24px;
      line-height: 1.8;
      color: #444;
      max-width: 620px;
      margin-bottom: 60px;
  }

  /* FOOTER */
  .testimonial-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
  }

  /* USER */
  .testimonial-user {
      display: flex;
      align-items: center;
      gap: 14px;
  }

  .user-img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #333;
  }

  .testimonial-user h4 {
      font-size: 15px;
      color: #01328E;
      margin-bottom: 4px;
      font-weight: 700;
  }

  .testimonial-user span {
      font-size: 10px;
      letter-spacing: 0.6px;
      color: #777;
      font-weight: 600;
  }

  /* ARROWS */
  .testimonial-arrows {
      display: flex;
      gap: 12px;
  }

  .testimonial-arrows button {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: none;
      background: white;
      cursor: pointer;
      transition: 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* button hover */
  .testimonial-arrows button:hover {
      background: #01328E;
  }

  /* img color change on hover */
  .testimonial-arrows button:hover img {
      filter: brightness(0) invert(1);
  }


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

      .testimonial-container {
          grid-template-columns: 1fr;
      }

      .testimonial-left h2 {
          font-size: 42px;
      }

      .testimonial-text {
          font-size: 20px;
      }
  }

  @media (max-width: 576px) {

      .testimonial-section {
          padding: 70px 20px;
      }

      .testimonial-left h2 {
          font-size: 34px;
      }

      .testimonial-card {
          padding: 30px 24px;
      }

      .testimonial-text {
          font-size: 17px;
          line-height: 1.7;
      }
  }


  .sl-demo-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #090d16;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 20px;
  }

  .sl-headline-box {
      text-align: center;
      margin-bottom: 24px;
      z-index: 1;
  }

  .sl-headline-box h1 {
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -1px;
      background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 8px;
  }

  .sl-headline-box p {
      color: #64748b;
      font-size: 16px;
      font-weight: 500;
  }

  /* Demo launch button */
  .sl-trigger-action {
      padding: 18px 36px;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
      border: none;
      border-radius: 16px;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10;
  }

  .sl-trigger-action:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 35px rgba(37, 99, 235, 0.5);
  }

  /* --- UNIQUE PRESET POPUP DESIGN (ALL CLASS NAMES HAVE BEEN CHANGED) --- */

  /* Overlay background mask */
  #slPopupOverlayMask {
      position: fixed;
      inset: 0;
      background: rgba(8, 11, 20, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 99999;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #slPopupOverlayMask.sl-mask-visible {
      opacity: 1;
      pointer-events: auto;
  }

  /* Main container wrap with background and dark gradient overlay */
  .sl-modal-board {
      width: 980px;
      max-width: 100%;
      background: #01328E;
      /* Unified royal brand solid backup */
      background-size: cover;
      background-position: center;
      border-radius: 36px;
      overflow: hidden;
      box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
      display: flex;
      transform: translateY(40px) scale(0.95);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      padding: 40px;
      gap: 40px;
      align-items: stretch;
      /* FIXED: Prevents vertical offset layout clipping */
  }

  /* Canvas Grid fallback design layer to ensure clean background visual */
  .sl-modal-grid-decor {
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 24px 24px;
      z-index: 1;
      opacity: 0.7;
  }

  #slPopupOverlayMask.sl-mask-visible .sl-modal-board {
      transform: translateY(0) scale(1);
  }

  /* Close (X) button */
  #slCloseAction {
      position: absolute;
      right: 24px;
      top: 24px;
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: #ffffff;
      transition: all 0.25s ease;
      border: 1px solid rgba(255, 255, 255, 0.25);
      z-index: 20;
  }

  #slCloseAction:hover {
      background: #08A1DD;
      color: white;
      border-color: #01328E;
      transform: rotate(90deg);
  }

  /* Left side: branding pane */
  .sl-sidebar-pane {
      flex: 1;
      display: flex;
      margin-bottom: 72px;
      flex-direction: column;
      justify-content: space-between;
      min-height: 380px;
      position: relative;
      z-index: 2;
      padding: 20px;
      min-width: 0;
      /* FIXED: Allows column to shrink on tablet screens without pushing card */
  }

  /* Top Logo branding block */
  .sl-sidebar-logo-block {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .sl-sidebar-logo-icon-holder {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .sl-sidebar-logo-icon-holder svg {
      width: 22px;
      height: 22px;
      color: #1d4ed8;
  }

  .sl-sidebar-logo-block span {
      font-weight: 800;
      font-size: 16px;
      letter-spacing: 1px;
      color: #ffffff;
  }

  /* Left side: Middle Typography content */
  .sl-sidebar-body-text {
      margin: 40px 0;
  }

  .sl-sidebar-body-text h2 {
      font-size: 44px;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.2;
      margin-bottom: 12px;
      letter-spacing: -1.5px;
      text-shadow: 0 2px 12px rgba(15, 23, 42, 0.5);
  }

  .sl-sidebar-body-text p {
      font-size: 18px;
      color: #e0f2fe;
      font-weight: 500;
      text-shadow: 0 1px 8px rgba(15, 23, 42, 0.4);
  }

  /* Left side bottom help email anchor */
  .sl-sidebar-footer-link a {
      color: #ffffff;
      margin-top: 20px;
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0.95;
      transition: opacity 0.2s;
      text-shadow: 0 1px 5px rgba(15, 23, 42, 0.3);
  }

  .sl-sidebar-footer-link a:hover {
      opacity: 1;
      text-decoration: underline;
  }

  /* Right side: Modern bright form card */
  .sl-form-white-shield {
      flex: 1.2;
      background: #F6F5F2;
      ;
      border-radius: 28px;
      padding: 40px;
      /* Adjusted slightly to preserve inner breathing space on all viewports */
      z-index: 2;
      color: #0f172a;
      min-width: 0;
      /* FIXED: Keeps flex structure contained inside the desktop card width */
  }

  .sl-form-shield-title {
      margin-bottom: 24px;
  }

  .sl-form-shield-title h3 {
      font-size: 24px;
      font-weight: 800;
      color: #1e3a8a;
      letter-spacing: -0.5px;
  }

  /* Structured form rows */
  .sl-form-grid-row {
      display: flex;
      gap: 16px;
      margin-bottom: 14px;
      width: 100%;
  }

  .sl-field-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
  }

  .sl-field-container label {
      font-size: 13px;
      font-weight: 700;
      color: #01328E;
  }

  /* Rounded stable form input structures */
  .sl-form-white-shield input,
  .sl-form-white-shield select,
  .sl-form-white-shield textarea {
      width: 100%;
      padding: 13px 16px;
      border: 1px solid #F6F5F2;
      background: #f8fafc;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #0f172a;
      outline: none;
      transition: all 0.2s ease;
  }

  .sl-form-white-shield input::placeholder,
  .sl-form-white-shield textarea::placeholder {
      color: #94a3b8;
  }

  /* Interactive input focused states */
  .sl-form-white-shield input:focus,
  .sl-form-white-shield select:focus,
  .sl-form-white-shield textarea:focus {
      background: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  }

  /* Layout rules for full block layouts */
  .sl-full-block-container {
      margin-bottom: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
  }

  /* Horizontal choices layout */
  .sl-choices-wrapper {
      display: flex;
      gap: 20px;
      margin-top: 4px;
  }

  .sl-choice-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #01328E;
      font-weight: 600;
      cursor: pointer;
  }

  .sl-choice-label input[type="radio"] {
      width: 18px;
      height: 18px;
      accent-color: #2563eb;
      cursor: pointer;
  }

  /* Custom File uploader design components */
  .sl-uploader-block {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
  }

  .sl-uploader-trigger-action {
      background: none;
      border: none;
      color: #01328E;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s ease;
  }

  .sl-uploader-trigger-action:hover {
      color: #1d4ed8;
      text-decoration: underline;
  }

  /* Premium submit/action button */
  .sl-form-submit-action {
      width: 100%;
      border: none;
      padding: 15px;
      border-radius: 12px;
      background: #01328E;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 6px 18px rgba(37, 99, 235, 0.2);
      transition: all 0.25s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
  }

  .sl-form-submit-action:hover {
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
      transform: translateY(-2px);
      background-color: #08A1DD;
  }

  .sl-form-submit-action:active {
      transform: translateY(1px);
  }

  /* Dynamic internal card success notification layout */
  .sl-form-success-shield {
      text-align: center;
      padding: 30px 10px;
  }

  .sl-form-success-icon-badge {
      width: 74px;
      height: 74px;
      background: #eff6ff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #2563eb;
      margin: 0 auto 20px auto;
      border: 2px solid #bfdbfe;
  }

  /* Responsive adjustments for portable displays */
  @media(max-width: 950px) {
      .sl-modal-board {
          flex-direction: column;
          align-items: stretch;
          /* FIXED: Forces responsive vertical flow cards to stretch properly */
          max-height: 90vh;
          overflow-y: auto;
          padding: 30px 24px;
          gap: 24px;
          border-radius: 28px;
      }

      .sl-sidebar-pane {
          align-items: center;
          text-align: center;
          min-height: auto;
          width: 100%;
          padding: 20px 0;
      }

      .sl-sidebar-logo-block {
          justify-content: center;
          margin-bottom: 12px;
      }

      .sl-sidebar-body-text {
          margin: 15px 0;
      }

      .sl-sidebar-body-text h2 {
          font-size: 32px;
      }

      .sl-sidebar-body-text p {
          font-size: 15px;
      }

      .sl-form-white-shield {
          width: 100%;
          padding: 30px 20px;
          border-radius: 20px;
      }

      #slCloseAction {
          background: rgba(255, 255, 255, 0.3);
          top: 15px;
          right: 15px;
      }
  }

  .sl-sidebar-logo-icon-holder img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      display: block;
  }

  @media(max-width: 600px) {
      .sl-form-grid-row {
          flex-direction: column;
          gap: 14px;
          margin-bottom: 14px;
      }
  }