/* ============================================================
   Linfield College International — Design Override
   Applied over the existing ProBootstrap Enlight theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --navy: #1e3a5f;
  --navy-hover: #2a5298;
  --navy-light: #eef2f8;
  --grey-bg: #f4f6f9;
  --white: #ffffff;
  --text-dark: #1a1a2e;
  --text-mid: #5a6473;
  --border: #e5e7eb;
  --shadow: 0 2px 12px rgba(30,58,95,0.10);
  --shadow-hover: 0 6px 24px rgba(30,58,95,0.16);
  --radius: 8px;
}

/* ── Typography ── */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, input, textarea, button {
  font-family: 'Inter', Raleway, Arial, sans-serif !important;
}

body {
  background: var(--grey-bg) !important;
  color: var(--text-mid) !important;
  line-height: 1.7 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--navy) !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
}

a {
  color: var(--navy-hover) !important;
  transition: color 0.2s !important;
}
a:hover { color: var(--navy) !important; }

/* ── Navbar ── */
.navbar {
  background: var(--white) !important;
  box-shadow: 0 2px 8px rgba(30,58,95,0.08) !important;
  padding: 0 24px !important;
  min-height: 64px !important;
  border-bottom: none !important;
}

.navbar-brand {
  color: var(--navy) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
}

.navbar-brand img {
  display: none !important;
}

.navbar-brand::before {
  content: '' !important;
  display: inline-block !important;
  width: 48px !important;
  height: 48px !important;
  background: url('/static/media/logo.png') center/contain no-repeat !important;
  flex-shrink: 0 !important;
}

.nav-link,
.navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link {
  color: var(--text-dark) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

.nav-link:hover,
.navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--navy) !important;
  background: var(--navy-light) !important;
}

.nav-link.active,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--navy) !important;
  font-weight: 600 !important;
}

.dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-hover) !important;
  padding: 8px !important;
  border-top: 3px solid var(--navy) !important;
}

.dropdown-item {
  border-radius: 6px !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  color: var(--text-dark) !important;
}
.dropdown-item:hover {
  background: var(--navy-light) !important;
  color: var(--navy) !important;
}

/* ── Hero / Carousel ── */
.carousel {
  background: var(--navy) !important;
  position: relative !important;
}

.carousel-inner {
  position: relative !important;
  z-index: 0 !important;
}

.carousel-item {
  min-height: 560px !important;
  position: relative !important;
}

.carousel-item img {
  width: 100% !important;
  height: 560px !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: brightness(0.45) !important;
  display: block !important;
}

/* Left navy gradient for text readability */
.carousel-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(100deg, rgba(30,58,95,0.82) 0%, rgba(30,58,95,0.3) 60%, transparent 100%) !important;
  z-index: 1 !important;
}

/* Caption — left-aligned, vertically centred */
.carousel-caption,
.carousel-caption-front,
div.carousel-caption-front {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  bottom: auto !important;
  left: 8% !important;
  right: 40% !important;
  transform: translateY(-50%) !important;
  text-align: left !important;
  padding: 0 !important;
  display: block !important;
}

/* Caption badge line */
.carousel-caption::before,
.carousel-caption-front::before,
div.carousel-caption-front::before {
  content: 'Linfield College International' !important;
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  border-left: 3px solid rgba(255,255,255,0.5) !important;
  padding-left: 12px !important;
  margin-bottom: 20px !important;
  display: block !important;
}

/* Empty h3 — hide it since captionHeader isn't passed */
.carousel-caption h3:empty,
.carousel-caption-front h3:empty {
  display: none !important;
}

.carousel-caption h3,
.carousel-caption-front h3 {
  color: #fff !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
  text-shadow: none !important;
}

/* The quote text is in a <p> — make it look like a hero headline */
.carousel-caption p,
.carousel-caption-front p {
  color: #ffffff !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  letter-spacing: -0.3px !important;
}

/* Nav arrows */
.carousel-control-next,
.carousel-control-prev {
  z-index: 3 !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  transition: background 0.2s !important;
}
.carousel-control-next:hover,
.carousel-control-prev:hover {
  background: rgba(255,255,255,0.25) !important;
}
.carousel-control-next { right: 24px !important; }
.carousel-control-prev { left: 24px !important; }

