/* ==========================================================
   TABLETS (768px)
========================================================== */

@media (max-width:768px){

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

.trainer-banner{
    font-size:20px;
    padding:16px;
}

.trainer-container{
    width:92%;
    padding:45px 0 25px;
    margin-top:-35px;
}

.trainer-title{
    margin-bottom:35px;
}

.trainer-title .gold,
.trainer-title .white,
.trainer-title .underline{
    font-size:2.2rem;
    line-height:1.2;
}

.trainer-subtitle{
    font-size:20px;
    line-height:1.6;
    margin-bottom:-10px;
}

.trainer-subtitle span{
    font-size:25px;
}

.trainer-video-placeholder{
    margin:35px auto 15px;
}

.play-button{
    width:75px;
    height:75px;
    font-size:1.8rem;
}

.video-box p{
    font-size:1rem;
}

/* ================= SECTION SPACING ================= */

.trainer-event,
.trainer-problems,
.trainer-solution,
.trainer-step,
.trainer-masterclass,
.trainer-mentor,
.trainer-identity,
.trainer-pillars,
.trainer-days,
.trainer-included,
.trainer-transformation,
.trainer-impact,
.trainer-final-cta{
    padding:45px 0;
}

.trainer-footer{
    padding:35px 0;
}

/* ================= EVENT ================= */

.trainer-event-container{
    width:92%;
    padding:35px 25px;
}

.trainer-event-title{
    font-size:2rem;
    margin-bottom:30px;
}

.trainer-event-grid{
    grid-template-columns:1fr;
    gap:18px;
}

.event-card{
    padding:22px;
}

.event-note{
    margin-top:25px;
    padding:18px;
}

/* ================= PROBLEMS ================= */

.trainer-problems-box{
    width:92%;
    margin-top:-25px;
    padding:35px 28px;
}

.trainer-problems-title{
    font-size:2rem;
    margin:0 0 20px;
}

.trainer-problems-list{
    gap:18px;
}

.trainer-problems-list p{
    font-size:18px;
}

.trainer-bottom-text{
    font-size:22px;
}

.trainer-bottom-text span{
    font-size:22px;
}

/* ================= SOLUTION ================= */

.trainer-solution-box{
    width:92%;
    margin-top:-35px;
    padding:40px 28px;
}

.trainer-solution-title{
    margin:0 0 20px;
    font-size:2rem;
}

.trainer-program-heading{
    font-size:1.7rem;
}

.trainer-solution-intro{
    font-size:1rem;
}

.trainer-discover-grid{
    grid-template-columns:1fr;
    gap:14px;
}

/* ================= STEP ================= */

.trainer-step-title{
    font-size:2.2rem;
}

.trainer-step-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.trainer-step-card{
    padding:22px 18px;
}

.step-icon{
    font-size:2.3rem;
}

.trainer-step-card h3{
    font-size:1.05rem;
}

/* ================= MASTERCLASS ================= */

.trainer-masterclass-title{
    font-size:2.2rem;
}

.trainer-masterclass-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.masterclass-card{
    height:290px;
}

.masterclass-overlay{
    padding:18px;
}

.masterclass-overlay h3{
    font-size:1.2rem;
}

/* ================= MENTOR ================= */

.trainer-mentor-heading{
    font-size:2.4rem;
    margin-bottom:35px;
}

.trainer-mentor-image{
    width:300px;
}

.mentor-glow{
    width:230px;
    height:230px;
}

.trainer-mentor-card{
    width:100%;
    margin-top:-20px;
    padding:30px 24px;
}

.trainer-mentor-card h3{
    font-size:1.7rem;
}

.mentor-role{
    font-size:1rem;
}

.trainer-mentor-card li{
    font-size:1rem;
}

/* ================= IDENTITY ================= */

.trainer-identity-title{
    font-size:2.2rem;
}

.trainer-identity-subtitle{
    margin-bottom:30px;
}

.identity-stairs{
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

.stair{
    width:47%;
    min-height:230px;
    height:auto !important;
}

/* ================= PILLARS ================= */

.trainer-pillars-title{
    font-size:2.2rem;
}

.trainer-pillars-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.pillar-card{
    max-width:450px;
    width:100%;
    margin:auto;
    height:340px;
}

.pillar-overlay h3{
    font-size:1.6rem;
}

/* ================= DAYS ================= */

.trainer-days-title{
    font-size:2.2rem;
    margin-bottom:30px;
}

.trainer-days-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.day-card{
    padding:28px;
}

.day-card h3{
    font-size:1.35rem;
}

.day-card li{
    font-size:1rem;
}

/* ================= INCLUDED ================= */

.trainer-included-title{
    font-size:2.2rem;
}

.included-row{
    grid-template-columns:1fr 70px;
}

.included-left{
    padding:18px;
    font-size:1rem;
}

.included-right{
    font-size:1.6rem;
}

/* ================= TRANSFORMATION ================= */

.transformation-wrapper{
    flex-direction:column;
    gap:20px;
}

.transform-arrow{
    transform:rotate(90deg);
    font-size:3rem;
}

.transform-card{
    width:100%;
    min-height:auto;
    padding:30px;
}

.transform-card h3{
    font-size:2.3rem;
    margin-bottom:20px;
}

.transform-card li{
    font-size:1.05rem;
}

/* ================= IMPACT ================= */

.trainer-impact-title{
    font-size:2.2rem;
}

.trainer-impact-grid{
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.impact-item{
    font-size:1rem;
    padding:16px;
}

.trainer-impact-image{
    margin-top:25px;
}

.trainer-impact-image img{
    width:100%;
}

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

.trainer-final-card{
    width:92%;
    padding:40px 25px;
}

.trainer-final-title{
    font-size:2.4rem;
}

.trainer-final-subtitle{
    font-size:1.45rem;
}

.trainer-final-btn{
    width:100%;
    max-width:320px;
}

/* ================= FOOTER ================= */

.trainer-footer-title{
    font-size:1.8rem;
}

.trainer-footer-contact{
    flex-direction:column;
    gap:12px;
}

.trainer-footer-disclaimer{
    margin:20px auto;
}

.trainer-footer-disclaimer p{
    font-size:.85rem;
}

.trainer-footer-links{
    gap:8px;
}

}

/* ==========================================================
   MOBILE (480px)
   HERO
========================================================== */

@media (max-width:480px){

.trainer-banner{
    font-size:15px;
    line-height:1.4;
    padding:14px 12px;
}

.trainer-container{
    width:92%;
    margin-top:-25px;
    padding:35px 0 10px;
    margin-bottom:0;
}

.trainer-title{
    margin-bottom:25px;
    letter-spacing:-1px;
}

.trainer-title .gold,
.trainer-title .white,
.trainer-title .underline{
    font-size:1.4rem;
    line-height:1.4;
}

.trainer-title .underline{
    text-decoration-thickness:2px;
    text-underline-offset:5px;
}

.trainer-subtitle{
    font-size:15px;
    line-height:1.65;
    margin:0 auto;
}

.trainer-subtitle span{
    font-size:19px;
    margin-top:8px;
}

.trainer-video-placeholder{
    margin:28px auto 5px;
}

.video-box{
    border-radius:18px;
}

.play-button{
    width:58px;
    height:58px;
    font-size:1.35rem;
    margin-bottom:12px;
}

.video-box p{
    font-size:.9rem;
}

/* ==========================================================
   COMMON SECTION SPACING
========================================================== */

.trainer-event,
.trainer-problems,
.trainer-solution{
    padding:32px 0;
}

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

.trainer-event-container{
    width:92%;
    padding:24px 18px;
    border-radius:18px;
}

.trainer-event-label{
    font-size:.72rem;
    padding:6px 16px;
    margin-bottom:14px;
}

.trainer-event-title{
    font-size:1.6rem;
    line-height:1.25;
    margin-bottom:22px;
}

.trainer-event-grid{
    grid-template-columns:1fr;
    gap:14px;
}

.event-card{
    padding:16px;
    gap:12px;
    border-radius:14px;
}

.event-icon{
    font-size:1.45rem;
}

.event-card h4{
    font-size:.9rem;
    margin-bottom:4px;
}

.event-card p{
    font-size:.85rem;
}

.event-note{
    margin-top:18px;
    padding:15px;
    font-size:.82rem;
    line-height:1.6;
}

/* ==========================================================
   PROBLEMS
========================================================== */

.trainer-problems-box{
    width:92%;
    margin-top:-10px;
    padding:25px 18px;
    border-radius:16px;
}

.trainer-problems-title{
    font-size:1.6rem;
    margin:0 0 18px;
    line-height:1.2;
}

.trainer-problems-list{
    gap:14px;
}

.trainer-problems-list li{
    gap:10px;
}

.trainer-problems-list p{
    font-size:15px;
    line-height:1.55;
}

.icon{
    width:22px;
    height:22px;
    font-size:12px;
    margin-top:3px;
}

.trainer-bottom-text{
    margin-top:18px;
    font-size:16px;
    line-height:1.4;
}

.trainer-bottom-text span{
    font-size:17px;
    margin-top:6px;
}

/* ==========================================================
   SOLUTION
========================================================== */

.trainer-solution-box{
    width:92%;
    margin-top:-15px;
    padding:28px 18px;
    border-radius:18px;
}

.trainer-solution-title{
    font-size:1.7rem;
    margin:0 0 16px;
}

.trainer-program-heading{
    font-size:1.3rem;
    margin-bottom:15px;
    line-height:1.35;
}

.trainer-solution-intro{
    font-size:.92rem;
    line-height:1.7;
    margin-bottom:16px;
}

.trainer-discover-grid{
    grid-template-columns:1fr;
    gap:12px;
}

.discover-item{
    padding:14px;
    gap:12px;
}

.discover-icon{
    width:38px;
    height:38px;
    font-size:1rem;
}

.discover-item p{
    font-size:.9rem;
    line-height:1.45;
}


/* ==========================================================
   THIS IS NOT JUST ANOTHER WEBINAR
========================================================== */

.trainer-step{
    padding:32px 0;
}

.trainer-step-title{
    font-size:1.8rem;
    line-height:1.2;
}

.trainer-step-subtitle{
    font-size:.95rem;
    margin:10px 0 22px;
}

.trainer-step-grid{
    grid-template-columns:1fr;
    gap:14px;
}

.trainer-step-card{
    padding:22px 18px;
    border-radius:18px;
}

.step-icon{
    font-size:2rem;
    margin-bottom:12px;
}

.trainer-step-card h3{
    font-size:1rem;
    line-height:1.4;
}

/* ==========================================================
   MASTERCLASS
========================================================== */

.trainer-masterclass{
    padding:32px 0;
}

.trainer-masterclass-title{
    font-size:1.8rem;
    line-height:1.2;
}

.trainer-masterclass-subtitle{
    font-size:.95rem;
    margin:10px 0 22px;
}

.trainer-masterclass-grid{
    grid-template-columns:1fr;
    gap:16px;
}

.masterclass-card{
    height:260px;
    border-radius:20px;
}

.masterclass-overlay{
    padding:18px;
}

.masterclass-overlay h3{
    font-size:1.15rem;
    line-height:1.35;
}

/* ==========================================================
   MEET YOUR MENTOR - MOBILE (480px)
========================================================== */

.trainer-mentor{
    padding:35px 0;
}

.trainer-mentor-wrapper{
    width:92%;
}

/* Heading */

.trainer-mentor-heading{
    font-size:1.8rem;
    line-height:1.2;
    margin-bottom:20px;
}

/* Photo */

.trainer-mentor-showcase{
    width:250px;
}

.mentor-glow{
    width:150px;
    height:150px;
    top:42px;
    opacity:.3;
    filter:blur(12px);
}

/* Info Card */

.trainer-mentor-info{
    width:100%;
    margin:-20px auto 0;
    padding:22px 18px;
    border-radius:18px;
}

.trainer-mentor-info h3{
    font-size:1.45rem;
    margin-bottom:6px;
}

.mentor-role{
    font-size:.9rem;
}

.mentor-line{
    width:55px;
    height:3px;
    margin:16px auto 18px;
}

/* Achievement Grid */
.mentor-achievements{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:10px;
}

.achievement{
    padding:10px 12px;
    border-radius:10px;
}

.achievement h4{
    font-size:.82rem;
    line-height:1.3;
    font-weight:700;
}
/* ==========================================================
   TRAINER IDENTITY - MOBILE
========================================================== */

.trainer-identity{
    padding:35px 0;
}

.trainer-identity-title{
    font-size:1.8rem;
}

.trainer-identity-subtitle{
    font-size:.95rem;
    margin-bottom:25px;
}

/* Keep staircase */

.identity-stairs{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:12px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:10px 5px 15px;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;
}

/* Hide scrollbar */

.identity-stairs::-webkit-scrollbar{
    display:none;
}

.identity-stairs{
    scrollbar-width:none;
}

/* Smaller cards */

.stair{
    flex:0 0 135px;
    width:135px;

    padding:16px 14px;

    border-radius:16px;
}

.step1{height:150px;}
.step2{height:175px;}
.step3{height:205px;}
.step4{height:235px;}
.step5{height:200px;}

.step-no{
    width:34px;
    height:34px;
    font-size:.8rem;
    margin-bottom:12px;
}

.stair h3{
    font-size:1rem;
    margin-bottom:8px;
}
.step5{
    width:200px;
    flex:0 0 220px;
    height:200px !important; 
}
.stair p{
    font-size:.75rem;
    line-height:1.45;
}

/* ==========================================================
   WHY MOST PEOPLE...
========================================================== */

.trainer-pillars{
    padding:32px 0;
}

.trainer-pillars-title{
    font-size:1.8rem;
    line-height:1.2;
}

.trainer-pillars-subtitle{
    font-size:.95rem;
    margin-top:10px;
}

.trainer-pillars-intro{
    font-size:1rem;
    margin:16px 0 22px;
}

.trainer-pillars-grid{
    grid-template-columns:1fr;
    gap:16px;
}

.pillar-card{
    height:280px;
    border-radius:20px;
}

.pillar-overlay{
    padding:18px;
}

.pillar-number{
    width:40px;
    height:40px;
    font-size:.9rem;
}

.pillar-overlay h3{
    font-size:1.4rem;
}

.pillar-overlay p{
    font-size:.9rem;
    line-height:1.5;
}

/* ==========================================================
   WHAT YOU WILL LEARN
========================================================== */

.trainer-days{
    padding:32px 0;
}

.trainer-days-title{
    font-size:1.8rem;
    margin-bottom:22px;
}

.trainer-days-grid{
    grid-template-columns:1fr;
    gap:16px;
}

.day-card{
    padding:24px 18px;
    border-radius:18px;
}

.day-label{
    font-size:.82rem;
    padding:6px 16px;
}

.day-card h3{
    font-size:1.2rem;
    margin:14px 0;
}

.day-card li{
    font-size:.9rem;
    padding:8px 0 8px 24px;
    line-height:1.6;
}

/* ==========================================================
   EVERYTHING YOU GET
========================================================== */

.trainer-included{
    padding:32px 0;
}

.trainer-included-box{
    width:94%;
    border-radius:20px;
}

.trainer-included-title{
    font-size:1.8rem;
    padding:22px 15px;
}

.included-row{
    grid-template-columns:1fr 65px;
}

.included-left{
    padding:16px;
    font-size:.92rem;
}

.included-right{
    font-size:1.4rem;
}

/* ==========================================================
   YOUR TRANSFORMATION - MOBILE (480px)
========================================================== */

.trainer-transformation{
    padding:32px 0;
}

.trainer-transformation-title{
    font-size:1.8rem;
    line-height:1.2;
    margin-bottom:22px;
}

.transformation-wrapper{
    flex-direction:column;
    gap:18px;
}

.transform-card{
    width:100%;
    min-height:auto;
    padding:24px 18px;
    border-radius:20px;
}

.transform-card h3{
    font-size:2rem;
    margin-bottom:18px;
}

.transform-card li{
    font-size:.95rem;
    line-height:1.6;
}

/* BEFORE */

.before-card li{
    padding:10px 0;
}

/* AFTER */

.after-card li{
    position:relative;
    padding:10px 0 10px 30px;   /* Creates space for the tick */
    font-size:.95rem;
    line-height:1.6;
}

.after-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:10px;                   /* Align with first line */
    width:18px;                 /* Reserve space */
    text-align:center;
    font-size:.9rem;
    font-weight:700;
    color:#D72638;
}

.transform-arrow{
    width:65px;
    height:65px;
    font-size:2rem;
    transform:rotate(90deg);
}

/*impact*/

.trainer-impact{

    padding:20px 0 0;

}

.trainer-impact-title{

    font-size:1.8rem;

}

.trainer-impact-subtitle{

    font-size:.95rem;

}

.trainer-impact-text{

    font-size:1rem;

    margin-bottom:20px;

}

.trainer-impact-grid{

    grid-template-columns:1fr 1fr;

    gap:12px;

}

.impact-item{

    font-size:.9rem;

    padding:14px 8px;

    border-radius:10px;

}
.trainer-impact-image{

    margin-top:25px;

}

.trainer-impact-image img{

    max-width:100%;

    border-radius:12px;

}
/*final card*/

.trainer-final-cta{

    padding:20px 0 20px;

}

.trainer-final-card{

    padding:35px 18px;

    border-radius:20px;

}

.trainer-final-title{

    font-size:2rem;

    margin-bottom:16px;

}

.trainer-final-subtitle{

    font-size:1.2rem;

}

.trainer-final-text{

    font-size:.95rem;

    margin-bottom:22px;

}

.trainer-final-btn{

    width:100%;

    font-size:.95rem;

    padding:15px;

}
/*footer*/

.trainer-footer{

    padding:35px 0 25px;

}

.trainer-footer-title{

    font-size:1.5rem;

}

.trainer-footer-contact p{

    font-size:.9rem;

}

.trainer-footer-copy{

    font-size:.8rem;

}
.trainer-footer-disclaimer{

    width:92%;

}

.trainer-footer-disclaimer h4{

    font-size:.95rem;

}

.trainer-footer-disclaimer p{

    font-size:.8rem;

    line-height:1.6;

}

.trainer-footer-links{

    flex-direction:column;

    gap:8px;

}

.trainer-footer-links span{

    display:none;

}
.social-links{
display: flex;
  align-items: center;
  justify-self: center;
}
}