@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
:root {
    --primary-color: #F23A2E;
    --dark-black: #212121;
    --white: #ffffff;
}
body{
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    background-color: #F7F3EE;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    transition: .4s;
}

li {
    list-style: none;
    display: inline-block;
}

h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
    font-family: "Tenor Sans", sans-serif;
}

ul,ol {
    padding: 0;
    margin: 0;
}
p{
    font-size: 16px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}
.site-btn{
    font-size: 18px;
    font-weight: 500;
    line-height: 21px;
    text-align: center;
    font-family: "Inter", sans-serif;
    background-color: var(--primary-color);
    padding: 14px 32px;
    display: inline-block;
    border-radius: 50px;
    color: var(--white);
    border: 1px solid transparent;
    transition: .4s;
}
.site-btn:hover{
    background: #000;
    color: #fff;
}
/*-----header----*/
.header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 18px 0;
}
.header-right a{
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: var(--white);
}
.header-right a img{
    width: 18px;
}
.header-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 50px;
}
.header-select{
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    appearance: none;
    position: relative;
    padding-right: 15px;
}
.header-select select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    background-image:url("data:image/svg+xml;charset=utf-8,<svg width='10' height='6' fill='none' xmlns='http:%2F%2Fwww.w3.org/2000/svg'><path d='M1 1l4 4 4-4' stroke='rgb(242 58 46)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: 100%;
    padding: 10px 16px;
}
/* .header-select:after{
    content: "\f107";
    font-family: 'FontAwesome';
    color: var(--primary-color);
} */
.header-right{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

/*---banner----*/
.main-banner{
    height: 800px;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-content{
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.banner-text h1{
    font-size: 60px;
    font-weight: 400;
    line-height: 70px;
    padding-bottom: 20px;
    color: var(--white);
}
.banner-text p{
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--white);
}
.banner-text{
    max-width: 670px;
    position: relative;
    padding-left: 20px;
    /* border-left: 6px solid #F23A2E; */
}
.banner-text::before{
    content: "";
    width: 6px;
    height: 85%;
    background-color: var(--primary-color);
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
}
.banner-content a.site-btn{
    margin-top: 23px;
}
.banner-content a.site-btn:hover{
    border-color: #fff;
}

/*------study tools-------*/
.robist-study-sec{
    background-color: #fff;
}
.study-tool-sec, .robist-study-sec{
    padding: 110px 0;
}
.title-section{
    padding-bottom: 35px;
}
.title-section h6{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--primary-color);
    padding-bottom: 10px;
}
.title-section h2{
    font-size: 40px;
    font-weight: 400;
    line-height: 46px;
    color: var(--dark-black);
}
.study-tool-sec{
    background-image: url(../images/study-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #F7F3EE;
}
.study-box{
    background-color: #FFFFFF;
    box-shadow: 0px 3px 34px 0px #00000014;
    border-radius: 15px;
    text-align: center;
}
.study-content h5{
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    color: var(--dark-black);
    padding-bottom: 20px;
}
.study-content{
    padding: 0 45px 50px;
    position: relative;
}
.study-content a.site-btn{
    position: absolute;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
    bottom: -18px;
    z-index: 2;
}
.study-img{
    padding: 30px 45px 20px;
}

/*--------robust study-----*/
.robust-study-content{
    border: 1px solid #F7F3EE;
    padding: 40px 60px;
    border-radius: 15px;
    position: relative;
}
.robust-study-content h5{
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    color: var(--dark-black);
    padding-bottom: 20px;
}
.robust-study-content p{
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: var(--dark-black);
}
.robust-study-content:before{
    content: '';
    height: 30px;
    width: 30px;
    position: absolute;
    background-color: #fff;
    top: 45%;
    left: -15px;
    border-top: #F7F3EE solid 1px;
    border-left: #F7F3EE solid 1px;
    transform: rotate(-45deg);
    z-index: 1;
}
.robust-study-content-main .container .row:nth-child(even) .robust-study-content:before{
    content: '';
    height: 30px;
    width: 30px;
    position: absolute;
    background-color: #fff;
    top: 45%;
    right: -15px;
    left: auto;
    border-top: #F7F3EE solid 2px;
    border-left: #F7F3EE solid 2px;
    transform: rotate(135deg);
}
.robust-study-content-main .container .row:nth-child(odd){
    margin-bottom: 50px;
}

/*-------immersive-------*/
.immersive-sec{
    background-color: #F7F3EE;
    padding-bottom: 110px;
}
.immersive-sec-top{
    background-size: cover;
    background-position: center;
    height: 635px;
}
.imersive-content{
    max-width: 635px;
    height: 635px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.imersive-content h6{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--primary-color);
    padding-bottom: 14px;
}
.imersive-content h3{
    font-size: 40px;
    font-weight: 400;
    line-height: 46px;
    color: var(--white);
    padding-bottom: 20px;
}
.imersive-content p{
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--white);
}
.imersive-content a.site-btn{
    margin-top: 30px;
    width: fit-content;
}
.imersive-content a.site-btn img{
    width: 22px;
    margin-right: 8px;
}
.imersive-content a.site-btn:hover{
    border-color: #fff;
}
.audio-feature-box{
    background-color: #fff;
    box-shadow: 0px 3px 34px 0px #00000014;
    border-radius: 10px;
    padding: 10px;
}
.audio-feature-box .audio-img-box img{
    max-height: 270px;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.audio-feature-box .audio-content{
    padding: 40px 40px 20px;
    text-align: center;
}
.audio-feature-box .audio-content h5{
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--dark-black);
    padding-bottom: 15px;
}
.audio-feature-box .audio-content p{
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;  
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.audio-feature-box .audio-content a.site-btn{
    padding: 12px 30px;
    margin-top: 15px;
}
.audio-features-block-main{
    margin-top: -100px;
}

/*----get started timeline----*/
.get-started-timeline-sec{
    background-color: #F7F3EE;
    padding-bottom: 100px;
}
.step-content-main-bg{
    background-color: #fff;
    border-radius: 15px;
    padding: 100px 0 40px;
}
.timeline {
    position: relative;
    width: 880px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 0em 0;
    list-style-type: none;
}
  
.timeline:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: " ";
    display: block;
    width: 4px;
    height: 100%;
    margin-left: -3px;
    background: rgb(244, 250, 252);
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, rgba(30, 87, 153, 1)),
        color-stop(100%, rgba(125, 185, 232, 1))
      );
    background: -moz-linear-gradient(90deg, #FFFFFF 6.5%, #D3CFCA 16.5%, #D3CFCA 86%, #FFFFFF 100%);
    background: -webkit-linear-gradient(90deg, #FFFFFF 6.5%, #D3CFCA 16.5%, #D3CFCA 86%, #FFFFFF 100%);
    background: -o-linear-gradient(90deg, #FFFFFF 6.5%, #D3CFCA 16.5%, #D3CFCA 86%, #FFFFFF 100%);
    background: -ms-linear-gradient(90deg, #FFFFFF 6.5%, #D3CFCA 16.5%, #D3CFCA 86%, #FFFFFF 100%);
    /* background: linear-gradient(90deg, #FFFFFF 6.5%, #D3CFCA 16.5%, #D3CFCA 86%, #FFFFFF 93.5%); */
    z-index: 5;
}
  
.timeline li {
    padding:0em 0;
    position: relative;
    width: 100%;
}
.timeline li .pointer{
    background: #fff;
    width: 25px;
    height: 25px;
    font-size: 20px;
    border-radius: 50%;
    color: var(--aquaBlue);
    display: block;
    text-align: center;
    line-height: 50px;
    font-weight: 700;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    top: 40%;
    border: 3px solid var(--primary-color);
}
.timeline li:nth-child(2) .pointer{
    width: 32px;
    height: 32px;
}
.timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
  
.direction-l {
    position: relative;
    width: 365px;
    float: left;
    text-align: right;
    margin-bottom: 60px;
    z-index: 99;
}
  
.direction-r {
    position: relative;
    width: 365px;
    float: right;
    margin-bottom: 60px;
    z-index: 99;
}
.icon_timeline-left img, .icon_timeline img{
    width: 100%;
    border-radius: 10px;
}
.timeline .icon_timeline-left {
    position: absolute;
    right: 15%;   
    padding-top: 0;
}
.timeline .icon_timeline-right {
    position: absolute;
    left: 15%;   
    padding-top: 0;
}
.icon_timeline-right img{
    border-radius: 10px;
}
.flag-wrapper {
    position: relative;
    display: inline-block;
  
    text-align: center;
}
  
.flag {
    position: relative;
    display: inline;
    background: rgb(248, 248, 248);
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
}
  
.direction-l .flag {
    -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15),
      0 0 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}
  
.direction-r .flag {
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15),
      0 0 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}
  
.direction-l .flag:before,
.direction-r .flag:before {
    position: absolute;
    top: 50%;
    right: -40px;
    content: " ";
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(255, 80, 80);
    z-index: 10;
}
  
.direction-r .flag:before {
    left: -40px;
}
  
.direction-l .flag:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: rgb(248, 248, 248);
    border-width: 8px;
    pointer-events: none;
}
  
