body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/*Global*/
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  outline: none;
}
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
  scroll-behavior: smooth;
  scroll-padding: 50px;
}
.w5{
  width: 5%;
  min-height: 1px;
  overflow: hidden;
}
.w10{
  width: 10%;
  min-height: 1px;
  overflow: hidden;
}

.w65{
  width: 65%;
  min-height: 1px;
  overflow: hidden;
}
.w15{
  width: 12%;
  min-height: 1px;
  overflow: hidden;
}
.w16{
  width: 16.66%;
  min-height: 1px;
  overflow: hidden;
}

.w85{
  width: 85%;
  min-height: 1px;
  overflow: hidden;
}

.w45{
  width: 45%;
  min-height: 1px;
  overflow: hidden;
}
.w55{
  width: 55%;
  min-height: 1px;
  overflow: hidden;
}
.w98{
  width: 98%;
  min-height: 1px;
  overflow: hidden;
}
.w18{
  width: 18%;
  min-height: 1px;
  overflow: hidden;
}
.w20{
  width: 20%;
  min-height: 1px;
  overflow: hidden;
}
.w25{
  width: 25%;
  min-height: 1px;
  overflow: hidden;
}
.w30{
  width: 30%;
  min-height: 1px;
  overflow: hidden;
}
.w35{
  width: 35%;
  min-height: 1px;
  overflow: hidden;
}
.w33{
  width: 33.3%;
  min-height: 1px;
  overflow: hidden;
}
.w40{
  width: 40%;
  min-height: 1px;
  overflow: hidden;
}
.w50{
  width: 50%;
  min-height: 1px;
  overflow: hidden;
}
.w60{
  width: 60%;
  min-height: 1px;
  overflow: hidden;
}
.w70{
  width: 70%;
  min-height: 1px;
  overflow: hidden;
}
.w75{
  width: 75%;
  min-height: 1px;
  overflow: hidden;
}
.w80{
  width: 80%;
  min-height: 1px;
  overflow: hidden;
}
.w90{
  width: 90%;
  min-height: 1px;
  overflow: hidden;
}
.w95{
  width: 95%;
  min-height: 1px;
  overflow: hidden;
}
.w94{
  width: 94%;
  min-height: 1px;
  overflow: hidden;
}
.w96{
  width: 96%;
  min-height: 1px;
  overflow: hidden;
}
.w98{
  width: 98%;
  min-height: 1px;
  overflow: hidden;
}
.container{
  width: 100%;
  min-height: 1px;
  overflow: hidden;
}
section{
    margin: 0 0 0 0;
    float: left;
    width: 100%;
}
.float-left{
    float: left;
}
.float-right{
    float: right;
}
.float-center{
    margin: 0 auto;
}
.left-text{
    text-align: left;
}
.right-text{
    text-align: right;
}
.center-text{
    text-align: center;
}
.justify-text{
    text-align: justify;
}
.red-txt{
    color: red;
}
.overflow-visible{
    overflow: visible;
}
.overflow-auto{
    overflow: auto;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.my100{
    width: 100%;
}
.my90{
    width: 90%;
}
.my95{
    width: 95%;
}
.my80{
    width: 80%;
}
.my35{
    width: 35%;
}
.my30{
    width: 30%;
}
.my60{
  width: 60%;
}
.my50{
  width: 50%;
}
.my40{
  width: 40%;
}
.my25{
    width: 25%;
}
.maxwidth{
    max-width: 1500px;
    margin: 0 auto;
}
.maxwidth2{
  max-width: 1300px;
  margin: 0 auto;
}
.my35{
    width: 35%;
}

/********************************description ************************************/
.description-box {
  margin: 10px auto;
  display: block;
  position: relative;
  z-index: 1;
}
.description-box h1{
  font-size: 25px;
  color: rgba(0,0,0,0.8);
}
.description-box h2{
  font-size: 23px;
  color: rgba(0,0,0,0.8);
}
.description-box h3{
  font-size: 21px;
  color: rgba(0,0,0,0.8);
}
.description-box h4{
  font-size: 19px;
  color: rgba(0,0,0,0.8);
}
.description-box h5{
  font-size: 17px;
  color: rgba(0,0,0,0.8);
}
.description-box p{
  color: rgba(0,0,0,0.8);
  font-size: 14px;
  line-height: 25px;
}
.description-box a{
  text-decoration: underline;
  color: #179ED5;
  font-size: 14px;
}
.description-box img{
  width: 100%;
  object-fit: contain;
}
.description-box ul{
  margin-left: 25px;
  color: rgba(0,0,0,0.8);
}
.description-box li{
  padding: 5px 0;
  font-size: 14px;
}
.description-box ol{
  margin-left: 25px;
  color: rgba(0,0,0,0.8);
}
.description-box table{
  border-collapse: collapse;
  width: 100%;
}
.description-box td{
  border: 1px solid rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.6);
  font-size: 14px;
  text-align: left;
}
.description-box th{
  border: 1px solid rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.8);
  font-size: 14px;
  text-align: left;
}
#tab2 tr td:nth-child(odd){
  font-weight: bold;
}
.description-box .bg-text p{
  font-size: 7vw;
  color: #2E2E3A;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 7vw;
  
}
.description-box .bg-text{
  z-index: -1;
  bottom: 80px;
}


    /*
 * CKEditor 5 (v35.1.0) content styles.
 * Generated on Wed, 07 Sep 2022 05:15:42 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
 */

 :root {
  --ck-color-image-caption-background: hsl(0, 0%, 97%);
  --ck-color-image-caption-text: hsl(0, 0%, 20%);
  --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
  --ck-color-mention-text: hsl(341, 100%, 30%);
  --ck-color-table-caption-background: hsl(0, 0%, 97%);
  --ck-color-table-caption-text: hsl(0, 0%, 20%);
  --ck-highlight-marker-blue: hsl(201, 97%, 72%);
  --ck-highlight-marker-green: hsl(120, 93%, 68%);
  --ck-highlight-marker-pink: hsl(345, 96%, 73%);
  --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
  --ck-highlight-pen-green: hsl(112, 100%, 27%);
  --ck-highlight-pen-red: hsl(0, 85%, 49%);
  --ck-image-style-spacing: 1.5em;
  --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
  --ck-todo-list-checkmark-size: 16px;
}
.mention{ font-weight: bold; color: #3498db; }
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content a{
  color: #000000;
}
.ck-content blockquote {
  overflow: hidden;
  padding-right: 1.5em;
  padding-left: 1.5em;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  border-left: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
  border-left: 0;
  border-right: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
  background-color: hsla(0, 0%, 78%, 0.3);
  padding: .15em;
  border-radius: 2px;
}
.ck-content img{
  display: inline-block;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
  background-color: var(--ck-highlight-marker-yellow);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
  background-color: var(--ck-highlight-marker-green);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
  background-color: var(--ck-highlight-marker-pink);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
  background-color: var(--ck-highlight-marker-blue);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
  color: var(--ck-highlight-pen-red);
  background-color: transparent;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
  color: var(--ck-highlight-pen-green);
  background-color: transparent;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
  font-size: .7em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
  font-size: .85em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
  font-size: 1.4em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
  font-size: 1.8em;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image {
  display: table;
  clear: both;
  text-align: center;
  margin: 0.9em auto;
  min-width: 50px;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  min-width: 100%;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline {
  /*
   * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
   * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
   * This strange behavior does not happen with inline-flex.
   */
  display: inline-flex;
  max-width: 100%;
  align-items: flex-start;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline picture {
  display: flex;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline picture,
.ck-content .image-inline img {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 100%;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
  display: table-caption;
  caption-side: bottom;
  word-break: break-word;
  color: var(--ck-color-image-caption-text);
  background-color: var(--ck-color-image-caption-background);
  padding: .6em;
  font-size: .75em;
  outline-offset: -1px;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
  width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
  display: block;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right {
  max-width: calc(100% - var(--ck-image-style-spacing));
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right {
  clear: none;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
  float: right;
  margin-left: var(--ck-image-style-spacing);
  max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
  float: left;
  margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
  float: right;
  margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-right {
  margin-right: 0;
  margin-left: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content p + .image-style-align-left,
.ck-content p + .image-style-align-right,
.ck-content p + .image-style-side {
  margin-top: 0;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
  margin-top: var(--ck-inline-image-style-spacing);
  margin-bottom: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left {
  margin-right: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-right {
  margin-left: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-language/theme/language.css */
.ck-content span[lang] {
  font-style: italic;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
  list-style: none;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li {
  margin-bottom: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li .todo-list {
  margin-top: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input {
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  width: var(--ck-todo-list-checkmark-size);
  height: var(--ck-todo-list-checkmark-size);
  vertical-align: middle;
  border: 0;
  left: -25px;
  margin-right: -15px;
  right: 0;
  margin-left: 0;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::before {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content: '';
  width: 100%;
  height: 100%;
  border: 1px solid hsl(0, 0%, 20%);
  border-radius: 2px;
  transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::after {
  display: block;
  position: absolute;
  box-sizing: content-box;
  pointer-events: none;
  content: '';
  left: calc( var(--ck-todo-list-checkmark-size) / 3 );
  top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
  transform: rotate(45deg);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::before {
  background: hsl(126, 64%, 41%);
  border-color: hsl(126, 64%, 41%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
  border-color: hsl(0, 0%, 100%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
  vertical-align: middle;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
  clear: both;
  margin: 0.9em 0;
  display: block;
  min-width: 15em;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
  position: relative;
  clear: both;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
  content: '';
  position: absolute;
  border-bottom: 2px dashed hsl(0, 0%, 77%);
  width: 100%;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break__label {
  position: relative;
  z-index: 1;
  padding: .3em .6em;
  display: block;
  text-transform: uppercase;
  border: 1px solid hsl(0, 0%, 77%);
  border-radius: 2px;
  font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  font-size: 0.75em;
  font-weight: bold;
  color: hsl(0, 0%, 20%);
  background: hsl(0, 0%, 100%);
  box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table .ck-table-resized {
  table-layout: fixed;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table table {
  overflow: hidden;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table td,
.ck-content .table th {
  position: relative;
}
/* ckeditor5-table/theme/tablecaption.css */
.ck-content .table > figcaption {
  display: table-caption;
  caption-side: top;
  word-break: break-word;
  text-align: center;
  color: var(--ck-color-table-caption-text);
  background-color: var(--ck-color-table-caption-background);
  padding: .6em;
  font-size: .75em;
  outline-offset: -1px;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table {
  margin: 0.9em auto;
  display: table;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: max-content;
  height: 100%;
  border: 1px double hsl(0, 0%, 70%);
  margin: 0 auto;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
  min-width: 2em;
  padding: .4em;
  border: 1px solid hsl(0, 0%, 75%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table th {
  font-weight: bold;
  background: hsla(0, 0%, 0%, 5%);
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
  text-align: right;
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
  text-align: left;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
  padding: 1em;
  color: hsl(0, 0%, 20.8%);
  background: hsla(0, 0%, 78%, 0.3);
  border: 1px solid hsl(0, 0%, 77%);
  border-radius: 2px;
  text-align: left;
  direction: ltr;
  tab-size: 4;
  white-space: pre-wrap;
  font-style: normal;
  min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
  background: unset;
  padding: 0;
  border-radius: 0;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
  margin: 15px 0;
  height: 4px;
  background: hsl(0, 0%, 87%);
  border: 0;
}
/* ckeditor5-mention/theme/mention.css */
.ck-content .mention {
  background: var(--ck-color-mention-background);
  color: var(--ck-color-mention-text);
}
@media print {
  /* ckeditor5-page-break/theme/pagebreak.css */
  .ck-content .page-break {
      padding: 0;
  }
  /* ckeditor5-page-break/theme/pagebreak.css */
  .ck-content .page-break::after {
      display: none;
  }
}
.ck-content img{
  max-width:100%;
  object-fit:contain;
}
.ck-content ol, .ck-content ul{
  margin-left:20px;
}
.ck-content p, .ck-content ul,.ck-content ol,.ck-content td{
  font-size:14px;
  color:rgba(0,0,0,0.8);
  /* line-height:25px; */
}
.ck-content .image_resized{
  bottom:-2px;
  position:relative;
}
.ombedEmbed{
      padding: 50px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .ombedEmbed.fbembed{
      background-color: #475A96;
  }
  .ombedEmbed.googleEmbed{
      background-color: #fafafa;
  }
  .ombedEmbed.twitterEmbed{
      background: linear-gradient(90deg,#71c6f4,#0d70a5);
  }
  .ombedEmbed.instagramEmbed{
      background: linear-gradient(-135deg,#1400c7,#b800b1,#f50000);
  }
  .ombedEmbed.whatsappEmbed{
      background: #2BD769;
  }
  
  .ombedEmbed.pinterestEmbed{
      background: #B7081B;
  }
  .ombedEmbed.youtubeEmbed{
      background: #e11c1c;
  }
  .ombedEmbed.googleEmbed a{
      color: rgba(0,0,0,0.6);
  }
  .ombedEmbed a{
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 90%;
  }
  .embedIframe{
      object-fit: contain;
      border: 0;
      width: 100%;
      margin: 0 auto;
      height: 500px;
  }
  .ombedEmbed:hover a{
      color: #FFF;
      text-decoration: underline;
  }
  .ombedEmbed.googleEmbed:hover a{
      color: rgba(0,0,0,1);
  }
  figure.table{
      max-width: 100%;
      overflow: auto;
      display: block!important;
  }
  .ck-content iframe{
    width: 100%;
    /* height: 400px!important; */
    border: 0;
  }
  .ck-content  figure.media{
    text-align: center;
  }
/********************************description end************************************/
:root {
--bggradient: linear-gradient(to bottom,#c9cfff, #5A67CA);
--mainheading : 40px;
--maincolorred : #fd0000;
--maincolorredbg :#ffe4e4;
--para : 14px;
--subheading : 18px;
--maincolor : #000173;
--maincolorlight: #c9cfff;
--mylight: #F6F6F9;
--textmaincolor: #5e6cdb;
--secondarycolor :#ff740a;
--color8 : rgba(0,0,0,0.8);
--color6 : rgba(0,0,0,0.6);
--color1 : rgba(0,0,0,0.1);
--color5 : rgba(0,0,0,0.5);
--color2 : rgba(0,0,0,0.2);
--box1 : 0 0 10px rgba(0,0,0,0.1);
--box1_5 : 0 0 5px rgba(0,0,0,0.1);
--box2 : 0 0 10px rgba(0,0,0,0.2);
--box2_5 : 0 0 5px rgba(0,0,0,0.2);
--lightbg :#EBEDF5;
--lightbg2 :#d5d9f7;
--lightwhite:#F1F3F6;
}
.owl-nav .owl-prev{
  position: absolute;
  left: 0px;
}
.owl-nav button{
  top: 50%;
  transform: translateY(-50%);
}
.owl-nav button span{
  font-size: 28px;
}
.blogscards .owl-nav button span{
  background: var(--maincolor);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.blogscards .owl-nav .owl-next{
  right: -30px;
}
.blogscards .owl-nav .owl-prev{
  left: -30px;
}
.owl-nav .owl-next{
  position: absolute;
  right: 0px;
}
.owl-theme .owl-nav{
  margin: 0!important;
}
.owl-theme .owl-nav button{
  margin: 0!important;
}
.owl-theme .owl-nav [class*='owl-']:hover{
  background: transparent;
  color: inherit;
}
/* ************************menu************************** */
.pc_hide{
  display: none;
}
.menurk{
  position: sticky;
  position: -webkit-sticky;
  width: 100%;
  transition: .5s;
  float: left;
  top:0px;
  z-index: 1049;
  overflow: visible;
}
.menurk .topbarbox svg{
  height: 15px;
  width: 15px;
  fill: #fff;
  position: relative;
  top: 2px;
}
.topbarbox .contact-side svg{
  margin-right: 5px;
}
.newtop-bar{
  background:var(--maincolorlight);
  transition: .5s;
  position: relative;
}
.menurk .topbarbox{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbarbox ul{
  list-style-type: none;
  display: flex;
  align-items: center;
}
.topbarbox li{
  float: left;
  padding: 10px 0;
  margin-right: 15px;
}
.topbarbox li a{
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.menulinks-box{
  background: var(--maincolor);
  padding: 10px 0;
  overflow: visible;
  float: left;
  display: flex;
  justify-content: center;
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
}
.mobile-menu-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-logo{
  /*margin: 10px 0;*/
  width: 200px;
}
.mobile-logo img{
  width: 100%;
  object-fit: contain;
}
.linkbox ul{
  list-style-type: none;
  display: flex;
  align-items: center;
  /* flex-wrap: wrap; */
}
.linkbox li{
  float: left;
  padding: 5px 10px;
  margin-left: 0px;
  transition: .5s;
  border-radius: 5px;
  position: relative;
  overflow: visible;
  color: #fff;
  white-space: nowrap;
}
.linkbox li a{
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  transition: .5s;
}
.linkbox li svg{
  height: 15px;
  width: 15px;
  color: #fff;
  position: relative;
  top: 2px;
}
.dropdown{
  position: absolute;
  width: 250px;
  background: #fff;
  border-radius: 10px;
  top: 100%;
  left: 0%;
  box-shadow:var(--box1);
  display: none;
  overflow: hidden;
}
.linkbox li:hover .dropdown{
  display: block;
}
.dropdown li{
  padding: 0;
  color: var(--color8);
  width: 100%;
}
.dropdown li a{
  color: var(--color8);
}
.dropdown ul{
  flex-wrap: wrap;
}
.dropdown li a{
  width: calc(100% - 10px);
  padding: 10px 10px 10px 0px;
  display: flex;
  align-items: center;
  transition: .2s;
}
.dropdown li a:hover .circleact{
  transform: scale(1);
}
.dropdown li a:hover{
  width: calc(100% - 20px);
  padding-left: 10px;
  color: var(--maincolor);
  background: var(--lightbg);
}
.mid-search input{
  width: calc(100% - 50px);
  padding: 10px 20px;
  border: none;
  float: left;
  border-radius:30px 5px 5px 30px;
  position: relative;
  z-index: 2;
  background: transparent;
}
.mid-search{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.mid-search .formmenusearch{
  width: calc(100% - 10px);
  border: .5px solid #fff;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 5px;
  position: relative;
  z-index: 9;
  border-radius: 30px;
}
.mid-search button {
  background: none;
  border: none;
  width: 50px;
  float: left;
  display: flex;
  align-items: center;
  padding: 2px 2px 2px 0;
  justify-content: flex-end;
  cursor: pointer;
}
.mid-search button svg{
  padding: 8px;
  height: 20px;
  width: 20px;
  background: var(--textmaincolor);
  border: .5px solid var(--textmaincolor);
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
  border-radius: 50%;
}
.cart-hover:hover svg{
  color: #fff;
}
.loginbutton{
  background: var(--textmaincolor);
  margin-left: 5px!important;
}
.cart-drop{
  position: absolute;
  top: 100%;
  left: -280px;
  width: 350px;
  border-radius: 5px;
  background: #fff;
  padding: 10px 0 0 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: none;
  z-index: 999;
  border: 1px solid rgba(0,0,0,0.1);
}
.cart-drop .freetag{
  font-size: 12px!important;
  line-height: 20px;
  height: 20px;
}
.cart-drop .freetag::before{
  top: 7px;
}
.cart-drop .freetag::after{
  border-bottom:10px solid transparent;
  border-top:10px solid transparent;
}
.cart-itemimg{
  width: 90%;
  margin: 0 auto;
}
.defcartlogo{
  background: var(--maincolor);
  height: 70px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.defimg{
  background: var(--maincolor);
  height: 100px;
  border-radius: 5px;
}
.defimg img{
  height: 100%;
}
.cart-itemimg img{
  width: 100%;
  object-fit: contain;
}
.cart-hover:hover .cart-drop a{
  color: rgba(0,0,0,0.8);
}
.cart-card{
  border-bottom: .5px solid rgba(0,0,0,0.05);
  padding: 10px 0;
}
/* .cart-card:first-child{
  border: none;
} */
.cart-card:hover .prod-name p{
  color: var(--textmaincolor);
}
.cart-card a{
  display: flex;
  align-items: center;
}
.prod-name{ 
  margin-bottom: 10px;
}
.prod-name p{
  font-size: 12px;
  color: rgba(0,0,0,0.8);
}
.cart-prod-price p{
  font-size: 16px;
  color: rgba(0,0,0,0.8);
  font-weight: 500;
}
.subs-box{
  padding: 10px 0;
  background: #f1f3f6;
}
.sub-total-cart{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.sub-total-cart p{
  font-size: 14px;
  color: rgba(0,0,0,0.8);
  font-weight: 500;
}
.cartsubprice{
  font-size: 18px!important;
  font-weight: 600!important;
}
.cart-drop-button a{
  padding: 10px 0 0 0!important;
  font-size: 14px;
  color: var(--textmaincolor)!important;
  text-decoration: underline!important;
}
.cart-drop-button {
  display: flex;
  justify-content: space-between;
}
.check-drop{
  background: var(--maincolor);
  text-align: center!important;
  color: #fff!important;
  border-radius: 5px;
  padding: 10px 20px;
  border:none;
  cursor: pointer;
}
.more-tag {
  padding: 10px 0;
}
.more-tag a{
  color: var(--textmaincolor)!important;
  text-decoration: underline!important;
}
.cart-hover:hover .cart-drop{
  display: block;
}
.facebook svg {
fill: #3b5998;
}
.linkedin svg {
fill: #0077B5;
}
.pinterest svg {
fill: #BD081C;
}
.whatsapp svg {
fill: #25D366;
}
.skype svg {
fill: #55ACEE;
}
.youtube svg {
fill: #E52D27;
}
.instagram svg {
fill: #f26798;
}
.google svg {
fill: #dc4a38;
}
.twitter svg {
fill: #3cf;
}
.search-pop{
  position: absolute;
  left: 3%;
  width: 90%;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background: #fff;
  top: 103%;
  border-radius: 0 0 5px 5px;
  display: block;
  z-index: 9;
  max-height: 40vh;
  overflow: auto;
}
.nosearchimg{
  height: 200px;
}
.nosearchimg img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.notfoundtxt p{
  font-size: 14px;
  color: var(--color8);
}
.notfoundtxt span{
  color: var(--textmaincolor);
  font-weight: 600;
}
.notfoundtxt{
  padding: 10px 0;
}
.question-loading{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.search-pop .searchbox{
  display: none;
}
.search-drop ul{
  list-style-type: none;
}
.search-drop li{
  width: 100%;
  border-bottom: .5px solid rgba(0,0,0,0.1);
}
.search-img{
  width: 45px;
  height: 45px;
  margin-right: 10px;
}
.search-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.searchdef{
  background: var(--maincolor);
  border-radius: 5px;
}
.search-list-flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}
.sm{
  display: flex;
  align-items: center;
}
.sm .search-img{
  float: left;
}
.sm .search-name {
  float: left;
  width: calc(100% - 55px);
}
.search-drop a{
  text-decoration: none;
}
.search-name p{
  font-size: 14px;
  color: rgba(0,0,0,0.8);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.search-go svg{
  height: 25px;
  width: 25px;
  color: rgba(0,0,0,0.6);
}
.search-tags{
  background: #f1f3f6;
  padding: 10px 0;
}
.search-tag-head p{
  font-size: 14px;
  color: rgba(0,0,0,0.8);
  font-weight: 500;
  padding-bottom: 5px;
}
.search-tag-list{
  overflow: auto;
}
.search-tag-list::-webkit-scrollbar {
  display: none;
}
.search-tag-list ul{
  list-style-type: none;
  display: block;
}
.search-tag-list li{
  margin-right: 10px;
  float: left;
  margin-top: 10px;
  border: 0!important;
  width: max-content!important;
}
.search-tag-list li p{
  padding: 5px;
  font-size: 14px;
  color: #2874f0;
  border: .5px solid rgba(0,0,0,0.1);
  border-radius: 5px;
  display: block;
  text-decoration: none;
  width: max-content;
  padding: 5px 15px;
  background: #fff;
  cursor: pointer;
}
.search-drop ul a:last-child li{
  border-bottom: none;
}
.category-cards-box{
  padding: 20px 0;
}
.category-cards-box::-webkit-scrollbar {
  display: none;
}
.category-cards-box ul{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.category-cards-box ul li{
  float: left;
  width: 200px;
  padding: 0!important;
  margin: 0px;
  overflow: hidden;
}
.category-cards-box ul li a{
  text-decoration: none;
}
.category-card{
  position: relative;
  border-radius: 10px;
  overflow: visible;
  border: 2px solid #fff;
  transition: .5s;
  margin: 10px 0px 10px 30px;
}
.category-card .backlayer{
  width: 100%;
  position: absolute;
  z-index: 1;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.category-card .backlayer .side-color{
  position: relative;
  width: 100%;
  margin-left:  -100%;
  height: 100%;
  float: left;
  transition: .5s;
}
.category-card .backlayer .shown-color{
  position: relative;
  width:100%;
  height:100%;
  /*float: left;*/
  transition: .5s;
  margin-left: 0%;
}
.category-card .frontlayer{
  position: relative;
  z-index: 9;
  display: flex;
  border-radius: 10px;
  align-items: center;
  overflow: visible;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cat-img{
  width: 110%;
  height: 90px;
  position: relative;
  left: -40%;
  transition: .5s;
}
.cat-img img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.category-deets{
  transition: .5s;
}
.category-name p{
  font-size: 14px;
  color: rgba(0,0,0,0.8);
  font-weight: 700;
  transition: .5s;
  text-transform: uppercase;
}
.category-view {
  margin-top: 5px;
}
.category-view p{
  font-size: 12px;
  color: rgba(0,0,0,0.8);
  transition: .5s;
}
.bg-text{
  position: relative;
  z-index: 5;
  left: 30%;
  top: 50%;
  transform: translateY(-50%);
  opacity: .06;
  transition: .5s;
}
.bg-text p{
  font-size: 60px;
  color: rgba(0,0,0,1);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.bg-text-container{
  position: absolute;
  width: 100%;
  z-index: 2;
  height: 100%;
  overflow: hidden;
}
.category-card:hover .bg-text{
  left: -40%;
}
.category-card:hover .cat-img{ 
  left: -5%;
}
.category-card:hover .category-deets{ 
  width: calc(60% - 10px);
  padding-left: 10px;
}
.category-card:hover .backlayer .side-color{
  margin-left:  0%;
}
.category-card:hover .backlayer .shown-color{
  margin-left: 100%;
}
.category-card:hover .category-name p{
  color: #fff;
}
.category-card:hover .category-view p{
  color: #fff;
}
.menu-links{
  border-top: .5px solid rgba(0,0,0,0.05);
  background: #fff;
}
.menu-links ul{
  list-style-type: none;
}
.menu-links ul li{
  float: left;
  padding: 10px 20px;
  margin-right: 10px;
}
.menu-links li .main-link a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  font-weight: 600;
  font-size: 14px;
}
.menu-links ul li .big-drop{
  position: fixed;
  width: 100%;
  top:145px;
  display: none;
  background: #f1f3f6;
  left: 0;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  z-index: 999;
}
.menu-links ul li:hover .big-drop{
  display: block;
}
.active_menurk{
  position: fixed;
  top: -40px;
  left: 0;
  z-index: 99;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  float: left;
}
.ups{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:70%;
}
.moblog p{
  font-size: 14px;
}
.sortbox{
  background: #fff;
  transition: .5s;
  position: relative;
  z-index: 1;
}
.sticky-wrapper {
position: relative;
height: 3rem; /* We need to change this value */
}
.sticky-innermenu{
  overflow: visible;
}
.sticky .sticky-innermenu {
  /* position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: .5s;
  animation: sortfixmenu .5s linear forwards; */
  z-index: 99;
  overflow: visible;
}
@keyframes sortfixmenu {
  0%{
      top:-150px;
  }
  100%{
      top: 0px;
  }
}
/* .white-spacemenurk{
  /* height: 115px;
} */
.logouts {
  font-size: 14px;
  cursor: pointer;
}
.cart-card .prod-name p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}
.sellerbutton a{
  height: 50px;
  width: 100%;
  margin: 0px auto;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.sellerbutton p{
  height: 50px;
  width: 100%;
}
.sellerbutton img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left;
}
.sellerbutton a{
  color: #fff!important;
}
.sellerbutton svg{
  color: #fff!important;
  height: 20px!important;
  width: 20px!important;
  top: -2px!important;
  margin-right: 10px!important;
}
.mid-search .formmenusearch.empty{
  border: .5px solid red;
}
.mid-search .formmenusearch.empty input::placeholder{
  color: red;
}
.searchbackclick{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  /* background: red; */
  z-index: 5;
}
.highlightsearch{
  color: var(--textmaincolor)!important;
  font-weight: 500;
}
/**********************************rakesh menu css end*******************************/
.mainheading p{
  font-size: var(--mainheading);
  font-weight: 700;
  color: var(--color8);
}
.subheading p{
  font-size: var(--subheading);
  color: var(--color6);
  font-weight: 400;
}
.subtext p{
  color: var(--color6);
  font-size: var(--para);
  font-weight: 400;
}
.mainheading span{
  color: var(--maincolor);
}
/*Global End*/
#root{
  display: flex;
  flex-wrap: wrap;
}
.big-loading{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
a{
  text-decoration: none;
}

.fancybox__container{
  z-index: 9999999!important;
}
.fancybox__backdrop{
  background: rgba(0,0,0,.5)!important;
  backdrop-filter:blur(10px);
}
.fancybox__thumb{
  background-size:contain!important;
  background-color: #fff;
}
/* ********************banners ********************** */
.banner-image{
  width: 100%;
}
.banner-image img{
  width: 100%;
  object-fit: cover;
}
.banners{
  position: relative;
}
.owl-dots{
 position: relative;
 bottom: 0px;
 transform: translateX(-50%);
 left: 50%;
}
.owl-theme .owl-dots .owl-dot span{
  background: var(--maincolorlight);
  transition: .2s;
  height: 8px!important;
  width: 8px!important;
}
.owl-theme .owl-dots .owl-dot.active span{
  width: 30px!important;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
  background: var(--maincolor);
}
/* **********catgeories ******************* */
.topside{
  padding: 50px 0 80px 0;
  background-color: var(--maincolorlight);
  background-repeat: no-repeat!important;
  background-position: center!important;
  background-size: cover!important;
}
.allcategoriesbox .mainheading p{
  color: var(--maincolor);
}
.allcategoriesbox .mainheading span{
  color: #fff;
}
.bottomside{
  background: #fff;
  padding: 0px 0;
}
.coursescat{
  background: #fff;
  margin: 10px auto;
  box-shadow: var(--box1);
  border-radius: 5px;
  padding: 20px 0;
}
.bottomside .coursescat{
  position: sticky;
  position: -webkit-sticky;
  top: 110px;
}
.bottomflx{
  display: flex;
}
.cboxhead p{
  font-size: 2vw;
  color: var(--color8);
  font-weight: 600;
}
.cboxhead p span{
  color: var(--maincolor);
}
.cboxsubhead p{
  font-size: 14px;
  color: var(--color6);
}
.cmboxmain{
  margin-bottom: 30px;
}
.coursescatbox{
  margin-left: 0px;
  margin-top: -50px;
}
.coursescat ul{
  list-style-type: none;
  margin-top: 10px;
}
.coursescat li{
  padding: 10px 15px;
  width: calc(100% - 30px);
  font-size: 16px;
  color: var(--maincolor);
  transition: .5s;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.circleact{
  height: 10px;
  width: 10px;
  background: var(--maincolor);
  border-radius: 50%;
  display: block;
  margin-right: 5px;
  transition: .5s;
  position: relative;
  transform: scale(0);
}
.coursescat li:hover{
  transform: scale(1.07,1.05);
  box-shadow: 0 0 10px var(--maincolorlight);
  z-index: 3;
  color: var(--maincolor);
}
.coursescat li:hover .circleact{
  transform: scale(1);
}
.actcat .circleact{
  transform: scale(1);
}
.actcat{
  transform: scale(1.07,1.05);
  box-shadow: 0 0 10px var(--maincolorlight);
  z-index: 2;
  color: var(--maincolor)!important;
}
.cimage{
  width: 100%;
}
.cimage img{
  width: 100%;
  object-fit: contain;
}
.course-card{
  margin: 20px auto;
  border-radius: 5px;
  background: #fff;
  box-shadow: var(--box1);
  position: relative;
  transition: .5s;
}
.course-card:hover{
  transform: translate3d(0px,-10px,0);
}
.course-card a{
  text-decoration: none;
}
.coursename p{
  font-size: 20px;
  color: var(--color8);
  font-weight: 600;
}
.cousetags ul{
  list-style-type: none;
}
.cousetags li{
  float: left;
  margin: 10px 10px 5px 0;
  padding: 5px 10px;
  color: var(--maincolor);
  background: var(--lightbg);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
}
.subname-course{
  background: transparent!important;
  padding: 5px 0!important;
}
.pricebox{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.oldp{
  margin: 0 10px 0 10px;
  display: block;
  color: var(--maincolorred)!important;
  text-decoration: line-through;
}
.lsidep{
  display: flex;
  gap: 0 10px;
  align-items: flex-end;
}
.pricebox p{
  font-size: 22px;
  line-height: 20px;
  color: var(--color8);
  font-weight: 600;
  white-space: nowrap;
}
.cbox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:10px;
}

.freetag {
  background: var(--maincolor);
  border-radius: 3px 0 0 3px;
  color: #fff!important;
  display: flex;
  align-items: center;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  font-size: 14px!important;
  font-weight: 500!important;
}

.freetag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.freetag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid var(--maincolor);
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.cardtogo svg{
  padding: 10px;
  font-size: 22px;
  border-radius: 5px;
  background: var(--lightbg);
  color: var(--secondarycolor);
}
.disc{
  position: relative;
  right: 0px;
  top: 0;
  color: #fff!important;
  background: #2FB944;
  padding:4px 5px;
  font-size: 12px!important;
  border-radius: 5px;
}
.cousrse-details{
  padding: 10px 0;
}
.coursesflex{
  display: flex;
  flex-wrap: wrap;
}
.cload span:nth-child(1){
  display: block;
  margin-top: -10px;
}
.cload .cousrse-details span{
  margin-top: 0px;
  display: flex;
}
.cload .cousrse-details{
  padding: 0 0 10px 0;
  margin-top: -10px;
}
.coursescat-normal ul{
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.coursescatbox-normal{
  padding: 0px 0 0px 0;
  position: sticky;
  position: -webkit-sticky;
  top: 76px;
  z-index: 99;
  background: #fff;
  box-shadow: 0 2px 5px var(--color1);
}
.coursescat-normal li{
  /* white-space: nowrap; */
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin: 10px 5px;
  border-radius: 5px;
  color: var(--maincolor);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.coursescat-normal li:hover .circleact{
  transform: scale(1);
}
.coursescatbox-normal li:hover{
  background: var(--lightbg);
}
.coursescat-normal li.actcat{
  background: var(--lightbg);
  box-shadow: none;
}
.allcategoriesbox{
  padding: 0 0 50px 0;
}
.cardsflex{
  display: flex;
  flex-wrap: wrap;
}
.cboxheadm p{
  font-size: 30px;
  color: var(--maincolor);
  font-weight: 600;
}
.cboxhead{
  margin-bottom: 10px;
}
.clickbutton{
  padding: 10px 50px;
  border-radius: 5px;
  background: var(--maincolor);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 10px auto;
  border: 0;
}
.clickbutton svg{
  height: 20px;
  width: 20px;
  margin-left: 10px;
}
.clickbutton.orangebut{
  background: var(--secondarycolor);
}
.content-box{
  margin-top: 50px;
}
.bottomside-normal{
  display: flex;
  flex-wrap: wrap;
}

/* *************************testimonial*********************** */
.testvideo-card{
  background: #fff;
  margin: 20px auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.testimonials{
  padding: 50px 0;
}
.testframe iframe{
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.videodetail{
  padding: 20px 0;
  background: #fff;
}
.videoname p{
  font-size: 16px;
  color: var(--color8);
  font-weight: 500;
}

.videocat{
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  margin-top: 10px;
}
.videodetail{
  position: relative;
}
.topvideobox{
  position: relative;
}
.backlayer{
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 0 100% 0 0;
}
.frontlayer{
  position: relative;
  z-index: 2;
}
.thumbicon{
  width: 80%;
}
.thumbicon img{
  width: 100%;
  object-fit: contain;
  display: block;
}
.playdiv{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  transition: .2s;
}
.playicon{
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--box1);
  position: relative;
  transition: .5s;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0.8;
}
.playicon::before{
  content: "";
  position: absolute;
  height:80px;
  width: 80px;
  background: #fff;
  opacity: .2;
  z-index: 2;
  border-radius: 50%;
  transition: .5s;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
}
.playicon::after{
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
  background: #fff;
  opacity: .2;
  z-index: 1;
  border-radius: 50%;
  transition: .5s;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition-delay: .2s;
}
.playicon svg{
  color: var(--maincolor);
  height: 20px;
  width: 20px;
  position: relative;
  left: 3px;
  z-index: 5;
}
.normalcard{
  flex-wrap: wrap;
}
.videocat .coursescat-normal li{
  padding: 10px;
  margin: 5px;
}
.videocat .coursescat-normal ul{
  justify-content: flex-start;
}
.testtopimg{
  width: 100%;
  height: 200px;
}
.testtopimg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}
.testthumb{
  width: calc(100% - 20px);
  margin: 10px auto;
  border-radius: 10px;
  overflow: hidden;
}
.testthumb img{
  width: 100%;
  object-fit: cover;
}
img{
  display: block;
}
.testthumbcard{
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  margin: 20px auto;
  background: #fff;
  box-shadow: var(--box1);
  transition: .5s;
  border: 1px solid var(--color1);
}
.testthumbcard:hover .watchtext{
  opacity:1;
  margin-left: 20px;
}
.testthumbcard:hover .playicon::after{
  opacity: .1;
}
.testthumbcard:hover .playicon::before{
  opacity: .2;
}
.testthumbcard:hover .playdiv{
  background: var(--color5);
}
.watchtext{
  width: max-content;
  margin-left: 5px;
  opacity: 0;
  position: relative;
  transition: .5s;
  top: 50%;
  transform: translateY(-50%);
}
.watchtext p{
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  white-space: nowrap;
}
.videothumbs{
  display: flex;
  flex-wrap: wrap;
}
.thload span{
  display: block;
  margin-top: -10px;
}
.thload .react-loading-skeleton{
  display: inline-flex;
}
.videopop{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: var(--color5);
  z-index: 99999;
}
.videopopbox{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.videoboxmain{
  height: 70vh;
  border-radius: 10px;
  border: 5px solid #fff;
  position: relative;
  overflow: auto;
  background: #fff;
}
.testfeedback p{
  font-size: 14px;
  font-weight: 500;
  color: var(--color6);
  line-height: 25px;
}
.boxtxts{
  display: flex;
  align-items: center;
}
.videopop .closepop{
  top: 0;
  right: 0;
}
.videoboxmain iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.closepop{
  position: absolute;
  top: -10px;
  right: -10px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #333;
  cursor: pointer;
}
.closepop svg{
  height: 30px;
  width: 30px;
  color: #fff;
}
.videoload{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.testmainbox{
  padding: 20px 0 0 0;
  border-radius: 10px;
  position: relative;
  overflow: visible;
}
.testdata{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px auto;
}
.testimageside{
  width: 80px;
}
.testuserside {
  width: calc(100% - 80px);
}
.testimage{
  height: 60px;
  width: 60px;
  border-radius: 50%;
  overflow: hidden;
  float: right;
}
.testimage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.test-name p{
  font-size: 16px;
  color: var(--maincolor);
  font-weight: 600;
}
.test-desig p{
  font-size: 14px;
  color: var(--color6);
}
.testmainbox p{
  font-size: 14px;
  color: var(--color8);
  line-height: 25px;
}
.bannerimg{
  width: 100%;
  display: flex;
  max-height: 600px;
}
.bannerimg img{
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.categorypage .coursescat-normal ul{
  justify-content: flex-end;
}
.categorypage .coursescatbox-normal{
  margin: 0px auto;
  box-shadow: 0 0 5px var(--color1);
  top: 0;
}
.categorypage .bottomside-normal{
  height: 100%;
}
/* *******************product page****************************** */
.product-details{
  padding: 40px 0 50px 0;
  position: relative;
  margin: 0px auto;
  background: #fff;
  border-radius: 0px;
  box-shadow: var(--box1);
}
.navigation{
  margin: 10px auto;
}
.navigation ul{
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.navigation li{
  display: flex;
  align-items: center;
  font-size: 14px;
  max-width: 33.33%;
}
.navigation li p{
  font-size: 14px;
  color: var(--textmaincolor);
  font-weight: 500;
  width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation svg{
  color: var(--color8);
}
.navigation li.firtname p{
  color: var(--color8);
  cursor: pointer;
  width: 100%;
}
.navigation li.firtname:hover p{
  color: var(--textmaincolor);
}
.navigation li a{
  text-decoration: none;
  color: var(--color8);
  font-weight: 500;
  transition: .5s;
  font-size: 14px;
  width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation li a:hover{
  color: var(--textmaincolor);
}
.product-details.black-deets .navigation li{
    max-width: max-content;
    width: max-content;
}
.product-details.black-deets .navigation li a{
    width: auto;
}
.product-details.black-deets .navigation li p{
    width: auto;
}
.product-details.black-deets .navigation ul{
  justify-content: flex-start;
}
.product-page .coursename p{
  font-size: 25px;
}
.product-page .subpara p{
  font-size: 14px;
  color: var(--color6);
}
.product-page .subpara{
  margin: 10px auto;
}
.highlights{
  margin: 10px auto;
}
.highlights li{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
  margin-bottom: 5px;
}
.highlights li span{
  color: var(--textmaincolor);
}
.subname p{
  font-size: 16px;
  color: var(--textmaincolor);
  font-weight: 600;
}
.product-page .cousetags li{
  margin: 0 5px 0 0;
}
.ratings svg{
  color: #ffa003;
  position: relative;
  top: 2px;
}
.ratetext{
  margin-left: 5px;
  color: var(--color8)!important;
}
.product-details.black-deets{
  /* background: #1C1D1F; */
  position: relative;
  padding: 0;
}
.product-details.black-deets .balcksbg {
  position: relative;
  z-index: 1;
}
.blacksfront{
  position: absolute;
  z-index: 2;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.balcksbg img{
  width: 100%;
  object-fit: contain;
}
.prodbgblack{
  background: #1C1D1F;
  padding: 50px 0;
  position: relative;
}
.black-deets .navigation li a{
  color: #fff;
}
.black-deets .navigation li svg{
  color: #fff;
}
.black-deets .coursename p{
  color: #fff;
}
.black-deets .subpara p{
  color: #fff;
}
.black-deets .highlights li{
  color: #fff;
}
.black-deets .cousetags li{
  color: #FBFE00;
  background: var(--maincolor);
}
.product-page{
  background: #fff;
}
.product-pagecard{
  margin: 10px auto;
  margin-top: -300px;
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: var(--box1);
  border-radius: 5px;
  border: 1px solid var(--color1);
  position: sticky;
  top: 150px;
}
.pageimage{
  width: 100%;
}
.pageimage img{
  width: 100%;
  object-fit: cover;
}
.pageimage iframe{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border: 0;
}
.pageimage video{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border: 0;
}
.pagecard-loweside{
  padding: 10px 0;
}
.pagecard-loweside .mainp{
  font-size: 25px;
}
.buybuttons button{
  padding:8px 0;
  width: calc(100% - 2px);
  margin: 10px auto 5px auto;
  border-radius: 3px;
  border: 1px solid;
  cursor: pointer;
  font-weight: 500;
}
.addbutton button{
  background: var(--secondarycolor);
  color: #fff;
  font-size: 14px;
  border-color: var(--secondarycolor);
}
.buybutton button{
  background: var(--textmaincolor);
  color: #fff;
  border-color: var(--textmaincolor);
}
.whatsapp a{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px auto;
  background: #2fb944;
  border-radius: 3px;
}
.whatsapp p{
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-left: 10px;
}
.wappicon{
  height: 20px;
  width: 20px;
  margin: 10px 0;
}
.whatsapp img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cardside{
  width: 370px;
}
.leftsides{
  width: calc(100% - 370px);
}
.cardhighhead{
  margin: 10px auto;
}
.cardhighhead p{
  font-size: 18px;
  color: var(--color8);
  font-weight: 600;
}
.cardhighs ul{
  display: flex;
  flex-wrap: wrap;
}
.cardhighs li{
  display: flex;
  align-items: center;
  margin: 10px 0;
  width: calc(50% - 10px);
  float: left;
}
.cardhighs li:nth-child(even){
  margin-left: 10px;
}
.cardhighs li:nth-child(odd){
  margin-right: 10px;
}
.highicon {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.highicon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hightext{
  width: calc(100% - 50px);
}
.hightext p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
}
.validity{
  margin-top: 10px;
  float: left;
}
.validity ul{
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}
.validity li{
  padding: 8px 10px!important;
  font-size: 14px;
  margin: 0 10px 5px 0px!important;
  width: max-content;
  justify-content: center;
  background: var(--lightbg);
}
.pagecard-loweside .freetag{
  margin-bottom: 0;
}
.validity li.actcat{
  transform: scale(1);
}
.validity li:hover{
  background: var(--lightbg);
}
.validitysub{
  font-size: 12px!important;
  color: var(--color8);
  font-weight: 500!important;
}
.validitysub span{
  color: var(--textmaincolor);
}
.pagecard-loweside .pricebox{
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.validityhead{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
  margin-bottom: 5px;
}
.leftcontentbox{
  padding: 20px 0;
}
.cardhiglights{
  background: #fff;
  border-radius: 5px;
  margin: 5px auto;
  box-shadow: var(--box1);
  width: calc(100% - 10px);
  padding: 10px 0;
}
.contentbox{
  margin-bottom: 30px;
}
.data-flex{
  display: flex;
  flex-wrap: wrap;
}
.tabbox{
  background:#f7f9fa;
  padding: 10px 0;
  border: 1px solid var(--color1);
  border-top: 0;
  width: calc(100% - 2px);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.tabboxes:nth-child(2) .tabbox{
  border-top: 1px solid var(--color1);
}
.tabbox .iconside svg{
  height: 20px;
  width: 20px;
  color: var(--color8);
  transition: .5s;
}
.tabicon.showed svg{
  transform: rotate(180deg);
}
.tabbox .iconside .w90{
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
}
.tabbox p{
  font-size: 16px;
  color: var(--color8);
  font-weight: 600;
}
.tabcontent{
  border: 1px solid var(--color1);
  width: calc(100% - 2px);
  border-top: 0;
  display: none;
}
.tabcontent.showen{
  display: block;
}
@keyframes toogleDown {
	/* Set height to '
	auto'
	 after animation for spacing showing form-invalid feedback message */
	 0% {
		 visibility: hidden;
		 height: 0;
	}
	 95% {
		 visibility: visible;
		 height: 90%;
	}
	 100% {
		 visibility: visible;
		 height: auto;
	}
}
.tabicon.down{
  transform: rotate(180deg);
}
.sectionhead p{
  font-size: 20px;
  color: var(--color8);
  font-weight: 600;
}
.mainsteps ul{
  list-style-type: none;
}
.mainsteps li{
  padding: 5px 0;
  border-radius: 3px;
  background:var(--lightwhite);
  margin: 5px 0;
  cursor: pointer;
  overflow: visible;
  width: calc(100% - 20px);
  position: relative;
  transition: .5s;
}
.mainsteps li:hover{
  background: #e4e4ff;
}
.sidebarhead p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
}
.mainstepflex{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.stepicon {
  height: 30px;
  width: 30px;
  margin-right: 10px;
  display: block;
}
.stepicon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mainsteps li p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
  width: calc(100% - 40px);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
}
.contentdrops{
  background: #fff;
  padding: 0px 0 50px 0;
}
.sidebarbox{
  width: 250px;
}
.sidebarcontent{
  width: 100%;
}
.actstep{
  background:#e4e4ff!important;
}
.acticon{
  display: none;
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  color: var(--maincolor);
}
.acticon svg{
  height: 16px;
  width: 16px;
}
.actstep .acticon{
  display: block;
}
.mainstepsbox{
  display: flex;
  flex-wrap: wrap;
}
.topbarsteps{
  display: flex;
  align-items: center;
  border: .5px solid var(--color1);
  border-width: 1px 0 1px 0;
  margin: 10px auto;
}
.infolicon {
  width: 40px;
  height: 40px;
  margin: 0px auto;
}
.infoldericon{
  width: 40px;
}
.infoldertext{
  width: calc(100% - 40px);
}
.infolicon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.infoldertext p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
}
.insidefolders{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.infolderbox:hover{
  background:#e4e4ff!important;;
}
.infolderbox{
  border-radius: 0px;
  border-bottom: 1px solid var(--color1);
  transition: .5s;
  cursor: pointer;
  padding: 5px 10px;
  width: calc(100% - 20px);
  display: flex;
  align-items: center;
  position: relative;
}
.folderloadings .infolderbox{
  border-bottom: 1px solid transparent;
}
.folderloadings .infolderbox:hover{
  background: transparent!important;
}
.packageimg{
  width: 100%;
}
.packageimg img{
  width: 100%;
  object-fit: contain;
}
.packagecard{
  border-radius: 3px;
  margin: 10px auto;
  box-shadow: var(--box1);
  border: 1px solid var(--color1);
}
.pack-details{
  padding: 10px 0;
}
.pack-name p{
  font-size: 16px;
  color: var(--color8);
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
}
.pack-sub p {
  font-size: 14px;
  color: var(--textmaincolor);
  font-weight: 500;
}
.packaction button{
  width: 100%;
  padding: 8px 0;
  font-size: 14px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0 auto;
}
.packaction button svg{
  margin-left: 5px;
  height: 16px;
  width: 16px;
}
.infobut{
  background: var(--lightbg2);
  color: var(--color8);
}
.infobut svg{
  color: var(--secondarycolor);
}
.previewbut{
  background:#979fdf;
  color: #fff;
}
.packagecardbox{
  width: 33.33%;
}
.toprunning p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
}
.toprunning a{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
  animation: breathe 1.5s linear infinite;
}
@keyframes breathe {
  0%{
    color:#000000;
    transform: scale(1);
  }
  50%{
    color:red;
    transform: scale(1.05);
  }
  100%{
    color:#000000;
    transform: scale(1);
  }
}
.topitem {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 0;
  text-align: center;
}
.previewpop{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 9999;
  width: 100%;
}
.prevflx{
  display: flex;
  height: 100%;
  background: var(--color5);
  align-items: center;
}
.previewmainbox{
  background: #fff;
  border-radius: 10px;
  position: relative;
  overflow: visible;
  margin: 10px auto;
}
.closeprodprev svg{
  top: -10px;
  right: -10px;
}
.previewdatabox{
  max-height: 90vh;
  overflow: auto;
}
.previewhead{
  padding: 10px 0;
}
.previewhead p{
  font-size: 20px;
  font-weight: 600;
  color: var(--color8);
}
.previewlist ul{
  list-style-type: none;
  margin: 20px auto;
}
.previewlist li{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px ;
  width: calc(100% - 20px);
  cursor: pointer;
  transition: .5s;
  border-radius: 10px;
}
.previewlist li svg{
  height: 20px;
  width: 20px;
  color: var(--maincolor);
}
.previewbuttons{
  margin-top: -50px;
}
.prevbutflx{
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
}
.previewpage{
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  border-radius: 10px;
  overflow: auto;
}
.previewpage iframe{
  width: 100%;
  object-fit: contain;
}
.previewpage video{
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.backpreview{
  padding: 8px 20px;
  background: var(--lightwhite);
  color: var(--color8);
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
  border: 2px solid var(--lightbg2);
}
.previewlist li:hover{
  background: var(--lightbg);
}
.previewlist .infolicon{
  margin: 0;
}
.previewlist .infoldertext{
  width: calc(100% - 100px);
  margin: 0 10px;
}
.previewlist .infoldertext p{
  text-align: left;
}
.closepreview svg{
  height: 20px;
  width: 20px;
  padding: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  background: #333;
  cursor: pointer;
  color: #fff;
}

.closeprodprev svg{
  top: -10px;
  right: -10px;
}
/* ********************footer********************** */
.appflexses{
    display: flex;
  }
  .dpwnloadimage{
      width: 90%;
      height: 200px;
  }
  .dpwnloadimage img{
      width: 100%;
      height: 100%;
      object-fit: contain;
  }
  .appicon{
      width: 150px;
      height: 70px;
  }
  .appicon img{
      width: 100%;
      height: 100%;
      object-fit: contain;
  }
  .downloadapp a{
      text-decoration: none;
      display: flex;
      width: 100%;
  }
  .downloadapp .w50{
      display: flex;
  }
  .downloadapp {
      margin: 50px auto 10px auto;
      display: flex;
  }
  .appside{
      background: #F0EFFF;
      border-radius: 5px;
  }
  .vendorside{
      background:#F0EFFF;
      border-radius: 5px;
  }
  .mdonwloadhead p{
      font-size: 16px;
      color: rgba(0,0,0,0.8);
      font-weight: 500;
  }
  .subheadtext{
      margin: 10px auto;
  }
  .subheadtext p{
      font-size: 12px;
      color: rgba(0,0,0,0.6);
      font-weight: 400;
  }
  .appiconbox .sellerbutton p{
      display: block;
      font-size: 14px;
  }
  .textsides{
      padding: 20px 0;
      display: flex;
      align-items: center;
  }
  .imgsides{
      display: flex;
      align-items: flex-end;
  }
  .mainfooter{
      background: #F1F3F6;
      padding: 30px 0 0 0;
      margin-top: 50px;
  }
  .fdownloadbox{
    justify-content: space-between!important;
    margin: 20px auto;
  }
  .mainfooter a{
      text-decoration: none;
  }
  .aboutfooter p{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
      font-weight: 500;
      line-height: 25px;
  }
  .logoside .logo{
      width: 50%;
      margin-bottom: 10px;
  }
  .logoside .logo img{
      width: 100%;
      object-fit: contain;
  }
  .footerhead p{
      font-size: 16px;
      color: rgba(0,0,0,0.8);
      font-weight: 600;
  }
  .footerhead{
      margin-bottom: 10px;
  }
  .footerlinks ul{
      list-style-type: none;
  }
  .footerlinks li{
      margin-bottom: 5px;
  }
  .footerlinks li a{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
      font-weight: 400;
      transition: .5s;
  }
  .footerlinks li a:hover{
      text-decoration: underline;
  }
  .downloadbox{
      display: flex;
      justify-content: center;
      gap:  0 20px;
      align-items: center;
  }
  .appbox .subtext p{
    font-size: 18px;
    font-weight: 500;
  }
  .appbutton{
    width: 170px;
    height: 50px;
    transition: .5s;
    margin: 20px 0 40px 0;
  }
  .appbutton:hover{
    transform: translate3d(0,-10px,0);
  }
  .appbutton img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .downloadappside {
      display: flex;
      justify-content: flex-start;
      align-items: center;
  }
  .downloadappside p{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
      font-weight: 500;
      display: block;
  }
  .downloadimgfbelow{
      width: 200px;
      height: 60px;
      margin-bottom: 10px;
  }
  .downloadimgfbelow img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: left;
  }
  .downloadbox .social-side ul{
      list-style-type: none;
      display: flex;
  }
  .downloadbox .social-side li{
      margin: 10px;
      cursor: pointer;
  }
  .downloadbox .social-side svg{
      height: 35px;
      width: 35px;
  }
  .copyrightside p{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
      font-weight: 500;
  }
  .website99box{
      padding: 10px 0;
      border-top: .5px solid rgba(0,0,0,0.1);
  }
  .website99box a{
      text-decoration: none;
      color: #56AEE3;
      font-size: 14px;
  }
  .website99box p{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
      font-weight: 400;
  }
  .accept-cookies{
      position: fixed;
      bottom: 10px;;
      right: 10px;
      background: #fff;
      margin:0px auto;
      border: 2px solid #b7b0ff;
      border-radius: 10px;
      z-index: 99999;
      width: 30%;
      opacity: 0;
      bottom: -50%;
      animation: fadesInCookies .5s ease-in;
      animation-fill-mode: forwards;
  }
  .cookie-image{
      width: 80%;
      margin: 10px auto;
  }
  .cookie-image img{
      width: 100%;
      object-fit: contain;
  }
  .cookie-head p{
      font-size: 18px;
      font-weight: 600;
      color: #1E1A4F;
  }
  .cookie-para p{
      font-size: 14px;
      color: rgba(0,0,0,0.6);
  }
  .cookie-button button{
      font-size: 14px;
      color: #fff;
      background: linear-gradient(to right,#1e1a4f,var(--textmaincolor));
      padding: 8px 40px;
      border-radius: 30px;
      border: 0;
      cursor: pointer;
      margin-top: 5px;
  }
  .cookie-text{
      padding: 10px 0;
  }
  .cookieflex{
      display: flex;
      align-items: center;
  }
  @keyframes fadesInCookies{
      0%{
          opacity: 0;
          bottom: 10px;
      }
      100%{
          opacity: 1;
          bottom: 10px;
      }
  }
/* ********************footer end********************** */
/* ************************login*********************** */
.formbox{
  background: #fff;
}
.formwhitebg{
  padding: 0px 0;
  position: relative;
  margin: 50px auto 10px auto;
  background: var(--lightwhite);
  border-radius: 10px;
  box-shadow: var(--box2);
}
.otp-layer{
  width: 50%!important;
}
.otpboxfifty{
  width: 50%!important;
  align-items: center;
}
.otpbox .loadercircle{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.signup-icon{
  margin: 10px auto;
  width: 70%;
  overflow: hidden;
}
.signup-icon img{
  width: 100%;
  object-fit: contain;
}
.sign-e{
  margin-bottom: 5px;
}
.sign-e p{
  color: #4330BF;
  font-size: 20px;
  font-weight: 600;
}
.signup-p p{
  font-size: 14px;
  color: rgba(0,0,0,0.6);
}
.sign-up-text{
  margin-bottom: 20px;
}
.mainform{
  background: #fff;
  border-radius: 0px;
  padding: 10px 0;
  position: absolute;
}
.mainform .signup-p{
  margin-bottom: 10px;
}
.infields input{
  font-size: 14px;
  color: rgba(0,0,0,0.8);
  width: calc(100% - 55px);
  padding: 10px;
  margin-left: 8px;
  border: .5px solid rgba(0,0,0,0.1);
  border-width: 0 0 0px 0;
}
.infields label{
  width: 100%;
  display: block;
  margin:0px 0  5px 0;
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
}
.infields .react-tel-input .form-control{
  width: 100%!important;
}
.new-address-form .infields input{  
  border-width: 0.5px;
  width: calc(100% - 22px);
  margin-left: 0;
  border-radius: 5px;
  margin: 10px auto;
}
.react-tel-input .form-control{
  width: 100%;
  border: .5px solid rgba(0,0,0,0.1);
  border-width: 0 0 0px 0;
}
.react-tel-input .flag-dropdown{
  background: transparent;
  border: 0;;
}
.inphone{
  margin-bottom: 10px;
}
.inphone .react-tel-input .flag-dropdown{
  border: 1px solid rgba(0,0,0,0.1);
}
.new-address-form .infields .w90{
  margin: 0 auto;
}
.react-tel-input .country-list{
  border: 1px solid rgba(0,0,0,0.1);
  margin: 10px 0 10px 0px;
}
.fieldbox svg{
  height: 25px;
  width: 25px;
  color: var(--color6);
  transition: .5s;
}
.infields .fieldbox{
  position: relative;
  margin: 10px auto;
  display: flex;
  align-items: center;
  border: .5px solid var(--color1);
  border-width: 0 0 1px 0;
}
.fieldbox:focus-within{
  border: .5px solid var(--textmaincolor);
  border-width: 0 0 1px 0;
}
.fieldbox:focus-within svg{
  color: var(--textmaincolor);
}
.infields .show-hide{
  position: absolute;
  right: 10px;
  top: 12px;
  cursor: pointer;
  z-index: 9;
  font-size: 16px;
  color: rgba(0,0,0,0.6);
}
.show-hide svg{
  height: 18px;
  width: 18px;
  color: var(--color8);
}
.infields button{
  padding: 10px 0;
  width: 100%;
  font-size: 14px;
  color: #fff;
  border: none;
  background:var(--textmaincolor);
  font-weight: 500;
  transition: .5s;
  margin: 10px auto;
  border-radius: 5px;
  cursor: pointer;
}
.bglayer{
  position: relative;
  z-index: 1;
  top: 0%;
}
.front-layer{
  position: relative;
  z-index: 5;
  margin-top: 0px;
}
.front-layer .mainform{
  position: relative;
  padding: 20px 0;
}
.strongpassword{
  display: none;
}
.strongpassword hr {
  width: 95%;
  height: 5px;
  margin: 0 0 0 2.5%;
  border-radius: 30px;
  transition: .5s;
  border: none;
}
.strongpara {
  font-size: 14px;
  padding-top: 5px;
  color: rgba(0,0,0,0.6);
  text-align: left;
  padding-left: 10px;
}
.error-message p{
  font-size: 14px;
  color: red;
  padding-left: 10px;
}
.otpbox{
  padding: 50px 0;
}
.formwhitebg{
  display: flex;
  flex-wrap: wrap;
}
.formwhitebg .w50{
  display: flex;
}
.flexboxlog{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.otpmainbox input{
  background: #e3dffc;
  border: none;
  border-bottom: 4px solid #4330BF;
  padding:5px 10px;
  font-size: 18px;
  color: #4330BF;
  font-weight: 700;
}
.otpmainbox div:nth-child(1){
  justify-content: center;
  margin: 10px auto 20px auto;
  float: left;
  width: 100%;
}
.otpmainbox div:nth-child(2){
  width: 80%;
  margin: 10px 10%;
  justify-content: center!important;
  align-items: center;
  float: left;
}
.otpmainbox div:nth-child(2) button{
  margin-left: 20px;
  padding: 10px 30px;
  color: #fff;
  border-radius: 5px;
  border: .5px solid rgba(0,0,0,0.1);
  background: #4330BF;
}
.otpmainbox div:nth-child(2) button[disabled]{
  cursor:not-allowed;
  color: #fff;
  background: #9389d4;
}
.otpbox{
  background: #fff;
  margin: 0px auto;
  border-radius: 0px;
}
.invalid-text{
  margin: 10px auto;
}
.invalid-text p{
  color: red;
  font-size: 14px;
  font-weight: 500;
}
.termslabel input{
  height: 15px;
  width: 15px;
  margin-right: 5px;
  float: left;
}
.termslabel{
  margin: 10px auto;
}
.termslabel label{
  width: 100%;
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,0.6);
  float: left;
}
.termslabel label a{
  font-size: 12px;
  color: rgba(5, 3, 145, 0.6);
  font-weight: 500;
  text-decoration: underline;
}
.subbut[disabled]{
  cursor:not-allowed;
  color: #fff;
  background: var(--lightbg2);
}
.forgot-passowrd a{
  text-decoration: none;
  color: #4330BF;
  font-size: 14px;
}
.forgot-passowrd p{
  font-size: 14px;
  color: rgba(0,0,0,0.8);
  font-weight: 500;
}
.newacc{
  margin: 20px auto;
}
.newacc a{
  text-decoration: underline;
}
.invalid p{
  color: red;
}
.otptext p{
  color: green;
}
.reseted p{
  color: green;
}
.reseted a{
  display: block;
  width: max-content;
  padding: 10px 40px;
  background: #4330BF;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  margin: 10px auto;
  transition: .5s;
}
.reseted a:hover{
  transform: translate3d(0 , -5px ,0);
}
.reseted .sign-up-text{
  margin-bottom: 0;
}
.backbutton{
  display: flex;
  justify-content: center;
}
.googlebutton .gimg{
  height: 20px;
  width: 20px;
  margin-right: 10px;
}
.googlebutton .gimg img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.googlebutton{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 2px 20px!important;
  cursor: pointer;
  transition: .5s;
  background: #Ffffff;
  border: .5px solid rgba(0,0,0,0.1)!important;
  border-radius: 5px!important;
  box-shadow: 0 0 10px rgba(0,0,0,0.1)!important;
  color: rgba(0,0,0,0.8)!important;
  font-size: 14px;
}
.googlebutton svg{
  position: relative;
  top: 2px;
}
.googlebutton div:nth-child(1){
  padding: 0!important;
}
.googlebutton:hover{
  transform: scale(1.05,1.05);
}
.g-button{
  display: flex;
  justify-content: center;
}
.notetext {
  color: red!important;
}
.fbbutton{
  padding: 10px 20px!important;
  font-weight: 500;
}
.fbbutton svg{
  height: 25px;
  width: 25px;
  position: relative;
  top: -1px;
  margin-right: 10px;
  color: #38529A;
}
.formwhitebg .w50:nth-child(1){
  width: calc(100% - 450px);
}
.formwhitebg .w50:nth-child(2){
  width: 450px;
}
#googlebutton2{
  display: flex;
  justify-content: center;
  margin: 0px auto;
}
.signloading{
  display: flex;
  height: calc(100vh - 180px);
  align-items: center;
  justify-content: center;
}
.signloading .loadercircle{
  text-align: center;
}
.ortext{
  position: relative;
}
.otpresent{
  margin: 10px auto;
}
.otpresent p{
  font-size: 14px;
  font-weight: 500;
  color: #00A65A;
}
.ortext p{
  font-size: 14px;
  font-weight: 600;
  color: var(--color8);
  display: block;
  width: max-content;
  margin: 0 auto;
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 2;
}
.ortext::before{
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: var(--color1);
}
.social-head{
  margin: 10px auto;
}
.social-head p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
}
.google-button {
  height: 40px;
  width: 40px;
  margin: 5px auto;
  border: 1px solid var(--color1);
  border-radius: 50%;
  box-shadow: var(--box1);
  cursor: pointer;
}
.google-button svg{
  height: 30px;
  width: 30px;
  margin: 5px;
}
.signtopbox{
  display: flex;
  justify-content: center;
  width: max-content;
  margin: 10px auto;
  position: relative;
  padding-top: 5px;
}
.signtopbox::before{
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color2);
  border-radius: 5px;
}
.signtext{
  width: max-content;
  margin: 0 10px;
  cursor: pointer;
}
.signtext p{
  font-size: 16px;
  font-weight: 600;
  color: var(--color8);
}
.signtext a{
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--color8);
}
.actside p{
  color: var(--textmaincolor);
}
.actside::before{
  width: 45%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--textmaincolor);
  border-radius: 5px;
}
.signup .actside::before{
  left: 45%;
  width: 55%;
}
.loogedoutnotif{
  position: fixed;
  bottom: 120px;
  right: 20px;
  padding: 8px 20px;
  border-radius: 5px;
  width: max-content;
  background: var(--secondarycolor);
  z-index: 999;
}
.loogedoutnotif p{
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.notcnt{
  padding: 5px 9px;
  border-radius: 50%;
  background: var(--lightbg2);
  font-size: 12px;
}
.topnotct{
  font-size: 14px;
  margin-left: 2px;
  color: var(--maincolor);
}
/* ******************login end************************* */
/* **********************cart****************************** */
  .empty-message{
    margin: 20px auto 10px auto;
  }
  .pboxcart{
    gap:20px;
  }
  .pboxcart p{
    font-size: 16px;
    font-weight: 500;
  }
  .main-price .oldpbx{
    color: var(--color6);
  }
  .m-paracart{
      font-size: 20px;
      color: #4330BF;
  }
  .empty-cart{
      margin-top: 50px;
  }
  .s-paracart{
      padding: 10px 0 0 0 ;
      font-size: 14px;
      color: rgba(0,0,0,0.8);
  }
  .cart{
      background: #f1f3f6;
      padding: 50px 0;
  }
  .cart-heading{
      background: #fff;
      padding: 10px 0;
      margin: 5px auto;
  }
  .cart-item{
      background: #fff;
      padding: 10px 0;
      margin: 10px auto;
      border-radius: 10px;
      border: .5px solid rgba(0,0,0,0.1);
      width: calc(100% - 2px);
  }
  .cart-item .prod-name p{
      font-size: 16px;
      font-weight: 600;
      color: var(--color8);
  }
  .cart-item .prod-name{
    margin-bottom: 0;
  }
  .removefromcart{
    padding: 8px 15px;
    cursor: pointer;
    background: var(--lightbg);
    border-radius: 5px;
    margin: 10px 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    color: var(--color8);
    float: left;
  }
  .cart-item-details{
    display: flex;
    align-items: center;
  }
  .removefromcart svg{
    height: 16px;
    width: 16px;
    color: #ff5b5b;
  }
  .quantity-set{
      margin: 10px auto;
  }
  .quantity-head p{
      font-size: 16px;
      color: rgba(0,0,0,0.8);
      font-weight: 600;
  }
  .quantity-box{
      display: flex;
      justify-content: flex-start;
      margin-top: 5px;
  }
  .quantity-set input{
      width: 45px;
      margin: 0 10px;
      text-align: center;
      border: .5px solid rgba(0,0,0,0.3);
      border-radius: 5px;
  }
  .quants{
      height: 25px;
      width: 25px;
      border-radius: 50%;
      border: .5px solid rgba(0,0,0,0.3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .quants.disabled{
      color: rgba(0,0,0,0.6);
      cursor: not-allowed;
  }
  .out-ofstock-box p{
      font-size: 14px;
      color: red;
  }
  .save-later p{
      border: .5px solid rgba(0,0,0,0.1);
      border-radius: 5px;
      padding: 8px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      white-space: nowrap;
      color: rgba(0,0,0,0.8);
      cursor: pointer;
      margin: 10px 0;
      transition: .5s;
      width: max-content;
      margin-right: 10px;
  }
  .sbuts{
      display: flex;
      justify-content: flex-start;
  }
  .save-later p svg{
      color: rgba(0,0,0,0.3);
      margin-right: 10px;
      position: relative;
      top: -1px;
      transition: .5s;
  }
  .save-later p:hover{
      color: #4330BF;
      border: .5px solid #4330BF;
  }
  .save-later p:hover svg{
      color: #4330BF;
  }
  .placebutton button{
      padding: 8px 0px;
      width: 100%;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background: var(--maincolor);
  }
  .placebutton{
    padding: 10px 0 5px 0;
    border-top: 1px solid rgba(0,0,0,0.1);
  }
  .discount p{
    color: #00A65A!important;
  }
  .price-detailsbox{
      background: #fff;
      border-radius: 10px;
      border: .5px solid rgba(0,0,0,0.1);
  }
  .pdetailshead{
      padding: 10px 0;
      border-bottom: .5px solid rgba(0,0,0,0.1);
  }
  .pdetailshead p{
      font-size: 16px;
      color: rgba(0,0,0,0.8);
      font-weight: 600;
  }
  .pricebif ul{
      list-style-type: none;
  }
  .pricebif li{
      padding: 10px 0 5px 0;
      display: flex;
      justify-content: space-between;
  }
  .pricebif p{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
      font-weight: 500;
  }
  .disc .p-text p{
      color: #57c077;
  }
  .f-amt{
      border-top: .5px solid rgba(0,0,0,0.1);
      padding-bottom: 10px!important;
      margin-top: 5px;
  }
  .f-amt p{
      font-size: 16px;
  }
  .delete-pop{
      position: fixed;
      z-index: 9999999;
      height: 100vh;
      top: 0;
      left: 0;
  }
  .del-pop{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      background: rgba(0,0,0,0.5);
  }
  .poptextbox{
      padding: 20px 0;
      background: #fff;
      border-radius: 20px;
      position: relative;
      width: 400px;
  }
  .iconalert svg{
      height: 70px;
      width: 70px;
      color: red;
  }
  .icontext{
      margin: 10px auto;
  }
  .icontext p{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
  }
  .delbutts button{
      padding: 10px 0;
      width: 100%;
      border-radius: 5px;
      margin: 10px auto;
      border: none;
      transition: .5s;
  }
  .delbutts .delbutton:hover{
      transform: translate3d(0,-5px,0);
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  .delbutton{
      background: rgb(243, 17, 17);
      color: #fff;
      cursor: pointer;
  }
  .cancelbutton{
      color: #4330BF;
      cursor: pointer;
  }
  .start-shopbutton button{
      margin: 10px auto;
      transition: .5s;
  }
  .start-shopbutton button:hover{
      transform: translate3d(0,-5px,0);
  }
  .lopopbox p{
      font-size: 14px;
      margin-top: 10px;
  }
  .lopopbox a{
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      background: linear-gradient(to right,#1e1a4f,var(--textmaincolor));
      padding: 10px 0px;
      display: block;
      width: 100%;
      margin: 5px auto;
      border-radius: 5px;
  }
  .canceltwo{
      background: none;
  }
  .address{
      padding: 50px 0;
      background: #f1f3f6;
  }
  .addresses-box .w50:nth-child(even) .addressbox{
      float: right;
  }
  .addresses-box .w50:nth-child(odd) .addressbox{
      float: left;
  }
  .addressbox{
      background: #fff;
      position: relative;
      padding: 10px 0;
      margin: 10px auto;
      border-radius: 5px;
      border: .5px solid rgba(0,0,0,0.1);
      cursor: pointer;
      transition: .5s;
  }
  .address-name p{
      font-size: 16px;
      font-weight: 600;
      color: rgba(0,0,0,0.8);
  }
  .address-name{
      margin-bottom: 5px;
  }
  .addressfull p{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
  }
  .editbar {
      margin: 10px auto;
  }
  .editbar p{
      font-size: 14px;
      color: #4330BF;
      cursor: pointer;
  }
  .deliverhere{
      margin: 10px auto;
  }
  .deliverhere button{
      padding: 10px 0;
      background:var(--maincolor);
      width: 100%;
      color: #fff;
      font-size: 14px;
      border: 0;
      border-radius: 5px;
  }
  .address-type{
      position: absolute;
      padding: 10px;
      right: 0;
      top: 0;
      background: #e7e4ff;
      border-radius:0 0 0px 5px;
      font-size: 14px;
      color: rgba(0,0,0,0.8);
  }
  .new-address-form{
      background: #fff;
      margin: 10px auto;
      border: .5px solid rgba(0,0,0,0.1);
      width: calc(100% - 2px);
      padding: 10px 0;
  }
  .addt-head p{
      font-size: 14px;
      color: rgba(0,0,0,0.8);
      font-weight: 400;
  }
  .typesofadd label{
      font-size: 14px;
      margin: 10px 10px 10px 0;
      padding: 5px 10px;
      border: 1px solid rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      width: max-content;
      float: left;
      cursor: pointer;
      color: rgba(0,0,0,0.8);
      border-radius: 30px;
  }
  .typesofadd label svg{
      height: 20px;
      width: 20px;
      position: relative;
      top: -2px;
      margin-right: 5px;
  }
  .addresstypes input[type="radio"]{
      display: none;
  }
  .deliverhere button{
      cursor: pointer;
  }
  .address-type svg{
      height: 20px;
      width: 20px;
      position: relative;
      top: 4px;
      margin-right: 5px;
  }
  .emptyadd{
      width: 40%;
      margin: 10px auto;
      overflow: hidden;
  }
  .emptyadd img{
      width: 100%;
      object-fit: contain;
  }
  .noaddress-p p{
      font-size: 20px;
      font-weight: 600;
      color: #1e1a4f;
  }
  .label-name label{
      display: block;
      width: max-content;
      padding: 10px 60px;
      margin: 10px auto;
      background: var(--maincolor);
      border-radius: 5px;
      cursor: pointer;
      color: #fff;
      font-size: 14px;
  }
  .infields .w90{
      margin: 10px auto;
      position: relative;
  }
  .typesofadd input[type="radio"]:checked + label {
      background: #eeecff;
      color: #1e1a4f;
      font-weight: 500;
  }
  .addressbox a{
      text-decoration: none;
  }
  .addformbox{
      width: 450px;
  }
  .saved-address{
      width: calc(100% - 450px);
  }
  .checkout-box .cart-item-details{
      display: flex;
      align-items: center;
  }
  .offers{
      margin: 0px auto ;
  }
  .offerbox{
      margin: 10px auto;
      background: #fff;
      padding: 30px 0;
      border-radius: 5px;
      position: relative;
      z-index: 1;
      cursor: pointer;
  }
  .offerbox::before{
      content: "";
      background: #F1F3F6;
      border-radius: 50%;
      height: 30px;
      width: 30px;
      position: absolute;
      top: -20px;
      left: 25%;
  }
  .offerbox::after{
      content: "";
      background: #F1F3F6;
      border-radius: 50%;
      height: 30px;
      width: 30px;
      position: absolute;
      bottom: -20px;
      left: 25%;
  }
  .offerbox .w95:nth-child(1){
      display: flex;
      align-items: center;
  }
  .offer-head p{
      font-size: 18px;
      color: rgba(0,0,0,0.8);
      font-weight: 600;
  }
  .offer-details{
      margin: 10px auto;
  }
  .offer-details p{
      font-size: 12px;
      font-weight: 400;
      color: rgba(0,0,0,0.6);
  }
  .code {
      width: max-content;
      padding: 5px 20px;
      border: 1px dashed rgba(0,0,0,0.3);
      background: #dfdcff;
      font-size: 14px;
  }
  .applybut button{
      padding: 10px 0px;
      width: 90%;
      margin: 10px auto;
      background: #1e1a4f;
      color: #fff;
      font-size: 14px;
      border-radius: 5px;
      border: 0;
      cursor: pointer;
  }
  .offersbox{
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
  }
  .ofimg{
      height: 50px;
      width: 50px;
      overflow: hidden;
      float: left;
      margin-right: 10px;
  }
  .ofimg img{
      height: 100%;
      width: 100%;
      object-fit: contain;
  }
  .offersbox p{
      font-size: 14px!important;
      color: #57c077!important;
      font-weight: normal!important;
  }
  .ofpara{
      display: flex;
      align-items: center;
      width: calc(100% - 80px);
  }
  .offersbox p:nth-child(2){
    width: 80px;
  }
  .notapplied p , .notapplied svg{
    color: red!important;
  }
  .ofpara p{
    font-size: 14px!important;
    color: rgba(0,0,0,0.8)!important;
    font-weight: normal!important;
    width: calc(100% - 50px)!important;
  }
  .cart .cart-itemimg img{
      width: 100%;
      margin: 0 auto;
      border-radius: 5px;
  }
  .percent-off p{
    color: #00A65A;
  }
  .main-price p{
    text-decoration: line-through;
    color: var(--color6);
    font-weight: 400;
  }
  .cart-heading p{
    font-size:16px;
    font-weight: 600;
    color: var(--color8);
  }
  .planname p{
    font-size: 14px;
    color: var(--textmaincolor);
  }
  .planname{
    margin: 10px auto;
  }
  .checkout-box .cart-itemimg img{
      width: 100%;
      margin: 0 auto;
      border-radius: 5px;
  }
  .offers-popup{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 9999;
      background: rgba(0,0,0,0.5);
  }
  .offerboxpop{
      width: 550px;
      height: 100vh;
      overflow-y: auto;
      padding: 20px 0;
      background: #F1F3F6;
      position: relative;
  }
  .offerlist-heading p{
      font-size: 20px;
      font-weight: 500;
      color: rgba(0,0,0,0.8);
  }
  .offerlist-heading{
      margin-bottom: 10px;
  }
  .offerpopclose{
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
  }
  .offerpopclose svg{
      height: 25px;
      width: 25px;
      color: rgba(0,0,0,0.8);
  }
  .e-promo{
      display: flex;
      align-items: center;
  }
  .promoinput input{
      padding: 10px;
      width: 85%;
      border: 1px solid rgba(0,0,0,0.1);
      margin: 0 5%;
      font-size: 14px;
      color: rgba(0,0,0,0.8);
      text-transform: uppercase;
  }
  .promoinput input::placeholder{
      text-transform: capitalize;
  }
  .loadingbox{
      position: relative;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100vh;
  }
  .prapplied svg{
      color: #57c077;
      position: relative;
      top: 2px;
      margin-left: 2px;
  }
  .promoapp{
      background:#e4ffec;
      border: .5px solid #57c077;
      border-radius: 5px;
      width: calc(100% - 2px);
  }
  .promoapp p.remove-promo{
      color: red!important;
  }
  .gstheading{
    border-radius: 5px;
  }
  .cashback{
      margin: 10px auto;
      display: flex;
      gap: 10px;
  }
  .cashback p{
      font-size: 14px;
      color: #00A65A;
  }
  .cashback svg{
    height: 20px;
    width: 20px;
    color: #00A65A;
  }
  .checkout-box .price-detailsbox{
      border-radius: 5px;
      margin: 10px auto;
      float: left;
      width: calc(100% - 2px);
  }
  .checkout-box .addressbox{
      width: calc(100% - 2px);
  }
  .gst-form{
      background: #fff;
      margin: 10px auto;
      border-radius: 5px;
      padding: 10px 0;
  }
  .gst-heading p{
      font-size: 18px;
      color: rgba(0,0,0,0.8);
      font-weight: 500;
      text-transform: capitalize;
  }
  .applygst{
      display: flex;
      align-items: center;
  }
  .cancelgst p{
      cursor: pointer;
      font-size: 15px;
      color: #d1d1d1;
      display: block;
      background: #F1F3F6;
      padding: 10px 0;
      border-radius: 5px;
      color: rgba(0,0,0,0.8);
  }
  .gst-details{
      margin-top: 10px;
  }
  .soldby{
      display: flex;
      justify-content: flex-start;
      margin: 10px auto;
  }
  .soldby p{
      font-size: 14px;
      color: rgba(0,0,0,0.6);
  }
  .soldby a{
      text-decoration: none;
      color: rgba(0,0,0,0.8);
      font-size: 14px;
      margin-left: 5px;
  }
  .payment-options button{
      padding: 10px 0;
      width: 100%;
      margin: 5px auto;
      font-size: 14px;
      cursor: pointer;
  }
  .paynow button{
      background: var(--maincolor);
      border-radius: 5px;
      border: 0px solid #1e1a4f;
      color: #fff;
      width: 100%;
  }
  .payments{
      margin: 10px auto;
  }
  .cod button{
      background: #fff;
      border-radius: 5px;
      color: rgba(0,0,0,0.8);
      border: 1px solid #1e1a4f;
  }
  .checkout-box .cart-item .prod-name p{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }
  
  .checkmark__circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke: #7ac142;
      fill: none;
      animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
  }
  
  .checkmark {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: block;
      stroke-width: 2;
      stroke: #fff;
      stroke-miterlimit: 10;
      margin: 10px auto;
      box-shadow: inset 0px 0px 0px #57c077;
      animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
  }
  
  .checkmark__check {
      transform-origin: 50% 50%;
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
  }
  
  @keyframes stroke {
      100% {
          stroke-dashoffset: 0
      }
  }
  
  @keyframes scale {
  
      0%,
      100% {
          transform: none
      }
  
      50% {
          transform: scale3d(1.1, 1.1, 1)
      }
  }
  
  @keyframes fill {
      100% {
          box-shadow: inset 0px 0px 0px 30px #7ac142
      }
  }
  .success-page{
      background: #F1F3F6;
      padding: 50px 0;
  }
  .animation-wrapper p{
      font-size: 20px;
      color: #57c077;
      font-weight: 500;
  }
  .orsum p{
      font-size: 20px;
  }
  .orsum.cart-heading{
      background: none;
  }
  .order-summary{
      margin-top: 20px;
  }
  .greenbut{
      background: #57c077;
  }
  .logflex{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
  }
  .saved p{
  color: #847BE2;
  }
  .saved svg{
      color: #847BE2!important;
  }
  .paytmpop{
      position: fixed;
      top: 0;;
      left: 0;
      height: 100vh;
      background: rgba(0,0,0,0.5);
  }
  .paytmpopbox {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
  }
  .upsaleimg{
    cursor: pointer;
  }
  .upsaleimg img{
    width: 100%;
    object-fit: contain;
  }
  .subdiscs {
    padding: 5px 5px 5px 5px!important;
    background: var(--lightwhite);
  }
  .subdiscs p{
    font-size: 12px;
  }
/* **********************cart end****************************** */
/* ***********************dashboard ******************************** */
.sidebar-box{
  width: 250px;
  border-right: 1px solid var(--color1);
  height:calc(100vh - 0px);
  overflow: auto;
  background: #fff;
  position: sticky;
  top: 0;
  /* transition: .5s; */
  z-index: 9;
  overflow-x: hidden;
}
.dashcontent{
  width: calc(100% - 255px);
  transition: .5s;
  background-color: var(--mylight);
}
.dashcontent.collapsed-dash{
  width: calc(100% - 81px);
}
.dashboxmain{
  display: flex;
  flex-wrap: wrap;
}
.dashprofileimg{
  height: 100px;
  width: 100px;
  margin: 10px auto;
  overflow: hidden;
  border:5px solid var(--maincolorlight);
  border-radius: 50%;
}
.dashprofileimg img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.profileimage{
  padding: 40px 0 20px 0;
  position: relative;
  border-bottom: .5px solid var(--color1);
  transition: .5s;;
}
.profilesetting svg{
  font-size: 18px;
  color: var(--maincolor);
  padding: 8px;
  border-radius: 50%;
  background: var(--maincolorlight);
  position: absolute;
  top: 30px;
  right: 5%;
  cursor: pointer;
  animation:circle 5s linear infinite;
}
@keyframes circle{
  0%{
      transform:rotate(0deg);
  }
  100%{
      transform:rotate(360deg);
  }
}
.profilename p{
  font-size: 16px;
  color: var(--maincolor);
  font-weight: 600;
}
.profilesubtext p{
  font-size: 14px;
  color: var(--color6);
}
.profileimage a{
  text-decoration: none;
}
.profilemcount p{
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
}
.profilesubc p{
  font-size: 12px;
  color: var(--color6);
}
.threeboxes{
  margin-top: 20px;
}
.profcount{
  position: relative;
}
.threeboxes .profcount:nth-child(2)::before{
  height: 100%;
  width: 3px;
  background: var(--maincolorlight);
  position: absolute;
  left: 1px;
  top: 0%;
  content: "";
}
.threeboxes .profcount:nth-child(2)::after{
  height: 100%;
  width: 3px;
  background: var(--maincolorlight);
  position: absolute;
  right: 1px;
  top: 0%;
  content: "";
}
.sidebar-user{
  display: flex;
  flex-wrap: wrap;
}
.logoboxdash{
    border-bottom:1px solid var(--color1);
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1;
    background: var(--maincolor);
}
/* width */
.sidebar-box::-webkit-scrollbar {
  width: 3px;
}

/* Track */
.sidebar-box::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.sidebar-box::-webkit-scrollbar-thumb {
  background: var(--maincolor); 
}

/* Handle on hover */
.sidebar-box::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.sidebar-box.collapsed{
  width: 80px;
}
.logoboxdash .logoflex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dashlogo{
    width: 100%;
    height: 49px;
    /* margin: 10px 0; */
    overflow: hidden;
}
.dashlogo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.dashcollapse svg{
    font-size: 16px;
    padding: 8px;
    background: var(--lightbg2);
    color: var(--maincolor);
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    top: 3px;
}
.apphead p{
    font-size: 16px;
    color: var(--maincolor);
    font-weight: 600;
    padding: 10px 0;
    border-bottom: .5px solid var(--color1);
}
.applists ul{
    list-style-type: none;
}
.mainlink a{
    text-decoration: none;
    display: block;
}
.mlinkflex{
    display: flex;
    align-items: center;
    padding: 10px 0;
    transition: .5s;
}
.mainlink:hover{
    background: var(--lightbg);
}
.mainlink.actived{
  background: var(--lightbg);
}
.mainlink:hover .droplevelmain{
    border-left: 3px solid var(--maincolor);
}
.droplevelmain{
    cursor: pointer;
    border-left: 3px solid transparent;
}
.droplevel1{
    cursor: pointer;
    border-left: 3px solid transparent;
}
.droplevel2{
    cursor: pointer;
    border-left: 3px solid transparent;
}
.droplevel3{
    cursor: pointer;
    border-left: 3px solid transparent;
}
.micon{
  height: 18px;
  width: 18px;
}
.micon svg{
    height: 18px;
    width: 18px;
    color: var(--maincolor);
}
.mtext{
    width: calc(100% - 40px);
    margin-left: 10px;
    margin-right: 10px;
}
.mtext p{
    font-size: 14px;
    color: var(--color8);
    font-weight: 600;
}
.mdrop{
  height: 18px;
  width: 18px;
}
.mdrop svg{
    height: 18px;
    width: 18px;
    color: var(--color8);
}
.leveldrops{
    display: none;
    background: #fff;
}
.leveldrops .droplevel1:hover{
    border-left: 3px solid var(--maincolor);
    background: var(--lightbg);
}
.leveldrops .droplevel2:hover{
    border-left: 3px solid var(--maincolor);
    background: var(--maincolorlight);
}
.leveldrops .droplevel3:hover{
    border-left: 3px solid var(--maincolor);
    background: var(--maincolorlight);
}
.mdrop{
    transition: .5s;
    display: block!important;
}
.mdrop.dropped svg{
    transform: rotate(-90deg);
    display: block!important;
}
.collapsed .threeboxes{
  display: none;
}
.collapsed .dashprofileimg{
  display: none;
}
.collapsed .profdetc{
  display: none;
}
.collapsed .profilesetting svg{
  position: relative;
  top: 0;
  right: auto;
}
.collapsed .profilesetting{
  text-align: center;
}
.collapsed .dashlogo{
  display: none;
}
.collapsed .logoboxdash .logoflex{
  padding: 15px 0;
  justify-content: center;
}
.collapsed .apphead p{
  font-size: 12px;
}
.collapsed .mainlink{
  position: relative;
}
.collapsed .mtext{
  position: absolute;
  right: -160px;
  top: 0;
  width: 150px;
  margin: 0;
  height: 100%;
  z-index: 9999;
  background: #fff;
  padding-left: 10px;
  box-shadow: var(--box1);
  display: none;
}
.collapsed .mainlink:hover .mtext{
  display: block;
}
.collapsed .mtext p{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
.collapsed .mlinkflex{
  justify-content: center;
  overflow: visible;
}
.collapsed .droplevelmain{
  overflow: visible;
}
.collapsed .mdrop{
  display: none!important;
  position: absolute;
  right: -150px;
  z-index: 99999;
  top: 10px;
}
.collapsed .mainlink:hover .mdrop{
  display: block!important;
}
.collapsed .mainlink:hover .mdrop svg{
  transform: rotate(-90deg);
}
.collapsed .applists{
  overflow: visible;
}
.collapsed .application-lists{
  overflow: visible;
}
.collapsed{
  overflow: visible;
}
.collapsed .mainlink:hover .leveldrops{
  display: block;
}
.collapsed .leveldrops{
  display: none;
  position: absolute;
  right: -200px;
  width: 200px;
  z-index: 1;
  box-shadow: 0 0 10px var(--color1);
}
.collapsed .leveldrops .w90{
  width:100%;
  justify-content: flex-start;
  padding-left: 10px;
}
.collapsed .leveldrops .mtext{
  display: block;
  width: max-content;
  position: relative;
  left: 0;
  box-shadow: none;
  background: transparent;
}
/********************icon colors**************************/
.icon-yellow i{
    color: #F39C12!important;
}
.icon-blue i{
    color: #00C0EF!important;
}
.icon-red i{
    color: #DD4B39!important;
}
.icon-green i{
    color: #00A65A!important;
}
.icon-white i{
    color: #fff!important;
}
/********************icon colors end**************************/
/*****************top bar****************/
.topbar{
    /* padding: 10px 0; */
    background: var(--maincolor);
    box-shadow: 2px 2px 5px var(--color1);
    border-left:1px solid var(--color1);
    width: calc(100% - 1px);
    height: 50px;
    display: flex;
    align-items: center;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;
}
.topbarflex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notificationslist ul{
    list-style-type: none;
    display: flex;
    align-items: center;
}
.notificationslist li{
    float: left;
    padding: 8px 10px;
    border-radius: 5px;
    background: #EBEEF2;
    margin-left: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .5s;
    color: var(--color8);
    position: relative;
}
.notificationslist li:hover{
    background: #DDE2E9;
}
.notificationslist li svg{
    font-size: 14px;
    color: var(--maincolor);
}
.actdot{
    height: 5px;
    width: 5px;
    margin-left: 5px;
    border-radius: 50%;
    background: #4c78dd;
    display: none;
}
.active-notification .actdot{
    display: block;
}
.leftsearch form{
    background: #EBEEF2;
    display: flex;
    align-items: flex-start;
    border-radius: 5px;
    overflow: hidden;
}
.leftsearch p{
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
}
.leftsearch input{
    padding: 8px 10px;
    font-size: 14px;
    color: var(--color8);
    border: 0;
    background: transparent;
    transition: .5s;
    display: flex;
    width: 250px;
}
.leftsearch input:focus{
    background: #DDE2E9;
}
.leftsearch button{
    background: transparent;
    color: var(--color8);
    border: 0;
    padding: 5px 10px;
    font-size: 16px;
}
.topbardrop{
    position: absolute;
    top: 140%;
    width: 400px;
    background: #fff;
    box-shadow: 0 0 10px var(--color1);
    right: 0;
    border-bottom: .5px solid var(--color1);
    max-height: 450px;
    overflow: auto;
    border-radius: 5px;
    display: none;
}
.notilist li{
    width: 100%;
    background: #fff;
    font-size: 14px;
    margin-left: 0;;
    border-radius: 0;
    border-top: .5px solid var(--color1);
    display: flex;
    align-items: center;
    padding: 10px;
    width: calc(100% - 20px);
    cursor: pointer;
}
.notilist li a{
    display: flex;
    width: 100%;
    padding: 10px 0;
    text-decoration: none;
}
.notilist li:hover{
    background: #f3f8ff;
}
.notilist ul{
    flex-wrap: wrap;
}
.notbox {
    display: flex;
    flex-wrap: wrap;
}
.notiicon{
    height: 20px;
    width: 20px;
    margin-right: 10px;
}
.notiicon svg{
    font-size: 18px;
}
.notitext p{
    font-size: 14px;
    color: var(--color8);
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
.notitext{
    width: calc(100% - 30px);
}
.topnot{
    padding: 10px 0;
}
.topnot p{
    font-size: 16px;
    color: var(--maincolor);
    font-weight: 500;
}
.topnotflex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.noticount {
    display: block;
    padding: 3px 8px;
    width: max-content;
    background: var(--maincolorlight);
    border-radius: 30px;
    font-size: 14px!important;
}
.messages-notification .notiicon{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.notiicon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.messages-notification .notitext{
    width: calc(100% - 50px);
}
.messagehead p{
    font-size: 16px!important;
    color: var(--maincolor)!important;
    font-weight: 500;
}
.messagetext p{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    font-size: 12px!important;
}
.messagetext{
    margin-top: 5px;
}
.messagehead{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.msgtime {
    font-size: 12px;
    color: var(--maincolor);
    text-align: center;
    white-space: nowrap;
}
.profileicon{
    height: 30px;
    width: 30px;
    margin: 0px 10px 0 0px;
    border-radius: 50%;
    overflow: hidden;
}
.profileicon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profiletext p{
    font-size: 14px;
    color: var(--color8);
    font-weight: 500;
}
.logoutbutton p{
    font-size: 12px;
    display: flex;
    align-items: center;
    color: var(--maincolor);
}
.logoutbutton{
    padding: 6px 15px!important;
    background: var(--maincolorlight);
}
.logoutbutton:hover{
    background: var(--maincolor)!important;
}
.logoutbutton:hover p{
    color: #fff;
}
.logoutbutton:hover svg{
    color: #fff;
}
.logoutbutton span{
    margin-left: 5px;
}
/*****************top bar end****************/
.userdashboard{
  background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(/public/bgpattern2.png);
  min-height: 100vh;
  background-size: contain!important;
  background-repeat: repeat!important;
  background-position: center!important;
}
.dashwhitebox {
  /* background: #fff; */
  max-width: calc(1300px - 40px);
  padding: 20px;
  width: calc(100% - 40px);
}
@media only screen and (min-width: 1600px){
  .dashwhitebox {
    margin: 30px auto;
    border-radius: 10px;
  }
}
.dashheading{
  margin: 10px auto;
}
.dashheading  p{
  font-size: 18px;
  font-weight: 600;
  color: var(--color8);
}
.dashboxsub{
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
}
.dashconbox{
  margin: 10px 0;
}
.dashcards .coursename p{
  font-size: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
}
.dashcards .cousetags .subname-course{
  margin: 0!important;
}
.progress-bar{
  position: relative;
  margin: 10px auto ;
}
.validtxt{
  margin-bottom: 10px;
}
.porgbg{
  height: 5px;
  width: 100%;
  background: #d0d2d7;
  position: relative;
  z-index: 1;
}
.progf{
  height: 5px;
  width: 70%;
  position: absolute;
  left: 0px;
  top: 0;
  z-index: 2;
}
.progresstext{
  margin-top: 5px;
}
.progresstext p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
}
.progress10 .progf{
  background: #F43000;
}
.progress40 .progf{
  background: #FE9402;
}
.progress60 .progf{
  background: #7FB300;
}
.progress80 .progf{
  background: #00BF11;
}
.progress10 .progresstext p{
  color: #F43000;
}
.progress40  .progresstext p{
  color: #FE9402;
}
.progress60  .progresstext p{
  color: #7FB300;
}
.progress80  .progresstext p{
  color: #00BF11;
}
.expiredcourse img{
  filter: grayscale();
}
.viewalldashbut{
  color: var(--secondarycolor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 3px;
  border: 0;
  margin-left: 10px;
  background: transparent;
}
.viewalldashbut svg{
  height: 20px;
  width: 20px;
  position: relative;
  top: -1px;
  color: var(--secondarycolor)!important;
}
.emptyimg{
  height: 300px;
  width: 300px;
  margin: 10px auto ;
}
.emptybox{
  margin: 20px auto;
  text-align: center;
}
.emptybox p{
  font-size: 18px;
  font-weight: 500;
  color: var(--color8);
}
.emptyimg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dashcardsflex{
  display: grid;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);

}
.dashboard-card .course-card{
  margin: 10px auto;
  cursor: pointer;
}
.dashboard-card .course-card:hover{
  transform: translate3d(0,-5px,0);
}
.dashboard-card .cousetags li{
  margin: 0!important;
  padding: 5px 0!important;
}
.dashheadingfl{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nottabs ul{
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  width: 98%;
  margin: 0 auto;
}
.nottabs li{
  padding: 0px 10px 5px 10px;
  margin-right: 0;
  color: var(--color8);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  float: left;
  display: flex;
  align-items: center;
}
.nottabs li.acttab::after{
  content: "";
  position: absolute;
  bottom:0px;
  height: 2px;
  width: 100%;
  left: 0;
  background:  var(--textmaincolor);
}
.notcount{
  height: 25px;
  width: 25px;
  background: var(--lightbg2);
  color: var(--textmaincolor);
  margin-left: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nottabs li.acttab{
  color: var(--textmaincolor);
}
.notlist ul{
  list-style-type: none;
}
.notlist{
  margin: 10px auto;
}
.notlist li{
  width: 100%;
  float: left;
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
  border-bottom: 1px solid var(--color1);
  padding: 5px 0;
  position: relative;
  transition: .5s;
}
.notlist li a{
  text-decoration: none;
}
.notiimage{
  height: 60px;
  width: 60px;
  border-radius: 0%;
  overflow: hidden;
}
.notiimage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.notdetails{
  width: calc(100% - 70px);
}
.notifhead p{
  font-size: 14px;
  color: var(--textmaincolor);
  font-weight: 600;
}
.notidetails p{
  font-size: 12px;
  color: var(--color6);
  font-weight: 500;
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
}
.notidetails p .dotnot{
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: var(--maincolor);
  display: block;
  position: relative;
  top: -0.5px;
}
.not-time{
  position: absolute;
  top: 0;
  right: 0;
}
.not-time p{
  font-size: 12px;
  color: var(--color6);
  white-space: nowrap;
  font-weight: 500;
}
.notdot{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: transparent;
}
.actnotif .notdot{
  background: var(--textmaincolor);
}
.bookmarksfl{
  background: #fff;
  padding: 0;
}
.bookmark-card{
  background: var(--lightwhite);
  margin: 10px auto;
  box-shadow: var(--box1);
  border-radius: 5px;
  border: 1px solid var(--color1);
}
.bookmark-card .cimage{
  width: 90%;
  margin: 10px auto 0 auto;
  height: 150px;
}
.bookmark-card .cimage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.bookmark-card a{
  text-decoration: none;
}
.bookmark-details{
  background: #fff;
  padding: 10px 0;
  box-shadow: 0 0px 5px var(--color1);
  margin-top: -5px;
  position: relative;
  z-index: 1;
}
.bookmark-details ul{
  list-style-type: none;
}
.bookmark-details li{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 0;
  border-bottom: .5px solid var(--color1);
}
.titleside{
  max-width: 30%;
  color: var(--color6);
}
.titledesc{
  max-width: 60%;
  color: var(--color8);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.forum-card{
  margin: 10px auto;
  box-shadow: var(--box1);
  background: #fff;
  padding: 10px 0;
  border-radius: 10px;
  position: relative;
}
.pinnedbox{
  position: absolute;
  right: 0px;
  top: 0;
  border-radius: 0px 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--textmaincolor);
  font-size: 14px;
  color: #fff;
  padding: 5px;
  z-index: 2;
}
.countside{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.countside svg{
  height: 20px;
  width: 20px;
  color: var(--color8);
  cursor: pointer;
  margin: 0 auto;
}
.countside p{
  font-size: 16px;
  font-weight: 600;
  color: var(--color8);
}
.upvote.voted{
  color: var(--textmaincolor);
}
.downvote.voted{
  color: #eb2946;
}
.forumhead p{
  font-size: 16px;
  font-weight: 600;
  color: var(--color8);
}
.forumboxpad{
  padding: 10px 0;
}
.forumpara p{
  font-size: 14px;
  color: var(--color6);
  font-weight: 500;
  line-height: 25px;
}
.forumimage{
  width: 95%;
  height: 400px;
  margin: 10px auto 10px auto;
}
.forumimage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}
.loaderinfi{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
}
.forumpara{
  margin: 10px auto;
}
.prf-post{
  display: flex;
  gap: 5px;
}
.makecomment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.proficon-post{
  height: 45px;
  width: 45px;
  border-radius: 50%;
  overflow: hidden;
}
.postedName{
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background: var(--textmaincolor);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff!important;
  font-size: 30px;
}
.proficon-post img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.makecomment .commentsheading{
  border-top: 0;
  float: left;
  width: 200px;
}
.makecomment input{
  width: calc(100% - 240px);
  padding: 10px;
  float: left;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.postdetails{
  padding-top: 10px;
  border-top: 1px solid var(--color1);
  display: flex;
  justify-content: space-between;
}
.postdettop{
  border-top: 0;
  border-bottom: 1px solid var(--color1);
  padding-top: 0;
  overflow: visible;
  padding-bottom: 10px;
}
.firsttopbox{
  padding: 0 0 10px 0!important;
}
.postdetails p{
  font-size: 14px;
  color: var(--color8);
}
@media screen and (max-width: 1500px){
  .postdetails p{
    font-size: 1vw;
  }
}
.postedbyside{
  font-weight: 500;
  display: flex;
  gap: 10px;
}
.commenticon{
  height: 20px;
  width: 20px;
  object-fit: contain;
}
.postedbyside span{
  color: var(--textmaincolor);
}
.postedbyside svg{
  color: #039BE5;
  position: relative;
  top: 2px;
}
.postcomments{
  display: flex;
  align-items: center;
}
.postcomments svg{
  color: var(--textmaincolor);
  margin-right: 5px;
  height: 20px;
  width: 20px;
}
.postcomments p{
  font-weight: 500;
  font-size: 14px;
  color: var(--color6);
}
.forum-card a{
  text-decoration: none;
}
.walletcard{
  margin: 10px auto;
  background:#FFFFFF;
  border-radius: 10px;
  padding: 10px 0;
  position: relative;
}
.walletcard::before{
  content: "";
  height: 100px;
  width: 100px;
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  bottom: -30px;
  right: -30px;
}
.walletcard::after{
  content: "";
  height: 100px;
  width: 100px;
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  bottom: 0px;
  right: -40px;
}
.walletfl .w50:nth-child(1) .walletcard::before{
  background: var(--maincolorlight);
}
.walletfl .w50:nth-child(1) .walletcard::after{
  background: var(--textmaincolor);
}
.walletfl .w50:nth-child(2) .walletcard::before{
  background: #ceedce;
}
.walletfl .w50:nth-child(2) .walletcard::after{
  background: #369e36;
}
.walletfl .w50:nth-child(3) .walletcard::before{
  background: #fdd0d7;
}
.walletfl .w50:nth-child(3) .walletcard::after{
  background: #ed3451;
}
.walletfl .w50:nth-child(4) .walletcard::before{
  background: #f5bf96;
}
.walletfl .w50:nth-child(4) .walletcard::after{
  background: #ff923f;
}
.walletfl .w25:nth-child(1) .walletcard::before{
  background: var(--maincolorlight);
}
.walletfl .w25:nth-child(1) .walletcard::after{
  background: var(--textmaincolor);
}
.walletfl .w25:nth-child(2) .walletcard::before{
  background: #ceedce;
}
.walletfl .w25:nth-child(2) .walletcard::after{
  background: #369e36;
}
.walletfl .w25:nth-child(3) .walletcard::before{
  background: #fdd0d7;
}
.walletfl .w25:nth-child(3) .walletcard::after{
  background: #ed3451;
}
.walletfl .w25:nth-child(4) .walletcard::before{
  background: #f5bf96;
}
.walletfl .w25:nth-child(4) .walletcard::after{
  background: #ff923f;
}
.wallet-icon{
  height: 50px;
  width: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-icon img{
  width: 70%;
  height: 70%;
}
.walicon{
  margin: 0 auto 10px auto;
}
.walletcardhead p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
}
.walletamt p{
  font-size: 35px;
  color: var(--color8);
  font-weight: 600;
}
.walletsub p{
  font-size: 14px;
  color: var(--color6);
}
.walletfl{
  display: flex;
  flex-wrap: wrap;
}
.walletfl .w50{
  display: flex;
}
.walletdata{
  position: relative;
  z-index: 3;
}
.walltearncard{
  display: flex;
  height: 100%;
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 3;
}
.wallettext p{
  font-size: 20px;
  font-weight: 600;
  color: var(--textmaincolor);
}
.wallettext button{
  padding: 5px 10px;
  background: var(--secondarycolor);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  border: 0;
  margin-top: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.transactionhead{
  padding: 5px 0;
  border-bottom: .5px solid var(--color1);
}
.transactiondetail p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
}
.transactiondetail{
  padding: 10px 0;
  border-bottom: .5px solid var(--color1);
  display: flex;
  gap:0 10px;
}
.transactionhead p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
}
.amountplus p{
  color: #369e36;
}
.amountminus p{
  color: #ED3451;
}
.amountreceived p{
  color: #FF923F;
}
.transsubtext p{
  font-size: 12px;
  color: var(--color6);
  font-weight: 500;
}
@media screen and (max-width: 1500px){
  .transactiondetail p{
    font-size: 1vw;
  }
  .transactionhead p{
    font-size: 1vw;
  }
  .transsubtext p{
    font-size: .8vw;
  }
}  
.forumpagebox{
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0 50px 0;
}
.dashheading li p{
  font-size: 14px;
  color: var(--maincolor);
  font-weight: 500;
}
@media screen and (max-width: 1500px){
  .dashheading li p{
    font-size: 1vw;
  }
}
.dashheading li{
  height: 100%;
  margin: 5px;
}
.forumpagebox .postcomments{
  cursor: pointer;
}
.forumpagebox .forum-card{
  padding: 0;
  display: flex;
  background: var(--lightwhite);
  margin: 20px auto;
  border: 1px solid var(--color1);
  flex-wrap: wrap;
}
.forumpagebox .forum-card .w5{
  background: #fff;
  padding: 10px 0;
}
.rightags{
  background: #fff;
  border-radius: 10px;
  margin: 20px auto;
  position: sticky;
  position: -webkit-sticky;
  top: 80px;
}
.forumfl {
  display: flex;
  flex-wrap: wrap;
}
.rightags li{
  width: calc(100% - 40px);
  margin: 10px 0 0 0;
}
.rightags .actcat{
  transform: scale(1);
}
.rightags ul{
  flex-wrap: wrap;
}
.startbutton button{
  margin: 10px auto;
  background: var(--maincolor);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  border: 0;
  width: 100%;
  padding: 10px 0;
}
.startbutton button svg{
  height: 20px;
  width: 20px;
  margin-right:5px;
  position: relative;
  top: -1px;
}
.sticky{
  position: sticky;
  top: 70px;
  position: -webkit-sticky;
  background: #fff;
  z-index: 3;
  border-bottom: .5px solid var(--color1);
  padding-top: 10px;
}
.forumpagecard{
  padding: 10px 0;
  background: #fff;
  position: relative;
}
.commentsheading{
  padding:10px 0;
  border: 1px solid var(--color1);
  border-width: 1px 0 0px 0;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.commentsheading p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
}
.commentnamebox{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px auto;
}
.commentimage {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.commentimage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.commnetname{
  width: calc(100% - 60px);
  margin-left: 10px;
}
.commentmname p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
}
.commentmname{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.commentpara p{
  font-size: 14px;
  color: var(--color6);
  font-weight: 500;
}
.commenttime{
  font-size: 12px;
  color: var(--color6);
  font-weight: 500;
}
.forumpagebox .commimage{
  display: flex;
  align-items: center;
}
.commentbox{
  border-bottom: 1px solid var(--color1);
}
.addcomment {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 25px;
  font-size: 14px; 
  cursor: pointer;
  border-radius: 5px;
  background: var(--lightbg);
  width: max-content;
  font-weight: 500;
  color: var(--textmaincolor);
}
.addcomment svg{
  height: 18px;
  width: 18px;
  margin-right: 5px;
  color: var(--textmaincolor);
}
.popbox{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  height: 100vh;
  background: var(--color5);
  backdrop-filter: blur(2px);
}
@keyframes zoomIn2 {
  0%{
    transform: scale(.2);
  }
  100%{
    transform: scale(1);
  }
}
.postbox{
  background: #fff;
  border-radius: 5px;
  min-height: 65vh;
  max-height: 740px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  animation: zoomIn2 .2s ease-out;
  transform: scale(.2);
  animation-fill-mode: forwards;
  overflow: visible;
}
.postbox .pinnedbox{ 
  right: auto;
  left: 0;
  border-radius: 2px 0 5px 0;
}
.poppost {
  display: flex;
  border-radius: 5px;
}
.poppost .poppost-image{
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.fileattached{
  position: sticky;
  bottom: 33px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.comment-img{
  height: 80px;
  margin:5px 0;
  width: 80px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.commentreplybox .postdetails{
  border: 1px solid rgba(0,0,0,0.1);
}
.attatchedtxt{
  display: flex;
  justify-content: space-between;
}
.replbutton.cacelrep{
  background: #ffe0e0;
}
.replbutton.cacelrep svg{
  color: red;
}
.attatchedtxt p{
  font-size: 14px;
  color: var(--textmaincolor);
  padding: 5px;
}
.remove-file{
  color: red!important;
  font-weight: 500;
  cursor: pointer;
}
.poppost-postside  .postdetails{
  position: sticky;
  bottom: -20px;
  background: #fff;
  z-index: 1;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.poppost-postside{
  padding: 10px 0 20px 0;
  max-height: 700px;
  overflow: auto;
}
.commantmainbox{
  display: flex;
  justify-content: flex-start;
  gap:10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
.commantmainbox:nth-last-child(1){
  border-bottom: 0;
}
.commentpostbx{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.commentpostbx .postcomments{
  width: calc(100% - 100px);
}
.commentpostbx .attach{
  width: 20px;
  margin-right: 10px;
}
.commentpostbx .attach svg{
  height: 20px;
  width: 20px;
  position: relative;
  top: 2px;
  color: var(--color8);
  transition: .5s;
  cursor: pointer;
}
.commentpostbx .attach:hover svg{
  color: var(--textmaincolor);
}
.reportside svg{
  height: 20px;
  width: 20px;
  cursor: pointer;
  margin-top: 10px;
  color: var(--color8);
  transition: .5s;
}
.reportside svg:hover{
  color: var(--textmaincolor);
}
.reportside{
  position: relative;
}
.reportdrop{
  position: absolute;
  width: 200px;
  background: #fff;
  right: 0;
  z-index: 1;
  margin: 5px;
  bottom: -40px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.reportdrop ul{
  list-style-type: none;
}
.reportdrop li{
  padding: 10px;
  width: calc(100% - 20px);
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
  cursor: pointer;
  transition: .5s;
}
.reportdrop li:hover{
  color: red;
}
.reportdrop li svg{
  height: 20px;
  width: 20px;
  color: red;
  position: relative;
  top: 5px;
  margin-top: 0;
  margin-right: 10px;
}
.post-comment form{
  width: 100%;
}
.commentpostbx input{
  width: calc(100% - 20px);
  padding: 0px 10px 0px 0;
  border: 0;
  font-size: 14px;
  color: var(--color8);
}
.addcomment:disabled{
  filter: grayscale();
  cursor: not-allowed;
}
.nocommentimg{
  height: 150px;
  width: 150px;
  margin: 0px auto;
}
.nocommenttxt p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
  text-align: center;
}
.createpostbox{
  min-height: auto;
  background: var(--lightwhite);
}
.createpostmainbox{
  background: #fff;
  padding: 0px 0;
  border-radius: 10px;
  margin: 10px auto 30px auto;
}
#createpost{
  transition: .5s;
  background: var(--textmaincolor);
}
#createpost:disabled{
  filter: grayscale();
  cursor:not-allowed;
}
.topbarcreate{
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.attachedfiles{
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
}
.mediabox{
  margin: 10px auto 0 auto;
}
.attachimg{
  width: 100px;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.1);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.attachimg svg{
  position: absolute;
  top: -5px;
  right: -5px;
  height: 15px;
  width: 15px;
  padding: 5px;
  border-radius: 50%;
  background: var(--lightwhite);
  cursor: pointer;
}
.attachedfiles img{
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.topbarcreate label{
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: .5s;
  cursor: pointer;
  width: max-content;
}
.topbarcreate svg{
  height: 16px;
  width: 16px;
  margin-right: 10px;
}
.topbarcreate label:hover{
  color: var(--textmaincolor);
}
.createdata{
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.createdata textarea{
  padding: 10px;
  width: calc(100% - 20px);
  border: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color8);
}
.nocomments{
  margin-bottom: 10px;
}
.nocommentimg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.commentpostbx .addcomment{
  width: 70px;
  padding: 5px 0;
  border: 0;
  transition: .5s;
}
.commantmainbox .profdetbox-post{
  display: flex;
  justify-content: space-between;
}
.replies-post{
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin: 5px auto;
}
.replies-post button{
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: var(--lightwhite);
  color: var(--color6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.replybox{
  background: var(--lightwhite);
  width: calc(100% - 20px);
  padding: 10px;
}
.replybox .replies-post button{
  border: .5px solid rgba(0,0,0,0.1);
}
.replyhead{
  font-size: 12px;
  font-weight: 500;
  color: var(--color8);
  padding: 5px 0;
}
.commenttopbox{
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
.commentimg{
  width: 50px;
}
.commentdata{
  width: calc(100% - 50px);
}
.commantmainbox .commentnamebox{
  margin: 5px auto 0px auto;
}
.commantmainbox .forumpara{
  margin: 0 auto;
}
.postbox .closePop{
  top: -14px;
  right: -29px;
}
.postbox .closePop svg{
  border-radius: 50%;
  background: #333;
  color: #fff;
}
.commantmainbox .posttime p{
  font-size: 12px;
  font-weight: 500;
  color: var(--color6);
  white-space: nowrap;
  margin-right: 5px;
}
.posttime{
  display: flex;
  align-items: center;
}
.commentnamebox .reportdrop li{
  padding: 5px 10px;
  font-size: 12px;
}
.commentnamebox .reportdrop li svg{
  height: 14px;
  width: 14px;
  top: 3px;  
}
.posttime svg{
  margin-top: 0;
}
.poppost-image{
  background: var(--lightwhite);
}
.popflex{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.closePop{
  position: absolute;
  top: 0;
  right: 0;
}
.closePop svg{
  height: 25px;
  width: 25px;
  padding: 10px;
  background: var(--lightbg);
  border-radius: 0 0 0px 10px;
  cursor: pointer;
}
.popheading p{
  font-size: 20px;
  font-weight: 600;
  color: var(--color8);
}
.repotedbox{
  width: 600px;
  position: fixed;
  bottom: -100%;
  animation: upped .5s linear forwards;
  background: #000;
  padding: 10px;
  border-radius: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999999;
  text-align: center;
}
.repotedbox svg{
  height: 16px;
  width: 16px;
  margin-right: 5px;
  color: #00A65A;
  position: relative;
  top: 2px;
}
@keyframes upped {
  0%{
    bottom: -100%;
  }
  100%{
    bottom: 20px;
  }
}
.repotedbox p{
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.popheading {
  margin: 10px auto;
}
.coursesdashpage .dashcardsflex{
  background: #fff;
  padding: 0;
}
.coursesdashpage .coursename p{
  font-size: 18px;
}
.coursesdashpage{
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 1500px){
  .coursename p{
    font-size: 1.2vw;
  }
  .cousetags li{
    font-size: 1vw;
  }
}
.profilebox{
  padding: 50px 0;
}
.profbx{
  background: #fff;
  padding: 30px 0;
  border-radius: 10px;
  box-shadow: var(--box1);
  margin: 10px auto;
}
/* *******************profile***************** */

.refreshbtn{
  position: absolute;
  font-size: 12px;
  color: #FFFFFF;
  padding: 5px 10px;
  border-radius: 5px;
  right: 0;
  background-color: var(--textmaincolor);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.tabs-top {
  position: relative;
  margin: 30px auto;
}
.tabsmain{
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  color: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}
.tabsmain svg{
  height: 20px;
  width: 20px;
  position: relative;
  top: 3px;
  left: -5px;
  transition: .2s;
}
.tabsmain:hover svg{
  left: -15px;
}
.acttab2{
  background:var(--textmaincolor);
  color: #fff;
}
.acttab2.tol{
  background:var(--textmaincolor);
}
.tabs-top{
  background: #fff;
  border-radius: 30px;
  width: max-content;
  overflow: hidden;
  box-shadow: var(--box1);
}
.tabs-top .tabsmain {
  white-space: nowrap;
  padding: 10px 30px;
}
.profile-heading p{
  font-size: 25px;
  font-weight: 500;
  color: #1E1A4F;
}
.profileimageinside{
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 10px auto;
  overflow: hidden;
  border: 10px solid var(--maincolorlight);
}
.profileimageinside img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.applybuttons button{
  background: var(--maincolor);
  padding: 10px 40px;
  border-radius: 30px;
  border: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
}
.applybuttons button:disabled{
  cursor: not-allowed;
  background: grey;
}
.errormessage p{
  font-size: 14px;
  color: red;
  font-weight: 500;
}
.insideloadinf{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  height: 450px;
}
.details .ins input{
  width: calc(70% - 0px);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.1);
  margin: 10px auto;
}
.details{
  text-align: center;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.details .logoutButton{
  margin: 10px auto;
}
.details .logoutButton svg{
  position: relative;
  left: 5px;
  transition: .5s;
}
.details .logoutButton button:hover svg{
  left: 15px;
}
.prof-img {
  width: 100%;
}
.prof-img img{
  width: 100%;
  object-fit: contain;
}
.notedit input{
  background: #e9e9e9;
  cursor: not-allowed;
}
.ins p{
  font-size: 14px;
  color: red;
}
.changeimg input{
  display: none;
}
.changeimg label{
  padding: 5px 15px;
  background: #c1c1ff;
  display: flex;
  align-items: center;
  width: max-content;
  margin: 5px auto;
  color: rgba(0,0,0,0.8);
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.changeimg svg{
  margin-right: 10px;
  position: relative;
  top: -2px;
}
/* *************profile end********************* */
.walboxes{
  padding: 50px 0 20px 0;
}
.insideloading{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.addressdashbox {
  padding: 50px 0 50px 0;
}
.packagedatabox{
  background: #fff;;
}
.packagedatabox.course-card{
  cursor: auto;
  position: sticky;
  position: -webkit-sticky;
  top: 120px;
}
.exptxt span{
  color: red;
}
.exptxt p{
  font-size: 12px;
  font-weight: 500;
  color: var(--color8);
}
.packagedatabox.course-card:hover{
  transform: translate3d(0,0,0);
}
.cardsinbox{
  background: #fff;
  box-shadow: var(--box1);
  border-radius: 10px;
  padding: 20px 0;
}
.packagebox{
  display: flex;
  padding: 50px 0;
}
.dashpackhead p{
  font-size: 25px;
  font-weight: 500;
  color: var(--maincolor);
}
.dashpackhead{
  margin-bottom: 20px;
}
.packlists li{
  width: 100%;
}
.dashboardpage{
  background: #fff;
}
.dahempimg{
  width: 400px;
  margin: 40px auto 10px auto;
}
.dahempimg img{
  width: 100%;
  object-fit: contain;
}
.dashtext p{
  font-size: 14px;
  font-weight: 600;
  color: var(--color8);
}
.nonot{
  height: 200px;
}
.notifloading{
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nonot img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.nonotimg{
  padding: 10px 0;
}
.nonotimg p{
  font-size: 14px;
  font-weight: 600;
  color: var(--color8);
}
.nontif {
  background: var(--lightwhite);
}
.viewallnotif{
  padding: 0px 0 10px 0;
}
.viewallnotif a{
  text-decoration: none;
  padding: 5px 20px;
  background: var(--textmaincolor);
  color: #fff;
  font-size: 14px;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 30px;
}
.viewallnotif a svg{
  color: #fff;
}
.notilbox a{
  margin: 10px 0 0 0;
}
.notilbox{
  border-top: 1px solid rgba(0,0,0,0.1);
}
.nottabs li{
  background: transparent;
  cursor: initial!important;
}
.nottabs li:hover{
  background: transparent;
}
.notdrop li{
  padding:10px;
  width: calc(100% - 20px);
}
.notdrop .not-time{
  right: 10px;
  top: 5px;
}
.notdrop{
  width: 100%;
}
.notfmbox{
  display: flex;
  justify-content: flex-start;
}
.notfilistside{
  width: 500px;
}
.notfidatabox{
  width: calc(100% - 500px);
}
.notificationspg{
  padding:20px 0;
}
.notfipagebox{
  padding: 0!important;
  width: 100%!important;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.notificationspg .nottabs li{
  padding: 10px 0;
}
.notfdatabox{
  background: #fff;
  height: calc(100vh - 120px);
  overflow: auto;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0.1);
  position: sticky;
  position: -webkit-sticky;
  top: 100px;
}
.notiftitle{
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.notifpdata{
  width: calc(100% - 100px);
}
.notiftit p{
  font-size: 18px;
  font-weight: 600;
  color: var(--textmaincolor);
}
.proceddnot{
  width: 100px;
}
.proceddnot button{
  width: 100%;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--maincolor);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.notifdate p{
  font-size: 14px;
  font-weight: 500;
  color: var(--color6);
}
.notifimg{
  margin: 0px auto 10px auto;
}
.notifimg img{
  width: 100%;
  object-fit: contain;
}
.notifbody{
  padding: 0px 0 20px 0;
}
.notilist li.showednotif{
  background: var(--lightbg);
}
.notifurl a{
  color: var(--textmaincolor);
  font-size: 16px;
}
.notifurl{
  padding-bottom: 20px;
}
.notfilistside ul{
  list-style-type: none;
}
.notinfiload{
  height: auto;
}
/* ***********************dashboard end******************************** */   
.appdownload{
  padding: 50px 0;
}
.appbox{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--lightwhite);
  border-radius: 20px;
  padding: 40px 0;
}
.appbox .mainheading p{
  font-size: 50px;
}
.appbox .subtext{
  margin: 0 auto 10px auto;
}
.downloadtext p{
  font-size: 18px;
  color: #016fe9;
  font-weight: 600;
}
.downloadtext {
  margin: 20px auto 0 auto;
}
.qrimg{
  width: 100%;
  height: 200px;
  margin: 10px auto;
}
.qrimg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ownloadbut{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 90%;
  padding: 10px 0;
  margin: 10px auto;
  background: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.ownloadbut svg{
  height: 30px;
  width: 30px;
}
.toptxt p{
  font-size: 12px;
  color: var(--color6);
  font-weight: 500;
} 
.butmain p{
  font-size: 18px;
  color: var(--color8);
  font-weight: 600;
}
.buttext{
  text-align: left;
}
.appimage{
  width: 100%;
}
.appimage img{
  width: 100%;
  object-fit: contain;
}
.countermainbox{
  display: flex;
  align-items: center;
}
.countermainbox{
  position: relative;
}
.counterside .w50:nth-child(odd) .countcard{
  float: left;
}
.counterside .w50:nth-child(even) .countcard{
  float: right;
}
.counterside .headings{
  position: relative;
  z-index: 2;
}
.counter-count p{
  font-size: 20px;
  font-weight: 600;
  color: var(--maincolor);
}
.countersub p{
  font-size: 14px;
  color: var(--color6);
  font-weight: 500;
}
.countcard{
  margin: 10px auto;
  background: #fff;
  box-shadow: 2px 3px 2px var(--maincolorlight);
  padding: 20px 0;
  border-radius: 10px;
  text-align: center;
  border: .5px solid var(--maincolorlight);
}
.counticon{
  height: 60px;
  width: 60px;
  border-radius: 10px;
  background: var(--lightbg);
  margin: 0px auto 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.counticon img{
  height: 70%;
  width: 70%;
}
.mappeopleimage{
  width: 100%;
  height: 100%;
}
.mappeopleimage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.counter{
  padding: 50px 0;
  background-repeat: no-repeat!important;
  background-size: cover!important;
  background-position: center!important;
  position: relative;
}
.countryside{
  position: relative;
}
.peopleside{
  position: absolute;
  z-index: 1;
  height: 80%;
  width: 50%;
  left: 20%;
  top: 10%;
  opacity: .5;
}
.countermain{
  position: relative;
  z-index: 2;
  display: flex;
}
.countermain .w33:nth-child(2){
  display: block;
}
.countermain .w33:nth-child(3){
  margin-top: 30px;
}
.countermain .w33{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/* *******************popup*************** */
.popup{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 9999;
  display: block;
}
.popboxmain{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
}
.popsubtext{
  margin: 10px auto;
}
.popsubtext p{
  font-size: 14px;
  color:var(--color6);
  line-height: 25px;
}
.popmainbox{
  width: 400px;
  padding: 20px 0;
  border-radius: 10px;
  background: #fff;
  position: relative;
}
.popheading p{
  font-size: 20px;;
  color: var(--color8);
  font-weight: 600;
  text-transform: capitalize;
}
.poploginbutton a{
  text-decoration: none;
  width: max-content;
  padding: 8px 0px;
  width: 100%;
  background: var(--textmaincolor);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  display: block;
  border-radius: 5px;
  margin: 10px auto 0 auto;
}
.popor{
  margin: 5px auto;
  position: relative;
}
.popor p{
  display: block;
  width: max-content;
  padding: 2px 5px;
  background: #fff;
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.popor::before{
  position: absolute;
  height: 2px;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  background: linear-gradient(to right,rgba(0,0,0,0.3),rgba(0,0,0,1),rgba(0,0,0,0.3) );
  left: 25%;
  z-index: 1;
}
.popsignup a{
  text-decoration: underline;
  font-size: 14px;
  color: var(--maincolor);
  font-weight: 500;
  display: block;
}
/* *******************popup end*************** */
.cardtags li{
  margin: 5px auto;
  width: calc(100% - 15px);
  float: left;
  padding: 0!important;
  color: var(--color8);
  padding-left: 15px!important;
  position: relative;
}
.cardtags li::before{
  content: "";
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: var(--maincolor);
  left: 3px;
  position: absolute;
  top:10px;
  transform: translateY(-50%);
}
.cardtags li span{
  color: var(--maincolor);
}
.course-card .coursename p{
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  overflow: hidden;
}
.successpop{
  position: fixed;
  top: 150px;
  right: 10px;
  padding: 10px 20px;
  border-radius: 3px;
  background: #00A65A;
  z-index: 999;
}
.successpop p{
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  gap:10px;
  align-items: center;
}
.sucscart{
  height: 25px;
  width: 25px;
  object-fit: contain;
}
.paymentPopup{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: #fff;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.closepayment{
  position: fixed;
  z-index: 999999999;
  top: 20px;
  right: 20px;
}
.closepayment svg{
  height: 30px;
  width: 30px;
  color: var(--color8);
  cursor: pointer;
}
.redirecttext{
  font-size: 30px;
  font-weight: 600;
  color: var(--color8);
  text-align: center;
  margin: 10px auto 5px auto;
}
.redirectsubt{
  font-size: 18px;
  color: var(--color8);
  text-align: center;
  font-weight: 600;
}
.gstinf input{
  width: calc(100% - 22px);
  border-width: .5px;
  margin-left: 0;
  margin-bottom: 10px;
  border-radius: 3px;
}
.cardboxcname p{
  font-size: 16px!important;
}
.cardboxcname{
  margin: 0px auto 0 auto;
  float: left;
}
.cookiepopup{
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #fff;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 250px;
  z-index: 9999;
}
.cookieimage{
  height: 50px;
  width: 50px;
  margin: 0 auto 10px auto;
}
.cookieimage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cookiesubtext p{
  font-size: 12px;
  color: var(--color6);
  line-height: 16px;
  font-weight: 500;
}
.cookieimg{
  margin-top: -15px;
}
.cookiebuttons{
  margin: 10px auto;
}
.cookiebuttons a{
  text-decoration: none;
  width: 100%;
  padding: 5px 0;
  background: var(--lightbg);
  font-size: 12px;
  color: var(--color8);
  display: block;
  text-align: center;
  border-radius: 3px;
}
.cookiebuttons button{
  width: 100%;
  padding: 5px 0;
  background: #2ECC71;
  font-size: 12px;
  color: var(--color8);
  display: block;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  border: 0;
  color: #fff;
  font-weight: 500;
}
.sucesspage{
  position: relative;
  height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lightwhite);
}
.sucimg{
  width: 100%;
  height: 200px;
}
.sucimg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.orderporp{
  position: relative;
  z-index: 5;
  padding: 10px 0;
  border-radius: 10px;
  background: #fff;
  margin: 10px auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 400px;
}
.orplacedtext{
  margin: 10px auto;
}
.orplacedtext p{
  font-size: 16px;
  font-weight: 500;
  color: var(--color8);
}
.continueshop a{
  display: block;
  text-align: center;
  width: max-content;
  padding: 8px 20px;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  background: var(--maincolor);
  margin: 0 auto;
  border-radius: 5px;
}
.continueshop{
  margin-bottom: 10px;
}
.spinner {
  margin: 0px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
.cancelbutton{
  padding: 8px 0;
  width: 95%;
  background: var(--lightwhite);
  border-radius: 5px;
  color: var(--color8);
  border: 0;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  margin: 10px auto;
}
.removebut {
  padding: 8px 0;
  width: 95%;
  background: var(--maincolorlight);
  border-radius: 5px;
  color: #000;
  border: 0;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  margin: 10px auto;
}
.defaultimage{
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--maincolor);
}
.defaultimage img{
  width: 80%;
  height: 80%;
  object-fit: contain;;
}
/* *************************chat bot********************** */
.chaticon{
  position: fixed;
  right: 20px;
  bottom: 20px;;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: var(--maincolor);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
}
.chaticon svg{
  height: 30px;
  width: 30px;
  color: #fff;
}
.chatboxm{
  position: fixed;
  bottom: 100px;
  right: 30px;
  height: 550px;
  width: 350px;
  background: #fff;
  border-radius: 30px 30px 10px 10px;;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  z-index: 999;
}
.cahttopsection{
  padding: 20px 0 50px 0;
  background: var(--maincolor);
  border-radius: 30px 30px 0px 0px;;
}
.topchathead p{
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 5px;
}
.topchatsub p{
  font-size: 12px;
  color: #fff;
}
.search-chat{
  margin: 10px auto 0 auto;
}
.search-chat form{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #fff;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
}
.search-chat button{
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--maincolor);
  border: 0;;
  border-radius: 30px;
  cursor: pointer;
  margin-right: 1px;
}
.search-chat input{
  width: calc(100% - 55px);
  padding: 8px 0 8px 15px;
  font-size: 14px;
  border-radius: 30px;
  border: 0;
}
.search-chat button svg{
  height: 20px;
  width: 20px;
}
.chatlowerbox{
  background: #fff;
  border-radius: 30px 30px 0px 0px;
  margin-top: -30px;
  padding: 20px 0;
  max-height: 340px;
  overflow: auto;
}
.chatheads .chatlowerbox{
  max-height: 364px;
  border-radius: 30px 30px 0px 0px;
}
.commonheadingchat p{
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
}
.chatqflex{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.questionboxchat{
  background: var(--lightwhite);
  padding: 10px 0;
  border-radius: 10px;
  margin: 10px auto 0 auto;
  cursor: pointer;
}
.chatqimg{
  height: 45px;
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.chatqimg img{
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.quesarrow svg{
  height: 20px;
  width: 20px;
  color: var(--maincolor);
}
.chatrightq{
  width: calc(100% - 55px);
  display: flex;
  grid-area: 10px;
  justify-content: space-between;
}
.chatquestion{
  width: calc(100% - 30px);
  overflow: hidden;
}
.chatquestion p{
  font-size: 14px;
  font-weight: 600;
  color: var(--color8);
}
.questionsload{
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.commonheadflx{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chatback{
  padding: 7px 8px;
  background: var(--lightbg);
  width: max-content;
  border-radius: 5px;
  cursor: pointer;
  color: var(--maincolor)!important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px!important;
}
.answerpop{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: var(--color5);
  z-index: 9999;
}
.answerbxpop{
  background: #fff;
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: 20px 0;
  border-radius: 10px;
  position: relative;
}
.anwerpopbox{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.closeanswer{
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px;
  background: var(--color8);
  border-radius: 0 0 0 10px;
}
.closeanswer svg{
  height: 20px;
  width: 20px;
  color: #fff;
  cursor: pointer;
  display: block;
}
.chatnowbox .chaticon{
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  height: 50px;
  width: 50px;
}
.chatnowbox .chaticon svg{
  height: 20px;
  width: 20px;
}
.nchatbx{
  background: var(--lightwhite);
  padding: 10px 0;
  border-radius: 10px;
  margin: 20px auto;
  cursor: pointer;
}
.nchatflex{
  display: flex;
  gap: 10px;
}
.chatnowtext{
  width: calc(100% - 60px);
}
.chatnowhead{
  font-size: 16px;
  font-weight: 600;
  color: var(--color8);
}
.chatnowsub{
  font-size: 12px;
  font-weight: 500;
  color: var(--color8);
}
.chatheads .topchathead{
  position: relative;
}
.chatheads .chatback{
  position: absolute;
  left: 0;
}
.chatheads .chatlowerbox{
  display: flex;
  flex-wrap: wrap;
}
.chattabs{
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.ctab{
  width: max-content;
  background: var(--lightbg);
  border-radius: 30px;
  display: flex;
  justify-content: center;
}
.ctabbox{
  padding: 8px 20px;
  border-radius: 30px;
  cursor: pointer;
}
.ctabbox p{
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
}
.actchattab{
  background: var(--maincolor);
}
.actchattab p{
  color: #fff;
}
.noactchatimg{
  height: 200px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}
.noactchatimg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.noactpara p{
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
}
.chatnowbutton button{
  padding: 0px 0px;
  border-radius: 30px;
  background: var(--lightbg);
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
}
.chatnowbutton svg{
  height: 20px;
  width: 20px;
  padding: 10px;
  background: var(--maincolor);
  border-radius: 50%;
  color: #fff;
}
.chatnowbutton p{
  padding: 0 20px 0 10px;
}
.fxchatnow{
  position: fixed;
  position: -webkit-sticky;
  bottom: 100px;
  right: 40px;
}
.userchat .topchathead p{
  font-size: 14px;
}
.userchat .topchathead{
  padding: 7px 0;
  align-items: center;
}
.userchat .chatiusercon{
  height: 35px;
  width: 35px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  right: 0;
  overflow: hidden;
}
.userchat .chatiusercon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chatlowerbox.userchat{
  background: var(--lightwhite);
  height: 100%;
}
.typechat{
  position: fixed;
  bottom: 100px;
  border-radius: 0 0 10px 10px;
  right: 30px;
  width: 350px;
  padding: 10px 0;
  background: #fff;
  z-index: 999;
}
.attachchat svg{
  height: 20px;
  width: 20px;
  display: block;
  color: var(--maincolor);
  cursor: pointer;
}
.typechatflx{
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 10px; */
}
.typechat input{
  width: calc(100% - 110px);
  padding: 10px 10px 10px 15px;
  margin: 0 5px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 30px;
}
.typechat button{
  height: 40px;
  width: 40px;
  background: var(--maincolor);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
}
.typechat button svg{
  height: 20px;
  width: 20px;
  color: #fff;
}
.messagebubble{
  position: relative;
  padding: 10px;
  margin: 10px auto;
  width: calc(90% - 20px);
}
.staffmessage .messagebubble{
  background: var(--maincolor);
  margin-left: 10px;
  border-radius: 0 20px 20px 20px;
}
.staffmessage .messagebubble *{
  color: #fff;
}
.studentmessage .messagebubble{
  background: #fff;
  margin-right: 10px;
  border-radius: 20px 0px 20px 20px;
}
.chatlowerbox.userchat::-webkit-scrollbar {
  width: 0px;
}
.messagefiles img{
  height: 100px;
  width: 100%;
  object-fit: contain;
  object-position: left;
}
.messagedata p{
  font-size: 12px;
  font-weight: 400;
  color: var(--color6);
}
.messagedata p span{
  font-size: 12px;
  font-weight: 500;
  color: var(--color8);
}
.attachched{
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.attachched p{
  font-size: 14px;
  font-weight: 500;
  color: var(--maincolor);
}
.attachched svg{
  height: 20px;
  width: 20px;
  cursor: pointer;
  color: red;
  display: block;
}
.attachments-chat{
  position: relative;
  top: -7px;
  border: 1px solid rgba(0,0,0,0.1);
  border-width: 1px 0 1px 0;
}
.replynow{
  position: absolute;
  top: 2px;
  right: 2px;;
  cursor: pointer;
}
.replynow svg{
  height: 20px;
  width: 20px;
  color: var(--textmaincolor)!important;
  cursor: pointer;
  display: block;
}
.staffmessage .replynow{
  right: 10px;
}
.replyboxchat span{
  font-size: 10px;
  font-weight: 500;
  color: var(--color6);
  display: block;
}
.msgreplycht{
  width: calc(100% - 25px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px!important;
  font-weight: 500!important;
  color: var(--color6)!important;
}
.msgreplycht *{
  font-size: 12px!important;
  font-weight: 500!important;
  color: var(--color6)!important;
}
.repliedto{
  margin: 0 10px!important;
  border-radius: 20px 0 0 0!important;
}
.repliedtohead{
  font-size: 12px!important;
  font-weight: 500!important;
}
.repliedto{
  background: var(--lightbg)!important;
}
.pendrevhead p{
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
}
.yesnochat{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.yesnochat span{
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--lightbg);
  display: block;
  width: max-content;
  cursor: pointer;
  margin: 10px 0;
}
.lastmessagechat{
  padding:5px 10px;
  width: calc(95% - 20px);
  background: var(--lightwhite);
  margin-bottom: 5px;
  border-radius: 3px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
  transition: .2s;
}
.lastmessagechat:hover{
  background: var(--lightbg);
}
.lastmsgicon{
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lastmsgicon img{
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.lastmsgtext {
  width: calc(100% - 60px);
}
.lastmsgtop{
  display: flex;
  justify-content: space-between;
}
.lastmsgtop p{
  font-size: 12px;
  font-weight: 500;
  color: var(--color8);
}
.lastmsgcht p{
  font-size: 12px;
  font-weight: 400;
  color: var(--color6);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}
.newmsgdot{
  height: 8px;
  width: 8px;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  background: var(--maincolor);
}
.thanksforrevpop{
  position:relative;
  top: 100px;
  background: #000;
  padding: 10px;
  width: calc(100% - 20px);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
  gap: 10px;
  animation: getUp .2s ease-in forwards;
}
@keyframes getUp {
  from{
    top: 100px;
  }
  to{
    top: 0;
  }
}
.thanksforrevpop p{
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}
.thanksforrevpop svg{
  height: 18px;
  width: 18px;
  color: #00A65A;
  display: block;
}
/* *************************chat bot end********************** */

.dashboardcard .course-card{
  display: flex;
}
.dashboardcard a{
  width: 100%;
  display: flex;
}
.dashboardcard .cousrse-details{
  display: flex;
  align-items: center;
}
.coursespg{
  position: relative;
}
.coursespg .archivethis{
  position: relative;
}
.archflex{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap:10px;
  flex-wrap: wrap;
}
.coursespg .archivethis button{
  padding: 5px;
  width: calc(100% - 10px);
  background: var(--maincolor);
  color: #fff;
  font-size: 12px;
  border: 0;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 500;
}
.dashboardcard .cardtogo{
  display: flex;
  justify-content: center;
}
.dashboardcard .course-image{
  display: flex;
}
.dashboardcard .course-image .cimage{
  height: 100%;
}
.dashboardcard .course-image .cimage img{
  height: 100%;
  object-fit: cover;
}
.dashboardcard .defaultimage{
  height: 130px!important;
}
.dashboardcard .defaultimage img{
  object-fit: contain!important;
}
.blogs{
  padding: 50px 0;
}
.blogsloading{
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blogcard a{
  text-decoration: none;
}
.blogscards{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px auto;
}
.blogscards .w25{
  display: flex;
}
.blogcard{
  border: 1px solid var(--color1);
  margin: 20px auto;
  transition: .5s;
  background: #fff;
  transition: .5s;
  box-shadow: 0 0 10px var(--color1);
}
.blogcard:hover{
  transform: translate3d(0,-10px,0);
}
.blimg{
  width: 100%;
}
.blimg img{
  width: 100%;
  object-fit: contain;
}
.defblogs{
  height: 200px;
  background: var(--maincolor);
}
.defblogs img{
  height: 100%;
  object-fit: contain;
}
.blogdatacard{
  padding: 10px 0;
}
.blogname p{
  font-size: 18px;
  font-weight: 600;
  color: var(--color8);
}
.blogsubtxt{
  margin: 10px auto;
}
.blogsubtxt p{
  font-size: 14px;
  font-weight: 500;
  color: var(--color6);
}
.blogread p{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  padding: 8px 10px;
  background: var(--maincolor);
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
}
.blogread svg{
  display: block;
  height: 18px;
  width: 18px;
}
.blogban{
  width: 100%;
  margin: 0px auto 20px auto;
}
.blogban img{
  width: 100%;
  object-fit: contain;
}
.blogpage{
  background: var(--lightwhite);
}
.blogpgbox{
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--color1);
  margin: 10px auto;
}
.blogdata {
  padding: 10px 0;
}
.blogpgrel{
  padding-bottom: 0;
}
.promoloading{
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.archdone{
  left: 60%;
}
.resultsbox{
  display: flex;
  flex-wrap: wrap;
}
.resultfiltside{
  width: 350px;
  padding-top: 110px;
}
.resultdataside {
  width: calc(100% - 350px);
}
.resultslist ul{
  list-style-type: none;
}
.resultslist li a{
  text-decoration: none;
  width: 100%;
}
.resultslist li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 20px);
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: .5s;
  padding: 10px;
}
.resultslist li:hover{
  background: var(--lightbg);
}
.resultslist .leftres{
  width: calc(100% - 50px);
}
.rightres{
  width: 50px;
  text-align: right;
}
.rightres svg{
  height: 20px;
  width: 20px;
  color: var(--maincolor);
}
.resutop p{
  font-size: 16px;
  font-weight: 500;
  color: var(--textmaincolor);
}
.subres p{
  font-size: 12px;
  font-weight: 500;
  color: var(--color6);
}
.subres span{
  font-weight: 600;
  color: var(--color8);
}
.subres{
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
}
.submid {
  font-size: 14px;
  color: var(--color8);
  font-weight: 600;
}
.resultfilters{
  background: #FFFFFF;
  padding: 20px 0;
  border-radius: 10px;
  position: sticky;
  position: -webkit-sticky;
  top: 120px;
}
.filterheading p{
  font-size: 18px;
  font-weight: 600;
  color: var(--color8);
}
.filterheading{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filterheading svg{
  height: 20px;
  width: 20px;
}
.filtersbox{
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color1);
}
.filtbxhead{
  margin-bottom: 10px;
}
.filtbxhead p{
  font-size: 14px;
  font-weight: 600;
}
.filtervals ul{
  list-style-type: none;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.filtervals ul li{
  padding: 5px 15px;
  border: 2px solid var(--lightbg2);
  background: var(--lightbg);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  color: var(--textmaincolor);
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.selectedfil{
  background: var(--maincolor)!important;
  color: #fff!important;
  border: 2px solid var(--maincolor)!important;
}
.filtervals input{
  width: calc(100% - 24px);
  border: 2px solid var(--lightbg2);
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--textmaincolor);
  background: var(--lightbg);
}
/* ****************bookmark********************* */
.bookbox{
  /* background: #fff; */
  padding: 20px 0;
  border-radius: 10px;
}

.socialpop{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 99999;
}
.socialpopflx{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: rgba(255,255,255,.5);
}
.socialspopbox{
  width: 500px;
  padding: 20px 0;
  min-height: 300px;
  max-height: 80vh;
  overflow: auto;
  border-radius: 10px;
  box-shadow: var(--box1);
  background: #fff;
  position: relative;
}
.closesocial{
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.closesocial svg{
  padding: 10px;
  height: 20px;
  width: 20px;
  color: var(--color8);
  background: var(--lightbg2);
  border-radius: 0 10px 0 5px;
}
.sociallistpop ul{
  list-style-type: none;
}
.sociallistpop li{
  display: flex;
  padding: 10px;
  width: calc(100% - 20px);
  justify-content: flex-start;
  gap:10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
  align-items: center;
  transition: .5s;
  border-radius: 5px;
}
.socialspophead p{
  font-size: 20px;
  font-weight: 600;
  color: var(--color8);
}
.socialspophead{
  margin-bottom: 20px;
}
.sociallistpop li:hover{
  background: var(--lightwhite);
}
.socipopicon{
  height: 30px;
  width: 30px;
}
.socipopicon svg{
  height: 25px;
  width: 25px;
}
.pathlist ul{
  list-style-type: none;
  display: flex;
}
.pathlist li{
  max-width: 150px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
  display: flex;
  align-items: center;
  transition: .5s;
}
.pathlist li p{
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
}
.pathlist li svg{
  height: 14px;
  width: 14px;
  display: block;
  margin: 0 2px;
}
.pathlist .otherels:hover{
  color: var(--textmaincolor);
}
.pathlist .otherels{
  cursor: pointer;
}
.sectheadflx{
  display: flex;
  justify-content: space-between;
  gap:10px;
}
.eloader{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.eloadimg{
  height: 60px;
  width: 60px;
  position: relative;
}
.eloadimg img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.loadbg{
  position: relative;
  z-index: 1;
  animation:goround 2s linear infinite ;
}
.loadfront{
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}
@keyframes goround {
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(180deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.searchtext{
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 1;
}
.searchtext{
  font-size: 14px;
  color: var(--color6);
  font-weight: 500;
}
.mid-search .formmenusearch:focus-within .searchtext{
  display: none;
}
.morphext > .animated {
  display: inline-block;
}
.pc-search::placeholder{
  font-size: 14px;
  color: var(--color6);
  font-weight: 500;
}
.tabonsprod{
  display: flex;
  align-items: center;
  justify-content: center;
}
.tabonsprod ul{
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
  width: 90%;
  margin: 20px auto;
  box-shadow: 0 0 0 2px var(--color1);
  background: var(--lightwhite);
  padding: 2px;
}
.tabonsprod li{
  padding: 5px 0px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
  cursor: pointer;
  transition: .5s;
  border-radius: 5px;
}
.tabonsprod li:nth-child(2){
  position: relative;
  margin: 0 8px;
}
.tabonsprod li:nth-child(2)::before{
  content: "";
  position: absolute;
  width: calc(100% + 5px);
  left: -4px;
  border-left: 2px solid var(--color1);
  border-right: 2px solid var(--color1);
  border-radius: 0;
  height: 100%;
  top: 0;
}
.tabonsprod li:hover{
  background: #fff;
}
.tabonsprod li.activeprodtab{
  background: var(--textmaincolor);
  color: #fff;
}
.founders{
  background: var(--lightwhite);
  position: relative;
}
.founderbg{
  position: absolute;
  height: 100%;
  z-index: 1;
}
.founderfront{
  position: relative;
  z-index: 2;
  padding: 50px 0;
}
.foundimage{
  width: 100%;
  background: var(--textmaincolor);
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.foundimage img{
  display: block;
  width: 100%;
  object-fit: contain;
  margin-top: 0px;
}
.bgcolorfound{
  display: flex;
  height: 100%;
  background: var(--lightbg2);
}
.foundtop svg{
  height: 50px;
  width: 50px;
  color: var(--maincolor);
}
.foundmsgbox {
  margin: 20px auto;
}
.pagecardimage{
  position: relative;
}
.livetag{
  position: absolute;
  top: 0;
  right: 5px;
}
.liveimg{
  /* height: 50px; */
  width: 50px;
  object-fit: contain;
  animation: scaleupdown 1s linear infinite;
}
@keyframes scaleupdown{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
  100%{
    transform: scale(1);
  }
}
.testpop{
  position: relative;
}
.notfoundimg{
  height: 300px;
  width: 300px;
  margin: 0 auto;
}
.notfoundimg img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.errorboxcourse{
  padding: 50px 0;
}
.videopopboxmain{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: auto;
}
.testpopm .videoboxmain{
  overflow: visible;
}
.testpopm.videopop .closepop{
  top: -15px;
  right: -15px;
}
.answers-topbar li{
  max-width: inherit;
  cursor: inherit;
  overflow: inherit;
  font-size: 12px;
  font-weight: 500;
}
.answers-topbar ul{
  width: 100%;
  gap: 0;
}
.answers-topbar .filepath{
  margin: 0;
}
.topcontent{
  margin: 10px auto;
}
.filesubtxt{
  margin: 5px auto;
}
.filesubtxt p{
  font-size: 12px;
  color: var(--color6);
}
.coursespg.w33 .cousrse-details{
  padding: 10px 0 70px 0;
}
.archivebuts{
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 5%;
  width: 90%;
}
.coursecrd{
  display: flex;
}
.coursecrd .course-card{
  display: flex;
  flex-wrap: wrap;
}
.helppop{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  height: 100vh;
}
.helppopflex{
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  height: 100%;
}
.helppopbox{
  min-width: 400px;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  max-width: 40%;
  position: relative;
}
.helphead p{
  font-size: 20px;
  font-weight: 600;
  color: var(--color8);
}
.neddhelppara {
  margin: 10px auto;
}
.callbuthelp button{
  padding: 10px 40px;
  background: var(--maincolor);
  font-size: 14px;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:10px;
  margin: 0 auto;
}
.helpclose{
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: -5px;
  right: -5px;
}
.helploading{
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsappbut a{
  position: fixed;
  bottom: 10px;
  left: 10px;
  border-radius: 30px;
  background: #52C95A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  gap: 10px;
  padding: 10px 20px 10px 15px;
  z-index: 999;
  text-decoration: none;
}
.whatsappbut svg{
  height: 30px;
  width: 30px;
}
.popovefcont {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}
.trackorder{
  padding: 50px 0;
  background: var(--lightwhite);
}
.trackmessage p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
}
.searchboxoder{
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ordertrackbox input{
  width: 350px;
  padding: 10px 10px 10px 15px;
  border: 0;
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
}
.ordertrackbox button{
  padding: 10px 15px;
  background: var(--maincolor);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  border: 0;
}
.ordertrackbox{
  border-radius: 30px;
  overflow: hidden;
  border: 2px solid var(--maincolor);
}
.orderstrackboxm{
  width: 600px;
  margin: 10px auto;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}
.ordertracks ul{
  list-style-type: none;
}
.ordertracks li{
  width: calc(100% - 30px);
  padding: 0px 10px 20px 20px;
  position: relative;
}
.ordertracks li::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  height: 100%;
  background: var(--lightwhite);
  width: 3px;
  z-index: 1;
}
.ordertracks li::after{
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  height: 0%;
  background:transparent;
  width: 3px;
  z-index: 2;
}
.ordertracks li.animcls::after{
  background: #00A65A;
  animation:orderSlide 1.3s linear forwards;
}
.ordertracks li.animcls .ordertitle::after{
  background: #00A65A;
}
@keyframes orderSlide{
  0%{
    height: 0;
  }
  100%{
    height: 100%;
  }
}
.ordertracks .ordertitle::after{
  content: "";
  height: 12px;
  width: 12px;
  background: var(--lightwhite);
  border-radius: 50%;
  position: absolute;
  left: 1px;
  top: 6px;
  z-index: 3;
}
.ordertitle p{
  font-size: 18px;
  font-weight: 600;
  color: var(--color8);
}
.orderdt p{
  font-size: 14px;
  color: var(--color6);
  font-weight: 500;
}
.ordermsg p{
  font-size: 14px;
  color: var(--color6);
  line-height: 25px;
  font-weight: 500;
}
.ordertracks li:nth-last-child(1)::before{
  height: 0;
}
.ordertracks li:nth-last-child(1)::after{
  height: 0!important;
}
.tracksearch{
  margin: 50px auto;
}
.orderdetails {
  margin-bottom: 10px;
}
.orderdetails p{
  font-size: 14px;
  color: var(--color8);
  font-weight: 500;
}
.orderdetails span{
  color: var(--maincolor);
}
.errosmsg.trackmessage{
  margin-top: 5px;
}
.subtxtcard{
  margin: 5px auto
}
.subtxtcard p{
  font-size: 12px;
  color: var(--color6);
  font-weight: 500;
}
.carouselpop{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 99999;
  display: none;
}
.carouselflxpop{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.popupboxcr{
  width: 500px;
  border-radius: 0px;
  position: relative;
}
.closecrpop{
  position: absolute;
  top:-10px;
  right: -10px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.closecrpop svg{
  height: 30px;
  width: 30px;
  color: #fff;
}
.popupboxcr .banner-image img{
  width: 100%;
  object-fit: contain;
}
.purchasetable{
  width: 100%;
}
.purchasetable{
  border-collapse: collapse;
}
.purchasetable th{
  color: var(--color8);
  font-weight: 600;
}
.purchasetable td{
  color: var(--color8);
  font-weight: 500;
}
.purchasetable th,td{
  text-align: left;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  font-size: 14px;
}
.datepurch{
  white-space: nowrap;
}
.pricst{
  font-family: Arial, sans-serif;
  font-weight: 600;
}
.oldpbx{
  display: flex;
  margin: 0 10px;
  align-items: center;
  color: red;
  font-weight: 600;
  line-height: 14px;
  gap: 2px;
  font-size: 16px;
}
.oldpbx .oldp{
  margin: 0;
  font-size: 16px;
}
.notfndimg img{
  width: 100%;
  object-fit: contain;
}
.dashcards{
  display: flex;
  flex-wrap: wrap;
}
.remainbx{
  display: flex;
  align-items: center;
  justify-content: space-between;       
}
.remainside p{
  font-size: 12px;
  font-weight: 500;
  color: var(--maincolor);
}
.notifybutton button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
  background: #F08E1E;
  border-color: #F08E1E;
}
.redirectbut{
  margin-top: 5px;
}
.packages{
  display: flex;
  flex-wrap: wrap;
}
.deleteaccc button{
  margin: 10px auto;
  padding: 8px 20px;
  font-size: 14px;
  color: #fff;
  background: #ff4949;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
}
.deleteaccbuttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto 10px auto;
  gap: 10px;
}
.deleteaccbuttons button{
  padding: 6px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color8);
  font-weight: 500;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
}
.surehead p{
  font-size: 22px;
  color: var(--color8);
  font-weight: 600;
  text-transform: capitalize;
}
.deleteaccpop .poptextbox{
  position: relative;
  overflow: visible;
}
.validity li.actcat{
  background: var(--maincolor);
  color: #fff!important;
}
.related-box .coursename p {
  font-size: 20px;
}
.related-box{
  padding-top: 20px;
}
.instructionspop .ck-content{
  max-height: calc(70vh - 80px)!important;
  overflow: auto;
}
.notifload svg{
  animation: spin 1s linear infinite;
  height: 22px;
  width: 22px;
}
@keyframes spin{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
.notificon button{
  background: #07891a;
  border-color: #07891a;
}
.orderurl p{
  font-size: 14px;
  color: var(--color6);
}
.orderurl a{
  text-decoration: underline;
  font-size: 14px;
  color: var(--maincolor);
}
.copyidbutton{
  padding: 5px 10px;
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid var(--maincolorlight);
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--maincolor);
  display: flex;
  gap: 5px;
  align-items: center;
}
.copyidbutton.idcopied{
  background: var(--maincolor);
  color: #fff;
}
.copyidbutton.idcopied .idtocp{
  display: none;
}
.idcpspan{
  display: none;
}
.copyidbutton.idcopied .idcpspan{
  display: block;
}
.slctpln{
  color: red;
}

.myPopup{
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999999;
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.myPopupBody{
  width: calc(90% - 20px);
  padding: 10px;
  border-radius: 10px;
  background-color: #FFFFFF;
  max-width: 400px;
  position: relative;
}
.closeMyPopup{
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: var(--maincolor);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -15px;
  right: -15px;
  cursor: pointer;
}
.closeMyPopup svg{
  color: #FFFFFF;
}
.myInput{
  padding: 10px;
  border: 0.5px solid rgba(0,0,0,0.5);
  width: calc(100% - 22px);
  border-radius: 5px;
  margin-top: 10px;
}
.myBtn{
  padding: 5px 10px;
  color: #FFFFFF;
  border-radius: 5px;
  border: 0;
  width: 100%;
  margin-top: 10px;
  background-color: var(--maincolor);
  cursor: pointer;
}
.addressEdiRemove{
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
}
.EditAddress{
  color: var(--maincolor);
}
.removeAddress{
  color: red;
}
.editRemoveAddress{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.editRemoveAddress .deliverhere{
  margin: 0;
}
.editRemoveAddress .deliverhere button{
  padding: 5px 0;
}
.myCouseCard{
  overflow: hidden;
  padding: 10px;
  background-color: #FFFFFF;
  border-radius: 10px;
  position: relative;
  margin-bottom: 10px;
  box-shadow:  0 0 10px rgba(0,0,0,0.1);
  width: calc(100% - 20px);
}
.myOpenCourseDiv img{
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.myCoursename{
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  padding: 10px 0;
}
.myCourseSubheading{
  font-size: 12px;
  /* padding-bottom: 10px; */
  color: rgba(0,0,0,0.8);
  /* line-height: 25px; */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  margin-bottom: 10px;
}
.percentageAndNextArea{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* border-top: 0.5px solid rgba(0,0,0,0.1);
  padding-top: 10px; */
}
.percentageAndNextArea .percentageLeft{
  /* width: calc(100% - 80px); */
  width: calc(100% - 0px);
}
.percentageAndNextArea .percentageNext{
  width: 80px;
}
.percentageAndNextArea .percentageNext button{
  padding: 10px;
  width: 100%;
  border: 0;
  background: var(--maincolor);
  color: #FFFFFF;
  border-radius: 5px;
}
.progress10 .progresstext p{
  font-size: 10px;
}
.myCoursePercentage .progresstext{
  width: 30px;
  text-align: center;
  font-size: 12px;
  margin: 0;
}
.myCoursePercentage{
  display: flex;
  gap:10px;
  align-items: center;
}
.myCourseBtns{
  padding: 10px 0;
  border-top: 0.5px solid #00000019;
  border-bottom: 0.5px solid #00000019;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  /* display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr); */
}
.gridBtn{
  padding: 5px 10px;
  background-color: var(--maincolor);
  border-radius: 5px;
  flex: 1;
  cursor: pointer;
}
.gridBtn p{
  font-size: 12px;
  color: #FFFFFF;
  text-wrap: nowrap;
  text-align: center;
}
.myCouseCard .liveimg{
  width: 50px;
}
.myOpenCourseDiv{
  cursor: pointer;
}
.myLoadingPage{
  width: 100%;
  height: 100vh;
  background-color: var(--mylight);
  display: flex;
  align-items: center;
  justify-content: center;
}

.myloader {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid var(--maincolorred);
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loadingMain img{
  width: 60px;
  height: 60px;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loadingMain{
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myWalletDiv{
  padding: 10px;
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin: 10px auto;
}
.backflex{
  width: calc(100% - 20px);
}
.topnameside .backToCOurse{
  display: none!important;
}
.questionslist{
  overflow: auto;
}
.mainquestionbox{
    min-height: calc(100vh - 250px);
}
.topresultheadMy {
  display: flex;
  align-items: center;
  justify-content: center;
}
.topresulthead p{
  font-size: 14px;
}

.loaderSmall {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid var(--maincolor);
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
.invalidAlert{
  background-color: #FF6961;
  color: #FFF;
  border-radius: 5px;
}
.invalidAlert .cart-heading{
  background-color: transparent;
}
.invalidAlert .cart-heading p{
  color: #FFFFFF;
}
.invalidAlert ul{
  list-style-type: circle;
  margin-left: 35px;
}
.invalidAlert ul li{
  padding: 5px 10px;
  font-size: 14px;
}

.enrollingCoursePage{
  width: 100%;
  height: 100vh;
  background-color: var(--lightbg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.enrollingCourse{
  width: 250px;
  height: auto;
  object-fit: contain;
  margin-bottom: 10px;
}
.enrollingCourseHEading{
  font-size: 20px;
  color: #000000;
  padding: 10px 0;
  font-weight: bold;
}
.redColor{
  font-size: 30px;
  color: red;
}

.sampleVideoPage{
  width: 100%;
  height: 100vh;
  background-color: #00000019;
  display: flex;
  justify-content: space-between;
}
.sampleVideoSidebar{
  width: 300px;
  height: 100vh;
  background-color: #000000;
}
.sampleVideoSidebar ul{
  list-style-type: none;
}

.sampleVideoSidebar .headings{
  padding: 10px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 20px;
}
.sampleVideoSidebar .links{
  padding: 10px;
  font-size: 14px;
  color: #FFFFFF;
}
.sampleVideoSidebar .links a{
  color: #FFF;
  text-decoration: none;
}
.sampleVideoArea{
  width: calc(100% - 340px);
  margin-right: 20px;
}

.sampleVideoSidebar .links small{
  float: right;
}
.nomarhontop{
  margin-top: 0!important;
}
.addresses-box{
  display: flex;
  flex-wrap: wrap;
}
.headingGrid{
  display: grid;
  grid-template-columns: 80px auto 80px ;
  gap: 10px;
  font-size: 14px;
  padding: 10px;
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 5px;
}
.imgBox{
  aspect-ratio: 1;
  background-color: var(--mylight);
  padding: 5px;
  border-radius: 5px;
}
.imgBox img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 5px;
}
.colorBox{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  border-radius: 5px;
}
.namesArea{
  font-size: 14px;
  cursor: pointer;
}
.resultPopup{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: #00000019;
  width: 100%;
  height: 100%;
}
.resultPopupInside{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popInside{
  padding: 10px;
  width: calc(90% - 20px);
  background-color: #FFFFFF;
  max-width: 400px;
  border-radius: 10px;
}
.popHeading{
  display: grid;
  grid-template-columns: auto 20px;
  gap: 10px;
}
.downloadGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.showFilterIcon{
  display: none;
}
@media only screen and (max-width: 900px){
  .sampleVideoPage{
    flex-direction: column-reverse;
  }
  .sampleVideoSidebar{
    height: auto;
    width: 100%;
  }
  .sampleVideoArea{
    width: 100%;
  }
  
  .headingGrid{
    grid-template-columns: 40px auto 40px;
  }
  .colorBox{
    font-size: 12px;
  }
  .namesArea {
    font-size: 12px;
  }
  .showFilterIcon{
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--maincolor);
    position: fixed;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
  }
  .filterIcon{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 18px;
  }
  .resultfiltside{
    overflow: auto;
  }
}