/*-----------------------------------------------------------------------------------
    AM 2 PM Services - Travel
    One font, one type scale and one orange accent on every page.
    Loaded after style.css on all pages.
-----------------------------------------------------------------------------------*/

/* Orange theme: the old blue secondary accent becomes a deeper orange */
body {
  --primary-color: #F47B20;
  --primary-rgb: 244, 123, 32;
  --secondary-color: #D9560B;
  --secondary-rgb: 217, 86, 11;
  font-family: var(--base-font);
  font-size: 16px;
  line-height: 28px;
}
.color-two {
  --primary-color: #F47B20;
}
.about-feature-two .feature-item.style-two:hover {
  box-shadow: 10px 4px 40px rgba(var(--secondary-rgb), 0.35);
}
.activity-item:hover {
  box-shadow: 10px 4px 60px rgba(var(--secondary-rgb), 0.25);
}

/* Headings always use the same font */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--heading-font);
}

/* Page banner title - same on every inner page */
.banner-inner .page-title {
  font-size: 65px;
  line-height: 1.15;
}

/* Section titles - same on every page */
.section-title h2,
.destination-details-content .section-title h2,
.cta-content-part .section-title h2 {
  font-size: 42px;
  line-height: 1.23;
}
.section-title p {
  font-size: 18px;
  line-height: 30px;
}

/* Tour / destination card titles - one size for h5 and h6 cards */
.destination-item .content h5,
.destination-item .content h6,
.destination-item.style-two .content h6,
.destination-item.style-three .content h5 {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
}

/* Content headings on detail pages (tours, destinations, blog) */
.tour-details-page h3,
.tour-details-content h3,
.destination-details-content h3,
.blog-details-content h3 {
  font-size: 30px;
  line-height: 1.3;
}
.tour-include-exclude h5,
.accordion-two .accordion-header,
.accordion-one .accordion-header {
  font-size: 20px;
  line-height: 1.4;
}

/* Body copy */
p,
.accordion-body p,
.list-style-one li {
  font-size: 16px;
  line-height: 28px;
}

/* Itinerary overview (itinerary pages) */
.am-trip-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 25px 0 10px;
}
.am-trip-facts .fact {
  flex: 1 1 180px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--lighter-color);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
}
.am-trip-facts .fact i {
  color: var(--primary-color);
  font-size: 22px;
  margin-bottom: 8px;
  display: block;
}
.am-trip-facts .fact span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-color);
}
.am-trip-facts .fact b {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: var(--heading-color);
}
.am-day-tag {
  color: var(--primary-color);
  font-weight: 600;
  margin-right: 6px;
}
.tour-gallery .gallery-item img {
  width: 100%;
  object-fit: cover;
}

