*{
	margin: 0px;
	padding: 0px;
}
:root { 
  --font-primary: "Alegreya Sans", sans-serif; 
  --font-secondary: "Roboto", serif;
}  
:root {
  --color-black:#000;
  --color-ltblack:#585858;
  --color-violet:#6C1CAB;
  --color-ash:#3e3b3b8a;
  --color-white: #fff;
  --color-light-white:#F4F1F1;
  --color-cyan:#121212;
  --color-white-p:#f5f5f5;
  --color-ash-3:#f3eded;
  --color-green:#65b126;
  --color-bg-gray:#121212;
  --color-purple:#92278f;
  --color-orange:#f36f21;
  --color-bg: #fdf6eb;
  --color-blue: #0e2c53;
  --color-pink: #ec028d;
  --color-bg-blue: #34327C;
   --color-yellow: #EC9600;
  --color-bg-ash:  #707070;
  --color-light-blue: #0095da;
  --color-light-yellow: #fee00c;
}
.mb-3 {
  margin: 0px 0px 60px 0px;
}
ul{
  margin: 0px;
  padding: 0;
  list-style: none;
}
.pad-all{
  padding: 60px 0px 60px 0px;
}

a:focus,
.btn:focus {
  text-decoration: none;
  outline: none !important;
}
a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}
.gn-sub-head{
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0px 0px 10px 0px;
}
.gn-sub-txt{
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: normal;
  margin: 0px 0px 10px 0px;
  color: var(--color-bg-ash);
}
ul.gn-sub-list{
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: normal;
  margin: 0px 0px 10px 0px;
  color: var(--color-bg-ash);
}
.clr-pad0{
  padding: 0px;
  margin: 0px;
}




/* =========================================
   HEADER
   All classes are prefixed with ap-
   ========================================= */

.ap-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #edf1f6;
    position: relative;
    z-index: 9999;
    box-sizing: border-box;
}

.ap-header *,
.ap-header *::before,
.ap-header *::after {
    box-sizing: border-box;
}

.ap-header-inner {
    width: 100%;
    max-width: 1440px;
    height: 82px;
    margin: 0 auto;
    padding: 0 55px;

    display: grid;
    grid-template-columns: 220px 1fr 220px;
    align-items: center;
    gap: 30px;
}


/* =========================================
   LOGO CONTAINER
   ========================================= */

.ap-logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ap-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ap-logo-img {
    display: block;
    width: 185px;
    height: auto;
    max-height: 62px;
    object-fit: contain;
}


/* =========================================
   MENU CONTAINER
   ========================================= */

.ap-menu-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-menu-list {
    display: flex;
    align-items: center;
    justify-content: center;

    list-style: none;
    margin: 0;
    padding: 0;

    gap: 38px;
}

.ap-menu-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-menu-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 30px 0;

    color: #182b45;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

.ap-menu-link:hover {
    color: #1769c2;
}

.ap-menu-active {
    color: #1769c2;
}

.ap-menu-active::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 19px;

    width: 100%;
    height: 2px;

    background: #1769c2;
    border-radius: 10px;
}


/* =========================================
   BUTTON CONTAINER
   ========================================= */

.ap-button-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ap-webinar-button {
    min-width: 175px;
    height: 48px;

    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: #0757a6;
    color: #ffffff;

    border-radius: 28px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    box-shadow: 0 5px 15px rgba(7, 87, 166, 0.14);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ap-webinar-button:hover {
    background: #064986;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(7, 87, 166, 0.22);
}

.ap-button-arrow {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.ap-webinar-button:hover .ap-button-arrow {
    transform: translateX(4px);
}


/* =========================================
   MOBILE TOGGLE
   ========================================= */

.ap-mobile-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 9px;

    background: transparent;
    border: 0;

    cursor: pointer;
}

.ap-mobile-toggle span {
    display: block;

    width: 25px;
    height: 2px;

    margin: 5px auto;

    background: #182b45;

    border-radius: 5px;

    transition: 0.25s ease;
}


/* =========================================
   MOBILE MENU
   ========================================= */

.ap-mobile-menu {
    display: none;

    width: 100%;

    background: #ffffff;

    border-top: 1px solid #edf1f6;

    box-shadow: 0 12px 25px rgba(20, 50, 80, 0.08);
}

.ap-mobile-list {
    list-style: none;

    margin: 0;
    padding: 15px 25px 25px;
}

.ap-mobile-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ap-mobile-link {
    display: block;

    padding: 15px 5px;

    color: #182b45;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

    border-bottom: 1px solid #edf1f6;
}

.ap-mobile-link:hover {
    color: #1769c2;
}

.ap-mobile-webinar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 18px;

    min-height: 48px;

    background: #0757a6;
    color: #ffffff;

    border-radius: 25px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}

.ap-mobile-webinar:hover {
    background: #064986;
    color: #ffffff;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1100px) {

    .ap-header-inner {
        padding: 0 30px;

        grid-template-columns: 190px 1fr 190px;

        gap: 15px;
    }

    .ap-logo-img {
        width: 165px;
    }

    .ap-menu-list {
        gap: 22px;
    }

    .ap-menu-link {
        font-size: 13px;
    }

    .ap-webinar-button {
        min-width: 155px;
        font-size: 13px;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .ap-header-inner {
        height: 70px;

        padding: 0 18px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 15px;
    }

    /* Logo */

    .ap-logo-container {
        flex: 1;
    }

    .ap-logo-img {
        width: 145px;
        max-height: 52px;
    }

    /* Hide desktop menu */

    .ap-menu-container {
        display: none;
    }

    /* Hide desktop button */

    .ap-button-container {
        display: none;
    }

    /* Show mobile button */

    .ap-mobile-toggle {
        display: block;
        flex-shrink: 0;
    }

    /* Mobile menu */

    .ap-mobile-menu {
        display: none;
    }

    .ap-header.ap-mobile-open .ap-mobile-menu {
        display: block;
    }

    /* Hamburger animation */

    .ap-header.ap-mobile-open .ap-mobile-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .ap-header.ap-mobile-open .ap-mobile-toggle span:nth-child(2) {
        opacity: 0;
    }

    .ap-header.ap-mobile-open .ap-mobile-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 380px) {

    .ap-header-inner {
        padding: 0 14px;
    }

    .ap-logo-img {
        width: 130px;
    }

    .ap-mobile-list {
        padding-left: 18px;
        padding-right: 18px;
    }
}




/* =========================================================
   PREMIUM HERO
   ========================================================= */

.ap-hero {
    position: relative;
    width: 100%;
    min-height: 780px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 35%,
            rgba(81, 168, 241, 0.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(129, 201, 255, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 48%,
            #eaf6ff 100%
        );

    isolation: isolate;
}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.ap-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    filter: blur(2px);
}

.ap-hero-glow-one {
    width: 520px;
    height: 520px;

    top: -220px;
    right: -120px;

    background:
        radial-gradient(
            circle,
            rgba(70, 163, 239, 0.25),
            transparent 68%
        );

    animation: apGlowFloat 8s ease-in-out infinite;
}

.ap-hero-glow-two {
    width: 400px;
    height: 400px;

    bottom: -220px;
    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(41, 132, 211, 0.13),
            transparent 70%
        );

    animation: apGlowFloat 10s ease-in-out infinite reverse;
}


/* =========================================================
   GRID
   ========================================================= */

.ap-hero-grid {
    position: absolute;
    inset: 0;

    opacity: 0.25;

    background-image:
        linear-gradient(
            rgba(20, 100, 170, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 100, 170, 0.045) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 35%,
            black 70%,
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.ap-hero-container {
    position: relative;

    width: 100%;
    max-width: 1380px;

    min-height: 700px;

    margin: 0 auto;

    padding:
        95px 55px
        130px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(500px, 0.9fr);

    align-items: center;

    gap: 50px;

    z-index: 2;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.ap-hero-content {
    position: relative;
    z-index: 10;

    animation:
        apContentReveal 1s cubic-bezier(.2,.8,.2,1) both;
}


.ap-hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 22px;

    color: #527898;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;
}


.ap-eyebrow-line {
    width: 35px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #126ac0,
            #5db6ed
        );
}


.ap-hero-title {
    max-width: 720px;

    margin: 0;

    color: #0b2846;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(55px, 5.2vw, 48px);

    font-weight: 700;

    line-height: 1.01;

    letter-spacing: -2.8px;
}


.ap-hero-title span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #0865bd 0%,
            #258ee0 55%,
            #54a9e7 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    background-size: 200% auto;

    animation:
        apGradientText 5s ease infinite;
}


.ap-hero-description {
    max-width: 610px;

    margin:
        28px 0
        32px;

    color: #526d84;

    font-family:
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   ROTATING WORD
   ========================================================= */

.ap-word-rotate {
    position: relative;

    display: inline-block;

    height: 1.7em;

    overflow: hidden;

    vertical-align: bottom;

    transition:
        width .45s cubic-bezier(.4, 0, .2, 1);
}


.ap-word-track {
    display: block;

    transition:
        transform .6s cubic-bezier(.76, 0, .24, 1);
}


.ap-word-track span {
    display: block;

    width: max-content;
    height: 1.7em;

    line-height: 1.7em;

    white-space: nowrap;

    color: #0f7ad1;

    font-weight: 700;

    letter-spacing: .6px;

    text-transform: uppercase;

    background:
        linear-gradient(
            90deg,
            #0865bd 0%,
            #258ee0 55%,
            #54a9e7 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    background-size: 200% auto;

    animation:
        apGradientText 5s ease infinite;
}


.ap-word-sr {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip-path: inset(50%);

    white-space: nowrap;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ap-hero-actions {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 45px;
}


.ap-primary-btn,
.ap-secondary-btn {
    min-height: 54px;

    padding:
        0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    border-radius: 30px;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.ap-primary-btn {
    position: relative;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            #0866bf,
            #1680d5,
            #3ba0e9
        );

    background-size: 200% auto;

    box-shadow:
        0 14px 30px
        rgba(13, 105, 184, .22);

    animation:
        apButtonGradient 5s ease infinite;
}


.ap-primary-btn::before {
    content: "";

    position: absolute;

    width: 70px;
    height: 140px;

    top: -45px;
    left: -100px;

    background:
        rgba(255,255,255,.25);

    transform: rotate(25deg);

    transition:
        left .6s ease;
}


.ap-primary-btn:hover::before {
    left: 120%;
}


.ap-primary-btn:hover {
    color: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 38px
        rgba(13, 105, 184, .30);
}


.ap-primary-btn b {
    font-size: 20px;

    font-weight: 400;

    transition:
        transform .3s ease;
}


.ap-primary-btn:hover b {
    transform:
        translateX(5px);
}


.ap-secondary-btn {
    color: #0d5fae;

    background:
        rgba(255,255,255,.72);

    border:
        1px solid #9bc7ea;

    box-shadow:
        0 5px 18px
        rgba(30,100,150,.04);
}


.ap-secondary-btn:hover {
    color: #0d5fae;

    background: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 30px
        rgba(30,100,150,.12);
}


/* =========================================================
   STATS
   ========================================================= */

.ap-hero-stats {
    display: flex;

    align-items: center;

    gap: 30px;
}


.ap-stat {
    display: flex;

    align-items: center;

    gap: 11px;
}


.ap-stat-icon {
    width: 47px;
    height: 47px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #e4f3ff,
            #ffffff
        );

    border:
        1px solid #cde7f8;

    box-shadow:
        0 8px 20px
        rgba(41, 122, 180, .07);
}


.ap-stat-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: #116bc1;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.ap-stat-content strong {
    display: block;

    color: #0884fb;

    font-family: Arial, sans-serif;

    font-size: 19px;

    font-weight: 700;
}


.ap-stat-content small {
    display: block;

    margin-top: 4px;

    color: #0088ff;

    font-family: Arial, sans-serif;

    font-size: 14px;
}


/* =========================================================
   RIGHT PROFILE AREA
   ========================================================= */

.ap-hero-profile {
    position: relative;

    min-height: 580px;

    display: flex;

    align-items: center;
    justify-content: center;

    animation:
        apProfileReveal 1.1s
        cubic-bezier(.2,.8,.2,1)
        .15s
        both;
}


/* =========================================================
   PROFILE GLOW
   ========================================================= */

.ap-profile-glow {
    position: absolute;

    width: 570px;
    height: 570px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(101, 190, 255, .28) 0%,
            rgba(104, 188, 246, .16) 38%,
            transparent 70%
        );

    filter: blur(3px);

    animation:
        apProfileGlow 6s ease-in-out infinite;
}


/* =========================================================
   RINGS
   ========================================================= */

.ap-profile-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(76, 159, 222, .16);
}


.ap-profile-ring-one {
    width: 500px;
    height: 500px;

    animation:
        apRingPulse 6s ease-in-out infinite;
}


.ap-profile-ring-two {
    width: 390px;
    height: 390px;

    border:
        1px solid rgba(47, 135, 208, .20);

    animation:
        apRingPulse 6s ease-in-out
        1s
        infinite;
}


/* =========================================================
   PROFILE BACKGROUND
   ========================================================= */

.ap-profile-image-bg {
    position: absolute;

    width: 440px;
    height: 500px;

    bottom: 10px;

    border-radius:
        50% 50% 22% 22%;

    background:
        linear-gradient(
            145deg,
            #e8f6ff,
            #bfe4fb
        );

    box-shadow:
        inset 0 0 80px
        rgba(255,255,255,.45);
}