.direction-r .flag:after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: rgb(248, 248, 248);
    border-width: 8px;
    pointer-events: none;
}
  
.time-wrapper {
    display: inline;
    line-height: 1em;
    font-size: 0.66666em;
    color: rgb(250, 80, 80);
    vertical-align: middle;
}
  
.direction-l .time-wrapper {
    float: left;
}
  
.direction-r .time-wrapper {
    float: right;
}
  
.time {
    display: inline-block;
    padding: 4px 6px;
    background: rgb(248, 248, 248);
}
.timeline .desc .title{
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    color: var(--dark-black);
    padding-bottom: 20px;
}
.timeline .desc p{
    color: #797979;
}
  
.desc {
    margin: 1em 0.75em 0 0;
    line-height: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 210px;
    border-radius: 10px;
} 
.direction-r .desc {
    margin: 0;
}
.copyright{
    background-color: #1E1F22;
    padding: 17px 0;
}
.copyright p{
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #D3CFCA;
    text-align: center;
    margin-bottom: 0;
}
/*------login-modal-----*/
.modal .modal-title{
    font-size: 30px;
    font-weight: 400;
    line-height: 35px;
    text-align: center;
    color: var(--primary-color);
}
#login-modal .modal-header, #register-modal .modal-header{
    border: none;
    margin-bottom: 50px;
    padding: 0;
    display: block;
}
#login-modal .modal-body, #register-modal .modal-body{
    padding: 0;
}
.input-box input{
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    border: none;
    outline: none;
    border-bottom: 1px solid #D9D9D9;
    color: var(--dark-black);
    border-radius: 0px;
    width: 100%;
    box-shadow: none !important;
    padding-left: 0;
}
.input-box input:focus{
    border-color: var(--primary-color);
}
.input-box{
    margin-bottom: 30px;
}
#login-modal .modal-content, #register-modal .modal-content{
    padding: 40px 50px 35px;
}
.modal .btn-close{
    width: 16px;
    height: 16px;
    border: 1px solid var(--dark-black);
    border-radius: 50%;
    padding: 6px;
    font-size: 12px;
    position: absolute;
    right: 25px;
    top: 30px;
    z-index: 2;
    color: var(--dark-black);
    transition: .4s;
}
.modal .btn-close:hover{
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.forget-text{
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: var(--primary-color);
    text-align: right;
    display: block;
}
.input-box .site-btn{
    width: 100%;
}
.dont-txt{
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--dark-black);
    text-align: center;
    margin-bottom: 0;
    padding-top: 30px;
}
.dont-txt a{
    color: var(--primary-color);
}

