/* ============================
   EXPERTISE PAGE BANNER
   ============================ */
.about_pg_bg .aj-banner_flex h1 {
  font-size: 60px;
  line-height: 1.2;
}
.about_pg_bg .aj-banner_flex h1 .ambasidor {
  font-size: 88px;
}
.about_pg_bg .aj-banner_flex p {
  font-size: 20px;
  line-height: 28px;
  margin-top: 20px;
}

/* What I Do Section */
.offer-slide-rel > h2 {
  font-size: 38px !important;
}
.intro_aj_h > img.line-dot {
  top: calc(50% - 5px) !important;
}

/* ============================
   THINK PAGE BANNER - TEXT
   ============================ */
.blog_banner_text h1 {
  font-size: 60px !important;
  line-height: 1.2 !important;
}
.blog_banner_text h1 .ambasidor {
  font-family: Ambasador !important;
  font-size: 88px !important;
  line-height: 1 !important;
  display: inline-block !important;
}
.blog_banner_text p {
  font-size: 24px !important;
  line-height: 1.3 !important;
}

/* ============================
   THINK PAGE BANNER - BACKGROUND
   ============================ */
.banner-blog {
  background-image: url('/wp-content/uploads/2026/02/think-banner-clean.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.banner-blog .video-width {
  display: none !important;
}
.banner-blog .vid_blog_overlay {
  display: none !important;
}

/* ============================
   THINK PAGE - 3D CHROME LOGO
   ============================ */
@keyframes logoFadeIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes logoFadeInMobile {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* Desktop: absolute overlay to the right */
.banner-blog::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 62% !important;
  transform: translate(-50%, -50%) !important;
  width: 520px !important;
  height: 520px !important;
  background-image: url('/wp-content/uploads/2026/02/aj_3d_transparent2.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: logoFadeIn 1.5s ease-out 0.3s both !important;
}

/* Ensure text above logo on desktop */
.banner-blog .container {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================
   RESPONSIVE - 1199px
   ============================ */
@media only screen and (max-width: 1199px) {
  .about_pg_bg .aj-banner_flex h1 { font-size: 50px; }
  .about_pg_bg .aj-banner_flex h1 .ambasidor { font-size: 78px; }
  .offer-slide-rel > h2 { font-size: 34px !important; }
  .blog_banner_text h1 { font-size: 50px !important; }
  .blog_banner_text h1 .ambasidor { font-size: 78px !important; }
  .banner-blog::after {
    width: 440px !important;
    height: 440px !important;
    left: 65% !important;
  }
}

/* ============================
   RESPONSIVE - 991px
   ============================ */
@media only screen and (max-width: 991px) {
  .about_pg_bg .aj-banner_flex h1 { font-size: 45px; }
  .about_pg_bg .aj-banner_flex h1 .ambasidor { font-size: 68px; }
  .offer-slide-rel > h2 { font-size: 30px !important; }
  .blog_banner_text h1 { font-size: 45px !important; }
  .blog_banner_text h1 .ambasidor { font-size: 65px !important; }
  .banner-blog::after {
    width: 360px !important;
    height: 360px !important;
    left: 68% !important;
  }
}

/* ============================
   RESPONSIVE - 767px (MOBILE)
   Replicates Contact page pattern:
   flex-column, text first, logo below
   ============================ */
@media only screen and (max-width: 767px) {
  /* Text sizes */
  .about_pg_bg .aj-banner_flex h1 { font-size: 38px; }
  .about_pg_bg .aj-banner_flex h1 .ambasidor { font-size: 55px; }
  .about_pg_bg .aj-banner_flex p { font-size: 16px; }
  .offer-slide-rel > h2 { font-size: 26px !important; }
  .blog_banner_text h1 { font-size: 38px !important; }
  .blog_banner_text h1 .ambasidor { font-size: 55px !important; }
  .blog_banner_text p { font-size: 18px !important; }

  /* Banner becomes flex column */
  .banner-blog {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
  }

  /* Text container: top-aligned, natural height */
  .banner-blog > .container {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    align-items: flex-start !important;
    padding-top: 120px !important;
    padding-bottom: 0 !important;
  }

  /* Logo: flows below text as flex child, centered */
  .banner-blog::after {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    align-self: center !important;
    width: 300px !important;
    height: 300px !important;
    margin: auto auto 40px auto !important;
    z-index: 1 !important;
    animation: logoFadeInMobile 1.5s ease-out 0.5s both !important;
  }
}

/* ============================
   RESPONSIVE - 575px (SMALL)
   ============================ */
@media only screen and (max-width: 575px) {
  .about_pg_bg .aj-banner_flex h1 { font-size: 30px; }
  .about_pg_bg .aj-banner_flex h1 .ambasidor { font-size: 45px; }
  .blog_banner_text h1 { font-size: 30px !important; }
  .blog_banner_text h1 .ambasidor { font-size: 45px !important; }

  .banner-blog > .container {
    padding-top: 100px !important;
  }

  .banner-blog::after {
    width: 260px !important;
    height: 260px !important;
    margin: auto auto 30px auto !important;
  }
}