/* =====================================================================
   Christ New Hope School - Custom Overrides
   Sits on top of templatemo-edu-meeting.css. Do not edit the theme
   file directly for these tweaks - keep them here so future updates
   are easy to find.
   ===================================================================== */

/* --- Header logo: circular seal image + school name text --- */
.header-area .main-nav .logo,
.background-header .main-nav .logo {
  display: flex;
  align-items: center;
  line-height: normal !important;
  height: 80px;
  text-transform: none;
  letter-spacing: 0;
}

.header-area .main-nav .logo img {
  height: 52px;
  width: 52px;
  min-width: 52px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo img {
  height: 44px;
  width: 44px;
  min-width: 44px;
}

.header-area .main-nav .logo .logo-text {
  font-size: 17px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  max-width: 200px;
}

@media screen and (max-width: 1200px) {
  .header-area .main-nav .logo .logo-text {
    font-size: 15px;
    max-width: 160px;
  }
}

@media screen and (max-width: 768px) {
  .header-area .main-nav .logo img {
    height: 38px;
    width: 38px;
    min-width: 38px;
  }
  .header-area .main-nav .logo .logo-text {
    font-size: 14px;
    max-width: 140px;
  }
}

/* --- Sub-header social icons: TikTok inline SVG to match Font Awesome sizing --- */
.sub-header .right-icons ul li a.tiktok-icon {
  display: inline-block;
}

.sub-header .right-icons ul li a.tiktok-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  vertical-align: -1px;
  position: relative;
  top: 1px;
}

/* --- Hero buttons sitting side by side --- */
.main-banner .caption .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

.main-banner .caption .hero-buttons .main-button-red,
.main-banner .caption .hero-buttons .main-button-yellow {
  margin-top: 0;
}

/* --- Small "sample" badge used for placeholder calendar/event content --- */
.sample-badge {
  display: inline-block;
  background-color: #f5a425;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.placeholder-note {
  background-color: #fff7e8;
  border: 1px dashed #f5a425;
  border-radius: 6px;
  padding: 15px 20px;
  color: #6b5218;
  font-size: 14px;
  margin-bottom: 30px;
}

/* --- Course / program cards: replacement for the removed star-rating + price row --- */
.our-courses .item .down-content .info span {
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* --- Admission / info cards used on Get Admission, Scholarship, Donation pages --- */
.info-card {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.08);
  padding: 35px 30px;
  margin-bottom: 30px;
  height: 100%;
}

.info-card h3, .info-card h4 {
  color: #1f272b;
  margin-bottom: 15px;
}

.info-card ul {
  padding-left: 18px;
  margin-bottom: 20px;
}

.info-card ul li {
  margin-bottom: 8px;
  color: #4d4d4d;
  font-size: 14px;
}

.contact-detail-list li {
  margin-bottom: 18px;
  list-style: none;
}

/* --- Phone/email links inside the homepage contact sidebar --- */
section.contact-us .right-info ul li span a {
  color: #fff;
  text-decoration: underline;
}

section.contact-us .right-info ul li span a:hover {
  color: #ffe1b3;
}

/* --- Footer contact line (address / email / phone) added under the copyright --- */
.footer p.footer-contact {
  text-transform: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10px;
}

.footer p.footer-contact a {
  color: #f5a425;
}

/* =====================================================================
   Home page content sections: Principal's Message, About Us, Partner CTA
   ===================================================================== */

/* The floating "services" cards used to sit directly above the events
   section (which had 230px top padding to clear them). Now the Principal
   section follows them, so it takes that clearance instead. */
section.upcoming-meetings {
  padding-top: 110px;
}

.cnh-section-title {
  text-align: center;
  margin-bottom: 50px;
}

.cnh-section-title .kicker {
  display: block;
  color: #f5a425;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.cnh-section-title h2 {
  color: #1f272b;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.cnh-section-title h2:after {
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  background-color: #a12c2f;
  margin: 18px auto 0;
  border-radius: 2px;
}

/* --- Message from the Principal --- */
section.principal-message {
  background-color: #fff;
  padding-top: 250px;
  padding-bottom: 90px;
}

section.principal-message .principal-card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
  border-top: 5px solid #a12c2f;
  padding: 40px 25px;
  text-align: center;
}

section.principal-message .principal-card img {
  width: 190px;
  max-width: 100%;
  margin-bottom: 25px;
}