/*--------
---------------------inner page----------
-----------------------------------------------------------*/
.container-fluid{
    padding-left: 50px;
    padding-right: 50px;
    max-width: 1920px;
}
.page-header{
    background: #070404;
    padding: 10px 0;
    position: static;
}
.menu-header{
    padding: 10px 0;
    position: relative;
    background-color: #fff;
}
.menu-header-left{
    display: flex;
    flex-wrap: nowrap;
    gap: 25px;
}
.menu-header-left .header-select{
    border-color: var(--dark-black);
}
.menu-header-left .header-select select{
    color: var(--dark-black);
}
 /*---menu header----*/
.menu{
    text-align: right;
}
.menu-content{
    background-color: #fff;
    box-shadow: 0px 3px 34px 0px #00000014;
    border-radius: 15px;
    max-width: 345px;
    padding: 26px 21px 40px;
    position: absolute;
    width: 100%;
    right: 50px;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}
.menu-content.active{
    opacity: 1;
    visibility: visible;
    z-index: 99;
}
.menu ul{
    text-align: center;
}
.menu ul li{
    display: block;
}
.menu ul li a{
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    color: var(--dark-black);
    margin: 0px;
    padding-top: 30px;
    display: inline-block;
    transition: all .4s ease-in-out;
    position: relative;
}
.menu ul li a:hover{
    color: var(--primary-color);
}
/*-------Mobile Menubar----------*/
.mobile-toggle{
    display: inline-block;
    position: relative;
    cursor: pointer;
    top: 3px;
}