/* =========================================================
   PROFILE IMAGE
   ========================================================= */

.ap-profile-image-wrap {
    position: relative;

    width: 470px;
    height: 580px;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    z-index: 4;
}


.ap-profile-image {
    position: relative;

    width: 670px;
    max-width: none;

    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 30px
            rgba(15, 54, 83, .20)
        );

    animation:
        apPersonFloat 5s
        ease-in-out
        infinite;
}


/* =========================================================
   DOT PATTERN
   ========================================================= */

.ap-profile-dots {
    position: absolute;

    width: 100px;
    height: 100px;

    top: 55px;
    right: 20px;

    opacity: .5;

    background-image:
        radial-gradient(
            #55a9df 1.5px,
            transparent 1.5px
        );

    background-size: 13px 13px;

    animation:
        apDotsFloat 7s ease-in-out infinite;
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.ap-profile-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        13px 17px;

    min-width: 205px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.91);

    border:
        1px solid
        rgba(216,235,248,.95);

    box-shadow:
        0 18px 40px
        rgba(30, 94, 140, .13);

    backdrop-filter:
        blur(15px);

    z-index: 8;
}


.ap-profile-card-top {
    top: 110px;
    left: 10px;

    animation:
        apFloatingCard 5s
        ease-in-out
        infinite;
}


.ap-profile-card-bottom {
    right: -15px;
    bottom: 110px;

    animation:
        apFloatingCard 5s
        ease-in-out
        1.3s
        infinite;
}


.ap-profile-card-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #e4f3ff,
            #d3ecff
        );
}


.ap-profile-card-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: #1673c9;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.ap-green-icon {
    background:
        linear-gradient(
            135deg,
            #e7f8f3,
            #d1f0e5
        );
}


.ap-green-icon svg {
    stroke: #198b6b;
}


.ap-profile-card span {
    display: block;

    color: #8195a5;

    font-family: Arial, sans-serif;

    font-size: 13px;
}


.ap-profile-card strong {
    display: block;

    margin-top: 4px;

    color: #173650;

    font-family: Arial, sans-serif;

    font-size: 16px;
}


/* =========================================================
   PROFILE BADGE
   ========================================================= */

.ap-profile-badge {
    position: absolute;

    right: 25px;
    top: 35px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px 15px;

    border-radius: 30px;

    background:
        rgba(255,255,255,.82);

    border:
        1px solid #d8ebf7;

    box-shadow:
        0 12px 28px
        rgba(25, 90, 135, .10);

    backdrop-filter:
        blur(12px);

    z-index: 8;

    animation:
        apBadgeFloat 4s
        ease-in-out
        infinite;
}


.ap-badge-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #20a777;

    box-shadow:
        0 0 0 5px
        rgba(32,167,119,.10);

    animation:
        apDotPulse 2s
        ease-in-out
        infinite;
}


.ap-profile-badge strong {
    display: block;

    color: #183a55;

    font-family: Arial, sans-serif;

    font-size: 16px;
}


.ap-profile-badge small {
    display: block;

    margin-top: 2px;

    color: #8397a7;

    font-family: Arial, sans-serif;

    font-size: 13px;
}


/* =========================================================
   BOTTOM WAVE
   ========================================================= */

.ap-hero-wave {
    position: absolute;

    left: -5%;
    bottom: -1px;

    width: 110%;

    min-height: 115px;

    padding-top: 35px;

    background: #ffffff;

    clip-path:
        ellipse(70% 70% at 50% 100%);

    z-index: 10;
}


.ap-wave-content {
    text-align: center;
}


.ap-wave-content span {
    display: block;

    color: #5c91bb;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;
}


.ap-wave-content h2 {
    margin:
        13px 0 0;

    color: #102c48;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    font-weight: 600;
}


.ap-wave-content strong {
    color: #166fc4;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes apContentReveal {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes apProfileReveal {

    from {
        opacity: 0;

        transform:
            translateX(50px)
            scale(.96);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}


@keyframes apPersonFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


@keyframes apFloatingCard {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }
}


@keyframes apBadgeFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-7px);
    }
}


@keyframes apProfileGlow {

    0%,
    100% {
        transform:
            scale(1);
        opacity: .75;
    }

    50% {
        transform:
            scale(1.08);
        opacity: 1;
    }
}


@keyframes apRingPulse {

    0%,
    100% {
        transform:
            scale(1);
        opacity: .7;
    }

    50% {
        transform:
            scale(1.04);
        opacity: 1;
    }
}


@keyframes apGlowFloat {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-20px, 20px);
    }
}


@keyframes apDotsFloat {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-8px, 12px);
    }
}


@keyframes apGradientText {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}


@keyframes apButtonGradient {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}


@keyframes apDotPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: .6;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .ap-hero-container {
        grid-template-columns:
            1fr
            1fr;

        gap: 20px;

        padding:
            75px 35px
            120px;
    }


    .ap-hero-title  {
        font-size: 40px;
    }


    .ap-profile-image-wrap {
        width: 400px;
        height: 520px;
    }


    .ap-profile-image {
        width: 400px;
    }


    .ap-profile-image-bg {
        width: 380px;
        height: 440px;
    }


    .ap-profile-ring-one {
        width: 420px;
        height: 420px;
    }


    .ap-profile-ring-two {
        width: 330px;
        height: 330px;
    }


    .ap-profile-card-top {
        left: -5px;
    }


    .ap-profile-card-bottom {
        right: -5px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ap-hero {
        min-height: 481px;

        overflow: hidden;
    }


    .ap-hero-container {

        display: block;

        min-height: auto;

        text-align: left;

        padding:
            28px 20px
            112px;
    }


    /* Content */

    .ap-hero-content {

        display: contents;
    }


    .ap-hero-eyebrow {

        position: relative;

        z-index: 5;

        justify-content: flex-start;

        font-size: 9px;

        letter-spacing: 2px;

        margin-bottom: 12px;
    }


    .ap-eyebrow-line {
        width: 22px;
    }


    .ap-hero-title {

        position: relative;

        z-index: 5;

        text-align: left;

        max-width: 100%;

        font-size: clamp(31px, 8vw, 40px);

        line-height: 1.08;

        letter-spacing: -1.2px;
    }


    .ap-hero-description {
        display: none;
    }


    /* Rotating Word */

    .ap-word-rotate {

        height: 1.65em;
    }


    .ap-word-track span {

        height: 1.65em;

        line-height: 1.65em;
    }


    /* Buttons */

    .ap-hero-actions{
    display: flex;
    flex-direction: column;   /* one below another */
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    position: relative;
    z-index: 6;
}

.ap-primary-btn,
.ap-secondary-btn{
    display: none;

                /* same width */
    min-height: 48px;
    padding: 6px 19px;
    font-size: 12px;
    justify-content: center;
}
    /* Stats */

    .ap-hero-stats {

        justify-content: flex-start;

        gap: clamp(8px, 3vw, 18px);

        position: absolute;

        right: 20px;
        bottom: 22px;
        left: 20px;

        z-index: 7;
    }


    .ap-stat {

        gap: 6px;
    }


    .ap-stat-icon {

        width: 35px;
        height: 35px;

        border-radius: 10px;
    }


    .ap-stat-icon svg {

        width: 17px;
        height: 17px;
    }


    .ap-stat-content strong {

        font-size: 13px;
    }


    .ap-stat-content small {

        font-size: 12px;
    }


    /* Profile */

    .ap-hero-profile {

        position: absolute;

        top: 0;
        right: -22px;

        width: 58%;
        min-height: 285px;

        z-index: 3;
    }


    .ap-profile-glow {

        width: 280px;
        height: 280px;
    }


    .ap-profile-ring-one {

        width: 265px;
        height: 265px;
    }


    .ap-profile-ring-two {

        width: 210px;
        height: 210px;
    }


    .ap-profile-image-wrap {

        width: 100%;
        height: 285px;
    }


    .ap-profile-image {

        width: 225%;
    }


    .ap-profile-image-bg {

        width: 155%;
        height: 245px;

        bottom: 5px;
    }


    .ap-profile-card {

        display: none;
    }


    .ap-profile-card-top {

        top: 75px;

        left: -2px;
    }


    .ap-profile-card-bottom {

        right: -2px;

        bottom: 75px;
    }


    .ap-profile-card-icon {

        width: 34px;
        height: 34px;

        border-radius: 9px;
    }


    .ap-profile-card-icon svg {

        width: 17px;
        height: 17px;
    }


    .ap-profile-card span {

        font-size: 7px;
    }


    .ap-profile-card strong {

        font-size: 9px;
    }


    .ap-profile-badge {

        display: none;
    }


    .ap-profile-badge strong {

        font-size: 8px;
    }


    .ap-profile-badge small {

        font-size: 7px;
    }


    .ap-profile-dots {

        width: 62px;
        height: 62px;

        right: 0;
        top: 20px;

        background-size: 9px 9px;
    }


    /* Wave */

    .ap-hero-wave {

        min-height: 90px;

        padding-top: 30px;

        clip-path:
            ellipse(85% 65% at 50% 100%);
    }


    .ap-wave-content span {

        font-size: 7px;

        letter-spacing: 2.5px;
    }


    .ap-wave-content h2 {

        margin-top: 8px;

        padding: 0 20px;

        font-size: 19px;

        line-height: 1.25;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .ap-hero-container {

        padding:
            24px 15px
            105px;
    }


    .ap-hero-title {

        font-size: clamp(29px, 9vw, 35px);
    }


    .ap-hero-description {
        display: none;
    }


    .ap-hero-actions {

        flex-direction: column;
        margin-top: 30px;
        width: 100%;
    }


   
    .ap-secondary-btn {
        display: none;
    }
    .ap-primary-btn {
        display: block;
    }

    .ap-hero-stats {

        

     

        gap: 15px;
    }


    .ap-stat {

        flex-direction: column;

        text-align: center;

        gap: 4px;
    }


    .ap-stat-icon {

        width: 31px;
        height: 31px;
    }


    .ap-stat-content strong {

        font-size: 12px;
    }


    .ap-stat-content small {

        font-size: 7px;
    }


    .ap-hero-profile {

        top: 124px;
        right: -6px;
        

        width: 45%;
        min-height: 540px;
    }


    .ap-profile-image-wrap {

        height: 255px;
    }


    .ap-profile-image {

        width: 220%;
    }


    .ap-profile-image-bg {

        width: 150%;
        height: 220px;
    }


    .ap-profile-ring-one {

        width: 235px;
        height: 235px;
    }


    .ap-profile-ring-two {

        width: 190px;
        height: 190px;
    }


    .ap-profile-card {

        transform: scale(.82);
    }


    .ap-profile-card-top {

        left: -18px;
    }


    .ap-profile-card-bottom {

        right: -18px;
    }


    .ap-profile-badge {

        right: -5px;

        transform: scale(.8);
    }


    .ap-wave-content h2 {

        font-size: 17px;
    }

}


/* iPhone / 375px Mobile */
@media only screen and (max-width: 375px) {
  .ap-hero {
    min-height: 545px;
  }

  .ap-hero-profile {
    top: 181px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-hero *,
    .ap-hero *::before,
    .ap-hero *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }

}



/* =========================================
  SECOND SECTION - VALUE CARDS SECTION 
========================================= */

.ap-value-section {
    position: relative;

    width: 100%;

    padding: 8px 20px 30px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fcff 100%
        );

    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.ap-value-container {
    position: relative;
    padding: 50px 0px;
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 0;
}


/* =========================================
   CARD
========================================= */

.ap-value-card {
    position: relative;
  
    min-height: 164px;

    padding:
        18px 22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(247,252,255,.95)
        );

    border:
        1px solid #e1edf6;

    border-radius: 17px;

    overflow: hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease,
        background .4s ease;

    animation:
        apValueReveal .7s ease both;
        margin: 0px 5px;
}


/* Stagger animation */

.ap-value-card:nth-child(1) {
    animation-delay: .05s;
}

.ap-value-card:nth-child(2) {
    animation-delay: .15s;
}

.ap-value-card:nth-child(3) {
    animation-delay: .25s;
}

.ap-value-card:nth-child(4) {
    animation-delay: .35s;
}


/* =========================================
   GRADIENT TOP LINE
========================================= */

.ap-value-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;

    width: 70%;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4da9e8,
            #126ac0,
            #4da9e8,
            transparent
        );

    transform:
        scaleX(.35);

    opacity: .45;

    transition:
        transform .5s ease,
        opacity .5s ease;
}


/* =========================================
   HOVER GLOW
========================================= */

.ap-value-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -75px;
    right: -65px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(81,173,239,.18),
            transparent 70%
        );

    transition:
        transform .5s ease;
}


/* =========================================
   HOVER
========================================= */

.ap-value-card:hover {

    transform:
        translateY(-8px);

    border-color:
        #b9dbf3;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f8ff
        );

    box-shadow:
        0 18px 38px
        rgba(34,108,158,.12);
}


.ap-value-card:hover::before {

    transform:
        scaleX(1);

    opacity: 1;
}


.ap-value-card:hover::after {

    transform:
        scale(1.5);
}


/* =========================================
   ICON
========================================= */

