/*
 * ATP Softwares — Blue & White redesign
 * Loaded after the legacy styles so every public page shares one visual system.
 */

:root {
  --atp-blue: #084fba;
  --atp-blue-dark: #063b88;
  --atp-blue-deep: #031b3d;
  --atp-blue-bright: #176dcc;
  --atp-sky: #eaf4ff;
  --atp-sky-soft: #f6faff;
  --atp-white: #ffffff;
  --atp-ink: #102a43;
  --atp-muted: #5f7187;
  --atp-line: #d8e8fb;
  --atp-shadow: 0 18px 48px rgba(20, 82, 153, 0.11);
  --atp-shadow-lg: 0 28px 75px rgba(20, 82, 153, 0.16);
}

html {
  background: var(--atp-white) !important;
}

body {
  color: var(--atp-ink) !important;
  background: var(--atp-sky-soft) !important;
  font-family: "Inter", Arial, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  height: 3px;
  background: linear-gradient(90deg, var(--atp-blue-dark), var(--atp-blue-bright), #69b9ff);
}

h1,
h2,
h3,
h4,
h5,
h6,
.ai-logo span,
.ai-menu a,
.site-btn,
.btn,
.section-kicker,
.mini-label {
  font-family: "Sora", "Inter", Arial, sans-serif !important;
}

::selection {
  color: var(--atp-white);
  background: var(--atp-blue);
}

/* Header and navigation */
.ai-header {
  background: linear-gradient(110deg, rgba(3, 27, 61, 0.98), rgba(6, 59, 136, 0.97)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 34px rgba(3, 27, 61, 0.28) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
}

.ai-logo {
  color: var(--atp-white) !important;
}

.ai-logo img {
  background: var(--atp-white) !important;
  border: 1px solid var(--atp-line) !important;
  box-shadow: 0 8px 22px rgba(11, 94, 215, 0.12) !important;
}

.ai-menu a {
  color: #e7f2ff !important;
  border: 1px solid transparent !important;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.ai-menu a:hover {
  color: var(--atp-white) !important;
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.ai-menu a.active,
.ai-menu .active {
  color: var(--atp-white) !important;
  background: linear-gradient(135deg, #0b61c8, #2b84df) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 9px 22px rgba(0, 17, 45, 0.28) !important;
}

/* Buttons */
.site-btn,
.purchase,
input.site-btn,
input[type="submit"],
button.site-btn,
.btn-atp {
  color: var(--atp-white) !important;
  background: linear-gradient(135deg, var(--atp-blue-dark), var(--atp-blue-bright)) !important;
  border: 1px solid rgba(8, 66, 152, 0.15) !important;
  box-shadow: 0 13px 30px rgba(11, 94, 215, 0.23) !important;
}

.site-btn:hover,
.site-btn:focus,
.purchase:hover,
.btn-atp:hover {
  color: var(--atp-white) !important;
  background: linear-gradient(135deg, #063c8a, #166ddb) !important;
  box-shadow: 0 18px 36px rgba(11, 94, 215, 0.3) !important;
  transform: translateY(-2px) !important;
}

.btn-outline-atp {
  color: var(--atp-blue-dark) !important;
  background: var(--atp-white) !important;
  border: 1px solid #9fc7f6 !important;
  box-shadow: 0 10px 25px rgba(11, 94, 215, 0.08) !important;
}

.btn-outline-atp:hover,
.btn-outline-atp:focus {
  color: var(--atp-white) !important;
  background: var(--atp-blue) !important;
  border-color: var(--atp-blue) !important;
}

/* Home hero */
.ai-hero {
  min-height: 680px !important;
  color: var(--atp-white) !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(70, 151, 245, 0.28), transparent 30%),
    radial-gradient(circle at 8% 85%, rgba(30, 111, 213, 0.24), transparent 34%),
    linear-gradient(135deg, #021631 0%, #052e68 50%, #084fa7 100%) !important;
}

.ai-hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent) !important;
}

.hero-copy h1 {
  color: var(--atp-white) !important;
  letter-spacing: -0.05em !important;
}

.hero-copy h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 5px;
  margin-top: 22px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--atp-blue), #69b9ff);
}

.hero-copy p {
  color: #cfe2f8 !important;
}

.mini-label {
  color: #eaf5ff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 22px rgba(0, 18, 48, 0.14) !important;
}

.hero-bullets li {
  color: #edf6ff !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 9px 25px rgba(0, 18, 48, 0.13) !important;
}

.hero-bullets i,
.tick-list i {
  color: #72baff !important;
}

.dashboard-card,
.about-image {
  background: linear-gradient(145deg, #ffffff, #e8f3ff) !important;
  border: 1px solid #bcdcff !important;
  box-shadow: var(--atp-shadow-lg) !important;
}

.dashboard-card img,
.about-image img {
  border: 1px solid #d5e7fb !important;
  box-shadow: 0 16px 45px rgba(20, 82, 153, 0.14) !important;
}

.floating-chip {
  color: var(--atp-blue-deep) !important;
  background: var(--atp-white) !important;
  border: 1px solid #d5e7fb !important;
  box-shadow: 0 15px 38px rgba(20, 82, 153, 0.16) !important;
}

.floating-chip i {
  color: var(--atp-blue) !important;
}

/* Shared content surfaces */
.spad,
.content-section,
.payu-shell {
  background-color: var(--atp-sky-soft) !important;
}

.stats-panel,
.feature-card,
.white-card,
.review-card,
.pricing-card,
.faq-item,
.legal-card,
.contact-box,
.contact-form,
.video-card,
.google-review-card,
.payu-info,
.payu-form-card,
.payu-result-card,
.thankyou-card {
  background: var(--atp-white) !important;
  border: 1px solid var(--atp-line) !important;
  box-shadow: var(--atp-shadow) !important;
}

.feature-card::before,
.pricing-card::before {
  background: linear-gradient(90deg, var(--atp-blue-dark), #69b9ff) !important;
}

.feature-card:hover,
.white-card:hover,
.review-card:hover,
.pricing-card:hover,
.google-review-card:hover,
.video-card:hover {
  border-color: #a9cff9 !important;
  box-shadow: var(--atp-shadow-lg) !important;
}

.icon-badge,
.contact-line i,
.google-avatar {
  color: var(--atp-blue) !important;
  background: linear-gradient(135deg, #e3f1ff, #f4f9ff) !important;
  border: 1px solid #c9e1ff !important;
}

.section-kicker {
  color: var(--atp-blue) !important;
}

.section-title h2,
.feature-card h3,
.white-card h3,
.pricing-card h3,
.video-card h3,
.faq-item h3,
.legal-card h2,
.legal-card h3,
.contact-box h3,
.contact-form h3,
.payu-info h3,
.payu-form-card h3,
.payu-result-card h3 {
  color: var(--atp-blue-deep) !important;
}

.section-title p,
.feature-card p,
.white-card p,
.review-card p,
.pricing-card p,
.video-card p,
.faq-item p,
.legal-card p,
.legal-card li,
.contact-box p,
.contact-form p,
.payu-info p,
.payu-form-card p,
.payu-result-card p {
  color: var(--atp-muted) !important;
}

.stat-card {
  background: linear-gradient(180deg, #fafdff, #eaf4ff) !important;
  border: 1px solid #d8e8fb !important;
}

.stat-card strong {
  color: var(--atp-blue-dark) !important;
}

.stat-card span {
  color: var(--atp-muted) !important;
}

/* Darker brand sections balance the white content cards. */
.dark-panel {
  color: var(--atp-white) !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(60, 145, 240, 0.24), transparent 30%),
    linear-gradient(135deg, #031b3d, #084b9f) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.dark-panel::before {
  background: radial-gradient(circle at 90% 70%, rgba(105, 185, 255, 0.14), transparent 32%) !important;
}

.dark-panel h2,
.dark-panel h3,
.dark-panel .atp-inline-011 {
  color: var(--atp-white) !important;
}

.dark-panel p,
.dark-panel .atp-inline-012,
.dark-panel .atp-inline-013,
.dark-panel .tick-list li {
  color: #d7e9fb !important;
}

.dark-panel .btn-outline-atp {
  color: var(--atp-blue-dark) !important;
  background: var(--atp-white) !important;
  border-color: #9fc7f6 !important;
}

/* Inner-page hero */
.page-hero,
.compact-page-hero {
  color: var(--atp-white) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(83, 163, 248, 0.28), transparent 28%),
    linear-gradient(135deg, #031b3d 0%, #074694 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--atp-blue-dark), var(--atp-blue-bright), #a9d4ff);
}

.page-hero h1 {
  color: var(--atp-white) !important;
}

.page-hero p {
  color: #d4e8fb !important;
}

/* Forms */
.contact-form input,
.contact-form select,
.contact-form textarea,
.payu-form-card input,
.payu-form-card select,
.payu-form-card textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea,
.form-control {
  color: var(--atp-ink) !important;
  background: #fbfdff !important;
  border: 1px solid #cfe2f8 !important;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.payu-form-card input:focus,
.payu-form-card select:focus,
.payu-form-card textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--atp-blue) !important;
  box-shadow: 0 0 0 4px rgba(11, 94, 215, 0.12) !important;
}

.form-note,
.payu-note,
.payu-muted {
  color: #6d7f92 !important;
}

/* Pricing and checkout */
.pricing-card.featured {
  color: var(--atp-white) !important;
  background: linear-gradient(145deg, var(--atp-blue-deep), var(--atp-blue-bright)) !important;
  border-color: transparent !important;
}

.pricing-card.featured h3,
.pricing-card.featured p {
  color: var(--atp-white) !important;
}

.pricing-card.featured .site-btn {
  color: var(--atp-blue-dark) !important;
  background: var(--atp-white) !important;
  border-color: var(--atp-white) !important;
}

.price-image {
  border: 1px solid var(--atp-line) !important;
  box-shadow: var(--atp-shadow) !important;
}

.payu-shell {
  background: linear-gradient(135deg, #f7fbff 0%, #e9f4ff 100%) !important;
}

.payu-badge,
.coupon-helper {
  color: var(--atp-blue-dark) !important;
  background: #e8f3ff !important;
  border-color: #bcdcff !important;
}

.payu-points i {
  color: var(--atp-blue) !important;
}

.payu-secure-strip span,
.payu-total,
.payu-total-detailed > div,
.payu-table td {
  background: #f1f7ff !important;
  border-color: #d5e7fb !important;
}

.payu-total strong,
.payu-total span,
.payu-table td,
.payu-field-block label,
.payu-row label,
.coupon-helper label {
  color: var(--atp-blue-deep) !important;
}

/* CTA and footer */
.cta-band {
  color: var(--atp-white) !important;
  background: linear-gradient(120deg, var(--atp-blue-dark), var(--atp-blue-bright)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.cta-row h2,
.cta-row p {
  color: var(--atp-white) !important;
}

.cta-band .site-btn {
  color: var(--atp-blue-dark) !important;
  background: var(--atp-white) !important;
  border-color: var(--atp-white) !important;
  box-shadow: 0 16px 35px rgba(3, 35, 82, 0.22) !important;
}

.ai-footer {
  color: #dbeaff !important;
  background:
    radial-gradient(circle at 85% 0, rgba(47, 128, 237, 0.28), transparent 30%),
    linear-gradient(145deg, #041f4a, #062b66) !important;
  border-top: 4px solid #4ea3ff !important;
}

.ai-footer h4 {
  color: var(--atp-white) !important;
}

.ai-footer p,
.ai-footer a {
  color: #dbeaff !important;
}

.ai-footer a:hover {
  color: #8cc7ff !important;
}

.copyright {
  color: #a9c9eb !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.footer-logo img {
  padding: 6px !important;
  border-radius: 16px !important;
  background: var(--atp-white) !important;
}

.sticky-demo a {
  color: var(--atp-white) !important;
  background: linear-gradient(135deg, var(--atp-blue-dark), var(--atp-blue-bright)) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 14px 34px rgba(8, 66, 152, 0.3) !important;
}

/* Thank-you page */
.thankyou-premium {
  background:
    radial-gradient(circle at 50% 0, rgba(47, 128, 237, 0.18), transparent 38%),
    linear-gradient(180deg, #ffffff, #eaf4ff) !important;
}

.thankyou-card h1 {
  color: var(--atp-blue-deep) !important;
}

.thankyou-card .mini-label {
  color: var(--atp-blue-dark) !important;
  background: #e8f3ff !important;
  border-color: #bcdcff !important;
  box-shadow: none !important;
}

.success-icon,
.thankyou-icon {
  color: var(--atp-white) !important;
  background: linear-gradient(135deg, var(--atp-blue-dark), var(--atp-blue-bright)) !important;
  box-shadow: 0 14px 32px rgba(11, 94, 215, 0.24) !important;
}

.thankyou-actions .btn-outline-atp {
  color: var(--atp-blue-dark) !important;
  background: var(--atp-white) !important;
  border-color: #9fc7f6 !important;
}

/* Legacy PhonePe page cleanup */
body > form#form1 > .container {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
  padding: 34px !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 28px !important;
  background: var(--atp-white) !important;
  box-shadow: var(--atp-shadow-lg) !important;
}

.total-logo {
  text-align: center !important;
}

.total-logo img {
  max-width: 170px !important;
  padding: 8px !important;
  border-radius: 18px !important;
  border: 1px solid var(--atp-line) !important;
}

.step .line,
.step .retry {
  background: var(--atp-blue) !important;
}

.step .payment,
.card-holder label {
  color: var(--atp-blue-deep) !important;
}

.cont-forms {
  max-width: 620px !important;
  margin: 28px auto 0 !important;
}

.card-holder,
.conf-button {
  border: 0 !important;
}

.button-cart,
.cont-product {
  display: none !important;
}

/* First-visit demo popup */
body.atp-modal-open {
  overflow: hidden !important;
}

.atp-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.atp-demo-modal.is-visible {
  opacity: 1;
  visibility: visible;
}

.atp-demo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 13, 31, 0.8);
  backdrop-filter: blur(7px);
}

.atp-demo-dialog {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 26px;
  background: var(--atp-white);
  box-shadow: 0 35px 95px rgba(0, 12, 34, 0.48);
  transform: translateY(18px) scale(0.975);
  transition: transform 0.22s ease;
}

.atp-demo-modal.is-visible .atp-demo-dialog {
  transform: translateY(0) scale(1);
}

.atp-demo-modal-head {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 15px;
  align-items: center;
  min-height: 112px;
  padding: 20px 24px;
  color: var(--atp-white);
  background:
    radial-gradient(circle at 90% 10%, rgba(85, 166, 255, 0.3), transparent 35%),
    linear-gradient(125deg, #031b3d, #0750aa);
}

.atp-demo-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  color: #dceeff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 23px;
}

.atp-demo-modal-copy span {
  display: block;
  margin-bottom: 3px;
  color: #8fc9ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.atp-demo-modal-copy h2 {
  margin: 0 0 4px !important;
  color: var(--atp-white) !important;
  font-size: 25px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em !important;
}

.atp-demo-modal-copy p {
  margin: 0 !important;
  color: #d5e8fb !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.atp-demo-close {
  align-self: start;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  color: var(--atp-white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  font: 400 30px/36px Arial, sans-serif !important;
  cursor: pointer;
}

.atp-demo-close:hover,
.atp-demo-close:focus {
  color: var(--atp-blue-deep) !important;
  background: var(--atp-white) !important;
  outline: 3px solid rgba(255, 255, 255, 0.24) !important;
}

.atp-demo-frame-wrap {
  position: relative;
  height: min(520px, calc(100vh - 205px));
  min-height: 410px;
  overflow: hidden;
  background: var(--atp-white);
}

.atp-demo-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--atp-blue-dark);
  background: var(--atp-white);
  font-weight: 800;
}

.atp-demo-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--atp-white);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.atp-demo-frame.is-loaded {
  opacity: 1;
}

.atp-demo-modal-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 18px;
  color: #60758b;
  background: #f4f8fd;
  border-top: 1px solid var(--atp-line);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.atp-demo-modal-foot i {
  color: var(--atp-blue);
}

.atp-demo-modal.is-success .atp-demo-modal-icon {
  color: var(--atp-white);
  background: #0b67c7;
}

/* Compact the real ASP.NET form only while it is inside the popup iframe. */
html.atp-popup-embed,
html.atp-popup-embed body {
  min-width: 0 !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  color: var(--atp-ink) !important;
  background: var(--atp-white) !important;
}

html.atp-popup-embed body::before,
html.atp-popup-embed .ai-header,
html.atp-popup-embed .page-hero,
html.atp-popup-embed .contact-box,
html.atp-popup-embed .cta-band,
html.atp-popup-embed .ai-footer,
html.atp-popup-embed .sticky-demo,
html.atp-popup-embed #atp-conversion-debug-note,
html.atp-popup-embed [id*="tawk"],
html.atp-popup-embed [class*="tawk"] {
  display: none !important;
}

html.atp-popup-embed .content-section {
  min-height: 0 !important;
  padding: 0 !important;
  background: var(--atp-white) !important;
}

html.atp-popup-embed .content-section > .container {
  width: 100% !important;
  max-width: none !important;
}

html.atp-popup-embed .contact-grid {
  display: block !important;
}

html.atp-popup-embed .contact-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 24px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.atp-popup-embed .contact-form h3 {
  margin: 0 0 4px !important;
  font-size: 22px !important;
}

html.atp-popup-embed .contact-form > p {
  margin-bottom: 12px !important;
  font-size: 13px !important;
}

html.atp-popup-embed .contact-form .row {
  margin-right: -6px !important;
  margin-left: -6px !important;
}

html.atp-popup-embed .contact-form [class*="col-"] {
  padding-right: 6px !important;
  padding-left: 6px !important;
}

html.atp-popup-embed .contact-form input,
html.atp-popup-embed .contact-form select {
  min-height: 50px !important;
  margin-bottom: 10px !important;
  border-radius: 13px !important;
}

html.atp-popup-embed .contact-form .form-note {
  display: none !important;
}

html.atp-popup-embed .contact-form .site-btn {
  width: 100% !important;
  margin-top: 2px !important;
}

html.atp-popup-embed .validation-message {
  display: block !important;
  margin: 0 0 10px !important;
  color: #b42318 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html.atp-popup-embed .thankyou-premium {
  min-height: 100vh !important;
  padding: 24px 0 !important;
  background: var(--atp-white) !important;
}

html.atp-popup-embed .thankyou-card {
  width: 100% !important;
  max-width: 620px !important;
  padding: 28px 22px !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.atp-popup-embed .thankyou-card h1 {
  font-size: 30px !important;
}

html.atp-popup-embed .thankyou-card p {
  font-size: 15px !important;
}

html.atp-popup-embed .thankyou-actions {
  display: none !important;
}

/* Responsive refinements */
@media (max-width: 1180px) {
  .ai-menu {
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
}

@media (max-width: 640px) {
  body::before {
    height: 2px;
  }

  .ai-header {
    position: sticky !important;
  }

  .ai-logo {
    color: var(--atp-white) !important;
  }

  .ai-menu {
    scrollbar-color: #9fc7f6 transparent;
    scrollbar-width: thin;
  }

  .ai-menu a {
    color: #29445e !important;
    background: #f7fbff !important;
    border: 1px solid #e0ecf9 !important;
  }

  .ai-menu a.active,
  .ai-menu .active {
    color: var(--atp-white) !important;
    background: var(--atp-blue) !important;
  }

  .ai-hero {
    padding-top: 62px !important;
    min-height: auto !important;
  }

  .hero-copy h1::after {
    width: 64px;
    height: 4px;
    margin-top: 16px;
  }

  .dashboard-card,
  .about-image {
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .cta-band {
    padding-bottom: 86px !important;
  }

  .sticky-demo {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  body > form#form1 > .container {
    width: calc(100% - 24px) !important;
    margin-top: 28px !important;
    padding: 22px 16px !important;
  }

  .atp-demo-modal {
    padding: 8px;
  }

  .atp-demo-dialog {
    max-height: calc(100vh - 16px);
    border-radius: 20px;
  }

  .atp-demo-modal-head {
    grid-template-columns: 1fr auto;
    min-height: 94px;
    padding: 16px 16px 15px;
  }

  .atp-demo-modal-icon {
    display: none;
  }

  .atp-demo-modal-copy h2 {
    font-size: 20px !important;
  }

  .atp-demo-modal-copy p {
    font-size: 12px !important;
  }

  .atp-demo-close {
    width: 36px;
    height: 36px;
    font-size: 27px !important;
    line-height: 32px !important;
  }

  .atp-demo-frame-wrap {
    height: calc(100vh - 157px);
    min-height: 380px;
  }

  .atp-demo-modal-foot {
    display: none;
  }

  html.atp-popup-embed .contact-form {
    padding: 16px 14px !important;
  }

  html.atp-popup-embed .contact-form h3 {
    font-size: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}