#content.terms-body p,
#content.terms-body li {
  font-size: 18px !important;
  line-height: 1.8 !important;
  margin-bottom: 16px !important;
  color: #333333 !important;
}

#content.terms-body .container .row .col-md-12 > div > p:first-of-type,
#content.terms-body .container .row .col-md-12 > div > p:not(:first-of-type) {
  font-size: 18px !important;
}

#content.terms-body ul,
#content.terms-body ol {
  margin-left: 1.25rem !important;
}

#content.terms-body li strong {
  font-size: inherit !important;
}

#content.terms-body h2,
#content.terms-body h3 {
  font-size: 26px !important;
  font-weight: 700 !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
  color: #0c359c !important;
}
# terms-and-conditions : ensure consistent typography
# terms-and-conditions h2, #terms-and-conditions h3 { font-size adjustments }
# terms-and-conditions p { baseline font-size }
/* CoastResusGroup Custom Color Palette */
:root {
  --primary-white: #fffffe;
  --primary-black: #000000;
  --accent-cyan: #00edf9;
  --primary-blue: #0c359c;
  --accent-orange: #e76a1e;
}

/* Make page titles bolder yet compact */
#heading-breadcrumbs h1 {
  font-size: 36px !important; /* 60% of previous 60px */
  color: #ffffff !important; /* White text */
  text-shadow: 2px 2px 3px rgba(51, 51, 51, 0.7) !important; /* Slightly transparent grey drop shadow with slight blur */
}

/* Heading breadcrumbs with image layout - Override theme's texture-green.png */
#heading-breadcrumbs,
body #heading-breadcrumbs,
html body #heading-breadcrumbs {
  position: relative;
  overflow: visible;
  background: url('../img/new_texture.jpg') center center repeat !important;
  background-image: url('../img/new_texture.jpg') !important;
  padding: 20px 0;
  margin-bottom: 40px;
}

/* Store original background for blur effect */
#heading-breadcrumbs {
  background-attachment: scroll;
}

#heading-breadcrumbs .container {
  position: relative;
}

.heading-breadcrumbs-content {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
}

.heading-breadcrumbs-image {
  flex: 0 0 auto;
  max-width: 400px;
  margin-left: auto;
  position: relative;
  padding: 20px 30px 20px 30px;
  background: var(--primary-white);
  border-radius: 10px 0 0 10px;
  z-index: 1;
}

.heading-breadcrumbs-image::before {
  content: '';
  position: absolute;
  left: 0;
  right: -100vw;
  top: 0;
  bottom: 0;
  background: var(--primary-white);
  border-radius: 10px 0 0 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: -1;
}

.heading-breadcrumbs-image img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .heading-breadcrumbs-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .heading-breadcrumbs-image {
    max-width: 100%;
    margin-left: 0;
    padding: 20px;
    border-radius: 10px;
  }
  
  .heading-breadcrumbs-image::after {
    display: none;
  }
  
  /* Remove blur from banner images on mobile - only homepage carousel should have blur */
  #heading-breadcrumbs {
    position: relative;
    filter: none !important;
    -webkit-filter: none !important;
  }
  
  #heading-breadcrumbs .container {
    filter: none !important;
    -webkit-filter: none !important;
    position: relative;
    z-index: 1;
  }
  
  #heading-breadcrumbs .heading-breadcrumbs-content,
  #heading-breadcrumbs h1,
  #heading-breadcrumbs .heading-breadcrumbs-image {
    filter: none !important;
    -webkit-filter: none !important;
    position: relative;
    z-index: 2;
  }
  
  .heading-breadcrumbs-image img {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* FAQs page text sizing */
/* First paragraph (intro) on FAQs page - 20px */
#content .container .row .col-md-12 > div > p:first-of-type {
  font-size: 20px !important;
}

/* All other paragraphs on FAQs page - 16px */
#content .container .row .col-md-12 > div > p:not(:first-of-type) {
  font-size: 16px !important;
}

/* Fix dropdown menu items with URLs to be clickable */
.navbar-nav .dropdown > a[href]:not([href="#"]):not(.dropdown-toggle) {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
}

.navbar-nav .dropdown > a.dropdown-toggle {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 10003 !important; /* Very high to ensure clicks work */
}

/* Make team member photos 3x bigger on the about page with text wrapping */
.testimonials .item .testimonial {
  overflow: visible !important;
  padding: 20px !important;
}

.testimonials .item .testimonial .text {
  overflow: visible !important;
  margin-bottom: 20px !important;
}

/* Position name and image in text area for wrapping */
.testimonials .item .testimonial .text .name-picture {
  overflow: visible !important;
  padding: 0 0 15px 0 !important;
  margin: 0 0 15px 0 !important;
  min-height: auto !important;
  text-align: left !important;
  float: left !important;
  width: 200px !important;
  margin-right: 20px !important;
}

.testimonials .item .testimonial .text .name-picture img {
  width: 180px !important; /* 60px * 3 = 180px */
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 90px !important; /* 30px * 3 = 90px */
  float: none !important;
  margin: 0 0 10px 0 !important;
  display: block !important;
}

.testimonials .item .testimonial .text .name-picture h5 {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
  clear: both !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.testimonials .item .testimonial .text .name-picture p {
  margin-bottom: 0 !important;
  clear: both !important;
  font-size: 13px !important;
  color: #999 !important;
}

/* About page sections - left aligned */
#content h2 {
  text-align: left !important;
  margin-top: 40px !important;
  margin-bottom: 20px !important;
}

#content h2:first-of-type {
  margin-top: 20px !important;
}

/* Add padding below About Us section */
#content h2 + div[style*="display: flex"] {
  padding-bottom: 50px !important;
  margin-bottom: 30px !important;
}

/* Reduce padding around Our Team section */
.bar.no-mb h2 {
  margin-top: 20px !important;
  margin-bottom: 15px !important;
}

/* Reduce padding in the team section bar */
.bar.no-mb {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* About page paragraphs - ensure proper display */
#content p {
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin-bottom: 15px !important;
  display: block !important;
}

#content div p {
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin-bottom: 15px !important;
  display: block !important;
}

/* Course page - override #content p for course subtitle and info cards */
/* Must come AFTER #content p rules and have equal or higher specificity */
#content .course-subtitle,
.course-hero .course-subtitle,
.course-hero-content .course-subtitle,
#content .course-hero .course-subtitle,
#content .course-hero-content .course-subtitle {
  text-align: center !important;
}