section.principal-message .principal-card h4 {
  color: #1f272b;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

section.principal-message .principal-card span {
  display: block;
  color: #a12c2f;
  font-size: 14px;
  font-weight: 600;
}

section.principal-message .principal-letter {
  position: relative;
  padding-left: 35px;
  border-left: 4px solid #f5a425;
}

section.principal-message .principal-letter p {
  color: #4d4d4d;
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 18px;
}

section.principal-message .principal-letter p.greeting {
  color: #1f272b;
  font-weight: 700;
  font-size: 17px;
}

section.principal-message .principal-letter .signature {
  margin-top: 30px;
  margin-bottom: 0;
}

section.principal-message .principal-letter .signature strong {
  display: block;
  color: #a12c2f;
  font-size: 20px;
}

/* --- About Us --- */
section.about-us {
  background-color: #f7f7f7;
  padding: 90px 0px;
}

section.about-us .about-intro {
  max-width: 850px;
  margin: 0 auto 50px;
  text-align: center;
}

section.about-us .about-intro h3 {
  color: #a12c2f;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

section.about-us .about-intro .subtitle {
  display: block;
  color: #f5a425;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 25px;
}

section.about-us .about-intro p {
  color: #4d4d4d;
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 16px;
}

section.about-us .about-card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
  padding: 35px 30px;
  height: 100%;
  border-bottom: 5px solid #a12c2f;
}

section.about-us .about-card.gold {
  border-bottom-color: #f5a425;
}

section.about-us .about-card h4 {
  color: #1f272b;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
}

section.about-us .about-card p {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 14px;
}

section.about-us .about-card ul {
  padding-left: 0;
  margin-bottom: 0;
}

section.about-us .about-card ul li {
  list-style: none;
  color: #4d4d4d;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
}

section.about-us .about-card ul li:before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #a12c2f;
  font-weight: 700;
}

section.about-us .about-tagline {
  margin-top: 50px;
  text-align: center;
  color: #a12c2f;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* --- Partner With Our Vision --- */
section.partner-vision {
  background-color: #a12c2f;
  padding: 80px 0px;
  text-align: center;
}

section.partner-vision h2 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}

section.partner-vision p {
  color: #fff;
  font-size: 15px;
  line-height: 28px;
  max-width: 800px;
  margin: 0 auto 18px;
}

section.partner-vision .partner-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

@media (max-width: 992px) {
  section.principal-message {
    padding-top: 420px;
  }
  section.principal-message .principal-card {
    margin-bottom: 40px;
  }
  section.principal-message .principal-letter {
    padding-left: 20px;
  }
  .cnh-section-title h2,
  section.partner-vision h2 {
    font-size: 24px;
  }
  section.about-us .about-card {
    margin-bottom: 30px;
  }
}

section.partner-vision .partner-buttons .main-button-yellow a,
section.partner-vision .partner-buttons .btn-outline-white a {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 12px 25px;
  border-radius: 25px;
  letter-spacing: .5px;
  transition: all .3s;
}

section.partner-vision .partner-buttons .btn-outline-white a {
  color: #fff;
  border: 2px solid #fff;
  padding: 10px 25px;
}

section.partner-vision .partner-buttons .btn-outline-white a:hover {
  background-color: #fff;
  color: #a12c2f;
}

/* =====================================================================
   Fixes: contact details overflow, accordion text, mobile header
   ===================================================================== */

/* --- Contact sidebar: long email must stay inside the red box --- */
section.contact-us .right-info {
  overflow: hidden;
}

section.contact-us .right-info ul li {
  display: block;
  width: 100%;
}

