/*----------------------------------------*/
/*  Google Fonts
/*----------------------------------------*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(245, 4, 4, 0);
    border-radius: 0;
    background-color: #ddd;
}
::-webkit-scrollbar {
    float: right;
    width: 10px;
    background-color: #fff;
}
::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */
    /* -webkit-box-shadow: inset 0 0 6px #fff; */
    background-color: #9d9d9d;
    border-radius: 10px;
}
* {
    font-family: "Tajawal", sans-serif;
}
.ltr {
    direction: ltr;
}
p,
a,
h2,
h3,
h4,
h5,
h6,
span,
ul,
li,
MARQUEE,
input,
button,
.textarea,
textarea,
label,
select,
tr,
table,
th {
    font-family: "Tajawal", sans-serif;
    margin: 0;
}
button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
    outline: 0 !important;
}
i {
    line-height: 0;
}
p {
    margin-top: 0;
    margin-bottom: 0;
}
a {
    cursor: pointer;
}
.container-full .row {
    margin-left: 0;
    margin-right: 0;
}
.pdd_l_0 {
    padding-left: 0;
}
.pdd_0 {
    padding: 0;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: #e3e3e3;
}
.form-check {
    padding-right: 1.5em;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}
.form-check,
.form-check label,
.form-check input {
    cursor: pointer;
}
.flex-2 .form-check label.form-check-label {
    margin: 0;
    font-size: 15px;
    margin-top: 3px;
}
.form-check .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
    flex: none;
}
/* 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;
}

/*----------------------------------------*/
/*  MY STYLE
/*----------------------------------------*/
body {
    background: #fff;
    color: #000;
    text-align: right;
    padding-top: 70px;
}
.floatleft {
    float: left;
}
.floatright {
    float: right;
}
.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus {
    outline: 0px solid;
}
img {
    max-width: 100%;
    height: auto;
}
a {
    transition: all 0.3s ease 0s;
    text-decoration: none;
}
a:active,
a:hover {
    outline: 0 none;
}
a:hover,
a:focus {
    text-decoration: none;
}
#scrollUp {
    background: var(--main-background) none repeat scroll 0 0;
    border-radius: 2px;
    bottom: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    color: var(--font-light-color);
    font-size: 20px;
    height: 34px;
    line-height: 30px;
    /* opacity: 0.6; */
    left: 15px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 34px;
}
#scrollUp:hover {
    background: #2f2d51;
    opacity: 1;
}
.clear {
    clear: both;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
input,
select,
textarea,
input[type="text"],
input[type="date"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="tel"],
button,
button[type="submit"] {
    /* -moz-appearance: none; */
    box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
}
.navbar-collapse {
    padding-left: 0px;
    padding-right: 0px;
}
::-moz-selection {
    background: var(--main-color);
    text-shadow: none;
    color: var(--font-light-color);
}
::selection {
    background: var(--main-color);
    text-shadow: none;
    color: var(--font-light-color);
}
.text-right {
    text-align: right;
}
.lg-hidden {
    display: none;
}
.card-box {
    position: relative;
    border-radius: 20px;
    padding: 25px 25px;
    background: #fff;
    box-shadow: 0px 4px 10px 0px rgba(95, 95, 95, 0.02);
}
/*----------------------------------------*/
/*   Padding Size
/*----------------------------------------*/
.padd-100 {
    padding: 100px 0;
}
.padd-80 {
    padding: 80px 0;
}
.padd-60 {
    padding: 60px 0;
}
.padd-50 {
    padding: 50px 0;
}
.padd-40 {
    padding: 40px 0;
}
.padd-30 {
    padding: 30px 0;
}
.padd-20 {
    padding: 20px 0;
}
.padd-10 {
    padding: 10px 0;
}
.padd-botm {
    padding-bottom: 100px !important;
}
.padd-botm-150 {
    padding-bottom: 150px !important;
}
.padd-rt-lft-15 {
    padding: 0 15px;
}
.padd-btm-15 {
    padding-bottom: 15px;
}
/*----------------------------------------*/
/*   Main Button Style
/*----------------------------------------*/
/* Main Button Style */
.main-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    /* font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif; */
    font-family: "Tajawal", sans-serif;
    padding: 7px 20px;
    min-width: 130px;
    text-align: center;
    border-radius: 50px;
    font-weight: 700;
    min-height: 40px;
    transition: transform 0.3s ease;
}
.main-btn:hover{
    transform: scale(1.05);
}
/* Primary Button */
.primary-btn {
    color: #fff;
    background: #333;
}
.primary-btn:hover {
    background: var(--secondary-color);
    color: var(--font-light-color);
    border: 1px solid var(--secondary-color);
}
.primary-btn.solid {
    background: var(--main-color);
    color: var(--font-light-color);
    border: 1px solid var(--main-color);
}
.primary-btn.solid:hover {
    background: var(--secondary-color);
    color: var(--font-light-color);
    border: 1px solid var(--secondary-color);
}
/* Secondary Button */
.secondary-btn {
    background: rgba(255, 255, 255, 0);
    color: var(--main-color);
    border: 1px solid var(--main-color);
}
.secondary-btn:hover {
    background: var(--main-color);
    color: var(--font-light-color);
}

/* Third Button */
.thrd-btn {
    display: inline-flex;
    gap: 13px;
    padding: 21px 15px;
    font-size: 14px;
    color: #000;
}
.thrd-btn i {
    font-size: 21px;
}

.delete-btn {
    color: #ee4946;
    border: 1px solid #ee4946;
}
.main-btn i {
    font-size: 19px;
    vertical-align: middle;
}
.main-btn .arrow-rt {
    font-size: 13px;
    vertical-align: middle;
}
.delete-btn:hover {
    background: #ee494612;
    color: #ee4946;
}
.outline-btn {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}
.outline-btn:hover {
    color: #fff;
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}
/*  */
.blue-btn {
    background: var(--secondary-color);
    color: #fff;
    border: 1px solid var(--secondary-color);
}
.blue-btn:hover {
    color: var(--secondary-color);
    background: #fff;
    border: 1px solid var(--secondary-color);
}
/* Border Button  */
.border-btn {
    border: 1px solid var(--secondary-color);
    background: #00ae8500;
    color: #333;
    font-weight: 500;
}
.border-btn:hover{
    background: var(--secondary-color);
    color: var(--font-light-color);
}
/* Main Button Arrow */
.main-btn-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    font-family: "Tajawal", sans-serif;
    text-align: center;
    border-radius: 50px;
    font-weight: 800;
    width: 40px;
    height: 40px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.main-btn-arrow i{
    font-size: 19px;
    line-height: 0;
    vertical-align: middle;
}
/* btn */
.btn-drk-solid {
    color: var(--font-light-color);
    background: #000;
    border: 1px solid #fff;
    padding: 10px 17px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}
.btn-drk-solid:hover {
    background: var(--secondary-color);
    color: var(--font-light-color);
}
.btn-drk-solid i {
    line-height: 0;
    vertical-align: middle;
    margin-left: 0;
    font-size: 18px;
}
/*----------------------------------------*/
/*   Text Colors
/*----------------------------------------*/
.white-color {
    color: var(--font-light-color);
}
.main-color {
    color: #492a66;
}
/*----------------------------------------*/
/*   Background Colors
/*----------------------------------------*/
.bg-w {
    background: #fff;
}
/*----------------------------------------*/
/*   Width Classes
/*----------------------------------------*/
.width-50 {
    min-width: 50px;
}
.width-70 {
    min-width: 70px;
}
.width-80 {
    min-width: 80px;
}
.width-100 {
    min-width: 100px;
}
.width-120 {
    min-width: 120px;
}
.width-150 {
    min-width: 150px;
}
.width-170 {
    min-width: 170px;
}
.width-180 {
    min-width: 180px;
}
.width-200 {
    min-width: 200px;
}
.width-220 {
    min-width: 220px;
}
.width-240 {
    min-width: 240px;
}
.width-250 {
    min-width: 250px;
}

/*----------------------------------------*/
/*   Main Form
/*----------------------------------------*/
/* Main Form */
.main-form .form-group {
    margin: 10px 0;
    padding: 0 8px;
    text-align: right;
}
.main-form label {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 10px;
    display: block;
    line-height: 15px;
}
.main-form .imp-inpt {
    color: #e02828;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    margin-left: 2px;
}
.main-form .form-control {
    display: block;
    width: 100%;
    border-radius: 500px;
    border: 1px solid #afbac7;
    background: #fbfbfb;
    color: #000000;
    font-size: 14px;
    min-height: 50px;
    padding: 10px 20px 10px;
    font-weight: 500;
    line-height: 0;
    background-origin: border-box;
    background-clip: padding-box, border-box !important;
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(278deg, rgb(102 96 240 / 70%) 0%, rgb(56 175 255 / 80%) 36%, rgb(122 80 247 / 80%) 67%, rgb(184 81 244 / 53%) 100%) !important;
}
.main-form textarea.form-control {
    line-height: 17px;
    padding-top: 17px;
    border-radius: 20px;
}
.main-form .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgb(110 51 169 / 0%);
}
.main-form .form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: var(--main-color) !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(110 51 169 / 0%);
}
.main-form .select-options {
    text-align: right;
    padding-right: 13px;
    height: calc(33px + 0.75rem + 0px);
    line-height: 30px;
    font-size: 12px;
    padding: 10px 23px;
    font-weight: 500;
    color: #000;
}
.form-check{
    padding-right: 20px !important;
}
.form-check .form-check-input {
    width: 18px;
    height: 18px;
}
.form-check label {
    margin-top: 4px;
}
.form-switch .form-check-input {
    width: 40px;
    height: 25px;
}
.main-form .upload-file{
    height: 40px;
    padding-right: 20px !important;
}
.main-form .upload-file::file-selector-button{
    border-radius: 50px;
    color: #464f5c;
    background: #F0F0FE;
    border: 1px solid #E2E2F5;
    height: 30px;
    cursor: pointer;
    transition: all .25s ease-in;
    cursor: pointer;
    margin-top: 0px;
    padding: 5px 20px;
    margin-right: -5px;
}
.main-form .upload-file::file-selector-button:hover{
    background-color: #F0F0FE;
    color: #000;
    transition: all .25s ease-in;
}
.inptSpn {
    color: #5C6673;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
    display: inline-block;
    width: 100%;
}
/* preview image */
.preview-container {
    margin-top: 10px;
    display: none;
    position: relative;
}
.upl-image-preview {
    max-width: 100%;
    height: 100px;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
}
.delete-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #df2727;
    color: white;
    border: none;
    padding: 3px 5px;
    min-width: 23px;
    height: 23px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
}
hr:not([size]) {
    height: 1px;
    background: #949494;
    margin-top: 10px;
    margin-bottom: 10px;
}
/* Scale Container || التقييم الخطي  */
.scale-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 5px;
}
.scale-container .scale-list {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    flex-direction: row;
    width: 100%;
}
.scale-container .scale-item {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0.5px solid rgba(179, 177, 215, 0.70);
    background: #FDFCFF;
    flex: none;
}
.scale-container .scale-item.selected {
    background-color: #5b3cc4;
    color: #fff;
}
.scale-container .labels {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    font-size: 14px;
    color: #000;
    width: 100%;
}
.width-100{
    width: 100%;
}
.submit-btn{
    min-height: 50px;
}
.submit-btn:hover{
    background: var(--secondary-color);
    color: var(--font-light-color);
}

