@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body{
padding: 0 !important;
margin: 0 !important;
	font-size: 15px;
	line-height: 20px;
	color: #06061b !important;
	 font-family: "Roboto", sans-serif !important; 
	 font-weight: 400;
}
.container {
    padding: 0 15px;

}
.creative-app{
max-width: 414px;
    margin: 0 auto;
}  
.mobileapp {
    max-width: 414px;
    margin: 0 auto;
    padding: 46px 0px;
}
.top-header {
    background-image: url(../img/BG.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 414px;
    margin: 0 auto;
}
.logo-image {
    text-align: center;
}
.logo-image img {
    max-width: 100%;
    width: 250px;
}
.sction-from input {
    font-size: 15px;
    padding-left: 15px;
    /* margin-bottom: 12px !important; */
    height: 48px;
    background: #ffffff;
    border: none;
    outline: none !important;
    color: #06061b !important;
    font-weight: 400;
    box-shadow: none !important;
    line-height: 20px;
    border-radius: 75px;
}
.sction-from .form-group {
    margin-bottom: 12px !important;
}

.logo-image {
    text-align: center;
    margin-bottom: 80px;
}
.yourheading h6 {
    font-size: 28px;
    font-weight: 700;
    color: #06061b;
}
.heading-area h6 {
    font-size: 22px;
    font-weight: 500;
}
.sction-from .form-group label {
    color: #06061b !important;
    font-size: 15px;
    padding-left: 15px;
    margin-bottom: 5px;
}
.signbtn {
    width: 100%;
    background: #e8656e;
    border: none;
    padding: 15px 15px;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    border-radius: 75px;
    letter-spacing: 0.20px;
    text-transform: uppercase;
}
.sign-here {
    max-width: 190px;
    text-align: center;
    margin: 0 auto;
}
.sign-here a {
    color: #4ca4b6;
    text-decoration: none;
}
.icon-block {
    position: absolute;
    bottom: 12px;
    right: 20px;
}
.passwordblock{
	position: relative;
}
.icon-block img {
    max-width: 100%;
    width: 30px;
}
.forgotbtn a {
    font-size: 15px;
    color: #06061b;
    text-decoration: none;
    line-height: 20px;
}
.forgotbtn  {
    margin-top: 20px;
    text-align: center;
}
.yourheading {
    margin-bottom: 40px;
}

.right-image a {
    font-size: 20px;
    color: #000;
}
.left-arrow a{
    font-size: 20px;
    color: #000;
}
.left-arrow {
    margin-bottom: 40px;
}
.sction-from select {
    font-size: 15px;
    padding-left: 15px;
    /* margin-bottom: 12px !important; */
    height: 48px;
    border: none;
    outline: none !important;
    color: #06061b !important;
    font-weight: 400;
    box-shadow: none !important;
    line-height: 20px;
    border-radius: 75px;
}

.sction-from .form-select {
    margin-bottom: 0px !important;
   
}


.create-account .yourheading {
    margin-bottom: 20px;
}
.create-account  .sign-here {
    margin-top: 20px !important;
}
.sign-here p {
    margin-bottom: 0;
}
.from-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px 10px;
}
.create-account .sign-in {
    margin-top: 35px !important;
}
.dashboard {
    max-width: 414px;
    margin: 0 auto;
}
.dhasborad-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0px 24px;
}
.right-image img {
    max-width: 100%;
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.logout-img img {
    max-width: 100%;
    width: 25px;
    object-fit: cover;
    cursor: pointer; /* Corrected property */
    margin-left: 15px;
}
.smile-icon span{
background: #ff8a92;
width: 50px;
height: 50px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.smile-icon img {
    max-width: 100%;
    width: 24px;
}
.long-text p {
    font-size: 15px;
    line-height: 18px;
    color: #06061b;
    margin-bottom: 5px;
}
.long-text h6 {
    font-size: 22px;
    color: #06061b;
    font-weight: 700;
    line-height: 24px;
}
.box-one-style {
    background: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 0px 14px 0px #0000001A;
    border-radius: 30px;
}
.four-box-style {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
    margin-bottom: 20px;
}
.smile-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.progressbar img {
    max-width: 100%;
    border-radius: 15px;
}
.session-time{
	max-width: 414px;
	margin: 0 auto;
}
.progressbar  {
    box-shadow: 0px 0px 14px 0px #0000001A;
    border-radius: 15px;
    background-color: #fff;
}
.testimonial-block img {
    max-width: 100%;
}
.topimage img {
    max-width: 100%;
}
.btoomimage img {
    max-width: 100%;
    width: 60px;
}
    .thumbnails {
    display: flex;
    gap: 15px;
}
.low-text p {
    font-size: 14px;
    margin: 5px 0px 0px;
    color: #06061b;
    font-weight: 500;
}
.thumbnails-section {
    background: #7fdee9;
    padding: 20px;
    margin-top: 20px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.heading-today h6 {
    font-size: 22px;
    color: #06061b;
}
.heading-today {
    text-align: center;
    margin-bottom: 14px;
}
.profile-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px 10px;
    padding: 15px;
}
.dashboard-icon img {
    max-width: 100%;
    width: 50px;
}
.dashboard-icon {
    text-align: center;
}
.dashboard-icona a {
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    color: #000;
}
/*.text-profile {
    margin-top: 10px;
}*/
.dashboard-icon a {
    color: #000;
    text-decoration: none;
    line-height: 30px;
    font-size: 14px;
}
.active img a {
    background: #67c3d6;
    border-radius: 27px;
    color: #ffffff !important;
}
/*----modal----*/
.modal-content {
    max-width: 385px;
    margin: 0 auto;
}
#recommendedJourneyModal .modal-body {
    padding: 20px 44px 44px;
}
#recommendedJourneyModal .modal-content {
    width: 100%;
    pointer-events: auto;
    border: none !important;
    border-radius: 12px;
    outline: 0;
    background: #ebebeb;
}
#recommendedJourneyModal .btn-close {
    box-sizing: content-box;
    padding: 0;
    color: #fff;
    background: #070f21;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 100px;
    border: 0;
    opacity: 1;
}
.poupap-heading h6 {
    font-size: 24px;
    color: #06061b;
    line-height: 32px;
    font-weight: 700;
}
.poupap {
    text-align: center;
}
.text-long P {
    color: #13a3c1;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
}
.poupapbtn a {
    border: 1px solid #001d30;
    padding: 10px 40px;
    border-radius: 75px;
    display: inline-block;
    text-decoration: none;
    color: #001d30;
}
.center-image img {
    max-width: 100%;
}
.shared-item h6 {
    font-size: 28px;
    line-height: 32px;
    color: #06061b;
    font-weight: 700;
}
.ourbtn a {
    background: #f95f69;
    padding: 15px 28px;
    border-radius: 75px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
}
.explorenow{
   display: flex;
}
.watchnowbtn a {
    color: #06061b;
    background: #ffffff;
    margin-left: 10px;
}
/*----modal----*/
.search-block{
    position: relative;
}
.search-block input {
    font-size: 15px;
    padding-left: 40px;
    margin-bottom: 12px !important;
    height: 48px;
    border: 1px solid #06061b !important;
    outline: none !important;
    color: #06061b !important;
    font-weight: 400;
    box-shadow: none !important;
    line-height: 20px;
    border-radius: 75px;
    background: none !important;
}
.icon-search {
    position: absolute;
    top: 13px;
    left: 16px;
}
.icon-search a {
    font-size: 14px;
    color: #000;
}
.mobile-list {
    background: #d5f3f3;
    padding: 15px 0px 0px;
}

