.nav-toggle-open {
    border: 0 !important;
    outline: 0 !important;
    color: var(--primary) !important;
    font-size: 35px !important;
}

.nav-toggle-close {
    background-color: transparent !important;
    color: var(--primary) !important;
    display: flex;
    border: 0;
    margin-left: auto;
    font-size: 35px !important;
}

.mob-display {
    display: none;
}

@media screen and (max-width:1200px) {
    .auralyn-firstlight-title{
        font-size: 40px;
    }
    .auralyn-story-sec__content{
        padding: 45px;
    }
    .auralyn-story-sec__button i{
        min-width: 38px;
    }
}

@media screen and (max-width:991px) {
    .brand-logo {
        position: static !important;
        transform: unset !important;
    }

    .mobile-logo {
        display: none !important;
    }

    .mobile-menu .offcanvas-header {
        padding: 15px 30px;
    }

    .offcanvas-body {
        padding-top: 0px !important;
    }

    .mobile-nav a {
        color: var(--color-black);
        letter-spacing: normal;
        font-weight: 500;
        font-size: 13px;
        padding: 13px 0;
    }

    .mobile-nav {
        margin-bottom: 10px;
    }

    .mobile-actions a {
        color: var(--color-black);
        letter-spacing: normal;
        font-weight: 500;
        font-size: 13px;
        padding: 10px 0;
    }

    .welcome-content {
        padding-left: 0;
        max-width: 100%;
    }

    .welcome-image-main {
        width: 100%;
        border-radius: 12px;
        top: 0;
        left: 0;
    }

    .welcome-number {
        position: absolute;
        top: 10px;
        right: -9%;
    }
    .auralyn-welcome .col-lg-6:last-child{
        margin-top: 14px !important;
    }
    .product-sec-cs{
        flex-direction: column;
    }
    .product-left-img,.product-right-content{
        width: 100%;
    }
    .product-left-img{
        height: 430px;
    }
    #Bath-Body{
        flex-direction: column-reverse;
    }
    .upcoming-horizontal-product-card{
        flex-direction: column;
    }
    .upcoming-horizontal-product-image,.upcoming-horizontal-product-content{
        width: 100%;
    }
    .upcoming-horizontal-product-content{
        padding: 20px 15px;
    }
    .ritual-statement{
        padding-right: 0;
    }
    .ritual-statement h3 span{
        display: contents;
        font-weight: 500;
    }
    .skincare-photo img{
        border-radius: 20px;
    }
    .skincare-photo{
        position: static;
        width: 100%;
    }
    .skincare-shape{
        display: none;
    }
    .skincare-side-label{
        display: none;
    }
    .skincare-heading-row{
        padding-top: 10px;
    }
    .skincare-heading {
        font-size: 28px;
    }
    ul.skincare-heading-ul{
        flex-wrap: wrap;
    }
    .why-panel{
        padding: 25px;
    }
    .why-philosophy{
        padding-right: 0;
    }
    .why-philosophy-title,.why-philosophy-text{
        max-width: 100%;
    }
    .why-philosophy{
        margin-bottom: 40px;
    }
    .why-philosophy{
        border-right: 0;
    }
    .auralyn-story-sec__number{
        display: none;
    }
    .auralyn-story-sec__visual-content{
        max-width: 100%;
        width: 100%;
    }
    .auralyn-story-sec__philosophy div:last-child{
        width: 100%;
    }
    .auralyn-story-sec__philosophy p{
        max-width: 100% !important;
    }
    .auralyn-story-sec__visual h3 span{
        display: contents;
    }
    .auralyn-story-sec__belief{
        max-width: 100%;
    }
    .auralyn-story-sec__philosophy{
        margin-top: 15px;
        padding-top:25px;
    }
    .auralyn-story-sec__visual{
        min-height: unset;
    }
    .ritual-item-content p{
        max-width: 100%;
    }
    .auralyn-story-sec__leaf{
        display: none;
    }
    .main-abt-sec-banner-content h1{
        font-size: 45px;
    }
    .main-abt-sec-banner-content{
        max-width: 100%;
    }
    .main-abt-sec-story-content{
        max-width: 100%;
        padding-left: 0;
    }
    .main-abt-sec-story-content h2 span{
        display: contents;
    }
    .main-abt-sec-philosophy-heading{
        max-width: 100%;
    }
    .main-abt-sec-philosophy-heading h2 br{
        display: none;
    }
    .row-col-5 .col-lg-4{
        width: 33%;
        margin-bottom: 10px;
    }
    .product-dt-new-how-intro h2 span{
        display: contents;
    }
    .profile-preview-img{
        margin-bottom: 25px;
    }
      .track-container > ul{
               flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }
    .track-container > ul::before,.track-container > ul::after{
        display: none;
    }
    .auralyn-firstlight-description{
        max-width: 100%;
    }
    .auralyn-firstlight-hero-content{
        padding-top: 0;
    }
    .auralyn-firstlight-title{
        margin-top: 0;
    }
    .auralyn-firstlight-hero-visual{
        margin-left: 0;
    }
    .auralyn-firstlight-intro-text{
        text-align: center;
    }
    .auralyn-firstlight-benefits{
        justify-content: center;
    }
    .auralyn-firstlight-quote-panel{
        min-height: 490px;
    }
    .auralyn-firstlight-quote-content p{
        max-width: 100%;
        line-height: 1.50;
    }
    .auralyn-firstlight-product-card{
        flex-direction: column;
    }
    .auralyn-firstlight-product-image-wrap{
        width: 100%;
    }

}

