/* MEDIA QUERIES */
/* 1450px
---------------------------------------------- */
/* Padding, position, logo size */
@media screen and (max-width: 1450px) {
    /* ===========================================
    1.GLOBAL 
    */
    /* 1.1.Main Padding */
    /* Smaller with 60% */

    .hero-navigation {
        padding: 1.5rem 8rem 0 8rem;
    }

    .hero-info {
        padding: 52.5rem 8rem 3rem 8rem;
    }

    .benefits-section {
        padding: 5rem 8rem 6rem 8rem;
    }

    .courses {
        padding: 10rem 8rem 5rem 8rem;
    }

    .about-section {
        padding: 10rem 8rem 5rem 8rem;
    }

    .instructors-section {
        padding: 10rem 3rem 2rem 3rem;
    }

    .gallery-section {
        padding: 10rem 0 3rem 0;
    }

    .register-section {
        padding: 5rem 0 3rem 19rem;
    }

    .footer {
        padding: 2.5rem 4.5rem 2.5rem 4.5rem;
    }

    /* ===========================================
    2.HERO SECTION 
    */
    /* 2.1.Hero-Navigation */
    .hero-logo {
        height: 8rem;
    }

    /* ===========================================
    3.BENEFITS SECTION
    */
    .benefit-blue-thumb {
        top: 125rem;
        left: 4rem;
    }


    /* ===========================================
    4.COURSES SECTION
    */
    .course-purple-line {
        top: 20rem;
    }
    
    .course-purple-cross {
        top: 95rem;
        right: 4rem;
    }
    

    /* ===========================================
    8.CTA DOWNLOAD APP SECTION
    */
    .cta-download-app-main-title {
        right: 17rem;
    }
    
    .cta-download-app-btn {
        right: 24rem;
    }


    /* ===========================================
    10.FOOTER
    */
    .footer-logo {
        left: 5.2rem;
    }

    .footer-1 h1 {
        margin-top: 20rem;
    }
}


/* 1270px
---------------------------------------------- */
/* Typography, img size */
@media screen and (max-width: 1270px) {
    /* ===========================================
    1.GLOBAL
    */
    /* 1.4.Typography */
    /* Smaller with 20% */
    .hero-title {
        font-size: 4.6rem;
    }
    
    .cta-download-app-main-title,
    .footer-1 h1 {
        font-size: 3.4rem;
    }
    
    h1 {
        font-size: 3rem;
    }
    
    .hero-text {
        font-size: 2.7rem;
    }
    
    h2 {
        font-size: 2.3rem;
    }
    
    .hero-btn,
    p,
    .footer-2 h2,
    .footer-3 h2 {
        font-size: 2rem;
    }
    
    .btn,
    .hero-menu-link,
    .instructor-info,
    .gallery-info,
    .footer-menu-link,
    .footer-3 {
        font-size: 1.7rem;
    }

    .btn {
        padding: 1.6rem 2.4rem;  
    } 
    
    .hero-info-right p {
        font-size: 1rem;
    }


    /* ===========================================
    5.ABOUT SECTION
    */
    /* Smaller with 20% */
    .about-img-bg {
        width: 64rem;
        height: 23rem;
    }

    .about-img {
        width: 46rem;
        height: auto;
    }

    .about-pipe {
        left: 22rem;
    }


    /* ===========================================
    8.CTA DOWNLOAD APP SECTION
    */
    .cta-download-app-main-title {
        right: 21rem;
    }
    
    .cta-download-app-btn {
        bottom: 5rem;
        right: 25.5rem;
    }


    /* ===========================================
    10.FOOTER
    */
    .footer-pipe {
        right: 10rem;
    }
}