#content .info-card p,
#content .course-info-grid .info-card p,
#content .course-info-grid .info-card p,
.course-info-grid .info-card p {
  text-align: center !important;
}

/* About page tagline quote styling - match h2 font size exactly (30px) */
/* Must come AFTER #content p rules to override them */
#content .container .row .col-md-12 > div > p.tagline {
  text-align: center !important;
  font-size: 30px !important; /* Match h2 heading size exactly */
  font-weight: 900 !important; /* Match h2 font-weight */
  color: #e76a1e !important;
  margin: 20px 0 40px 0 !important;
  line-height: 1.1 !important;
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

/* Make bio text wrap around the image - restore original simple formatting */
/* Override general paragraph rules - must match or exceed #content p specificity */
#content .testimonials .item .testimonial .text > p,
.bar .testimonials .item .testimonial .text > p,
section.bar .testimonials .item .testimonial .text > p,
.bar.no-mb .testimonials .item .testimonial .text > p,
section.bar.no-mb .testimonials .item .testimonial .text > p {
  margin-top: 0 !important;
  text-align: left !important;
  /* Override general #content p rules to restore original bio appearance */
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
  color: #666666 !important;
}

#content ul {
  text-align: left !important;
  margin-left: 20px !important;
  margin-bottom: 20px !important;
}

#content li {
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin-bottom: 8px !important;
}

/* Add grey background to team section (full width) */
.bar.no-mb {
  background: #eeeeee !important;
  background-image: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 60px 0 !important;
}

/* Constrain the container inside to 75% width */
.bar.no-mb .container {
  width: 75% !important;
    max-width: 70% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Override Hugo Universal theme colors */
/* Primary color overrides */
.bg-primary {
  background-color: var(--primary-blue) !important;
}

.text-primary {
  color: var(--primary-blue) !important;
}

/* Header and navigation */
.navbar-default {
  background-color: var(--primary-white) !important;
  border-color: var(--accent-cyan) !important;
}

.navbar-default .navbar-nav > li > a {
  color: var(--primary-black) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--primary-white) !important;
  background-color: var(--primary-blue) !important;
}

/* Remove underlines from navigation links */
.navbar ul.nav > li > a {
  text-decoration: none !important;
}

/* Ensure all navigation links (including simple menu items without dropdowns) have consistent styling */
.navbar-nav > li.dropdown > a:not(.dropdown-toggle) {
  display: inline-block !important;
  padding-top: 21px !important;
  padding-bottom: 21px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  vertical-align: top !important;
}

/* Fix dropdown toggle button alignment and padding to match other buttons */
.navbar-nav > li.dropdown > a.dropdown-toggle {
  display: inline-block !important;
  padding-top: 21px !important;
  padding-bottom: 21px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  vertical-align: top !important;
}

/* Active/selected navigation item styling */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--primary-white) !important;
  background-color: var(--primary-blue) !important;
}

/* Logo and branding */
.navbar-brand {
  color: var(--primary-blue) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-orange) !important;
  border-color: var(--accent-orange) !important;
}

.btn-default {
  background-color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--primary-black) !important;
}

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

/* Links */
a {
  color: var(--primary-blue) !important;
}

a:hover,
a:focus {
  color: var(--accent-orange) !important;
}

/* Hero section and carousel */
.carousel-caption {
  background-color: rgba(12, 53, 156, 0.8) !important;
}

/* Features section */
.features-bar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.features .feature-box {
  border-color: var(--accent-cyan) !important;
}

.features .feature-box:hover {
  background-color: var(--accent-cyan) !important;
  color: var(--primary-black) !important;
}

/* Testimonials */
.testimonial {
  background-color: var(--primary-white) !important;
  border-color: var(--accent-cyan) !important;
}

/* Footer */
.footer {
  background-color: var(--primary-black) !important;
  color: var(--primary-white) !important;
}

.footer a {
  color: var(--accent-cyan) !important;
}

.footer a:hover {
  color: var(--accent-orange) !important;
}

/* Copyright section links - bold white */
#copyright a {
  color: #fff !important;
  font-weight: bold !important;
}

#copyright a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* Coming Soon overlay for TNCC page */
#content.content-with-overlay {
  position: relative;
}

.coming-soon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Grey semi-transparent */
  z-index: 999999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 50px;
  pointer-events: auto;
}

.coming-soon-content {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 60px 100px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.coming-soon-content h2 {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Top bar */
.top-bar {
  background-color: var(--primary-blue) !important;
  color: var(--primary-white) !important;
}

.top-bar a {
  color: var(--primary-white) !important;
}

.top-bar a:hover {
  color: var(--accent-cyan) !important;
}

/* Blog and content */
.post-title a {
  color: var(--primary-blue) !important;
}

.post-title a:hover {
  color: var(--accent-orange) !important;
}

/* Contact form */
.form-control:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 237, 249, 0.25) !important;
}

/* Sidebar widgets */
.widget {
  border-color: var(--accent-cyan) !important;
}

.widget-title {
  color: var(--primary-blue) !important;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
  color: var(--primary-blue) !important;
  border-color: var(--accent-cyan) !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background-color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--primary-black) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
}

/* Tags and categories */
.tag,
.category {
  background-color: var(--accent-cyan) !important;
  color: var(--primary-black) !important;
}

.tag:hover,
.category:hover {
  background-color: var(--accent-orange) !important;
  color: var(--primary-white) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: var(--primary-white) !important;
}

.breadcrumb > li + li:before {
  color: var(--primary-blue) !important;
}

/* Alert boxes */
.alert-info {
  background-color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--primary-black) !important;
}

.alert-warning {
  background-color: var(--accent-orange) !important;
  border-color: var(--accent-orange) !important;
  color: var(--primary-white) !important;
}

/* Tables */
.table > thead > tr > th {
  background-color: var(--primary-blue) !important;
  color: var(--primary-white) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 237, 249, 0.1) !important;
}

/* Code blocks */
pre {
  background-color: var(--primary-black) !important;
  color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
}

code {
  background-color: rgba(0, 237, 249, 0.1) !important;
  color: var(--primary-blue) !important;
}

/* Blockquotes */
blockquote {
  border-left-color: var(--accent-orange) !important;
  background-color: rgba(231, 106, 30, 0.1) !important;
}

/* Custom accent elements */
.accent-cyan {
  color: var(--accent-cyan) !important;
}

.accent-orange {
  color: var(--accent-orange) !important;
}

.bg-accent-cyan {
  background-color: var(--accent-cyan) !important;
}