.add-soci-card .select-options {
    font-weight: 700;
}
.nice-select {
    position: relative;
}
.nice-select .option {
    color: #000000;
}
.nice-select:after {
    content: "";
    display: block;
    height: 7px;
    margin-top: -3px;
    pointer-events: none;
    position: absolute;
    right: auto;
    left: 15px;
    top: 49%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 7px;
}
.nice-select .list {
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
        opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 5;
    width: 100%;
    overflow-y: auto;
    max-height: 165px;
    height: auto;
    border: 1px solid #afbac7;
    background: #fbfbfb;
    color: #000000;
    border-radius: 20px;
}
::placeholder {
    color: #5a5a5a;
    font-weight: 300;
    opacity: 1; /* Firefox */
}
::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: #5a5a5a;
    font-weight: 300;
}
.input-grp {
    position: relative;
}
.num-input input {
    direction: ltr;
    text-align: left !important;
}
.st-no {
    position: absolute;
    top: 12px;
    left: 16px;
    direction: ltr;
    z-index: 2;
}
.st-no img {
    height: auto;
    width: 30px;
    border-radius: 3px;
}
.st-no span {
    font-size: 14px;
    font-weight: 700;
    font-family: "Inter";
    margin-left: 8px;
    vertical-align: middle;
}
.eml-spn {
    background: rgba(72, 6, 137, 0.11);
    border-radius: 6px;
    color: var(--main-color);
    padding: 7px 22px;
    position: absolute;
    top: 14%;
    left: 7px;
    font-size: 12px;
}
.eml-spn:hover {
    background: rgb(72 6 137 / 21%);
    color: var(--main-color);
}
.eml-spn-msg {
    display: none;
}
.sm-msg {
    color: #5d2396;
    font-size: 12px;
    font-weight: 900;
    padding: 15px 0 0 0;
}
/* .main-form form input.form-control{
    height: 60px;
} */
.check-flex {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 8px;
}
.check-flex label {
    margin: 0;
    padding-top: 7px;
}
.form-check-input:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.main-form .iti {
    display: block;
    text-align: left;
}
.iti .form-control {
    text-align: left;
}
.iti__selected-flag {
    padding: 0 15px 0 20px;
    direction: ltr;
}
.iti__country-list {
    left: 0;
    right: auto;
}
.main-form form .iti--allow-dropdown .form-control {
    padding-left: 110px !important;
}
.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 12px;
    font-weight: 700;
    vertical-align: middle;
    margin-top: -1px;
}
.iti--separate-dial-code .iti__selected-flag {
    background-color: rgb(0 0 0 / 0%);
}
.iti--separate-dial-code .iti__selected-flag:hover {
    background-color: rgb(0 0 0 / 0%) !important;
}
.iti__country {
    direction: ltr;
}
.iti .form-control {
    text-align: left;
    direction: ltr;
}
.form-control.is-valid, .was-validated .form-control:valid {
    padding-right: 18px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: initial;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    border: 1px solid #d0d0d0;
    background: #f5f5f5;
}
.form-control.is-invalid, .was-validated .form-control:invalid{
    border-color: #dc3545 !important;
    background-image: none;
    background-repeat: no-repeat;
    background-position: initial;
    padding-right: 18px;
    background-image: none !important;
}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .25);
}
/*----------------------------------------*/
/*   Header Area 
/*----------------------------------------*/
/* ====  Navbar  ==== */
.navbar-toggler {
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
    line-height: 24px;
    padding: 10px;
    border-radius: 500px;
    font-size: 17px;
    flex: none;
}
.navbar-toggler i {
    color: var(--font-light-color);
}
.navbar-toggler[aria-expanded="false"] .menu-icon {
    display: block;
    color: var(--font-light-color);
}
.navbar-toggler[aria-expanded="false"] .close-icon {
    display: none;
}
.navbar-toggler[aria-expanded="true"] .close-icon {
    display: block;
    color: var(--font-light-color);
}
.navbar-toggler[aria-expanded="true"] .menu-icon {
    display: none;
}
.navbar {
    padding: 10px 30px;
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--main-background);
}
.navbar .container,
.navbar .container-fluid {
    position: relative;
    z-index: 2;
}
.navbar-light .navbar-nav .nav-link {
    color: var(--main-color);
    font-weight: 600;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
    color: #462cff;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #462cff;
}
.navbar-brand img {
    width: 123px;
    height: 45px;
    margin-right: 0;
}
.navbar.active {
    position: fixed;
    top: 0;
    margin: 0;
    display: flex;
    align-content: center;
    align-items: center;
    box-shadow: 0px 10px 20px 2px #190d250a;
}
.navbar-brand-logo {
    padding: 0;
    margin: 0;
}
.navbar-brand-logo img {
    display: block;
    height: 40px;
    margin-top: 0px !important;
    transition: all 0.3s ease;
    margin-top: -11px !important;
}
.navbar-nav .nav-link {
    color: var(--main-color);
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    transition: all 0.3s ease;
}
.navbar-expand-lg .navbar-nav {
    flex-direction: row;
    gap: 10px;
    margin-right: 0;
    margin-left: auto;
    margin: auto;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus {
    background: linear-gradient(90deg, #38AFFF 5.47%, #6660F0 56.97%, #5830E3 74.47%, #B851F4 96.97%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    transform: scale(1.1);
}
.navbar-brand {
    float: right;
    flex: 1 0 0%;
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        flex: 1 0 60%;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 5px 10px;
    }
}

.dropdown-btn-log.show {
    background: #fff;
    color: #261325;
}
.dropdown .dropdown-menu {
    width: 100%;
    border-radius: 7px;
    background: var(--main-background);
    color: var(--font-light-color);
    margin: 0 0;
    padding: 0;
    margin-top: 20px;
    border: 0;
    right: -73%;
    /* right: 0; */
    left: auto;
    min-width: 200px;
}
.dropdown .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dropdown-item {
    width: 100%;
    padding: 15px 20px;
    clear: both;
    font-weight: 400;
    color: var(--font-light-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 12px;
}
.dropdown-item i {
    font-size: 17px;
    margin-left: 8px;
    vertical-align: middle;
}
.navbar-nav .dropdown .dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 15px 20px;
    color: var(--font-light-color);
    border-bottom: 1px dashed #252525;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--font-light-color);
    background-color: #f8f8f814;
}
.navbar-nav .dropdown li:last-child .dropdown-item {
    border-bottom: 1px dashed #25252500;
}
.navbar-nav .dropdown .dropdown-menu {
    background: #ffffff;
    color: #000;
    border: 1px solid #ebebeb;
    box-shadow: 0px 3px 4px 0px #76767629;
}
.navbar-nav .dropdown .dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    color: #000;
    border-bottom: 0px solid #ededed;
    text-align: center;
}
.navbar-nav .dropdown .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown .dropdown-menu .dropdown-item:active {
    background-color: #EFEFEF;
    color: #000000;
    padding-right: 15px;
}
.reg-accc-mob-scrn {
    margin-left: 12px;
}
.login-profile{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: transform 0.3s ease;
}
.login-profile:hover{
    transform: scale(1.1);
}
/* Mobile Nav Links */
.mobile-nav {
    display: flex;
    width: 100%;
    background: var(--main-background);
    padding: 7px 13px;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 99;
    bottom: -1px;
    right: 0;
    min-height: 73px;
    border-radius: 25px 25px 0 0;
    display: none;
}
.mobile-nav-links {
    display: flex;
    width: 100%;
    padding: 10px 10px;
    border-radius: 25px;
    align-content: center;
    align-items: center;
    justify-content: space-around;
}
.mobile-nav-links a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    align-content: flex-start;
    color: var(--font-light-color);
    font-size: 14px;
    font-weight: 600;
}
.mobile-nav-links a i {
    font-size: 20px;
    color: var(--font-light-color);
}
.mobile-nav-links a.active {
    color: var(--main-color);
}
.mobile-nav-links a.active i {
    font-weight: bold;
    color: var(--main-color);
}
/* hd-left */
.hd-left {
    display: flex;
    margin-right: 30px;
    position: relative;
    align-items: center;
    gap: 5px;
}
.reg-log-buttons {
    padding: 0;
    margin-left: 0;
}
.reg-log-buttons a {
    border-radius: 50px;
    background: var(--main-color);
    display: flex;
    padding: 15px 26px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: var(--font-light-color);
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 166.667% */
}
.reg-log-buttons a:hover {
    background: #117b72;
    color: var(--font-light-color);
}
.arrow-rt {
    transform: rotate(37deg);
}
.hd-profile-button .drop-profile-btn {
    width: 35px;
    height: 35px;
    padding: 0;
}
.drop-profile-btn img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
}

/* Dashboard Navbar Links || Mobile Screens */

.dashboard-sidebar {
    width: 80%;
    background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.2) 100%
        ),
        linear-gradient(
            90deg,
            var(--main-background) 0%,
            var(--main-background) 72.36%
        );
}
body[data-theme-value="default-theme"] .dashboard-sidebar {
    background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.2) 100%
        ),
        linear-gradient(90deg, #371b30 0%, #1f102e 72.36%);
}

.dashboard-sidebar .navbar-nav {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
}
.dashboard-sidebar .sidebar-head {
    text-align: center;
    padding: 10px 0 30px 0;
    border-bottom: 1px solid var(--main-background);
    margin-bottom: 15px;
}
.dashboard-sidebar .prf-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f6f6f6;
    border: 1px solid #c6c6c6;
    overflow: hidden;
    margin: auto;
}
.dashboard-sidebar .prf-img img {
    width: 100%;
    height: 100%;
}
.dashboard-sidebar .prf-titles {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.dashboard-sidebar .prf-titles h3 {
    text-align: center;
    font-size: 17px;
    color: var(--font-light-color);
    font-weight: 700;
}
.dashboard-sidebar .prf-titles h5 {
    font-size: 14px;
    color: var(--font-light-color);
}
/* Links */
.dashboard-sidebar .nav-item .pg-link {
    display: flex;
    width: 100%;
    padding: 12px 25px 12px 15px;
    color: var(--font-light-color);
    font-size: 15px;
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif;
    align-items: center;
    flex-direction: row;
    font-weight: 700;
}
.dashboard-sidebar .nav-item .pg-link i {
    width: 28px;
    height: 27px;
    font-size: 19px;
    color: var(--font-light-color);
    margin-left: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.dashboard-sidebar .sidebar-pages .pg-link.active {
    color: var(--main-color);
}
.dashboard-sidebar .sidebar-pages .pg-link.active I {
    background: var(--secondary-color);
    color: var(--font-light-color);
    font-size: 13px;
}
.dashboard-sidebar .site-nav-pgs {
    padding-right: 25px;
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px solid #fea31c14 !important;
}
.dashboard-sidebar .site-nav-pgs h5 {
    font-size: 15px;
    color: var(--secondary-color);
    margin-bottom: 10px;
    font-weight: 500;
}
/* notifications */
.notifications.notify-mobile-scrn {
    margin-left: 0;
}
.notifications.notify-mobile-scrn .notification_dd {
    right: auto;
    left: -40px;
    width: 430px;
}
.notifications.notify-mobile-scrn .notification_dd:before {
    left: 50px;
    right: auto;
}
.notify-btn {
    width: 45px;
    height: 45px;
    background: #fff0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: var(--font-light-color);
    position: relative;
    transition: transform 0.3s ease;
}
.notify-btn:hover{
    transform: scale(1.2);
}
.notifications.active .notify-btn{
    transform: scale(1.2);
}
.notify-btn.notify-active::after {
    content: "";
    width: 17px;
    height: 17px;
    border-radius: 100px;
    background: var(--secondary-color);
    position: absolute;
    top: 4px;
    right: 7px;
    border: 3px solid var(--main-background);
}
.notify-btn:hover {
    color: var(--font-light-color);
}
.notify-btn i {
    font-size: 22px;
    color: #000000;
}
.notification_dd .ntfc-title{
    font-size: 20px;
    color: #333;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: right;
    margin-top: 10px;
    padding: 20px 30px 0;
}
.notification-list .ul-ttl{
    font-size: 15px;
    color: #7f7a9f;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: right;
    margin-top: 10px;
}
.notifications {
    position: relative;
}
.notifications .notification_dd {
    position: absolute;
    top: 58px;
    left: -14px;
    user-select: none;
    background: #fff;
    border: 1px solid #BDBDBD;
    width: 350px;
    height: auto;
    display: none;
    box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.125),
        -10px -10px 35px rgba(0, 0, 0, 0.125);
    border-radius: 14px;
}
.notifications .notification_dd:before {
    content: "";
    position: absolute;
    top: -18px;
    left: 25px;
    border: 10px solid;
    border-color: transparent transparent #fff transparent;
}
.notification-list {
    overflow: hidden;
    border-radius: 0;
    max-height: 400px;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px 30px;
}
.notification-list::-webkit-scrollbar {
    width: 4px;
    display: none;
}
.notification-list::-webkit-scrollbar-thumb {
    background-color: rgba(180, 180, 180, 0.812);
}
.notifications .notification_dd li {
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
    padding: 15px 0px;
    transition: transform 0.3s ease;
} 
.notifications .notification_dd li:hover{
    transform: scale(1.05);
}
.notifications .notification_dd li:last-child {
    border-bottom: 0px;
}
.notifications .notification_dd li .notify_sts_icon {
    width: 60px;
    height: 60px;
    border-radius: 100px;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #EFEFEF;
}
.notifications .notify_sts_icon i {
    font-size: 21px;
}
.notifications .sts-success .notify_sts_icon {
    border: 1px solid #19875524;
    background: #19875524;
}
.notifications .sts-success .notify_sts_icon i {
    color: #1a9e61;
}
.notifications .sts-failed .notify_sts_icon {
    border: 1px solid#d248481c;
    background: #d248481c;
}
.notifications .sts-failed .notify_sts_icon i {
    color: #d24848;
}
.notifications .sts-msg .notify_sts_icon {
    border: 1px solid#2c38521c;
    background: #2c38521c;
}
.notifications .sts-msg .notify_sts_icon i {
    color: #2c3852;
}
.notifications .sts-pymnt .notify_sts_icon {
    border: 1px solid#d5b18a30;
    background: #d5b18a30;
}
.notifications .sts-pymnt .notify_sts_icon i {
    color: #ca751b;
}
.notifications .notification_dd li .notify_data {
    margin: 0 13px;
    width: 280px;
}
.notifications .notify-text-card{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.notifications .notify-text {
    flex: 80%;
}
.notifications .notify-text h5 {
    color: #494949;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
}
.notifications .notify-text h5 a {
    font-size: 13px;
    font-weight: 800;
    color: var(--main-color);
}
.notifications .notify-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
}
.notifications .notify-text p {
    color: #707070;
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
}
.notifications .ntfi-time{
    flex: none;
}
.notifications .ntfi-time h6{
   color: #707070;
    font-size: 13px;
    font-weight: 500;
}
.navbar .notifications.active .notification_dd {
    display: block;
}
/* .navbar .notifications.active .notification_dd .notification_ul {
    max-height: 300px;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: hidden;
} */
.notifications-btn {
    padding: 15px 15px 15px;
    box-shadow: 0px -10px 18px 0px #dbdbdb36;
}
.notifications-btn .noti-btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 14px;
    background: color-mix(in srgb, var(--main-color), #0000 92%);
    color: var(--main-color);
    text-align: center;
    width: 100%;
    font-weight: 700;
    transition: transform 0.3s ease;
}
.notifications-btn .noti-btn:hover {
    background: var(--main-color);
    color: var(--font-light-color);
    transform: scale(1.03);
    transition: transform 0.3s ease;
}
/* Breadcrumb */
.breadcrumb {
    background: rgba(255, 255, 255, 0.58);
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 12px;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    border: 0;
}
.breadcrumb a {
    color: rgba(0, 0, 0, 0.38);
    text-align: right;
    font-family: "Tajawal", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; 
}
.breadcrumb-item.active {
    color: #000;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; 
}
.breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: 0;
    padding-left: 12px;
    color: #b2b9c0;
    content: var(--bs-breadcrumb-divider, "/");
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0;
}

