/* ======================================================================
   Global Styles
   ----------------------------------------------------------------------
   This stylesheet defines the look and feel of the A.C.E landing page.
   Font sizes are slightly increased throughout the site for better
   readability, and text is justified in long paragraphs.  Modify these
   variables to suit your brand’s typography once you choose a custom
   font family.
*/

/* ===== Base ===== */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "GeoSlab703";
  font-size: 1.1rem;
  background: linear-gradient(180deg, #fff 0%, #fffaf0 60%);
  color: #111;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Utility classes */
.btn {
  display: inline-block;
  padding: 0.75em 1.5em;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 1.2rem;
  cursor: pointer;
}

.btn-primary {
  background: #111;
  color: #fff;
  border: 2px solid #111;
}

.btn-primary:hover {
  background: #333;
}

.btn-outline {
  background: transparent;
  color: #111;
  border: 2px solid #111;
}

.btn-outline:hover {
  background: #111;
  color: #fff;
}

/* Hide the franchise button by default */
.franchise-btn {
  display: none;
}

/* Social media icon links */
.social-links {
  display: flex;
  gap: 14px;
  margin-top: 5px;
}

.social-links img {
  width: 28px;
  height: 28px;
  transition: transform 0.2s ease, filter 0.3s ease;
}

.social-links img:hover {
  transform: scale(1.1);
  filter: brightness(0.3);
}

/* ======================================================================
   Navigation Bar
*/
.navHolder {
  width: 100%;       /* or fixed width if you want centering */
  position: relative; /* this becomes containing block for absolutely positioned children */
  /* no overflow hidden or clipping — let children overflow */
}

.ace-nav {
  width: 100%;       /* full width of navHolder or adjusted if needed */
  height: 100px;     /* or your chosen height */
  background: #fdbc2d;
  position: relative; 
  /* no overflow hidden */
}

.triangle {
  position: absolute;
  top: 0;
  right: 125px; /* adjust to align bulge */
  width: 170px;
  height: 120px; /* adjust as needed */
  background: #fff;
  clip-path: polygon(50% -50%, 100% 100%, 0 100%);
  /* z-index if needed to sit above nav background */
}

.nav-tip-image {
  position: absolute;
  right: 134px;
  bottom: -40px;  /* negative to bulge out */
  width: 140px;
  height: auto;
  z-index: 2;     /* above triangle and nav background */
}

/* ======================================================================
   Centre CTA Section
*/
.cta-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 5vh;
  background: #fff;
  text-align: center;
  margin-top: 25px;
}

.cta-box {
  max-width: 800px;
  margin: 0 auto;
}

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

/* ======================================================================
   Alternating Content Sections
*/
.split-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 60px 0px;
  background: #fff;
}

.split-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  max-width: 1100px;
  flex-wrap: wrap;
}

.split-content.left .text { order: 1; }
.split-content.left .image { order: 2; }
.split-content.right .image { order: 1; }
.split-content.right .text { order: 2; }

.split-content .text {
  flex: 1;
  min-width: 280px;
}

.split-content .text h2 {
  font-size: clamp(1.3rem, 4vw, 2.5rem);
  margin-bottom: 0.5em;
}

.split-content .text p {
  font-size: clamp(1.1rem, 2.2vw, 1.1rem);
  color: #333;
  line-height: 1.6;
  margin: 0;
}

.split-content .image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.split-content .image img {
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  border: 3px solid #111;
  object-fit: cover;
}

/* Centre statement section */
.split-center {
  text-align: center;
  padding: 80px 20px;
  background: #fffaf0;
}

.split-center h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 0.5em;
}

.split-center p {
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  color: #333;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Full width banner image */
.split-full-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* ======================================================================
   About Section
*/
.about-section {
  padding: 60px 20px;
  background: #fff;
  text-align: left;
}

.about-section h2 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  margin-bottom: 0.5em;
}

.about-section p {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  text-align: justify;
  margin-bottom: 1.2em;
}

/* ===========================
   Spotlight Brand Card (New)
=========================== */

.ourBrandsTitle{
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.spotlight-card {
   width: 100%;
  max-width: 600px;   /* limit width */
  margin: 0 auto;
  background: #fdbc2d;
  border: 4px solid #111;
  border-radius: 22px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  box-shadow: 0 12px 28px rgba(0,0,0,0.15);

  /* animation initial state */
  opacity: 0;
  transform: rotateX(20deg) translateY(50px);
  transform-origin: top;
  transition: transform 0.9s cubic-bezier(.25,.8,.25,1),
              opacity 0.9s ease;
}

/* Reveal animation when scrolled into view */
.animate-brand.visible {
  opacity: 1;
  transform: rotateX(0deg) translateY(0px);
}

.brand-logo-wrap {
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  border: 3px solid #111;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-logo-large {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-info {
  margin-top: 20px;
}

.brand-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.brand-text {
  font-size: 1rem;
  margin-bottom: 18px;
}

.brand-socials {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
}

.brand-socials img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid #111;
  padding: 4px;
  background: #ffffffdd;
  transition: transform 0.2s ease;
}

.brand-socials img:hover {
  transform: scale(1.1);
}

.brand-learn-btn {
  font-size: 1rem;
  padding: 10px 18px;
}

/* ==========================================
   Spotlight Brand Card — Tilt Reveal
========================================== */

.tilt-reveal {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  perspective: 1200px;
}

.tilt-reveal .brand-card-inner {
  background: #fdbc2d;
  border: 4px solid #111;
  border-radius: 22px;
  padding: 32px 26px;
  text-align: center;
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);

  /* initial tilted/hidden state */
  opacity: 0;
  transform: translateY(60px) rotateX(12deg);
  transform-origin: top center;

  transition: 
    opacity 0.9s cubic-bezier(.25,.8,.25,1),
    transform 0.9s cubic-bezier(.25,.8,.25,1);
}

/* When visible in viewport */
.tilt-reveal.visible .brand-card-inner {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

/* Logo Holder */
.brand-logo-box {
  width: 180px;
  height: 180px;
  background: #fff;
  border-radius: 20px;
  border: 3px solid #111;
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-logo-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Text */
.brand-title {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.brand-desc {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #333;
}

/* Social Icons */
.brand-socials {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}

.brand-socials img {
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 8px;
  border: 2px solid #111;
  background: #ffffffcc;
  transition: transform .2s ease;
}

.brand-socials img:hover {
  transform: scale(1.1);
}

/* Button */
.brand-learn-btn {
  font-size: 1rem;
  padding: 10px 24px;
}
/* ======================================================================
   Responsive Adjustments
*/
@media (max-width: 768px) {
  .split-content {
    flex-direction: column;
    text-align: center;
  }
  .split-content .image img {
    max-width: 90%;
  }
  .cta-center {
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
  }

  .split-content .text p {
    padding: 0px 20px;
  }
}

@media (max-width: 535px) {
  .ribbon {
    display: none;
  }
  .btn {
    padding: 0.6em 0.8em;
    font-size: 0.85rem;
  }
}

/* =====================================================================
   Scroll-triggered Animations
   --------------------------------------------------------------------
   These classes define the initial state for elements that animate into
   view as the user scrolls.  Elements with `.animate-on-scroll` start
   hidden (opacity 0) and offset by a translation.  When the `visible`
   class is added via JavaScript, they transition back to their natural
   position and become fully opaque.
*/
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: none;
}

.slide-in-right {
  transform: translateX(80px);
}

.slide-in-left {
  transform: translateX(-80px);
}

.fade-up {
  transform: translateY(40px);
}