/*
Theme Name: learnie
Description: learnie custom theme
Version: 1.0
Author: creatives
Author URI: https://creatives.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: learnie
test
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Margarine&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');
/* font-family: "Poppins", sans-serif; */
@font-face {
  font-family: 'GillSans';
  src: url("../fonts/GillSans.eot");
  src: url("../fonts/GillSans.eot") format("embedded-opentype"), url("../fonts/GillSans.woff2") format("woff2"), url("../fonts/GillSans.woff") format("woff"), url("../fonts/GillSans.ttf") format("truetype"), url("../fonts/GillSans.svg#GillSans") format("svg"); }
@font-face {
  font-family: 'GillSansHeavy';
  src: url("../fonts/GillSansHeavy.eot");
  src: url("../fonts/GillSansHeavy.eot") format("embedded-opentype"), url("../fonts/GillSansHeavy.woff2") format("woff2"), url("../fonts/GillSansHeavy.woff") format("woff"), url("../fonts/GillSansHeavy.ttf") format("truetype"), url("../fonts/GillSansHeavy.svg#GillSansHeavy") format("svg"); }


  @font-face {
     font-family: "Coiny", system-ui;
    src: url('../fonts/Sweetie%20Summer.ttf') format('truetype'),
         url('../fonts/Sweetie%20Summer.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Sweetie Summer Display';
    src: url('../fonts/Sweetie%20Summer%20-%20Display.ttf') format('truetype'),
         url('../fonts/Sweetie%20Summer%20-%20Display.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  * {
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: #000; }

h1 {
  display: block;
  font-size: 44px;
  line-height: 56px;
  font-weight: 700; }

h2 {
  display: block;
  font-size: 36px;
  line-height: 46px;
  font-weight: 600; }

h2:not(:first-child) {
  margin: 30px 0 0 0; }

h3 {
  display: block;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600; }

h3:not(:first-child) {
  margin: 30px 0 0 0; }

h4 {
  display: block;
  font-size: 22px;
  line-height: 30px;
  font-weight: 500; }

h4:not(:first-child) {
  margin: 30px 0 0 0; }

h5 {
  display: block;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400; }

h5:not(:first-child) {
  margin: 30px 0 0 0; }

p {
  display: block;
  color: #4F5150;
  /* font-size: 16px;
  line-height: 26px; */
  font-size: 15px;
  line-height: 25px;
  font-weight: 400; }

p:not(:first-child) {
  margin: 16px 0 0 0; }

a,
a:hover {
  text-decoration: none; }

input,
select,
textarea {
  font-size: 16px;
  line-height: 37px; }

textarea:hover,
textarea:focus,
textarea:active {
  outline: none;
  box-shadow: none; }

input:hover,
input:active,
input:focus {
  outline: none;
  box-shadow: none; }

select:hover,
select:active,
select:focus {
  outline: none;
  box-shadow: none; }

input[type=number]::-webkit-inner-spin-button {
  /*For Webkits like Chrome and Safari*/
  -webkit-appearance: none;
  margin: 0; }

img {
  max-width: 100%;
  height: auto;
  margin: 0; }

label {
  margin: 0; }

.buttonset {
  display: block;
  margin: 40px 0 0 0; }

.btn {
  outline: none !important;
  /* box-shadow: none !important; */
  border-radius: 100px;
  font-weight: 400;
  transition: all 500ms ease 0s;
  text-transform: uppercase; }

.btn img {
  display: inline-block;
  vertical-align: middle;
  margin: -2px 0 0 2px;
  height: auto;
  width: 22px;
  position: relative; }

.btn:hover img {
  animation: btnarrowmove 500ms; }

@keyframes btnarrowmove {
  0% {
    left: 0px; }
  40% {
    left: -6px; }
  100% {
    left: 0px; } }
.btn.btn-md {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  --bs-btn-padding-x: 1.2rem;
  --bs-btn-padding-y: 0.794rem;
  letter-spacing: 0.15em;
  min-height: 50px; 
  line-height: 50px;
}

.btn.btn-md img {
  margin-top: -3px; }

.btn.btn-lg {
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-padding-y: 0.794rem;
  letter-spacing: 0.15em;
  /* min-height: 68px;  */
}

.btn.btn-lg img {
  margin-top: -3px; 
}

/* .btn.btn-sm {
  font-size: 14px;
  line-height: 20px;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: 0.575rem;
} */
.btn.btn-primary {
  --bs-btn-bg: #B62CA4;
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-bg: #e638cf;
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-bg);
  box-shadow: none; }

/* .btn.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-bg: #915CA6;
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-bg: #c176de;
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-bg);
  box-shadow: 0px 16px 14px 0px rgba(145, 92, 166, 0.13);
}
.btn.btn-outline-primary {
  --bs-btn-color: #3541E7;
  --bs-btn-border-color: var(--bs-btn-color);
  --bs-btn-hover-bg: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-color);
}
.btn.btn-light {
  --bs-btn-color: #3541E7;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #3541E7;
  --bs-btn-hover-bg: #d4e2fe;
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-bg);
} */
.m-t-30 {
  margin-top: 30px !important; }

.page-container {
  display: block;
  max-width: 1315px;
  margin: 0 auto;
  padding: 0 15px; }

.page-container.md {
  max-width: 1170px; }

.page-container.sm {
  max-width: 1040px; }

.page-container.xl {
  max-width: 1630px; }

.header {
  display: block;
  background-color: #fff; }
  .header .header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 80px;
    padding: 16px 0; }
    .header .header-container .logo {
      display: block;
      float: left; }
      .header .header-container .logo img {
        display: block;
        width: auto;
        max-height: 30px; }
    .header .header-container .header-right {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-left: auto; }

.main-navbar {
  display: flex;
  float: left;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0; }
  .main-navbar li {
    display: inline-flex; }
    .main-navbar li:not(:last-child) {
      margin-right: 48px; }
    .main-navbar li a {
      display: block;
      color: #000;
      font-size: 17px;
      font-weight: 500;
      line-height: 22px; }
      .main-navbar li a:hover, .main-navbar li.active a {
        color: #B62CA4; }

.header-search {
  display: block;
  float: left;
  position: relative; }
  .header-search:not(:first-child) {
    margin: 0 0 0 48px; }
  .header-search .search-field {
    display: block;
    float: left;
    height: 44px;
    border-radius: 16px;
    border: none;
    box-shadow: none;
    background-color: #FFF3FD;
    padding: 11px 51px 13px 16px;
    color: #B08CAC;
    font-size: 17px;
    line-height: 22px;
    font-weight: 400; }
  .header-search .search-btn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 100%;
    background: url(../images/search-icon.svg) no-repeat left center;
    background-size: 24px auto;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0 16px 16px 0; }

.log-reg-btn:not(:first-child) {
  margin: 0 0 0 24px; }

.banner {
  display: block; }
  .banner .banner-slider {
    position: relative; }
    .banner .banner-slider .owl-dots {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      position: absolute;
      bottom: 32px;
      z-index: 1; }
      .banner .banner-slider .owl-dots .owl-dot {
        display: block;
        width: 10px;
        height: 10px;
        background-color: #FFF;
        border: 1px solid #DE54CC;
        transition: 500ms;
        border-radius: 100px;
        margin: 0 4px; }
        .banner .banner-slider .owl-dots .owl-dot.active {
          background-color: #B62CA4;
          border-color: #B62CA4;
          width: 16px; }
  .banner .banner-item {
    display: block;
    background: url(../images/banner-bg.jpg) no-repeat bottom center;
    background-size: 100% 100%;
    background-color: #FFF6FE; }
  .banner .banner-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 708px;
    padding: 70px 0; }
    .banner .banner-area .banner-left {
      display: block;
      float: left;
      width: 546px;
      max-width: 50%; }
      .banner .banner-area .banner-left h2 {
        display: block;
        font-family: 'GillSansHeavy';
        color: #000;
        font-size: 68px;
        font-weight: 900;
        line-height: 76px;
        text-transform: capitalize;
        margin: 0; }
        .banner .banner-area .banner-left h2 span {
          display: block;
          font-family: 'GillSans';
          color: #000;
          font-size: 44px;
          line-height: 56px;
          font-weight: 500;
          text-transform: capitalize;
          margin: 10px 0 0 0; }
      .banner .banner-area .banner-left .btn {
        margin: 60px 0 0 0; }
    .banner .banner-area .banner-right {
      display: block;
      width: 658px;
      max-width: 50%;
      padding: 0 0 0 60px;
      margin: 0 0 0 auto; }

.explore-section {
  display: block;
  background-color: #FDF9F9;
  padding: 60px 0; }
  .explore-section .explore-tl {
    display: block;
    max-width:100%; }
    .explore-section .explore-tl h2 {
      display: block;
      color: #000;
      font-family: 'GillSansHeavy';
      font-size: 52px;
      font-weight: 900;
      line-height: 60px;
      text-transform: uppercase;
      margin: 0; }
    .explore-section .explore-tl p {
      display: block;
      color: #000;
      font-size: 18px;
      font-weight: 400;
      line-height: 30px;
      margin: 16px 0 0 0; }
  .explore-section .explore-filter-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 46px 0 0 0; }
    .explore-section .explore-filter-section .age-filter {
      display: inline-flex;
      align-items: center; }
      .explore-section .explore-filter-section .age-filter .age-list {
        display: inline-flex;
        position: relative; }
        .explore-section .explore-filter-section .age-filter .age-list:not(:last-child) {
          margin-right: 16px; }
    .explore-section .explore-filter-section .filter-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      border: 1px solid #8C8C8C;
      background-color: #FDF9F9;
      transition: 500ms;
      color: #000;
      font-size: 17px;
      font-weight: 400;
      line-height: 19px;
      min-height: 58px;
      min-width: 190px;
      padding: 10px 16px;
      transition: 500ms; }
    .explore-section .explore-filter-section input {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      /* width: 100%; */
      /* height: 100%; */
      z-index: 1;
      cursor: pointer;
      opacity: 0;
      border-radius: 16px; }
      .explore-section .explore-filter-section input:checked ~ .filter-box {
        color: #fff;
        background-color: #B62CA4;
        border-color: #B62CA4; }
    .explore-section .explore-filter-section select.filter-box {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      padding-right: 30px;
      background: url(../images/right-arrow.svg) no-repeat right 10px center;
      background-size: 14px auto; }
    .explore-section .explore-filter-section .filter-rgt {
      display: inline-flex;
      margin-left: auto;
      padding-left: 40px; }
  .explore-section .explore-listing {
    position:relative;
    display: flex;
    display: block;
    margin: 32px 0 0 0; }
    .explore-section .explore-listing .rw {
      display: flex;
      flex-wrap: wrap;
      /* margin: -12px;
      width:50%;  */
    }
      .explore-section .explore-listing .rw .colm {
        display: block;
        float: left;
        max-width: 20%;
        flex: 0 0 20%; }
        .explore-section .explore-listing .rw .colm .explore-image-box {
          display: block;
          width: 100%;
          margin: 7px 0px;
          padding: 12px;
          overflow: hidden;
          position:relative;
          border-radius: 8px; }
          .explore-section .explore-listing .rw .colm .explore-image-box img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 8px; }