.ap-value-icon {

    position: relative;

    width: 60px;
    height: 60px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #eaf6ff 55%,
            #dcefff 100%
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(76,160,218,.06);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}


.ap-value-card:hover .ap-value-icon {

    transform:
        translateY(-3px)
        rotate(-4deg)
        scale(1.06);

    box-shadow:
        0 8px 22px
        rgba(43,131,194,.14);
}


/* =========================================
   ICON SVG
========================================= */

.ap-value-icon svg {

    width: 29px;
    height: 29px;

    fill: none;

    stroke:
        #126bc2;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .4s ease,
        stroke .4s ease;
}


.ap-value-card:hover
.ap-value-icon svg {

    transform:
        scale(1.08);

    stroke:
        #075aa9;
}


/* =========================================
   CONTENT
========================================= */

.ap-value-content h3 {

    position: relative;

    margin:
        0 0 6px;

    color:
        #102b47;

    font-family:
        Arial,
        sans-serif;

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.25;
}


.ap-value-content p {

    max-width:
        210px;

    margin:
        0 auto;

    color:
        #667d91;

    font-family:
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.5;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes apValueReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================
   SUBTLE ICON FLOAT
========================================= */

.ap-value-card:nth-child(1)
.ap-value-icon {

    animation:
        apIconFloat 4s ease-in-out infinite;
}


.ap-value-card:nth-child(2)
.ap-value-icon {

    animation:
        apIconFloat 4s ease-in-out .5s infinite;
}


.ap-value-card:nth-child(3)
.ap-value-icon {

    animation:
        apIconFloat 4s ease-in-out 1s infinite;
}


.ap-value-card:nth-child(4)
.ap-value-icon {

    animation:
        apIconFloat 4s ease-in-out 1.5s infinite;
}


@keyframes apIconFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .ap-value-container {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }

    .ap-value-card {

        min-height: 170px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-value-section {

        padding:
            5px 15px 25px;
    }

    .ap-value-container {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 8px;
    }

    .ap-value-card {

        min-height: 170px;

        padding:
            16px 10px;

        border-radius:
            14px;
    }

    .ap-value-icon {

        width: 52px;
        height: 52px;

        margin-bottom: 8px;
    }

    .ap-value-icon svg {

        width: 25px;
        height: 25px;
    }

    .ap-value-content h3 {

        font-size: 13px;

        line-height: 1.25;
    }

    .ap-value-content p {

        max-width: 145px;

        font-size: 10px;

        line-height: 1.45;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .ap-value-card {

        min-height: 165px;

        padding:
            14px 7px;
    }

    .ap-value-icon {

        width: 48px;
        height: 48px;
    }

    .ap-value-icon svg {

        width: 22px;
        height: 22px;
    }

    .ap-value-content h3 {

        font-size: 12px;
    }

    .ap-value-content p {

        font-size: 9px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-value-card,
    .ap-value-icon {

        animation: none !important;

        transition: none !important;
    }
}



/* =========================================
  THIRD SECTION - LIVE WEBINAR SECTION 
========================================= */

/* Animatable spark angle (used by border sparks) */

@property --ap-webinar-angle {
    syntax: "<angle>";

    inherits: false;

    initial-value: 0deg;
}

.ap-webinar-section {
    position: relative;

    width: 100%;

    padding: 70px 20px 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f1f8fe 100%
        );

    overflow: hidden;
}


/* =========================================
   STAGE PANEL
   ========================================= */

.ap-webinar-stage {
    position: relative;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    padding:
        62px 58px
        52px;

    border-radius: 34px;

    background:
        radial-gradient(
            115% 90% at 84% 6%,
            rgba(74, 168, 255, .32) 0%,
            rgba(74, 168, 255, 0) 58%
        ),
        radial-gradient(
            85% 70% at 8% 102%,
            rgba(255, 180, 46, .18) 0%,
            rgba(255, 180, 46, 0) 62%
        ),
        linear-gradient(
            155deg,
            #05121f 0%,
            #0a2038 48%,
            #0d2b49 100%
        );

    box-shadow:
        0 42px 90px
        rgba(6, 24, 42, .34);

    overflow: hidden;

    isolation: isolate;
}


/* Hairline edge */

.ap-webinar-stage::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    border:
        1px solid
        rgba(255, 255, 255, .11);

    pointer-events: none;

    z-index: 3;
}


/* Dot field */

.ap-webinar-stage::after {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, .17) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    opacity: .55;

    -webkit-mask-image:
        radial-gradient(
            120% 80% at 78% 0%,
            #000 0%,
            transparent 72%
        );

    mask-image:
        radial-gradient(
            120% 80% at 78% 0%,
            #000 0%,
            transparent 72%
        );

    pointer-events: none;

    z-index: 1;
}


/* Stage light */

.ap-webinar-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(60px);

    pointer-events: none;

    z-index: 0;
}

.ap-webinar-glow-one {
    width: 460px;
    height: 460px;

    top: -180px;
    right: -120px;

    background:
        radial-gradient(
            circle,
            rgba(74, 168, 255, .5),
            transparent 68%
        );

    animation:
        apWebinarDrift 16s
        ease-in-out
        infinite;
}

.ap-webinar-glow-two {
    width: 420px;
    height: 420px;

    left: -140px;
    bottom: -200px;

    background:
        radial-gradient(
            circle,
            rgba(255, 160, 40, .38),
            transparent 70%
        );

    animation:
        apWebinarDrift 19s
        ease-in-out
        infinite reverse;
}


/* =========================================
   CONTAINER
   ========================================= */

.ap-webinar-container {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    grid-template-areas:
        "content speaker";

    align-items: center;

    gap: 48px 60px;

    z-index: 2;
}


/* =========================================
   LEFT CONTENT
========================================= */

.ap-webinar-content {
    position: relative;

    grid-area: content;

    z-index: 5;

    animation:
        apWebinarReveal .9s
        cubic-bezier(.2,.8,.2,1)
        both;
}


/* Badge */

.ap-webinar-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 16px
        9px 13px;

    border-radius: 999px;

    border:
        1px solid
        rgba(255, 180, 46, .4);

    background:
        rgba(255, 180, 46, .1);

    color: #ffc861;

    font-family:
        Arial,
        sans-serif;

    font-size: 11.5px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 2.6px;

    text-transform: uppercase;
}

.ap-webinar-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ffb42e;

    animation:
        apWebinarPulse 2.2s
        ease-in-out
        infinite;
}


/* Title */

.ap-webinar-title {
    max-width: 560px;

    margin:
        22px 0 0;

    color: #eef6fd;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(38px, 4.1vw, 58px);

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -2.2px;
}

.ap-webinar-title span {
    display: inline-block;

    white-space: nowrap;

    color: #ffb42e;

    background:
        linear-gradient(
            100deg,
            #ffd47a 0%,
            #ffb42e 50%,
            #ff9a17 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* Description */

.ap-webinar-description {
    max-width: 500px;

    margin:
        20px 0 0;

    color: #b9d2e8;

    font-family:
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1.72;
}


/* =========================================
   SESSION TICKET
========================================= */

.ap-webinar-ticket {
    position: relative;

    max-width: 560px;

    margin-top: 30px;

    padding:
        18px 22px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 0 22px;

    border-radius: 20px;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .085),
            rgba(255, 255, 255, .03)
        );
}

.ap-webinar-ticket-part {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}

.ap-webinar-ticket-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    border:
        1px solid
        rgba(255, 180, 46, .32);

    background:
        rgba(255, 180, 46, .13);
}

.ap-webinar-ticket-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: #ffc861;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.ap-webinar-ticket-text {
    min-width: 0;
}

.ap-webinar-ticket-text strong {
    display: block;

    color: #f1f8fe;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.3;
}

.ap-webinar-ticket-text small {
    display: block;

    margin-top: 4px;

    color: #9db8d1;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.3;
}

.ap-webinar-ticket-perf {
    width: 1px;

    align-self: stretch;

    background-image:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, .3) 0 5px,
            transparent 5px 11px
        );
}


/* =========================================
   CTA
   ========================================= */

.ap-webinar-cta {
    position: relative;

    min-height: 58px;

    margin-top: 28px;

    padding:
        0 30px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    border-radius: 18px;

    overflow: hidden;

    color: #08182b;

    font-family:
        Arial,
        sans-serif;

    font-size: 15.5px;

    font-weight: 700;

    text-decoration: none;

    background:
        linear-gradient(
            120deg,
            #ffd47a 0%,
            #ffb42e 52%,
            #ff9a17 100%
        );

    background-size: 200% auto;

    box-shadow:
        0 18px 36px
        rgba(255, 150, 20, .3),

        0 0 0 1px
        rgba(255, 213, 130, .55) inset;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-position .6s ease;
}

.ap-webinar-cta::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -60%;

    width: 45%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255, 255, 255, .55),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left .7s cubic-bezier(.2,.8,.2,1);

    pointer-events: none;
}

.ap-webinar-cta b {
    width: 26px;
    height: 26px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(8, 24, 43, .14);

    font-size: 14px;

    transition:
        transform .3s ease;
}

.ap-webinar-cta:hover {
    transform:
        translateY(-2px);

    background-position: 100% center;

    box-shadow:
        0 24px 44px
        rgba(255, 150, 20, .4),

        0 0 0 1px
        rgba(255, 213, 130, .7) inset;
}

.ap-webinar-cta:hover::after {
    left: 115%;
}

.ap-webinar-cta:hover b {
    transform:
        translateX(3px);
}

.ap-webinar-cta:focus-visible {
    outline:
        3px solid
        #ffd47a;

    outline-offset: 3px;
}


/* =========================================
   ACTIONS
========================================= */

.ap-webinar-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

    margin-top: 28px;
}

.ap-webinar-actions .ap-webinar-cta {
    margin-top: 0;
}

.ap-webinar-offer {
    margin: 14px 0 0;
    color: #ffe0b0;
    font-size: 15px;
    font-weight: 600;
}

.ap-webinar-actions .ap-webinar-offer {
    margin: 0;
}

.ap-webinar-offer strong {
    color: #ffb33f;
    font-weight: 800;
}


/* =========================================
   SECONDARY BUTTON
========================================= */

.ap-webinar-ghost {
    position: relative;

    min-height: 58px;

    padding:
        0 32px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    border:
        1px solid
        rgba(255, 203, 110, .4);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .02)
        );

    color: #ffd9a0;

    font-family:
        Arial,
        sans-serif;

    font-size: 15.5px;

    font-weight: 700;

    text-decoration: none;

    --ap-webinar-angle: 0deg;

    box-shadow:
        0 16px 32px
        rgba(3, 14, 26, .35);

    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* Spark ring around the button / nameplate border */

.ap-webinar-ghost::before,
.ap-webinar-speaker-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1.5px;

    background:
        conic-gradient(
            from var(--ap-webinar-angle),
            rgba(255, 203, 110, .22) 0deg,
            rgba(255, 203, 110, .22) 196deg,
            rgba(255, 214, 140, .95) 252deg,
            #ffffff 282deg,
            rgba(255, 214, 140, .95) 312deg,
            rgba(255, 203, 110, .22) 360deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    animation:
        apWebinarBorderSpin 4.5s
        linear
        infinite;

    pointer-events: none;
}

.ap-webinar-ghost:hover {
    transform:
        translateY(-2px);

    color: #ffffff;

    border-color:
        rgba(255, 214, 140, .72);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .14),
            rgba(255, 255, 255, .05)
        );

    box-shadow:
        0 22px 42px
        rgba(3, 14, 26, .45),

        0 0 28px
        rgba(255, 180, 46, .26);
}

.ap-webinar-ghost:focus-visible {
    outline:
        3px solid
        #ffd47a;

    outline-offset: 3px;
}


/* =========================================
   SPEAKER
========================================= */

.ap-webinar-speaker {
    position: relative;

    grid-area: speaker;

    padding-bottom: 24px;

    animation:
        apWebinarSpeakerReveal 1s
        cubic-bezier(.2,.8,.2,1)
        .12s
        both;
}

.ap-webinar-frame {
    position: relative;

    width: 100%;
    max-width: 470px;

    margin: 0 auto;

    aspect-ratio: 1 / 1;

    border-radius: 26px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .34);

    /* Deep navy graph-paper backdrop with white grid lines */
    background:
        linear-gradient(
            0deg,
            rgba(3, 12, 24, .55) 0%,
            rgba(3, 12, 24, 0) 32%
        ),
        linear-gradient(
            rgba(255, 255, 255, .07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .07) 1px,
            transparent 1px
        ),
        linear-gradient(
            165deg,
            #123a63 0%,
            #0b2747 55%,
            #071a31 100%
        );

    background-size:
        100% 100%,
        34px 34px,
        34px 34px,
        100% 100%;

    background-position:
        0 0,
        -1px -1px,
        -1px -1px,
        0 0;

    box-shadow:
        0 34px 64px
        rgba(3, 14, 26, .5),

        0 0 38px
        rgba(255, 190, 90, .2);

    --ap-webinar-angle: 0deg;
}


/* Spark ring around the frame */

.ap-webinar-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1.6px;

    background:
        conic-gradient(
            from var(--ap-webinar-angle),
            rgba(255, 255, 255, .16) 0deg,
            rgba(255, 255, 255, .16) 202deg,
            rgba(255, 214, 140, .95) 256deg,
            #ffffff 288deg,
            rgba(255, 214, 140, .95) 320deg,
            rgba(255, 255, 255, .16) 360deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    animation:
        apWebinarBorderSpin 6s
        linear
        infinite;

    pointer-events: none;

    z-index: 4;
}


