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

@media (max-width:768px){
.trainer-banner{
    font-size:22px;
    padding:18px;
}
.trainer-container{
    width:92%;
    min-height:auto;
    height:auto;
    padding:40px 0 80px;
}
.trainer-title .gold,
.trainer-title .white,
.trainer-title .underline{
    font-size:3.4rem;
    line-height:1;
}
.trainer-subtitle{
    font-size:22px;
}
.trainer-subtitle span{
    font-size:28px;
}
.trainer-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:280px;
    max-width:100%;
    margin:35px auto 0;
    padding:16px 24px;
    position:relative;
    z-index:20;
}
.trainer-btn span{
    font-size:16px;
}
}

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

@media (max-width:480px){
.trainer-banner{
    font-size:16px;
    line-height:1.4;
    padding:16px 12px;
}
.trainer-container{
    width:92%;
    padding:40px 0 70px;
}
.trainer-title{
    letter-spacing:-1px;
    margin-bottom:35px;
}
.trainer-title .gold,
.trainer-title .white,
.trainer-title .underline{
    font-size:2.4rem;
}
.trainer-title .underline{
    text-decoration-thickness:3px;
    text-underline-offset:6px;
}
.trainer-subtitle{
    font-size:17px;
    line-height:1.7;
}
.trainer-subtitle span{
    font-size:22px;
}
.trainer-btn{
    width:240px;
    margin:30px auto 0;
    padding:14px 20px;
}
.trainer-btn span{
    font-size:15px;
}
}
/* ==========================================================
   TABLET
========================================================== */

@media (max-width:768px){
.trainer-problems{
    padding:80px 0;
}
.trainer-section-title{
    font-size:38px;
    margin-bottom:45px;
}
.trainer-problem-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}
.trainer-problem-card{
    padding:28px 20px;
}
.trainer-icon{
    width:65px;
    height:65px;
    font-size:28px;
}
.trainer-problem-card p{
    font-size:16px;
}
.trainer-bottom-text{
    font-size:24px;
}
.trainer-bottom-text span{
    font-size:28px;
}
}

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

@media (max-width:480px){
.trainer-section-title{
    font-size:30px;
}
.trainer-problem-grid{
    grid-template-columns:1fr;
    gap:18px;
}
.trainer-problem-card{
    padding:24px 18px;
}
.trainer-icon{
    width:58px;
    height:58px;
    font-size:24px;
}
.trainer-problem-card p{
    font-size:15px;
    line-height:1.7;
}
.trainer-bottom-text{
    font-size:20px;
}
.trainer-bottom-text span{
    font-size:22px;
}
}
/* ==========================================================
   THE SOLUTION - TABLETS (768px)
========================================================== */

@media (max-width:768px){
.trainer-solution-section{
    padding:80px 0;
    margin-top:-100px;
}
.trainer-solution-title{
    gap:8px;
    margin-bottom:30px;
}
.the-word{
    font-size:48px;
    letter-spacing:-2px;
}
.solution-word{
    font-size:50px;
}
.trainer-solution-box{
    max-width:100%;
    padding:35px 30px;
    border-radius:22px;
}
.trainer-solution-box p{
    font-size:18px;
    line-height:1.7;
    margin-bottom:18px;
}
.solution-highlight{
    font-size:22px !important;
    margin-top:25px;
    margin-bottom:10px !important;
}
.solution-ending{
    max-width:100%;
    font-size:20px !important;
    line-height:1.6 !important;
}
}
/* ==========================================================
   THE SOLUTION - MOBILE (480px)
========================================================== */

@media (max-width:480px){
.trainer-solution-section{
    padding:60px 0;
    margin-top:-70px;
}
.trainer-solution-title{
    flex-direction:column;
    align-items:center;
    gap:0;
    margin-bottom:22px;
}
.the-word{
    font-size:36px;
    letter-spacing:-1px;
}
.solution-word{
    font-size:42px;
}
.trainer-solution-box{
    width:100%;
    padding:25px 20px;
    border-radius:18px;
}
.trainer-solution-box p{
    font-size:15px;
    line-height:1.65;
    margin-bottom:15px;
}
.solution-highlight{
    font-size:18px !important;
    margin-top:20px;
    margin-bottom:8px !important;
}
.solution-ending{
    font-size:17px !important;
    line-height:1.55 !important;
}
}
/* ==========================================================
   REVEAL SECTION RESPONSIVE
========================================================== */