.about-section {
  display: block;
  background-color: #009CFF;
  padding: 68px 0; }
  .about-section .about-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
  .about-section .about-texts {
    display: block;
    float: left;
    flex: 1; }
    /* .about-section .about-texts:not(:last-child) {
      padding: 0 40px 0 0; } */
 
  .about-section p {
    display: block;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    margin: 20px 0 0 0; }
  .about-section .about-image {
    display: block;
    float: left;
    width: 538px;
    max-width: 39%; }
    .about-section .about-image img {
      display: block;
      width: 100%;
      height: auto; }

.about-data-section {
  display: block;
  background: url(../images/bg-1.png) no-repeat bottom center;
  background-size: 100% auto;
  background-color: #F2F9FD;
  padding: 20px 0; }
  .about-data-section .about-data-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .about-data-section .about-data-container .about-data-left {
      display: flex;
      flex-flow: column;
      float: left;
      width: 384px; }
      .about-data-section .about-data-container .about-data-left img {
        display: block;
        width: 100%;
        height: auto; }
    .about-data-section .about-data-container .about-data-right {
      display: block;
      float: left;
      flex: 1;
      padding: 0 0 0 38px; }
      .about-data-section .about-data-container .about-data-right p {
        display: block;
        color: #000;
        font-size: 17px;
        font-weight: 400;
        line-height: 32px; }
        .about-data-section .about-data-container .about-data-right p:not(:first-child) {
          margin: 30px 0 0 0; }