/* Speaker cutout */

.ap-webinar-media-img {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 100%;
    height: auto;

    max-width: none;

    display: block;

    transform:
        translateX(-50%);

    filter:
        drop-shadow(
            0 0 1px
            rgba(190, 228, 255, .7)
        )
        drop-shadow(
            0 0 18px
            rgba(110, 190, 255, .35)
        );
}


/* Rising stock chart behind the speaker */

.ap-webinar-chart {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.ap-webinar-chart-candles path {
    fill: none;

    stroke: rgba(255, 255, 255, .22);

    stroke-width: 1.5;
}

.ap-webinar-chart-candles rect {
    fill: rgba(255, 255, 255, .2);
}

.ap-webinar-chart-candles rect.is-down {
    fill: rgba(255, 255, 255, .08);
}

.ap-webinar-chart-area {
    fill: url(#apWebinarChartFill);
}

.ap-webinar-chart-line,
.ap-webinar-chart-arrow {
    fill: none;

    stroke: rgba(160, 218, 255, .85);

    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.ap-webinar-chart-dot {
    fill: #ffb42e;

    transform-box: fill-box;
    transform-origin: center;

    filter:
        drop-shadow(
            0 0 6px
            rgba(255, 180, 46, .9)
        );

    animation:
        apWebinarChartPulse 2.4s
        ease-in-out
        infinite;
}

@keyframes apWebinarChartPulse {

    0%,
    100% {
        transform: scale(1);

        opacity: 1;
    }

    50% {
        transform: scale(1.5);

        opacity: .6;
    }
}


/* Speaker nameplate */

.ap-webinar-speaker-card {
    position: absolute;

    left: 50%;
    bottom: 48px;

    width: max-content;
    max-width: 92%;

    padding:
        13px 20px;

    display: block;

    text-align: center;

    border-radius: 16px;

    border:
        1px solid
        rgba(255, 203, 110, .4);

    background:
        rgba(7, 22, 39, .94);

    --ap-webinar-angle: 0deg;

    box-shadow:
        0 20px 38px
        rgba(2, 10, 20, .55),

        0 0 24px
        rgba(255, 180, 46, .18);

    transform:
        translateX(-50%);
}

.ap-webinar-speaker-card strong {
    display: block;

    color: #f1f8fe;

    font-family:
        Arial,
        sans-serif;

    font-size: 14.5px;

    font-weight: 700;

    line-height: 1.25;
}

.ap-webinar-speaker-card small {
    display: block;

    margin-top: 3px;

    color: #9db8d1;

    font-family:
        Arial,
        sans-serif;

    font-size: 12.5px;

    line-height: 1.25;
}


/* =========================================
   SPARKS
========================================= */

.ap-webinar-sparks {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 5;
}

.ap-webinar-sparks i {
    position: absolute;

    display: block;

    width: 12px;
    height: 12px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffe0a3 52%,
            #ffb42e 100%
        );

    clip-path:
        polygon(
            50% 0%,
            58% 42%,
            100% 50%,
            58% 58%,
            50% 100%,
            42% 58%,
            0% 50%,
            42% 42%
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(255, 205, 110, .95)
        );

    opacity: .15;

    animation:
        apWebinarSparkle 2.6s
        ease-in-out
        infinite;
}


/* Sparks on the speaker frame */

.ap-webinar-frame .ap-webinar-sparks i:nth-child(1) {
    top: 12px;
    right: 14px;

    width: 16px;
    height: 16px;
}

.ap-webinar-frame .ap-webinar-sparks i:nth-child(2) {
    top: 28%;
    left: 8px;

    width: 11px;
    height: 11px;

    animation-delay: .9s;
}

.ap-webinar-frame .ap-webinar-sparks i:nth-child(3) {
    bottom: 88px;
    left: 10px;

    width: 14px;
    height: 14px;

    animation-delay: 1.6s;
}

.ap-webinar-frame .ap-webinar-sparks i:nth-child(4) {
    right: 18px;
    bottom: 20px;

    width: 10px;
    height: 10px;

    animation-delay: 2.2s;
}


/* Sparks on the secondary button border */

.ap-webinar-ghost .ap-webinar-sparks i:nth-child(1) {
    top: -5px;
    left: 34px;

    width: 10px;
    height: 10px;
}

.ap-webinar-ghost .ap-webinar-sparks i:nth-child(2) {
    right: 38px;
    bottom: -5px;

    width: 12px;
    height: 12px;

    animation-delay: 1.1s;
}

.ap-webinar-ghost .ap-webinar-sparks i:nth-child(3) {
    top: calc(50% - 4px);
    right: -5px;

    width: 9px;
    height: 9px;

    animation-delay: 2s;
}


/* Sparks on the speaker nameplate border */

.ap-webinar-speaker-card .ap-webinar-sparks i:nth-child(1) {
    top: -5px;
    left: 26px;

    width: 10px;
    height: 10px;
}

.ap-webinar-speaker-card .ap-webinar-sparks i:nth-child(2) {
    right: 30px;
    bottom: -5px;

    width: 12px;
    height: 12px;

    animation-delay: 1.1s;
}

.ap-webinar-speaker-card .ap-webinar-sparks i:nth-child(3) {
    top: calc(50% - 4px);
    right: -5px;

    width: 9px;
    height: 9px;

    animation-delay: 2s;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes apWebinarReveal {

    from {
        opacity: 0;

        transform:
            translateY(24px)
            scale(.98);
    }

    70% {
        opacity: 1;

        transform:
            translateY(-3px)
            scale(1.004);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes apWebinarSpeakerReveal {

    from {
        opacity: 0;

        transform:
            translateY(28px)
            scale(.96);
    }

    70% {
        opacity: 1;

        transform:
            translateY(-3px)
            scale(1.005);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes apWebinarPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px
            rgba(255, 180, 46, .22);
    }

    50% {
        box-shadow:
            0 0 0 9px
            rgba(255, 180, 46, .06);
    }
}

@keyframes apWebinarDrift {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-26px, 22px, 0)
            scale(1.08);
    }
}

@keyframes apWebinarBorderSpin {

    to {
        --ap-webinar-angle: 360deg;
    }
}

@keyframes apWebinarSparkle {

    0%,
    100% {
        opacity: .12;

        transform:
            scale(.4)
            rotate(0deg);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.05)
            rotate(90deg);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .ap-webinar-stage {

        padding:
            52px 40px 44px;
    }

    .ap-webinar-container {

        gap: 42px 44px;
    }

    .ap-webinar-title {

        font-size:
            clamp(34px, 4.6vw, 44px);

        letter-spacing: -1.6px;
    }

    .ap-webinar-description {

        font-size: 16px;
    }

    .ap-webinar-ticket {

        padding:
            16px 18px;

        gap: 0 16px;
    }

    .ap-webinar-ticket-text strong {

        font-size: 14px;
    }

    .ap-webinar-ticket-text small {

        font-size: 12px;
    }

    .ap-webinar-frame {

        max-width: 400px;

        border-radius: 22px;
    }
}


/* =========================================
   STACK
========================================= */

@media (max-width: 900px) {

    .ap-webinar-section {

        padding:
            55px 20px 70px;
    }

    .ap-webinar-stage {

        padding:
            44px 30px 38px;

        border-radius: 28px;
    }

    .ap-webinar-container {

        grid-template-columns:
            minmax(0, 1fr);

        grid-template-areas:
            "content"
            "speaker";

        gap: 42px;
    }

    .ap-webinar-title,
    .ap-webinar-ticket {

        max-width: 100%;
    }

    .ap-webinar-description {

        max-width: 560px;
    }

    .ap-webinar-frame {

        max-width: 430px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-webinar-section {

        padding:
            45px 15px 60px;
    }

    .ap-webinar-stage {

        padding:
            34px 18px 30px;

        border-radius: 24px;
    }

    .ap-webinar-badge {

        padding:
            8px 14px 8px 11px;

        font-size: 10.5px;

        letter-spacing: 2.2px;
    }

    .ap-webinar-title {

        margin-top: 18px;

        font-size: 30px;

        letter-spacing: -.9px;
    }

    .ap-webinar-title br {

        display: none;
    }

    .ap-webinar-description {

        margin-top: 16px;

        font-size: 14.5px;

        line-height: 1.68;
    }

    .ap-webinar-ticket {

        grid-template-columns:
            minmax(0, 1fr);

        gap: 16px;

        margin-top: 24px;

        padding: 18px;

        border-radius: 18px;
    }

    .ap-webinar-ticket-perf {

        width: 100%;
        height: 1px;

        align-self: auto;

        background-image:
            repeating-linear-gradient(
                90deg,
                rgba(255, 255, 255, .3) 0 5px,
                transparent 5px 11px
            );
    }

    .ap-webinar-cta {

        width: 100%;

        max-width: 420px;

        min-height: 56px;

        margin-top: 24px;
    }

    .ap-webinar-actions {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 24px;
    }

    .ap-webinar-actions .ap-webinar-offer {

        text-align: center;
    }

    

    
    
    

    .ap-webinar-ghost {

        width: 100%;

        max-width: 420px;

        min-height: 56px;
    }

    .ap-webinar-speaker {

        padding-bottom: 20px;
    }

    .ap-webinar-frame {

        max-width: 100%;

        border-radius: 20px;
    }

    .ap-webinar-media-img {

        width: 98%;
    }

    .ap-webinar-speaker-card {

        bottom: 36px;

        padding:
            11px 16px;

        border-radius: 14px;
    }

    .ap-webinar-speaker-card strong {

        font-size: 13.5px;
    }

    .ap-webinar-speaker-card small {

        font-size: 12px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .ap-webinar-title {

        font-size: 26px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-webinar-content,
    .ap-webinar-speaker,
    .ap-webinar-dot,
    .ap-webinar-glow,
    .ap-webinar-frame::after,
    .ap-webinar-ghost::before,
    .ap-webinar-speaker-card::before,
    .ap-webinar-chart-dot,
    .ap-webinar-sparks i {

        animation: none !important;

        transition: none !important;
    }

    .ap-webinar-cta,
    .ap-webinar-cta::after,
    .ap-webinar-cta b,
    .ap-webinar-ghost {

        transition: none !important;
    }

    .ap-webinar-cta:hover,
    .ap-webinar-ghost:hover {

        transform: none;
    }
}



/* =========================================
   WEBINAR DETAILS
========================================= */

.ap-webinar-details {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;

    width: 100%;
    max-width: 1240px;

    margin: 30px auto 0;
}

.ap-webinar-detail-box {
    position: relative;

    padding: 34px 32px 30px;

    border:
        1px solid
        rgba(10, 32, 56, .08);

    border-radius: 22px;

    background:
        radial-gradient(
            120% 70% at 100% 0%,
            rgba(56, 160, 240, .1) 0%,
            rgba(56, 160, 240, 0) 55%
        ),
        #ffffff;

    box-shadow:
        0 18px 44px
        rgba(6, 24, 42, .08);

    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* Gold accent bar */

.ap-webinar-detail-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #7fd0ff 0%,
            #38a0f0 50%,
            #1668c4 100%
        );
}

.ap-webinar-detail-box:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(56, 160, 240, .3);

    box-shadow:
        0 26px 54px
        rgba(6, 24, 42, .12);
}


/* Header: icon tile + label + title */

.ap-webinar-detail-head {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 24px;
}

.ap-webinar-detail-icon {
    flex: 0 0 auto;

    width: 56px;
    height: 56px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    border:
        1px solid
        rgba(127, 208, 255, .35);

    background:
        linear-gradient(
            145deg,
            #0f3052,
            #071627
        );

    box-shadow:
        0 12px 24px
        rgba(7, 22, 39, .25);
}

.ap-webinar-detail-icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: #7fd0ff;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.ap-webinar-detail-label {
    display: inline-block;

    margin-bottom: 8px;

    padding: 4px 10px;

    border-radius: 999px;

    background:
        rgba(56, 160, 240, .1);

    color: #1668c4;

    font-family:
        Arial,
        sans-serif;

    font-size: 10.5px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.ap-webinar-detail-box h3 {
    margin: 0;

    color: #0a2038;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.5px;
}


/* Checklist rows */

.ap-webinar-detail-box ul {
    display: grid;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.ap-webinar-detail-box li {
    position: relative;

    padding: 12px 16px 12px 50px;

    border:
        1px solid
        #e8f0f7;

    border-radius: 14px;

    background: #f7fafd;

    color: #3e4d5e;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.55;

    transition:
        border-color .3s ease,
        background .3s ease;
}

.ap-webinar-detail-box li:hover {
    border-color:
        rgba(56, 160, 240, .3);

    background: #f0f8ff;
}

/* Check circle */
.ap-webinar-detail-box li::before {
    content: "";

    position: absolute;

    top: 12px;
    left: 14px;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #7fd0ff,
            #1f7fd6
        );

    box-shadow:
        0 4px 10px
        rgba(31, 127, 214, .3);
}

/* Check mark */
.ap-webinar-detail-box li::after {
    content: "";

    position: absolute;

    top: 18px;
    left: 23px;

    width: 6px;
    height: 10px;

    border-right:
        2px solid
        #ffffff;

    border-bottom:
        2px solid
        #ffffff;

    transform:
        rotate(45deg);
}

@media (max-width: 700px) {

    .ap-webinar-details {
        grid-template-columns: minmax(0, 1fr);

        gap: 16px;

        margin-top: 22px;
    }

    .ap-webinar-detail-box {
        padding: 28px 18px 20px;

        border-radius: 20px;
    }

    .ap-webinar-detail-head {
        gap: 14px;

        margin-bottom: 18px;
    }

    .ap-webinar-detail-icon {
        width: 48px;
        height: 48px;

        border-radius: 14px;
    }

    .ap-webinar-detail-icon svg {
        width: 22px;
        height: 22px;
    }

    .ap-webinar-detail-box h3 {
        font-size: 20px;
    }

    .ap-webinar-detail-box li {
        padding: 11px 14px 11px 46px;

        font-size: 14.5px;
    }

    .ap-webinar-detail-box li::before {
        top: 11px;
        left: 12px;

        width: 22px;
        height: 22px;
    }

    .ap-webinar-detail-box li::after {
        top: 16px;
        left: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ap-webinar-detail-box,
    .ap-webinar-detail-box li {
        transition: none;
    }

    .ap-webinar-detail-box:hover {
        transform: none;
    }
}


/* =========================================
  FOURTH SECTION - WHAT YOU'LL LEARN
========================================= */

.ap-learn-section {
    position: relative;

    width: 100%;

    padding: 80px 20px 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eef7fe 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================
   BACKGROUND GLOW
========================================= */

.ap-learn-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(55px);

    pointer-events: none;

    z-index: -1;
}

.ap-learn-glow-one {
    width: 480px;
    height: 480px;

    top: -250px;
    left: -170px;

    background:
        radial-gradient(
            circle,
            rgba(70, 163, 239, .18),
            transparent 68%
        );
}

.ap-learn-glow-two {
    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -230px;

    background:
        radial-gradient(
            circle,
            rgba(41, 132, 211, .14),
            transparent 70%
        );
}


/* =========================================
   CONTAINER
========================================= */

.ap-learn-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.ap-learn-head {
    max-width: 720px;

    margin: 0 auto 48px;

    text-align: center;
}

.ap-learn-eyebrow {
    margin-bottom: 14px;

    color: #6f8599;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.6px;

    text-transform: uppercase;
}

.ap-learn-title {
    margin: 0;

    color: #0b2846;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(30px, 3.4vw, 46px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -1.6px;
}

.ap-learn-title span {
    color: #1668c4;
}

.ap-learn-description {
    max-width: 600px;

    margin: 20px auto 0;

    color: #526d84;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================
   CURRICULUM GRID
========================================= */

.ap-learn-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.ap-learn-card {
    position: relative;

    padding:
        30px 26px 28px;

    display: flex;

    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .99),
            rgba(247, 252, 255, .96)
        );

    border:
        1px solid #e1edf6;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 10px 26px
        rgba(34, 108, 158, .05);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease,
        background .4s ease;

    animation:
        apLearnReveal .7s ease backwards;
}

.ap-learn-card:nth-child(1) {
    animation-delay: .05s;
}

.ap-learn-card:nth-child(2) {
    animation-delay: .12s;
}

.ap-learn-card:nth-child(3) {
    animation-delay: .19s;
}

.ap-learn-card:nth-child(4) {
    animation-delay: .26s;
}

.ap-learn-card:nth-child(5) {
    animation-delay: .33s;
}

.ap-learn-card:nth-child(6) {
    animation-delay: .40s;
}


/* Top gradient line */

.ap-learn-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;

    width: 70%;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4da9e8,
            #126ac0,
            #4da9e8,
            transparent
        );

    transform:
        scaleX(.35);

    opacity: .35;

    transition:
        transform .5s ease,
        opacity .5s ease;
}


/* Corner glow */

.ap-learn-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -85px;
    right: -75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(81, 173, 239, .16),
            transparent 70%
        );

    transition:
        transform .5s ease;
}