.mobile-toggle span{
    background: var(--primary-color);
    height: 2px;
    display: block;
    width: 27px;
    position: relative;
    transition: all 0.5s;
}
.mobile-toggle span:nth-child(2) {
    margin: 7px auto;
    width: 20px;
}
.mobile-toggle.menu-open span:first-child {
    transform: rotate(47deg) translateY(2px);
}
.mobile-toggle.menu-open span:nth-child(2) {
    display: none;
}
.mobile-toggle.menu-open span:last-child {
    transform: rotate(128deg) translateY(1px);
}
.mobile-toggle.menu-open{
    top: -5px;
}
.menu-content h5{
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
    color: var(--primary-color);
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 20px;
}
/*----mnu header end---*/
.page-content-area{
    padding-top: 40px;
    padding-bottom: 110px;
}
.page-content-title h3{
    font-size: 40px;
    font-weight: 400;
    line-height: 46px;
    color: var(--dark-black);
}
.page-content-title h6{
    font-size: 30px;
    font-weight: 400;
    line-height: 35px;
    color: var(--primary-color);
}
.page-content-lgo-title {
    display: flex;
    flex-wrap: nowrap;
    gap: 25px;
    margin-bottom: 30px;
}
.page-content-title{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page-content-des p{
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--dark-black);
    padding-bottom: 15px;
    margin-bottom: 0;
}
.page-content-des p:first-of-type::first-letter{
    font-size: 30px;
    font-weight: 600;
    line-height: 30px;
    color: var(--primary-color);
}
.page-content-des h6{
    font-size: 30px;
    font-weight: 400;
    line-height: 35px;
    color: var(--primary-color);
    padding-bottom: 15px;
}
.page-content-des{
    padding-bottom: 25px;
}
.two-video-wrap{
    background-color: #EFE9E2;
    border-radius: 15px;
    padding: 25px 18px 20px;
}
.video-title h4{
    font-size: 26px;
    font-weight: 400;
    line-height: 30px;
    color: var(--dark-black);
    margin-bottom: 21px;
}
.video-title h4:after{
    content: "";
    width: 45px;
    height: 2px;
    background-color: var(--primary-color);
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.text-editor-box{
    background-color: #fff;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
}
.video-img{
    position: relative;
}
.video-img img{
    border-radius: 10px;
    width: 100%;
    margin-bottom: 8px;
    max-height: 125px;
}
.video-img i{
    width: 30px;
    height: 30px;
    background-color: var(--primary-color);
    border-radius: 50%;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 29px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.video-box p{
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--dark-black);
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 0;
}
.page-input-box{
    margin-bottom: 22px;
}
.page-input-box label{
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    color: var(--dark-black);
    padding-bottom: 5px;
    padding-left: 10px;
}
.page-input-box textarea{
    border: 1px solid #D9D9D9;
    border-radius: 15px;
    height: 100px;
    padding: 13px 15px;
    outline: none;
    box-shadow: none !important;
    display: block;
    resize: none;
    width: 100%;
}
.page-input-box textarea:focus, .note-box textarea:focus{
    border-color: var(--primary-color);
}

.features-tab .nav-item .nav-link {
    font-size: 18px;
    font-weight: 500;
    line-height: 21px;
    text-align: center;
    margin-right: 40px;
    padding: 14px 30px;
    border: 1px solid #212121;
    border-radius: 50px;
    color: var(--dark-black);
}

.features-tab .nav-item .nav-link img {
    margin-right: 8px;
}

.features-tab .nav-tabs li:last-child .nav-link {
    margin-right: 0 !important;
}

.features-tab .nav-tabs .nav-item .nav-link.active {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.features-tab .nav-tabs .nav-item .nav-link:hover {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.features-tab .nav-tabs {
    border-bottom: none;
}

.features-tab .nav-tabs .nav-item .nav-link:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(190deg) brightness(102%) contrast(100%);
}

.features-tab .nav-tabs .nav-link.active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(190deg) brightness(102%) contrast(100%);
}

.features-tab .tab-content {
    padding: 25px 0;
}
.note-box textarea{
    border: 1px solid #D9D9D9;
    border-radius: 15px;
    height: 150px;
    padding: 13px 15px;
    outline: none;
    box-shadow: none !important;
    display: block;
    resize: none;
    width: 100%;
}
.left-content-video{
    position: relative;
}
.audio-modal .modal{
    position: absolute;
    top: -180px;
}
.audio-modal .modal-dialog{
    margin: 0;
    max-width: 750px;
}
.audio-modal .modal-dialog .modal-content{
    padding: 20px;
    background-color: #000000e6;
    border-radius: 10px;
}
.audio-modal .modal-header{
    border: none;
    padding: 0;
}
.audio-modal .modal .btn-close{
    border-color: #fff;
    color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F23A2E'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* Signature Pad Section */
#drawing-canvas {
    border: 1px solid #000;
    width: 100%;
    height: 200px; /* Adjust the height as per your design */
}


/*--------
--------------------Favourite---------
-----------------------------------------------------*/
.right-box-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #D9D9D9;
    margin-bottom: 22px;
}
.right-box-title h4{
    font-size: 30px;
    font-weight: 400;
    line-height: 35px;
    color: var(--dark-black);
}
.right-box-title a{
    font-size: 18px;
    font-weight: 500;
    line-height: 21px;
    color: var(--primary-color);
    transition: .4s;
}
.right-box-title a:hover{
    color: var(--dark-black);
}
.favourite-box{
    border: 1px solid #D9D9D9;
    padding: 24px;
    border-radius: 15px;
    margin-bottom: 22px;
}
.favourite-box-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 15px;
    margin-bottom: 18px;
}
.favourite-box-header h6{
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    font-family: "Inter", sans-serif;
    color: var(--dark-black);
}
.favourite-box-header span{
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #82807D;
}
.favourite-box p{
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--dark-black);
    margin-bottom: 0;
}