.footer {
  display: block;
  background-color: #fff; }
  .footer .footer-container {
    display: block;
    padding: 46px 0; }
    .footer .footer-container .rw {
      display: flex;
      flex-wrap: wrap;
      margin: -15px; }
      .footer .footer-container .rw .colm {
        display: block;
        float: left;
        max-width: 20%;
        flex: 0 0 20%;
        padding: 15px; }
        .footer .footer-container .rw .colm:first-child {
          max-width: 40%;
          flex: 0 0 40%; }
    .footer .footer-container h3 {
      display: block;
      color: #000;
      font-family: "GillSansHeavy";
      font-size: 22px;
      font-weight: 700;
      line-height: 26px;
      text-transform: uppercase;
      padding: 0;
      margin: 0 0 20px 0; }
    .footer .footer-container .footer-links {
      display: block;
      margin: 0;
      padding: 0; }
      .footer .footer-container .footer-links li {
        display: block;
        margin: 0; }
        .footer .footer-container .footer-links li:not(:first-child) {
          margin: 14px 0 0 0; }
        .footer .footer-container .footer-links li a {
          display: inline-block;
          color: #000;
          font-size: 17px;
          font-weight: 400;
          line-height: 21px; }
          .footer .footer-container .footer-links li a:hover {
            color: #B62CA4; }
    .footer .footer-container .footer-logo {
      display: inline-flex; }
      .footer .footer-container .footer-logo img {
        display: block;
        height: 26px;
        width: auto; }
    .footer .footer-container .copyright {
      display: block;
      color: #000;
      font-size: 17px;
      font-weight: 400;
      line-height: 22px;
      margin: 38px 0 0 0; }

.social-links {
  display: flex;
  flex-wrap: wrap;
  margin: 22px 0 0 0; }
  .social-links a {
    display: block;
    float: left; }
    .social-links a:not(:last-child) {
      margin-right: 12px; }
    .social-links a img {
      display: block;
      width: 26px;
      height: auto; }

/*# sourceMappingURL=style.css.map */




/*responsive menu*/

.mobile_menu{display:none;}

.collapsible {
  color: #000;
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.content .active, .content .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  /*overflow: hidden;*/
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

/*responsive menu ends*/


.filterStory{
    padding-right: 30px;
    background: url(../images/right-arrow.svg) no-repeat right 10px center;
    background-size: 14px auto;
    display: inline-flex;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #8C8C8C;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 19px;
    min-height: 58px;
    min-width: 190px;
    padding: 10px 16px;
    transition: 500ms;
}

#filterStoryModal .select2-container{z-index:9999 !important; width:100% !important; position:relative;}

.select2-container--default .select2-selection--multiple{
  border:1px solid #BDBDBD !important;
  color: #8C8C8C !important;
  font-size: 18px !important;
  border-radius:8px !important;
}

#filterStoryModal .select2-container .select2-selection--multiple{
  height:46px !important;
}

#filterStoryModal .select2-container .select2-search--inline .select2-search__field{
  height:34px;
  padding-left:13px;
  background: url(../images/search.png) no-repeat center right 20px;
  width:100% !important;
  position: absolute;
  left:0;
  top:0;
}

#filterStoryModal .modal-footer{
  justify-content: center;
}

.select2-container.select2-container--default .select2-dropdown{
  z-index:999999 !important;
}

#filterStoryModal .modal-body{min-height:160px;}

#storyCatSubmit{
  border-radius: 36px;
  background: #DE54CC;
  color: #FFF;
  font-size: 16px;  
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  height:51px;
  width:167px;
  border:0px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{border-right:0px !important;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  border-radius: 4px !important;
  border: 1px solid #BDBDBD !important;
  padding:4px 8px !important;
  background-color:#fff !important;
  position:relative !important;
  /* bottom:-39px !important; */
  margin-top:7px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display{padding-left:17px !important;}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{font-weight:normal !important; font-size: 1.4em !important;}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{margin:5px 0 0 !important;}




/* login */

.login{
  /* background-color: #FFF6FE; */
  background-image: url(../images/login-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height:100vh;
  position:relative;
}

.login .toast{
  position:absolute;
  background:#f8d7da;
  border:1px solid #f5c2c7;
  color:#842029;
  margin-top:117px;
  margin-left:125px;
  text-align: center;
}

.login .login-content{
  height: 100vh;
  align-items: center;
}
.login .login-content .login-form{
  background-color: #fff;
  padding: 50px 20px 50px;
  border-radius: 20px;
  margin-left: 0;
  position:relative;
}
.login-form h2{
  font-family: 'GillSans';
  font-size: 45px;
  font-weight: 700;
  line-height: 62.18px;
  text-align: center;
  color: #000000;
  margin-bottom: 110px;
}
.login-form label{
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
}
#signup-form .form-check{
  display:flex;
}
#signup-form .form-check .form-check-input{
  padding:7px;
}
#signup-form .form-check .form-check-label{
  margin-left:10px;
}

.login-form input, .login-form select, .login-form textarea{
  background-color: #f8f4f2;
  border: 1px solid #1AB59C;
  padding: 14px;
  resize: none;
}
.login-form input[type="email"], .login-form input[type="password"]{
  background-color: #f8f4f2;
}
.login-form input:focus{
  border: 1px solid #83749f;
}
.login-form input::placeholder{
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #B08CAC;
}
.login-form .forgot{
  text-align: right;
}
.login-form .forgot a{
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #1AB59C;
}
.login-form .submit-btn{
  text-align: center;
}
.login-form .submit-btn a{
  font-family: Poppins;
  font-size: 17px;
  font-weight: 600;
  line-height: 25.5px;
  color: #fff;
  padding: 14px 60px;
  background-color: #83749f;
  border-radius: 36px;
}
.login-form .have-ac{
  text-align: center;
}
.login-form .have-ac p{
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #484348;
}
.login-form .have-ac p a{
  font-weight: 600;
  color: #1AB59C;
}
.mobile-d-none{
  display: none;
}