/* Hover */

.ap-learn-card:hover {
    transform:
        translateY(-6px);

    border-color:
        #b9dbf3;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f8ff
        );

    box-shadow:
        0 20px 40px
        rgba(34, 108, 158, .12);
}

.ap-learn-card:hover::before {
    transform:
        scaleX(1);

    opacity: 1;
}

.ap-learn-card:hover::after {
    transform:
        scale(1.4);
}


/* =========================================
   CARD CONTENT
========================================= */

.ap-learn-num {
    position: absolute;

    top: 26px;
    right: 26px;

    color: #d3e6f6;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

    transition:
        color .4s ease;
}

.ap-learn-card:hover .ap-learn-num {
    color: #9fc9e8;
}

.ap-learn-icon {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #eaf6ff 55%,
            #dcefff 100%
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(76, 160, 218, .08);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}

.ap-learn-icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: #126bc2;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .4s ease,
        stroke .4s ease;
}

.ap-learn-card:hover .ap-learn-icon {
    transform:
        translateY(-3px)
        rotate(-4deg)
        scale(1.06);

    box-shadow:
        0 10px 24px
        rgba(43, 131, 194, .16);
}

.ap-learn-card:hover .ap-learn-icon svg {
    stroke: #075aa9;
}

.ap-learn-card h3 {
    margin:
        0 0 10px;

    color: #102b47;

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;
}

.ap-learn-card p {
    margin: 0;

    color: #667d91;

    font-family:
        Arial,
        sans-serif;

    font-size: 14.5px;

    line-height: 1.7;
}


/* =========================================
   BOTTOM CTA
========================================= */

.ap-learn-cta {
    margin-top: 46px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 12px 24px;
}

.ap-learn-cta p {
    margin: 0;

    color: #6f8599;

    font-family:
        Arial,
        sans-serif;

    font-size: 14.5px;
}