.mobile-section {
    background: #d5f3f3;
    padding: 15px 0;
}
.tabsblock .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tabsblock .nav-pills .nav-link.active  {
    color: #fff;
    background-color: #001d30;
        width: 85px;
    height: 74px;
}
.tabsblock .nav-pills .nav-link {
    background: #a8eaf0;
    border: 0;
    border-radius: 10px;
    padding: 10px 15px;
        width: 85px;
    height: 74px;
}
 /* .allicon img{
max-width: 100%;
width: 30px;
 } */

.allicon img {
    max-width: 100%;
    height: 35px;
}

.tabstext {
    font-size: 13px;
    margin-bottom: 0;
    line-height: 17px;
    color: #06061b;
    margin-top: 8px;
    font-weight: 500;
}
/*.tabsblock .nav-pills .nav-link.active .new-icon {
    filter: invert(1) brightness(32.5);
}*/
.tabsblock .nav-pills .nav-link.active .new-icon {
    filter: invert(0) brightness(42.5);
}
.faceicon img {
    max-width: 100%;
    width: 70px;
}
.chanting p {
    margin-bottom: 0;
    font-size: 14px;
    color: #a3a8aa;
}
.chanting strong {
    margin-bottom: 0;
    font-size: 15px;
    color: #06061b;
    font-weight: 400;
}
.app-website {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.chanting h6 {
    font-size: 20px;
    color: #06061b;
    line-height: 22px;
    margin-bottom: 5px;
}
.playbtn a {
    display: flex;
    background: #000;
    width: 37px;
    height: 37px;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    line-height: 37px;
}

.app-website:last-child {
    margin-bottom: 0px !important;
}
.chanting {
    width: 50%;
}
.mainbtn::hover{
    color: #000;
}
.app-website::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    background: #a3a8aa;
    left: 98px;
}
.app-website {
    position: relative;
}
.left-icon img {
    max-width: 100%;
    width: 120px;
}
.split-line {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
}
.right-contant hr {
    width: 100%;
    display: inline-flex;
    border: 1px solid #a3a8aa !important;
    border-width: 2px;
    margin: 5px 0px;
}
.right-contant h6{
font-size: 20px;
    color: #06061b;
    line-height: 22px;
    margin-bottom: 5px;
}
.right-contant strong{
margin-bottom: 0;
    font-size: 15px;
    color: #4fbcd2;
    font-weight: 400 !important;
}
.right-contant p {
    margin-bottom: 0;
    font-size: 14px;
    color: #a3a8aa;
}
p.text-blod {
    color: #001d30;
    margin-bottom: 0;
}

