/* ==========================================================
   TABLET
========================================================== */

@media (max-width:768px){

.trainer-banner{

    font-size:22px;

    padding:18px;

}

.trainer-container{

    width:92%;
    min-height:auto;
    height:auto;
    padding:60px 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:50px 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;

}

}