/* Responsive type scale */
@media only screen and (max-width: 1199px) {
  .banner-inner .page-title {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .section-title h2,
  .destination-details-content .section-title h2,
  .cta-content-part .section-title h2 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .banner-inner .page-title {
    font-size: 35px;
  }
  .tour-details-page h3,
  .tour-details-content h3,
  .destination-details-content h3,
  .blog-details-content h3 {
    font-size: 26px;
  }
}
@media only screen and (max-width: 575px) {
  .section-title h2,
  .destination-details-content .section-title h2,
  .cta-content-part .section-title h2 {
    font-size: 30px;
  }
  .banner-inner .page-title {
    font-size: 30px;
  }
  .destination-item .content h5,
  .destination-item .content h6 {
    font-size: 20px;
  }
}

/* Page banner: keep title and breadcrumb above the dark gradient overlay */
.page-banner-area > .container {
  position: relative;
  z-index: 2;
}

/*-----------------------------------------------------------------------------------
    Logo: same colours on every page and every device
    AM + PM + Services = deep blue, 2 = orange, tagline underneath.
    Icon and name always stay on one line.
-----------------------------------------------------------------------------------*/
.logo a,
.mobile-logo a,
.footer-logo a {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.main-menu .mobile-logo {
  max-width: none;
}
.brand-logo,
.footer-logo .brand-logo {
  width: 64px;
  height: 64px;
  margin-right: 12px;
  flex: 0 0 auto;
}
.brand-text {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  line-height: 1.1;
  white-space: nowrap;
}
.brand-text .brand-name,
.brand-text.brand-light .brand-name,
.brand-text.brand-dark .brand-name {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #0D3B66;
}
.brand-text .b-am,
.brand-text .b-pm,
.brand-text .b-svc {
  color: #0D3B66;
}
.brand-text .b-two {
  color: #F47B20;
}
.brand-text .brand-tagline {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.3px;
  color: #0D3B66;
  opacity: 0.85;
}
/* On dark backgrounds the logo sits on a white card so the colours never change */
.brand-text.brand-light {
  color: #0D3B66;
  background: #fff;
  padding: 8px 16px 9px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
/* Footer: give the logo column the full row on smaller screens so it never squeezes */
@media only screen and (max-width: 1199px) {
  .main-footer .row > .col:has(.footer-logo),
  .main-footer .row > .col-small:has(.footer-logo) {
    width: 100%;
    flex: 0 0 100%;
  }
}

/* Laptop */
@media only screen and (max-width: 1399px) {
  .brand-logo,
  .footer-logo .brand-logo {
    width: 58px;
    height: 58px;
  }
  .brand-text .brand-name,
  .brand-text.brand-light .brand-name,
  .brand-text.brand-dark .brand-name {
    font-size: 27px;
  }
  .brand-text .brand-tagline {
    font-size: 13px;
  }
}
/* Tablet */
@media only screen and (max-width: 991px) {
  .brand-logo,
  .footer-logo .brand-logo {
    width: 54px;
    height: 54px;
    margin-right: 10px;
  }
  .brand-text .brand-name,
  .brand-text.brand-light .brand-name,
  .brand-text.brand-dark .brand-name {
    font-size: 26px;
  }
}
/* Mobile */
@media only screen and (max-width: 575px) {
  .brand-logo,
  .footer-logo .brand-logo {
    width: 46px;
    height: 46px;
    margin-right: 8px;
  }
  .brand-text .brand-name,
  .brand-text.brand-light .brand-name,
  .brand-text.brand-dark .brand-name {
    font-size: 22px;
  }
  .brand-text .brand-tagline {
    margin-top: 3px;
    font-size: 11.5px;
  }
  .brand-text.brand-light {
    padding: 6px 11px 7px;
  }
}
/* Small phones */
@media only screen and (max-width: 375px) {
  .brand-logo,
  .footer-logo .brand-logo {
    width: 42px;
    height: 42px;
  }
  .brand-text .brand-name,
  .brand-text.brand-light .brand-name,
  .brand-text.brand-dark .brand-name {
    font-size: 20px;
  }
  .brand-text .brand-tagline {
    font-size: 10.5px;
  }
}

/* Copyright line: brand name in white with the orange "2" */
a.copy-brand,
.footer-bottom a.copy-brand {
  color: #fff;
  font-weight: 600;
}
a.copy-brand .b-two {
  color: #F47B20;
}

/* Inner-page footers put the logo in a narrow 5-column row on large screens - scale it to fit */
@media only screen and (min-width: 1200px) {
  .main-footer .col-small .footer-logo .brand-logo {
    width: 50px;
    height: 50px;
    margin-right: 9px;
  }
  .main-footer .col-small .footer-logo .brand-text .brand-name {
    font-size: 23px;
  }
  .main-footer .col-small .footer-logo .brand-text .brand-tagline {
    font-size: 11.5px;
  }
  .main-footer .col-small .footer-logo .brand-text.brand-light {
    padding: 6px 11px 7px;
  }
}
@media only screen and (min-width: 1400px) {
  .main-footer .row-cols-xxl-5 > .col-small:has(.footer-logo) {
    flex: 0 0 calc(20% + 40px);
    width: calc(20% + 40px);
  }
  .main-footer .row-cols-xxl-5:has(.footer-logo) > .col:not(:has(.footer-logo)) {
    flex: 1 1 0;
    width: auto;
  }
}