.ap-learn-cta p strong {
    color: #0f2c4d;

    font-weight: 700;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes apLearnReveal {

    from {
        opacity: 0;

        transform:
            translateY(26px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .ap-learn-card {

        padding:
            26px 22px 24px;
    }

    .ap-learn-num {

        top: 22px;
        right: 22px;

        font-size: 14px;
    }
}


/* =========================================
   STACK
========================================= */

@media (max-width: 900px) {

    .ap-learn-section {

        padding:
            60px 20px 70px;
    }

    .ap-learn-head {

        margin-bottom: 38px;
    }

    .ap-learn-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-learn-section {

        padding:
            50px 15px 60px;
    }

    .ap-learn-title {

        font-size: 28px;

        letter-spacing: -1px;
    }

    .ap-learn-description {

        margin-top: 16px;

        font-size: 14.5px;

        line-height: 1.7;
    }

    .ap-learn-grid {

        grid-template-columns:
            minmax(0, 1fr);

        gap: 16px;
    }

    .ap-learn-card {

        padding:
            24px 20px 22px;
    }

    .ap-learn-num {

        top: 20px;
        right: 20px;
    }

    .ap-learn-icon {

        width: 48px;
        height: 48px;

        margin-bottom: 16px;

        border-radius: 14px;
    }

    .ap-learn-icon svg {

        width: 23px;
        height: 23px;
    }

    .ap-learn-card h3 {

        font-size: 16.5px;
    }

    .ap-learn-cta {

        flex-direction: column;

        gap: 18px;

        margin-top: 36px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-learn-card,
    .ap-learn-icon,
    .ap-learn-icon svg,
    .ap-learn-num,
    .ap-learn-card::before,
    .ap-learn-card::after {

        animation: none !important;

        transition: none !important;
    }

    .ap-learn-card:hover {

        transform: none;
    }
}



/* =========================================
  FOURTH SECTION - ABOUT SECTION 
========================================= */

.ap-about-section {
    position: relative;

    width: 100%;

    padding: 80px 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );

    overflow: hidden;
}


/* =========================================
   DOTTED DECORATION
========================================= */

.ap-about-dots {
    position: absolute;

    width: 200px;
    height: 130px;

    top: 62px;
    right: 46px;

    opacity: .85;

    background-image:
        radial-gradient(
            rgba(124, 178, 231, .55) 2px,
            transparent 2px
        );

    background-size: 20px 20px;

    pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.ap-about-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 58px;

    z-index: 2;
}


/* =========================================
   MEDIA
========================================= */

.ap-about-media {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    border-radius: 20px;

    overflow: hidden;

    background: #eaf4fd;

    box-shadow:
        0 24px 50px
        rgba(20, 60, 100, .12);

    animation:
        apAboutMediaReveal .9s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.ap-about-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 25%;
}


/* =========================================
   CONTENT
========================================= */

.ap-about-content {
    position: relative;

    z-index: 5;

    animation:
        apAboutReveal .9s
        cubic-bezier(.2,.8,.2,1)
        .1s
        both;
}

.ap-about-eyebrow {
    margin-bottom: 16px;

    color: #6f8599;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.6px;

    text-transform: uppercase;
}

.ap-about-title {
    max-width: 560px;

    margin: 0;

    color: #0b2846;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(30px, 3.2vw, 46px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -1.4px;
}

.ap-about-title span {
    color: #1668c4;
}

.ap-about-description {
    max-width: 560px;
    text-align: justify;
    margin: 20px 0 0;

    color: #526d84;

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================
   DIVIDER
========================================= */

.ap-about-rule {
    display: block;

    width: 62px;
    height: 3px;

    margin: 26px 0 30px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #126ac0,
            #5db6ed
        );
}


/* =========================================
   STATISTICS
========================================= */

.ap-about-stats {
    display: grid;

    grid-template-columns:
        repeat(4, auto);

    justify-content: start;

    gap: 42px;
}

.ap-about-stat strong {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #0f2c4d;

    font-family:
        Arial,
        sans-serif;

    font-size: 26px;

    font-weight: 700;

    line-height: 1.15;
}

.ap-about-stat small {
    display: block;

    margin-top: 6px;

    color: #6f8599;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.3;
}

.ap-about-stat svg {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

    fill: none;

    stroke: #1668c4;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================
   BUTTON
========================================= */

.ap-about-btn {
    min-width: 205px;

    margin-top: 36px;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes apAboutReveal {

    from {
        opacity: 0;

        transform:
            translateY(28px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes apAboutMediaReveal {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .ap-about-container {

        gap: 42px;
    }

    .ap-about-stats {

        gap: 28px;
    }

    .ap-about-stat strong {

        font-size: 23px;
    }

    .ap-about-stat small {

        font-size: 12px;
    }
}


/* =========================================
   STACK
========================================= */

@media (max-width: 900px) {

    .ap-about-section {

        padding:
            60px 20px;
    }

    .ap-about-container {

        grid-template-columns:
            minmax(0, 1fr);

        gap: 38px;
    }

    .ap-about-media {

        max-width: 560px;

        margin: 0 auto;
    }

    .ap-about-title {

        max-width: 100%;
    }

    .ap-about-description {

        max-width: 620px;
    }

    .ap-about-stats {

        gap: 26px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-about-section {

        padding:
            45px 15px 55px;
    }

    .ap-about-dots {

        display: none;
    }

    .ap-about-media {

        border-radius: 16px;
    }

    .ap-about-eyebrow {

        margin-bottom: 13px;

        font-size: 11px;

        letter-spacing: 2px;
    }

    .ap-about-title {

        font-size: 27px;

        letter-spacing: -.8px;
    }

    .ap-about-title br {

        display: none;
    }

    .ap-about-description {

        margin-top: 16px;

        font-size: 14px;
    }

    .ap-about-rule {

        width: 54px;

        margin: 22px 0 24px;
    }

    .ap-about-stats {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px 20px;
    }

    .ap-about-stat strong {

        font-size: 21px;
    }

    .ap-about-stat svg {

        width: 19px;
        height: 19px;
    }

    .ap-about-stat small {

        font-size: 11.5px;
    }

    .ap-about-btn {

        width: 100%;

        max-width: 285px;

        margin-top: 30px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .ap-about-title {

        font-size: 24px;
    }

    .ap-about-stat strong {

        font-size: 19px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-about-content,
    .ap-about-media {

        animation: none !important;

        transition: none !important;
    }
}



/* =========================================
  FIFTH SECTION - TESTIMONIALS SECTION 
========================================= */

.ap-testi-section {
    position: relative;

    width: 100%;

    padding: 80px 20px 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 100%
        );

    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.ap-testi-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.ap-testi-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 35px;
}

.ap-testi-eyebrow {
    margin-bottom: 12px;

    color: #6f8599;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.6px;

    text-transform: uppercase;
}

.ap-testi-title {
    margin: 0;

    color: #0b2846;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(28px, 2.9vw, 40px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -1.2px;
}


/* =========================================
   NAVIGATION ARROWS
========================================= */

.ap-testi-nav {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}

.ap-testi-arrow {
    width: 46px;
    height: 46px;

    padding: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    border:
        1px solid #cfe3f5;

    border-radius: 50%;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.ap-testi-arrow svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: #1268c0;

    stroke-width: 2.2;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        stroke .3s ease;
}

.ap-testi-arrow:hover {
    background:
        linear-gradient(
            135deg,
            #1268c0,
            #3ba0e9
        );

    border-color:
        #1268c0;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(18, 104, 192, .24);
}

.ap-testi-arrow:hover svg {
    stroke: #ffffff;
}

.ap-testi-arrow:focus-visible {
    outline:
        2px solid #7fb8e8;

    outline-offset: 2px;
}


/* =========================================
   SWIPER
========================================= */

.ap-testi-swiper {
    width: 100%;
}

.ap-testi-swiper .swiper-slide {
    height: auto;
}


/* =========================================
   CARD
========================================= */

.ap-testi-card {
    height: 100%;

    padding:
        26px 24px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 24px;

    background: #ffffff;

    border:
        1px solid #e3eefa;

    border-radius: 16px;

    box-shadow:
        0 8px 20px
        rgba(20, 60, 100, .05);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .4s ease;
}

.ap-testi-card:hover {
    transform:
        translateY(-6px);

    border-color:
        #bcdcf5;

    box-shadow:
        0 16px 34px
        rgba(20, 60, 100, .11);
}

.ap-testi-quote {
    margin: 0;

    color: #3d5468;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================
   PERSON
========================================= */

.ap-testi-person {
    display: flex;

    align-items: center;

    gap: 14px;
}

.ap-testi-avatar {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #eaf5ff,
            #d3e9fb
        );

    color: #1268c0;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .5px;
}

.ap-testi-meta strong {
    display: block;

    color: #0f2c4d;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.25;
}

.ap-testi-meta small {
    display: block;

    margin-top: 3px;

    color: #6f8599;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.25;
}


/* =========================================
   STARS
========================================= */

.ap-testi-stars {
    display: flex;

    align-items: center;

    gap: 3px;

    margin-top: 11px;
}

.ap-testi-stars i {
    display: block;

    width: 15px;
    height: 15px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a623' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45 6.2 20.5l1.1-6.45-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");

    background-size: 100% 100%;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .ap-testi-card {

        padding:
            22px 20px;
    }

    .ap-testi-quote {

        font-size: 19px;
    }

    .ap-testi-avatar {

        width: 48px;
        height: 48px;

        font-size: 15px;
    }
}


/* =========================================
   STACK
========================================= */

@media (max-width: 900px) {

    .ap-testi-section {

        padding:
            60px 20px 70px;
    }

    .ap-testi-head {

        margin-bottom: 28px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-testi-section {

        padding:
            45px 15px 55px;
    }

    .ap-testi-head {

        align-items: center;

        margin-bottom: 24px;
    }

    .ap-testi-eyebrow {

        margin-bottom: 10px;

        font-size: 11px;

        letter-spacing: 2px;
    }

    .ap-testi-title {

        font-size: 24px;

        letter-spacing: -.7px;
    }

    .ap-testi-arrow {

        width: 40px;
        height: 40px;
    }

    .ap-testi-arrow svg {

        width: 17px;
        height: 17px;
    }

    .ap-testi-card {

        padding:
            20px 18px;

        gap: 20px;

        border-radius: 14px;
    }

    .ap-testi-quote {

        font-size: 13.5px;
    }

    .ap-testi-avatar {

        width: 44px;
        height: 44px;

        font-size: 14px;
    }

    .ap-testi-meta strong {

        font-size: 14px;
    }

    .ap-testi-meta small {

        font-size: 12px;
    }

    .ap-testi-stars i {

        width: 14px;
        height: 14px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .ap-testi-title {

        font-size: 21px;
    }

    .ap-testi-arrow {

        width: 36px;
        height: 36px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-testi-card,
    .ap-testi-arrow {

        transition: none !important;
    }
}



/* =========================================
  SIXTH SECTION - TOPICS SECTION 
========================================= */

.ap-topics-section {
    position: relative;

    width: 100%;

    padding: 80px 20px 90px;

    background:
        linear-gradient(
            180deg,
            #f8fcff 0%,
            #eef7fe 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================
   BACKGROUND GLOW
========================================= */

.ap-topics-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}

.ap-topics-glow-one {
    width: 520px;
    height: 520px;

    top: -270px;
    right: -150px;

    background:
        radial-gradient(
            circle,
            rgba(70, 163, 239, .16),
            transparent 68%
        );
}

.ap-topics-glow-two {
    width: 420px;
    height: 420px;

    bottom: -250px;
    left: -170px;

    background:
        radial-gradient(
            circle,
            rgba(41, 132, 211, .12),
            transparent 70%
        );
}


/* =========================================
   CONTAINER
========================================= */

.ap-topics-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.ap-topics-head {
    max-width: 720px;

    margin-bottom: 45px;
}

.ap-topics-eyebrow {
    margin-bottom: 14px;

    color: #6f8599;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.6px;

    text-transform: uppercase;
}

.ap-topics-title {
    max-width: 640px;

    margin: 0;

    color: #0b2846;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(30px, 3.4vw, 46px);

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -1.6px;
}

.ap-topics-title span {
    display: inline-block;

    white-space: nowrap;

    color: #1668c4;
}

.ap-topics-description {
    max-width: 620px;

    margin: 20px 0 0;

    color: #526d84;

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================
   GRID
========================================= */

.ap-topics-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================
   CARD
========================================= */

.ap-topic-card {
    position: relative;

    padding:
        26px 26px 28px;

    display: flex;

    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(247,252,255,.95)
        );

    border:
        1px solid #e1edf6;

    border-radius: 18px;

    overflow: hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease,
        background .4s ease;

    animation:
        apTopicReveal .7s ease both;
}

.ap-topic-card:nth-child(1) {
    animation-delay: .05s;
}

.ap-topic-card:nth-child(2) {
    animation-delay: .12s;
}

.ap-topic-card:nth-child(3) {
    animation-delay: .19s;
}

.ap-topic-card:nth-child(4) {
    animation-delay: .26s;
}

.ap-topic-card:nth-child(5) {
    animation-delay: .33s;
}

.ap-topic-card:nth-child(6) {
    animation-delay: .40s;
}


/* Top gradient line */

.ap-topic-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;

    width: 70%;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4da9e8,
            #126ac0,
            #4da9e8,
            transparent
        );

    transform:
        scaleX(.35);

    opacity: .4;

    transition:
        transform .5s ease,
        opacity .5s ease;
}


/* Corner glow */

.ap-topic-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -85px;
    right: -75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(81,173,239,.18),
            transparent 70%
        );

    transition:
        transform .5s ease;
}


/* Hover */

.ap-topic-card:hover {
    transform:
        translateY(-8px);

    border-color:
        #b9dbf3;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f8ff
        );

    box-shadow:
        0 18px 38px
        rgba(34,108,158,.12);
}

.ap-topic-card:hover::before {
    transform:
        scaleX(1);

    opacity: 1;
}

.ap-topic-card:hover::after {
    transform:
        scale(1.5);
}


/* =========================================
   NUMBER
========================================= */

.ap-topic-number {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #e4f3ff,
            #ffffff
        );

    border:
        1px solid #cde7f8;

    box-shadow:
        0 8px 20px
        rgba(41, 122, 180, .07);

    color: #116bc1;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .5px;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        background .45s ease,
        color .45s ease,
        box-shadow .45s ease;
}

.ap-topic-card:hover .ap-topic-number {
    background:
        linear-gradient(
            135deg,
            #1268c0,
            #3ba0e9
        );

    color: #ffffff;

    transform:
        translateY(-3px)
        rotate(-4deg)
        scale(1.05);

    box-shadow:
        0 10px 24px
        rgba(18, 104, 192, .22);
}


/* =========================================
   CONTENT
========================================= */

.ap-topic-title {
    margin:
        0 0 10px;

    color: #0f2c4d;

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}

.ap-topic-text {
    margin:
        0 0 20px;

    color: #526d84;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   TAGS
========================================= */

.ap-topic-tags {
    margin:
        auto 0 0;

    padding: 0;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    list-style: none;
}

.ap-topic-tags li {
    padding:
        5px 11px;

    list-style: none;

    background: #f1f8ff;

    border:
        1px solid #dcecfa;

    border-radius: 20px;

    color: #547591;

    font-family:
        Arial,
        sans-serif;

    font-size: 11.5px;

    line-height: 1.4;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}

.ap-topic-card:hover .ap-topic-tags li {
    background: #e8f4ff;

    border-color: #c8e2f7;

    color: #2f6288;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes apTopicReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .ap-topics-grid {

        gap: 18px;
    }

    .ap-topic-card {

        padding:
            22px 22px 24px;
    }

    .ap-topic-title {

        font-size: 16px;
    }
}


/* =========================================
   STACK
========================================= */

@media (max-width: 900px) {

    .ap-topics-section {

        padding:
            60px 20px 70px;
    }

    .ap-topics-head {

        margin-bottom: 35px;
    }

    .ap-topics-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-topics-section {

        padding:
            45px 15px 55px;
    }

    .ap-topics-head {

        margin-bottom: 28px;
    }

    .ap-topics-eyebrow {

        margin-bottom: 10px;

        font-size: 11px;

        letter-spacing: 2px;
    }

    .ap-topics-title {

        font-size: 25px;

        letter-spacing: -.8px;
    }

    .ap-topics-description {

        margin-top: 15px;

        font-size: 14px;
    }

    .ap-topics-grid {

        grid-template-columns:
            minmax(0, 1fr);

        gap: 15px;
    }

    .ap-topic-card {

        padding:
            20px 20px 22px;

        border-radius: 16px;
    }

    .ap-topic-number {

        width: 40px;
        height: 40px;

        margin-bottom: 14px;

        border-radius: 12px;

        font-size: 13px;
    }

    .ap-topic-title {

        font-size: 15px;

        letter-spacing: 1.2px;
    }

    .ap-topic-text {

        font-size: 13px;
    }

    .ap-topic-tags li {

        padding:
            4px 10px;

        font-size: 11px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .ap-topics-title {

        font-size: 22px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-topic-card,
    .ap-topic-number,
    .ap-topic-tags li {

        animation: none !important;

        transition: none !important;
    }
}



/* =========================================
  SEVENTH SECTION - FINAL CTA SECTION 
========================================= */

.ap-cta-section {
    position: relative;

    width: 100%;

    padding: 60px 20px 70px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eef7fe 100%
        );

    overflow: hidden;
}


/* =========================================
   STAGE PANEL
========================================= */

.ap-cta-stage {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding:
        58px 56px;

    border-radius: 32px;

    background:
        radial-gradient(
            115% 95% at 88% 4%,
            rgba(74, 168, 255, .3) 0%,
            rgba(74, 168, 255, 0) 58%
        ),
        radial-gradient(
            90% 80% at 4% 108%,
            rgba(255, 180, 46, .18) 0%,
            rgba(255, 180, 46, 0) 62%
        ),
        linear-gradient(
            155deg,
            #05121f 0%,
            #0a2038 48%,
            #0d2b49 100%
        );

    box-shadow:
        0 40px 84px
        rgba(6, 24, 42, .3);

    overflow: hidden;

    isolation: isolate;
}

.ap-cta-stage::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    border:
        1px solid
        rgba(255, 255, 255, .11);

    pointer-events: none;

    z-index: 3;
}


/* Stage light */

.ap-cta-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(60px);

    pointer-events: none;

    z-index: 0;
}

.ap-cta-glow-one {
    width: 420px;
    height: 420px;

    top: -190px;
    right: -130px;

    background:
        radial-gradient(
            circle,
            rgba(74, 168, 255, .46),
            transparent 68%
        );
}

.ap-cta-glow-two {
    width: 380px;
    height: 380px;

    left: -150px;
    bottom: -200px;

    background:
        radial-gradient(
            circle,
            rgba(255, 160, 40, .34),
            transparent 70%
        );
}


/* =========================================
   CONTAINER
========================================= */

.ap-cta-container {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);

    align-items: center;

    gap: 40px 56px;

    z-index: 2;
}


/* =========================================
   CONTENT
========================================= */

.ap-cta-eyebrow {
    margin-bottom: 14px;

    color: #7fb0dd;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.8px;

    text-transform: uppercase;
}

.ap-cta-title {
    max-width: 620px;

    margin: 0;

    color: #eef6fd;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(28px, 3.2vw, 44px);

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -1.6px;
}

.ap-cta-title span {
    display: inline-block;

    color: #ffb42e;

    background:
        linear-gradient(
            100deg,
            #ffd47a 0%,
            #ffb42e 50%,
            #ff9a17 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

.ap-cta-text {
    max-width: 540px;

    margin: 18px 0 0;

    color: #b9d2e8;

    font-family:
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1.72;
}


/* =========================================
   REGISTRATION CARD
========================================= */

.ap-cta-card {
    position: relative;

    padding:
        26px 26px 24px;

    display: grid;

    gap: 16px;

    border-radius: 24px;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .09),
            rgba(255, 255, 255, .03)
        );

    box-shadow:
        0 26px 54px
        rgba(3, 14, 26, .4);
}

.ap-cta-row {
    display: flex;

    align-items: center;

    gap: 14px;
}

.ap-cta-row-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    border:
        1px solid
        rgba(255, 180, 46, .3);

    background:
        rgba(255, 180, 46, .12);
}

.ap-cta-row-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: #ffc861;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.ap-cta-row-text {
    min-width: 0;
}

.ap-cta-row-text small {
    display: block;

    color: #9db8d1;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}

.ap-cta-row-text strong {
    display: block;

    margin-top: 5px;

    color: #f1f8fe;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.3;
}


/* Perforation */

.ap-cta-perf {
    width: 100%;
    height: 1px;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .26) 0 5px,
            transparent 5px 11px
        );
}


/* Register button */

.ap-cta-register {
    position: relative;

    min-height: 56px;

    padding:
        0 26px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    border-radius: 16px;

    overflow: hidden;

    color: #08182b;

    font-family:
        Arial,
        sans-serif;

    font-size: 15.5px;

    font-weight: 700;

    text-decoration: none;

    background:
        linear-gradient(
            120deg,
            #ffd47a 0%,
            #ffb42e 52%,
            #ff9a17 100%
        );

    background-size: 200% auto;

    box-shadow:
        0 16px 32px
        rgba(255, 150, 20, .28),

        0 0 0 1px
        rgba(255, 213, 130, .5) inset;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-position .6s ease;
}

.ap-cta-register::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -60%;

    width: 45%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255, 255, 255, .5),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left .7s cubic-bezier(.2,.8,.2,1);

    pointer-events: none;
}

.ap-cta-register b {
    width: 26px;
    height: 26px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(8, 24, 43, .14);

    font-size: 14px;

    transition:
        transform .3s ease;
}

.ap-cta-register:hover {
    transform:
        translateY(-2px);

    background-position: 100% center;

    box-shadow:
        0 22px 42px
        rgba(255, 150, 20, .38),

        0 0 0 1px
        rgba(255, 213, 130, .68) inset;
}

.ap-cta-register:hover::after {
    left: 115%;
}

.ap-cta-register:hover b {
    transform:
        translateX(3px);
}

.ap-cta-register:focus-visible {
    outline:
        3px solid
        #ffd47a;

    outline-offset: 3px;
}


/* =========================================
   REGISTERED
========================================= */

.ap-cta-registered {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;
}

.ap-cta-registered-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .07);

    border:
        1px solid rgba(255, 255, 255, .16);
}