.accordion-item{
    margin-bottom: 22px;
    border: 1px solid #F7F3EE !important;
    border-radius: 10px;
}
.accordion-button{
    background: transparent !important;
    box-shadow: none !important;
}
.accordion-header button{
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
    color: var(--dark-black);
}
.accordion-button:not(.collapsed){
    color: var(--dark-black);
}
.accordion-button::after, .accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F23A2E' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e")
}
.accordion-body{
    padding-top: 6px;
}
.accordion-body ul li, .badge-content ul li{
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: var(--dark-black);
    position: relative;
    padding-left: 22px;
    display: block;
    margin-bottom: 15px;
}
.accordion-body ul li:before, .badge-content ul li::before{
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../images/right-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    top: 1px;
    left: 0;
}
.accordion-body p{
    font-size: 16px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}

/*--------playlist----------*/
.playlist-title{
    margin-bottom: 15px;
}
.playlist-title h6{
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
    font-family: "Inter", sans-serif;
    color: var(--dark-black);
}
.playlist-list{
    margin-bottom: 30px;
}
/*----badge-----*/
.badge-header{
    justify-content: flex-start;
    gap: 22px;
}
.badge-list ul li{
    margin-right: 8px;
    opacity: .5;
}
.badge-list ul li.active{
    opacity: 1;
}
.badge-list ul li:last-child{
    margin-right: 0px;
}
.badge-list ul li img{
    width: 32px;
}