#homepage_listing .subscription_link{
  display:flex;
  justify-content: center;
  align-items: center;
  width:50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

#homepage_listing .subscription_link p{
  color: #000;
  font-size: 18px;
  font-weight: 400;
  margin-bottom:0;
}

/*login css ends*/



/*forgot password*/

#forgot_psswrd.login-form .alert{
  box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  position: absolute;
  top: -72px;
  left: 162px;
}


/*forgot password ends*/


/*otp*/

#showotp1{margin-bottom:4px;} 

#showotp1 + p{margin-bottom:68px !important;}

#otp_toast .toast{margin-top:129px;}

/*otp css ends*/






/*story-listing*/

.white_box{
  background: #FFF;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
  border-radius:8px;
  padding:0px !important;
}

.white_box img{
  border-radius:0px !important;
}

.story-name{
  background: url(../images/tag.png) no-repeat center left 20px;
  padding-left:70px;
  font-family: "Margarine", sans-serif;
  font-weight: 400;
  color: #B62CA4;
  font-size: 16px;
  border-bottom:1px solid #E7E2E2;
  padding-bottom:20px;
  padding-top:20px;
  text-transform: capitalize;
}

.writer{
  background: url(../images/writer.png) no-repeat center left 20px;
  padding-left:70px;
  font-family: "Margarine", sans-serif;
  font-weight: 400;
  font-size: 16px;
  border-bottom:1px solid #E7E2E2;
  padding-bottom:20px;
  padding-top:20px;
  text-transform: capitalize;
}

.cat{
  background: url(../images/category.png) no-repeat center left 20px;
  padding-left:70px;
  font-family: "Margarine", sans-serif;
  font-weight: 400;
  font-size: 16px;
  padding-bottom:20px;
  padding-top:20px;
  text-transform: capitalize;
}

.readmore a{
  color: #B62CA4;
  font-family: Poppins;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  padding:0 15px;
  display: flex;
  justify-content: end;
}

.readmore #listen{
  color: grey;
  font-family: Poppins;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  padding:0 15px;
  display: flex;
  justify-content: end;
}

.three_btns{
  display:flex;
  justify-content: center;
  align-items: center;
  position:relative;
}

.three_btns .readmore{
  display: flex;
}


#update_reding{
  display:block;
  position:absolute;
  box-shadow:0 1px 5px rgba(0,0,0,0.4);
  padding:8px;
  top:-30px;
  right:10px;
  border-radius:6px;
  background: #fff;
}
/*story-listing ends*/



/*story details*/

.banner .inner-banner-area{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 70px 0;
}

.inner-banner-right{
  width:initial;
  max-width: 40%;
  margin: 0 0 0 auto;
  display:block;
}

.inner-banner-left{
  display: block;
  float: left;
  max-width:60%;
}

.banner .inner-banner-area .inner-banner-left h2 {
  display: block;
  font-family: 'GillSansHeavy';
  color: #000;
  font-size: 68px;
  font-weight: 900;
  line-height: 76px;
  text-transform: capitalize;
  margin: 0; 
}

.banner .inner-banner-area .inner-banner-left h3{
  color: #B62CA4;
  font-family: "Margarine", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 126.2%;
  text-transform: capitalize;
  margin-top:0;
}

.banner .inner-banner-area .inner-banner-left .form-select{
  max-width:138px;
  border-radius:21px;
  color: #B62CA4;
  font-weight:600;
  text-transform: uppercase;
}

.writer2{
  background: url(../images/writer2.png) no-repeat center left;
  padding:20px 0 20px 80px;
  display:inline-block;
  color: #615B5B;
  font-family: "Margarine", sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 180.3%; /* 34.257px */
}

.stars{
  padding:20px;
  color: #fbc634;
  font-size: 28px;
  border-bottom: 1px solid #E7E2E2;
  display: flex;
  justify-content: center;
}

.category2{
  background: url(../images/category2.png) no-repeat center left;
  padding:20px 0 20px 80px;
  display:inline-block;
  color: #615B5B;
  font-family: "Margarine", sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 180.3%; /* 34.257px */
}

.banner .inner-banner-area .inner-banner-left p{
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 180.3%; /* 32.454px */
  margin-top:0;
}


.story-slider .slider-container {
  position: relative;
  /*width: 90%;*/
  background-color: transparent;
  margin:auto;
}

.story-slider .slider-container .carousel-inner {
  width: 100%;
  margin: auto;
  padding: 15px;
  border-radius: 13px;
  display:flex;
  align-items: center;
}
.story-slider .slider-container .carousel-inner input[type="submit"] {
  background:#DE54CC;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-padding-y: 0.794rem;
  letter-spacing: 0.15em;
  border: none;
  padding: 6px 46px;
  border-radius: 40px;
}

.story-slider .carousel-control-next, .story-slider .carousel-control-prev {
  width: 8%;
  opacity:1;
}

.story-slider .slide-image{
  width:28%;
  /*display: inline-block;
  vertical-align: middle;*/
}

.slide-text-image-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 90%;
  margin:auto;
}

.full-width-content {
  width: 90%;
  margin: auto;
}

.full-width-content p{
  color: #000;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  line-height: 160.3%;
  margin-bottom: 15px;
}

.story-slider .expand-icon {
  position: absolute;
  top: 11px;
  right: -129px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  background:#fff;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
  padding:8px;
  cursor:pointer;
}

.story-slider .carousel-control-next-icon, .story-slider .carousel-control-prev-icon{
  width:3rem;
  height:3rem;
  box-shadow:0 5px 10px rgba(0,0,0,0.5);
  border-radius:50%;
  justify-content: center;
  align-items: center;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: none;
}

