/* =============== NAVIGATION =============== */
.nav_container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}


.logo {

    cursor: pointer;
    font-size: 3rem;
    font-weight: 500;
}

.logo a:visited, .logo a:active{
    color: var(--color-primary-font);
    -webkit-color: var(--color-primary-font);
}

.navbar_items{
    align-items: center;
    display: flex;
}

.navbar_items ul {
    display: flex;
    font-size: 1.5rem;
    gap: 2rem;
}

.navbar_items ul li a {
    color: var(--color-primary-font);
}

.navbar_items ul li a:hover, .logo:hover {
    color: #FF7B54;
}

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


.hamburger_menu {
    cursor: pointer;
    display: none;
}


.bar {
    background-color: var(--color-primary-font);
    display: block;
    height: 3px;
    margin: 5px auto;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    width: 2.5rem;

}

.nav_dropdown {
    align-items: center;
    background-color: var(--color-primary-bg);
    border: 2px solid var(--color-primary-font);
    display: flex;
    flex-direction: column;
    margin-right: 5rem;
    margin-top: 1rem;
    opacity: 0;
    padding: 1rem 1rem;
    position: absolute;
    right: 0;
    transition: var(--transition);
    -webkit-transition: var(--transition);
}

.nav_dropdown.show {
    animation: fadeIn 1s;
    opacity: 1;
    pointer-events: auto;
    -webkit-animation: fadeIn 1s;
    z-index: 100;
}

.mobile_display_link {
    display: none;
}
/* =============== NAVIGATION =============== */


/* =============== HERO SECTION =============== */
.hero_section {
    height: 90vh;
}

.inner_container {
    height: auto;
    position: relative;
    width: 100%
}

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

.inner_container .hero_titles {
    left: 5%;
    position: absolute;
    top: 15.5%;
}


.hero_titles {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 90%;
}

.hero_titles h1 {
    font-size: clamp(1.55rem, 6vw, 6rem);
    font-weight: 300;
    text-shadow:  .3rem .15rem .1rem rgba(0, 0, 0, 1);
}

.hero_titles h1:nth-child(4){
    font-weight: 600;
}

.hero_sign_in {
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    gap: .5rem;
    margin: 2rem auto;
    width: 90%;
    position: relative;

}
.username_form,
.password_form {
    position: relative;
}

.sign_in {
    background: black;
    border-radius: 10px;
    box-shadow: var(--secondary-shadow);
    color: var(--color-primary-font);
    font-family: 'Gruppo', serif;
    font-size: 1.5rem;
    font-weight: 200;
    height: 2.5rem;
    opacity: .5;
    padding-left: 3rem;
    position: relative;
    width: clamp(18rem, 25vw, 25rem);
}


.sign_in:focus {
    outline: none;
}

.username_form i {
    font-size: .9rem;
    position: absolute;
    left: 15px;
    top: 15px;
}

.password_form i {
    font-size: .9rem;
    position: absolute;
    left: 15px;
    top: 15px;

}

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


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

.mood_music_timer_section {
    margin-top: 5rem;
    min-height: 90vh;

}


.mood_section, .sound_section {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position:  relative;
}

.moods_bg {
    border-radius: 1rem;
    box-shadow: var(--primary-box-shadow);
    height: 3rem;
    filter: brightness(70%);
    width: 80%
}


.major_moods_container, .major_sound_container, .major_times_container {
    bottom: 1%;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    width: 80%;
}



.mood_block, .sound_block {
    align-items: center;
    background-color: black;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: var(--secondary-shadow);
    color: var(--color-primary-font);
    display: flex;
    font-size: clamp(0.95rem, 1.25vw, 1.25rem);
    font-weight: 100;
    height: clamp(2.5rem, 7vh ,4rem);
    justify-content: center;
    margin: 5rem 0 2rem 0;
    opacity: .5;
    width: clamp(16rem, 22vw, 23rem);
}


.major_mood {
    background: transparent;
    cursor: pointer;
    font-family: 'Gruppo', serif;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 600;
    padding: .20% 8.25% .20% 6.5%;
    color: var(--color-primary-font);
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    border-right: 2px solid white;
    position: absoulte;
}

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

.great_home_container,
.good_home_container,
.meh_home_container,
.bad_home_container,
.sound_home_container,
.time_home_container {
    background: rgba(71, 48, 160, .95);
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: auto;
    opacity: 0;
    padding: 1rem 1rem;
    pointer-events: none;
    position: absolute;
}


