/* ==========================================================================
   Self Growth Talks - banner upgrade (home hero + inner page banners)
   Loaded AFTER style.css / responsive.css. Safe to delete to go back to the
   old look (also restore page-home.php if you do).
   ========================================================================== */

:root {
    --sg-ink: #0c2226;
    --sg-ink-2: #1d4d44;
    --sg-mint: #e6f0ec;
    --sg-mint-2: #cfe4dc;
    --sg-teal: #84a799;
    --sg-orange: #ff4100;
    --sg-yellow: #ffeea2;
}

/* ------------------------------------------------------------------ HOME HERO */

.my_banner_section .owl-nav::before,
.my_banner_section .owl-nav::after { display: none !important; }

.hero-upgraded {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 600px at 85% 20%, rgba(255, 238, 162, .55), rgba(255, 238, 162, 0) 60%),
        radial-gradient(900px 600px at 0% 100%, rgba(132, 167, 153, .35), rgba(132, 167, 153, 0) 60%),
        linear-gradient(135deg, #f6faf8 0%, var(--sg-mint) 55%, var(--sg-mint-2) 100%);
}

.hero-upgraded .banner_main {
    background: none !important;
    height: auto !important;
    min-height: min(100vh, 880px);
    padding: 150px 0 110px !important;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-upgraded .hero-row { align-items: center; row-gap: 40px; }

/* soft floating colour blobs */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(2px); }
.hb-1 { width: 520px; height: 520px; right: -140px; top: 80px;
        background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .95), rgba(207, 228, 220, .2) 70%); }
.hb-2 { width: 260px; height: 260px; left: 38%; bottom: 40px;
        background: radial-gradient(circle at 40% 40%, rgba(255, 65, 0, .16), rgba(255, 65, 0, 0) 70%); }
.hb-3 { width: 340px; height: 340px; left: -120px; top: 120px;
        background: radial-gradient(circle at 50% 50%, rgba(29, 77, 68, .18), rgba(29, 77, 68, 0) 70%); }

.hero-upgraded .left_dots img,
.hero-upgraded .right_dots img { opacity: .55; }
.hero-upgraded .left_dots, .hero-upgraded .right_dots { position: absolute; top: 0; z-index: 1; pointer-events: none; }
.hero-upgraded .left_dots { left: 0; }
.hero-upgraded .right_dots { right: 0; }

/* ---- copy */
.hero-upgraded .hero-copy { max-width: 620px; }

.hero-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; margin-bottom: 22px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(12, 34, 38, .08);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(12, 34, 38, .06);
    font-family: "FuturaPTDemi", "Futura PT", sans-serif;
    font-size: 15px; letter-spacing: .04em; color: var(--sg-ink);
}
.hero-pill i { color: var(--sg-orange); }

.hero-upgraded .banner_contnt { line-height: 1.15; position: relative; z-index: 11; color: var(--sg-ink-2);
    font-family: "FuturaPTMedium", "Futura PT", sans-serif; font-size: 20px; }