.modal-backdrop{
  z-index:9;
}

.story-slider .owl-carousel .item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  box-sizing: border-box;
  justify-content: center;
}

.story-slider .slide-text {
  padding-right: 20px;
  box-sizing: border-box;
  min-height: 230px;
  width:68%;
  display:inline-flex;
  vertical-align: middle;
  align-items:left;
  flex-direction:column;
  justify-content:center;
}

.story-slider .slide-text h2{
  color: #B62CA4;
  font-family: "Margarine", sans-serif;
  font-size: 39px;
  font-weight: 400;
  margin-bottom:25px;
}

.story-slider .slide-text p{
  color: #000;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  line-height: 127.3%; /* 32.454px */
  margin-bottom:0px;

}

/*.story-slider .slide-image {
  width: initial;
}*/

.story-slider .slider-container .carousel-inner {
  min-height: 480px;
}

.story-slider .slider-container .carousel-inner .carousel-item{
  height:480px;
}

.story-slider .slide-image img {
  width: initial;
  /*max-height: 210px;*/
  margin: auto;
  text-align: center;
  justify-content: center;
  display: flex;
}

.story-slider .modal-content .modal-header {
  padding: 0px;
  position: absolute;
  right: 29px;
  top: 28px;
  z-index:99;
}

#carouselExample1 .carousel-control-prev, #carouselExample2 .carousel-control-prev{
  left: -80px;
}
#carouselExample1 .carousel-control-next, #carouselExample2 .carousel-control-next{
  right: -80px;
}
#storyslidermodal1  .carousel-control-next-icon, #storyslidermodal1  .carousel-control-prev-icon {
  width: 2rem;
  height: 2rem;
}

#storyslidermodal1 .carousel-control-prev {
  left: -14px;
}
#storyslidermodal1 .carousel-control-next {
  right: -14px;
}

div#storyslidermodalinner1, div#storyslidermodalinner2 {
  padding: 0px 50px;
}

.carousel.slide .full-width-content{
  width:90%;
  margin:auto;
}

.carousel.slide .question{
  width:90%;
  margin:auto;
}

.carousel-item form h4{
  color: #B62CA4;
  font-family: "Margarine", sans-serif;
  font-size: 27px;
  font-style: normal;
  font-weight: 400;
  line-height: 145.3%; /* 39.231px */
}

.carousel-item form label{
  color: #B62CA4;
  font-family: "Poppins", sans-serif;
  font-size: 27px;
  font-style: normal;
  font-weight: 400;
}

/* Modal styles */
.story-slider .modal {
  display: none;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 30px;
}

.story-slider .modal-content {
  background-color: #fefefe;
  margin: 1% auto;
  padding: 15px 1px;
  border: 1px solid #888;
  width: 100%;
  display: flex;
  border-radius:50px;
  min-height:600px;
}

.story-slider .modal-content .carousel-inner{
  min-height:536px;
  display: flex;
  align-items: center;
}

.story-slider .close {
  display: flex;
  justify-content: end;
}


.story-slider .modal-text, .modal-image {
  width: 45%;
}

.story-slider .modal-image img {
  width: 100%;
  height: auto;
}

.story-slider .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.story-slider .owl-nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.story-slider .owl-nav button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.story-slider .owl-carousel .owl-nav button.owl-next, .story-slider .owl-carousel .owl-nav button.owl-prev{
  font-size: 65px;
  padding:17px !important;
  border-radius:50%;
  background:#fff;
  box-shadow:0px 12px 24px rgba(0, 0, 0, 0.08);
}

/*.story-slider::before {
  background: url(../images/img-before.png) no-repeat left;
  position: absolute;
  left: 0;
  bottom: -644px;
  content: '';
  height: 882px;
  width: 182px;
}

.story-slider::after {
  background: url(../images/img-after.png) no-repeat right;
  position: absolute;
  right: 0;
  bottom: -644px;
  content: '';
  height: 882px;
  width: 182px;
}*/

.storyslidermodal.modal.show .modal-dialog{
  top:0 !important;
  max-width:1370px;
}

.storyslidermodal .carousel-control-next, .storyslidermodal .carousel-control-prev{
  width:5%;
}

.storyslidermodal .modal-body{
  overflow:hidden;
}

/*story details ends*/

#wp-submit, #generate-otp{
  font-family: Poppins;
  font-size: 17px;
  font-weight: 600;
  line-height: 25.5px;
  color: #fff;
  padding: 14px 60px;
  background-color: #1AB59C;
  border-radius: 36px;
}

/*quiz*/

.quiz_banner{
  background: url(../images/quiz-page-banner.jpg) no-repeat center;
  background-size:cover;
  padding:70px 0;
}

.quiz_banner h1{
  font-family: "Margarine", sans-serif;
  font-weight: 400;
  font-size:90px;
  width:100%;
  position: relative;
  margin-left:auto;
  margin-right:auto;
}

.quiz_banner p{
  max-width: 30%;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
}

.quiz, .quiz2{
  padding:75px 0;
  position:relative;
}

.quiz-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 99;
}