.great_home_container {
    left: 0;
}

.good_home_container {
     margin-right: 12.5rem;
}

.meh_home_container {
    margin-left: 14rem;
}

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

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


.time_home_container{
    right: 0;
    top: 0
}

.great_home_container.show,
.good_home_container.show,
.meh_home_container.show,
.bad_home_container.show,
.sound_home_container.show,
.time_home_container.show {
    animation: fadeIn 1s;
    opacity: 1;
    pointer-events: auto;
    -webkit-animation: fadeIn 1s;
    z-index: 100;

}


.major_sound {
    background: transparent;
    border-right: 2px solid white;
    color: var(--color-primary-font);
    cursor: pointer;
    font-family: 'Gruppo', serif;
    font-size: clamp(1.20rem, 2vw, 1.5rem);
    font-weight: 600;
    padding-right: 6%;
    padding-bottom: 1%;
    position: absoulte;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.major_sound:nth-child(4) {
    border: none;
}

.major_mood:active, .major_sound:active, .time_btn:active {
    transform: scale(0.98);
}

.time_btn {
    background: transparent;
    border-right: 2px solid white;
    color: var(--color-primary-font);
    cursor: pointer;
    font-family: 'Gruppo', serif;
    font-size: clamp(1.20rem, 2vw, 1.5rem);
    font-weight: 600;
    padding-right: 5%;
    padding-bottom: 1%;
    position: absoulte;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

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

}

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


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

.meditation_section {
    margin-top: 5rem;
}

.med_timer_container {
    height: auto;
    position: relative;
    width: 100%
}

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

form.box_four {
    height: 80%;
    width: 90%;
}


.med_timer_container form.box_four {
    position: absolute;
    left: 5%;
    top: 10.5%;
}


.mood_box {
    display: flex;
    height: 80%;
    justify-content: space-between;
}


.current_mood, .current_time {
    background-color: black;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: var(--secondary-shadow);
    color: var(--color-primary-font);
    font-size: clamp(.9rem, 2vh, 1.5rem);
    font-weight: 100;
    margin-bottom: 1rem;
    opacity: .8;
    padding: .25rem 0;
    text-align: center;
    width: clamp(7rem, 15vw, 14rem);
}

li.current_mood {
    cursor: pointer;
}


.current_sound, .time_display {
    align-items: center;
    background-color: black;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: var(--secondary-shadow);
    color: var(--color-primary-font);
    cursor: pointer;
    display: flex;
    font-size: clamp(.9rem, 2vw, 1.5rem);
    font-weight: 100;
    height: clamp(2rem, 4vh, 4rem);
    justify-content: center;
    opacity: .7;
    margin: 0;
    padding: .25rem .15rem;
    text-align: center;
    width: clamp(7rem, 30vw, 30rem);
}

.sound_box {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between
}

.time_box {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.fa-play, .fa-pause {
    cursor: pointer;
    font-size: 2.5rem;
}


button.start_meditation, button.dash_start_meditation  {
    background: transparent;
    color: white;
}

.start_meditation {
    border: 5px solid var(--color-primary-font);
    border-radius: 50%;
    height: 5rem;
    opacity: .7;
    width: 5rem;


}

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


/* =============== HOW IT WORKS SECTION =============== */
.spacer {
    aspect-ratio: 960/300;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

.layer1 {
    background-image: url('/static/img/haikei2.svg');
    margin-top: 5rem;
}

.layer2 {
    background-image: url('/static/img/haikei3b.svg');
    margin-top: 5rem;
}

.layer3 {
    background-image: url('/static/img/haikei4.svg');
    margin-top: 5rem;
}

.how_it_works_section {
    margin-top: -10rem;
    min-height: 90vh;
}

.how_it_works_container {
    display: flex;
    min-height: 90vh;
}


.container_align {
    align-items: center;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
}

.left_container {
    min-width: 50%;
}

.left_container button {
    margin: 0.75rem 0 2rem 0;

}

.left_container h2:nth-child(8){
    color: var(--primary-hover);
    font-weight: 600 !important;
}

.works_noise {
    display: flex;
    gap: 1rem;
}



.left_container h2{
    font-size: clamp(1.5rem, 3.25vw, 2.75rem);
}


.vertical_divide_two {
    border: 1px solid black;
    height: 30rem;
    margin: 0 1rem 0 1rem;
}

.horizontal_mobile_divide_two{
    display: none;
}

.right_container h2 {
    color: var(--primary-hover);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 600;
    margin: 0;
}

.right_container ul li {
    align-items: center;
    display: flex;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    margin-top: 1rem;
}


.works_register {
    margin-top: .75rem;
    transition: var(--transition);
}


.works_register a {
    color: white;
}

.butterfly {
    height: 10rem;
    opacity: .3;
}


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


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

.wellness_section {
    background: rgb(255,132,236);
    background: linear-gradient(90deg, rgba(255,132,236,0.2379551649761467) 20%, rgba(0,9,36,0.1571148288416929) 62%, rgba(0,212,255,.25) 100%);
    background-blend-mode: multiply;
}

.wellness_container {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 5rem;
    min-height: 90vh;
}


.wellness_section {
    min-height: 90vh;
}

.wellness_section .title_container .section_title{
    padding-top: 2rem;
}

.wellness_articles {
    align-items: center;
    display: grid;
    justify-content: center;
    gap: 5rem;
    grid-template-columns: repeat(2, 45%);
    grid-template-rows: repeat(2, 9.25rem);
}
/* =============== WELLNESS SECTION =============== */

/* =============== WELLNESS POST SECTION =============== */

.wellness_blog_article {
    background-color: var(--color-primary-font);
    border: 2px solid var(--primary-hover);
    border-radius: 2rem;
    height: auto;
    padding: 2rem;
}

.wellness_blog, .wellness_blog_title, .wellness_blog_author {
    color: #000000;
}

.wellness_blog_title {
    font-size: clamp(2rem, 2.75vw, 2.75rem);
    font-weight: 600;
    margin-bottom: 4rem;
    text-align: center;
}

.wellness_blog {
    font-size: clamp(1.10rem, 1.45vw, 1.5rem);
    margin-bottom: 5rem;
    text-align: justify;
}


.wellness_blog_author {
    font-size:  clamp(1.15rem, 1.30vw, 1.35rem);
}

.social_section {
    display: flex;
    font-size: 1.5rem;
    gap:1rem;
    margin-top: 2rem;

}

.fa-tiktok, .fa-square-facebook, .fa-square-twitter, .fa-square-instagram, .fa-linkedin {
    color: var(--color-primary-bg);
}
/* =============== WELLNESS POST SECTION =============== */

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

.more_mindful_section {
    min-height: 90vh;
}

.more_minful_container {
    align-items: center;
    display: flex;
    min-height: 90vh;

}

.testiment_container {
    display: flex;
    gap: 5rem;
    margin: 0 auto;
}

.testiment_box {
    aspect-ratio: 1;
    background-color: black;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: var( --primary-box-shadow);
    color: var(--color-primary-font);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-size: clamp(0.95rem, 4vw, 1.25rem);
    font-weight: 100;
    gap: 1rem;
    justify-content: center;
    margin: 0;
    opacity: .5;
    padding: 1rem 0;
    position: relative;
    width: 22rem;
}

.testiment_box p {
    font-size: clamp(0.85rem, 4vw, 1.85rem);
    padding: 1rem 1rem;
    text-align: justify;


}

.testiment_box p:nth-child(2){
    color: var(--primary-hover);
    position: absolute;
    bottom: 0;
    left: 0;

}
/* =============== MORE MINDFUL SECTION =============== */


/* =============== FOOTER SECTION =============== */
footer {
    background: var(--primary-hover);
    display: flex;
    height: 10rem;
    margin-top: 4rem;
    position: relative;

}

.footer_container {
     align-items: center;
     display: flex;
     justify-content: space-between;
}

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

.rights_reserved p {
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    /*1.25rem*/
}


.mobile_rights_reserved{
    display: none;
}

.mobile_rights_reserved p {
     font-size: clamp(1rem, 1.35vw, 1.25rem);
}


.footer_social_icons {
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    width: clamp(15rem, 26vw, 30%);
}

.footer_social_icons a i {
    color: var(--color-primary-font);
    font-size: clamp(1.25rem, 1.65vw, 1.65rem);;

}

.footer_link_block {
    display: flex;
    gap: 5rem;

}


.sign_up_block ul li a {
    color: white;
    font-size: clamp(1.1rem, 1.35vw, 1.25rem);
}
.meditate_block ul li a {
    color: white;
    font-size: clamp(1.15rem, 1.35vw, 1.25rem);
}

.sign_up_block ul li{
    margin-bottom: .5rem;
}
.meditate_block ul li{
    margin-bottom: .5rem;
}
/* =============== FOOTER SECTION =============== */