/* Dots */
.carousel-indicators {
  bottom: 20px !important;
  z-index: 3 !important;
}
.carousel-indicators li {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 4px !important;
  width: 24px !important;
  height: 3px !important;
  border: none !important;
  margin: 0 3px !important;
  transition: background 0.2s, width 0.2s !important;
}
.carousel-indicators .active {
  background: #fff !important;
  width: 36px !important;
}

/* ── Welcome Section (homepage) ── */

/* Section wrapper — pull up over hero, white card */
.probootstrap-section-sm:first-of-type,
.probootstrap-section:first-of-type {
  background: transparent !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 10 !important;
  margin-top: -60px !important;
}

.probootstrap-section-sm:first-of-type .container,
.probootstrap-section:first-of-type .container {
  background: var(--white) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 40px rgba(30,58,95,0.16) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.probootstrap-section-sm:first-of-type .row,
.probootstrap-section:first-of-type .row {
  margin: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Left panel — navy with heading */
.probootstrap-section-sm:first-of-type .row > div:first-child,
.probootstrap-section:first-of-type .row > div:first-child {
  background: var(--navy) !important;
  padding: 48px 36px !important;
  display: flex !important;
  align-items: center !important;
}

/* Right panel — white with text */
.probootstrap-section-sm:first-of-type .row > div:last-child,
.probootstrap-section:first-of-type .row > div:last-child {
  background: var(--white) !important;
  padding: 48px 40px !important;
  border-left: none !important;
}

/* Welcome heading — white on navy panel */
.display-5 {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
}

/* The school description paragraph */
.text-center.section-heading.lead,
.section-heading.lead {
  text-align: left !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.text-center.section-heading.lead p,
.section-heading.lead p {
  font-size: 15.5px !important;
  font-weight: 400 !important;
  color: var(--text-mid) !important;
  line-height: 1.9 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  padding: 20px 20px 20px 24px !important;
  border-left: 3px solid var(--navy-light) !important;
  background: var(--grey-bg) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* Decorative opening quote mark */
.text-center.section-heading.lead p::before,
.section-heading.lead p::before {
  content: '\201C' !important;
  font-size: 56px !important;
  color: var(--navy-light) !important;
  line-height: 0 !important;
  position: absolute !important;
  top: 28px !important;
  left: -4px !important;
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
}

/* Read More — bold pill CTA */
.btn.btn-info,
.btn-info,
a.btn-info,
button.btn-info {
  background: var(--navy) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 13px 32px !important;
  border-radius: 50px !important;
  transition: all 0.25s !important;
  margin-top: 28px !important;
  display: block !important;
  width: fit-content !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(30,58,95,0.25) !important;
}

.btn.btn-info::after,
.btn-info::after,
a.btn-info::after {
  content: '→' !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  transition: transform 0.25s !important;
  display: inline-block !important;
}

.btn.btn-info:hover,
.btn-info:hover,
a.btn-info:hover {
  background: var(--navy-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(30,58,95,0.3) !important;
}

.btn.btn-info:hover::after,
.btn-info:hover::after,
a.btn-info:hover::after {
  transform: translateX(4px) !important;
}

/* ── About Us / Vision & Mission page ── */
.display-5 + p.lead,
h1.display-5 {
  margin-bottom: 12px !important;
}

/* Vision & Mission cards */
.bg-light .container > .row > div {
  padding: 0 12px !important;
}

.bg-light .jumbotron,
div.bg-light {
  background: var(--white) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border) !important;
  padding: 40px !important;
  margin-bottom: 24px !important;
}

/* Vision/Mission headings */
.bg-light h1.display-5 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  border-bottom: 2px solid var(--navy-light) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

/* Icon next to vision/mission text */
.bg-light .lead svg,
.bg-light .lead .fa {
  color: var(--navy) !important;
  margin-right: 8px !important;
}

.bg-light p.lead {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--text-mid) !important;
}

/* ── Sections ── */
.probootstrap-section {
  background: var(--white) !important;
  padding: 72px 0 !important;
}

.probootstrap-section:nth-of-type(even),
.probootstrap-section-sm:nth-of-type(even),
.bg-light {
  background: var(--grey-bg) !important;
}

.probootstrap-section-sm {
  padding: 48px 0 !important;
  background: var(--grey-bg) !important;
}

/* ── Section Headings ── */
.probootstrap-heading,
.section-heading {
  color: var(--navy) !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 36px !important;
  position: relative !important;
  padding-bottom: 16px !important;
}

.probootstrap-heading::after,
.section-heading::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--navy) !important;
  border-radius: 2px !important;
}

/* ── Cards & Feature Boxes ── */
.card,
.probootstrap-featured-news-box,
.probootstrap-flex-item,
.probootstrap-counter-wrap {
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
  overflow: hidden !important;
}

.card:hover,
.probootstrap-featured-news-box:hover,
.probootstrap-flex-item:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-3px) !important;
}