.question h3 {
  color: #e91e63;
  font-size: 18px;
  margin-bottom: 20px;
}
.question h3 span{
  background: url(../images/question-bg.png) no-repeat;
  width:80px;
  height:48px;
  padding:11px 11px;
  display:inline-block;
  vertical-align: top;
  /* font-family: "Margarine", sans-serif; */
  font-family: "Poppins", sans-serif;
  color: #0C000A;
}
.question h3 .text{
  display: inline-block;
  width:calc(100% - 59px);
  background:none;
  vertical-align: top;
  line-height: 38px;
  margin:0;
  padding:0 13px;
  font-family: "Margarine", sans-serif;
  color: #B62CA4;
  font-size: 27px;
  height: auto;
}
.quizQuestion .options label {
  flex: 1;
  /* font-family: "GillSansHeavy"; */
  font-family: "Poppins", sans-serif;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.quizQuestion .form-check {
  display: flex;
  align-items: start;
}

.options{
  margin-left:143px;
}
.options label {
  color: #000;
  font-family: "Margarine", sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 180.3%; /* 34.257px */
  margin-bottom:14px;
  margin-left:6px;
}
.options .form-check-label span{
  background: #E1E1E1;
  padding: 3px 6px 3px 9px;
  border-radius: 6px;
  border: 1px solid #E1E1E1;
  background: #E6E6E6;
  margin-right:10px;
}
.options .form-check-input {
  margin-right: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 25px;
  width: 25px;
  transition: all 0.15s ease-out 0s;
  background: #fff;
  border: 1px solid #7d7d7d;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1;
}
.options .form-check-input:checked{
  background:url(../images/checked.png) no-repeat center;
}
.options .form-check-input:checked + .form-check-label{
  color: #751168;
}
.options .form-check-input:checked + .form-check-label span{
  border: 1px solid #FEA7F3;
  background: #FCD3E2;
}
.options .form-check-input:focus{
  box-shadow:none;
}
.continue-btn {
  background: #DE54CC;
  color: #fff;
  border: none;
  padding: 15px;
  font-size: 18px;
  border-radius: 50px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: flex; 
  max-width:386px;
  justify-content: center;
  margin:auto;
}


.quiz .continue-btn {
  max-width: 156px;
}


a.continue-btn{
  color: #fff !important;
}

.continue-btn:hover {
  background-color: #d81b60;
  color: #fff;
}

.continue-btn2 {
  background: #DE54CC;
  color: #fff;
  border: none;
  padding: 15px 40px;
  font-size: 18px;
  border-radius: 50px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: flex; 
 /* max-width:277px;
  justify-content: center;
  margin:auto;*/
}
.continue-btn2:hover {
  color:#fff;
}

.quiz::before{
  background: url(../images/img-before.png) no-repeat left;
  position: absolute;
  left:0;
  top:0;
  content:'';
  max-height:1101px;
  height: 100%;
  width:182px;
}

.quiz::after{
  background: url(../images/img-after.png) no-repeat right;
  position: absolute;
  right:0;
  top:0;
  content:'';
  max-height:1101px;
  height: 100%;
  width:204px;
}

/*quiz ends*/


/*result*/

.result_banner h2 .head-break {
  display: block;
  font-family: Poppins;
  font-size: 23px;
  font-weight: 600;
  line-height: 27.44px;
  text-align: left;
  margin-bottom: 15px;
}
.result_banner h2 .result-score-highlight{
  color: #02a09a;
}
.result_banner h2 .score-out-of {
  font-size: 28px;
  font-weight: 300;
}
.result_banner h1{
  font-family: "Margarine", sans-serif;
  font-weight: 400;
  font-size:78px;
  width:100%;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  color: #B62CA4;
}

.result_banner p{
  max-width: 30%;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  color:#ed3030;
  font-size: 18px;
}

.result_banner h2{
  color: #000;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 33px;
  font-weight: 900;
  line-height: 126.2%; /* 41.646px */
  text-transform: capitalize;
}

.result .answer{
  border-radius: 10px;
  /* background: #FFF; */
  border: 2px solid #FF5F5F;
  /* background-image: linear-gradient(90deg, rgba(255, 0, 4, 0.36) 1%, rgba(134, 9, 190, 0) 69%, rgba(255, 0, 4, 0.36) 100%); */
  box-shadow: 0px 9px 16px 0px rgba(0, 0, 0, 0.07);
  padding:9px 29px;
  display: flex;
  margin-bottom:18px;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s ease;
  flex-wrap: wrap;
}

.answer.open {
  background-color: #f9f9f9;
}

.accordion-content {
  width: 100%;
  padding-left: 78px;
  padding-top: 20px;
  padding-bottom:20px;
  line-height: 24px;
}

.result .correctAns {
  border-color: #00F923;
  /* background: linear-gradient(90deg, rgba(32, 212, 57, 0.36) 1%, rgba(134, 9, 190, 0.00) 69%, rgba(32, 212, 57, 0.36) 100%); */

}

.result .answer .number{
  color: #000;
  /* font-family: "Margarine", sans-serif; */
  font-family: "Poppins", sans-serif;
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: 145.3%; /* 37.778px */
  background:#F2E4E4;
  padding:12px 16px;
  border-radius:50%;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}
.result .answer .questBox_wrap {
  width: calc(100% - 50px);
  padding-left: 27px;
  display: flex;
  align-items: center;
}
.result .answer .quest{
  color: #000;
  /* font-family: "Margarine", sans-serif; */
  font-family: "Poppins", sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 145.3%; /* 45.043px */
  width: calc(100% - 99px);
  word-break: break-word;
  padding-right: 10px;
}

.qt_btnBox {
  width: 99px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}
.qt_btnBox .result_act_btn {
  width: 42px;
}
.qt_btnBox .result_act_btn > button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
.qt_btnBox .result_act_btn > button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .result .answer .correct .correct {
  margin-right: 0px;
} */
/* .quiz-modal-main .modal-content .modal-header {
  height: 25px;
  width: 25px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  right: 6px;
  z-index: 9;
  top: 6px;
} */
.quiz-modal-main .modal-content .modal-header{
  border: none;
}

/* .quiz-modal-main .modal-content .modal-header button.btn-close {
  padding: 8px 10px;
  margin-left: -8px;
  filter: invert(1);
  opacity: 1;
} */

.quiz-modal-main .modal-content .modal-header button.btn-close{
  padding: 8px 10px;
  margin-left: 0px;
  filter: invert(0);
  opacity: 1;
  top:4px;
  right:4px;
  font-size: 22px;
  background-color: transparent;
  border: none;
}
.quiz-modal-main .modal-body {
  padding: 50px 40px 50px;
}

.result .answer .correct{
  display:flex;
  justify-content: start;
  margin-right: 4px;
  align-items: center;
  width: 42px;
}

.result .answer .correct .btn {
  padding: 0px;
}

.result .answer .correct img{
  width:42px;
  height:42px;
}

/*result ends*/

/*dashboard*/

.dashboard-explore-tl{
  display: inline-flex;
  flex-wrap: wrap;
  max-width:83%;
}

.dashboard-explore-filter-section{
  display: inline-flex;
  max-width:17%;
  flex-wrap: wrap;
}

.dashboard-explore-filter-section .filter-box{
  display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid #8C8C8C;
    background-color: #FDF9F9;
    transition: 500ms;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 19px;
    min-height: 58px;
    min-width: 190px;
    padding: 10px 16px;
    transition: 500ms;
}

.dashboard-btn{
  position: absolute;
  bottom:45px;
  left:0;
  right:0;
  margin:auto;
  width:117px;
  color:#B62CA4;
  border:0px;
  background-color:#fff;
  color: #B62CA4;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.dashboard-filter-btn{
    display: inline-flex;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #8C8C8C;
    background-color: #FDF9F9;
    transition: 500ms;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 19px;
    min-height: 58px;
    min-width: 190px;
    padding: 10px 16px;
    transition: 500ms;
    padding-right: 30px;
    background: url(../images/right-arrow.svg) no-repeat right 10px center;
    background-size: 14px auto;
}

.dashboard-filter-btn:focus{
  border:1px solid #8C8C8C;
}

/* .modal.show .modal-dialog{
  top:25%;
} */

.modal-header{
  border-bottom:0px;
}

/* .modal-dialog .btn{
  border-radius:0px;
} */

#exampleModal .form-control{
  padding:12px 17px;
}

