/*==================================================
                LARGE LAPTOP
===================================================*/

@media (max-width:1200px){

.container{
    width:95%;
}

.hero h1,
.stats-left h2,
.section-heading h2,
.mentor-content h2,
.refund-content h2,
.cta-content h2{
    font-size:42px;
}

.hero-wrapper,
.stats-wrapper,
.mentor-wrapper,
.refund-wrapper,
.cta-wrapper{
    gap:50px;
}

.program-grid,
.roadmap-grid,
.testimonial-grid{
    gap:25px;
}

}


/*==================================================
                TABLET
===================================================*/

@media (max-width:992px){

.container{
    width:92%;
}

/*--------------------
Header
---------------------*/

header{
    padding:15px 0;
}

.nav-wrapper{
    height:auto;
}

nav{
    display:none;
}

.btn{
    padding:12px 24px;
}

/*--------------------
Hero
---------------------*/

.hero{
    padding:80px 0;
}

.hero-wrapper{
    flex-direction:column;
    text-align:center;
}

.hero-left,
.hero-right{
    width:100%;
}

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:16px;
}

.market-list{
    grid-template-columns:repeat(2,1fr);
}

.hero-features{
    grid-template-columns:repeat(2,1fr);
}

.hero-buttons{
    justify-content:center;
    display:flex;
    flex-wrap:wrap;
}

.hero-right{
    margin-top:50px;
}

.hero-right img{
    width:380px;
}

/*--------------------
Why
---------------------*/

.why-grid{
    grid-template-columns:repeat(2,1fr);
}

/*--------------------
Statistics
---------------------*/

.stats-wrapper{
    grid-template-columns:1fr;
}

.stats-left{
    text-align:center;
}

.stats-grid{
    grid-template-columns:repeat(2,1fr);
}

/*--------------------
Programs
---------------------*/

.program-grid{
    grid-template-columns:repeat(2,1fr);
}

/*--------------------
Roadmap
---------------------*/

.roadmap-grid{
    grid-template-columns:1fr;
}

/*--------------------
Mentor
---------------------*/

.mentor-wrapper{
    grid-template-columns:1fr;
}

.mentor-image{
    max-width:450px;
    margin:auto;
}

.mentor-content{
    text-align:center;
}

.mentor-info{
    grid-template-columns:repeat(2,1fr);
}

.mentor-buttons{
    justify-content:center;
}

/*--------------------
Refund
---------------------*/

.refund-wrapper{
    grid-template-columns:1fr;
}

.refund-image{
    max-width:450px;
    margin:auto;
}

.refund-badge{
    left:20px;
}

/*--------------------
Testimonials
---------------------*/

.testimonial-grid{
    grid-template-columns:repeat(2,1fr);
}

/*--------------------
FAQ
---------------------*/

.faq-wrapper{
    width:100%;
}

/*--------------------
CTA
---------------------*/

.cta-wrapper{
    grid-template-columns:1fr;
}

.cta-card{
    max-width:500px;
    margin:auto;
}

/*--------------------
Footer
---------------------*/

.footer-top{
    grid-template-columns:repeat(2,1fr);
}

.footer-bottom{
    flex-direction:column;
    text-align:center;
    gap:15px;
}

}


/*==================================================
                MOBILE
===================================================*/

@media (max-width:768px){

section{
    padding:70px 0 !important;
}

.section-heading{
    margin-bottom:45px;
}

.section-heading h2,
.hero h1,
.stats-left h2,
.mentor-content h2,
.refund-content h2,
.cta-content h2{

    font-size:34px;
}

.section-heading p,
.hero p,
.stats-left p,
.mentor-content p,
.refund-content p,
.cta-content p{

    font-size:16px;
    line-height:28px;
}

/*--------------------
Top Bar
---------------------*/

.top-bar{

    font-size:13px;
    padding:10px;
}

/*--------------------
Buttons
---------------------*/

.btn,
.primary-btn,
.outline-btn,
.whatsapp-btn{

    width:100%;
    text-align:center;
}

/*--------------------
Hero
---------------------*/

.market-list{

    grid-template-columns:1fr;
}

.hero-features{

    grid-template-columns:1fr;
}

.hero-buttons{

    flex-direction:column;
}

.hero-right img{

    width:100%;
}

.floating{

    position:relative;
    display:block;
    margin:15px auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
}

/*--------------------
Cards
---------------------*/

.why-grid,
.stats-grid,
.program-grid,
.roadmap-grid,
.testimonial-grid{

    grid-template-columns:1fr;
}

.mentor-info{

    grid-template-columns:1fr;
}

.cta-features{

    grid-template-columns:1fr;
}

/*--------------------
Refund
---------------------*/

.refund-badge{

    position:relative;
    left:0;
    bottom:0;
    margin-top:20px;
}

/*--------------------
Footer
---------------------*/

.footer-top{

    grid-template-columns:1fr;
}

.footer-links{

    flex-direction:column;
    gap:10px;
}

.social-icons{

    justify-content:center;
}

}


/*==================================================
            SMALL MOBILE
===================================================*/

@media (max-width:480px){

.container{

    width:94%;
}

.hero h1{

    font-size:30px;
}

.section-heading h2,
.stats-left h2,
.mentor-content h2,
.refund-content h2,
.cta-content h2{

    font-size:28px;
}

.hero-right img{

    width:100%;
}

.program-card,
.why-card,
.stat-card,
.roadmap-card,
.testimonial-card,
.cta-card{

    padding:25px;
}

.footer{

    text-align:center;
}

.footer-logo{

    margin:auto auto 20px;
}

.experience-card{

    position:relative;
    right:0;
    bottom:0;
    margin-top:20px;
}

.hero-buttons,
.mentor-buttons{

    gap:15px;
}

}