@media screen and (max-width:768px) {
    .welcome-number{
       display: none;
    }
    .welcome-circle{
        left: 0;
    }
    .welcome-highlight{
        padding: 20px 0;
    }
    .ritual-cta{
        flex-direction: column;
        padding: 25px 15px;
    }
    .ritual-cta p{
        text-align: center;
        font-size: 18px;
    }
    .ritual-cta-button{
        padding: 13px 20px;
    }
    .main-abt-sec-banner-content{
        transform: unset;
        left: 10px;
        right: 10px;
        top: 30%;
    }
    .main-abt-sec-story-image{
        height: 450px;
    }
    .main-abt-sec-story-content h2{
        font-size: 33px;
    }
    .main-abt-sec-philosophy-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .main-abt-sec-product-image img{
        height: 350px;
    }
    .main-abt-sec-cta-content h2{
        max-width: 100%;
        font-size: 40px;
        line-height: 50px;
    }
     .row-col-5 .col-lg-4{
        width: 50%;
    }
        .product-dt-new-ingredient-row {
        grid-template-columns: 40px 1fr !important;
    }
    .auralyn-faq-item .accordion-body{
        padding: 25px;
        padding-top: 15px;
        font-size: 13.5px;
    }
    .auralyn-faq-item .accordion-button{
        padding: 20px;
        line-height: 28px;
    }
    .auralyn-faq-contact{
        flex-direction: column;
        padding: 20px;
    }
    .auralyn-faq-contact-icon{
        display: none;
    }
    .auralyn-faq-contact>a{
        border-radius: 10px;
        padding: 7px 15px;
    }
    .auralyn-cart-item{
                flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .auralyn-cart-remove{
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .auralyn-cart-product-bottom{
        width: 100%;
    }
    .auralyn-cart-product-info{
        flex: unset;
        width: 100%;
    }
    .auralyn-cart-summary{
        padding: 25px;
    }
    .auralyn-checkout-box{
        padding: 20px 15px;
    }
  .track-bottom{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .track-container{
    padding: 25px;
  }
  .view-order-details-top{
    gap: 15px;
  }
  .auralyn-firstlight-daily-panel{
    padding: 20px;
  }
  .auralyn-firstlight-daily-title{
    font-size: 40px;
  }
  .auralyn-firstlight-daily-title br{
    display: none;
  }
  .auralyn-firstlight-daily-title span{
    display: contents;
  }
  .auralyn-firstlight-checklist{
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin: 15px 0;
  }
  .auralyn-firstlight-sec .auralyn-firstlight-kicker{
    font-size: 11px;
  }
}

@media screen and (max-width:567px) {
    .welcome-content h2{
               font-size: 27px;
        line-height: 36px;
    }
    .welcome-highlight h3{
        font-size: 18px;
    }
    .welcome-details{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
    }
    .detail-item span br{
        display: none;
    }
    .product-left-img {
        height: 350px;
    }
    .product-right-content{
        padding: 20px 15px;
    }
    .product-bottom{
               flex-direction: column;
        gap: 10px;
        border-top: 1px solid #ccc;
    }
    .ritual-widget-header h2{
        font-size: 28px;
        line-height: 43px;
    }
    .upcoming-horizontal-product-name{
        font-size: 25px;
    }
    .product-right-content h2{
        font-size: 25px;
        line-height: 35px;
    }
     .ritual-statement h3 {
       font-size: 30px;

    }
    .ritual-list .ritual-item{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px 0;

    }
    .ritual-arrow{
        display: none;
    }
    .ritual-list .ritual-number{
        display: none;
    }
    .why-philosophy-title{
        font-size: 25px;
        line-height: 1.55;
    }
    .why-item{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .why-item-icon{
        display: none;
    }
    .why-panel::before  {
        display: none;
    }
    .auralyn-story-sec__title{
        font-size: 30px;
        line-height: 1.35
    }
    .auralyn-story-sec__visual{
        padding: 25px;
    }
    .auralyn-story-sec__visual h3{
       font-size: 25px;
        line-height: 40px;
    }
    .auralyn-story-sec__content{
        padding: 15px ;
    }
    .auralyn-story-sec__footer{
        flex-direction: column;
    }
    .newsletter-form{
        flex-direction: column;
    }
    .footer-utility{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 7px;
    }
       .main-abt-sec-banner-content h1{
        font-size: 35px;
    }
    .main-abt-sec-intro-content h2{
        font-size: 30px;
        line-height: 45px;
    }
        .main-abt-sec-story-image {
        height:350px;
    }
     .main-abt-sec-story-content h2{
        font-size:30px;
        line-height:42px;
    }
    .main-abt-sec-section-heading h2{
        font-size: 30px;
        line-height: 40px;
        letter-spacing: -.5px;
    }
    .main-abt-sec-philosophy-heading h2{
        font-size: 30px;
    }
     .main-abt-sec-cta-content h2{
        max-width: 100%;
        font-size: 35px;
    }
     .row-col-5 .col-lg-4{
        width: 100%;
    }
    .product-dt-new-ingredients-intro h2{
        font-size: 28px !important;
        line-height: 45px;
    }
    .auralyn-contact-section{
        padding-top: 25px;
    }
    .auralyn-contact-heading h1{
        font-size: 35px;
    }
    .auralyn-contact-intro h2{
        font-size: 28px !important;
        line-height: 45px;
    }
    .auralyn-contact-bottom{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
    }
    .page-text-baner h2{
        font-size: 30px;
    }
    .cms-container{
        padding: 15px 0;
    }
    .auralyn-faq-heading h1{
        font-size: 30px;
        letter-spacing: .6px;
        line-height: 40px;
    }
    .auralyn-sign-logo{
        font-size: 25px;
    }
    .address-container{
        flex-direction: column;
    }
    .auralyn-firstlight-title{
        font-size: 35px;
    }
    .auralyn-firstlight-subtitle{
        font-size: 20px;
    }
    .auralyn-firstlight-hero-visual{
        min-height: unset;
        height: 350px;
    }
    .auralyn-firstlight-image-label strong, .auralyn-firstlight-floating-card strong{
        font-size: 13px;
    }
     .auralyn-firstlight-intro-text{
        text-align: center;
        font-size: 16px;
    }
    .auralyn-firstlight-step-content h3{
        font-size: 20px;
    }
    .auralyn-firstlight-daily-title{
        font-size: 30px;
    }
      .auralyn-firstlight-quote-content p{
        font-size: 20px;
      }
      .auralyn-firstlight-product-info h3{
        font-size: 20px;
      }
      .auralyn-cart-heading h1{
        font-size: 30px;
      }
      .custom-pill-nav .nav-link{
        padding: 10px !important;
        font-size: 13px !important;
      }
      .custom-pill-nav .nav-link i{
        display: none !important;
      }
      .blog-hero-title{
        font-size: 30px;
      }
}