#exampleModal h5{
  color: #000;
  font-family: 'GillSans';
  font-size: 28px;
  font-weight: 500;
  line-height: 138.182%; /* 38.691px */
  text-transform: capitalize;
}

#exampleModal .input-group-append .btn{
  padding-top:12px;
  padding-bottom:12px;
  border-radius:0 .375em .375em 0;
}

#exampleModal .input-group-append .btn img{
  height:21px;
}

#exampleModal .modal-footer{
  border-top:0px;
  text-align: center;
  justify-content: center;
  padding-top:0;
}

#exampleModal .modal-footer .btn{
  border-radius:36px;
  min-width:150px;
  padding:8px;
}

#exampleModal hr{
  margin:3rem 0 0;
}

/*dsashboard ends*/

/*profile*/

.profile_banner{
  background: url(../images/banner-bg.jpg) no-repeat center;
  background-size:cover;
  padding:70px 0;
}

.profile_banner h1{
  font-family: "Margarine", sans-serif;
  font-weight: 400;
  font-size:70px;
  width:100%;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  color:#B62CA4;
}

.profile_banner img{
  width:23%;
}

.profile_banner h4{
  color: #1D1766;
  text-align: center;
  font-family: "Margarine", sans-serif;
  font-size: 27px;
  font-style: normal;
  font-weight: 400;
  line-height: 125.3%; /* 33.831px */
  margin-top:0;
}

.profile{
  padding:75px 0;
  position:relative;
}

.profile-container {
  max-width: 1000px;
  margin: 0 auto;
}

.profile-container .outer_box{
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.11);
  position: relative;
}

.profile-container .outer_box .profile_header{
  border-radius: 5px 5px 100px 0px;
  background: #B62CA4;
  height:136px;
  position:relative;
  text-align: center;
}

.profile-container .outer_box .profile_header img{
  width:158px;
  height:158px;
  border-radius:50%;
  box-shadow:0px 4px 24px rgba(0, 0, 0, 0.15);
  border:12px solid #fff;
  position:absolute;
  left:0;
  right:0;
  top:28px;
  margin:auto;
}

.profile-container .outer_box .profile_body{
  padding:70px 53px;
}

.profile-container .outer_box .profile_body label{
  color: #B62CA4;
  font-family: "Margarine", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 180.3%; /* 43.272px */
  text-transform: capitalize;
}

.profile-container .outer_box .profile_body h4{
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 26px;  
  font-weight: 400;
  line-height: normal;
  margin-top:0;
  text-transform: capitalize;
}

.profile-container .outer_box .profile_body textarea{
  resize:none;
}

/*.profile::before{
  background: url(../images/profile_left_bg.png) no-repeat left;
  position: absolute;
  left:0;
  top:0;
  content:'';
  height:897px;
  width:372px;
}

.profile::after{
  background: url(../images/profile_right_bg.png) no-repeat right;
  position: absolute;
  right:0;
  top:0;
  content:'';
  height:897px;
  width:204px;
}*/

.edit_button{
  border-radius: 36px;
  background: #DE54CC;
  color: #FFF;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  padding:14px 60px;
  width:219px;
}

.edit_button:hover{
  background:#e638cf;
  color:#fff;
}

.buttons{
  position: absolute;
  left:0;
  right:0;
  bottom:-35px;
  margin:auto;
  display: flex;
  justify-content: center;
}

.buttons .cancel_button{
  border-radius: 36px;
  background: #483646;
  color: #FFF;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  padding:14px 60px;
  width:219px;
}

.buttons .mr-5{
  margin-right:25px;
}

.profile :hover{
  cursor: pointer;
}
/*profile ends*/

/*otp*/

#otp input[type="text"]{
  height:80px;
  width:80px;
}

#otp input.form-control{
  height:74px;
}

/*otp ends*/

.favorite-button{
  width: 15% !important;
}

/*ratings or review*/

#ratings input {
  display: none;
}
#ratings label {
  cursor: pointer;
  font-size: 40px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffe61c+0,ffa929+100 */
  background: linear-gradient(to bottom,  rgba(255,230,28,1) 0%,rgba(255,169,41,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 60px;
  text-align: center;
  float: left;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;

}
#ratings label:hover {
  font-size: 42px;
  color: #fff;
}
#ratings label:before {
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  margin-top: 0;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  content: "\f005";
} 
#ratings input:checked + label ~ label:before {
  content: "\f006";
}
#ratings {
  display: inline-block;
  margin-bottom: 1em !important;
}
 #ratings:hover label:before {
  content: "\f005";
}
#ratings label:hover ~ label:before {
  content: "\f006";
}

.question h4{
  color: #B62CA4;
  font-family: "Margarine", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 145.3%; /* 39.231px */
}

.review{
  padding:75px 0;
}