/*----timeline responsive-----*/
@media (max-width: 991px) {

.timeline {
      width: 100%;
      padding: 0;
    }
  
    .timeline li {
      padding: 2em 0;
    }
  
    .timeline li .pointer {
      top: -17px;
    }
  
    .direction-l,
    .direction-r {
      float: none;
      width: 100%;
  
      text-align: center;
    }
  
    .flag-wrapper {
      text-align: center;
    }
  
    .flag {
      background: rgb(255, 255, 255);
      z-index: 15;
    }
  
    .direction-l .flag:before,
    .direction-r .flag:before {
      position: absolute;
      top: -30px;
      left: 50%;
      content: " ";
      display: block;
      width: 12px;
      height: 12px;
      margin-left: -9px;
      background: #fff;
      border-radius: 10px;
      border: 4px solid rgb(255, 80, 80);
      z-index: 10;
    }
  
    .direction-l .flag:after,
    .direction-r .flag:after {
      content: "";
      position: absolute;
      left: 50%;
      top: -8px;
      height: 0;
      width: 0;
      margin-left: -8px;
      border: solid transparent;
      border-bottom-color: rgb(255, 255, 255);
      border-width: 8px;
      pointer-events: none;
    }
  
    .time-wrapper {
      display: block;
      position: relative;
      margin: 4px 0 0 0;
      z-index: 14;
    }
  
    .direction-l .time-wrapper {
      float: none;
    }
  
    .direction-r .time-wrapper {
      float: none;
    }
  
    .desc {
      position: relative;
      margin: 1em 0 0 0;
      padding: 1em;
      background:#fff;
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  
      z-index: 15;
    }
  
    .direction-l .desc,
    .direction-r .desc {
      position: relative;
      padding: 1em;
      margin-left: 15px;
      margin-right: 15px;
      z-index: 15;
    }
    .icon_timeline {
      margin: 15px 0px;
    }
    .icon_timeline-left , .icon_timeline-right{
      display: none;
    }
    .reviews_container {
      width: 100%;
    }
  
}
@media (min-width:992px) {
    .icon_timeline {
    display: none;
    }
}


/*----------Responsive-----------*/
@media(max-width: 1400px){
    .main-banner, .banner-content{
        height: 600px;
    }
}

@media(max-width: 1199px){
    .two-video-wrap{
        margin-bottom: 25px;
    }
    /* .left-content-video .row .col-xl-6:last-of-type .two-video-wrap{
        margin-bottom: 0;
    } */
}

@media(max-width: 992px){
    .banner-text h1{
        font-size: 46px;
        line-height: 58px;
    }
    .main-banner, .banner-content{
        background-position: center;
        height: 550px;
    }
    .audio-feature-box .audio-content{
        padding: 20px 20px 10px;
    }
    .immersive-sec-top, .imersive-content{
        height: 450px;
    }
    .audio-features-block-main {
        margin-top: -70px;
    }
    .step-content-main-bg{
        padding: 60px 0 0;
    }
    .timeline li:last-child{
        padding: 0;
    }
    .study-tool-sec, .robist-study-sec{
        padding: 60px 0;
    }
    .immersive-sec, .get-started-timeline-sec{
        padding-bottom: 60px;
    }
    .timeline li:last-child .pointer {
        top: -35px;
    }
    .container-fluid, .header-wrap{
        padding-left: 15px;
        padding-right: 15px;
    }
    .menu-content{
        right: 15px;
    }
    .playlist-list .video-box{
        margin-bottom: 20px;
    }
    .badge-list ul li{
        margin-bottom: 5px;
    }
}

@media(max-width: 768px){
    .main-banner, .banner-content {
        height: 500px;
    }
    .banner-text h1 {
        font-size: 34px;
        line-height: 42px;
    }
    .banner-text p, .imersive-content p, .robust-study-content p, .right-box-title a, .favourite-box p{
        font-size: 16px;
        line-height: 24px;
    }
    .site-btn{
        font-size: 16px;
        line-height: 18px;
    }
    .title-section h2, .imersive-content h3, .page-content-title h3{
        font-size: 30px;
        line-height: 40px;
    }
    .study-box{
        margin-bottom: 50px;
    }
    .study-tool-sec .row .col-md-6:last-of-type .study-box{
        margin-bottom: 0px;
    }
    .robust-study-content:before{
        display: none;
    }
    .robust-img img{
        width: 100%;
        margin-bottom: 25px;
    }
    .robust-study-content-main .container .row:nth-child(odd) {
        margin-bottom: 25px;
    }
    .page-content-title h6, .page-content-des h6, .right-box-title h4{
        font-size: 24px;
        line-height: 32px;
    }
    .page-content-des p, .page-input-box label, .features-tab .nav-item .nav-link{
        font-size: 16px;
        line-height: 26px;
    }
    .features-tab .nav-item .nav-link{
        padding: 12px 25px;
        margin-right: 10px;
    }
    .menu ul li a{
        font-size: 16px;
    }
    .favourite-box-header h6{
        font-size: 18px;
        line-height: 22px;
    }
    .favourite-box-header span{
        font-size: 14px;
    }
    .page-content-area {
        padding-top: 40px;
        padding-bottom: 70px;
    }
    .accordion-header button, .playlist-title h6{
        font-size: 18px;
        line-height: 25px;
    }
    .badge-list ul li{
        margin-right: 5px;
    }

}