.ap-cta-registered-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: #7fb0dd;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.ap-cta-registered p {
    margin: 0;

    color: #9db8d1;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.4;
}

.ap-cta-registered strong {
    color: #eef6fd;

    font-weight: 700;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .ap-cta-stage {

        padding:
            48px 40px;
    }

    .ap-cta-container {

        gap: 34px 40px;
    }

    .ap-cta-title {

        font-size: 32px;

        letter-spacing: -1.2px;
    }
}


/* =========================================
   STACK
========================================= */

@media (max-width: 900px) {

    .ap-cta-section {

        padding:
            50px 20px 60px;
    }

    .ap-cta-stage {

        padding:
            44px 32px;

        border-radius: 28px;
    }

    .ap-cta-container {

        grid-template-columns:
            minmax(0, 1fr);

        gap: 34px;
    }

    .ap-cta-title,
    .ap-cta-text {

        max-width: 100%;
    }

    .ap-cta-card {

        max-width: 520px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-cta-section {

        padding:
            40px 15px 50px;
    }

    .ap-cta-stage {

        padding:
            34px 18px 30px;

        border-radius: 24px;
    }

    .ap-cta-eyebrow {

        margin-bottom: 11px;

        font-size: 10.5px;

        letter-spacing: 2.2px;
    }

    .ap-cta-title {

        font-size: 24px;

        letter-spacing: -.8px;
    }

    .ap-cta-title br {

        display: none;
    }

    .ap-cta-text {

        margin-top: 14px;

        font-size: 14.5px;

        line-height: 1.7;
    }

    .ap-cta-card {

        padding:
            20px 18px;

        gap: 14px;

        border-radius: 20px;
    }

    .ap-cta-row-icon {

        width: 40px;
        height: 40px;

        border-radius: 12px;
    }

    .ap-cta-row-icon svg {

        width: 19px;
        height: 19px;
    }

    .ap-cta-row-text strong {

        font-size: 14.5px;
    }

    .ap-cta-register {

        min-height: 52px;

        border-radius: 14px;
    }

    .ap-cta-registered p {

        font-size: 12.5px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .ap-cta-title {

        font-size: 21px;
    }

    .ap-cta-registered {

        justify-content: flex-start;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-cta-register,
    .ap-cta-register::after,
    .ap-cta-register b {

        transition: none !important;
    }

    .ap-cta-register:hover {

        transform: none;
    }
}



/* =========================================
   YOUTUBE SECTION
========================================= */

.ap-yt-section {
    position: relative;

    width: 100%;

    padding: 80px 20px 90px;

    background:
        linear-gradient(
            165deg,
            #0b1c30 0%,
            #112b47 55%,
            #16365a 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================
   BACKGROUND GLOW
========================================= */

.ap-yt-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;

    z-index: 0;
}

.ap-yt-glow-one {
    width: 460px;
    height: 460px;

    top: -230px;
    right: -170px;

    background:
        radial-gradient(
            circle,
            rgba(74, 168, 255, .2),
            transparent 70%
        );
}


/* =========================================
   CONTAINER
========================================= */

.ap-yt-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.ap-yt-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 32px;

    margin-bottom: 44px;
}

.ap-yt-heading {
    max-width: 640px;
}

.ap-yt-eyebrow {
    margin-bottom: 14px;

    color: #7fb0dd;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.6px;

    text-transform: uppercase;
}

.ap-yt-title {
    margin: 0;

    color: #eef6fd;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(28px, 3.2vw, 44px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -1.4px;
}

.ap-yt-title span {
    background:
        linear-gradient(
            100deg,
            #3ba0e9 0%,
            #7cc4f5 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

.ap-yt-description {
    max-width: 560px;

    margin: 18px 0 0;

    color: #b9d2e8;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================
   SUBSCRIBE BUTTON
========================================= */

.ap-yt-subscribe {
    flex-shrink: 0;

    min-height: 54px;

    padding:
        0 26px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    border-radius: 30px;

    background:
        linear-gradient(
            120deg,
            #e0245e 0%,
            #ff5f6d 100%
        );

    background-size: 200% auto;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 14.5px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 16px 34px
        rgba(255, 45, 85, .3);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-position .6s ease;
}

.ap-yt-subscribe svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.ap-yt-subscribe:hover {
    transform:
        translateY(-3px);

    background-position: 100% center;

    box-shadow:
        0 22px 44px
        rgba(255, 45, 85, .42);
}

.ap-yt-subscribe:focus-visible {
    outline:
        3px solid
        #ffd47a;

    outline-offset: 3px;
}


/* =========================================
   VIDEO GRID
========================================= */

.ap-yt-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.ap-yt-card {
    display: flex;

    flex-direction: column;

    border-radius: 20px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .06);

    border:
        1px solid
        rgba(255, 255, 255, .12);

    text-decoration: none;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;

    animation:
        apYtReveal .7s ease backwards;
}

.ap-yt-card:nth-child(1) {
    animation-delay: .05s;
}

.ap-yt-card:nth-child(2) {
    animation-delay: .12s;
}

.ap-yt-card:nth-child(3) {
    animation-delay: .19s;
}

.ap-yt-card:nth-child(4) {
    animation-delay: .26s;
}

.ap-yt-card:nth-child(5) {
    animation-delay: .33s;
}

.ap-yt-card:nth-child(6) {
    animation-delay: .40s;
}


/* =========================================
   THUMBNAIL
========================================= */

.ap-yt-thumb {
    position: relative;

    display: block;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        #0d2138;
}

.ap-yt-thumb img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1);
}


/* Soft fade behind the duration chip */

.ap-yt-thumb::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 14, 26, 0) 55%,
            rgba(4, 14, 26, .42) 100%
        );

    pointer-events: none;
}

.ap-yt-play {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 58px;
    height: 58px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .95);

    color: #e0245e;

    box-shadow:
        0 14px 30px
        rgba(3, 12, 24, .38);

    transform:
        translate(-50%, -50%);

    z-index: 2;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}

.ap-yt-play svg {
    width: 22px;
    height: 22px;

    margin-left: 3px;

    fill: currentColor;

    stroke: none;
}

.ap-yt-time {
    position: absolute;

    right: 12px;
    bottom: 12px;

    padding:
        4px 9px;

    border-radius: 8px;

    background:
        rgba(4, 14, 26, .8);

    color: #eef6fd;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .3px;

    z-index: 2;
}


/* =========================================
   CARD BODY
========================================= */

.ap-yt-body {
    display: block;

    padding:
        18px 20px 22px;
}

.ap-yt-body strong {
    display: block;

    color: #eef6fd;

    font-family:
        Arial,
        sans-serif;

    font-size: 16.5px;

    font-weight: 700;

    line-height: 1.4;

    transition:
        color .35s ease;
}

.ap-yt-body small {
    display: block;

    margin-top: 8px;

    color: #9db8d1;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;
}


/* =========================================
   HOVER
========================================= */

.ap-yt-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(255, 255, 255, .22);

    box-shadow:
        0 24px 48px
        rgba(3, 12, 24, .45),

        0 0 30px
        rgba(74, 168, 255, .16);
}

.ap-yt-card:hover .ap-yt-thumb img {
    transform:
        scale(1.06);
}

.ap-yt-card:hover .ap-yt-play {
    transform:
        translate(-50%, -50%)
        scale(1.1);

    box-shadow:
        0 18px 36px
        rgba(3, 12, 24, .48);
}

.ap-yt-card:hover .ap-yt-body strong {
    color: #ffffff;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes apYtReveal {

    from {
        opacity: 0;

        transform:
            translateY(26px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .ap-yt-grid {

        gap: 20px;
    }

    .ap-yt-body {

        padding:
            16px 18px 20px;
    }
}


/* =========================================
   STACK
========================================= */

@media (max-width: 900px) {

    .ap-yt-section {

        padding:
            60px 20px 70px;
    }

    .ap-yt-head {

        flex-direction: column;

        align-items: flex-start;

        gap: 26px;

        margin-bottom: 36px;
    }

    .ap-yt-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-yt-section {

        padding:
            50px 15px 60px;
    }

    .ap-yt-title {

        font-size: 26px;

        letter-spacing: -1px;
    }

    .ap-yt-description {

        margin-top: 16px;

        font-size: 14.5px;

        line-height: 1.7;
    }

    .ap-yt-subscribe {

        width: 100%;

        max-width: 420px;

        min-height: 52px;
    }

    .ap-yt-grid {

        grid-template-columns:
            minmax(0, 1fr);

        gap: 16px;
    }

    .ap-yt-play {

        width: 52px;
        height: 52px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-yt-card,
    .ap-yt-thumb img,
    .ap-yt-play,
    .ap-yt-body strong,
    .ap-yt-subscribe {

        animation: none !important;

        transition: none !important;
    }

    .ap-yt-card:hover,
    .ap-yt-subscribe:hover {

        transform: none;
    }
}



/* =========================================
   FAQ SECTION
========================================= */

.ap-faq-section {
    position: relative;

    width: 100%;

    padding: 80px 20px 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5faff 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================
   BACKGROUND GLOW
========================================= */

.ap-faq-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    top: -280px;
    right: -190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(70, 163, 239, .16),
            transparent 68%
        );

    filter: blur(50px);

    pointer-events: none;

    z-index: -1;
}


/* =========================================
   CONTAINER
========================================= */

.ap-faq-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    z-index: 2;
}

.ap-faq-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap: 60px;

    align-items: start;
}


/* =========================================
   INTRO
========================================= */

.ap-faq-eyebrow {
    margin-bottom: 14px;

    color: #6f8599;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.6px;

    text-transform: uppercase;
}

.ap-faq-title {
    margin: 0;

    color: #0b2846;

    font-family:
        "Sora",
        Arial,
        sans-serif;

    font-size:
        clamp(28px, 3.2vw, 42px);

    font-weight: 700;

    line-height: 1.14;

    letter-spacing: -1.4px;
}

.ap-faq-title span {
    color: #1668c4;
}

.ap-faq-description {
    max-width: 420px;

    margin: 18px 0 0;

    color: #526d84;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.75;
}


/* Help card */

.ap-faq-help {
    max-width: 420px;

    margin-top: 32px;

    padding:
        18px 20px;

    display: flex;

    align-items: center;

    gap: 14px;

    border-radius: 18px;

    border:
        1px solid #dbeafa;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f9ff
        );

    box-shadow:
        0 12px 28px
        rgba(34, 108, 158, .07);
}

.ap-faq-help-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            140deg,
            #1268c0,
            #3ba0e9
        );

    box-shadow:
        0 10px 20px
        rgba(18, 104, 192, .22);
}

.ap-faq-help-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.ap-faq-help-text strong {
    display: block;

    color: #0f2c4d;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 700;
}

.ap-faq-help-text small {
    display: block;

    margin-top: 4px;

    color: #667d91;

    font-family:
        Arial,
        sans-serif;

    font-size: 13.5px;

    line-height: 1.5;
}

.ap-faq-help-text a {
    color: #1268c0;

    font-weight: 700;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(18, 104, 192, .3);

    transition:
        color .3s ease,
        border-color .3s ease;
}

.ap-faq-help-text a:hover {
    color: #0b4d94;

    border-color:
        rgba(11, 77, 148, .6);
}


/* =========================================
   QUESTIONS
========================================= */

.ap-faq-list {
    display: grid;

    gap: 14px;
}

.ap-faq-item {
    border:
        1px solid #e1edf6;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .99),
            rgba(247, 252, 255, .96)
        );

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.ap-faq-item:hover {
    border-color: #c6e0f4;

    box-shadow:
        0 12px 28px
        rgba(34, 108, 158, .08);
}