/* ── Counters / Stats ── */
.probootstrap-counter {
  font-size: 42px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.probootstrap-counter-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-mid) !important;
  letter-spacing: 0.5px !important;
}

/* ── Buttons ── */
.btn-primary,
.btn-default,
a.btn-primary {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-default:hover,
a.btn-primary:hover {
  background: var(--navy-hover) !important;
  border-color: var(--navy-hover) !important;
  transform: translateY(-1px) !important;
}

.btn-outline-primary,
.btn-secondary {
  border: 2px solid var(--navy) !important;
  color: var(--navy) !important;
  background: transparent !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}
.btn-outline-primary:hover,
.btn-secondary:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

/* ── Forms ── */
.form-control {
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  color: var(--text-dark) !important;
}
.form-control:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(30,58,95,0.12) !important;
  outline: none !important;
}

/* ── Footer ── */
.probootstrap-footer,
.probootstrap-footer.probootstrap-bg,
footer.probootstrap-footer {
  background: var(--navy) !important;
  padding: 56px 0 0 !important;
  border-top: none !important;
}

.probootstrap-footer h3,
.probootstrap-footer h4 {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.probootstrap-footer p,
.probootstrap-footer li,
.probootstrap-footer a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  text-decoration: none !important;
}

.probootstrap-footer a:hover {
  color: #fff !important;
}

/* Contact info — full white, clearly readable */
.probootstrap-contact-info li,
.probootstrap-contact-info li a,
.probootstrap-contact-info li svg,
.probootstrap-contact-info li * {
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

.probootstrap-contact-info {
  padding: 0 !important;
  list-style: none !important;
}

.probootstrap-contact-info li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

/* Footer social icons */
.probootstrap-footer-social li a {
  color: rgba(255,255,255,0.7) !important;
  transition: color 0.2s !important;
}
.probootstrap-footer-social li a:hover {
  color: #fff !important;
}

/* ── Copyright bar ── */
.probootstrap-copyright {
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding: 18px 0 !important;
  margin-top: 48px !important;
}

.probootstrap-copyright p,
.probootstrap-copyright a {
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.probootstrap-copyright a:hover {
  color: rgba(255,255,255,0.8) !important;
}

/* ── Jumbotron / Page Headers ── */
.jumbotron {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-hover) 100%) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 56px 32px !important;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron .display-4,
.jumbotron .display-5 {
  color: #fff !important;
  font-weight: 700 !important;
}

/* ── Gallery ── */
.probootstrap-gallery-item {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
}

/* ── Back to top ── */
.probootstrap-back-to-top a,
.js-backtotop {
  background: var(--navy) !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* ── Scrollbar (subtle) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--grey-bg); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; }

/* ============================================================
   RESPONSIVE — Mobile & Tablet
   ============================================================ */