@media(max-width: 576px){
    .features-tab .nav-item .nav-link{
        padding: 12px 18px;
    }
    .menu-header-left .header-select:first-of-type select{
        width: 185px;
    }
    .menu-header-left{
        gap: 10px;
    }
    .menu-content{
        max-width: unset;
        left: 50%;
        right: auto;
        width: 95%;
        transform: translateX(-50%);
    }
    .badge-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
@media (max-width: 400px) {
    .menu-header-left .header-select:first-of-type select {
        width: 140px;
    }
    .header-right a{
        font-size: 14px;
    }
}

/* New code */
/* Modal Styles */
#media-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

#media-modal-content {
    position: relative;
    margin: 15% auto;
    background-color: #fff;
    padding: 20px;
    width: 60%;
    max-width: 800px;
}

#media-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #000;
    cursor: pointer;
}

#media-player-container {
    text-align: center;
}

.favorite-wrap{
    margin-bottom: 25px;
}

.favorite-button{
    padding:5px 20px;
    border:1px solid #82807D;
    border-radius: 25px;
    color: #000;
}
.favorite-button:hover{
    background-color: #000000;
    color: #FFFFFF;
}

/*------20-11-2024---user profile-----*/
.label-input-box{
    margin-bottom: 20px;
}
.label-input-box label{
    margin-bottom: 6px;
}
.label-input-box textarea{
    height: 120px;
    resize: none;
}
.profile-page h2, .psalm-count h3, .rest-pass h3, .profile-sett-content h3, .profile-page h3{
    font-size: 30px;
    font-weight: 400;
    line-height: 35px;
    color: var(--dark-black);
    margin-bottom: 25px;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 8px;
}
.psalm-count{
    margin: 25px 0;
}
.form-control:focus{
    box-shadow: none;
    border-color: var(--primary-color);
}
.badge:empty{
    padding: 0 !important;
    margin-right: 4px;
}
.save-profile-details{
    border: 1px solid #D9D9D9;
    padding: 12px 15px;
    border-radius: 10px;
    margin: 30px 0;
    background-color: #fff;
}
.save-profile-details p{
    margin-bottom: 6px;
}

.video-box{
    text-align: center;
}

.add-to-playlist-btn{
    padding:5px 15px;
    border:1px solid #82807D;
    border-radius: 25px;
    color: #000;
    font-size: 14px;
}
.add-to-playlist-btn:hover{
    background-color: #000000;
    color: #FFFFFF;
}
.remove-from-playlist-btn{
    padding:5px 15px;
    border:1px solid #82807D;
    border-radius: 25px;
    color: #000;
    font-size: 14px;
}
.remove-from-playlist-btn:hover{
    background-color: #000000;
    color: #FFFFFF;
}

@media(max-width: 767px){
    .rest-pass{
        margin-bottom: 25px;
    }
}

/* Remove from playlist */
.video-box-playlist {
    position: relative;
    display: inline-block;
    text-align: center;
}
.video-box-playlist h4{
    font-size: 16px;
}

.video-box-playlist .remove-icon {
    position: absolute;
    top: -10px; /* Move it slightly above the image */
    right: -10px; /* Move it slightly outside the image */
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    padding: 3px 5px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Ensure it stays on top */
    font-size: 14px; /* Adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-box-playlist .remove-icon:hover {
    background: rgba(200, 0, 0, 0.9);
}