/*
 * Page-specific styles for the live2023 self-learning pages
 * (studyportal/views/theme/janbask/home/live2023/selflearning.php) and the
 * reusable courses grid (live2023/inc/self_learning_courses.php).
 *
 * Headings/buttons/body text reuse main.css's .sectionHeading/.sliderHeading/
 * .yellowBtn/.redBtn etc. - only layout that's genuinely unique to these two
 * views lives here (hero overlay, price text, curriculum tabs, card CTA row).
 */

/* Section 2: "What does the program offer" icon grid + CTA strip. */
.selfLearningOfferSection {
  background: #f8fbff;
}
/* .iconsec-1 (icon) and .content-1 (label) are separate sibling divs inside
   .iconbx-col in the CMS HTML, not one nested inside the other - so the
   card itself has to live on .iconbx-col to give BOTH the icon and its
   label a shared box with real padding under the text. Carding only
   .iconsec-1 left the label sitting bare on the section background with no
   bottom breathing room, which is what looked "stuck". */
/* Compound .selfLearningOfferGrid.cmsLegacyGrid (both classes are on the
   same row element in the markup) beats the plain .cmsLegacyGrid
   [class*="col-"] padding-left/right rule further down on specificity,
   regardless of source order, so this card padding isn't fought over. */
.selfLearningOfferGrid.cmsLegacyGrid .iconbx-col {
  margin-bottom: 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(18, 79, 108, 0.08);
  padding: 28px 16px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.selfLearningOfferGrid .iconbx-col:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(18, 79, 108, 0.14);
}
.selfLearningOfferGrid .iconsec-1 img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.selfLearningOfferGrid .content-1 p {
  font-weight: 600;
  color: #124f6c;
  margin: 12px 0 0;
  font-size: 0.95rem;
}
.selfLearningCtaStrip {
  background: linear-gradient(120deg, #055ea1, #022c4d);
  border-radius: 20px;
  padding: 32px 24px;
  /* Its row (class="row justify-content-center") sits directly under the
     icon-grid/stats-grid row above it with no gap of its own (confirmed:
     0px between them), so the two boxes touched. Margin lives on the strip
     itself rather than the row so it applies wherever this component is
     used, not just these two spots. */
  margin-top: 32px;
}
@media (min-width: 992px) {
  .selfLearningCtaStrip {
    margin-top: 48px;
  }
}
.selfLearningCtaStrip .sectionSubHeading {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Section 3: "Why should AWS be your career option" stat row + side box.
   .perjob/.cloud9-bx (stat cards) and .platform-bx (side box) already wrap
   their own icon+text/photo+text, unlike .iconbx-col above, so carding them
   directly is enough - no separate-sibling issue here. */
.selfLearningStatsGrid .platform-bx {
  background: linear-gradient(160deg, #055ea1, #022c4d);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(18, 79, 108, 0.1);
  padding: 28px 24px;
  height: 100%;
}
/* selflearning.css only styles p.lead2.white when it's nested under a
   #layoutsl* id (e.g. "#layoutsl24 .platform-bx p.lead2.white") that this
   page doesn't have, so the "Suited Best For..." heading fell through to
   the default (black) text color even with the .white class on it - the
   rest of the box's text (p.cont2.white, the <li>s) had their own
   un-scoped rules and rendered fine. Set it directly instead of chasing
   the right #layoutsl id. */
.selfLearningStatsGrid .platform-bx p.lead2 {
  color: #fff;
}
/* Same gap, different box: .Intro-bx1 p.lead2.white (the curriculum
   sidebar's "AWS Master Training" heading) exists in selflearning.css and
   IS unscoped this time, but that rule only sets font-size/weight/padding -
   no color - it relies on a separate bare .white{color:#fff} utility class
   that lives in demo2019's broader style.css/bootstrap.min.css, which this
   page deliberately doesn't load (see header.php's self-learning-demo
   branch). .Intro-bx1 p.cont.white has its own explicit color:white right
   next to it and rendered fine - only this one was missing it. */
.cmsLegacyGrid .Intro-bx1 p.lead2 {
  color: #fff;
}
/* .Intro-bx1 has its own fixed height (461px, with more fixed values under
   selflearning-responsive.css's breakpoints) baked in for the old page's
   own fixed-height layout, which doesn't track this column's actual
   sibling (the tabs+module card) height here - at some viewport widths
   they happen to land close, at others (like the reported one) they don't.
   The column itself is already a flex item of a plain Bootstrap .row, so
   it stretches to match its sibling by default - just need .Intro-bx1 to
   fill that stretched column instead of insisting on its own fixed height. */
.cmsLegacyGrid .Intro-bx1 {
  height: 100% !important;
}
/* .pd0 wraps the 4 stat-box columns (col-lg-3) directly inside col-lg-9,
   with no .row of its own around them - float (from .cmsLegacyGrid
   [class*="col-"]) lays them out side by side but each floated box only
   takes its own content's height, so cards with more/less text end up with
   a jagged, misaligned bottom edge. Switching just this inner group to flex
   (nested inside the outer .row, which is flex too) stretches every card to
   the tallest one's height instead. */
.selfLearningStatsGrid .pd0 {
  display: flex;
  flex-wrap: wrap;
}
.selfLearningStatsGrid .pd0 > [class*="col-"] {
  float: none;
  display: flex;
}
.selfLearningStatsGrid .perjob,
.selfLearningStatsGrid .cloud9-bx {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(18, 79, 108, 0.08);
  padding: 24px 16px;
  margin-bottom: 24px;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.selfLearningStatsGrid .perjob:hover,
.selfLearningStatsGrid .cloud9-bx:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(18, 79, 108, 0.14);
}
/* Same big-number treatment as the home page's own stats section
   (homenew.php's .counterHeading + .blueText), applied here to the raw
   CMS field's .slider-text number instead of duplicating markup. */
.selfLearningStatsGrid .perjob .slider-text,
.selfLearningStatsGrid .cloud9-bx .slider-text {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
  background: -webkit-linear-gradient(45deg, #000000, #055ea1 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.selfLearningStatsGrid .perjob .cont,
.selfLearningStatsGrid .cloud9-bx .cont {
  font-weight: 700;
  color: #124f6c;
  margin-bottom: 4px;
}
.selfLearningStatsGrid .perjob .cont3,
.selfLearningStatsGrid .cloud9-bx .cont3 {
  font-size: 0.85rem;
  color: #667;
}

.selfLearningHero {
  position: relative;
  padding: 100px 0;
}
.selfLearningHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 20, 40, 0.82) 40%, rgba(2, 20, 40, 0.35) 100%);
}
.selfLearningHero .container {
  position: relative;
  z-index: 1;
}

.selfLearningOfferStrip {
  display: inline-block;
  background: #f8bd00;
  color: #022846;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 0.9rem;
}

.selfLearningPrice {
  font-size: 1.6rem;
  color: #f8bd00;
}
.selfLearningBuyBox .selfLearningPrice {
  color: #124f6c;
}
/* rating_text (used for every .rating-box on this page) is CMS content
   with the star spans left visually empty - .rating-star/.full-star/
   .half-star have no background-image or ::before content anywhere in the
   CSS this page loads, so they were rendering as invisible boxes. Draw
   them with a Unicode star instead of chasing a missing sprite asset. */
.rating-box .rating-star {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  color: #f8bd00;
}
.rating-box .rating-star.full-star::before,
.rating-box .rating-star.half-star::before {
  content: "\2605";
}
.rating-box .rating-star.half-star {
  opacity: 0.5;
}
/* Separate, older rating-star pattern used by self_learning_courses.php's
   course cards (and identical inline markup elsewhere on this page):
   <span class="fa fa-star checked"><img src="data:image/svg+xml,...">.
   The inline SVG was always the actual star drawn - "fa fa-star" did
   nothing before Font Awesome was loaded on this page (added above for
   .ctFaqToggle's chevron icon). Now that it is, FontAwesome's own
   ::before star glyph renders too, right next to the SVG in the same
   span - doubling every star (5 real ones plus 5 FA ones). Suppress the
   FA glyph specifically where it'd be redundant with an existing image. */
.fa-star:has(img)::before {
  content: none;
}
/* The "(4.8/5)"/"1.5K+ Ratings" spans in rating_text are hardcoded
   color:#fff inline (correct for the hero's dark background, where this
   same field is also used) - unreadable on this section's light gray
   background. Target the literal inline style so the "|" separator's own
   inline color:#EEB617 (fine on light backgrounds already) is left alone.
   Inline styles need !important to lose to anything. */
.selfLearningBuyBox .rating-box span[style*="color:#fff"] {
  color: #124f6c !important;
}
/* s5f2's "Package Includes" heading (.centpackage1 .sales-bx1) is CMS
   markup with class="cont2 white", but no stylesheet loaded on this page
   (main.css, course.min.css, or the demo2019 self-learning CSS) actually
   defines a .white utility - so it fell back to Bootstrap's default
   near-black body text color on the box's dark blue gradient background,
   reading as near-invisible/"black" text. */
.cmsLegacyGrid .white {
  color: #fff;
}

/* s7f3's FAQ accordion - same .ctFaqItem/.accordion-button/.ctFaqToggle
   markup and look as corporate-training.php's working FAQ section (copied
   from studyportal/views/theme/janbask/home/corporate-training.php), which
   isn't itself a shared stylesheet, just that one page's own <style> block -
   so it has to be redefined here for this page to match it. selflearning.php
   parses the legacy s7f3 CMS HTML into this same Bootstrap accordion markup
   at render time (see jt_parse_legacy_faq() there); Bootstrap's own
   bundle.js (already loaded) drives the collapse/expand via
   data-bs-toggle="collapse", no custom JS needed. */
.ctFaqItem {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgb(18 60 107 / 6%);
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #eef1f5;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ctFaqItem:last-child {
  margin-bottom: 0;
}
.ctFaqItem:has(.accordion-button:not(.collapsed)) {
  border-color: #136AAB;
  box-shadow: 0 10px 22px rgb(18 60 107 / 12%);
}
.ctFaqItem .accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 18px 20px;
  font-weight: 700;
  font-size: 15px;
  color: #124F6C;
  text-align: left;
  gap: 14px;
}
.ctFaqItem .accordion-button::after {
  display: none;
}
.ctFaqToggle {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #EAF3FA;
  color: #136AAB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.ctFaqItem .accordion-button:not(.collapsed) .ctFaqToggle {
  background: #136AAB;
  color: #fff;
  transform: rotate(180deg);
}
.ctFaqItem .accordion-body {
  padding: 0 20px 20px;
  color: #555;
}
.selfLearningStrike {
  text-decoration: line-through;
  opacity: 0.65;
  font-weight: 400;
  font-size: 1.1rem;
  margin-right: 8px;
}
.selfLearningSaveBadge {
  display: inline-block;
  background: #d52b1e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 8px;
}

.curriculumTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #f1f6fb;
  border: none;
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 24px;
}
.curriculumTabs .nav-item {
  flex: 1 1 auto;
}
.curriculumTabs .curriculumTabLink {
  display: block;
  text-align: center;
  color: #124f6c;
  font-weight: 700;
  font-size: 0.85rem;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.curriculumTabs .curriculumTabLink:hover {
  background: rgba(5, 94, 161, 0.08);
}
.curriculumTabs .curriculumTabLink.active {
  color: #fff;
  background: linear-gradient(120deg, #055ea1, #022c4d);
  box-shadow: 0 4px 14px rgba(5, 94, 161, 0.25);
}
/* Module content is a full-width screenshot-style image with no other
   markup - give it a real card instead of floating bare on the section
   background. */
.curriculumTabCard {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(18, 79, 108, 0.08);
  padding: 20px;
}
/* .img-responsive only has rules for it under specific parent contexts
   (.perjob img.img-responsive, .still img.img-responsive, etc.) elsewhere
   in selflearning.css, none of which match here, so on this page it never
   gets a max-width - the module image rendered at its native pixel width
   and overflowed/got cut off past the column instead of scaling down. */
.cmsLegacyGrid img.img-responsive {
  max-width: 100%;
  height: auto;
}
/* Same story as .img-responsive: Bootstrap 3's .hidden-xs/-sm/-md/-lg
   (used here to swap a desktop vs. mobile version of the curriculum module
   image) aren't defined anywhere this page loads either, so without this
   both versions were showing stacked instead of one swapping for the
   other. Real Bootstrap 3 breakpoints, scoped to this legacy-content grid
   only. */
@media (max-width: 767px) {
  .cmsLegacyGrid .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .cmsLegacyGrid .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .cmsLegacyGrid .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
  .cmsLegacyGrid .hidden-lg { display: none !important; }
}

.selfLearningFaq .accordion-toggle,
.selfLearningFaq .accordion-header {
  cursor: pointer;
}


/* Featured self-learning courses grid (matches homenew.php's
   .trendingCourses card, just with two CTAs instead of one link). Whatever
   gives .trendingCourses its card look elsewhere isn't part of any
   stylesheet this page loads, so on its own the card rendered with no
   background/shadow/radius at all - flat, bare text and buttons floating on
   the section background. Its image also had no flex-shrink protection: as
   a flex column child sized to height:100% (matching whichever card in the
   row has the most text), the image was the only thing without a fixed
   size, so flexbox shrank it down to fit - one card's longer name/price
   pushed every image in that row down to ~70px tall and object-fit:fill
   stretched them into a squashed, distorted sliver instead of just
   cropping. */
.selfLearningCoursesSection .selfLearningCard {
  /* position:relative anchors .singlcours-hov (position:absolute) to this
     card - nothing sets that on the bare .trendingCourses class in any
     stylesheet this page loads (same reason it had no background/shadow of
     its own either), so without it the hover overlay would position itself
     against a distant ancestor instead of covering this card. */
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100% - 24px);
  margin-bottom: 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 8px 3px rgba(0, 0, 0, .12);
  padding: 12px;
  overflow: hidden;
}
.selfLearningCoursesSection .selfLearningCard > img {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1.63 / 1;
  object-fit: cover;
}
/* .trendingCoursesTxt no longer needs its own left/right inset - the card's
   own padding (matching homenew.php's .trendingCourses) already provides
   that on every side, image included; this only adds the top gap after the
   image and a little breathing room before the card's bottom edge. */
.selfLearningCoursesSection .trendingCoursesTxt {
  padding: 8px 0 4px;
  text-align: center;
}
@media (min-width: 1200px) and (max-width: 1499px) {
  .selfLearningCoursesSection .selfLearningCard { padding: 8px; }
  .selfLearningCoursesSection .IconCourses { width: 48px; height: 48px; margin: -31px auto 8px auto; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .selfLearningCoursesSection .selfLearningCard { padding: 6px; }
  .selfLearningCoursesSection .IconCourses { width: 48px; height: 48px; margin: -30px auto 8px auto; }
}
/* .bestPrice/.actualPrice/.offerPrice (course.min.css) are sized for a
   full course-detail pricing box (30px+) - same fix already applied
   locally on new_parent_page.php for this identical compact-card context,
   repeated here since that page-local style doesn't reach this shared
   component when it's included on other pages (e.g. self-learning-demo). */
.selfLearningCoursesSection .trendingCoursesTxt .bestPrice {
  font-size: 1.15rem;
  margin-bottom: 2px;
}
.selfLearningCoursesSection .trendingCoursesTxt .actualPrice {
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 0;
}
.selfLearningCoursesSection .trendingCoursesTxt .offerPrice {
  font-size: 0.85rem;
}
/* IconCourses (course logo badge) + singlcours-hov (hover-reveal overlay)
   match new_parent_page.php's identical .trendingCourses card exactly -
   neither has a definition in any stylesheet this page loads either (both
   are that page's own inline <style>, same story as everything else here). */
.selfLearningCoursesSection .IconCourses {
  width: 68px;
  height: 68px;
  background: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, .12);
  position: relative;
  border-radius: 50%;
  margin: -48px auto 8px auto;
  padding: 0 6px;
}
.selfLearningCoursesSection .singlcours-hov {
  position: absolute;
  top: 10%;
  left: 0;
  padding: 26px;
  background: linear-gradient(135deg, #136aab, rgb(98 67 153));
  height: 100%;
  width: 100%;
  opacity: 0;
  text-align: left;
  color: #fff;
  transition: all .5s, transform .5s;
}
.selfLearningCoursesSection .trendingCourses:hover .singlcours-hov {
  opacity: 1;
  top: 0;
}
.selfLearningCoursesSection .singlcours-hov .mob-compress {
  border-radius: 50%;
  width: 58px;
  height: 58px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 10px;
}
.selfLearningCoursesSection .singlcours-hov .btn-cour {
  border: 2px solid #f8bd00;
  border-radius: 30px;
  text-align: center;
  width: fit-content;
  padding: 6px 17px;
  font-size: .91rem;
  font-weight: 500;
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  .selfLearningHero {
    padding: 60px 0;
  }
}

/*
 * The admin-authored CMS body fields (s2f2, s3f3, s4f2, s5f1/2/5, s7f3,
 * s8f2, s9f2 - echoed raw in selflearning.php, each wrapped in
 * <div class="cmsLegacyGrid">) were written for the old demo2019 theme's
 * Bootstrap 3, whose .col-* grid is float-based and lays out side-by-side
 * even when a nested column group isn't wrapped in its own .row (s3f3's
 * 4-stat-box group inside col-lg-9 is like this). This page loads Bootstrap
 * 5 instead, whose .col-* is a flex item that only positions correctly
 * inside a `display:flex` .row - without one, each nested column just
 * stacks as a full-width block, ballooning the section's height. Rather
 * than editing 8+ CMS rows to add missing nested .row wrappers, restore
 * Bootstrap 3's float behavior for .col-* scoped to this wrapper only, so
 * both correctly- and incompletely-nested CMS content lay out the same way
 * it does on the old page.
 */
.cmsLegacyGrid [class*="col-"] {
  float: left;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
.cmsLegacyGrid::after,
.cmsLegacyGrid [class*="col-"]::after {
  content: "";
  display: table;
  clear: both;
}
/* col-xs-* is the mobile-first base (no media query, same as Bootstrap 3). */
.cmsLegacyGrid .col-xs-1 { width: 8.3333%; }
.cmsLegacyGrid .col-xs-2 { width: 16.6667%; }
.cmsLegacyGrid .col-xs-3 { width: 25%; }
.cmsLegacyGrid .col-xs-4 { width: 33.3333%; }
.cmsLegacyGrid .col-xs-5 { width: 41.6667%; }
.cmsLegacyGrid .col-xs-6 { width: 50%; }
.cmsLegacyGrid .col-xs-7 { width: 58.3333%; }
.cmsLegacyGrid .col-xs-8 { width: 66.6667%; }
.cmsLegacyGrid .col-xs-9 { width: 75%; }
.cmsLegacyGrid .col-xs-10 { width: 83.3333%; }
.cmsLegacyGrid .col-xs-11 { width: 91.6667%; }
.cmsLegacyGrid .col-xs-12 { width: 100%; }

/* Bootstrap 3's real breakpoints (not Bootstrap 5's, since this grid exists
   only to match how the CMS content's own col-sm/md/lg classes were
   authored to stack/unstack) - sm >=768px, md >=992px, lg >=1200px. Each
   tier only needs its own rules for widths actually used across the CMS
   fields (2,3,4,6,9,12), not the full 1-12 set. */
@media (min-width: 768px) {
  .cmsLegacyGrid .col-sm-2 { width: 16.6667%; }
  .cmsLegacyGrid .col-sm-3 { width: 25%; }
  .cmsLegacyGrid .col-sm-4 { width: 33.3333%; }
  .cmsLegacyGrid .col-sm-6 { width: 50%; }
  .cmsLegacyGrid .col-sm-9 { width: 75%; }
  .cmsLegacyGrid .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  .cmsLegacyGrid .col-md-2 { width: 16.6667%; }
  .cmsLegacyGrid .col-md-3 { width: 25%; }
  .cmsLegacyGrid .col-md-4 { width: 33.3333%; }
  .cmsLegacyGrid .col-md-6 { width: 50%; }
  .cmsLegacyGrid .col-md-9 { width: 75%; }
  .cmsLegacyGrid .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
  .cmsLegacyGrid .col-lg-2 { width: 16.6667%; }
  .cmsLegacyGrid .col-lg-3 { width: 25%; }
  .cmsLegacyGrid .col-lg-4 { width: 33.3333%; }
  .cmsLegacyGrid .col-lg-6 { width: 50%; }
  .cmsLegacyGrid .col-lg-9 { width: 75%; }
  .cmsLegacyGrid .col-lg-12 { width: 100%; }
}
@media screen and (max-width: 767px) {
  .cmsLegacyGrid [class*="col-"] { float: none; width: 100%; }
}

/* "Need Further Information? Just Write to Us" enquiry CTA - same design as
   aboutus.php's .enquiry-cta/.enquiry-form (copied here since that CSS lives
   only in aboutus.css, not a shared stylesheet). */
:root {
  --jb-yellow: #f8bd00;
  --jb-gradient: linear-gradient(135deg, #136aab, #624399);
}
.enquiry-cta {
  background: var(--jb-gradient);
  padding: 55px 0;
  color: #fff;
}
.enquiry-cta h2 {
  color: #fff;
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.enquiry-form .form-control {
  height: 46px;
  border-radius: 44px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 15px;
  box-shadow: none;
}
.enquiry-form .form-control::placeholder {
  color: rgba(255, 255, 255, .85);
}
.enquiry-form .form-control:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: none;
}
.enquiry-form button {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 44px;
  background: var(--jb-yellow);
  color: #000;
  font-size: 15px;
  font-weight: 700;
}
.enquiry-cta #sl-footer-msg .alert {
  display: block;
  width: 100%;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.enquiry-cta #sl-footer-msg .alert-success {
  background: #e9f8ef;
  color: #146c2e;
  border: 1px solid #bfe8cc;
}
.enquiry-cta #sl-footer-msg .alert-danger {
  background: #fdecec;
  color: #b42318;
  border: 1px solid #fac5c5;
}
@media (max-width: 767px) {
  .enquiry-cta h2 {
    font-size: 1.7rem;
    line-height: 2.1rem;
  }
}
@media (max-width: 575px) {
  .enquiry-cta h2 {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }
  .enquiry-form .form-control,
  .enquiry-form button {
    margin-bottom: 12px;
  }
}