@media (max-width:768px){
.trainer-reveal{
    padding:90px 0;
}
.trainer-reveal-title{
    font-size:40px;
}
.trainer-not{
    font-size:34px;
    margin-bottom:55px;
}
.trainer-not span{
    font-size:70px;
}
.trainer-pillars{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.pillar{
    padding:35px 20px;
}
.pillar h4{
    font-size:28px;
}
.trainer-final{
    font-size:20px;
    margin-top:50px;
}
}

@media (max-width:480px){
.trainer-reveal-title{
    font-size:30px;
}
.trainer-not{
    font-size:26px;
}
.trainer-not span{
    font-size:55px;
}
.trainer-pillars{
    grid-template-columns:1fr;
}
.pillar h4{
    font-size:26px;
}
.trainer-final{
    font-size:17px;
}
}
/* ==========================================================
   WHAT YOU'LL LEARN
========================================================== */

@media(max-width:768px){
.trainer-roadmap{
    padding:90px 0;
}
.roadmap-title{
    font-size:42px;
    margin-bottom:60px;
}
.roadmap::before{
    left:18px;
}
.road-step{
    width:calc(100% - 55px);
    margin-left:55px !important;
    margin-right:0 !important;
    padding:28px;
    margin-bottom:45px;
}
.road-step::after{
    left:-47px !important;
    right:auto !important;
    width:18px;
    height:18px;
}
.road-step h3{
    font-size:26px;
}
.road-step li{
    font-size:17px;
    line-height:1.6;
}
.level{
    font-size:20px;
}
.level-arrow{
    font-size:28px;
}
}
@media(max-width:480px){
.trainer-roadmap{
    padding:70px 0;
}
.roadmap-title{
    font-size:34px;
    margin-bottom:45px;
}
.roadmap::before{
    left:12px;
    width:4px;
}
.road-step{
    width:calc(100% - 38px);
    margin-left:38px !important;
    padding:22px 18px;
    border-radius:18px;
}
.road-step::after{
    left:-34px !important;
    width:14px;
    height:14px;
}
.step-number{
    font-size:11px;
    padding:6px 12px;
}
.road-step h3{
    font-size:21px;
}
.road-step li{
    font-size:15px;
    line-height:1.6;
    padding-left:24px;
}
.level{
    font-size:17px;
}
.level-arrow{
    font-size:22px;
}
}
@media(max-width:768px){
.benefits-grid{
    grid-template-columns:repeat(2,1fr);
}
.trainer-benefits-title{
    font-size:42px;
}
.benefit-card h3{
    font-size:18px;
}
}

@media(max-width:480px){
.benefits-grid{
    grid-template-columns:1fr;
}
.trainer-benefits-title{
    font-size:34px;
}
}
@media(max-width:768px){
.transform-grid{
    grid-template-columns:1fr;
}
.transform-arrow{
    transform:rotate(90deg);
    font-size:55px;
    margin:15px 0;
}
.before-box,
.after-box{
    min-height:auto;
    padding:35px;
}
.transformation-title{
    font-size:42px;
}
.before-box li,
.after-box li{
    font-size:18px;
}
}

@media(max-width:480px){
.transformation-title{
    font-size:34px;
}
.before-box h3,
.after-box h3{
    font-size:30px;
}
.before-box li,
.after-box li{
    font-size:16px;
}
.transform-arrow{
    font-size:42px;
}
}
/*==========================================================
SUCCESS STORIES
==========================================================*/

@media(max-width:768px){
.trainer-success{
    padding:80px 0;
}
.trainer-success-title{
    font-size:42px;
}
.trainer-success-subtitle{
    font-size:18px;
    margin-bottom:45px;
}
.trainer-success-grid{
    grid-template-columns:1fr;
    gap:25px;
}
.success-card{
    padding:28px;
}
.success-photo{
    width:110px;
    height:110px;
}
.success-card h3{
    font-size:22px;
}
.success-card p{
    font-size:16px;
}
.trainer-video-section{
    margin-top:70px;
}
.trainer-video-section h3{
    font-size:34px;
}
.trainer-video-grid{
    grid-template-columns:1fr;
}
.trainer-results{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.result-box{
    padding:25px;
}
.result-box h2{
    font-size:34px;
}
.result-box p{
    font-size:16px;
}
}

@media(max-width:480px){
.trainer-success-title{
    font-size:34px;
}
.trainer-success-subtitle{
    font-size:16px;
}
.success-photo{
    width:90px;
    height:90px;
}
.success-card h3{
    font-size:20px;
}
.success-card p{
    font-size:15px;
}
.trainer-video-section h3{
    font-size:28px;
}
.trainer-results{
    grid-template-columns:1fr 1fr;
    gap:15px;
}
.result-box{
    padding:20px;
}
.result-box h2{
    font-size:28px;
}
.result-box p{
    font-size:14px;
}
}