/* ── Tablet (≤768px) ── */
@media screen and (max-width: 768px) {

  /* Navbar */
  .navbar {
    padding: 0 16px !important;
    min-height: 56px !important;
  }
  .navbar-brand {
    font-size: 15px !important;
  }
  .navbar-brand::before {
    width: 38px !important;
    height: 38px !important;
  }

  /* Carousel */
  .carousel-item,
  .carousel-item img {
    height: 320px !important;
    min-height: 320px !important;
  }
  .carousel-caption,
  .carousel-caption-front,
  div.carousel-caption-front {
    left: 6% !important;
    right: 6% !important;
    top: 50% !important;
  }
  .carousel-caption p,
  .carousel-caption-front p {
    font-size: 22px !important;
  }
  .carousel-caption::before,
  .carousel-caption-front::before,
  div.carousel-caption-front::before {
    font-size: 10px !important;
    margin-bottom: 10px !important;
  }
  .carousel-control-next,
  .carousel-control-prev {
    width: 36px !important;
    height: 36px !important;
  }

  /* Welcome section — stack panels vertically */
  .probootstrap-section-sm:first-of-type .row,
  .probootstrap-section:first-of-type .row {
    flex-direction: column !important;
  }
  .probootstrap-section-sm:first-of-type .row > div:first-child,
  .probootstrap-section:first-of-type .row > div:first-child {
    padding: 32px 24px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .probootstrap-section-sm:first-of-type .row > div:last-child,
  .probootstrap-section:first-of-type .row > div:last-child {
    padding: 28px 24px !important;
    border-radius: 0 0 12px 12px !important;
  }
  .display-5 {
    font-size: 24px !important;
  }
  .probootstrap-section-sm:first-of-type {
    margin-top: -32px !important;
  }

  /* Sections */
  .probootstrap-section {
    padding: 48px 0 !important;
  }
  .probootstrap-section-sm {
    padding: 32px 0 !important;
  }

  /* Section headings */
  .probootstrap-heading,
  .section-heading {
    font-size: 24px !important;
  }

  /* Footer */
  .probootstrap-footer {
    padding: 40px 0 0 !important;
  }
  .probootstrap-footer .row {
    flex-direction: column !important;
  }
  .probootstrap-footer .col-md-4 {
    width: 100% !important;
    padding: 0 20px 28px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .probootstrap-copyright {
    margin-top: 24px !important;
  }
  .probootstrap-copyright .row {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
  }

  /* About Us / Vision & Mission */
  div.bg-light {
    padding: 28px 20px !important;
    margin-bottom: 16px !important;
  }
}

/* ── Mobile (≤480px) ── */
@media screen and (max-width: 480px) {

  /* Carousel */
  .carousel-item,
  .carousel-item img {
    height: 260px !important;
    min-height: 260px !important;
  }
  .carousel-caption p,
  .carousel-caption-front p {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .carousel-indicators {
    bottom: 10px !important;
  }

  /* Welcome card */
  .probootstrap-section-sm:first-of-type .row > div:first-child {
    padding: 24px 20px !important;
  }
  .probootstrap-section-sm:first-of-type .row > div:last-child {
    padding: 24px 20px !important;
  }
  .display-5 {
    font-size: 20px !important;
  }
  .text-center.section-heading.lead p,
  .section-heading.lead p {
    font-size: 14px !important;
    padding: 16px 16px 16px 18px !important;
  }

  /* Read more button */
  .btn.btn-info,
  .btn-info,
  a.btn-info {
    font-size: 12px !important;
    padding: 11px 24px !important;
  }

  /* Section headings */
  .probootstrap-heading,
  .section-heading {
    font-size: 20px !important;
  }

  /* Jumbotron page headers */
  .jumbotron {
    padding: 36px 20px !important;
  }
  .jumbotron h1,
  .jumbotron .display-4 {
    font-size: 26px !important;
  }

  /* Navbar brand */
  .navbar-brand {
    font-size: 14px !important;
  }
}

/* ── Contact Us Page ── */

/* Responsive Google Map iframe */
.probootstrap-image {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding-top: 110% !important; /* approx 460x510 ratio */
}

.probootstrap-image iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

/* Contact form styling */
.probootstrap-form .form-group {
  margin-bottom: 16px !important;
}

.probootstrap-form label {
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--text-dark) !important;
  margin-bottom: 6px !important;
}

/* ── Contact Us mobile ── */
@media screen and (max-width: 768px) {
  /* Stack form and map vertically */
  .probootstrap-section-sm .row {
    flex-direction: column !important;
  }

  .probootstrap-section-sm .col,
  .probootstrap-section-sm [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 15px !important;
  }

  /* Map takes full width with fixed height on mobile */
  .probootstrap-image {
    padding-top: 75% !important;
    margin-top: 24px !important;
  }

  /* Facebook embed */
  .fb-page, .fb-page span, .fb-page iframe {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  .probootstrap-image {
    padding-top: 90% !important;
  }
}

/* ── Carousel mobile smoothness ── */
.carousel {
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.carousel-item {
  will-change: transform !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

.carousel-item img {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

/* Disable heavy filter on mobile for smoother transitions */
@media screen and (max-width: 768px) {
  .carousel-item img {
    filter: brightness(0.5) !important;
    will-change: auto !important;
  }
  .carousel-item::after {
    background: linear-gradient(180deg, rgba(30,58,95,0.6) 0%, rgba(30,58,95,0.75) 100%) !important;
  }
}

/* ── Contact Us form margin ── */
.probootstrap-form {
  padding: 24px !important;
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border) !important;
}

@media screen and (max-width: 768px) {
  .probootstrap-form {
    margin: 0 0 24px 0 !important;
    padding: 20px !important;
  }
}