/* =============== MEDIA QUERIES (MEDIUM DEVICES) ===============*/
@media screen and (max-width: 1024px){
    /* * * * * * * * * * * NAVIGATION * * * * * * * * * * */
   
   .logo a:visited, .logo a:active{
        color: var(--color-primary-font);
        -webkit-color: var(--color-primary-font);
   }

   .hamburger_menu {
        display: block;
        position: relative;
        z-index: 600;
        margin-top: .25rem;
        padding: 0;

   }


   .navbar_menu {
        -webkit-background: hsl(0 0% 100% / 0.1);
        -webkit-backdrop-filter: blur(3rem);
        background: hsl(0 0% 100% / 0.1);
        backdrop-filter: blur(2rem);
        flex-direction: column;
        inset: 0 0 0 50%;
        padding: min(30vh, 10rem) 1rem;
        position: fixed;
        transform: translateX(100%);
        transition: var(--transition);
        z-index: 400;
   }

   .navbar_menu[data-visible="true"]{
        transform: translateX(0%)
   }


   .hamburger_menu[aria-expanded="true"] .bar:nth-child(2){
        opacity: 0;
   }

   .hamburger_menu[aria-expanded="true"] .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
   }

   .hamburger_menu[aria-expanded="true"] .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
   }

   .mobile_display_hide {
        display: none;
   }

   .mobile_display_link {
        display: block;
   }
   /* * * * * * * * * * * NAVIGATION * * * * * * * * * * */

   /* * * * * * * * * * * HERO SECTION * * * * * * * * * * */

    .hero_section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 2rem;

    }

    .hero_image {
        border-radius: 2rem;

    }

    .inner_container .hero_titles {
        top: 20.5%;
    }



    .hero_titles{
        align-items: center;
        gap: 1rem;
        margin-top: -2rem;
    }


    .hero_titles h1 {
        text-shadow:  .1rem .07rem .05rem rgba(0, 0, 0, 1);
    }

    .hero_sign_in{
        flex-direction: column;
        gap: 1.5rem;
    }

    /* * * * * * * * * * * HERO SECTION * * * * * * * * * * */

    /* * * * * * * * * * * MOOD, MUSIC, TIMER SECTION * * * * * * * * * * */
    .mood_music_timer_section {
        margin-top: 0rem;

    }

    /* * * * * * * * * * * MOOD, MUSIC, TIMER SECTION * * * * * * * * * * */

    /* * * * * * * * * THE MEDITATION SECTION * * * * * * * * */
    .meditation_container {
        min-height: 90vh;

    }

    .meditation_image{
        border: none;
        outline: none;
        border-radius: 2rem;
        filter: brightness(80%);
        width: 100%;
        aspect-ratio: 1.75;
        box-shadow: var(--primary-box-shadow);
    }

     .fa-play, .fa-pause {
        font-size: 1.5rem;
    }

    .start_meditation {
        height: 3.25rem;
        width: 3.25rem;
    }

    /* * * * * * * * * THE MEDITATION SECTION * * * * * * * * */

    /* * * * * * * * * MORE MINDFUL SECTION  * * * * * * * * */
    .more_minful_container {
        margin-top: 2rem;
    }



    .testiment_container {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .testiment_container .testiment_box:nth-child(1),
    .testiment_container .testiment_box:nth-child(3){
       margin-right: 10rem;
    }

     .testiment_container .testiment_box:nth-child(2){
        margin-left: 10rem;
     }

    /* * * * * * * * * MORE MINDFUL SECTION  * * * * * * * * */

}