/* 1120px
---------------------------------------------- */
/* Sections & Navigation - hamburger menu */
@media screen and (max-width: 1120px) {
    /* ===========================================
    1.GLOBAL 
    */
    /* 1.1.Main Padding */
    /* Smaller with 60% */
    .register-section {
        padding: 5rem 8rem 3rem 8rem;
    }


    /* ===========================================
    2.HERO SECTION 
    */
    /* 2.1.Hero-Navigation */
    .hero {
        height: 98rem;
    }

    .hero-layer.active {
        display: block;
        background-color: rgba(0, 0, 0, 0.80);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .hamburger {
        display: flex;
    }

    .hero-menu {
        display: none;
        position: fixed;
        top: 15rem;
        right: 8rem;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    .hero-menu.active {
        display: flex;
    }

    .hero-menu-item {
        padding-bottom: 3rem;
    }

    /* 2.2.Hero-Information */
    .hero-info {
        flex-direction: column;
    }

    .hero-info-right p:first-of-type {
        color: var(--white);
    }


    /* ===========================================
    3.BENEFITS SECTION
    */
    .benefit {
        margin: 4rem 0rem;
    }

    .benefits-section {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .benefit-title {
        margin: 3rem 0 1rem 0;
    }

    .benefit-blue-thumb {
        top: 180rem;
        left: 5rem;
    }


    /* ===========================================
    4.COURSES SECTION
    */
    .courses-section {
        flex-direction: column;
    }

    .course {
        justify-content: center;
        align-items: center;
        width: 50rem;
        text-align: center;
        margin-bottom: 12rem;
    }

    .course-img-bg {
        top: -2rem;
        left: 9.5rem;
    }

    .course img {
        height: 26rem;
        width: auto;
    }

    .course-title {
        margin: 4.5rem 0 2rem 0;
    }
    
    .course-text {
        margin-bottom: 3.5rem;
    }

    .course-purple-cross {
        top: 214.5rem;
        right: 10rem;
    }


    /* ===========================================
    5.ABOUT SECTION
    */
    .about-section {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-bottom: 8rem;
    }

    .about-info {
        margin-left: 0;
        width: 50rem;
    }

    .about-main-title {
        margin: 4.5rem 0 2.5rem 0;
    }
    
    .about-small-title {
        margin: 0rem 0 2rem 0;
    }
    
    .about-text {
        margin-bottom: 6rem;
    }
    
    .about-pipe {
        position: absolute;
        bottom: -10rem;
        left: 8rem;
    }


    /* ===========================================
    7.OUR GALLERY SECTION
    */
    .gallery-thumb {
        top: -6rem;
        left: 15rem;
    }


    /* ===========================================
    10.FOOTER
    */
    .footer {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
    }

    .footer-1 {
        margin: 4rem 4rem 2rem 4rem;
    }

    .footer-logo {
        position: static;
        margin: 0 0 2rem 0;
    }

    .footer-1 h1 {
        margin: 0 0 3rem 0;
    }

    .footer-2 {
        margin: 4rem 4rem 2rem 4rem;
    }

    .footer-2 h2 {
        margin: 0 0 1rem 0;
    }

    .footer-3 {
        margin: 4rem 4rem 2rem 4rem;
    }
    
    .footer-3 h2 {
        margin: 0 0 1rem 0;
    }
}


/* 768px
---------------------------------------------- */
@media screen and (max-width: 768px) {
    /* ===========================================
    1.GLOBAL
    */
    /* 1.1.Main Padding */
    .hero-info {
        padding: 32.5rem 8rem 3rem 8rem;
    }

    .benefits-section {
        padding: 5rem 2rem 3rem 2rem;
    }

    .about-section {
        padding: 10rem 2rem;
    }

    .register-section {
        padding: 5rem 2rem 3rem 2rem;
    }

    .footer {
        padding: 2.5rem 2rem;
    }

    /* 1.4.Typography */
    /* Smaller with 10% */
    .hero-title {
        font-size: 4.1rem;
    }
    
    .cta-download-app-main-title,
    .footer-1 h1 {
        font-size: 3rem;
    }
    
    h1 {
        font-size: 2.7rem;
    }
    
    .hero-text {
        font-size: 2.4rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .hero-btn,
    p,
    .footer-2 h2,
    .footer-3 h2 {
        font-size: 1.8rem;
    }
    
    .btn,
    .hero-menu-link,
    .instructor-info,
    .gallery-info,
    .footer-menu-link,
    .footer-3 {
        font-size: 1.5rem;
    }

    .btn {
        padding: 1.5rem 2.2rem;  
    }
    
    .hero-info-right p {
        font-size: 0.9rem;
    }


    /* ===========================================
    2.HERO SECTION 
    */
    .hero {
        height: 92rem;
    }

    /* 2.2.Hero-Information */   
    
    .hero-title {
        width: 100%;
    }

    /* 2.3.Hero-Images */
    .hero-purple-line {
        top: 17rem;
        left: 0;
    }

    .hero-thumb {
        top: 67rem;
        left: 5rem;
    }
    
    .hero-pipe {
        top: 75.3rem;
        right: 0;
    }
    
    .hero-purple-cross {
        top: 78rem;
        right: 16.5rem;
    }


    /* ===========================================
    3.BENEFITS SECTION
    */
    .benefit-blue-thumb {
        top: 188rem;
        left: 5rem;
    }


    /* ===========================================
    4.COURSES SECTION
    */
    .course {
        width: 100%;
    }

    .course-img-bg {
        top: -4rem;
        left: 0;
        height: 24rem;
        width: 100%;
    }

    .course-purple-cross {
        top: 217rem;
        right: 10rem;
    }


    /* ===========================================
    5.ABOUT SECTION
    */
    /* Smaller with 20% */
    .about-img-bg {
        width: 100%;
        height: 23rem;
    }

    .about-info {
        margin-left: 0;
        width: 100%;
    }


    /* ===========================================
    6.INSTRUCTORS SECTION
    */
    .instructor {
        margin: 2rem 0rem;
    }


    /* ===========================================
    7.OUR GALLERY SECTION
    */
    .gallery-small-title,
    .gallery-info {
        width: 100%;
        padding: 0 1rem;
        text-align: center;
    }

    .gallery-thumb {
        top: -8rem;
        left: 8rem;
    }


    /* ===========================================
    8.CTA DOWNLOAD APP SECTION
    */
    .cta-download-app-section {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-image: url(../images/cta-download-app-background-resized.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .cta-download-app-main-title {
        position: static;
        margin-top: 13rem;
    }
    
    .cta-download-app-btn {
        position: static;
        margin-bottom: 4rem;
    }


    /* ===========================================
    9.REGISTER SECTION
    */
    .register-section {
        align-items: center;
        text-align: center;
    }

    .register-info {
        width: 100%;
    }


    /* ===========================================
    10.FOOTER
    */
    .footer-pipe {
        top: -18rem;
        right: 8rem;
    }
}


/* 480px
---------------------------------------------- */
@media screen and (max-width: 480px) {
    /* ===========================================
    1.GLOBAL
    */
    /* 1.1.Main Padding */
    .hero-navigation {
        padding: 1.5rem 4rem 0 4rem;
    }

    .hero-info {
        padding: 23.5rem 4rem 3rem 4rem;
    }

    .courses {
        padding: 10rem 2rem;
    }

    /* 1.4.Typography */
    /* Smaller with 20% */
    .hero-title {
        font-size: 3.3rem;
    }
    
    .cta-download-app-main-title,
    .footer-1 h1 {
        font-size: 2.7rem;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    .hero-text {
        font-size: 1.9rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .hero-btn,
    p,
    .footer-2 h2,
    .footer-3 h2 {
        font-size: 1.8rem;
    }
    
    .btn,
    .hero-menu-link,
    .instructor-info,
    .gallery-info,
    .footer-menu-link,
    .footer-3 {
        font-size: 1.5rem;
    }

    .btn {
        padding: 1.3rem 2rem;  
    }
    
    .hero-info-right p {
        font-size: 0.8rem;
    }

    .footer-address {
        font-size: 1.6rem;
    }


    /* ===========================================
    2.HERO SECTION 
    */
    /* 2.1.Hero-Navigation */
    .hero {
        height: 82rem;
    }

    .hero-logo {
        height: 6rem;
    }

    .hamburger {
        top: 4rem;
        right: 4rem;
        width: 3.4rem;
        height: 2.1rem;
    }

    .hero-menu {
        top: 15rem;
        right: 4rem;
    }

    /* Changes to the hero-navigation background color when scrolling down and up */
    .hero-layer-nav-scrolled {
        height: 9rem;
    }

    /* 2.3.Hero-Images */
    .hero-purple-line {
        top: 14rem;
        left: 0;
    }

    .hero-thumb {
        top: 57rem;
        left: 2rem;
    }
    
    .hero-pipe {
        top: 65.3rem;
        right: 0;
    }
    
    .hero-purple-cross {
        top: 70rem;
        right: 5rem;
    }


    /* ===========================================
    6.INSTRUCTORS SECTION
    */
    .instructors-main-title {
        margin-bottom: 4rem;
    }
}