.hero-upgraded .banner_contnt span {
    display: block; margin-bottom: 4px;
    color: var(--sg-orange); font-family: Quebecks, cursive;
    font-size: clamp(34px, 4.2vw, 56px);
}
.hero-upgraded .banner_contnt h1 {
    margin: 0 0 12px;
    font-family: "Reross Quadratic", "FuturaPTBold", sans-serif;
    font-size: clamp(44px, 6.4vw, 92px);
    line-height: 1.02; letter-spacing: -.01em;
    background: linear-gradient(120deg, var(--sg-ink) 10%, var(--sg-ink-2) 60%, #2f7a68 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--sg-ink);
}

.hero-sub {
    margin: 22px 0 30px; max-width: 520px;
    font-family: "Futura PT", "FuturaPTMedium", sans-serif;
    font-size: 19px; line-height: 1.65; color: var(--color-3, #3d3e43);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.btn-hero {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 999px; text-decoration: none;
    font-family: "FuturaPTDemi", "Futura PT", sans-serif; font-size: 17px; line-height: 1;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-hero-primary {
    color: #fff; background: linear-gradient(135deg, var(--sg-ink), var(--sg-ink-2));
    box-shadow: 0 14px 30px rgba(12, 34, 38, .28);
}
.btn-hero-primary i { color: var(--sg-yellow); transition: transform .25s ease; }
.btn-hero-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 36px rgba(12, 34, 38, .34); }
.btn-hero-primary:hover i { transform: translateX(5px); }
.btn-hero-ghost { color: var(--sg-ink); background: rgba(255, 255, 255, .55); border: 2px solid var(--sg-ink); }
.btn-hero-ghost:hover { color: #fff; background: var(--sg-ink); transform: translateY(-3px); }

.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.hero-chips li {
    list-style: none; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px; font-size: 14.5px;
    background: rgba(255, 255, 255, .7); border: 1px solid rgba(12, 34, 38, .1); color: var(--sg-ink);
}
.hero-chips li i { color: #2f7a68; }

/* big "GROWTH" watermark from the slider content - quieter, outlined */
.hero-upgraded .banner_growth { pointer-events: none; }
.hero-upgraded .banner_growth h3 {
    position: absolute; left: 0; right: 0; bottom: -2vw; z-index: 0;
    margin: 0; display: flex; justify-content: center; white-space: nowrap;
    font-size: clamp(120px, 21vw, 340px) !important; line-height: .8;
    color: transparent !important; -webkit-text-stroke: 2px rgba(12, 34, 38, .07);
    opacity: .9;
}
.hero-upgraded .banner_growth h3 span { color: transparent !important; -webkit-text-stroke: 2px rgba(12, 34, 38, .07); }

/* ---- illustration */
.hero-upgraded .banner_img_right { position: relative; display: flex; justify-content: center; align-items: center; min-height: 460px; }
.hero-upgraded .banner_img_right::before {          /* ring behind the artwork */
    content: ""; position: absolute; width: min(560px, 92%); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fff 0%, rgba(255, 255, 255, .55) 40%, rgba(207, 228, 220, .25) 70%);
    box-shadow: 0 30px 80px rgba(12, 34, 38, .10), inset 0 0 0 10px rgba(255, 255, 255, .55);
}
.hero-upgraded .banner_img { position: relative !important; right: auto !important; top: auto !important; z-index: 2; }
.hero-upgraded .banner_img img {
    display: block; width: 100% !important; max-width: 560px; height: auto;
    filter: drop-shadow(0 24px 30px rgba(12, 34, 38, .18));
    animation: sgFloat 7s ease-in-out infinite;
}

.float-card {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-radius: 14px; background: #fff;
    box-shadow: 0 16px 36px rgba(12, 34, 38, .14);
    font-family: "FuturaPTDemi", "Futura PT", sans-serif; font-size: 15px; color: var(--sg-ink); white-space: nowrap;
}
.float-card i {
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sg-yellow); color: var(--sg-ink); font-size: 16px;
}
.fc-1 { left: -6%; top: 14%; animation: sgFloat 6s ease-in-out infinite; }
.fc-2 { right: -4%; bottom: 12%; animation: sgFloat 8s ease-in-out -2s infinite; }
.fc-2 i { background: #d9efe7; }

/* social icons: vertical pill at the right edge on desktop */
.hero-upgraded .social_icons {
    position: absolute !important; top: 50% !important; right: 6px !important; bottom: auto !important;
    transform: translateY(-50%); z-index: 4; display: flex; align-items: center;
    background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 14px 10px;
    box-shadow: 0 12px 30px rgba(12, 34, 38, .12);
}
.hero-upgraded .social_icons ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.hero-upgraded .social_icons ul li a i {
    margin: 0 !important; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 18px !important; color: var(--sg-ink) !important; background: var(--sg-mint); transition: all .25s ease;
}
.hero-upgraded .social_icons ul li a:hover i { background: var(--sg-ink); color: #fff !important; transform: scale(1.08); }

/* curved edge into the next section */
.hero-upgraded .banner_shape { position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; z-index: 3; pointer-events: none; }
.hero-upgraded .banner_shape::after { display: none !important; }
.hero-upgraded .banner_shape::before {
    content: ""; position: absolute; inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 90V50C240 0 480 0 720 30s480 40 720-10v70z' fill='%23ffffff'/></svg>") bottom/100% 100% no-repeat;
}

/* entrance animation (children only, so absolute watermark keeps its anchor) */
.hero-pill, .hero-upgraded .banner_contnt, .hero-sub, .hero-cta, .hero-chips { animation: sgRise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-upgraded .banner_contnt { animation-delay: .08s; }
.hero-sub { animation-delay: .18s; }
.hero-cta { animation-delay: .26s; }
.hero-chips { animation-delay: .34s; }
@keyframes sgRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes sgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .hero-upgraded * { animation: none !important; } }

/* multi-slide navigation (only visible if more than one slide is added) */
.my_banner_section .owl-nav { border: 0 !important; padding: 0 !important; left: auto !important; right: 5% !important; bottom: 36px !important; display: flex; gap: 10px; z-index: 6; }
.my_banner_section .owl-nav button { width: 46px; height: 46px; border-radius: 50% !important; background: #fff !important; box-shadow: 0 8px 22px rgba(12, 34, 38, .15); }
.my_banner_section .owl-nav button span { margin: 0 !important; top: -3px; font-size: 30px; line-height: 1; color: var(--sg-ink); }

/* ---- responsive */
@media (max-width: 1199px) {
    .hero-upgraded .banner_main { padding: 140px 0 100px !important; min-height: 0; }
    .hero-upgraded .social_icons { position: static !important; transform: none; justify-content: center; margin: 22px auto 0; width: max-content; padding: 10px 16px; }
    .hero-upgraded .social_icons ul { flex-direction: row; }
    .hero-upgraded .banner_img_right { flex-direction: column; min-height: 0; }
    .hero-upgraded .banner_img_right .social_icons { display: flex !important; }
}
@media (max-width: 991px) {
    .hero-upgraded .hero-copy { max-width: none; text-align: center; margin: 0 auto; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-cta, .hero-chips { justify-content: center; }
    .hero-upgraded .banner_growth h3 { display: none !important; }
    .hero-upgraded .banner_img_right { min-height: 0; }
    .hero-upgraded .banner_img img { max-width: 440px; margin: 0 auto; }
    .fc-1 { left: 2%; } .fc-2 { right: 2%; }
}
@media (max-width: 575px) {
    .hero-upgraded .banner_main { padding: 118px 0 84px !important; }
    .hero-sub { font-size: 17px; }
    .btn-hero { padding: 14px 24px; font-size: 16px; width: 100%; justify-content: center; }
    .hero-upgraded .banner_img img { max-width: 320px; }
    .float-card { font-size: 12.5px; padding: 8px 12px; }
    .float-card i { width: 28px; height: 28px; font-size: 13px; }
    .hb-1 { width: 320px; height: 320px; right: -120px; }
    .hero-upgraded .banner_shape { height: 52px; }
}

/* ------------------------------------------------------------ INNER PAGE BANNER */

.inner-banner {
    position: relative; display: block !important; height: auto !important; text-align: center;
    padding: 190px 0 70px !important; z-index: 1; overflow: hidden;
    background:
        radial-gradient(700px 360px at 88% 0%, rgba(255, 238, 162, .65), rgba(255, 238, 162, 0) 65%),
        radial-gradient(600px 360px at 0% 100%, rgba(29, 77, 68, .16), rgba(29, 77, 68, 0) 65%),
        linear-gradient(135deg, #f1f8f5 0%, #d7e9e2 55%, #bfdcd2 100%) !important;
}
.inner-banner::before {                 /* replaces the old giant "Self Growth Talks" text */
    content: "" !important; position: absolute !important; left: auto !important; bottom: auto !important;
    right: -90px; top: -110px; width: 360px; height: 360px; font-size: 0 !important; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
    display: block !important; z-index: -1;
}
.inner-banner::after { opacity: .28 !important; }   /* keeps the original soft pattern, quieter */

.inner-banner .container { position: relative; z-index: 2; }

.inner-banner-title {
    margin: 0 0 18px; position: relative; display: inline-block;
    font-family: "Reross Quadratic", "FuturaPTBold", sans-serif; font-weight: 400;
    font-size: clamp(34px, 5.2vw, 66px); line-height: 1.08; letter-spacing: -.005em; color: var(--sg-ink);
}
.inner-banner-title::after {
    content: ""; display: block; width: 74px; height: 5px; margin: 14px auto 0; border-radius: 99px;
    background: linear-gradient(90deg, var(--sg-orange), var(--sg-yellow));
}

.inner-banner .breadcrumb-box ul {
    display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 9px 22px;
    background: rgba(255, 255, 255, .78); border-radius: 999px; box-shadow: 0 10px 26px rgba(12, 34, 38, .08);
}
.inner-banner .breadcrumb-box ul li { position: relative; font-size: 16px; font-weight: 500; color: var(--sg-ink); padding-left: 0 !important; }
.inner-banner .breadcrumb-box ul li a { font-size: 16px; font-weight: 600; color: var(--sg-orange); }
.inner-banner .breadcrumb-box ul li::before {
    content: "\203A" !important; position: static !important; font-family: inherit !important;
    display: inline-block; padding: 0 12px; color: var(--sg-teal); font-size: 20px; line-height: 1;
}
.inner-banner .breadcrumb-box ul li:first-child::before { display: none !important; }

@media (max-width: 767px) {
    .inner-banner { padding: 128px 0 46px !important; }
    .inner-banner .breadcrumb-box ul { padding: 8px 16px; }
}

/* ---- fixes: old decorative block behind social icons, watermark anchor */
.hero-upgraded .social_icons ul::after { display: none !important; }
.hero-upgraded .hero-row,
.hero-upgraded .hero-copy-col,
.hero-upgraded .banner_main .container { position: static; }
.hero-upgraded .banner_growth h3 { left: 0 !important; }
.hero-upgraded .banner_growth h3 { bottom: 58px !important; }
.hero-upgraded .banner_growth h3 span { opacity: 1 !important; }
.hero-upgraded .banner_growth h3,
.hero-upgraded .banner_growth h3 span { -webkit-text-stroke: 2px rgba(12, 34, 38, .085) !important; }
.hero-upgraded .float-card i { background: var(--sg-yellow) !important; color: var(--sg-ink) !important; }
.hero-upgraded .fc-2 i { background: #d9efe7 !important; }
.hero-upgraded .banner_img { width: 100%; max-width: 560px; }
@media (max-width: 575px) { .hero-upgraded .banner_img { max-width: 330px; } }
.hero-upgraded .banner_img { display: block !important; }
/* ring centred on the illustration itself */
.hero-upgraded .banner_img_right::before { display: none !important; }
.hero-upgraded .banner_img::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 104%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; z-index: -1;
    background: radial-gradient(circle at 30% 25%, #fff 0%, rgba(255, 255, 255, .55) 40%, rgba(207, 228, 220, .25) 70%);
    box-shadow: 0 30px 80px rgba(12, 34, 38, .10), inset 0 0 0 10px rgba(255, 255, 255, .55);
}
@media (max-width: 991px) {
    .hero-upgraded .hero-copy { position: relative; z-index: 3; }
    .hero-upgraded .hero-art-col { margin-top: 34px; }
    .hero-upgraded .banner_img::before { width: 100%; }
}

/* ===== Inner banner with an image (set from wp-admin; see inc/banner-images.php) ===== */
.sg-has-banner .inner-banner {
    background:
        linear-gradient(135deg, rgba(241, 248, 245, var(--sg-ov1, .88)) 0%, rgba(215, 233, 226, var(--sg-ov2, .75)) 50%, rgba(191, 220, 210, var(--sg-ov3, .60)) 100%),
        var(--banner-img) center / cover no-repeat !important;
    background-color: #d7e9e2 !important;
}
.sg-has-banner .inner-banner::after { display: none !important; }      /* old dotted pattern not needed over a photo */

.sg-banner-dark .inner-banner {
    background:
        linear-gradient(135deg, rgba(12, 34, 38, var(--sg-ov2, .75)) 0%, rgba(12, 34, 38, var(--sg-ov3, .45)) 100%),
        var(--banner-img) center / cover no-repeat !important;
    background-color: #0c2226 !important;
}
.sg-banner-dark .inner-banner::before { display: none !important; }
.sg-banner-dark .inner-banner-title { color: #fff; }
/* dark banner: menu links light while the header is transparent (white again once the header turns sticky) */
.sg-banner-dark .main_header:not(.sticky) .stellarnav > ul > li > a,
.sg-banner-dark .main_header:not(.sticky) .stellarnav a.menu-toggle,
.sg-banner-dark .main_header:not(.sticky) .stellarnav a.menu-toggle span { color: #fff !important; }
.sg-banner-dark .main_header:not(.sticky) .stellarnav a.menu-toggle span.bars span { background: #fff !important; }