.ap-faq-item[open] {
    border-color: #b9dbf3;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f9ff
        );

    box-shadow:
        0 16px 34px
        rgba(34, 108, 158, .1);
}

.ap-faq-question {
    padding:
        20px 22px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    cursor: pointer;

    list-style: none;

    color: #0f2c4d;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.45;

    transition:
        color .3s ease;
}

.ap-faq-question::-webkit-details-marker {
    display: none;
}

.ap-faq-question::marker {
    content: "";
}

.ap-faq-item[open] .ap-faq-question {
    color: #1268c0;
}

.ap-faq-question:focus-visible {
    outline:
        3px solid
        #9bc7ea;

    outline-offset: -3px;

    border-radius: 16px;
}


/* Plus / minus icon */

.ap-faq-icon {
    position: relative;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: inline-block;

    border-radius: 50%;

    border:
        1px solid #d5e9f8;

    background: #eef7ff;

    transition:
        background .35s ease,
        border-color .35s ease;
}

.ap-faq-icon::before,
.ap-faq-icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 12px;
    height: 2px;

    border-radius: 2px;

    background: #126bc2;

    transform:
        translate(-50%, -50%);

    transition:
        transform .35s ease,
        background .35s ease;
}

.ap-faq-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.ap-faq-item[open] .ap-faq-icon {
    background:
        linear-gradient(
            135deg,
            #1268c0,
            #3ba0e9
        );

    border-color:
        transparent;
}

.ap-faq-item[open] .ap-faq-icon::before,
.ap-faq-item[open] .ap-faq-icon::after {
    background: #ffffff;
}

.ap-faq-item[open] .ap-faq-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


/* Answer */

.ap-faq-answer {
    padding:
        0 22px 22px;

    color: #526d84;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.75;
}

.ap-faq-answer p {
    margin: 0;
}

.ap-faq-item[open] .ap-faq-answer {
    animation:
        apFaqOpen .35s ease;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes apFaqOpen {

    from {
        opacity: 0;

        transform:
            translateY(-6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .ap-faq-grid {

        gap: 40px;
    }

    .ap-faq-question {

        font-size: 15.5px;
    }
}


/* =========================================
   STACK
========================================= */

@media (max-width: 900px) {

    .ap-faq-section {

        padding:
            60px 20px 70px;
    }

    .ap-faq-grid {

        grid-template-columns:
            minmax(0, 1fr);

        gap: 34px;
    }

    .ap-faq-description,
    .ap-faq-help {

        max-width: 100%;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-faq-section {

        padding:
            50px 15px 60px;
    }

    .ap-faq-title {

        font-size: 27px;

        letter-spacing: -1px;
    }

    .ap-faq-description {

        margin-top: 14px;

        font-size: 14.5px;

        line-height: 1.7;
    }

    .ap-faq-help {

        margin-top: 24px;

        padding:
            16px;
    }

    .ap-faq-question {

        padding:
            17px 18px;

        gap: 14px;

        font-size: 14.5px;
    }

    .ap-faq-icon {

        width: 26px;
        height: 26px;
    }

    .ap-faq-icon::before,
    .ap-faq-icon::after {

        width: 10px;
    }

    .ap-faq-answer {

        padding:
            0 18px 18px;

        font-size: 14px;

        line-height: 1.72;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-faq-item,
    .ap-faq-question,
    .ap-faq-icon,
    .ap-faq-icon::before,
    .ap-faq-icon::after,
    .ap-faq-answer,
    .ap-faq-help-text a {

        animation: none !important;

        transition: none !important;
    }
}



/* =========================================
   FOOTER
========================================= */

.ap-footer {
    position: relative;

    width: 100%;

    padding: 70px 20px 0;

    background:
        linear-gradient(
            180deg,
            #0e2f52 0%,
            #0a2340 55%,
            #07182e 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* Top light line */

.ap-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(77, 169, 232, .55),
            rgba(18, 106, 192, .35),
            transparent
        );
}


/* Soft glow */

.ap-footer-glow {
    position: absolute;

    width: 640px;
    height: 640px;

    top: -420px;
    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(58, 145, 220, .20),
            transparent 68%
        );

    pointer-events: none;

    z-index: -1;
}

.ap-footer-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================
   GRID
========================================= */

.ap-footer-grid {
    display: grid;

    grid-template-columns:
        1.6fr 1fr 1fr 1.2fr;

    gap: 45px;

    padding-bottom: 52px;
}


/* =========================================
   BRAND
========================================= */

.ap-footer-logo {
    display: inline-block;
}

.ap-footer-logo img {
    display: block;

    width: 168px;
    height: auto;

    filter:
        brightness(0)
        invert(1);

    opacity: .95;
}

.ap-footer-brand p {
    max-width: 330px;

    margin:
        20px 0 24px;

    color: #a8c4dd;

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;

    line-height: 1.8;
}


/* Social */

.ap-footer-social {
    display: flex;

    align-items: center;

    gap: 10px;
}

.ap-footer-social a {
    width: 40px;
    height: 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .05);

    border:
        1px solid rgba(255, 255, 255, .14);

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.ap-footer-social svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: #b9cfe4;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        stroke .3s ease;
}

.ap-footer-social a:hover {
    background:
        linear-gradient(
            135deg,
            #1268c0,
            #3ba0e9
        );

    border-color:
        transparent;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 22px
        rgba(18, 104, 192, .30);
}

.ap-footer-social a:hover svg {
    stroke: #ffffff;
}



/* =========================================
   COLUMNS
========================================= */

.ap-footer-col h3 {
    margin:
        0 0 18px;

    color: #7fb0dd;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}

.ap-footer-col ul {
    margin: 0;
    padding: 0;

    display: grid;

    gap: 12px;

    list-style: none;
}

.ap-footer-col li {
    list-style: none;
}

.ap-footer-col a {
    display: inline-block;

    color: #b9cfe4;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;
}

.ap-footer-col a:hover {
    color: #ffffff;

    transform:
        translateX(4px);
}


/* Contact list */

.ap-footer-contact {
    gap: 14px !important;
}

.ap-footer-contact li {
    display: flex;

    align-items: flex-start;

    gap: 11px;
}

.ap-footer-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .05);

    border:
        1px solid rgba(255, 255, 255, .12);
}

.ap-footer-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #7fb0dd;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.ap-footer-contact li a {
    padding-top: 7px;
}


/* =========================================
   BOTTOM
========================================= */

.ap-footer-bottom {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    padding: 22px 0;

    border-top:
        1px solid rgba(255, 255, 255, .09);
}

.ap-footer-bottom p {
    margin: 0;

    color: #8aa8c6;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;
  
}

.ap-footer-bottom ul {
    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;

    gap: 22px;

    list-style: none;
}

.ap-footer-bottom li {
    list-style: none;
}

.ap-footer-bottom a {
    color: #8aa8c6;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    text-decoration: none;

    transition:
        color .3s ease;
}

.ap-footer-bottom a:hover {
    color: #ffffff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .ap-footer-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 38px;
    }

    .ap-footer-brand {

        grid-column: 1 / -1;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-footer {

        padding:
            50px 15px 0;
    }

    .ap-footer-grid {

    /*     grid-template-columns:
            minmax(0, 1fr); */

        gap: 32px;

        padding-bottom: 38px;
    }

    .ap-footer-logo img {

        width: 145px;
    }

    .ap-footer-brand p {

        max-width: 100%;

        margin:
            16px 0 20px;

        font-size: 13.5px;
    }

    .ap-footer-col h3 {

        margin-bottom: 14px;
    }

    .ap-footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 20px 0;
    }

    .ap-footer-bottom ul {

        gap: 18px;
    }
}



/* =========================================
   FLOATING WHATSAPP BUTTON
========================================= */

.ap-whatsapp {
    position: fixed;

    right: 26px;
    bottom: 26px;

    width: 58px;
    height: 58px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            140deg,
            #4ce07b 0%,
            #25d366 55%,
            #1eb457 100%
        );

    box-shadow:
        0 14px 30px
        rgba(37, 211, 102, .35),

        0 0 0 1px
        rgba(255, 255, 255, .18) inset;

    z-index: 999;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease;
}

.ap-whatsapp svg {
    position: relative;

    width: 30px;
    height: 30px;

    fill: #ffffff;

    z-index: 2;
}

.ap-whatsapp:hover {
    transform:
        translateY(-4px)
        scale(1.04);

    box-shadow:
        0 20px 40px
        rgba(37, 211, 102, .45),

        0 0 0 1px
        rgba(255, 255, 255, .25) inset;
}

.ap-whatsapp:focus-visible {
    outline:
        3px solid
        #25d366;

    outline-offset: 4px;
}


/* Pulse ring */

.ap-whatsapp-pulse {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        2px solid
        rgba(37, 211, 102, .65);

    animation:
        apWhatsappPulse 2.6s
        ease-out
        infinite;

    pointer-events: none;

    z-index: 1;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes apWhatsappPulse {

    0% {
        opacity: .7;

        transform:
            scale(1);
    }

    70% {
        opacity: 0;

        transform:
            scale(1.5);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.5);
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ap-whatsapp {

        right: 16px;
        bottom: 16px;

        width: 52px;
        height: 52px;
    }

    .ap-whatsapp svg {

        width: 27px;
        height: 27px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ap-whatsapp,
    .ap-whatsapp-pulse {

        animation: none !important;

        transition: none !important;
    }

    .ap-whatsapp:hover {

        transform: none;
    }

    .ap-whatsapp-pulse {

        display: none;
    }
}





/* ===== AKSHAY PABBA CTA ===== */

.apb-wealth-cta{
    position:relative;
    overflow:hidden;
    background:#EEF3F8;
    padding:30px 24px;
}

.apb-cta-wrap{
    max-width:1180px;
    margin:0 auto;
    position:relative;
    z-index:2;

    /* Text on the left, buttons on the right */
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:48px;
    align-items:center;
}

.apb-cta-label,
.apb-cta-heading,
.apb-cta-text{
    grid-column:1;
    justify-self:start;
}

.apb-cta-label{
    display:inline-block;
    margin-bottom:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    color:#6F86A4;
    text-transform:uppercase;
    opacity:0;
    animation:apbFadeUp .7s ease forwards;
}

.apb-cta-heading{
    margin:0;
    max-width:820px;
        font-family:
        "Sora",
        Arial,
        sans-serif;
    font-size:clamp(44px,6vw,72px);
    font-weight:700;
    line-height:1.05;
    color:#0D2B52;
    opacity:0;
    animation:apbFadeUp .9s ease forwards;
    font-size: 42px;
}

.apb-cta-heading span{
    color:#2F6FE4;
}

.apb-cta-text{
    margin-top:28px;
    max-width:760px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:1.9;
    color:#5E738C;
    opacity:0;
    animation:apbFadeUp 1.1s ease forwards;
}

.apb-cta-text strong{
    color:#0D2B52;
    font-weight:700;
}

.apb-cta-actions{
    grid-column:2;
    grid-row:1 / span 3;
    justify-content:flex-end;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:0;
    opacity:0;
    animation:apbFadeUp 1.3s ease forwards;
}

.apb-btn-primary,
.apb-btn-outline{
    padding:16px 32px;
    border-radius:60px;
    text-decoration:none;
    font-family:'Inter',sans-serif;
    font-size:15px;
    font-weight:600;
    transition:.35s ease;
}

.apb-btn-primary{
    border:1px solid transparent;
    background:#2F6FE4;
    color:#fff;
    box-shadow:0 14px 35px rgba(47,111,228,.25);
}

.apb-btn-primary:hover{
    background:#245ED0;
    transform:translateY(-4px);
}

.apb-btn-outline{
    color:#0D2B52;
    border:1px solid rgba(13,43,82,.15);
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(10px);
}

.apb-btn-outline:hover{
    background:#fff;
    transform:translateY(-4px);
}

/* Background animated orbs */

.apb-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.35;
    animation:apbFloat 9s ease-in-out infinite;
}

.apb-orb-one{
    width:320px;
    height:320px;
    background:#9CC4FF;
    top:-120px;
    right:-80px;
}

.apb-orb-two{
    width:240px;
    height:240px;
    background:#2F6FE4;
    bottom:-80px;
    left:-60px;
    animation-delay:3s;
}

/* Animations */

@keyframes apbFadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes apbFloat{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-20px,24px);
    }
}

/* Responsive */

@media (max-width:900px){

.apb-cta-wrap{
    grid-template-columns:minmax(0,1fr);
}

.apb-cta-actions{
    grid-column:1;
    grid-row:auto;
    justify-content:flex-start;
    margin-top:32px;
}
}

@media (max-width:768px){

.apb-wealth-cta{
    padding:80px 20px;
}

.apb-cta-text{
    font-size:17px;
}

.apb-cta-actions{
    flex-wrap:nowrap;
    gap:12px;
}

.apb-btn-primary,
.apb-btn-outline{
    flex:1 1 0;
    min-width:0;
    padding:15px 12px;
    font-size:14px;
    text-align:center;
    white-space:nowrap;
}
}

@media (max-width:360px){

.apb-btn-primary,
.apb-btn-outline{
    padding:14px 8px;
    font-size:13px;
}
}