/*==========================================*/
/* CSS Pages
/*==========================================*/
/* Index */
/* Section */
.head-title{
    display: flex;
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}
.head-title p{
    font-size: 40px;
    color: #333;
    font-weight: 300;
}
.head-title .highlight{
    color: #000;
    font-weight: 500;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    border: 2px solid rgba(102, 96, 240, 0.70);
    border-radius: 100px;
    padding: 5px 26px;
}
.head-title .arrow-icon{
    position: relative;
    display: flex;
}
.head-title .arrow-icon i{
    width: 40px;
    height: 40px;
    font-size: 42px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    transform: rotate(30deg);
    position: absolute;
    top: -40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fade-out {
    opacity: 0;
}
.word-list {
    display: none;
}
/* intro-card-item  */
.intro-card-item{
    position: relative;
}
.intro-card-item .img-video{
    width: 100%;
    height: 538px;
}
.intro-card-item .img-video img{
    width: 100%;
    height: 100%;
}
.introcard-info{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 50px;
}
.introcard-info h4{
    font-size: 28px;
    color: #5830E3;
    font-weight: 600;
}
.introcard-info p{
    color: #000;
    font-size: 17px;
    font-weight: 400;
    margin-top: 10px;
}
.introcard-info .introcard-text{
    flex: 0 0 80%;
}
/* cards wrapper */
.intro-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
}
.intro-card {
    border-radius: 30px;
    padding: 1rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    position: relative;
    min-height: 150px;
    color: #fff;
    opacity: 1;
    padding: 37px 40px 20px;
    position: relative;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.intro-card::after {
    content: "";
    background-image: url(../img/images/icon_bg.svg);
    width: 100%;
    height: 100%;
    background-size: 70%;
    background-position: 60% 20%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    opacity: .13;
}
.intro-card .crd-title {
    font-size: 21px;
    font-weight: 600;
    position: relative;
    z-index: 3;
}
.intro-card .description {
    opacity: 0;
    max-height: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    text-align: right;
    margin-top: 11px;
    position: relative;
    z-index: 3;
} 
.intro-cards-wrapper .intro-card .main-btn-arrow{
    position: absolute;
    top: 30px;
    left: 30px;
    min-width: auto;
    background: #fff;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 0;
    z-index: 3;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.intro-cards-wrapper .intro-card .main-btn-arrow p{
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    display: none;
}
.card1{
    background: #9490F5;
}
.intro-card.card1::after {
    top: -90px;
    background-size: 90%;
}
.card2{
    background: #CE86F8;
}
.intro-card.card2::after {
    background-position: 64% 80%;
    background-size: 90%;
    top: -12px;
}
.card3{
    background: #74C7FF;
}
.intro-card.card3::after {
    top: 40px;
    background-size: 97%;
    background-position: 270% 49%;
}
.intro-card .crd-icon{
    width: 60px;
    height: 60px;
    background: #ffffff1a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    border-radius: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 5;
}
/* Hover on Card 1 */
.intro-cards-wrapper:has(.card1:hover) .card1 {
    height: 280px;
    transition: all 0.3s ease-in-out;
    padding: 40px 40px 20px;
}
.intro-cards-wrapper:has(.card1:hover) .card1 .description {
    opacity: 1;
    max-height: 100px;
}
.intro-cards-wrapper:has(.card1:hover) .card3 {
visibility: hidden;
opacity: 0;
max-height: 0;
margin: 0;
padding: 0;
    transition: all 0.3s ease-in-out;
}
.intro-cards-wrapper .card1:hover .main-btn-arrow p{
    visibility: visible;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    display: block;
}
.intro-cards-wrapper .card1:hover .main-btn-arrow{
    width: auto;
    padding: 5px 20px;
}

/* Hover on Card 2 */
.intro-cards-wrapper:has(.card2:hover) .card2 {
    height: 280px;
    transition: all 0.3s ease-in-out;
    padding: 40px 40px 20px;
}
.intro-cards-wrapper:has(.card2:hover) .card2 .description {
    opacity: 1;
    max-height: 100px;
}
.intro-cards-wrapper:has(.card2:hover) .card3{
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.intro-cards-wrapper .card2:hover .main-btn-arrow p{
    visibility: visible;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    display: block;
}
.intro-cards-wrapper .card2:hover .main-btn-arrow{
    width: auto;
    padding: 5px 20px;
}

/* Hover on Card 3 */
.intro-cards-wrapper:has(.card3:hover) .card3 {
    height: 280px;
    transition: all 0.3s ease-in-out;
    padding: 40px 40px 20px;
}
.intro-cards-wrapper:has(.card3:hover) .card3 .description {
    opacity: 1;
    max-height: 100px;
}
.intro-cards-wrapper:has(.card3:hover) .card1{
    visibility: hidden;
    opacity: 0.001;
    max-height: 0;
    min-height: 40px;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.intro-cards-wrapper .card3:hover .main-btn-arrow p{
    visibility: visible;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    display: block;
}
.intro-cards-wrapper .card3:hover .main-btn-arrow{
    width: auto;
    padding: 5px 20px;
}
/* Section */
.section-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 30px;
}
.section-title h3{
    color: #333;
    font-weight: 700;
    font-size: 27px;
}
.flex-div{
    display: flex;
    flex-direction: row;
    gap: 10px;
}
/* Statistics Area */
.statistics-area {
    position: relative;
}
.stsc-list{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}
.statistics-area .stsc-card {
    background-color: #FCFCFC;
    border: 1px solid #cbcbcb;
    border-radius: 20px;
    padding: 34px 26px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    flex-direction: row;flex: 1 1 calc(25% - 18px);
}
.stsc-card .icon {
    font-size: 30px;
    width: 60px;
    height: 60px;
    background: var(--secondary-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.stsc-card .stsc-number{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
}
.stsc-card .number {
    font-size: 38px;
    font-weight: bold;
    color: #323062;
    line-height: 30px;
    transition: all 0.3s ease-in-out;
}
.stsc-card .label {
    font-size: 18px;
    color: #333;
}
/* Cardbox1 */
.cardbox1-item{
    background: #FCFCFC;
    border: 1px solid #BDBDBD;
    padding: 30px;
    border-radius: 25px;
}
.cardbox1-item .cardbox-top{
    position: relative;
}
.cardbox1-item .cardbox-img{
    width: 100%;
    height: 210px;
    border-radius: 20px;
    overflow: hidden;
}
.cardbox1-item .cardbox-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.cardbox1-item:hover .cardbox-img img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
.cardbox1-item .sm-lbs-inf{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    position: absolute;
    top: 30px;
    right: -10px;
    gap: 8px;
}
.sm-lbs-inf .lbs-item{
    font-size: 14px;
    background: #ddd;
    padding: 4px 16px;
    border-radius: 50px;
}
.sm-lbs-inf .lbs-item.date-lbs{
    background: rgba(0, 0, 0, 0.70);
    color: #fff;
}
.grd-lbs.purple-color{
    color: #fff;
    background: #B851F4;
}
.grd-lbs.blue-color{
    color: #fff;
    background: #5830E3;
}
.grd-lbs.cyan-blue-color{
    color: #fff;
    background: #38AFFF;
}

.cardbox1-item .cardbox-txt{
    text-align: center;
    padding: 30px 20px 10px;
}
.cardbox1-item .cardbox-txt h3{
    font-size: 22px;
    color: #333;
    font-weight: 600;
}
.cardbox1-item .cardbox-txt p{
    font-size: 17px;
    color: #333333c0;
    font-weight: 500;
    margin-top: 11px;
    line-height: 26px;
}
.cardbox1-item .cardbox-ft{
    text-align: center;
    margin-top: 40px;
}
.cardbox-ft-bottom{
    margin-top: 35px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.cardbox-ft-bottom .date-item{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
}
.cardbox-ft-bottom .date-item h4{
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 700;
}
.cardbox-ft .cardbox-ft-bottom .date-item h5{
    color: #535353;
    font-size: 14px;
    font-weight: 500;
}
.cardbox1-item .cardbox-ft h5{
    font-size: 17px;
    color: #333;
    font-weight: 500;
}
.cardbox1-item .cardbox-ft .main-btn{
    display: inline-flex;
    padding: 10px 30px;
}
.owl-carousel .owl-stage {
    margin: 2px 0;
}
.cardbox1-item:hover{
    border-color: var(--secondary-color);
}
.cardbox1-item:hover .cardbox-txt h3{
    color: #4d499a;
}
.owl-nav{
    position: absolute;
    top: -70px;
    left: 0;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot{
    background: rgba(189, 189, 189, 0.70);
    width: 40px;
    height: 40px;
    border-radius: 5100px;
    color: #fff;
}
.owl-carousel .owl-nav button.owl-prev{
    margin-left: 5px;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover{
    background: var(--secondary-color);
    color: #fff;
}

/* Section Area */
.sec-section{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;    
}
.sec-srt{
    flex: 0 0 36%;
}
.sec-mddl{
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sec-end{
    flex: 0 0 23%;
}
.sec-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px
}
.sec-item .sec-text h4{
    font-size: 19px;
    color: #fff;
    font-weight: 600;
}
.sec-item .sec-text h5{
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}
/* item-1 */
.sec-item-1{
    height: 490px;
}
.sec-item-1{
    border-radius: 40px;
    background: linear-gradient(179deg, rgba(212, 151, 248, 0.71) -13.64%, rgba(217, 161, 249, 0.71) 16.22%, rgba(158, 64, 216, 0.71) 45.45%, rgba(194, 139, 227, 0.71) 91.99%);
    backdrop-filter: blur(12.5px);
    padding: 50px 40px;
    position: relative;
}
.sec-item-1::before{
    content: "";
    background-image: url(../img/images/clip_path.png);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: .5;
}
.sec-item-1 img{
    width: 280px;
    height: auto;
    margin-bottom: 30px;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.sec-item-1 img, 
.sec-item-1 .sec-text{
    position: relative;
    z-index: 1;
}
.sec-item-1:hover::before{
    opacity: .2;
}
.sec-item-1:hover img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}

/* item-2 */
.sec-item-2{
    height: 220px;
}
.sec-item-2{
    border-radius: 30px;
    background: linear-gradient(90deg, var(--Colors-periwinkBlue, rgba(102, 96, 240, 0.85)) 8.15%, rgba(141, 136, 247, 0.85) 15.22%, rgba(102, 96, 240, 0.85) 38.26%, rgba(102, 96, 240, 0.85) 60.41%);
    backdrop-filter: blur(12.5px);
    padding: 30px 20px;
    position: relative;
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    overflow: hidden;
}
.sec-item-2::before{
    content: "";
    background-image: url(../img/images/clip_path.png);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: .5;
}
.sec-item-2 .sec_img{
    position: relative;
    height: 180px;
}
.sec-item-2 img{
    width: 300px;
    height: auto;
    margin-bottom: 30px;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    position: absolute;
    left: -121px;
    bottom: -118px;
}
.sec-item-2 img, 
.sec-item-2 .sec-text{
    position: relative;
    z-index: 1;
}
.sec-item-2:hover::before{
    opacity: .2;
}
.sec-item-2:hover img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
.sec-item-2 .sec-text{
    margin-bottom: 20px;
}

/* item-3 */
.sec-item-3{
    height: 270px;
}
.sec-item-3{
    border-radius: 40px;
    background: #000;
    backdrop-filter: blur(12.5px);
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
}
.sec-item-3 .sec_img{
    position: relative;
    height: 195px;
    margin-bottom: 0;
}
.sec-item-3 img{
    width: 240px;
    height: auto;
    margin-bottom: 30px;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    left: -28px;
    bottom: -10px;
}
.sec-item-3 img, 
.sec-item-3 .sec-text{
    position: relative;
    z-index: 1;
}
.sec-item-3:hover::before{
    opacity: .2;
}
.sec-item-3:hover img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
/* item-4 */
.sec-item-4{
    height: 490px;
}
.sec-item-4{
    border-radius: 40px;
    background: linear-gradient(180deg, rgba(160, 217, 255, 0.85) -14.67%, rgba(136, 207, 255, 0.85) 45.58%, rgba(98, 174, 225, 0.85) 71.94%);
    backdrop-filter: blur(12.5px);
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}
.sec-item-4::before{
    content: "";
    background-image: url(../img/images/clip_path.png);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: .5;
}
.sec_img{
    position: relative;
    height: 290px;
    margin-bottom: 30px;
}
.sec-item-4 img{
    width: 440px;
    height: 280px;
    max-width: 150%;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    /* position: absolute; */
    left: -10px;
    top: 50px;
}
.sec-item-4 img, 
.sec-item-4 .sec-text{
    position: relative;
    z-index: 1;
}
.sec-item-4:hover::before{
    opacity: .2;
}
.sec-item-4:hover img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}

.sec-item .main-btn-arrow{
    position: absolute;
    top: 30px;
    left: 30px;
    min-width: auto;
    background: #fff;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 0;
    z-index: 3;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.sec-item .main-btn-arrow p{
    display: none;
}
.sec-item:hover .main-btn-arrow{
    width: auto;
    padding: 5px 20px;
}
.sec-item:hover .main-btn-arrow p{
    display: block;
}
/* Courses 2 Section */
/* cardbox2-item */
.cardbox2-item {
    text-align: center;
    background: #FCFCFC;
    border: 1px solid #BDBDBD;
    padding: 30px;
    border-radius: 25px;
}
.cardbox2-item .cardbox-info {
    padding: 20px;
}
.cardbox2-item .cardbox-info .cardbox-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}
.cardbox2-item .cardbox-info .cardbox-txt h3 {
    font-size: 20px;
    color: #333;
    font-weight: 600;
}
.cardbox2-item .cardbox-info .cardbox-txt h5 {
    font-size: 17px;
    color: #333;
    font-weight: 500;
}
.cardbox2-item .cardbox-mddl{
    position: relative;
}
.cardbox-mddl .sm-lbs-inf{
    position: absolute;
    bottom: 20px;
    left: 6px;
}
.cardbox-mddl .sm-lbs-inf .video-lb {
    font-size: 14px;
    background: rgba(51, 51, 51, 0.70);
    padding: 4px 16px;
    border-radius: 50px;
    color: #fff;
}
.cardbox-mddl .sm-lbs-inf .video-lb i{
    font-size: 12px;
    margin-right: 3px;
}
.cardbox2-item .cardbox-img {
    width: 75%;
    height: 170px;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px auto;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.cardbox2-item .cardbox-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}
.cardbox2-item .cardbox-ft .btn {
    margin-top: 17px;
    display: inline-flex;
    padding: 10px 30px;
}
.cardbox2-item:hover .cardbox-img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
/* Dark Style */
.cardbox2-item.dark{
    background: #333;
    border: 1px solid #333;
}
.cardbox2-item.dark .cardbox-info .cardbox-txt h3{
    color: #fff;
}
.cardbox2-item.dark .cardbox-info .cardbox-txt h5{
    color: #fff;
}
.cardbox2-item.dark .sm-lbs-inf .video-lb {
    background: rgba(239, 239, 239, 0.70);
    color: #000;
}
.cardbox2-item.dark .cardbox-ft .btn {
    color: #ddd;
    border: 1px solid #ddd;
}

/* cardbox3-item */
.technologies-area{
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgb(255 255 255) 0%, rgb(248 248 248) 100%);
}
.main-tabs .nav-tabs .nav-link{
    border-radius: 50px;
    padding: 7px 30px;
}
.main-tabs .nav-tabs .nav-link.outline-btn{
    color: #878787;
    border: 1px solid #878787;
    background: #fff;
}
.main-tabs .cardbox3-item {
    background: #FCFCFC;
    border: 1px solid #BDBDBD;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}
.main-tabs .nav-link.outline-btn:hover{
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    background: #fcfcff;
}
.main-tabs .nav-link.outline-btn.active{
    color: #fff;
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}
.main-tabs .nav-tabs{
    gap: 10px;
    border-bottom: 1px solid #dee2e600;
}
.main-tabs .owl-nav {
    top: -60px;
}
.tab-content>.tab-pane {
    padding-top: 20px;
}
.cardbox3-item::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(0 0 0 / 8%) 0%, #000 100%);
    z-index: 1;
}
.cardbox3-item .cardbox-img{
    display: block;
    width: 100%;
    height: 580px;
    overflow: hidden;
}
.cardbox3-item .cardbox-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.cardbox3-item .cardbox-info{
    position: absolute;
    bottom: 45px;
    text-align: center;
    padding: 10px 30px;
    z-index: 1;
}
.cardbox3-item .cardbox-txt a{
    font-size: 18px;
    color: #fff;
    font-weight: 500;
}
.cardbox3-item .cardbox-btn{
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 8;
    min-width: auto;
    background: #fff;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 0;
    z-index: 3;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.cardbox3-item .cardbox-btn p {
    display: none;
}
.cardbox3-item .main-btn-arrow i {
    font-size: 19px;
    line-height: 0;
    vertical-align: middle;
}
.cardbox3-item:hover .cardbox-btn{
    width: auto;
    padding: 5px 20px;
}
.cardbox3-item:hover .cardbox-btn p {
    display: block;
}
.cardbox3-item:hover .cardbox-img img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}

/* cardbox4-item STYLE */
.cardbox4-item{
    position: relative;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid #BDBDBD;
    background: #FCFCFC;
}
.cardbox4-item .btns-crd {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 40px;
}
.cardbox4-item .cardbox-btn{
    display: inline-flex;
}
.cardbox4-item .cardbox-info .cardbox-txt {
    margin-bottom: 40px;
}
.cardbox4-item .cardbox-info .cardbox-txt a{
    font-size: 23px;
    color: #000000;
    font-weight: 500;
}
.cardbox4-item .cardbox-info .cardbox-txt a:hover{
    color: var(--secondary-color);
}
.cardbox4-item .cardbox-img{
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    height: 230px;
    overflow: hidden;
}
.cardbox4-item .cardbox-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.cardbox4-item:hover .cardbox-img img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
/* Newsletter */
.newsletter-section{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    background-color: #fff;
    background-image: url(../img/images/newsletter_bg.png);
    padding: 80px 50px;
    border-radius: 40px;
}
.nslt-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.nslt-text h3{
    font-size: 30px;
    color: #fff;
    font-weight: 600;
}
.nslt-text h5{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
}
.nslt-form .inputBox {
    display: flex;
    background: #fff;
    height: 58px;
    padding: 11px 25px 11px 80px;
    justify-content: space-between;
    align-items: center;
    min-width: 430px;
    border-radius: 100px;
}
.nslt-form .inputBox input {
    background: #fff0;
    border: 0;
    font-size: 17px;
    color: #444;
    text-align: right;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.nslt-txt h3{
    font-size: 22px;
    color: #fff;
    text-align: right;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    max-width: 520px;;
}
.input-form-group{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.inputBox i{
    color: rgb(0 0 0 / 71%);
    font-size: 18px;
}
.nslt-form .frm-btn{
    color: #fff;
    font-size: 15px;
    min-width: auto;
    background: #333;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 0;
    z-index: 3;
    border-radius: 80px;
    position: absolute;
    left: 10px;
    top: 8px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.nslt-form .frm-btn p{
    display: none;
}
.nslt-form .frm-btn:hover{
    background: var(--secondary-color);
}
.nslt-form .frm-btn:hover p{
    display: block;
}
.nslt-form .frm-btn:hover{
    width: auto;
    padding: 5px 20px;
}

/* Footer Area */
.footer-section{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    background-color: #8e8aeb;
    padding: 60px 60px 30px;
    border-radius: 40px;
    position: relative;
    margin-bottom: 40px;
}
.footer-section::before{
    content: "";
    background-image: url(../img/images/footer_bg.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .5;
}
.footer-head{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 1;
}
.footer-head .ft-logo img{
    width: auto;
    height: 90px;
}
.footer-head .ft-links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.footer-head .ft-links a{
    color: #ffffffcc;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}
.footer-head .ft-links a:hover{
    color: #fff;
}
.footer-ft{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid #fff;
    padding-top: 20px;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}
.footer-ft .copyRights h5{
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}
.footer-ft .ft-social-list{
    display: flex; 
    gap: 8px;
}
.footer-ft .ft-social-list a{
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 1px solid #ffffff00;
    background: #ffffff;
    color: #605bc5;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.footer-ft .ft-social-list a:hover{
    background: var(--secondary-color);
    color: #fff;
}
.footer-ft .ft-social-list a:hover i{
    color: #fff;
    font-size: 16px;
}

/* Register & Login Page */
.gem {
    width: 90px;
    height: 90px;
    position: absolute;
    animation: fall 1s ease-in forwards;
    animation-delay: 1.2s;
    opacity: 1;
}
.gem1 {
    top: 15%;
    right: 10%;
}
.gem2 {
    top: 50%;
    right: 34%;
}
@keyframes fall {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(90vh);
    }
}
.register-area{
    position: relative;
}
.register-area::after{
    content: "";
    background-image: url(../img/images/reg_bg.svg);
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 690px;
    height: 280px;
    background-size: 100%;
    opacity: 0.4;
}
.main-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-style{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    margin-bottom: 40px;
    flex-direction: column;
}
.text-style p{
    font-size: 40px;
    color: #333;
    font-weight: 400;
}
.text-style .highlight{
    color: #000;
    font-weight: 500;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    border: 2px solid rgba(102, 96, 240, 0.70);
    border-radius: 100px;
    padding: 5px 26px;
}
.text-style .arrow-icon{
    position: relative;
    display: flex;
}
.text-style .arrow-icon i{
    width: 38px;
    height: 38px;
    font-size: 36px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    transform: rotate(30deg);
    position: absolute;
    top: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-flex{
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
}
.reg-text {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    color: #333;
    opacity: 0;
    transition: all 1s ease-in-out;
    z-index: 2;
}
.reg-text.show {
    opacity: 1;
}

.reg-text.move-right {
    transform: translateX(100%);
    text-align: right;
}

.form-section {
    opacity: 0;
    transition: all 1s ease-in-out;
    z-index: 1;
}

.form-section.show {
    opacity: 1;
}

form .input-grp {
    position: relative;
}
.form-section{
    padding: 0px 0 0 120px;
}
.reg-form .form-control{
    padding-left: 100px;
    position: relative;
    border-radius: 100px;
    text-align: right;
}
.reg-form .form-control {
    padding: 10px;
    border-radius: 100px;
    border: 2px solid transparent;
    background-color: #fff;
    color: #000;
    text-align: right;
    position: relative;
    z-index: 1;
    padding-left: 40px;
    padding-right: 18px;
    background-origin: border-box;
    background-clip: padding-box, border-box !important;
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(278deg, rgb(102 96 240 / 70%) 0%, rgb(56 175 255 / 80%) 36%, rgb(122 80 247 / 80%) 67%, rgb(184 81 244 / 53%) 100%) !important;
    min-height: 55px;
}
.reg-form .form-control:focus{
    border: 1px solid #000 !important;
}
.input-grp i{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    font-size: 15px;
    color: #333;
}
.toggle-password {
    cursor: pointer;
}
.reg-btn{
    color: var(--font-light-color);
    background: #333;
    border: 1px solid #fff;
    padding: 13px 22px;
    border-radius: 50px;
    font-size: 19px;
    font-weight: 500;
    min-height: 55px;
}
.reg-btn:hover{
    background: var(--secondary-color);
    color: #fff;
}
.form-check-label{
    margin-bottom: 0 !important;
}
.padd-t-b-15{
    padding-top: 15px;
    padding-bottom: 15px;
}
.acc-text h5{
    color: #333;
    font-size: 15px;
    font-weight: 600;
}
.acc-text h5 a{
    color: var(--secondary-color);
}
.acc-text h5 a:hover{
    color: var(--secondary-color);
}
.social-reg{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.social-reg .btn{
    width: 60px;
    height: 60px;
    background: #eeeeee;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #333;
}
.social-reg .btn:hover{
    background: var(--secondary-color);
    color: #fff;
}

/* Contact Page */
.contact-intro{
    padding: 50px;
    background: #ce86f8;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    position: relative;
    flex-wrap: nowrap;
}
.contact-intro::after {
    content: "";
    background-image: url(../img/images/icon_bg.svg);
    width: 100%;
    height: 100%;
    background-size: 53%;
    background-position: 1% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    opacity: .13;
}
.contact-intro h3{
    flex: none;
    position: relative;
    z-index: 9;
    color: #fff;
    font-size: 23px;
    font-weight: 600;
}
.contact-intro h5{
    position: relative;
    z-index: 9;
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    line-height: 29px;
    padding-right: 80px;
    padding-left: 50px;
}
.contact-tabs .head-nav-tab{
    display: flex;
    text-align: center;
    margin: auto;
    width: 100%;
    padding: 30px 20px 10px;
}
.contact-tabs .head-nav-tab .nav-tabs{
    margin: auto;
    display: flex;
    background: #ebebeb;
    padding: 12px 14px;
    border-radius: 10px;
    border: 0;
    border-radius: 500px;
}
.contact-tabs .nav-tabs .nav-link {
    min-width: 200px;
    border-radius: 6px;
    font-size: 15px;
    color: #000;
    font-weight: 500;
    border-radius: 500px;
    min-height: 46px;
}
.contact-tabs .tab-content{
    padding: 0 120px;
}
.contact-tabs .tab-pane{  
    padding: 40px 40px;
    border-radius: 30px;
    position: relative;
}
.contact-tabs .tab-pane::after {
    content: "";
    background-image: url(../img/images/footer_bg.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .9;
    background-repeat: round;
    border-radius: 30px;
}
.tab-box-1{
    background: #8ADBFF;
}
.tab-box-2{
    background: #6660F0B2;
}
.tb-title{
    font-size: 21px;
    color: #000000;
    font-weight: 600;
    margin-bottom: 30px;
    position: relative;
    z-index: 5;
}
.main-form{
    position: relative;
    z-index: 5;
}
.frm-title{
    font-size: 15px;
    color: #333;
    font-weight: 600;
    margin-bottom: 14px;
}
.form-floating>label{
    right: 0;
    left: auto;
    padding-right: 23px;
}
.frm-btn{
    border-radius: 13px;
    background: #333;
    color: #fff;
    width: 100%;
}
.frm-btn:hover{
    background: var(--secondary-color);
    color: #fff;
}
.tab-box-2 .tb-title,
.tab-box-2 .frm-title {
    color: #ffffff;
}

/* Contact Info */
.contact-info-section{
    background: rgba(184, 81, 244, 0.50);
    padding: 40px;
    border-radius: 20px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}
.contact-info-section::after{
    content: "";
    background-image: url(../img/images/footer_bg.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .5;
    background-repeat: round;
}
.map-card{
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 5;
}
.contact-info-box{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
    position: relative;
    z-index: 5;
}
.contact-info-box .cnct-info{
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* background: #ffffff1c; */
    padding: 20px;
    border-radius: 15px;
}
.contact-info-box .cnct-info h5{
    font-size: 17px;
    color: #333;
    font-weight: 600;
    margin-bottom: 14px;
}
.contact-info-box .cnct-info h6{
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}
.cnct-mthd{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}
.cnct-mthd h6{
    direction: ltr;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.cnct-mthd h6 i{
    font-size: 18px;
    margin-left: 10px;
}
.cnct-social{
    display: flex; 
    gap: 8px;
}
.cnct-social a{
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 1px solid #ffffff00;
    background: #ffffff;
    color: #605bc5;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.cnct-social a:hover{
    background: var(--secondary-color);
    color: #fff;
}
.cnct-social a:hover i{
    color: #fff;
    font-size: 16px;
}

/* cliens-section */
.clients-area {
    background-color: #f6f6f6;
}
.clients-section{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
    gap: 25px;
    overflow: hidden;
}
.clients-section .section-title{ 
    flex: 0 0 14%;
    margin: 0;
}
.clients-section .clients-slider{
    flex: 1 0 84%;
}
.clients-section .clients-slider .clients-img{
    width: auto;
    height: 47px;
}
.clients-section .clients-slider .clients-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*  DASHBOARD PAGES */
.container-dashboard{
    position: relative;
    padding-right: 50px;
}
.dashobard-pages-list{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 100px;
    position: fixed;
    right: 30px;
    top: 100px;
    z-index: 999;
}
.dashobard-pages-list .pgs-list-group{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}
.dashobard-pages-list .dsh-page{
    width: 60px;
    height: 60px;
    background: #EFEFEF;
    border-radius: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    color: #333;
    gap: 13px;
    font-size: 15px;
    font-weight: 500;
    transition: all 2s ease;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}
.dashobard-pages-list .dsh-page i{
    font-size: 23px;
}
.dashobard-pages-list .dsh-page:hover i{
    animation: rotate360 0.8s ease;
}
@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.dashobard-pages-list .dsh-page:hover {
    width: auto;
    transform: scale(1.05);
    padding: 10px 24px;
}
.dashobard-pages-list .dsh-page span {
    position: absolute;
    left: 100%;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.dashobard-pages-list .dsh-page:hover span {
    opacity: 1;
    left: 0;
    position: relative;
    transition: all .6s ease;
}
.dashobard-pages-list .dsh-page.active{
    background: #8e8aeb;
    color: #fff;
}
/* dashboard-home-sec */
.dashboard-home-sec{
    display: flex;
    gap: 22px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.dsh-crd-title{
    font-size: 18px;
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
}
.dsh-crd-box{
    flex: 0 0 20%;
}
.dsh-stc-list{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.dsh-stc-list .dsh-stc-item{
    background: #fff;
    border: 1px solid #dedede;
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 15px;
    min-height: 150px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}
.dsh-stc-list .dsh-stc-item h2{
    font-size: 38px;
    font-weight: bold;
    color: #323062;
    line-height: 30px;
    margin-bottom: 17px;
}
.dsh-stc-list .dsh-stc-item h3{
    font-size: 16px;
    color: #333;
}
.dsh-stc-list .dsh-stc-item .img-icon-bg{
    position: absolute;
    top: 10%;
    left: -22px;
    height: 124px;
    width: auto;
    opacity: 14%;
}
/* center */
.dsh-crd-box-2{
    flex: 0 0 37.2%;
    overflow: hidden;
}
.dsh-crd-box-2 .dsh-stc-list{
    gap: 20px;
}
.performance-card{
    width: 100%;
}
.prf-card-item {
    background-color: #8e80f8;
    color: #fff;
    border-radius: 25px;
    padding: 40px 30px 30px 15px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}
.prf-card-item .prf-card-img{
    width: 150px;
    height: 130px;
    object-fit: contain;
}
.prf-card-text{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
}
.prf-card-text h3{
    font-size: 22px;
    font-weight: 700;
    line-height: 29px;
}
.htx-p{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.htx-p .spn-sts{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #ffffff6d;
}
.st-high .htx-p .spn-sts {
    background: #00e676;
}
.st-low .htx-p .spn-sts {
    background: #FF0000 ;
}
.st-middle .htx-p .spn-sts {
    background: #FFEA00;
}
.achievement-card{
    width: 100%;
}
.achv-card-item{
    background-color: #2f2f2f;
    color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    width: 100%;
    height: 336px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}
.achv-card-item .prf-card-text{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}
.achv-card-item .prf-card-text h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 33px;
    width: 72%;
    text-align: right;
}
.wave-graph{
    width: 320px;
    padding: 40px 20px 20px;
    position: relative;
    margin: auto;
}
/* .wave-graph .prf-ch-sts{
    background: #bdbdbd70;
    color: #fff;
    padding: 2px 15px;
    border-radius: 50px;
    position: absolute;
    font-size: 12px;
}
.wave-graph .prf-ch-sts:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    vertical-align: middle;
    position: absolute;
    left: 37%;
    top: 100%;
    margin-top: 3px;
	border-top-color: #3CFF00;
} */
.achv-card-item .btn{
    background: #EFEFEF;
    padding: 9px 46px;
    font-size: 17px;
    color: #333;
    font-weight: 500;
    border-radius: 45px;
    margin-top: 17px;
}
.achv-card-item .btn:hover{
    background: var(--secondary-color);
    color: var(--font-light-color);
}
.owl-dots{
    text-align: center;
}
.owl-carousel button.owl-dot {
    background: #D9D9D9;
    width: 12px;
    height: 12px;
    border-radius: 5100px;
    color: #fff;
    margin: 0 2px;
}
.owl-carousel button.owl-dot.active {
    background: #a8a8a8;
}
/* done style */
.achv-card-item.sts-done{
    background-color: #2f2f2f;
    color: #fff;
}
.achv-card-item.sts-done .wave-graph .prf-ch-sts:after{
    border-top-color: #3CFF00;
}
.achv-card-item.sts-done .wave-graph .prf-ch-sts{
    top: 29px;
    left: 0;
}
/* pending style */
.achv-card-item.sts-pending{
    background-color: #8A86EB;
    color: #fff;
}
.achv-card-item.sts-pending .wave-graph .prf-ch-sts:after{
    border-top-color: #FF8000;
}
.achv-card-item.sts-pending .wave-graph .prf-ch-sts{
    top: 22px;
    right: 73px;
}
/* sts-not-started */
.achv-card-item.sts-not-started{
    background-color: #C47CEE;
    color: #fff;
}
.achv-card-item.sts-not-started .wave-graph .prf-ch-sts:after{
    border-top-color: #FF0004;
}
.achv-card-item.sts-not-started .wave-graph .prf-ch-sts{
    top: 24px;
    right: -4px;
}
/* sts-def */
.achv-card-item.sts-def{
    background-color: #D3D3E1;
    color: #000;
}
.achv-card-item.sts-def .btn{
    background: #6660F0;
    color: #fff;
}
.achv-card-item.sts-def .btn:hover{
    background: #171718;
    color: #fff;
}

/* dash-tabs */
.learning-suggestions-area{
    flex: 0 0 37%;
}
.sugg-crd{
    padding: 40px 25px 30px 25px;
    border-radius: 20px;
    background: rgba(239, 239, 239, 0.70);
}
.sugg-crd .tbs-title{
    color: rgba(51, 51, 51, 0.70);
    font-size: 17px;
    font-weight: 600;
}
.sugg-crd .nav-tabs{
    display: flex;
    gap: 5px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.sugg-crd .nav-tabs .nav-link{
    color: #000;
    background-color: #ffffff00;
    border: 1px solid #333;
    padding: 7px 20px;
    border-radius: 5px;
}
.sugg-crd .nav-tabs .nav-link:hover{
    background-color: #dedede;
}
.sugg-crd .nav-tabs .nav-link.active{
    color: #fff;
    background-color: #333;
}
.sugg-items-list .items-list{
    margin-top: 20px;
}
.sugg-items-list .item-card{
    text-align: right;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
    padding: 12px 0;
}
.sugg-items-list .item-card img{
    width: 70px;
    height: 70px;
    border-radius: 6px;
}
.sugg-items-list .item-card .item-card-text{
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
}
.sugg-items-list .item-card .item-card-text h3{
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}
.sugg-items-list .item-card .item-card-text p{
    font-size: 13px;
    font-style: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.sugg-items-list .item-card .btn{
    color: #000;
    background-color: #ffffff00;
    border: 1px solid #333;
    padding: 3px 24px;
    border-radius: 5px;
}
.sugg-items-list .item-card .btn:hover{
    color: #fff;
    background-color: #333;
}

/* Profile Page */
.profile-head{
    display: flex;
    border-radius: 40px;
    background: linear-gradient(89deg, #3085C6 -9.29%, #6660F0 30.3%, #574FC3 81.68%, #74409A 100.76%);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 22px 25px;
}
.profile-head .profile-img{
    width: 90px;
    height: 90px;
    border-radius: 500px;
    overflow: hidden;
    flex: none;
}
.profile-head .profile-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-head .profile-info-list{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.profile-head .profile-info-list h3{
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}
.profile-head .profile-info-list .inf-list{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.profile-head .profile-info-list .inf-list p{
    font-size: 15px;
    color: #fff;
    padding-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
.profile-head .profile-info-list .inf-list p i{
    font-size: 17px;
    margin-left: 2px;
    color: #ffffffcc;
}
.profile-head .profile-info-list .inf-list p:not(:first-child){
    border-right: 3px solid #ffffff17;
    padding-right: 20px;
}
.profile-head .profile-info-list .inf-list p span{
    font-weight: 500;
}
/* Profile Tab Pages */
.profile-tab-pages{
    border-radius: 200px;
    background: #F0F0FE;
    padding: 10px 13px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}
.profile-tab-pages .prf-pg{
    flex: 1;
    text-align: center;
    color: #000000d4;
    font-size: 14px;
    font-weight: 500;
    padding: 15px 17px;
    border-radius: 500px;
    border: 1px solid rgba(102, 96, 240, 0.15);
    background: rgba(255, 255, 255, 0.30);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.profile-tab-pages .prf-pg i {
    font-size: 18px;
}
.profile-tab-pages .prf-pg.active{
    border: 1px solid #6660F0;
    background: #6660F0;
    color: #fff;
}
.profile-tab-pages .prf-pg:hover{
    background-color: #8e8aeb;
    color: #fff;
}
.profile-content-page {
    border-radius: 20px;
    background: #FFF;
    padding: 30px 40px;
    border-radius: 20px;
    border: 1px solid #d4d3e4;
}
/* Main Page Title */
.main-page-title {
    padding: 2px 5px 20px 0;
    border-radius: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #ECECEC;
}
.main-page-title h3{
    text-align: right;
    font-size: 16px;
    line-height: 100%;
    color: #141522;
    position: relative;
    font-weight: 800;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
}
.main-page-title h3 i{
    vertical-align: middle;
    font-size: 22px;
    line-height: 0;
}
.main-form .main-form-btns {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #AFBAC7;
    padding: 0;
    padding-top: 15px;
    margin-top: 15px;
}
.form-control.is-valid, .was-validated .form-control:valid {
    padding-right: 18px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: initial;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    border: 1px solid #d0d0d0;
    background: #f5f5f5;
}
.form-control.is-invalid, .was-validated .form-control:invalid{
    border-color: #dc3545;
    background-image: none;
    background-repeat: no-repeat;
    background-position: initial;
    padding-right: 18px;
}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .25);
}
.st-no span {
    font-size: 12px;
    font-weight: 700;
    font-family: "Inter";
    margin-left: 5px;
    vertical-align: middle;
}
.form-group .input-grp input {
    padding-left: 55px;
}
/* .profile-content-page .main-form .form-control {
    border: 1px solid #afbac7;
    background: #fbfbfb;
    color: #000000;
} */
.profile-content-page .main-form .form-control {
    border: 1px solid #D3D3E9;
    background: #F7F7FB;
    color: #000000;
}
.profile-content-page .main-form-btns .btn{
    padding: 11px 60px;
}
.profile-content-page .main-form-btns .btn:hover{
    background: var(--secondary-color);
    color: var(--font-light-color);
}

/* Profile Image */
.image-container {
    display: flex;
    align-items: center;
    gap: 20px;
}
.image-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}
#profileImage {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 500px;
    border: 1px solid #D3D3E9;
}
#imageInput {
    display: none;
}
.deleteImage-btn{
    background: rgba(228, 57, 60, 0.08);
    color: #E4393C;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 200px;
}
.deleteImage-btn:hover{
    background: rgb(228 57 60 / 26%);
    color: #b42224;
}
/* Social Inputs */
.social-input{
    display: flex;
    border: 1px solid #D3D3E9;
    background: #F7F7FB;
    color: #000000;
    min-height: 50px;
    border-radius: 500px;
    padding: 0px 20px;
    background-clip: padding-box, border-box !important;
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(278deg, rgb(102 96 240 / 70%) 0%, rgb(56 175 255 / 80%) 36%, rgb(122 80 247 / 80%) 67%, rgb(184 81 244 / 53%) 100%) !important;
}
.social-input.input-grp .form-control{
    border: 1px solid #d3d3e900;
    background: #f7f7fb00;
    color: #000000;
    text-align: left;
    padding-left: 0;
    background-clip: initial;
    border: 0px solid transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
.social-input .acc-nm{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.social-input .acc-nm span{
    font-size: 12px;
    font-weight: 600;
    font-family: "Inter";
    margin-right: 3px;
    vertical-align: middle;
    color: #5F5E74;
    direction: ltr;
}

/* Favorites Page */
.main-tabs .sticky{
    position: sticky;
    top: 74px;
    background: linear-gradient(1deg, rgb(255 255 255 / 0%) 31.41%, #ffffff 98.91%);
    padding: 15px 0;
    backdrop-filter: blur(2px);
    z-index: 9;
}
.def-st1{
    border-radius: 20px;
    border: 1px solid #EFEFEF;
    background: rgba(102, 96, 240, 0.10);
    padding: 60px 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.def-st1 .text-card-st1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.def-st1 .text-card-st1 h3{
    color: #4b4983;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
}
.def-st1 .text-card-st1 h4{
    color: #4b4983bd;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}
.items-flex{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
}
.items-flex .flex-3{
    flex: 0 1 calc(33.33% - 18px);
}
.main-tabs .tb-title {
    font-size: 19px;
    color: #6f6f6f;
    font-weight: 600;
    margin-bottom: 23px;
    position: relative;
    z-index: 5;
}
/* Pagination Section */
.pagination-sec {
    padding: 20px 0;
    text-align: center;
    margin-top: 20px;
}
.pagination-sec .pagination {
    justify-content: center;
    gap: 8px;
}
.pagination-sec .pagination .page-item .page-link{
    width: 43px;
    height: 43px;
    border-radius: 50px;
    border: 0.5px solid #bdbdbd4d;
    background: #EFEFEF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-size: 16px;
    font-weight: 500;;
}
.pagination-sec .pagination .page-item.active .page-link{
    background: #333;
    color: #fff;
    border-color: #333;
}
.pagination-sec .pagination .page-item.disabled .page-link{
    opacity: .5;
}
/* Certificates Page */
.cardbox5-item {
    background: #FCFCFC;
    border: 1px solid #BDBDBD;
    padding: 30px;
    border-radius: 25px;
}
.cardbox5-item .cardbox-top{
    position: relative;
}
.cardbox5-item .head-crd{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.cardbox5-item .head-crd h4{
    color: #B851F4;
    font-size: 16px;
}
.cardbox5-item .cardbox-txt a{
    font-size: 22px;
    color: #333;
    font-weight: 600;
    margin: 20px 0 20px 0;
    display: block;
}
.cardbox5-item .head-crd .main-btn{
    font-weight: 500;
    min-height: 32px;
    border-radius: 40px;
    border: 1px solid #6660F0;
    background: #FFF;
    color: #333;
}
.cardbox5-item .head-crd .main-btn:hover{
    border: 1px solid #6660F0;
    background: #6660F0;
    color: #fff;
}
.cardbox5-item .cardbox-img{
    width: 100%;
    height: 210px;
    border-radius: 20px;
    overflow: hidden;
}
.cardbox5-item .cardbox-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.cardbox5-item:hover .cardbox-img img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
.cardbox5-item .cardbox-ft-bottom {
    margin-top: 25px;
}
.cardbox5-item .cardbox-ft-bottom .date-item h4 {
    color: #333;
    font-size: 15px;
    font-weight: 700;
}
.cardbox5-item .cardbox-ft-bottom .date-item h5 {
    color: #535353;
    font-size: 15px;
    font-weight: 500;
}
/* Notifications Page */
.filter-area{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.filter-area .form-group{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex: 1;
}
.filter-area .form-group .form-control{
    min-height: 40px;
    padding: 7px 20px 7px;
    line-height: normal;
}
.filter-area .flt-btn .main-btn{
    min-height: 40px;
    padding: 7px 20px 7px;
}
.table-head-bx {
    padding: 10px 0px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.table-head-bx .main-form .form-control {
    line-height: normal;
    width: 200px;
    min-height: 44px;
    padding: 8px 15px 8px;
    text-align: right;
}
.table-head-bx h3 {
    color: #000;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
}
.filter-area .main-form label {
    margin: 0;
}
.clndr-group{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 12px;
    justify-content: flex-start;
}
.read-all-btn {
    width: 100%;
    padding: 13px 0px 13px;
    border-bottom: 1px solid #e4e4ff;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 15px;
}
.read-btn {
    border-radius: 100px;
    background: #eee;
    color: #454545;
    font-size: 12px;
    display: flex;
    padding: 10px 22px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    min-width: 171px;
    flex-direction: row;
}
.read-btn i {
    font-size: 16px;
    color: #5c5c5c;
}
.read-btn:hover {
    background: #dcdbdb;
}
.notifications-container  table.dataTable.display tbody td{
    border-top: 1px solid #ddd;
}
.notifications-container .noti-txt-item{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
    padding: 5px 0px;
    max-width: 90%;
}
.notifications-container .noti-txt-item .img-icon {
    width: 60px;
    height: 60px;
    border-radius: 100px;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #EFEFEF;
}
.notifications-container .noti-txt-item .img-icon i {
    font-size: 21px;
    color: #000;
}
.notifications-container .notify-text {
    flex: 80%;
}
.notifications-container .notify-text h5 {
    color: #080808;
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
}
.notifications-container .notify-text h5 a {
    font-size: 13px;
    font-weight: 800;
    color: var(--main-color);
}
.notifications-container .notify-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
}
.notifications-container .notify-text p {
    color: #484848;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 830px;
}
.unread {
    background-color: #f6f6ff !important;
    font-weight: 600;
}
.toggle-read-icon {
    cursor: pointer;
}
.unread .noti-txt-item .img-icon{
    background: #8e8aeb2e;
}
.unread .noti-txt-item .img-icon i{
    color: #5f5ae0;
}
table tbody th, table tbody td {
    padding: 8px 18px !important;
    font-size: 14px;
    color: #000;
    height: 33px;
    vertical-align: middle;
    font-weight: 500;
    text-align: right;
}
.table-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: 5px;
} 
.table-btns .tb-btn {
    width: 38px;
    height: 36px;
    background: #ddd0;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border-radius: 6px;
    border: 1px #e6e6e6;
    background: #fff;
}
.table-btns .tb-btn:hover {
    background: #f6f6ff;
    color: #000;
    border: 1px #e6e6e6;
}
.unread .table-btns .tb-btn:hover {
    background: #e8e8f5;
    color: #000;
    border: 1px #e6e6e6;
}
.noti-date-time {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 9px;
    min-width: 110px;
}
.noti-date-time h5 {
    display: flex;
    gap: 5px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: #000;
}
.noti-date-time h5 i {
    font-size: 13px;
    color: #000;
}
.modal-btns.flex-btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 23px;
}
.modal-p{
    color: #3b3b3b;
    font-size: 15px;
    margin: 10px 0;
    line-height: 21px;
}
@media (min-width: 576px) {
    .stl2-modal .modal-dialog {
        max-width: 500px;
        margin: 10rem auto;
    }
}
.stl2-modal .modal-body{
    padding: 40px 30px;
}
/* Course Info Page */
.flex-stl-card{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.flex-stl-card .hro-text{
    padding: 65px 65px;
    background: #FCFCFC;
    border: 1px solid #BDBDBD;
    border-radius: 40px;
    width: 50%;
    min-height: 440px;
}
.flex-stl-card .hro-text h3{
    color: #000;
    font-size: 31px;
    font-weight: 700;
    text-align: right;
    margin-bottom: 20px;
}
.flex-stl-card .hro-text p{
    color: #000;
    font-size: 17px;
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
}
.flex-stl-card .hro-text .btn{
    min-height: 58px;
}
.flex-stl-card .hro-img{
    width: 47%;
    height: 440px;
    border-radius: 40px;
    border: 1px solid #BDBDBD;
    background: #FFF;
    overflow: hidden;
    flex: 0 1 calc(50% - 20px);
}
.flex-stl-card .hro-img img{
    width: 100%;
    height: 100%;
}
/* -- / Course Info Section */
.sec-title-st2 {
    font-size: 23px;
    color: #6f6f6f;
    font-weight: 600;
    margin-bottom: 23px;
    position: relative;
    z-index: 5;
}
.flex-st2-list{
    display: flex;
    border-radius: 40px;
    border: 1px solid #BDBDBD;
    background: #FCFCFC;
    padding: 50px 45px;
    justify-content: space-between;
    row-gap: 40px;
    column-gap: 20px;
}
.flex-st2-list .flex-st2-card{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}
.flex-st2-list .flex-st2-card .icon{
    display: flex;
    width: 60px;
    height: 60px;
    padding: 8px 8px;
    display: flex;
    align-items: center;
    gap: 26px;
    justify-content: center;
    border-radius: 20px;
    background: #333;
    color: #fff;
}
.flex-st2-list .flex-st2-card .icon i{
   font-size: 27px;
}
.flex-st2-list .flex-st2-card .st2-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}
.flex-st2-list .flex-st2-card .st2-text h4{
    color: #393939b5;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.flex-st2-list .flex-st2-card .st2-text h5{
    color: #000;
    text-align: right;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
/* -- */
.inst-info-details{   
    display: flex;
    border-radius: 25px;
    border: 1px solid #BDBDBD;
    background: #FCFCFC;
    padding: 30px 30px;
    justify-content: flex-start;
    gap: 15px;
    flex-direction: column;
    align-items: flex-start;
    position: sticky;
    top: 80px;
}
.inst-img-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px
}
.inst-img-info img{
    width: 126px;
    height: 126px;
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
}
.inst-img-info .inst-name{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
}
.inst-img-info .inst-name h3{
    color: #000;
    text-align: right;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.inst-img-info .inst-name h5{
    color: #393939b5;
    text-align: right;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.inst-info-details p{
    color: #000;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    width: 100%;
}

.course-info-sec{   
    display: flex;
    border-radius: 25px;
    border: 1px solid #BDBDBD;
    background: #FCFCFC;
    padding: 30px 30px;
    justify-content: flex-start;
    gap: 20px;
    flex-direction: column;
    align-items: flex-start;
}
.course-info-sec .crs-sec-card{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
    padding: 20px 10px;
}
.course-info-sec .crs-sec-card:not(:last-child){
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding-bottom: 30px;
}
.course-info-sec .crs-sec-card .crs-crd-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex: 0 0 45%;
}
.course-info-sec .crs-sec-card .crs-crd-title i{
    width: 60px;
    height: 60px;
    display: flex;
    border-radius: 200px;
    background: rgba(102, 96, 240, 0.10);
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #6660F0;
    flex: none;
}
.course-info-sec .crs-sec-card .crs-crd-title h3{
    color: #424242;
    text-align: right;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.course-info-sec .crs-sec-card .crs-text{
    flex: 1 0 0;
}
.course-info-sec .crs-sec-card .crs-text ul li{
    list-style: disc;
    padding: 4px 0px;
}
.course-info-sec .crs-sec-card .crs-text ul li p{
    color: #000;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    width: 100%;
}
/*----------------------------------------*/
/*   Library Page
/*----------------------------------------*/
.lib-card{
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}
.lib-card::after{
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(1deg, #58585870 10%, rgb(0 0 0 / 0%) 73%);
    position: absolute;
    top: 0;
    right: 0;
}
.lib-card.sm-hgt{
    height: 450px;
}
.lib-card .lib-card-btns{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 25px 22px 20px 25px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 9;
}
.lib-card .lib-card-btns .main-btn{
    background: #fff;
    color: #000;
    font-size: 15px;
    font-weight: 500;
}
.lib-card .lib-card-btns .main-btn:hover{
    background: var(--secondary-color);
    color: var(--font-light-color);
}
.lib-card .lib-card-btns .arrow-btn-st2{
    width: 40px;
    height: 40px;
    font-size: 30px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    transform: rotate(30deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lib-card .lib-card-btns .arrow-btn-st2:hover{
    background: #000;
    color: #fff;
}
.lib-card .lib-img{
    width: 100%;
    height: 100%;
}
.lib-card .lib-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: -webkit-transform 0.8s ease 0s;
    -moz-transition: -moz-transform 0.8s ease 0s;
    -o-transition: -o-transform 0.8s ease 0s;
    transition: transform 0.8s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.lib-card:hover .lib-img img{
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
.lib-card .lib-title{
    position: absolute;
    bottom: 15px;
    right: 0;
    padding: 20px 30px;
    width: 100%;
    z-index: 9;
}
.lib-card .lib-title a{
    font-size: 33px;
    color: #fff;
    font-weight: 600;
}
/*  Library Page / -- Library Info Sec */
.search-sec{
    padding: 16px 40px 16px 20px;
    border-radius: 60px;
    background: #6660f017;
    border: 1px solid #6660f024;
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
    margin-bottom: 28px;
    width: max-content;
    background: linear-gradient(10deg, rgb(239 239 255) 0%, rgb(255 255 255) 100%);
}
.search-sec h3 {
    color: #3c3a75;
    font-weight: 700;
    font-size: 18px;
}
.search-sec .search-card .form-group{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}
.search-sec .search-card.main-form label{
    margin: 0;
}
.search-sec .search-card .input-grp{
    position: relative;
}
.search-sec .search-card.main-form .form-control {
    min-width: 460px;
    padding-left: 145px;
}
.search-sec .search-card.main-form .form-group{
    margin: 0;
    padding: 0 0;
}
.search-sec .search-card .btn{
    position: absolute;
    top: 7px;
    left: 9px;
    background: #8580f336;
    border: 1px solid #71717117;
    color: #43425e;
    min-height: 37px;
}
.search-sec .search-card .btn:hover{
    color: #fff;
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}
.lib-categ-list{
    width: 100%;
    position: sticky;
    top: 80px;
}
.lib-categ-list .nav-tabs{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-content: center;
    border: 0px;
}
.lib-categ-list .nav-tabs .nav-item{
    width: 100%;
}
.lib-categ-list .nav-tabs .nav-item .nav-link{
    width: 100%;
    border-radius: 17px;
    border: 1px solid #BDBDBD;
    background: #FFF;
    padding: 17px 27px 17px 20px;
    text-align: right;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: #333;
    font-weight: 600;
    transition: transform 0.5s ease;
}
.lib-categ-list .nav-tabs .nav-item .nav-link:hover{
    transform: scale(1.05);
}
.lib-categ-list .nav-tabs .nav-item .nav-link .no-spn{ 
    border-radius: 20px;
    background: #EEE;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 500;
}
.lib-categ-list .nav-tabs .nav-item .nav-link:hover{
    border: 1px solid #000;
    color: #000;
}
.lib-categ-list .nav-tabs .nav-item .nav-link.active{
    background: #333;
    border: 1px solid #BDBDBD;
    color: #fff;
}
.lib-categ-list .nav-tabs .nav-item .nav-link:hover .no-spn{ 
    color: #000;
}
.lib-categ-list .nav-tabs .nav-item .nav-link.active .no-spn{ 
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.lib-info-sec{
    padding: 30px 30px;
    border-radius: 20px;
    background: #F4F4F4;
    border: 1px solid #e0e0e0;
}
.lib-info-sec .tab-content>.tab-pane {
    padding-top: 0;
}
.lib-info-container .tb-title{
    font-size: 21px;
    color: #000000;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
    z-index: 5;
}
.lib-info-container .lib-tb-list{
    display: flex;
    gap: 13px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.lib-info-container .lib-tb-list .lib-tb-card{
    display: flex;
    border-radius: 20px;
    background: #fff;
    gap: 55px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #BDBDBD;
    background: #fff;
    padding: 30px 30px;
    border-radius: 20px;
}
.lib-info-container .lib-tb-list .lib-tb-card .lib-tb-card-rgt{
    display: flex;
    gap: 20px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.lib-info-container .lib-tb-list .lib-tb-card .lib-icon{
    width: 65px;
    height: 65px;
    display: flex;
    border-radius: 17px;
    background: rgba(102, 96, 240, 0.10);
    justify-content: center;
    align-items: center;
    font-size: 35px;
    color: #6660F0;
    flex: none;
}
.lib-info-container .lib-tb-list .lib-tb-card .lib-text h3{
    color: #000;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.lib-info-container .lib-tb-list .lib-tb-card .lib-text p{
    color: #333;
    font-size: 15px;
    font-weight: 400;
    text-align: right;
    width: 100%;
    line-height: 22px;
    margin-top: 10px;
    height: 70px;
    overflow: hidden;
}
.rate-item{
    display: inline-flex;
    border-radius: 20px;
    border: 0.5px solid #BDBDBD;
    background: #FFF;
    padding: 5px 20px 5px 14px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 11px;
}
.rate-item h5{
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7px;
}
.rate-item h5 i{
    color: #FFD606;
}
.lib-info-container .lib-tb-list .lib-tb-card .lib-btns{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 26px;
}
.lib-info-container .lib-tb-list .lib-tb-card .lib-btns .btn{
    min-width: 190px;
    padding: 10px 20px;
    opacity: .8;
}
.lib-info-container .lib-tb-list .lib-tb-card .lib-btns .btn:hover{
    opacity: 1;
}
/* -- */
.sec-ttl-tbs{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    position: sticky;
    top: 70px;
    z-index: 999;
    background: #ffffff;
    padding: 15px 10px;
}
.sec-ttl-tbs h3{
    color: #333;
    font-weight: 700;
    font-size: 27px;
    flex: 0 0 23%;
}
.pub-tabs {
    flex: 1 0 0;
}
.pub-tabs .nav-tabs{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    border: 0;
}
.pub-tabs .nav-tabs .nav-link{
    background: #FFF;
    padding: 8px 30px;
    text-align: right;
    font-size: 14px;
    border-radius: 100px;
    border: 1px solid #BDBDBD;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: #333;
    font-weight: 500;
    transition: transform 0.5s ease;
}
.pub-tabs .nav-tabs .nav-link:hover{
    color: #000;
    border: 1px solid #000;
    transform: scale(1.05);
}
.pub-tabs .nav-tabs .nav-link.active{
    background: #333;
    border: 1px solid #BDBDBD;
    color: #fff;
}

.lib-info-container-2 .lib-info-container .lib-tb-list {
    display: flex;
    gap: 13px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.lib-info-container-2 .tb-title{
    font-size: 21px;
    color: #000000;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
    z-index: 5;
}
.lib-info-container-2 .lib-tb-list{
    display: flex;
    gap: 13px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.lib-info-container-2 .lib-tb-list .lib-tb-card{
    display: flex;
    border-radius: 20px;
    background: #fff;
    gap: 55px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #BDBDBD;
    padding: 30px 30px;
    flex: 0 1 calc(50% - 13px);
}
.lib-info-container-2 .lib-tb-list .lib-tb-card .lib-tb-card-rgt{
    display: flex;
    gap: 20px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.lib-info-container-2 .lib-tb-list .lib-tb-card .lib-icon{
    width: 65px;
    height: 65px;
    display: flex;
    border-radius: 17px;
    background: rgba(102, 96, 240, 0.10);
    justify-content: center;
    align-items: center;
    font-size: 35px;
    color: #6660F0;
    flex: none;
}
.lib-info-container-2 .lib-tb-list .lib-tb-card .lib-img{
    width: 185px;
    height: 260px;
    flex: 1 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f4f4;
}
.lib-info-container-2 .lib-tb-list .lib-tb-card .lib-img img{
    width: 100%;
    height: 100%;
}
.lib-info-container-2 .lib-tb-list .lib-tb-card .lib-text h3{
    color: #000;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.lib-info-container-2 .lib-tb-list .lib-tb-card .lib-text p{
    color: #333;
    font-size: 15px;
    font-weight: 400;
    text-align: right;
    width: 100%;
    line-height: 22px;
    margin-top: 10px;
    height: 70px;
    overflow: hidden;
}
.spons-card{
    margin: 18px 0 15px;
}
.spons-card h4{
    color: #000;
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 14px;
}
.spons-card .spons-imgs{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}
.spons-card .spons-imgs img{
    width: auto;
    height: 50px;
}
.lib-info-container-2 .lib-tb-card .lib-btns{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    width: 100%;
    margin-top: 14px;
}
.lib-info-container-2 .lib-tb-card .lib-btns .btn{
    width: 100%;
}

/*   Book Details Area  */
.bk-sm-dts{
    margin-top: 100px;
    padding-left: 100px;
}
.bk-sm-dts h3 {
    color: #000;
    text-align: right;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 45px;
}
.bk-sm-dts h5 {
    color: #333;
    font-size: 20px;
    font-weight: 400;
    text-align: right;
    width: 100%;
    line-height: 25px;
    margin-top: 30px;
    height: 70px;
    overflow: hidden;
}
.bk-img-side{
    position: relative;
}
.bk-img-side img{
    width: auto;
    height: 550px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}
.card-box-2{
    border-radius: 20px;
    border: 0.5px solid #BDBDBD;
    background: #FCFCFC;
    padding: 50px 70px;
}
.bk-dts-head-links{
    display: flex;
    justify-content: space-between;
    width: 50%;
    align-items: center;
    flex-direction: row;
    border-bottom: 1px solid #bdbdbd8f;
    padding-bottom: 60px;
    margin-bottom: 40px;
    position: relative;
}
.bk-dts-head-links .bk-dts-links{
    display: flex;
    justify-content: flex-start;
    width: 50%;
    align-items: center;
    flex-direction: row;
    gap: 12px;
}
.bk-dts-head-links .bk-dts-links .lnk-btn{
    background: #EFEFEF;
    color: #6660F0;
    width: 60px;
    height: 60px;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.bk-dts-links-btns .btn {
    background: #333;
    padding: 13px 52px;
    font-size: 16px;
}
.bk-dts-links-btns .btn:hover {
    background: var(--secondary-color);
    color: var(--font-light-color);
}
.bk-dts-title{
    color: #000;
    text-align: right;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 45px;
    margin-bottom: 15px;
}
.bk-dts-info {
    padding-left: 120px;
}
.bk-dts-info h5{
    color: #333;
    font-size: 17px;
    font-weight: 500;
    text-align: right;
    width: 100%;
    line-height: 25px;
    min-height: 160px;
}
.sponsor-brands .spn-loogs{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}   
.sponsor-brands img {
    width: auto;
    height: 60px;
}
/* Comments Section */
.comments-section .comments-list{
    border-radius: 20px;
    border: 0.5px solid #BDBDBD;
    background: #FCFCFC;
    padding: 50px 50px;
}
.comments-section .comments-list .comment-card{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 30px 0;
}
.comments-section .comments-list .comment-card:not(:last-child){
    border-bottom: 1px solid #ddd;
}
.comments-section .comments-list .comment-card:first-child{
    padding-top: 0;
}
.comments-section .comments-list .comment-card:last-child{
    padding-bottom: 0;
}
.comments-section .comments-list .comment-card .comment-info .comment-info-head{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}
.comments-section .comments-list .comment-card .comment-info .comment-info-head img{
    width: 70px;
    height: 70px;
    flex: none;
    border-radius: 50%;
    background-color: #e8e8e8;
}
.comments-section .comments-list .comment-card .comment-info .comment-info-head .comment-info-name{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
}
.comments-section .comments-list .comment-card .comment-info .comment-info-text{
    padding: 20px 0 0;
}
.comments-section .comments-list .comment-card .comment-info .comment-info-text p{
    color: #333;
    font-size: 17px;
    font-weight: 500;
    text-align: right;
    width: 100%;
    line-height: 25px;
}
.comments-section .comments-list .comment-card .comment-info .comment-info-head .omment-info-name h4{
    color: #000;
    text-align: right;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.comments-section .comments-list .comment-card .comment-info .comment-info-head .omment-info-name .cmm-time{
    color: #9f9f9f;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.comment-rate{
    display: flex;
    gap: 7px;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 10px;
}
.comment-rate i{
    color: #c2c2c2;
    font-size: 20px;
}
.comment-rate .active{
    color: #FFD606;
}


/* Share Card */
.share-links{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.share-menu {
    position: absolute;
    bottom: 100%;
    right: -60px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 500px;
    padding: 8px 16px;
    display: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    z-index: 999;
    min-width: 200px;
    margin-bottom: 13px;
}
.share-menu.show {
    display: block;
}
.share-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    color: #333;
    text-decoration: none;
    width: 40px;
    height: 40px;
    background: #eaeaea;
    font-size: 14px;
    border-radius: 50%;
    justify-content: center;
}
.share-menu a:hover {
    background-color: #f1f1f1;
}
.share-menu .copy-link {
    width: auto;
    border-radius: 50px;
    padding: 5px 20px;
}
.copied-text {
    color: #3a933a;
    font-weight: bold;
    margin-right: 5px;
}

.modal-title{
    color: #000;
    text-align: right;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
}
.modal-content{
    border-radius: 21px;
}
.modal-content p{
    color: #484848;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: right;
    margin: 10px 0;
}
.modal-header{
    border-bottom: 0;
}
.modal-header .btn-close {
    margin-right: auto;
    margin-left: 0;
    font-size: 13px;
    margin-top: 0px;
}
.modal-body {
    position: relative;
    padding: 20px 30px;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 620px;
    }
    .modal-dialog.modal-xl {
        max-width: 1140px;
    }
}
.preview-sec iframe{
    width: 100%;
    height: 100vh;
}
/* Rate Form */
.rating-form {
    width: 100%;
    text-align: center;
    margin: 30px 0 0 0;
}
.rating-form .stars {
    display: flex;
    justify-content: flex-start;
    margin: 12px 0 0 0;
    flex-direction: row;
}
.rating-form .star {
    cursor: pointer;
    font-size: 32px;
    color: #D6D5E9;
    transition: color 0.2s;
}
.star.active, .star.hover {
    color: #f7c200;
}
.rating-form .star-label {
    font-size: 14px;
    margin-top: 4px;
    text-align: center;
}
.rating-form .star-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}
.rating-form h5{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #000;
    text-align: right;
    margin-bottom: 10px;
}
.mrg-btm{
    margin-bottom: 40px;
}
.modal-body .reg-form{
    padding: 0 20px 20px;
}
.modal-body .reg-form .reg-btn {
    width: 100%;
}
/* Survey Page */
.survey-area .form-content-wrapper{
    position: relative;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}
.survey-area .form-content-wrapper::before{
    content: "";
    background: #6660F0;
    width: 124%;
    height: 300px;
    position: absolute;
    top: 0;
    right: -12%;
    z-index: 0;
    border-radius: 30px;
    box-shadow: 0px 0px 0px 15px rgb(102 96 240 / 14%);
}
.survey-area .form-head-sec{
    text-align: center;
    position: relative;
    z-index: 5;
}
.survey-area .form-head-sec h3{
    font-size: 29px;
    color: #fff;
    font-weight: 700;
}
.survey-area .form-head-sec h5{
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin-top: 12px;
}
.survey-area{
    background: #F0F0FE;
    background: linear-gradient(180deg, rgba(240, 240, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.survey-area .form-content-card{
    border-radius: 15px;
    box-shadow: 0px 0px 0px 10px rgb(217 216 229 / 28%);
    background: #FFF;
    padding: 40px 45px 30px 45px;
    position: relative;
    z-index: 5;
}
.frm-img{
    width: 1000px;
    height: auto;
    max-width: none;
    position: absolute;
    bottom: 50px;
    left: -150px;
    z-index: 1;
    opacity: .6;
}
/* About Page */
.about-info-section{
    border-radius: 40px;
    background: rgba(102, 96, 240, 0.10);
    width: 100%;
    display: flex;
    padding: 60px 90px 0 0;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}
.about-info-section::after {
    content: "";
    background-image: url(../img/logo/logo_icon.gif);
    width: 100%;
    height: 100%;
    background-size: 70%;
    background-position: -27% -130px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    opacity: 1;
}
.about-info-section .about-text-card{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.about-info-section .about-text-card .abt-title{
    color: #000;
    font-size: 35px;
    font-weight: 700;
    text-align: right;
    margin-bottom: 20px;
}
.about-info-section .about-text-card .abt-span{
    border-radius: 80px;
    border: 1px solid rgba(51, 51, 51, 0.70);
    background: #EFEFEF;
    padding: 10px 26px;
    font-size: 15px;
    margin-bottom: 20px;
}
.about-info-section .about-text-card .abt-p{
    color: #000;
    font-size: 17px;
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    width: 100%;
}
.about-info-section .abt-img{
   position: relative;
    width: 590px;
    height: 300px;
}
.about-info-section .abt-img img{
    position: absolute;
    bottom: -58px;
    left: 25px;
    width: 325px;
    height: auto;
}
/*  */
.viss-miss-section{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}
.viss-miss-section .vm-card-item{
    border-radius: 30px;
    background: rgba(56, 175, 255, 0.70);
    padding: 50px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    position: relative;
    overflow: hidden;
    height: 280px;
}
.viss-miss-section .vm-card-item div,
.viss-miss-section .vm-card-item p{
    position: relative;
    z-index: 1;
}
.viss-miss-section .vm-card-item::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
}
.viss-miss-section .vm-card-item.mssg-item{
    background-color: rgb(56 175 255);
    flex: 1 0 calc(70% - 30px);
}
.viss-miss-section .vm-card-item.mssg-item::before{
    background-image: url(../img/images/mss_img.png);
    opacity: 0.8;
}
.viss-miss-section .vm-card-item.vsn-item{
    background-color: #6660f0;
    flex: 0 0 calc(30% - 30px);
}
.viss-miss-section .vm-card-item.vsn-item::before{
    background-image: url(../img/images/vsn_img.png);
    opacity: .3;
}
.viss-miss-section .vm-card-item .vm-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    z-index: 9;
}
.viss-miss-section .vm-card-item .vm-head h5{
    border-radius: 80px;
    border: 2px solid #333;
    padding: 10px 26px;
    font-size: 18px;
}
.vm-arrow{
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000;
    border-radius: 50%;
    transform: rotate(30deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-card-item p{
    font-size: 18px;
    line-height: 28px;
}
.about-area-2{
    padding: 50px 0 120px 0;
}
.abt-sec-items{
    position: relative;
    text-align: center;
}
.abt-sec-items img{
    width: 1270px;
    height: 600px;
}
.abt-sec-items .abt-card-item{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    position: absolute;
    z-index: 9;
    width: 280px;
}
.abt-sec-items .abt-crd-info{
    border-radius: 20px;
    border: 0.5px solid #bdbdbd82;
    background: #FDFDFD;
    padding: 30px 20px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: none;
}
.abt-sec-items .abt-card-item.active .abt-crd-info{
    display: inline-flex;
}
.abt-sec-items .abt-card-item-icon{
    width: 100px;
    height: 100px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    border: 10px solid #6660f069;
    color: #6660F0;
    cursor: pointer;
}
.abt-sec-items .abt-crd-head{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.abt-sec-items .abt-crd-head i{ 
    width: 38px;
    height: 38px;
    background: #dddddd00;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #000;
    color: #B851F4;
    font-size: 17px;
}
.abt-sec-items .abt-crd-head h5{
    color: #3c37b3;
    font-size: 21px;
    font-weight: 700;
    text-align: right;
}
.abt-sec-items .abt-crd-text P{
    color: #000;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    width: 100%;
}
.abt-sec-items .abt-card-item.item-1{
    right: -30px;
    top: 0px;
}
.abt-sec-items .abt-card-item .active{
    display: flex;
}
.abt-sec-items .abt-card-item.item-2{
    right: 270px;
    top: 145px;
}
.abt-sec-items .abt-card-item.item-3{
    right: 500px;
    top: 460px;
}
.abt-sec-items .abt-card-item.item-4{
    left: 225px;
    top: 130px;
}
.abt-sec-items .abt-card-item.item-5{
    left: 235px;
    top: 520px;
}
.abt-sec-items .abt-card-item.item-6{
    left: -46px;
    top: 370px;
}
.abt-txt-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 30%;
    gap: 15px;
    margin-top: 30px;
}
.abt-txt-wrapper h3{
    color: #000;
    font-size: 31px;
    font-weight: 700;
    text-align: right;
}
.abt-txt-wrapper p{
    color: #000;
    font-size: 17px;
    font-weight: 500;
    text-align: right;
    width: 100%;
}
.abt-sec-items .abt-card-item-icon:hover {
    animation: rotate360 1.3s ease;
}
@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.abt-sec-items .abt-card-item-icon::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border: 15px solid rgb(102 96 240 / 40%);
    border-radius: 50%;
    animation: pulse-border 2s infinite;
    z-index: -1;
}
@keyframes pulse-border {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
/* Wave Style */  
.prf-card-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}
.prf-card-text h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 33px;
    width: 100%;
    text-align: right;
}
.wave-container {
    position: relative;
    width: 80%;
    height: 80px;
    margin: 35px auto 10px;
}
svg {
    width: 100%;
    height: 100%;
}
.prf-ch-sts {
    background: #bdbdbd70;
    color: #fff;
    padding: 2px 15px;
    border-radius: 50px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px;
    position: absolute;
    transform: translate(50%, -100%);
    white-space: nowrap;
    transition: all 0.4s ease-in-out;
}
.prf-ch-sts::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 3px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #3CFF00;
}
.prf-ch-sts.progress-start::after {
    border-top-color: red;
}
.prf-ch-sts.progress-middle::after {
    border-top-color: orange;
}
.prf-ch-sts.progress-almost::after {
    border-top-color: yellow;
}
.prf-ch-sts.progress-done::after {
    border-top-color: #3CFF00;
}
/* Errors Page Style  404 - 500*/
.error-section{
    border-radius: 40px;
    background: rgba(102, 96, 240, 0.10);
    width: 100%;
    display: flex;
    padding: 40px 60px 40px 60px;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.error-section::after {
    content: "";
    background-image: url(../img/logo/logo_icon.gif);
    width: 100%;
    height: 100%;
    background-size: 67%;
    background-position: -33% 70px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    opacity: .3;
}
.rt-img img{
    width: 580px;
    height: auto;
    margin-bottom: 10px;
}
.rt-txt-div h2{
    color: #333;
    font-weight: 700;
    font-size: 25px;
}
.rt-txt-div p{
    font-size: 17px;
    color: #333333c0;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
}
.error-section .txt-prg {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
    margin: 30px 0 25px 0;
}