section.contact-us .right-info ul li span {
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- Accordion (admission FAQ): always left-aligned, readable links --- */
.accordions .accordion-body .content {
  text-align: left;
}

.accordions .accordion-body .content p {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 26px;
  margin: 0;
}

.accordions .accordion-body .content p a {
  color: #a12c2f;
  font-weight: 600;
  text-decoration: underline;
}

.accordions .accordion-head {
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  padding-right: 10px;
}

.accordions .accordion-head .icon {
  margin-left: 12px;
}

/* --- Mobile header: logo + name sit at the left edge, text left-aligned --- */
@media (max-width: 767px) {
  .header-area {
    text-align: left;
    padding: 0px 15px;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo,
  .header-area .main-nav .logo {
    margin-left: 0;
    text-align: left;
    justify-content: flex-start;
    height: 100px;
    max-width: calc(100% - 70px);
  }

  .header-area .main-nav .logo .logo-text {
    text-align: left;
    max-width: none;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: .5px;
  }

  .header-area .main-nav .logo img {
    margin-right: 10px;
  }

  .header-area .main-nav .menu-trigger {
    right: 20px;
  }
}

/* Keep the email on a single line inside the red box */
section.contact-us .right-info ul li span a[href^="mailto"] {
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 400px) {
  section.contact-us .right-info ul li span a[href^="mailto"] {
    font-size: 13px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  section.contact-us .right-info {
    padding: 35px 28px;
  }
  section.contact-us .right-info ul li span a[href^="mailto"] {
    font-size: 13px;
  }
}

/* Bootstrap 5 also defines .accordion-body with padding, which leaks the
   collapsed text out of the template's height:0 accordion. Reset it. */
.accordions .accordion-body {
  padding: 0 !important;
}

.accordions .accordion-body .content {
  padding: 0 20px 20px 20px;
}

/* Keep the chevron vertically centred even when a question wraps to 2 lines */
.accordions .accordion-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordions .accordion-head .icon {
  float: none;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  section.contact-us .right-info ul li span a[href^="mailto"] {
    font-size: 15px;
  }
}

@media (max-width: 340px) {
  section.contact-us .right-info ul li span a[href^="mailto"] {
    font-size: 13px;
  }
}

@media (max-width: 340px) {
  section.contact-us .right-info ul li span a[href^="mailto"] {
    font-size: 12px;
  }
}

/* =====================================================================
   Inner pages: Our Vision, Support Our Vision, Our Programmes
   ===================================================================== */

/* Footer sits on the same dark background used elsewhere */
section.footer-band {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

section.footer-band .footer {
  margin-top: 0;
}

/* Principal section on an inner page has no floating cards above it */
section.principal-message.no-offset {
  padding-top: 90px;
}

/* Anchor targets shouldn't hide under the sticky header */
#school, #academy {
  scroll-margin-top: 110px;
}

/* --- WhatsApp button --- */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #25d366;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 14px 30px;
  border-radius: 30px;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all .3s;
  text-decoration: none !important;
}

.btn-whatsapp:hover {
  background-color: #1ebe5b;
  color: #fff;
  transform: translateY(-2px);
}

.btn-whatsapp i {
  font-size: 22px;
}

/* --- Our Goal band --- */
section.our-goal {
  background-color: #a12c2f;
  padding: 80px 0px;
  text-align: center;
}

section.our-goal h2 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}

section.our-goal p {
  color: #fff;
  font-size: 20px;
  line-height: 34px;
  font-weight: 500;
  max-width: 850px;
  margin: 0 auto;
}

section.our-goal .main-button-yellow {
  margin-top: 30px;
}

/* --- Support Our Vision page --- */
section.support-vision {
  background-color: #fff;
  padding: 90px 0px;
}

section.support-vision .support-text p {
  color: #4d4d4d;
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 18px;
}

section.support-vision .support-text p.lead {
  color: #1f272b;
  font-size: 22px;
  line-height: 36px;
  font-weight: 600;
  border-left: 4px solid #f5a425;
  padding-left: 22px;
  margin-bottom: 28px;
}

section.support-vision .wa-card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
  border-top: 5px solid #25d366;
  padding: 40px 30px;
  text-align: center;
}

section.support-vision .wa-card .wa-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  background-color: #e8fbef;
  color: #25d366;
  font-size: 44px;
  margin-bottom: 20px;
}