.serv-text{
display: flex;
justify-content: space-between;
align-items: center;
}
.range {
    width: 100% !important;
    height: 18px;
   -webkit-appearance: none;
    background: #e1e1e1;
    outline: none;
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}
.range::-webkit-slider-thumb {
  background: #00fd0a;
  box-shadow: -30rem 0 2rem 25rem #ff959b, -25.5rem 0 0 25rem #75b8d6;
  -webkit-appearance: none;
  appearance: none;
    background: #000;
    border-radius: 40px;
    position: static;
    content: '1';
    width: 18px;
    height: 18px;
    top: 0;
}

.range-subtitle {
    padding-top: 20px;
}

.range-subtitle {
    padding: 20px;
    background: #87e0ea;
    margin-top: 20px;
    border-radius: 15px;
}
.range-heading h6{
    font-size: 20px;
    color: #06061b;
    line-height: 22px;
    margin-bottom: 5px;
}
.range-heading {
    text-align: center;
    margin-bottom: 20px;
}
.bottom-contant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
}
.text-view p {
    font-size: 14px;
    color: #06061b;
    line-height: 17px;
    margin-bottom: 0;
}

.journeybtn a {
    background: #e8656e;
    border: none;
    padding: 15px 15px;
    font-size: 14px;
    color: #FFFFFF;
    border-radius: 75px;
    letter-spacing: 0.20px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
}
.journeybtn a {
    width: 100%;
    text-align: center;
}
.journeybtn {
    margin-top: 20px;
}
.connecting img {
    max-width: 100%;
    width: 40px;
}
.connecting p {
    font-size: 16px;
    color: #001d30;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
    position: relative;
}
.connecting p::after {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #23d38a;
    border-radius: 10px;
    content: '';
    left: -16px;
    top: 5px;
}
.connecting span {
    margin-left: 5px;
}
.top-photo-app img{
    max-width: 100%;
}
.demo-section  .range::-webkit-slider-thumb {
  background: #e1e1e1 ;
   box-shadow: -407px 0 0 400px #ff959b !important;
-webkit-appearance: none;
  appearance: none;
    border-radius: 40px; 
    height: 0px !important;
    width: 0px !important;
}
.demo-section  .range {
 width: 100% !important;
    height: 18px;
    -webkit-appearance: none;
    background: #e1e1e1;
    outline: none;
    border-radius: 9px;
    overflow: hidden;
}
.timesession img {
    max-width: 100%;
    width: 30px;
}
.timesession p {
    font-size: 24px;
    color: #000;
    margin-right: 10px;
    font-weight: 600;
}
.timesession span {
    margin-right: 6px;
}
.time-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.timetext p{
font-size: 24px;
    color: #000;
    margin-right: 10px;
    font-weight: 400;
}
.seconds-section {
    background: #ffffff;
    padding: 24px;
    text-align: center;
    border-radius: 15px;
    margin-top: 20px;
}
.seconds-section strong {
    font-size: 18px;
    color: #06061b;
    line-height: 22px;
}
.seconds-section p {
    font-size: 16px;
    color: #06061b;
    max-width: 200px;
    margin: 10px auto 0px;
}
.more-contant {
    text-align: center;
    font-size: 14px;
    color: #06061b;
    max-width: 257px;
    margin: 15px auto 0px;
}
.icon-tick img {
    max-width: 100%;
    width: 100px;
}
.icon-tick  {
  text-align: center;
}
.text-icon h6 {
    font-size: 22px;
    font-weight: 500;
    margin-top: 20px;
}
.digital-app-agency {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
}
.app-style p {
    color: #06061b;
    /* max-width: 100px; */
    text-align: center;
    margin: 0 auto;
}
.app-agency {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px 10px;
    margin-top: 12px;
}
.app-style {
    text-align: center;
    border: 2px solid #d5e3e4;
    padding: 15px;
    border-radius: 15px;
}
.app-style strong {
    font-weight: 500;
    font-size: 20px;
    color: #06061b;
}
.journey-insights {
    padding: 20px;
    background: #87e0ea;
    margin-top: 20px;
    border-radius: 15px;
}
.total-time {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}
.total-sessions p {
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 5px;
    text-align: center;
}
.restarbtn a{
background: #51b3c7;
}
.menubtn{
margin-top: 16px;
}
.total-sessions::after {
width: 1px ;
position: absolute;
height: 100%;
background: #a3a8aa;
top: 0;
right: 0;
content: '';
}
.total-sessions {
position: relative;
}
.lastsession::after  {
    content: none;
}
.total-sessions strong {
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
}
.verification {
    padding-top: 130px;
}
.yourheading a {
    color: #000;
    text-decoration: none;
}
.resendcode {
    text-align: center;
    margin-top: 30px;
}
.resendcode a {
    color: #1d9bb6;
    text-decoration: none;
    font-size: 16px;
    line-height: 20px;
}
.sessioncomplete {
    text-align: center;
}
.sessioncomplete span {
    font-weight: 500;
}
.any-session{
    display: flex;
}
 .main-code {
    width: 16%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.any-session {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-code  input {
    font-size: 18px;
    font-weight: 500;
    padding: 24px;
    border-radius: 100%;
    height: 56px;
}
.orange-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.line-one {
    display: flex;
    background: #ffad64;
    width: 100px;
    height: 5px;
    border-radius: 10px;
}
.line-tow {
    display: flex;
    background: #ffad64;
    width: 36%;
    height: 5px;
    border-radius: 10px;
}
.line-three {
    display: flex;
       background: #0000002b;
    width: 100px;
    height: 5px;
    border-radius: 10px;
}
.mediumsize img {
    max-width: 100%;
    width: 24px;
}
.mediumsize {
    margin-top: 10px;
    text-align: end;
}
.mediumsize p {
    font-weight: 500;
}

.super-app {
    background: #d5f3f3;
    padding: 15px 15px;
    height: 100vh;
     background-image: url(../img/BG.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.new-style-section {
    max-width: 414px;
    margin: 0 auto;
}
.password-reset {
    background: #ffffff7a;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    margin-top: 50px;
}
.password-reset a{
color: #000;
text-decoration: none;
font-weight: 500;
}
.signout{
    height: 100vh;
}

.gallery-slider .slick-slide {
    margin: 0 15px;
    text-align: center;
    justify-content: center;
    display: flex;
}

.gallery-slider button.slick-prev.slick-arrow {
    background: none;
    border: none;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 30%;
    left: -24px;
    z-index: 999;
    border-radius: 100%;
    content: '\f054';
    font-family: 'FontAwesome';
}
.gallery-slider button.slick-next.slick-arrow {
    background: none;
    border: none;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 30%;
    right: -24px;
    z-index: 999;
    border-radius: 100%;
    content: none !important;
}
.gallery-slider .fa-arrow-left:before {
    content: "\f04b" !important;
    font-size: 18px;
    font-weight: 700;
    color: #ffffffa3;
    transform: rotate(300deg);
    float: left;
}
.gallery-slider .fa-arrow-right:before {
    content: "\f04b" !important;
    font-size: 18px;
    font-weight: 700;
    color: #ffffffa3;
}

.gallery-slider .slick-slide,
.test-slider {
  opacity: 0.1;
}
.gallery-slider .slick-center,
.test-slider{
  opacity: 1;
}
.serv-text h6 {
    font-size: 18px;
    font-weight: 500;
    color: #000;
}
.satisfaction {
    padding-top: 100px;
}

.dashboard-icon a.active  {
    color: #4fbcd2;
}
.tabsblock .nav-pills .nav-link.active, .allicon img{
filter: sepia(60%)
}

.tabsblock .nav-pills .nav-link.active .new-icon {
    filter: invert(0) brightness(42.5);
}   
.tabsblock .nav-pills .nav-link.active .new-icon .allicon img {
 filter: invert(1) brightness(42.5);
  opacity: 1;   
}


.tabsblock .tab-pane {
   min-height: 500px;
}

.tabsblock .nav {
    gap: 6px !important;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 360px;
    flex-wrap: nowrap;
}


.disabled-tab {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }



  .journeybtn button {
    background: #e8656e;
    border: none;
    padding: 15px 15px;
    font-size: 14px;
    color: #FFFFFF;
    border-radius: 75px;
    letter-spacing: 0.20px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
}
.journeybtn button {
    width: 100%;
    text-align: center;
}



/*range*/
.range-slider {
    width: 100%;
    margin: 0 auto;
    position: relative;
    border-radius: 20px;
}
.range { -webkit-appearance: none;
 width: 100%;
 border-radius: 20px;
  }
.range:focus{
  outline: none;
  }

.range::-webkit-slider-thumb {
    -webkit-appearance: none;
     height: 0;
     width: 0;
    
}
.range-value-circle span:before {
position: absolute;
content: "";
left: 74%;
top: -35px;
transform: translateX(-50%);
width: 7px;
height: 10px;
border: 15px solid transparent;
background: #87e0ea;
border-radius: 33px;
}
.range-value-circle {
    position: absolute;
    top: -37px;
}
.range-value-circle span {
position: absolute;
padding: 5px 15px;
color: #fff;
background: #000;
font-size: 18px;
left: -13px;
display: flex;
justify-content: center;
top: 32px;
height: 30px;
align-items: center;
width: 13px !important;
z-index: 999;
border-radius: 20px;
}

/*range*/



/*--active-css--*/
.profile-section{
max-width: 414px;
margin: 0 auto;
}
.profile-section a.active {
filter: invert(66%) sepia(74%) saturate(845%) hue-rotate(157deg) brightness(100%) contrast(96%);
}

.profile-section img {
mix-blend-mode: luminosity;
}

.profile-section .mainbtn a {
text-decoration: none !important;
line-height: 30px !important;
font-size: 14px !important;
color: #b7b7b7 !important;
letter-spacing: 0.5px;
}
.profile-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
}
/*--active-css--*/

.profile-image{
    display: flex;
    align-items: center;
}