@font-face {
   font-family: 'Poppins-Regular', sans-serif;
   src: url(../fonts/Poppins-Regular.ttf);
}

:root {
   --body-bg-gredient: linear-gradient(179.4deg, #1c82d4 14.6%, #36b3f5 104.7%);
}

/* start common*/
* {

   margin: 0;
   box-sizing: border-box;
   font-family: 'Poppins-Regular', sans-serif;
}

body {
   color: #000;
   padding-right: 0 !important;
   background-image: var(--body-bg-gredient);
   min-height: 100vh;

}

.circle {
   position: absolute;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background-color: var(--bs-white);
   opacity: 0.045;
   z-index: -1;
}

.circle:nth-child(1) {
   top: 10%;
   left: 10%;
}

.circle:nth-child(2) {
   top: 30%;
   left: 30%;
}

.circle:nth-child(3) {
   top: 50%;
   left: 70%;
}

.circle:nth-child(4) {
   top: 40%;
   left: 0;
}

.circle:nth-child(5) {
   top: 40%;
   right: 0;
}

.circle:nth-child(6) {
   top: 10%;
   right: 20%;
}

.circle:nth-child(7) {
   top: 20%;
   right: 3%;
}

.circle:nth-child(8) {
   bottom: 20%;
   right: 20%;
}

.circle:nth-child(8) {
   bottom: 20%;
   right: 20%;
}

.circle:nth-child(9) {
   bottom: 20%;
   left: 20%;
}

.btn.btn-icon {
   width: 30px;
   height: 30px;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   border: 1px solid;
   background-color: #2778b5;

}
.btn-back{
   padding: 0;
   width: 27px;
   height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: linear-gradient(180deg, #d9d9d9 0%, #F0EFEF 129.09%);
   color: #19afbc;
   box-shadow: 0 0 2px;
}
.btn.btn-icon svg {
   width: 18px;
   height: 18px;
}

.btn.btn-white {
   background-color: var(--bs-white);
}

.main-head {
   font-size: 24px;
   color: var(--bs-white);
   fill: var(--bs-white);
}

/* end common */
/* start side-start*/
.side-start {
   height: 100vh;
   display: flex;
   align-items: center;

}

.side-start .button-start-list {
   min-height: 50vh;
   list-style: none;
   padding-inline-start: 0;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 30;

}

.side-start .button-start-list .btn-start-list {
   position: relative;
   height: 68px;
   width: 32px;
   display: flex;
   align-items: center;
   color: var(--bs-white);
}

.side-start .button-start-list .btn-start-list .shape {
   position: absolute;
   left: -1px;
   z-index: 0;
   filter: drop-shadow(-4px 0 6px rgba(0, 0, 0, 0.25));
}

.side-start .button-start-list .btn-start-list .icon {
   width: 24px;
   height: 24px;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
}

.side-start .offcanvas {
   height: 80vh;
   border-radius: 0 10px 10px 0;
   top: 50%;
   transform: translateY(-50%);
}
@media (max-width:600px){
   .side-start .offcanvas{
      width: calc(100vw - 45px);
   }
}

.side-start .offcanvas.show {
   transform: translateY(-50%) translateX(0);
}

.side-start .offcanvas .tab-header .icon-circle {
   width: 48px;
   height: 48px;
   background-color: var(--bs-white);
   box-shadow: 1px 2px 5px rgb(0 0 0 / 25%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: -10px;
}

.side-start .offcanvas .tab-header .icon-circle svg {
   width: 24px;
   height: 24px;
}

.side-start .offcanvas .tab-header.orange {
   background-color: #e96323;
   color: var(--bs-white);
}

.side-start .offcanvas-start .button-start-list {
   right: -32px;
}

.side-start .offcanvas .tab-body {
   background-color: aliceblue;
   height: calc(80vh - 62px);
   overflow-y: scroll;
   overflow-x: hidden;
}
/* end side-start */

/* start side-end*/
.side-end {
   height: calc(100vh - 62px);
   display: flex;
   justify-content: end;
   align-items: center;

}

.side-end .button-end-list {
   min-height: 50vh;
}

.side-end .button-end-list .li-item {
   position: relative;
   width: 38px;
   height: 50px;
}

.side-end .button-end-list .li-item:not(:last-child) {
   transform: translateY(2px);
}

.side-end .button-end-list .li-item .btn-end-list {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   padding: 0;
   color: var(--bs-white);
   border: 1px solid rgb(0 0 0);
   background-image: linear-gradient(180.4deg, #7dd1fe -2.2%, #4587b8 83.5%);
   border-radius: 7px;
}

.side-end .button-end-list .li-item .btn-end-list svg {
   width: 20px;
   height: 20px;
}

.side-end .button-end-list .dropdown-menu {
   margin-inline-end: 15px;
   min-width: 217px;
   background-color: transparent;
   padding: 0 12px;
   padding-inline-end: 15px;
   border: 0;

}

.side-end .button-end-list .dropdown-menu .drop-contanier {
   background-color: var(--bs-white);
   border: 3px solid #0d0d0d;
   border-radius: 10px;
   position: relative;
}

.side-end .button-end-list .dropdown-menu .drop-contanier .dropdown-item:first-child {
   border-radius: 10px 10px 0 0;
}

.side-end .button-end-list .dropdown-menu .drop-contanier .dropdown-item:last-child {
   border-radius: 0 0 10px 10px;

}
.side-end .button-end-list .dropdown-menu .drop-contanier .dropdown-item{
   padding-block: 8px;
}
.side-end .button-end-list .dropdown-menu .drop-contanier .dropdown-item:not(:last-child) {

   border-bottom: 1px solid #ddd;
}

.side-end .button-end-list .dropdown-menu .drop-contanier::after {
   content: "";
   position: absolute;
   top: 10px;
   right: -9px;
   width: 0;
   height: 0;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   border-left: 8px solid #0d0d0d;
   z-index: 2;
}

.side-end .button-end-list .dropdown-menu.show .dropdown-link {
   display: flex;
   align-items: center;
   text-decoration: none;
   color: #222;
}

.side-end .button-end-list .dropdown-menu.show .dropdown-link .dropdown-icon {
   background-image: linear-gradient(180.4deg, #7dd1fe -2.2%, #4587b8 83.5%);
   color: var(--bs-white);
   width: 30px;
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 8px;
   margin-inline-end: 6px;
}

.side-end .button-end-list .dropdown-menu.show .dropdown-icon svg {
   width: 20px
}

.side-end .button-end-list .li-item .dropstart .dropdown-menu.show svg {
   width: 18px;
}

.side-end .button-end-list .li-item .shap {
   position: absolute;
   right: 0;
   top: 0;
}

/* end side-end*/
/* start modal*/
.modal .modal-header{
   background-image: linear-gradient(180.4deg, #066699 -2.2%, #024679 83.5%);
   padding-block: 5px;
   border-radius: 10px;
   margin-bottom: 14px;
   border: 2px solid;
   color: var(--bs-white);
}
@media (min-width: 992px){
   .modal-lg, .modal-xl {
      max-width: 900px;
  }
}

.modal .modal-header .modal-title{
   font-size: 18px;
}
.modal .modal-body{
   border-radius: 10px;
   max-height: 90vh;
   overflow-y: auto;
   overflow-x: hidden;
}
.modal-dialog-scrollable .modal-content{
   background-color: transparent;
   border:0;
}
.modal-dialog-scrollable .modal-content .modal-body{
   background-color: var(--bs-white);
}
/* end modal*/
.card-item .card-body {
   height: 150px;
   overflow-y: scroll;
   overflow-x: hidden;
}
.card-light{
   background-color: #e1e5e4;
   background-color: #e1e5e4;
   box-shadow: inset 0 0 4px rgb(0 0 0 / 25%);
}
.card-light .card-body{
   padding: 12px 12px 30px;
}
.bg-orange {
   background-color: #e96323;
}

.bg-yellow {
   background-color: #F59F00;
}

.bg-green {
   background-color: #9CBD01;
}

.bg-purple {
   background-color: #9C42BE;
}

.bg-pink {
   background-color: #CE1C7E;
}

.shape.orange,
.text-orange {
   color: #e96323 !important;
}

.shape.yellow,
.text-yellow {
   color: #F59F00 !important;
}

.shape.green,
.text-green {
   color: #9CBD01 !important;
}

.shape.purple,
.text-purple {
   color: #9C42BE !important;
}

.shape.pink,
.text-pink {
   color: #CE1C7E !important;
}
/*start unite-card*/
.unite-card{
 background-color: var(--bs-white);
 height: 275px;
 position: relative;
}

.unite-card::after, 
.unite-card::before{
   content: "";
   position: absolute;
   width: 95%;
   height: 6px;
   left: 50%;
   transform: translateX(-50%);
   border: 1px solid #b8b8b8;
   border-top: 0;
   background-color: #dde1e0;
   z-index: 0;
   bottom: -6px;
}
.unite-card::before{
   width: 92%;
   bottom: -12px;
}
.unite-card .body {
 max-height: 230px;
 overflow: auto;
}
.unite-card .body .lesson{
 
   background-color: #ddeff7;
   color: #0866a4;
   padding-inline-start: 16px;
   height: 40px;
   align-items: center;
   margin-bottom: 10px;
}
.badge-number{
   width: 40px;
   height: 40px;
   background: var(--body-bg-gredient);
   color:white;
   display: flex;
   justify-content: center;
   align-items: center;
  
}
.unite-card .side{
   display: flex;
   flex-direction: column;
   align-items: center;
   background: var(--body-bg-gredient) ;
   height: 275px;
   justify-content: space-between;
   color: white;
   padding-block:20px ;

}
.unite-card .side img{
   width:85px;
   height: 85px;
}
.unite-card .card-header{
   background-color: #ebebeb;
}
/*end unite-card*/
/* start time-line*/
.time-line .vertical {
   width: 4px;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   height: 100%;
   background-color: #BCC0BF;
   position: absolute;
   z-index: 0;
}
@media (max-width: 992px){
   .time-line .vertical{
      left: 4px;
      transform: translateX(0);
   }
}
.time-line .time-line-content {
   position: relative;
  
}
.time-line .time-line-content .item{
   padding-block: 14px;
   font-size: 16px;
   line-height: 1.7;
   position: relative;
   margin-bottom: 20px;
   min-height: 100px;
}
.time-line .time-line-content .item .main-text{
   padding: 20px;
   background-image: linear-gradient( 180.4deg, #F7FBFE -2.2%, #DEF1F5 83.5% );
   border-radius: 7px;
   border: 2px solid white;
   box-shadow: 0 0 0 1px #c3d1dc, 1px 4px 2px rgb(0 0 0 / 15%);
   margin-bottom: 0;
  

}
.time-line .time-line-content .item .shap-svg{
   position: absolute;
   transform: translateX(-21%) translateY(5px);
   z-index: 2;
   left:50%
}

.time-line .time-line-content .item:nth-child(even) .shap-svg{
   left: 45%;
}
@media (max-width: 992px){

   .time-line .time-line-content .item:nth-child(odd) .shap-svg{
      left: -8px;
      transform: none
   }
   .time-line .time-line-content .item:nth-child(even) .shap-svg{
      left: -8px;
      transform: rotate(180deg)  ;
   }
}
.time-line .time-line-content .item:nth-child(even) .row{
   flex-direction: row-reverse;
}
.time-line .time-line-content .item:nth-child(odd) .title,
.time-line .time-line-content .item:nth-child(even) .title{
 
   background: linear-gradient( 180.4deg, #F7FBFE -2.2%, #DEF1F5 83.5% );
   padding: 6px 12px;
   border-radius: 8px;
   border: 2px solid white;
   font-size: 14px;
   box-shadow: 0 0 0 1px #c3d1dc, inset 0px 0px 2px rgb(0 0 0 / 15%);
   min-width: 200px;
   text-align: center;
   margin-bottom: 10px;

}
.time-line .time-line-content .item:nth-child(odd) .main-text{
   margin-inline-start: 35px;
}
.time-line .time-line-content .item:nth-child(even) .main-text {
   margin-inline-end: 35px;
}
@media(max-width:992px){
   .time-line .time-line-content .item:nth-child(odd) .main-text{
      margin-inline-start: 20px;
   }
   .time-line .time-line-content .item:nth-child(even) .main-text {
      margin-inline-start: 20px;
      margin-inline-end: 0;
   }
}
 /* end Time-line*/


/* webkit-scrollbar */
::-webkit-scrollbar {
   width: 10px;
}

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

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: #555;
}