.bg-accent-orange {
  background-color: var(--accent-orange) !important;
}

/* Logo Overlap Effect - 4x larger and positioned to overlap menu and content */
.navbar-brand {
  position: relative !important;
  z-index: 9999 !important;
}

/* Ensure dropdown menus work on homepage - fix z-index */
.navbar .dropdown-menu {
  z-index: 999999 !important; /* Extremely high to appear above carousel images */
  position: absolute !important;
}

/* Override absolute positioning on mobile - use static to push down items */
@media (max-width: 768px) {
  .navbar-collapse .navbar-nav > li.dropdown .dropdown-menu,
  .navbar-collapse .dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
}

.navbar .dropdown {
  position: relative !important;
  z-index: 999998 !important; /* Very high to ensure clicks work */
}

.navbar .dropdown-toggle {
  z-index: 999999 !important; /* Highest - ensure toggle is always clickable */
  pointer-events: auto !important;
  position: relative !important;
}

/* Override theme logo sizing with maximum specificity */
.navbar .navbar-brand img,
.navbar-default .navbar-brand img,
.navbar-header .navbar-brand img,
.navbar-brand img,
.navbar .navbar-brand img.hidden-xs,
.navbar .navbar-brand img.hidden-sm,
.navbar .navbar-brand img.visible-xs,
.navbar .navbar-brand img.visible-sm,
body .navbar .navbar-brand img,
html body .navbar .navbar-brand img,
.navbar-brand img[src*="logo.png"],
.navbar-brand img[src*="logo-small.png"] {
  max-height: 200px !important; /* Between 150px and 300px */
  height: 200px !important;
  width: auto !important;
  position: relative !important;
  top: 0px !important;
  left: 0 !important;
  z-index: 10000 !important;
  transform: none !important;
  transition: all 0.3s ease !important;
}

/* Force override with even more specific selectors */
body .navbar .navbar-brand img,
body .navbar-default .navbar-brand img,
body .navbar-header .navbar-brand img,
img[src="/img/logo.png"],
img[src="/img/logo-small.png"] {
  max-height: 200px !important;
  height: 200px !important;
  width: auto !important;
}

/* Nuclear option - target any img in navbar-brand */
html body .navbar .navbar-brand img,
html body .navbar-default .navbar-brand img,
html body .navbar-header .navbar-brand img {
  max-height: 200px !important;
  height: 200px !important;
  width: auto !important;
  min-height: 200px !important;
}

/* Force the large logo to be used on all screen sizes */
.navbar-brand img.visible-xs,
.navbar-brand img.visible-sm {
  display: none !important;
}

.navbar-brand img.hidden-xs,
.navbar-brand img.hidden-sm {
  display: block !important;
}

/* Final attempt - use CSS transform to force size */
.navbar-brand img {
  transform: scale(4.76) !important; /* 200px / 42px = 4.76 */
  transform-origin: top left !important;
  position: relative !important;
  z-index: 10000 !important;
  margin-top: -50px !important; /* Move logo up to be visible */
}

/* Remove blue overlay from carousel background */
.home-carousel .dark-mask {
  display: none !important;
}

/* Ensure carousel sections have lower z-index than navbar on mobile */
@media (max-width: 768px) {
  /* Ensure header/navbar is above everything */
  header,
  header.navbar-affixed-top,
  header > .navbar,
  .navbar-affixed-top {
    position: relative !important;
    z-index: 99999 !important;
  }
  
  /* Ensure navbar elements are above carousel */
  .navbar,
  .navbar-default,
  .navbar .container,
  .navbar-header,
  .navbar-brand,
  .navbar-brand img {
    position: relative !important;
    z-index: 99999 !important;
  }
  
  /* Keep carousel sections below navbar */
  section.bar,
  .home-carousel,
  .home-carousel .container,
  section {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Alternative: Make overlay transparent instead of hiding it */
/* .home-carousel .dark-mask {
  opacity: 0 !important;
  background: transparent !important;
} */

/* Scale photogrid background to window width and show full height */
.home-carousel {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center -12vh !important;
  min-height: 80vh !important;
  position: relative !important;
  z-index: 1 !important; /* Lower than navbar to ensure navbar dropdown appears above */
  overflow: hidden !important; /* Hide overflow */
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Carousel Learn More Button */
.carousel-button-wrapper {
  margin-top: 25px;
}

.carousel-learn-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 35px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 2px solid transparent;
  color: #ffffff !important;
  white-space: nowrap;
}

.carousel-learn-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  opacity: 0.9;
  color: #ffffff !important;
}

/* Carousel button + logo presentation */
/* Limit white pill to 50% of carousel component width (.carousel-item-content) */
/* Since carousel-text-col is ~70% of carousel-item-content, 50% of item-content = ~71.4% of text-col */
.home-carousel .carousel-item-content .carousel-button-logo-wrapper {
  background: #ffffff;
  border-radius: 8px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  float: none;
  clear: none;
  text-align: left;
  padding: 0;
  box-sizing: border-box;
  align-items: flex-start;
  overflow: hidden;
  width: 71.4% !important;
  max-width: 71.4% !important;
  min-width: 0 !important;
  margin-left: 0;
  margin-right: auto;
}

/* Override JavaScript width setting */
.home-carousel .carousel-button-logo-wrapper[style*="width"] {
  width: 71.4% !important;
  max-width: 71.4% !important;
}

.home-carousel .carousel-button-wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

.home-carousel .carousel-button-wrapper .carousel-learn-more-btn {
  border-radius: 8px 8px 0 0;
  width: 100%;
  margin: 0;
}

.home-carousel .carousel-logo {
  width: 100%;
  padding: 12px 10px 14px;
  text-align: center;
  box-sizing: border-box;
}

/* Scale logo image proportionally within the 50% width constraint */
.home-carousel .carousel-logo img {
  width: 80% !important;
  max-width: 80% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Scale carousel images to 2/3 of window height */
.home-carousel .owl-carousel .item img {
  max-height: 66.67vh !important; /* 2/3 of 100vh = 66.67vh */
  width: auto !important;
  object-fit: contain !important;
}

.home-carousel .owl-carousel .item {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Carousel layout adjustments */
.home-carousel .container {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.home-carousel-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.home-carousel-layout > div {
  margin-bottom: 20px;
}

.carousel-item-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 66.67vh;
}

.carousel-item-row {
  margin: 0 !important;
  align-items: center !important;
}

.carousel-text-col {
  position: relative;
  z-index: 2;
  padding: 20px 25px;
  max-width: 70%;
  text-align: left;
}

.carousel-text-col > * {
  text-align: left;
}

.carousel-image-col {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 1;
  pointer-events: none;
  padding-right: 0;
}

.carousel-image-wrapper {
  width: auto;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0;
  max-width: 100%;
}

.carousel-image-wrapper img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.35));
  display: block;
}