section.support-vision .wa-card h4 {
  color: #1f272b;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

section.support-vision .wa-card p {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 8px;
}

section.support-vision .wa-card .wa-person {
  color: #a12c2f;
  font-weight: 700;
  font-size: 16px;
  margin-top: 18px;
  margin-bottom: 2px;
}

section.support-vision .wa-card .wa-number {
  color: #1f272b;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 24px;
}

section.support-vision .help-cards {
  margin-top: 60px;
}

section.support-vision .help-card {
  background-color: #f7f7f7;
  border-radius: 20px;
  padding: 35px 30px;
  height: 100%;
  border-bottom: 5px solid #a12c2f;
}

section.support-vision .help-card.gold {
  border-bottom-color: #f5a425;
}

section.support-vision .help-card h4 {
  color: #1f272b;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
}

section.support-vision .help-card p {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 26px;
  margin: 0;
}

/* --- Our Programmes page --- */
section.programmes-intro {
  background-color: #fff;
  padding: 90px 0px 20px;
}

section.programmes-intro p {
  color: #4d4d4d;
  font-size: 15px;
  line-height: 28px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

section.programme-block {
  padding: 70px 0px;
  background-color: #fff;
}

section.programme-block.alt {
  background-color: #f7f7f7;
}

section.programme-block .programme-info {
  height: 100%;
  background-color: #a12c2f;
  color: #fff;
  border-radius: 20px;
  padding: 40px 35px;
}

section.programme-block .programme-info.gold-top {
  background-color: #1f272b;
}

section.programme-block .programme-info .tag {
  display: inline-block;
  background-color: #f5a425;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 15px;
}

section.programme-block .programme-info h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  margin-bottom: 15px;
}

section.programme-block .programme-info p {
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 18px;
}

section.programme-block .programme-info ul {
  padding-left: 0;
  margin: 0;
}

section.programme-block .programme-info ul li {
  list-style: none;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 8px;
  padding-left: 22px;
  position: relative;
}

section.programme-block .programme-info ul li:before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #f5a425;
  font-weight: 700;
}

section.programme-block .form-card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
  padding: 40px;
  height: 100%;
}

section.programme-block .form-card h4 {
  color: #1f272b;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
  padding-bottom: 18px;
  margin-bottom: 30px;
}

form.wa-form input,
form.wa-form select {
  width: 100%;
  height: 46px;
  border-radius: 23px;
  background-color: #f7f7f7;
  outline: none;
  border: 1px solid transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #4d4d4d;
  padding: 0px 18px;
  margin-bottom: 22px;
}

form.wa-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px;
}

form.wa-form input:focus,
form.wa-form select:focus {
  border-color: #a12c2f;
  background-color: #fff;
}

form.wa-form label {
  display: block;
  color: #1f272b;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
  padding-left: 6px;
}

form.wa-form .wa-note {
  color: #7a7a7a;
  font-size: 12px;
  line-height: 20px;
  margin-top: 16px;
  margin-bottom: 0;
}

form.wa-form .wa-status {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
}

form.wa-form .wa-status.error {
  color: #a12c2f;
}

form.wa-form .wa-status.ok {
  color: #1a9a4a;
}

@media (max-width: 992px) {
  section.programme-block .programme-info {
    margin-bottom: 30px;
    height: auto;
  }
  section.programme-block .form-card {
    padding: 30px 22px;
  }
  section.our-goal p {
    font-size: 17px;
    line-height: 30px;
  }
  section.support-vision .wa-card {
    margin-top: 40px;
  }
}

/* =====================================================================
   Desktop navigation: longer menu names must stay on ONE line beside
   the logo (not drop underneath it)
   ===================================================================== */