.review .options label{
  font-family: "Margarine", sans-serif;
  font-size: 27px;
  font-weight: 400;
  margin-bottom: 14px;
  margin-left: 6px;
  color: #1AB59C;
  line-height: 145.3%; /* 39.231px */
}

.review .options textarea{
  resize:none;
  border: 1px solid #1AB59C;
  border-radius:10px;
  background: #FFF5FE;
}

.submit-btn{
  border-radius: 136px;
  /*background: #DE54CC;*/
  color: #FFF;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  padding:15px 40px;
  border:0px;
  line-height: inherit;
  /* background: #1AB59C; */
}
#review_sec_story .submit-btn{
  background: #1AB59C;
} 
#story-rating-form-popup button{
  background: #1AB59C;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: 0.794rem;
    letter-spacing: 0.15em;
    border: none;
    padding:17px 46px;
    border-radius: 40px;
}

#story-rating-form h4, #storyslidermodalinner1 h4, #storyslidermodalinner2 h4{
    color: #0C0C0C;
    font-size: 88px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -3px;
}

#story-rating-form h4 {
    /* margin-bottom: 38px !important; */
}

#story-rating-form .options label, #storyslidermodalinner1 .options .form-group label, #storyslidermodalinner2 .options .form-group label{
   font-family: "Coiny", system-ui;
  font-size: 27px;
  font-weight: 400;
  margin-bottom: 14px;
  margin-left: 6px;
  color: #1AB59C;
  line-height: 145.3%
}

#story-rating-form .options textarea, #storyslidermodalinner1 .options textarea, #storyslidermodalinner2 .options textarea{
  resize: none;
  border: 1px solid #1AB59C;
  border-radius: 10px;
  background: #FFF5FE;
}


/*rating or review ends*/

/* search result start */

.search-result-main p {
  font-size: 22px;
  margin-bottom: -20px;
  margin-top: 30px;
  color: #949494;
}

.search-result-main{
  padding:100px 0px;
  text-align: center;
  background:url('https://learnie.twebexponent.co.uk/wp-content/themes/learnie/assets/images/banner-bg.jpg')no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.search-result-main .explore-section {
  display: block;
  background-color: transparent;
  padding: 0px 0;
}

.need-to-login{
  padding:100px 0px;
  text-align: center;
  background:url('https://learnie.twebexponent.co.uk/wp-content/themes/learnie/assets/images/banner-bg.jpg')no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  min-height: 450px;
}
.need-to-login .subscription_link h2 {
  margin: 20px 0px;
}
.search-result-main h5 {
  margin-top: 12px;
  color: #b62ca4;
  font-size: 28px;
}
.search-result-main img.result-thumb, .search-result-main img.no-result-thumb, .explore-section .subscription_link img {
  max-height: 250px;
}



/* search result end */

/* custom quiz start */

div#customQuiz{
  position: relative;
  min-height: 300px;
}

div#customQuiz .owl-nav button.owl-next::before {
  content: 'Continue';
  height: 46px;
  position: absolute;
  align-items: center;
  background: #DE54CC;
  color: #fff;
  border: none;
  padding: 15px;
  font-size: 18px;
  border-radius: 50px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: flex;
  width: 156px;
  justify-content: center;
  margin: 0 auto !important;
  bottom: -46px;
  left: 0;
  right: 0;
}
/* div#customQuiz .owl-nav button.owl-next:hover::before, div#customQuiz .owl-carousel .owl-nav .owl-next {
  cursor: not-allowed;
  pointer-events: none;
}

div#customQuiz .owl-nav.deablebuttonOwl button.owl-next::before{
  background: #DE54CC;
}
div#customQuiz .owl-nav.deablebuttonOwl button.owl-next::before{
  cursor: pointer;
  pointer-events: auto;
} */

div#customQuiz button.owl-prev, #customQuiz .owl-nav button.owl-next.disabled, div#customQuiz button.owl-next span{
  display: none;
}
#customQuiz .question h3 {
  display: inline-flex;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
  align-items: baseline;
}

#customQuiz .question h3 .text {
  display: inline-block;
  width: auto;
  line-height: 38px;
  margin: 0 0 20px;
  padding: 0 13px;
  font-size: 27px;
  font-weight: 600;
  height: auto;
  font-family: "Poppins", sans-serif;
}

#customQuiz .question {
  min-height: 250px;
}


.video-rating .df-container>.df-ui-next, .video-rating .df-container>.df-ui-prev {
  opacity: 1;
  color: #ffffff;
}

.quiz-modal-main h2{
  font-family: "Margarine", sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 72.65px;
  text-align: center;
  color:#B62CA4;
}
.quiz-modal-main p{
  font-size: 22px;
  font-weight: 400;
  line-height: 39.67px;
  text-align: center;
  color: #000000;
}
.quiz-modal-main {
  text-align: center;
}
a.quiz-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #DE54CC;
  padding: 2px 36px;
  margin-top: 30px;
  border-radius: 40px;
  color: #fff;
  font-size: 27px;
  font-weight: 500;
  line-height: 40.5px;
}
.quiz-modal-main .modal-content .modal-header{
  background: none !important;
}

.video-rating-child-thumb, .video-rating-child-thumb img {
  display: flex;
  align-items: end;
  position: relative;
  bottom: -38px;
  overflow: hidden;
}
.video-rating-child h4 {
  color: #fff !important;
}
.video-rating input.form-control {
  height: 58px;
  border-radius: 10px;
    border: 1px solid #E100FF;
    background: #FFF;
}
.video-rating-parents {
  padding: 60px 0px;
}
.imgbox {
  display: inline-block;
  overflow: visible;
  position: relative;
  width:100%;
}
/* .video-rating-child #ratings label:nth-child(8):before, .video-rating-child #ratings label:last-child:before{
  content: "\f006" !important;
} */

.submit-btn-sec .submit-btn-info h4 {
    margin: 0px !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 140% !important;
    color: #3AB390 !important;
    letter-spacing: 0px !important;
    margin: 0px !important;
    margin-bottom: 0px !important;
}

.profile-selection {
    background: url(/wp-content/themes/learnie/assets/images/select-profile-bg.png) no-repeat !important;
}