/* Left-justify button and logo */
.carousel-button-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  justify-content: flex-start;
  margin-top: 20px;
  width: auto;
}

.carousel-button-wrapper {
  width: 100%;
}

.carousel-logo {
  width: 100%;
}

/* Ensure carousel images stay within left 50% of page */
.home-carousel-layout > .col-md-6:first-child {
  overflow: visible;
  position: relative;
}

.carousel-widget-side {
  display: flex;
  align-items: stretch;
  padding-bottom: 25px;
}

.carousel-widget-container {
  width: 100%;
  max-height: 66.67vh; /* Match carousel image height */
  height: 66.67vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  padding: 10px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Bookeo widget wrapper - makes content scrollable */
.bookeo-widget-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* Make Bookeo widget iframe constrained and scrollable */
.bookeo-widget-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border: none !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Target any Bookeo-injected content */
.bookeo-widget-wrapper [id*="bookeo"],
.bookeo-widget-wrapper [class*="bookeo"],
.bookeo-widget-wrapper > div {
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Try to reduce font sizes in Bookeo widget if possible (may not work with iframe) */
.bookeo-widget-wrapper * {
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.bookeo-widget-wrapper h1,
.bookeo-widget-wrapper h2,
.bookeo-widget-wrapper h3,
.bookeo-widget-wrapper h4 {
  font-size: 13px !important;
  margin: 8px 0 !important;
}

.bookeo-widget-wrapper button,
.bookeo-widget-wrapper .btn,
.bookeo-widget-wrapper input,
.bookeo-widget-wrapper select {
  font-size: 11px !important;
  padding: 5px 10px !important;
  margin: 3px !important;
}

.bookeo-widget-wrapper table {
  font-size: 10px !important;
}

.bookeo-widget-wrapper td,
.bookeo-widget-wrapper th {
  padding: 4px !important;
}

.carousel-widget-container .calendly-inline-widget {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .home-carousel-layout {
    flex-direction: column;
  }
  .carousel-widget-side,
  .home-carousel-layout > div {
    margin-bottom: 30px;
  }
  .carousel-widget-side {
    padding-bottom: 15px;
  }
  .carousel-widget-container {
    max-height: 50vh;
    height: 50vh;
  }
  .carousel-image-wrapper {
    min-height: 260px;
  }
}

/* Hide carousel on small screens (phones and small tablets) */
/* Show booking widget full width instead */
@media (max-width: 768px) {
  /* Hide the carousel column completely - use very specific selectors */
  section .home-carousel .home-carousel-layout > div.col-md-6:first-child,
  section .home-carousel .home-carousel-layout > div.col-sm-12:first-child,
  .home-carousel .home-carousel-layout > .col-md-6:first-child,
  .home-carousel .home-carousel-layout > .col-sm-12:first-child {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Hide carousel elements directly */
  .home-carousel .homepage.owl-carousel,
  .home-carousel .owl-carousel,
  .home-carousel .owl-stage-outer,
  .home-carousel .owl-stage {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Make booking widget full width - override Bootstrap classes */
  .home-carousel .carousel-widget-side.col-md-6,
  .home-carousel .carousel-widget-side.col-sm-12,
  section .home-carousel .carousel-widget-side {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Adjust widget container for full width and center it */
  .home-carousel .carousel-widget-container {
    max-height: 70vh !important;
    height: 70vh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Ensure the row doesn't create extra space and center content */
  .home-carousel .home-carousel-layout {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Adjust container padding for mobile and center */
  .home-carousel .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Move carousel navigation elements up to be visible under carousel images */
.home-carousel .owl-theme .owl-controls {
  position: absolute !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 10 !important;
}

.home-carousel .owl-theme .owl-controls .owl-page {
  margin: 0 6px !important;
}

.home-carousel .homepage {
  padding-top: 0 !important;
  margin-top: -22px !important;
}

/* Remove gradient background since logo is now within navbar */

/* Ensure navbar and content maintain their original layout */
.navbar,
.navbar-default,
.navbar-header,
.navbar-affixed-top,
.affix {
  position: relative !important; /* Relative so z-index works - this was the issue! */
  z-index: 10000 !important; /* High z-index to ensure navbar is above carousel */
  height: 120px !important; /* More appropriate height for the logo */
  min-height: 120px !important;
}

/* Override min-height on mobile */
@media (max-width: 768px) {
  .navbar-header,
  .navbar-affixed-top,
  .affix,
  header.navbar-affixed-top,
  header {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Override navbar height on mobile - moved to main mobile query */

/* Position navbar buttons at the bottom of the navbar */
.navbar-nav {
  position: absolute !important;
  bottom: 0 !important; /* Position at bottom of navbar */
  right: 0 !important; /* Position at right side */
  height: auto !important; /* Let buttons determine their own height */
  margin: 0 !important;
  z-index: 10001 !important; /* Ensure nav items are above navbar */
}

/* Override navbar-nav positioning on mobile - make it relative so it flows below button */
@media (max-width: 768px) {
  .navbar-collapse .navbar-nav,
  .navbar-nav {
    position: relative !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    margin-left: auto !important;
    text-align: right !important;
  }
}

.navbar-nav > li > a {
  /* Restore original button dimensions */
  padding-top: 21px !important; /* Original desktop padding */
  padding-bottom: 21px !important; /* Original desktop padding */
  padding-left: 15px !important;
  padding-right: 15px !important;
  line-height: 20px !important; /* Original line height */
}

/* Ensure content sections maintain their original positioning */
#all,
section,
.container,
.jumbotron {
  position: relative !important;
  z-index: 1 !important;
}

/* Carousel should be below navbar - ensure it doesn't cover dropdown */
.carousel,
.home-carousel,
.owl-carousel,
.owl-stage-outer,
.owl-stage,
.owl-item,
.owl-item img,
.home-carousel .owl-carousel .item,
.home-carousel .owl-carousel .item img {
  position: relative !important;
  z-index: 1 !important;
}

/* See More section button styling - Override all states */
.bar.background-image-fixed-2 .btn-template-transparent-black,
.bar.background-image-fixed-2 .btn-template-transparent-black:active,
.bar.background-image-fixed-2 .btn-template-transparent-black.active,
.bar.background-image-fixed-2 .btn-template-transparent-black:focus,
.bar.background-image-fixed-2 .btn-template-transparent-black:hover,
.bar.background-image-fixed-2 .btn-template-transparent-black:visited,
.bar.background-image-fixed-2 .btn-template-transparent-black:link,
.bar.background-image-fixed-2 .btn.btn-template-transparent-black,
.bar.background-image-fixed-2 .btn.btn-template-transparent-black:hover,
.bar.background-image-fixed-2 .btn.btn-template-transparent-black:focus,
.bar.background-image-fixed-2 .btn.btn-template-transparent-black:active,
.bar.background-image-fixed-2 .btn.btn-template-transparent-black.btn-lg,
.bar.background-image-fixed-2 .btn.btn-template-transparent-black.btn-lg:hover,
.bar.background-image-fixed-2 .btn.btn-template-transparent-black.btn-lg:focus,
.bar.background-image-fixed-2 .btn.btn-template-transparent-black.btn-lg:active,
section.bar.background-image-fixed-2 .btn-template-transparent-black,
section.bar.background-image-fixed-2 .btn-template-transparent-black:hover,
section.bar.background-image-fixed-2 .btn-template-transparent-black:focus,
section.bar.background-image-fixed-2 .btn-template-transparent-black:active {
  background-color: #e76a1e !important;
  background: #e76a1e !important;
  color: #ffffff !important;
  border: 2px solid #e76a1e !important;
  border-color: #e76a1e !important;
  background-image: none !important;
}

/* Override disabled states too */
.see-more .btn-template-transparent-black.disabled,
.see-more .btn-template-transparent-black[disabled],
.see-more .btn-template-transparent-black.disabled:hover,
.see-more .btn-template-transparent-black[disabled]:hover,
.see-more .btn-template-transparent-black.disabled:focus,
.see-more .btn-template-transparent-black[disabled]:focus,
.see-more .btn-template-transparent-black.disabled:active,
.see-more .btn-template-transparent-black[disabled]:active {
  background-color: var(--primary-white) !important;
  color: var(--primary-black) !important;
  border: 2px solid var(--primary-black) !important;
  background-image: none !important;
}

/* Mobile responsive adjustments for logo */
/* Use both max-width and screen to ensure it applies */
@media screen and (max-width: 768px) {
  /* Prevent horizontal scroll on mobile */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  #all {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  /* Remove padding from header wrapper and body - use -15px negative margin */
  header.navbar-affixed-top,
  header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 99999 !important;
  }
  
  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  #all {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Remove any banner padding */
  banner {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Target the navbar wrapper directly - use -15px negative margin */
  header > .navbar,
  header.navbar-affixed-top > .navbar,
  .navbar-affixed-top .navbar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  /* Remove navbar container padding - use -15px negative margin */
  header .navbar .container,
  .navbar .container {
    margin-top: -15px !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .navbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Remove ALL top padding/margin from navbar to push logo to top */
  header.navbar-affixed-top,
  .navbar,
  .navbar-default,
  .navbar-affixed-top,
  .affix {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    border-top: none !important;
    position: relative !important;
    z-index: 10000 !important;
  }
  
  /* Ensure navbar container also has high z-index */
  .navbar .container {
    position: relative !important;
    z-index: 10001 !important;
  }
  
  /* Override navbar-brand height on mobile */
  .navbar-brand {
    height: auto !important;
    min-height: 0 !important;
    max-height: 150px !important;
    z-index: 10002 !important;
    position: relative !important;
  }
  
  /* Remove Bootstrap default navbar padding and borders */
  .navbar-default {
    border: none !important;
  }
  
  /* Remove ALL padding from navbar container */
  .navbar .container,
  .navbar .container-fluid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Reduce navbar padding on mobile */
  .navbar,
  .navbar-default {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Navbar header with logo on left, button on right - scaled for mobile */
  .navbar-header {
    width: 100% !important;
    text-align: left !important;
    float: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 0 !important;
    z-index: 10001 !important;
  }
  
  /* Override any min-height from desktop rules */
  .navbar-header,
  .navbar .container,
  .navbar,
  .navbar-default,
  header.navbar-affixed-top,
  header {
    min-height: 0 !important;
    height: auto !important;
  }
  
  /* Navbar brand/logo - left aligned, scaled down on mobile */
  .navbar-brand {
    float: none !important;
    display: block !important;
    margin: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    text-align: left !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 80% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 150px !important;
    order: 1 !important; /* Logo comes first in flexbox */
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 0 !important;
    flex: 0 1 auto !important;
    flex-shrink: 1 !important;
    z-index: 10002 !important;
  }
  
  /* Override desktop 200px height rules on mobile - bigger logo */
  .navbar-brand img,
  .navbar .navbar-brand img,
  .navbar-default .navbar-brand img,
  .navbar-header .navbar-brand img,
  body .navbar .navbar-brand img,
  html body .navbar .navbar-brand img,
  body .navbar-default .navbar-brand img,
  html body .navbar-default .navbar-brand img,
  body .navbar-header .navbar-brand img,
  html body .navbar-header .navbar-brand img,
  .navbar-brand img[src*="logo.png"],
  .navbar-brand img[src*="logo-small.png"],
  img[src="/img/logo.png"],
  img[src="/img/logo-small.png"] {
    max-height: 150px !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 80% !important;
    width: auto !important;
    margin: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: block !important;
    vertical-align: top !important;
    line-height: 0 !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 10003 !important;
  }
  
  /* Remove any pseudo-element spacing - make it invisible or remove it */
  .navbar-brand::before {
    display: none !important; /* Hide the pseudo-element on mobile */
  }
  
  .navbar-brand::after {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    display: none !important;
  }
  
  .navbar-brand img {
    max-height: 150px !important;
    height: auto !important;
    max-width: 80% !important;
    width: auto !important;
    top: 0 !important;
    margin: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    display: block !important;
    transform: none !important; /* Override desktop transform */
    transform-origin: left center !important;
    position: relative !important;
    object-fit: contain !important;
  }
  
  /* Hide the ::before pseudo-element on mobile to remove spacing */
  .navbar-brand::before {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
  }
  
  /* Navbar buttons container - right aligned, always visible */
  .navbar-buttons {
    float: none !important;
    display: block !important;
    margin: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
    position: relative !important;
    width: auto !important;
    order: 2 !important; /* Ensure it comes after logo in flexbox */
    clear: none !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }
  
  /* Navbar toggle button - right aligned, always visible */
  .navbar-toggle {
    float: none !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 12px 16px !important;
    border: 2px solid var(--primary-blue) !important;
    border-radius: 4px !important;
    background-color: var(--primary-white) !important;
    min-width: 50px !important;
    min-height: 50px !important;
    clear: none !important;
  }
  
  /* Minimal gap between logo and button */
  .navbar-header {
    gap: 10px !important;
    row-gap: 0 !important;
  }
  
  /* Remove ALL bottom margin and padding from navbar brand and buttons */
  .navbar-brand,
  .navbar-buttons,
  .navbar-toggle {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Ensure logo image has no bottom spacing and tight fit */
  .navbar-brand img {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    vertical-align: top !important;
    display: block !important;
    line-height: 0 !important;
  }
  
  /* Remove any line-height that creates space */
  .navbar-brand {
    line-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Ensure logo image has no bottom spacing */
  .navbar-brand img {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
  }
  
  .navbar-toggle i {
    font-size: 24px !important;
    color: var(--primary-blue) !important;
  }
  
  /* Position collapsed menu below the toggle button - right aligned */
  .navbar-collapse {
    text-align: right !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important; /* Allow full expansion, no scrolling */
    height: auto !important; /* Auto height to accommodate all content */
    overflow: visible !important; /* No overflow restrictions */
    overflow-y: visible !important; /* No vertical scrolling */
    overflow-x: visible !important; /* No horizontal scrolling */
    box-sizing: border-box !important;
    position: relative !important;
    float: none !important;
    left: auto !important;
    right: 0 !important;
    top: auto !important;
    margin: 0 !important;
    margin-left: auto !important;
    clear: both !important;
  }
  
  /* Ensure nav items are right aligned and stacked */
  .navbar-collapse .navbar-nav {
    position: relative !important;
    float: none !important;
    left: auto !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    margin-left: auto !important;
    text-align: right !important;
  }
  
  .navbar-collapse .navbar-nav > li {
    float: none !important;
    display: block !important;
    text-align: right !important;
  }
  
  .navbar-collapse .navbar-nav > li > a {
    text-align: right !important;
    display: block !important;
    padding-right: 20px !important;
  }
  
  .navbar-default .navbar-nav > li > a {
    color: var(--primary-black) !important;
  }
  
  .navbar-default .navbar-nav > li > a:hover {
    background-color: var(--accent-cyan) !important;
    color: var(--primary-black) !important;
  }
  
  /* Right align dropdown menus on mobile - use static positioning to push down items */
  .navbar-collapse .navbar-nav > li.dropdown {
    position: static !important;
    float: none !important;
    display: block !important;
  }
  
  .navbar-collapse .navbar-nav > li.dropdown > .dropdown-menu,
  .navbar-collapse .dropdown-menu {
    text-align: right !important;
    right: auto !important;
    left: auto !important;
    float: none !important;
    position: static !important;
    display: none !important; /* Hidden by default */
    width: 100% !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  
  /* Show dropdown when parent is open/active - pushes down items below */
  .navbar-collapse .navbar-nav > li.dropdown.open > .dropdown-menu,
  .navbar-collapse .navbar-nav > li.dropdown.active > .dropdown-menu,
  .navbar-collapse .navbar-nav > li.dropdown.show > .dropdown-menu {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .navbar-collapse .navbar-nav > li.dropdown > a.dropdown-toggle {
    text-align: right !important;
    padding-right: 20px !important;
  }
  
  .navbar-collapse .dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    position: static !important;
    float: none !important;
  }
  
  .navbar-collapse .dropdown-menu > li > a {
    text-align: right !important;
    padding-right: 30px !important;
    padding-left: 15px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    display: block !important;
    width: 100% !important;
    position: static !important;
  }
  
  /* Ensure all menu items are in normal flow */
  .navbar-collapse .navbar-nav > li {
    margin-bottom: 0 !important;
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
  }
  
  /* Ensure dropdown doesn't use absolute positioning - override desktop rules */
  .navbar-collapse .navbar-nav > li.dropdown.open,
  .navbar-collapse .navbar-nav > li.dropdown.active,
  .navbar-collapse .navbar-nav > li.dropdown.show {
    position: static !important;
    float: none !important;
  }
  
  /* Override any Bootstrap absolute positioning */
  .navbar-collapse .navbar-nav > li.dropdown.open .dropdown-menu,
  .navbar-collapse .navbar-nav > li.dropdown.active .dropdown-menu,
  .navbar-collapse .navbar-nav > li.dropdown.show .dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  
  /* Ensure all sections don't overflow */
  section, .container, .row {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Override any desktop transforms on navbar elements */
  .navbar-header * {
    transform: none !important;
  }
  
  .navbar-brand,
  .navbar-brand *,
  .navbar-buttons,
  .navbar-toggle {
    transform: none !important;
  }
  
  /* Ensure navbar header height adjusts to content */
  .navbar-header {
    min-height: auto !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .navbar-brand img {
    max-height: 150px !important; /* 1.5x the 100px */
    height: 150px !important;
    top: -5px !important; /* Half the padding */
  }
  
  /* Hide the ::before pseudo-element on smaller mobile too */
  .navbar-brand::before {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
  }
}

/* Fix horizontal scroll caused by heading-breadcrumbs-image */
.heading-breadcrumbs-image {
  max-width: 400px !important;
  width: 400px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.heading-breadcrumbs-image * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.heading-breadcrumbs-image img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Constrain the parent content container to prevent expansion */
.heading-breadcrumbs-content {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Course Page Styling - ALS 1 & 2 */
.course-hero {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
  padding: 30px 20px;
  margin-bottom: 40px;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(12, 53, 156, 0.2);
}

.course-hero-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.course-hero-content h1 {
  color: var(--primary-white);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
  word-wrap: break-word;
  hyphens: auto;
}

.course-subtitle,
.course-hero .course-subtitle,
.course-hero-content .course-subtitle,
#content .course-subtitle {
  color: var(--primary-white);
  font-size: 18px;
  opacity: 0.95;
  margin: 0;
  text-align: center !important;
}

.course-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 40px;
}

.info-card {
  background: var(--primary-white);
  border: 2px solid var(--accent-cyan);
  border-radius: 12px;
  padding: 15px;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0, 237, 249, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card * {
  text-align: center !important;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 237, 249, 0.25);
}

.info-icon {
  font-size: 28px;
  margin-bottom: 5px;
  line-height: 1;
  text-align: center !important;
  display: block;
}

.info-card h3 {
  color: var(--primary-blue);
  font-size: 14px;
  font-weight: bold;
  margin: 5px 0 5px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center !important;
}

.info-card p,
.course-info-grid .info-card p,
#content .info-card p,
#content .course-info-grid .info-card p {
  color: var(--primary-black);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  text-align: center !important;
}

.course-section {
  margin-bottom: 30px;
}

.course-description-grid {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

.course-description-main {
  flex: 2 !important;
  min-width: 0;
  display: flex;
}

.course-description-main .course-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-description-main .course-card p {
  flex: 1;
}

.course-description-sidebar {
  flex: 3 !important;
  min-width: 0;
  display: flex;
}

.course-description-sidebar .course-card {
  padding: 35px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-description-sidebar .course-card h2 {
  font-size: 32px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
  padding-bottom: 15px !important;
  border-bottom: 3px solid var(--accent-cyan) !important;
}

.course-description-sidebar .attendees-list {
  flex: 1;
}

.course-card {
  background: var(--primary-white);
  border-radius: 15px;
  padding: 35px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 237, 249, 0.2);
}

.course-card h2 {
  color: var(--primary-blue);
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--accent-cyan);
}

.course-card p {
  color: var(--primary-black);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 15px;
}

.highlight-card {
  background: linear-gradient(135deg, rgba(0, 237, 249, 0.05) 0%, rgba(12, 53, 156, 0.05) 100%);
  border: 2px solid var(--accent-cyan);
}

.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.outcome-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: var(--primary-white);
  border-radius: 10px;
  border-left: 4px solid var(--accent-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.outcome-item:hover {
  transform: translateX(5px);
}

.outcome-icon {
  color: var(--accent-orange);
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

.outcome-item p {
  margin: 0;
  color: var(--primary-black);
  font-size: 16px;
  line-height: 1.6;
}

.attendees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.attendees-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px;
  margin-top: 20px;
  align-content: start;
}

.attendees-list .attendee-item {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
  color: var(--primary-white);
  padding: 12px 18px;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(12, 53, 156, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.4;
  height: auto;
  min-height: auto;
}

.attendees-list .attendee-item:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(12, 53, 156, 0.3);
}

.attendees-grid .attendee-item {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
  color: var(--primary-white);
  padding: 18px 25px;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(12, 53, 156, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.attendees-grid .attendee-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(12, 53, 156, 0.3);
}

.assessment-list {
  margin-top: 25px;
}

.assessment-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  margin-bottom: 15px;
  background: rgba(0, 237, 249, 0.05);
  border-radius: 10px;
  border-left: 4px solid var(--primary-blue);
}

.assessment-number {
  background: var(--primary-blue);
  color: var(--primary-white);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

.assessment-item p {
  margin: 0;
  color: var(--primary-black);
  font-size: 17px;
  line-height: 1.6;
}

.cta-card {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
  text-align: center;
  border: none;
}

.cta-card h2 {
  color: var(--primary-white);
  border-bottom: 3px solid var(--primary-white);
}

.cta-card p {
  color: var(--primary-white);
  font-size: 20px;
  margin-bottom: 30px;
  opacity: 0.95;
}

.cta-calendly-widget {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-calendly-widget .calendly-inline-widget {
  width: 100%;
  max-width: 800px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary,
.btn-secondary {
  padding: 15px 40px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: var(--accent-orange);
  color: var(--primary-white) !important;
  border: 2px solid var(--accent-orange);
  box-shadow: 0 4px 12px rgba(231, 106, 30, 0.3);
}

.btn-primary:hover {
  background: var(--primary-white);
  color: var(--accent-orange) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(231, 106, 30, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--primary-white) !important;
  border: 2px solid var(--primary-white);
}

.btn-secondary:hover {
  background: var(--primary-white);
  color: var(--primary-blue) !important;
  transform: translateY(-2px);
}

/* Responsive Design for Course Pages */
@media (max-width: 768px) {
  .course-hero {
    padding: 25px 20px;
  }
  
  .course-hero-content h1 {
    font-size: clamp(20px, 4vw, 28px);
  }
  
  .course-subtitle {
    font-size: 16px;
  }
  
  .course-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
  }
  
  .info-card {
    padding: 20px;
  }
  
  .course-card {
    padding: 25px;
  }
  
  .course-card h2 {
    font-size: 26px;
  }
  
  .outcomes-grid {
    grid-template-columns: 1fr;
  }
  
  .course-description-grid {
    flex-direction: column;
  }
  
  .course-description-main,
  .course-description-sidebar {
    display: block;
  }
  
  .course-description-main .course-card,
  .course-description-sidebar .course-card {
    display: block;
    height: auto;
  }
  
  .attendees-grid {
    grid-template-columns: 1fr;
  }
  
  .attendees-list {
    gap: 12px;
  }
  
  .cta-buttons {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }
  
  .cta-calendly-widget {
    margin-top: 30px;
  }
  
  .cta-calendly-widget .calendly-inline-widget {
    height: 600px !important;
  }
}

@media (max-width: 480px) {
  .course-hero {
    padding: 20px 15px;
    border-radius: 10px;
  }
  
  .course-hero-content h1 {
    font-size: clamp(18px, 5vw, 22px);
  }
  
  .course-subtitle {
    font-size: 14px;
  }
  
  .course-info-grid {
    grid-template-columns: 1fr;
  }
  
  .course-card {
    padding: 20px;
    border-radius: 10px;
  }
  
  .course-card h2 {
    font-size: 22px;
  }
  
  .course-card p {
    font-size: 16px;
  }
}

/* Floating Booking Cluster */
.floating-booking-cluster {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  z-index: 999998;
  gap: 0;
}

.floating-book-now-btn {
  background: #e76a1e;
  color: #ffffff !important;
  border: none;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 700;
  padding: 0 38px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.floating-book-now-btn:hover,
.floating-book-now-btn:focus,
.floating-book-now-btn:active,
.floating-book-now-btn:visited {
  opacity: 0.9;
  text-decoration: none;
  color: #ffffff !important;
}

.floating-partner-logos {
  height: 58px;
  background: #ffffff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 22px 10px 80px;
  margin-left: -60px; /* ensures left edge sits behind button */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.floating-partner-logos img {
  width: 58px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

.floating-partner-logos img:first-child {
  width: 49px; /* ARC at 85% */
}

.floating-partner-logos img:nth-child(2) {
  width: 87px; /* RA at 150% */
}

@media (max-width: 768px) {
  .floating-booking-cluster {
    bottom: 20px;
    right: 20px;
  }
  .floating-book-now-btn {
    font-size: 18px;
    padding: 0 28px;
    height: 50px;
  }
  .floating-partner-logos {
    height: 50px;
    padding: 8px 16px 8px 60px;
    margin-left: -50px;
    gap: 12px;
  }
  .floating-partner-logos img {
    width: 44px;
  }
  .floating-partner-logos img:first-child {
    width: 37px;
  }
  .floating-partner-logos img:nth-child(2) {
    width: 66px;
  }
}

.calendly-badge-widget .calendly-badge-content {
  font-size: 18px !important;
  padding: 16px 24px !important;
  border-radius: 50px !important; /* Pill-shaped button */
}

/* Hide "powered by Calendly" text */
.calendly-badge-widget .calendly-badge-content::after,
.calendly-badge-widget .calendly-powered-by,
.calendly-badge-widget [class*="powered"],
.calendly-badge-widget [class*="branding"] {
  display: none !important;
}


/* Center the last two features on the second row (desktop only) */
@media (min-width: 769px) {
  .bar.background-white .row.row-1 {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  /* Keep Bootstrap column widths but center them */
  .bar.background-white .row.row-1 > div.col-md-4 {
    flex-shrink: 0;
  }
}

/* On mobile, make second row display same as first row and center content */
@media (max-width: 768px) {
  /* Center features section content */
  .features-bar .container {
    text-align: center !important;
  }
  
  .features-bar .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .features-bar .row > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  
  .features-bar .box-simple {
    text-align: center !important;
    margin: 0 auto !important;
  }
  
  .features-bar .box-simple .icon {
    margin: 0 auto !important;
  }
  
  .bar.background-white .row.row-1 {
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  
  .bar.background-white .row.row-1 > div.col-md-4 {
    flex-shrink: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-align: center !important;
  }
}

/* College Logos Carousel */
.college-logos-carousel-wrapper {
  position: relative;
  margin: 40px 0;
  padding: 20px 0;
  overflow: visible;
  min-height: 150px;
}

/* On mobile, ensure the section is visible */
@media (max-width: 768px) {
  section.bar.background-pentagon,
  .bar.background-pentagon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  
  .bar.background-pentagon .container {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .bar.background-pentagon .row {
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
  }
  
  .bar.background-pentagon .col-md-12 {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
  }
  
  .bar.background-pentagon .heading {
    display: block !important;
    visibility: visible !important;
    margin: 20px 0 !important;
  }
}

.college-logos-fade-left,
.college-logos-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  z-index: 5;
  pointer-events: none;
}

.college-logos-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.college-logos-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Match fade to background-pentagon texture - use same background texture with gradient overlay */
.bar.background-pentagon .college-logos-fade-left {
  background: url('../img/texture-bw.png') center center repeat;
  position: relative;
}

.bar.background-pentagon .college-logos-fade-left::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.bar.background-pentagon .college-logos-fade-right {
  background: url('../img/texture-bw.png') center center repeat;
  position: relative;
}

.bar.background-pentagon .college-logos-fade-right::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.college-logos-carousel {
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

/* On mobile, show logos as simple static list - no carousel */
@media (max-width: 768px) {
  /* Remove owl-carousel class on mobile via CSS */
  .college-logos-carousel.mobile-static-list,
  .college-logos-carousel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    width: 100% !important;
  }
  
  /* Hide owl wrappers completely */
  .college-logos-carousel .owl-stage-outer,
  .college-logos-carousel .owl-stage {
    display: none !important;
  }
  
  /* Make owl-items transparent */
  .college-logos-carousel .owl-item {
    display: contents !important;
  }
  
  /* Show ALL list items directly */
  .college-logos-carousel li.item,
  .college-logos-carousel > li.item,
  .college-logos-carousel > li,
  .college-logos-carousel li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    float: none !important;
    margin: 20px 0 !important;
    padding: 15px !important;
    height: auto !important;
    min-height: 100px !important;
    list-style: none !important;
  }
  
  /* Show logo containers and images */
  .college-logos-carousel .college-logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 15px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .college-logos-carousel .college-logo-item img {
    max-height: 120px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 auto !important;
  }
}

.college-logos-carousel .item {
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  min-height: 120px;
}

.college-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  min-height: 100px;
}

.college-logo-item img {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0%);
  transition: filter 0.3s ease;
  display: block;
  visibility: visible;
  opacity: 1;
}

.college-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .college-logos-carousel .item {
    height: 100px;
  }
  
  .college-logo-item img {
    max-height: 80px;
  }
}

@media (max-width: 768px) {
  /* Ensure section is visible */
  section.bar.background-pentagon,
  .bar.background-pentagon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 200px !important;
    padding: 40px 0 !important;
  }
  
  .college-logos-carousel-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 200px !important;
    padding: 20px 0 !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  
  /* Hide fade overlays */
  .college-logos-fade-left,
  .college-logos-fade-right {
    display: none !important;
  }
  
  /* Simple: make the list display as blocks */
  .college-logos-carousel {
    display: block !important;
    list-style: none !important;
    padding: 0 15px !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Reset all positioning and transforms */
  .college-logos-carousel {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Make owl-carousel wrappers transparent so list items show through */
  .college-logos-carousel .owl-stage-outer {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }
  
  .college-logos-carousel .owl-stage {
    display: block !important;
    width: 100% !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
  }
  
  .college-logos-carousel .owl-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }
  
  /* Show all list items as simple blocks - whether direct children or inside owl-item */
  .college-logos-carousel > li,
  .college-logos-carousel .owl-item > li,
  .college-logos-carousel li.item,
  .college-logos-carousel .owl-item li.item {
    display: block !important;
    margin: 20px 0 !important;
    padding: 15px !important;
    list-style: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    float: none !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }
  
  /* Show images */
  .college-logos-carousel .college-logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .college-logos-carousel .college-logo-item img {
    max-height: 120px !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Contact form - add padding below send message button */
#contact-form .col-sm-12.text-center,
.contact-form-emailjs .col-sm-12.text-center {
  margin-bottom: 30px !important;
  padding-bottom: 20px !important;
}

#contact-form button[type="submit"],
.contact-form-emailjs button[type="submit"] {
  margin-bottom: 20px !important;
}