@media (min-width: 768px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-area .main-nav .nav li:last-child {
    padding-right: 0;
  }

  .header-area .main-nav .nav li.has-sub {
    padding-right: 16px;
  }

  .header-area .main-nav .nav li a {
    font-size: 13px;
    letter-spacing: .4px;
    white-space: nowrap;
  }

  .header-area .main-nav .logo .logo-text {
    font-size: 15px;
    letter-spacing: .5px;
    max-width: 135px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .header-area .main-nav .nav li {
    padding-left: 6px;
    padding-right: 6px;
  }

  .header-area .main-nav .nav li.has-sub {
    padding-right: 14px;
  }

  .header-area .main-nav .nav li a {
    font-size: 12px;
    letter-spacing: 0;
  }

  .header-area .main-nav .logo .logo-text {
    font-size: 13px;
    max-width: 110px;
  }

  .header-area .main-nav .logo img {
    height: 44px;
    width: 44px;
    min-width: 44px;
  }
}

/* =====================================================================
   Contact form feedback + Contact Us page
   ===================================================================== */
.contact-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-status {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.contact-status.ok {
  color: #1a9a4a;
}

.contact-status.error {
  color: #a12c2f;
}

section.contact-us #contact-form button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* On the dark home-page contact band, feedback must be readable */
section.contact-us .contact-status.ok { color: #1a9a4a; }
section.contact-us .contact-status.error { color: #a12c2f; }

/* --- Contact Us page --- */
section.contact-page {
  background-color: #fff;
  padding: 90px 0px 70px;
}

section.contact-page .contact-intro {
  max-width: 760px;
  margin: -20px auto 55px;
  text-align: center;
  color: #4d4d4d;
  font-size: 15px;
  line-height: 28px;
}

section.contact-page .info-tile {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.08);
  border-bottom: 5px solid #a12c2f;
  padding: 35px 20px;
  text-align: center;
  height: 100%;
  margin-bottom: 30px;
}

section.contact-page .info-tile.gold { border-bottom-color: #f5a425; }
section.contact-page .info-tile.green { border-bottom-color: #25d366; }

section.contact-page .info-tile .tile-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 50%;
  background-color: #f8e9ea;
  color: #a12c2f;
  font-size: 26px;
  margin-bottom: 18px;
}

section.contact-page .info-tile.gold .tile-icon { background-color: #fdf1dc; color: #f5a425; }
section.contact-page .info-tile.green .tile-icon { background-color: #e8fbef; color: #25d366; }

section.contact-page .info-tile h4 {
  color: #1f272b;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

section.contact-page .info-tile p,
section.contact-page .info-tile a.tile-link {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  word-break: break-word;
}

section.contact-page .info-tile a.tile-link {
  display: block;
  font-weight: 600;
  color: #1f272b;
}

section.contact-page .info-tile a.tile-link:hover { color: #a12c2f; }

section.contact-page .message-card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
  padding: 40px;
  height: 100%;
}

section.contact-page .message-card h3 {
  color: #1f272b;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
  padding-bottom: 18px;
  margin-bottom: 28px;
}

section.contact-page form.contact-ajax input[type="text"],
section.contact-page form.contact-ajax input[type="email"] {
  width: 100%;
  height: 46px;
  border-radius: 23px;
  background-color: #f7f7f7;
  border: 1px solid transparent;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  color: #4d4d4d;
  padding: 0px 18px;
  margin-bottom: 20px;
}

section.contact-page form.contact-ajax textarea {
  width: 100%;
  min-height: 150px;
  border-radius: 20px;
  background-color: #f7f7f7;
  border: 1px solid transparent;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  color: #4d4d4d;
  padding: 15px 18px;
  margin-bottom: 20px;
  resize: vertical;
}

section.contact-page form.contact-ajax input:focus,
section.contact-page form.contact-ajax textarea:focus {
  border-color: #a12c2f;
  background-color: #fff;
}

section.contact-page form.contact-ajax button.send-btn {
  background-color: #a12c2f;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 14px 32px;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all .3s;
}

section.contact-page form.contact-ajax button.send-btn:hover { background-color: #f5a425; }
section.contact-page form.contact-ajax button.send-btn:disabled { opacity: .6; cursor: not-allowed; }

section.contact-page .side-card {
  background-color: #a12c2f;
  border-radius: 20px;
  padding: 40px 35px;
  height: 100%;
  text-align: center;
}

section.contact-page .side-card h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}

section.contact-page .side-card p {
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 20px;
}

section.contact-page .side-card .social-row {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

section.contact-page .side-card .social-row h5 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

section.contact-page .side-card .social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #fff;
  color: #a12c2f;
  font-size: 18px;
  margin: 0 5px;
  transition: all .3s;
}

section.contact-page .side-card .social-row a:hover {
  background-color: #f5a425;
  color: #fff;
}

section.contact-page .side-card .social-row a svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

section.contact-map {
  background-color: #f7f7f7;
  padding: 70px 0px 90px;
}

section.contact-map .map-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
  line-height: 0;
}

section.contact-map iframe {
  width: 100%;
  height: 400px;
  border: 0;
}

@media (max-width: 992px) {
  section.contact-page .message-card { padding: 30px 22px; margin-bottom: 30px; height: auto; }
  section.contact-page .side-card { height: auto; }
  section.contact-map iframe { height: 320px; }
}

/* Contact page polish */
section.contact-page .info-tile {
  height: calc(100% - 30px);
}

section.contact-page .info-tile a.tile-link[href^="mailto"] {
  font-size: 13px;
  word-break: normal;
  overflow-wrap: anywhere;
}

section.contact-page .side-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 992px) and (max-width: 1199px) {
  section.contact-page .info-tile a.tile-link[href^="mailto"] {
    font-size: 12px;
  }
}

section.contact-page .info-tile a.tile-link[href^="mailto"] {
  overflow-wrap: normal;
  word-break: normal;
}