@media screen and (max-width: 600px){
    /* * * * * * * * * * * NAVIGATION * * * * * * * * * * */

   .hamburger_menu {
        display: block;
         z-index: 600;
   }

   .nabar_menu {
        -webkit-background: hsl(0 0% 100% / 0.1);
        -webkit-backdrop-filter: blur(3rem); */
        background: hsl(0 0% 100% / 0.1);
        backdrop-filter: blur(2rem);
        flex-direction: column;
        inset: 0 0 0 50%;
        padding: min(30vh, 10rem) 1rem;
        position: fixed;
        transform: translateX(100%);
        transition: var(--transition);
        z-index: 500;
   }

   .mobile_display_link {
        display: block;
   }

   /* * * * * * * * * * * NAVIGATION * * * * * * * * * * */

   /* * * * * * * * * HERO SECTION * * * * * * * * */

    .hero_section {
        height: auto;
        margin: 1rem 0 15rem 0;
    }

    .hero_image {
        width: 100%;
        margin-top: calc(40% - 2rem);
        aspect-ratio: .95;
    }


   .inner_container .hero_titles {
        top: 50%;
   }

    .hero_titles h1 {
	text-align: center;
        text-shadow:  .1rem .07rem .05rem rgba(0, 0, 0, 1);
    }


    .hero_sign_in{
        flex-direction: column;
        gap: 1.5rem;
    }

    .sign_in {
        font-size: 1.25rem;
    }
    /* * * * * * * * * HERO SECTION * * * * * * * * */

    /* * * * * * * * * MOOD, MUSIC, TIMER SECTION * * * * * * * * */
    .mood_music_timer_section {
        min-height: auto;
    }

    .moods_bg{
         height: 10.15rem;
         width: 100%;
    }

    .major_moods_container,
    .major_sound_container,
    .major_times_container{
        display: grid;
        grid-template-columns: repeat(2, 50%);
        height: 10rem;
        padding: 0;
        margin: 0;
        width: 100%;
    }


    .major_mood,
    .major_sound,
    .time_btn,
    .time_btn:nth-child(5){
        border-right: 2px solid rgba(255, 255, 255, 0.5);
    }

   .time_btn:nth-child(2){
        border: none;
    }

   .major_mood:nth-child(1),
   .major_mood:nth-child(3),
   .time_btn:nth-child(1),
   .time_btn:nth-child(2),
   .time_btn:nth-child(3),
   .time_btn:nth-child(4){
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
   }

    .major_mood:nth-child(3),
    .major_sound:nth-child(2),
    .time_btn:nth-child(2),
    .time_btn:nth-child(4){
        border-right: none;
    }

    .major_mood:nth-child(7){
        border-bottom: none;
    }

    .major_sound:nth-child(1){
        border-bottom:2px solid rgba(255, 255, 255, 0.5);

    }

    .major_sound:nth-child(2){
        border-bottom:2px solid rgba(255, 255, 255, 0.5);

    }


    .good_home_container {
         margin-right: 12.5rem;
    }

    .meh_home_container {
          margin-left: 1rem;
    }

    .bad_home_container {
        right: 0;
        top: 0;
    }

    /* * * * * * * * * MOOD, MUSIC, TIMER SECTION * * * * * * * * */

    /* * * * * * * * * THE MEDITATION SECTION * * * * * * * * */
    .meditation_container {
        min-height: 90vh;

    }

    .meditation_image{
        border: none;
        outline: none;
        border-radius: 2rem;
        filter: brightness(80%);
        width: 100%;
        aspect-ratio: .95;
        box-shadow: var(--primary-box-shadow);
    }


    .sound_box {
        margin-top: -3rem;
        margin-bottom: 1.5rem;
    }


    .fa-play, .fa-pause {
        font-size: 1.25rem;
    }

    .start_meditation {
        height: 3.15rem;
        width: 3.15rem;
    }

    /* * * * * * * * * THE MEDITATION SECTION * * * * * * * * */

    /* * * * * * * * * HOW IT WORKS SECTION * * * * * * * * */
    .spacer {
        aspect-ratio: 960/500;
    }

    .how_it_works_section {
         margin-top: -2rem;
    }

    .how_it_works_container{
        align-items: center;
        flex-direction: column;
        margin-top: 3rem;
    }

    .container_align {
        align-items: center;
        flex-direction: column;
    }

    .left_container {
        align-items: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        position: relative;
    }

    .left_container h2:nth-child(3){
        text-align: center;
    }

    .works_noise {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

     .works_noise .small_button {
        margin-bottom: 0rem;
     }

     .works_noise .small_button:nth-child(3) {
        margin-bottom: 1.5rem;
     }

     .horizontal_mobile_divide_two {
        display: block;
        border-top: 2px solid black;
        margin: 1.5rem 0;
        width: clamp(17.5rem, 22vw, 25rem);
     }
     .vertical_divide_two {
        display: none;
    }

     .butterfly {
        display: none;
    }

    .right_container {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .right_container ul li{
        justify-content: center;
    }

    /* * * * * * * * * HOW IT WORKS SECTION * * * * * * * * */

    /* * * * * * * * * WELLNESS SECTION  * * * * * * * * */
    .wellness_container {
        margin-top: -3rem;
    }

    .wellness_articles{
        gap: 1rem;
        grid-template-columns: repeat(1, 100%);
        grid-template-rows: repeat(4, 4rem)
    }

    /* * * * * * * * * WELLNESS SECTION  * * * * * * * * */

    /* * * * * * * * * MORE MINDFUL SECTION  * * * * * * * * */
    .more_minful_container {
        margin-top: 2rem;
    }

    .testiment_box {
        width: 60%;
    }




    .testiment_container {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .testiment_container .testiment_box:nth-child(1),
    .testiment_container .testiment_box:nth-child(3){
       margin-right: 8rem;
    }

     .testiment_container .testiment_box:nth-child(2){
        margin-left: 8rem;
     }

    /* * * * * * * * * MORE MINDFUL SECTION  * * * * * * * * */

    /* * * * * * * * * FOOTER SECTION  * * * * * * * * */
    footer {
        height: 20rem;
    }

    .footer_container {
        align-items: center;
        flex-direction: column;
        width: auto;
    }

    .footer_link_block {
        gap: 3rem;

    }


    .footer_social_icons{
        order: 3;
    }

    .rights_reserved{
        display: none;
    }

    .mobile_rights_reserved{
        display: block;
        order: 4;
        margin-bottom: 1rem;
    }

    /* * * * * * * * * FOOTER SECTION  * * * * * * * * */

}

/* * * * * * * SMALL SCREENS * * * * * * */
@media screen and (max-width: 420px){
    .current_sound {
        font-size: clamp(.7rem, 1.80vh, 1.25rem);

        height: clamp(4rem, 5vh, 4rem);

        width: clamp(7rem, 30vw, 30rem);
    }
}


/* * * * * * * SMALL SCREENS * * * * * * */


/*
@supports (backdrop-filter: blur(1rem)) {
        .navar_items ul {
            background: hsl(0 0% 100% / 0.1);
            backdrop-filter: blur(2rem);
        }
   }
*/