/* FONT IMPORT */

/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* Local Font */
/* @font-face {
	font-family: "Font Name";
	src: url("../fonts/fontpath.ttf");
  } */

:root {
    --white: #fff;
    --black: #000;
    --primary: #ca3433;
    --primary-light: #FFEEE8;
    --secondary: #fff0f0;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
    background: #fff;
    overflow-x: hidden;
    font-family: "Inter", sans-serif;
}

[class^="box-"] {
    display: none;
}

[class^="box-"].showfirst {
    display: block;
}

section {
    position: relative;
    padding: 3rem 0;
}

p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    color: #828282;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
    margin: 0;
}

.img-auto {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

a,
button {
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a:hover,
button:hover {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

figure {
    margin: 0;
}

/* Cursor Start */

.mouse-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    visibility: hidden;
}

.cursor-inner {
    margin-left: 2px;
    margin-top: 2px;
    width: 7px;
    height: 7px;
    z-index: 10000001;
    background-color: var(--primary);
    -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-inner.cursor-hover {
    margin-left: -10px;
    margin-top: -10px;
    width: 30px;
    height: 30px;
    background-color: var(--primary);
    opacity: 0.3;
}

/* Cursor End */

/* PRELOADER */

.preLoader {
    width: 100%;
    height: 100%;
    z-index: 1111;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.preLoader.black {
    background-color: #fff;
    z-index: 11113;
}

.preLoader.white {
    z-index: 11112;
    background-color: #ca3433;
}

/* PRELOADER */

/* GLOBAL CSS */

.themeBtn {
    background: var(--primary);
    font-size: 18px;
    color: var(--white);
    text-transform: capitalize;
    font-weight: 600;
    display: inline-block;
    padding: 22px 3rem;
    line-height: normal;
}

.secondaryBtn {
    background: #FFEEE8;
    font-size: 18px;
    color: var(--primary);
    text-transform: capitalize;
    font-weight: 600;
    display: inline-block;
    padding: 22px 3rem;
    line-height: normal;
}

.secondaryBtn:hover {
    color: var(--primary);
}

.themeBtn.borderBtn {
    background: transparent;
    border: 1px solid #fff;
    padding: 1.04em 2em;
}

/* NAV HEADER CSS */
nav.navbar {
    background-color: var(--white);
}

header {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 111;
    top: 0;
    width: 100%;
    padding: 0 0 0;
    transition: 0.3s ease-in-out;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-nav {
    align-items: center;
    justify-content: end;
    width: 100%;
}

.navbar-nav .nav-item .nav-link {
    font-size: 1rem;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 500;
    padding: 0 0;
    display: inline-block;
}

/* !NAV HEADER CSS */

/* Main-Sec Css Start */
img.img-fluid.main-img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
    height: 777px;
    right: -250px;
}

section.main-sec {
    background: linear-gradient(45deg, #f0f2f5, #f0f2f5);
    /*z-index: 1;*/
    padding-top: 5rem;
}

.main-content h1 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -2px;
}

.main-content p {
    line-height: 1.625;
    margin: 0.625rem 0 1rem;
    color: var(--primary);
}

.main-wrappp {
    background-color: var(--white);
    padding: 1.5625rem 1.75rem;
    border: 1px solid #e9eaf0;
}

.main-wrappp p {
    color: var(--primary);
    line-height: 1.25;
    margin: 0.2rem 0 1.5rem;
}

.main-wrappp h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--primary);
}

form.main-form label {
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--primary);
}

form.main-form span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--primary);
}

form.main-form .form-control {
    height: 2.875rem;
    border: 1px solid #e9eaf0;
    outline: unset;
    box-shadow: unset;
    color: var(--primary);
    background: var(--white);
}

form.main-form button {
    border: unset;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    white-space: nowrap;
    margin-top: 0;
}

img.img-fluid.main-img1 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

form.main-form .form-group {
    position: relative;
}

form.main-form .form-group a {
    position: absolute;
    right: 1.25rem;
    bottom: 0;
    top: 2.5rem;
    margin: auto;
    color: var(--primary);
}

/* Main-Sec Css End  */

/* Category-Sec Css Start */

.mainHead {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary);
    text-align: center;
    margin-bottom: 2.5rem;
}

.category-wrapp {
    background-color: #fff0f0;
    border: 1px solid #ffdede;
    padding: 2.0625rem 1.25rem 2.625rem 1.4375rem;
}

.category-wrapp h3 {
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
    line-height: 1.2;
}

.category-wrapp h4 {
    font-size: 1.375rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary);
    margin: 0.625rem 0;
}

ul.category-list li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    color: #6e7485;
}

ul.category-list li {
    text-decoration: underline;
}

ul.category-list li + li {
    margin: 0.625rem 0;
}

.category-wrapp .themeBtn {
    width: 100%;
    text-align: center;
    margin-top: 0.625rem;
}

/* Category-Sec Css End  */

/* Work-Sec Css Start  */

.work-wrapp {
    text-align: center;
    margin: 1rem 0;
}

.work-wrapp h3 {
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--primary);
}

.work-wrapp h4 {
    font-size: 1.375rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary);
    margin: 0.225rem 0;
}

.work-wrapp p {
    color: var(--primary);
    line-height: 1.375;
}

section.work-sec {
    background-color: #fafafa;
}

/* Work-Sec Css End   */

/* Ask-Sec Css Start  */

.ask-wrapp figure {
    height: 3.25rem;
    width: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background-color: #fff0f0;
    flex-shrink: 0;
}

.ask-wrapp {
    display: flex;
    gap: 1rem;
}

.ask-content h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: #323232;
    margin: 0.225rem 0;
}

.ask-content p {
    color: var(--primary);
    line-height: 1.375;
}

section.icon-sec a i {
    height: 3.9375rem;
    width: 3.9375rem;
    display: grid;
    place-items: center;
    border-radius: 50px;
    background: var(--white);
    color: var(--primary);
    flex-shrink: 0;
    font-size: 1.2rem;
}

.ask-wrapp + .ask-wrapp {
    margin: 2.5rem 0 0;
}

/* Ask-Sec Css End   */

/* Icon-Sec Css Start  */

.icon-wrapp {
    background-color: var(--primary);
    border-radius: 50px;
    padding: 0.625rem;
}

.icon-wrapp a {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-wrapp a h5 {
    font-size: 1.3125rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--white);
}

.icon-wrapp a h5 span {
    display: block;
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: none;
}

section.image-sec h3 {
    font-size: 2.5rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary);
    text-align: center;
}

section.image-sec ul {
    display: flex;
    align-items: center;
}

section.image-sec {
    padding: 5rem 0 4rem;
}

section.icon-sec {
    padding: 1rem 0 2rem;
}

/* Icon-Sec Css End   */

/* Footer-Sec Css Start */
footer {
    background-color: var(--primary);
    padding: 1rem 0;
}

footer select {
    height: 3rem;
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    color: var(--white);
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    padding-left: 0.625rem;
}

footer p {
    color: var(--white);
    line-height: 22px;
    font-size: 14px;
}

/* Footer-Sec Css End  */

.countdown-container {
    background-color: #b71c1c;
    padding: 5px 20px;
    border: 1px solid #ff9a99;
    border-radius: 12px;
    display: flex;
    gap: 15px;
    color: white;
    font-weight: bold;
    width: 188px;
    justify-content: center;
}

.time-box {
    text-align: center;
    position: relative;
}

.time-box .value {
    font-size: 1.125rem;
    font-weight: bold;
}

.time-box .label {
    font-size: 9px;
    font-weight: 400;
}

/* Marquee-Sec Css Start */
:root {
    --gap: 4rem;
}

.marquee {
    overflow: hidden;
    user-select: none;
    display: flex;
    gap: var(--gap);
}

.marquee ul {
    list-style: none;
    flex-shrink: 0;
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    animation: marquee 40s linear infinite;
}

.marquee .text {
    font-size: 1rem;
    margin: 0;
    color: #fff;
    display: flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-weight: 500;
}

@keyframes marquee {
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

section.marquee-sec {
    padding: 3rem 0;
    background-color: var(--primary);
}

.top-bar {
    background: #ca3433;
    padding: 10px 0;
}

/* Marquee-Sec Css End   */

/* Innerpages Start */

.header2 {
    position: unset;
}

.top-bar2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--primary);
}

.top-left a {
    color: var(--white);
    margin-right: 2rem;
}

.top-right select {
    background: transparent;
    border: 0;
    color: var(--white);
    margin-right: 0rem;
}

.nav2 {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
}

.nav2-left {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav2-left select {
    width: 200px;
    height: fit-content;
    padding: 0.5rem 1rem;
    border: 1px solid #e9eaf0;
    color: var(--primary);
}

.serch-box {
    color: var(--primary);
    width: 424px;
    border: 1px solid var(--primary);
    padding: 0.5rem 1rem;
    border: 1px solid #e9eaf0;
}

.nav2-right {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.cart-btns {
    display: flex;
    gap: 0.9rem;
}

.nav2-right button {
    border: 0;
    padding: 0.7rem 2rem;
}

.cart-btns li a {
    color: var(--primary);
}

.create {
    color: var(--primary);
    font-weight: 500;
    background: #ffeee8;
    padding: 0.6rem 1.5rem;
}

/* About Page Start */

.innerBann {
    background: #f5f7fa;
    padding-top: 14rem;
}

.bann-content {
    text-align: center;
}

.bann-content h2 {
    color: var(--primary);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.bann-links a {
    color: var(--primary);
}

.bann-links span {
    color: var(--primary);
    margin: 0 0.4rem;
}

.about-content h2 {
    color: #e9eaf0;
    font-size: 5rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    margin-bottom: 1.2rem;
}

.about-content h3 {
    color: var(--primary);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.08;
    margin-bottom: 2rem;
}

.about-content p {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 400;
}

.about-img {
    width: 672px;
    height: 500px;
}

.about-img img {
    width: 100%;
    height: 100%;
}

.company-contnet h2 {
    color: var(--primary);
    font-size: 2rem;
    font-weight: 600;
    /* font-family: "Inter", sans-serif; */
    margin: 0 0 1.3rem;
}

.company-contnet p {
    font-size: 14px;
    color: #6e7485;
    line-height: 22px;
    width: 79%;
}

.company-img {
    width: 199px;
    box-shadow: 0px 0px 32px 0 rgb(9 26 68 / 7%);
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white);
}

.comp-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* background: #091a4407; */
    padding: 0.2rem 1px;
}

.rating {
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
}

.rating-cont {
    display: flex;
    gap: 1rem;
}

.rating-cont-c h3 {
    color: var(--primary);
    font-size: 2rem;
    font-weight: 600;
}

.rating-cont-c p {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.mission {
    background: #ffeee8;
    padding: 1rem 0 0;
}

.mission-cont h3 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5625rem;
}

.mission-cont h2 {
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 600;
}

.mission-cont p {
    color: var(--primary);
    margin-top: 0.8rem;
}

.gallery-content h3 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5625rem;
}

.gallery-content h2 {
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 600;
}

.gallery-content p {
    color: var(--primary);
    margin: 0.8rem 0;
}

.testi-card {
    text-align: center;
}

.test-wrap {
    background: #f5f7fa;
    padding: 2rem;
    margin-bottom: 2rem;
}

.test-img {
    margin-left: -20rem;
}

.test-wrap p {
    color: var(--primary);
}

.test-img2 {
    margin-left: 19rem;
}

.testi-card h3 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
}

.testi-card p {
    color: var(--primary);
}

.arrow-img {
    position: absolute;
    left: 47%;
    top: 14.7rem;
}

/* About Page End */

/* Footer2 Start */

.footer2 {
    padding: 4rem 0 2rem;
}

.footer-logo {
    margin: 0 0 1.5rem 0;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 30px;
}

.social-link li {
    width: 46px;
    height: 46px;
    background: #363b4740;
    display: grid;
    place-items: center;
}

.social-link li:hover {
    background: transparent;
    transition: all ease 0.4s;
    box-shadow: 1px 1px 1px 1px var(--primary);
}

.social-link li a {
    color: var(--white);
}

.footer2 h3 {
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 1.625rem;
    text-transform: uppercase;
}

.quicklist li {
    margin-bottom: 0.4375rem;
}

.quicklist li a {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 400;
}

.quicklist li a i {
    margin-left: 1rem;
}

.bord-line {
    position: relative;
}

.bord-line::before {
    content: "";
    width: 151px;
    height: 2px;
    position: absolute;
    background: var(--white);
    top: 1.7rem;
}

.copyRight {
    border-top: 1px solid #be1e1d;
    margin: 5rem 0 0 0;
    padding: 2rem 0 0;
}

.copyRight select {
    border: 0;
    background: var(--white);
    color: #8c94a3;
    font-weight: 400;
}

.gallery-content .themeBtn i {
    margin-left: 1rem;
}

/* Footer2 end */

/* Contact Page Start */

.branches .text-center p {
    color: var(--primary);
    width: 38%;
    margin: 1rem auto;
}

.branches-img {
    position: relative;
}

.branches-img figcaption {
    background: var(--white);
    position: absolute;
    bottom: 1rem;
    left: 50%;
    text-align: center;
    padding: 1rem 2rem;
    transform: translateX(-50%);
    width: 90%;
}

.branches-img figcaption h6 {
    color: var(--primary);
    font-size: 0.75rem;
    text-transform: capitalize;
    margin-bottom: 0.3rem;
}

.branches-img figcaption h5 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
}

.branches-img figcaption p {
    color: var(--primary);
    font-size: 0.875rem;
}

.contact {
    background: #f5f7fa;
}

.contact-cont h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

.address {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid #e9eaf0;
    padding-bottom: 1rem;
    margin-top: 1rem;
    justify-content: space-between;
}

.address p {
    color: var(--primary);
}

.contact-form {
    padding: 3rem;
    background: var(--white);
}

.contact-form h3 {
    color: var(--primary);
    margin-bottom: 1rem;
}

.contact-form :is(input, textarea) {
    width: 100%;
    border: 1px solid #e9eaf0;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
}

.contact-form label {
    color: var(--primary);
    font-size: 0.875rem;
}

.contact-form .themeBtn {
    border: 0;
}

/* Contact Page End */

/* Innerpages End */
.expet-content h1 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
}

.expet-content p {
    color: #4e5566;
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 1.5rem 0 2rem;
    width: 89%;
}

.subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
}

section.browse-sec .subtitle {
    text-align: center;
    margin-bottom: 2rem;
}

.browse-wrapp figure {
    height: 4.0625rem;
    width: 4.0625rem;
    display: grid;
    place-items: center;
    background-color: var(--white);
}

.browse-wrapp {
    background-color: #fff0f0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
}

.browse-content h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary);
}

.browse-content p {
    line-height: 1.5;
    color: #6e7485;
    font-size: 0.875rem;
    margin-top: 0.235rem;
}

.browse-wrapp:hover {
    background-color: var(--primary);
    transition: 0.6s ease;
}

.browse-wrapp:hover .browse-content h4,
.browse-wrapp:hover .browse-content p {
    color: var(--white);
    transition: 0.6s ease;
}

.browse-wrapp + .browse-wrapp {
    margin: 1.5rem 0;
}

.browse-bottom p {
    line-height: 1.5;
    color: #6e7485;
    font-size: 0.875rem;
    margin-top: 1.235rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
}

.browse-bottom p a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: capitalize;
}

section.selling-sec {
    background-color: #fafafa;
    padding-bottom: 2rem;
}

.selling-wrapp {
    background-color: var(--white);
}

.selling-overlay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.625rem 0;
}

.selling-overlay h5 {
    background-color: #ffeee8;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    padding: 6px;
}


.highlighter {
    background-color: #ffeee8;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    padding: 6px;
}

.selling-overlay span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
}

.selling-wrapp h2 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary);
    line-height: 1.4;
}

.selling-bottom ul li a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #4e5566;
    font-weight: 500;
}

.selling-bottom ul li a i {
    color: var(--primary);
}

.selling-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e9eaf0;
    padding-top: 0.875rem;
    margin-top: 0.875rem;
}

.selling-bottom h5 {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
    color: #4e5566;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.selling-bottom h5 span {
    font-weight: 400;
    color: #8c94a3;
}

.selling-content {
    padding: 0.475rem 0.5625rem 0.885rem;
}

.selling-wrapp + .selling-wrapp {
    margin: 1.5rem 0;
}

.feature-top h5 {
    background-color: #fff0f0;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
    width: fit-content;
    padding: 0.45rem 1.25rem;
}

.feature-top span {
    font-size: 1.125rem;
    font-weight: 400;
    color: #1d2026;
}

.feature-top span del {
    font-size: 0.875rem;
    font-weight: 400;
    color: #a1a5b3;
    margin-left: 0.4375rem;
}

.feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.625rem 0 0.985rem;
}

.feature-wrapp h4 {
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--primary);
}

.feature-center figure {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feature-center figure h5 {
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: capitalize;
    color: #4e5566;
}

.feature-center ul li a {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.feature-center ul li a h5 {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1d2026;
}

.feature-center ul li a h5 span {
    color: #8c94a3;
    font-weight: 400;
}

.feature-wrapp a i {
    color: var(--primary);
}

.feature-bottom ul {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.feature-bottom ul li a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.feature-bottom ul li a h5 {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4e5566;
    white-space: nowrap;
}

.feature-bottom ul li a h5 span {
    color: #8c94a3;
    font-weight: 400;
    margin-left: 3px;
}

.feature-wrapp {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #e9eaf0;
}

.feature-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.525rem 0;
}

.feature-bottom {
    border-top: 1px solid #e9eaf0;
    padding-top: 1.1rem;
}

.feature-wrapp + .feature-wrapp {
    margin: 1.5rem 0;
}

.feature-overlay p {
    color: #4e5566;
    font-size: 0.875rem;
    width: 87%;
    line-height: 1.5;
}

.feature-overlay .row + .row {
    padding-top: 2.5rem;
}

.feature-overlay {
    border: 1px solid #e9eaf0;
    background-color: var(--white);
    padding: 4rem 3.5rem 3rem;
    margin-top: -12rem;
}

.feature-content {
    padding: 0 10px 7px 0;
}

section.feature-sec {
    padding-top: 0;
    padding-bottom: 4rem;
}

.courses-top {
    display: flex;
    align-items: center;
    margin-top: 0.625rem;
    justify-content: space-between;
}

.courses-top h5 {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
    background: #ffeee8;
    padding: 0.5rem 1rem;
}

.courses-top span {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--primary);
}

.courses-content h3 {
    font-size: 0.9675rem;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--primary);
    line-height: 1.375;
    margin: 0.925rem 0;
}

.courses-bottom ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.courses-bottom ul li a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4e5566;
}

.courses-bottom ul li a i {
    color: var(--primary);
}

.courses-bottom ul li a h5 {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
    color: #4e5566;
}

.courses-bottom ul li a h5 span {
    color: #8c94a3;
}

.courses-main {
    display: flex;
    align-items: center;
    gap: 22px;
}

.courses-right {
    border: 1px solid #e9eaf0;
    position: relative;
    box-shadow: 0 4px 20px 0 rgb(29 32 38 / 12%);
    padding: 1.25rem 1.375rem 2.3125rem 1.375rem;
    margin: 0 -5rem 0 0px;
}

.courses-right h5 {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
    background: #fff0f0;
    width: fit-content;
    padding: 2px 1rem;
}

.courses-right h3 {
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--primary);
    margin: 0.625rem 0 0.825rem;
    line-height: 1.2;
}

.courses-kevin figure {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.courses-kevin figure h5 {
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: capitalize;
    background: unset;
    color: #8c94a3;
    padding: 0;
}

.courses-kevin figure h5 span {
    display: block;
    color: #1d2026;
}

.courses-kevin a h5 {
    color: #1d2026;
    font-size: 0.875rem;
}

.courses-kevin a {
    color: #1d2026;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.courses-kevin a span {
    color: #6e7485;
    margin-left: 1px;
}

.courses-kevin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 1rem; */
    margin: 1.5rem 0;
}

ul.courses-list li a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

ul.courses-list li a h5 {
    color: #4e5566;
    font-size: 0.875rem;
    background: unset;
    font-weight: 600;
    padding: 0;
}

ul.courses-list li a h5 span {
    text-transform: none;
    font-weight: 400;
}

ul.courses-list {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1.2rem;
}

ul.courses-list li a i {
    color: var(--primary);
}

.percent-wrapp h5 {
    font-size: 1.5rem;
    font-weight: 400;
    color: #1d2026;
    background: unset;
    padding: 0;
}

.percent-wrapp h5 del {
    font-size: 1rem;
    color: #8c94a3;
    margin-left: 5px;
}

.percent-wrapp h6 {
    font-size: 0.875rem;
    color: var(--primary);
    background: #ffeee8;
    width: fit-content;
    padding: 0.3rem 1.2rem;
}

.percent-wrapp {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.courses-percent a i {
    height: 3rem;
    width: 3rem;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: #ffeee8;
}

.courses-percent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.625rem 0 2rem;
    border-bottom: 1px solid #e9eaf0;
    padding-bottom: 1rem;
}

.courses-last h4 {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #1d2026;
    margin-bottom: 0.625rem;
}

.courses-last ul li a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: capitalize;
    color: #6e7485;
}

.courses-last ul li + li {
    margin: 1rem 0 0;
}

.courses-right .themeBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 3.5rem;
}

.courses-right .themeBtn + .themeBtn {
    margin: 0.625rem 0;
}

.secondBtn {
    background: #fff0f0;
    color: var(--primary);
}

a.themeBtn.courseBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: auto;
    gap: 1rem;
    margin-top: 3rem;
    background: #fff0f0;
    color: var(--primary);
}


.courses-wrapp {
    background: #fff;
    position: relative;
    border: 1px solid #e9eaf0;
}

.courses-content {
    padding: 0.625rem 15px;
}

.courses-right::before {
    /* position: absolute; */
    content: "";
    height: 1px;
    width: 430px;
    background: #e9eaf0;
    top: -11rem;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.courses-right::after {
    position: absolute;
    content: "";
    height: 1px;
    width: 430px;
    background: #e9eaf0;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 31%;
}

.courses-bottom {
    position: relative;
    margin-top: 1.625rem;
}

.courses-bottom::before {
    /* position: absolute; */
    content: "";
    height: 1px;
    background-color: #e9eaf0;
    right: 0;
    margin: auto;
    top: -16px;
    width: 258px;
    left: -5px;
}

.become-wrapp h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1.65rem;
}

.becom-ovarlay h5 {
    height: 52px;
    width: 52px;
    display: grid;
    place-items: center;
    border-radius: 50px;
    color: var(--primary);
    background: #fff0f0;
    font-weight: 600;
    font-size: 24px;
}

.becom-ovarlay {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    /* flex: 0 0 54%; */
}

.becom-ovarlay span {
    font-size: 1rem;
    font-weight: 400;
    color: #1d2026;
}

.become-wrapp {
    background: #fff;
    padding: 3rem 44px;
    box-shadow: 0 4px 20px 0 rgb(29 32 38 / 7%);
    height: 100%;
}

.become-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.become-main + .become-main {
    margin: 1.5rem 0 0;
}

/* Umair Farooq */
.course-contents .course {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 4px solid #E9EAF0;
    position: relative;
    padding-bottom: 1rem;
}

.course-contents .course::before {
    content: "";
    width: 20%;
    height: 4px;
    position: absolute;
    bottom: -4px;
    left: 0;
    background-color: var(--primary);
}

.course-contents .course h4, .course-contents .course h5 {
    color: var(--primary);
}

.course-contents
.become-sec {
    background: #f5f7fa;
    padding: 6rem 0 16rem;
}

.company {
    margin-top: 0;
}

/* .instructer .container {
  background: var(--white);
  border: 1px solid #e9eaf0;
  padding: 3rem 0;
  position: absolute;
  top: -12rem;
  left: 16%;
  padding: 3rem 0px;
} */
.instrctr-month {
    background: var(--white);
    border: 1px solid #e9eaf0;
    margin: 0 -120px;
    padding: 4rem 7.7rem;
}

.instructer-wrap-cont {
    text-align: center;
    border: 1px solid #e9eaf0;
}

.instructer-wrap-cont h3 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    margin: 12px 0 6px;
}

.instructer-wrap-cont h4 {
    color: #8c94a3;
    font-size: 0.875rem;
    margin: 0 0 16px;
}

.instructer-wrap-cont .courses-bottom::before {
    width: 194px;
    left: -1px;
}

.instructer-wrap-cont .courses-bottom {
    padding: 0rem 0.2rem 0.4rem 0.2rem;
    border-top: 1px solid #e9eaf0;
    padding: 1rem 1rem;
    margin: 0;
}

.learning {
    background: var(--primary);
    border-bottom: 1px solid #be1e1d;
}

.learning h2 {
    color: var(--white);
}

.learning-btns .themeBtn {
    background: #ffffff10;
}

.learning-btns .themeBtn:hover {
    background: var(--white);
}

.learning-btns {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.courses {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.courses-cont h5 {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

.courses-cont h4 {
    color: var(--white);
    font-size: 1rem;
}

/* Umair Farooq */

/* faiz-css-start */
.color_section {
    background-color: #ffeee8;
    width: 100%;
    /*height: 350px;*/
    position: relative;
    padding-top: 12%;
}

.mg-cardaa {
    padding-top: 0;
    position: relative;
    top: -120px;
}

.header_123 {
    background-color: white;
    border: 1px solid #ffddd1;
    padding: 15px 0 15px 42px;
}

.profile-section {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.profile-img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin-right: 15px;
}

.profile-name {
    font-weight: 600;
    margin-bottom: 0;
    color: var(--primary);
}

.profile-description {
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 0;
}

.become-instructor {
    background-color: #ffeee8;
    /* border: 1px solid #ff6b6b; */
    color: #ff6b6b;
    /* border-radius: 5px; */
    padding: 14px 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}

.become-instructor:hover {
    background-color: #ff6b6b;
    color: white;
}

.nav-tabs {
    border: 1px solid #ffddd1;
    background: var(--white);
    justify-content: center;
    gap: 4rem;
}

.nav-tabs_dashboard .nav-link {
    border: none;
    color: #666;
    padding: 15px 20px;
    font-weight: 500;
}

.nav-tabs_dashboard .nav-link.active {
    border-bottom: 3px solid #ff6b6b;
    color: #ff6b6b;
    background-color: transparent;
}

.tab-content {
    padding: 20px 0;
}

.wishlist-header {
    /* background-color: #f1f2f3; */
    padding: 15px;
    color: #333;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
}

.course-card {
    display: flex;
    border-bottom: 1px solid #e9e9e9;
    padding: 20px 0;
    background-color: white;
}

.course-img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    margin-right: 15px;
}

.course-rating {
    color: var(--primary);
    margin-right: 5px;
}

.course-title {
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--primary);
}

.course-title_new {
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--primary);
    padding-top: 120px;
    text-align: center;
}

.dollar_heading {
    color: var(--primary);
    font-size: 16px;
}

.course-instructor {
    font-size: 13px;
    color: var(--primary);
    margin-left: 4rem;
}

.price {
    color: #e63946;
    font-weight: 600;
    font-size: 18px;
}

.btn-buy-now {
    background-color: #f5f7fa;
    /* border: 1px solid #e63946; */
    color: #e63946;
    margin-right: 10px;
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-weight: 600;
}

.btn-buy-now:hover {
    background-color: #f8d7da;
    border-color: #e63946;
    color: #e63946;
}

.btn-add-to-cart {
    background-color: #e63946;
    border: 1px solid #e63946;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-weight: 600;
}

.btn-add-to-cart:hover {
    background-color: #c1121f;
    border-color: #c1121f;
    color: white;
}

.heart-icon {
    color: #e63946;
    font-size: 24px;
    padding: 0.4rem;
    cursor: pointer;
    background: #ffeee8;
    vertical-align: bottom;
}

.action-buttons {
    text-align: right;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .course-card {
        flex-direction: column;
    }

    .action-buttons {
        margin-top: 15px;
        text-align: left;
    }
}

.nav-tabs .nav-link {
    color: var(--primary);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--primary);
    background-color: #fff;
    border-color: 0;
    border-bottom: 3px solid var(--primary);
}

.wishlist-header h4 {
    color: var(--primary);
}

.table-light tr {
    border: 1px solid #e9eaf0;
    background: transparent;
}

.table-light th {
    color: var(--primary);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border: none;
    border-bottom: 3px solid var(--primary);
}

.table tr {
    border: 1px solid #e9eaf0;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: none !important;
}

.table-light,
.table-light > td,
.table-light > th {
    background-color: var(--white);
}

.dash-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.4rem 2rem 2.4rem 0rem;
    background: #ffeee8;
    gap: 1.5rem;
}

.dash-img {
    width: 60px;
    height: 60px;
    display: grid;
    place-content: center;
    background: var(--white);
}

.dash-cont {
}

.dash-cont h3 {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 400;
}

.dash-cont h4 {
    color: var(--primary);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.dash-head {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.dash-learn {
    border: 1px solid #e9eaf0;
    margin: 0.5rem 0;
}

.dash-learn .selling-content h3 {
    color: var(--primary);
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}

.dash-learn-btn {
    color: var(--primary);
    text-align: center;
    background: #ffeee8;
    padding: 0.5rem 2rem;
    /* margin-top: 0rem; */
    font-weight: 600;
    /* margin-left: 0.3rem; */
}

.dash-learn .selling-wrapp h2 {
    margin-bottom: 1rem;
}

.dash-learn-btns {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dash-learn-btns .dash-learn-btn {
    padding: 0.5rem 0.5rem;
}

.dash-learn-btns .dash-learn-btn:hover {
    background: var(--primary);
}

.dash-learn-btns span {
    color: var(--primary);
}

/* faiz-css-end */

/* / ZAID / */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #fff;
    border: 1px solid #ffddd1;
    padding: 12px 24px;
    color: var(--primary);
}

.filter-count {
    background-color: var(--primary-light);
    padding: 2px 6px;
    font-size: 12px;
}

.search-input {
    padding: 12px 24px 12px 50px;
    border: 1px solid #e9eaf0;
    font-size: 16px;
    color: var(--primary);
    width: 100%;
}

.search-input-wrap {
    position: relative;
    width: 100%;
}

.search-input-wrap::before {
    content: "\f002";
    font-family: "Font Awesome 5 pro";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

:focus-visible,
button:focus-visible {
    outline: none;
}

.sort-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.sort-section label {
    margin: 0;
    font-size: 16px;
    color: var(--primary);
}

.sort-dropdown {
    padding: 12px 50px 12px 20px;
    border: 1px solid #e9eaf0;
    color: var(--primary);
}

.suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.suggestions span {
    color: var(--primary);
}

.suggestions a {
    color: var(--primary);
}

.suggestions a:hover {
    text-decoration: underline;
}

.results-count {
    font-size: 16px;
    color: var(--primary);
    text-align: end;
}

.selling-wrapper-parent {
    display: flex;
    flex-wrap: wrap;
}

.selling-wrapper-parent > div {
    width: 20%;
    padding: 10px;
}

.four-in-each > div {
    width: 25%;
}

.four-in-each .selling-wrapp h2 {
    font-size: 1rem;
}

.four-in-each .selling-bottom ul li a {
    color: #ca3433;
}

.four-in-each .selling-bottom h5 {
    color: #ca3433;
}

.four-in-each .selling-content {
    border: 1px solid #e9eaf0;
}

.search-pagenation {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    justify-content: center;
}

.search-pagenation button {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: all 0.4s;
    border-radius: 100%;
    border: none;
    background-color: transparent;
}

.search-pagenation ul li.active button {
    background-color: var(--primary);
    color: var(--white);
}

.search-pagenation button:hover {
    background-color: var(--primary-light);
}

.search-pagenation ul {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.become-bg {
    /* height: 275px; */
    /* background: url(../images/become-img-bg.png) no-repeat; */
    width: 100%;
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    background: linear-gradient(90deg, #ca3433, #ea3534);
    display: flex;
    align-items: center;
    padding: 1.5rem 0;
    position: relative;
}

.become-sec-cont {
    padding: 2rem 0 1rem 2rem;
    width: 62.3%;
}

.become-sec-cont h3 {
    color: var(--white);
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.8rem;
}

.become-sec-cont p {
    color: var(--white);
    margin-bottom: 1rem;
    line-height: 22px;
    margin: 0 0 2rem;
}

.become-sec-cont .themeBtn {
    background: var(--white);
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-size: 1rem;
    padding: 12px 2rem;
}

.become-sec-cont .themeBtn i {
    font-size: 1.4rem;
    border: 2px solid var(--primary);
    /* margin-left: .5rem; */
    padding: 1px 2px;
}

/* UMAIR */

.gift-corse-cont h2 {
    color: var(--primary);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 2.5rem;
}

.gift-corse-form label {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 0.375rem;
}

.gift-corse-form :is(input, textarea) {
    width: 100%;
    border: 1px solid #e9eaf0;
    padding: 1rem 1rem;
}

.serch-box input {
    border: 0;
    padding-left: 1rem;
    width: 374px;
}

.payment-box {
    width: 100%;
    border-radius: 6px;
}

.title {
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.payment-method {
    display: flex;
    align-items: center;
    border: 1px solid #e9eaf0;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    gap: 3rem;
}

.method-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.method-left span {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
    flex-shrink: 0;
}

.method-info {
    display: flex;
    gap: 6rem;
}

.method-info h4 {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
    flex-shrink: 0;
}

.add-card {
    margin-top: 20px;
    border: 1px solid var(--primary);
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.add-card img {
    margin-right: 10px;
}

.check-icon {
    color: #d00000;
    font-size: 18px;
}

.add-card span {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.add-card span h4 {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
}

.detail-form .form-group {
    margin-bottom: 20px;
}

.detail-form label {
    display: block;
    color: #d00000;
    margin: 1rem 0 6px;
    font-size: 14px;
}

.detail-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e9eaf0;
}

.detail-form .input-with-icon {
    display: flex;
    align-items: center;
    border: 1px solid #e9eaf0;
    padding-left: 10px;
}

.detail-form .input-with-icon img {
    width: 20px;
    margin-right: 8px;
}

.detail-form .input-with-icon input {
    border: none;
    outline: none;
    flex: 1;
    padding: 12px;
    font-size: 16px;
}

.detail-form .checkbox-group {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.detail-form .checkbox-group input {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.detail-form .checkbox-group label {
    color: #d00000;
    margin: 0;
    font-size: 14px;
}

.order-box {
    border: 1px solid #e9eaf0;
    padding: 0.9rem;
}

.section {
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    padding-bottom: 2rem;
}

.course-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.course-details h4 {
    margin-left: 0;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--primary);
}

.course-details p {
    color: var(--primary);
    font-size: 0.875rem;
    margin: 4px 0;
    font-weight: 400;
}

.price {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.summary {
    font-size: 14px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.total {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-box .btn {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #d32f2f;
    color: white;
    text-align: center;
    font-weight: bold;
}

.order-box h3 {
    color: var(--primary);
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.summary-row span {
    color: var(--primary);
}

.total h4 {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.total span {
    color: #202029;
    font-size: 1rem;
    font-weight: 400;
}

.teacher-card {
    border: 1px solid #e9eaf0;
}

.teacher-card-cont h3 {
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 500;
    margin-top: 1rem;
}

.teacher-card-cont {
    text-align: center;
    padding-bottom: 1rem;
}

.teacher-card-cont .selling-bottom {
    padding: 0.7rem 5rem 0.7rem 1rem;
}

.teacher-card-cont .themeBtn {
    width: 87%;
    color: var(--primary);
    background: #ffeee8;
    padding: 1rem 1rem;
}

/* UMAIR */

/* course-page */
section.review {
    padding: 11rem 32px 1rem;
    background: #fff0f0;
}

.webflow {
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.responsive-design {
    display: flex;
    align-items: center;
    gap: 16px;
}

.responsive-design .back-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 50%;
}

.responsive-design .back-icon i {
    color: #ca3433;
    font-size: 20px;
    font-weight: 400;
}

.responsive-design h5 {
    color: #ca3433;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 12px;
}

.responsive-design ul {
    display: flex;
    align-items: center;
    gap: 16px;
}

.responsive-design ul li {
    font-size: 14px;
    color: #ca3433;
    line-height: 1.3;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-group {
    gap: 12px;
}

.btn-group a {
    padding: 10px 24px;
    font-weight: 700;
    font-size: 14px;
}

.btn-group a:nth-child(1) {
    background: #fff;
    color: #ca3433;
}

.btn-group a:nth-child(2) {
    background: #ca3433;
    color: #fff;
}

.webflow {
    padding: 1rem;
}

.fancy-box h2 {
    margin: 24px 0 20px;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: var(--primary);
}

.students {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 1rem;
}

.students .student-list {
    display: flex;
}

.student {
    display: flex;
    align-items: center;
    gap: 25px;
}

.student-list .student-item {
    margin-right: -15px;
}

.watching h5 {
    font-size: 14px;
    color: #ca3433;
    font-weight: 700;
    line-height: 20px;
}

.watching p {
    font-size: 12px;
    color: #ca3433;
    line-height: 16px;
}

.last-update {
    display: flex;
    align-items: center;
    gap: 24px;
}

.last-update p {
    color: #ca3433;
    font-size: 14px;
    line-height: 22px;
}

.lecture-meta {
    position: absolute;
    right: 0px;
}

.accordion {
    margin-top: 24px;
}

.section-meta ul li {
    font-size: 14px;
    line-height: 22px;
    color: #ca3433;
}

.section-meta ul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lecture-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 22px;
    color: #ca3433;
    position: relative;
}

.lecture-list input[type="checkbox"]:checked {
    accent-color: #ca3433;
    width: 18px;
    height: 18px;
}

.card-header {
    background-color: #ffecec;
}

.card-header .btn-link {
    color: #ca3433;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    line-height: 22px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    width: 240px;
    text-align: left;
}

.card-header .btn-link i {
    margin-top: 3px;
}

.card-body ul li {
    margin-bottom: 8px;
}

.webflow .nav-tabs {
    justify-content: left;
    border: 0;
    border-top: 1px solid #e9eaf0;
    border-bottom: 1px solid #e9eaf0;
}

.lectur-desc .dash-head {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.lectur-desc p {
    color: var(--primary);
    margin: 1rem 0 2rem;
}

.lectur-desc-list li {
    color: var(--primary);
    font-size: 0.875rem;
    margin: 0 0 0.3rem 1rem;
    position: relative;
}

.lectur-desc-list li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    position: absolute;
    top: 9px;
    left: -17px;
}

.attach-files {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--secondary);
    padding: 2px;
    border: 1px solid var(--primary);
}

.attach-files-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.attach-files h3 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.attach-files h4 {
    color: var(--primary);
    font-size: 0.875rem;
}

.comments {
    display: flex;
    gap: 1.2rem;
    position: relative;
    padding: 1rem 0;
}

.comments-r h3 {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.comments-r span {
    color: var(--primary);
}

.comments-r h4 {
    color: var(--primary);
    font-size: 0.75rem;
}

.comments-r div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comments-r p {
    margin: 0;
}

.comments-r .admin {
    color: var(--white);
    font-size: 0.625rem;
    background: var(--primary);
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
}

.post-reply-left {
    width: 725px;
    border: 1px solid #e9eaf0;
    height: 70px;
    padding-left: 70px;
}

.main_imageP {
    position: relative;
}

.input_image {
    position: absolute;
    left: 27px;
    top: 20px;
}

.post-reply {
    margin-top: 1.25rem;
}

.reply-p {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
}

.reply-p img {
    margin-right: 0.5rem;
}

.lectur-desc .themeBtn i {
    margin-left: 1rem;
}

.corse-purchased-comments-list li {
    padding: 10px 0;
}

.corse-purchased-comments-list li + li {
    padding-left: 50px;
}

.comments figure {
    flex-shrink: 0;
}

.corse-purchased-comments-list li {
    position: relative;
}

.corse-purchased-comments-list li::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background: #e9eaf0;
    top: 32%;
    left: 20px;
}

.corse-purchased-comments-list li:first-child::before {
    height: 70%;
    top: 70%;
}

.corse-purchased-comments-list li:last-child::before {
    display: none;
}

.corse-purchased-comments-list li + li .comments::before {
    content: "";
    width: 20px;
    height: 1px;
    background: #e9eaf0;
    position: absolute;
    top: 33px;
    left: -29px;
}

.post-reply .themeBtn {
    flex-shrink: 0;
}

.corse-purchased-comments-list li .post-reply::before {
    content: "";
    width: 20px;
    height: 1px;
    background: #e9eaf0;
    position: absolute;
    top: 59px;
    left: 23px;
}

.post-reply button {
    border: 0;
    outline: none;
}

/* course-page */

.inner-page-banner {
    padding: 0rem 0 2rem;
    background-color: #fff0f0;
}

.inner-page-banner-content .suggestions {
    gap: 1.5rem;
}

.inner-page-banner-content .suggestions a {
    position: relative;
}

.inner-page-banner-content .suggestions a::before {
    content: "\f105";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

.inner-page-banner-content .suggestions a:first-child::before {
    display: none;
}

.inner-page-banner-content > h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
    margin: 1rem 0;
}

.inner-page-banner-content > p {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.creator-and-reviews {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.creator {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.creator-imgs {
    display: flex;
    align-items: center;
    max-width: 13%;
}

.creator-imgs img {
    border: 2px solid var(--white);
    border-radius: 100%;
}

.creator-imgs figure + figure {
    margin-left: -20px;
}

.creator-content h6 {
    font-size: 14px;
    color: var(--primary);
}

.Created-by {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.Created-by a,
.Created-by span {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    position: relative;
}

.Created-by a::before,
.Created-by span::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: var(--primary);
    border-radius: 100%;
}

.Created-by a:first-child::before,
.Created-by span:first-child::before {
    display: none;
}

.creator-reviews {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.creator-reviews i {
    color: var(--primary);
}

.creator-reviews span {
    font-size: 14px;
    color: var(--primary);
}

.creator-reviews span strong {
    font-size: 16px;
    font-weight: 500;
}

.video-wrap {
    position: relative;
}

.course-video-play-btn button {
    width: 72px;
    height: 72px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background-color: var(--white);
    border: none;
}

.course-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.course-view-tabs {
    /*border: 1px solid #ca3433;*/
    flex-wrap: nowrap;
    /*border-bottom: 1px solid #ca3433;*/
}

.course-view-tabs li {
    width: 25%;
    align-content: center;
}

.course-view-tabs li a {
    border: 1px solid #ca3433;
    all: unset;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    position: relative;
    display: inline-block;
    padding: 16px 20px;
    cursor: pointer;
    border-left: 1px solid #ca3433;
}

.course-view-tabs li a.active {
    background-color: transparent !important;
    color: var(--primary) !important;
}

.course-view-tabs li a.active::before {
    content: "";
    width: 110px;
    /* height: 1px; */
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--primary);
}

.course-view-tabs-content h4 {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1rem;
}

.course-view-tabs-content p {
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.course-view-tabs-box-content {
    padding: 40px;
    background-color: #fff0f0;
}

.course-view-tabs-box-content-list {
    margin-bottom: 1rem;
}

.course-view-tabs-box-content-list li {
    font-size: 14px;
    color: var(--primary);
    padding: 7px 0 7px 25px;
    position: relative;
}

.circle-arrow-list {
    display: flex;
    flex-wrap: wrap;
}

.circle-arrow-list li {
    width: 50%;
    padding: 10px 10px 10px 25px;
}

.circle-arrow-list li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Pro";
    font-weight: 700;
    color: var(--primary);
    position: absolute;
    top: 8px;
    left: 0;
    font-size: 18px;
}

.simple-arrow-list li::before {
    content: "\f061";
    font-family: "Font Awesome 5 Pro";
    color: var(--primary);
    position: absolute;
    top: 8px;
    left: 0;
}

.simple-order-list li::before {
    content: "\f111";
    font-family: "Font Awesome 5 Pro";
    color: var(--primary);
    font-weight: 700;
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 12px;
}

.flex-center-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.flex-center-between h4 {
    margin: 0;
}

.flex-one-rem {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.flex-one-rem span {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 14px;
    color: var(--primary);
}

.course-view-tabs-content h5 {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
}

.curriculum-list li {
    display: flex;
    gap: 0.5rem;
    padding-left: 0;
}

.curriculum-list li i {
    margin-top: 5px;
}

.curriculum-list {
    padding: 0 20px;
}

.curriculum-accordion .card {
    border: 1px solid #e9eaf0;
    border-radius: 0;
    border-bottom: none;
    margin-bottom: 0 !important;
}

.curriculum-accordion .card:last-child {
    border-bottom: 1px solid #e9eaf0;
}

.curriculum-accordion .card-header {
    padding: 20px;
    background-color: transparent;
    border: none;
}

.curriculum-accordion .card-header {
    cursor: pointer;
}

.course-instructor-list li {
    padding: 10px 0;
}

.course-instructor-box {
    padding: 2rem;
    border: 1px solid #e9eaf0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.course-instructor-box-content h5 {
    font-size: 20px;
    font-weight: 600;
}

.course-instructor-box-content .Created-by {
    margin: 0.5rem 0;
}

.course-instructor-box-content p {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.course-instructor-box-content p a {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
}

.course-view-tabs-content h4 span {
    font-weight: 400;
}

.rating-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.average-rating {
    text-align: center;
    flex-shrink: 0;
    border: 1px solid #e9eaf0;
    padding: 2rem 3rem;
    height: 100%;
}

.average-rating h2 {
    font-size: 48px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.stars {
    display: flex;
    justify-content: center;
    gap: 0.1rem;
}

.stars i {
    color: var(--primary);
}

.average-rating p {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    margin-top: 0.5rem;
}

.rating-bars {
    width: 100%;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 0;
}

.rating-row .label {
    font-size: 14px;
    color: var(--primary);
    min-width: 90px;
    text-align: center;
}

.bar {
    flex: 1;
    height: 6px;
    background-color: #fff2e5;
    overflow: hidden;
    flex-shrink: 0;
}

.filled-bar {
    height: 100%;
    background-color: var(--primary);
}

.rating-row .percentage {
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    min-width: 30px;
}

.rating-bars .rating-row:first-child .bar .filled-bar {
    width: 75%;
}

.rating-bars .rating-row:last-child .bar .filled-bar {
    width: 1%;
}

.rating-bars .rating-row:nth-child(2) .bar .filled-bar {
    width: 21%;
}

.rating-bars .rating-row:nth-child(3) .bar .filled-bar {
    width: 3%;
}

.rating-bars .rating-row:nth-child(4) .bar .filled-bar {
    width: 1%;
}

.student-feed-back-box-content .stars {
    justify-content: flex-start;
    margin: 0.5rem 0;
}

.student-feed-back-box {
    align-items: flex-start;
    gap: 1rem;
    border: none;
    border-bottom: 1px solid #e9eaf0;
}

.student-feed-back-box-content .Created-by {
    margin: 0;
}

.select-field select {
    border: 1px solid #e9eaf0;
    padding: 12px 20px;
    font-size: 16px;
    color: var(--primary);
}

.student-feed-back-btn {
    margin-top: 3rem;
}

.student-feed-back-btn .themeBtn {
    border: none;
}

.student-feed-back-btn .themeBtn i {
    padding-left: 0.5rem;
}

.sec-seperator {
    margin: 5rem 0;
}

.related-course-sec .four-in-each > div {
    width: 20%;
}

.related-course-sec .four-in-each .selling-wrapp h2 {
    font-size: 0.75rem;
}

section.course-sec {
    padding-top: 0;
}

.instructer {
    padding: 0;
    margin-top: 0rem;
    /*margin-top: -12rem;*/
}

.become-bg figure {
    flex-shrink: 0;
    position: absolute;
    bottom: 0;
    right: 6%;
}

.upload-box {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    padding: 2rem;
    background: var(--white);
}

.photo-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-container figcaption {
    position: absolute;
    bottom: 0;
    background: #00000050;
    width: 100%;
    padding: 0.5rem;
}

.photo-container figcaption a {
    color: var(--white);
    font-size: 0.875rem;
}

.photo-container figcaption a i {
    margin-right: 0.6rem;
}

.upload-text {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
}

.account-settings-form input {
    width: 100%;
    height: 48px;
    border: 1px solid #e9eaf0;
    padding: 1rem;
    margin-bottom: 1rem;
}

.account-settings-form label {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.account-settings-form button {
    border: 0;
    outline: none;
}

.change-pswrd-form input {
    width: 100%;
    height: 48px;
    border: 1px solid #e9eaf0;
    padding: 1rem;
    margin-bottom: 1rem;
}

.change-pswrd-form label {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
}

.change-pswrd-form button {
    border: 0;
    outline: none;
}

.change-pswrd {
    border-top: 1px solid #e9eaf0;
    margin-top: 3rem;
    padding-top: 1rem;
}

.course-instructor_new {
    color: var(--primary);
    font-size: 14px;
    display: flex;
    justify-content: center;
}

.dollar_price {
    color: var(--primary);
    display: flex;
    justify-content: end;
    font-size: 15px;
}

#accordion .card {
    margin-bottom: 20px;
}

#accordion .card .btn-link {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 1.875rem;
    padding: 1.125em;
    /* background: #FAFAFA; */
    /* border: 1px solid #DAD6D6; */
    /* border-radius: 0.625rem; */
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 500;
}

.content-line {
    display: block;
}

#accordion .card .btn-link i {
    margin-left: auto;
    color: var(--black);
    font-size: 1rem;
}

#accordion .card .btn-link i::before {
    content: "\f176";
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    padding: 12px;
}

#accordion .card .btn-link.collapsed i::before {
    content: "\f175";
    background: #55555524;
    color: var(--primary);
    font-size: 20px;
    padding: 12px;
}

#accordion .card + .card {
    margin-top: 0;
}

#accordion .card .card-body {
    padding: 0 2rem 1rem;
    font-size: 1.125rem;
}

#accordion .card .card-body p {
    color: #626262;
    font-size: 1.125rem;
    margin: -0.75rem 0 0;
    line-height: 2;
}

/* menu */

.btnmenu {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    gap: 20px;
    box-shadow: none !important;
    padding: 20px 25px !important;
    background: var(--theme-color);
    border-radius: 0;
}

.btnmenu span {
    display: block;
    width: 38px;
    height: 5px;
    border-radius: 6px;
    background-color: var(--black);
    transition: 0.5s ease;
}

.btnmenu span:nth-child(1) {
    width: 23px;
    display: table;
    margin-left: auto;
}

.btnmenu span:nth-child(3) {
    width: 23px;
}

.isopen .navbar .themeBtn {
    display: none;
}

.isopen .navbar ul .humburger {
    position: relative;
}

.isopen .navbar ul .humburger .btnmenu {
    /* position: fixed;
      top: 9%;
      right: 14%; */
}

.isopen .btnmenu span:nth-child(1),
.isopen .btnmenu span:nth-child(3) {
    width: 60px;
}

.isopen .btnmenu span:nth-child(2) {
    width: 0;
}

.isopen .btnmenu span:nth-child(1) {
    transform: rotate(-45deg) translate(-15px, 15px);
}

.isopen .btnmenu span:nth-child(3) {
    transform: rotate(45deg) translate(-10px, -10px);
}

.newMenu {
    width: 100vw;
    height: 100%;
    position: fixed;
    right: 101%;
    top: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 9;
    display: flex;
    align-items: center;
    transition: 0.5s ease;
    overflow: hidden;
}

.newMenu ul {
    width: 100%;
    margin: 5.9rem 0 3rem;
}

.newMenu ul li + li {
    margin-top: 10px;
}

.newMenu li a {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
    display: block;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.25rem 0;
}

.newMenu li a:hover {
    background-color: var(--white);
    color: var(--secondary);
}

.newMenu li {
    transform: translateX(50%);
    opacity: 0;
    transition: 0.5s ease;
}

.isopen .newMenu {
    right: 0;
}

.isopen .newMenu li {
    transform: translateX(0);
    opacity: 1;
}

.isopen .newMenu li:nth-child(1) {
    transition-delay: 0.2s;
}

.isopen .newMenu li:nth-child(2) {
    transition-delay: 0.4s;
}

.isopen .newMenu li:nth-child(3) {
    transition-delay: 0.6s;
}

.isopen .newMenu li:nth-child(4) {
    transition-delay: 0.8s;
}

.isopen .newMenu li:nth-child(5) {
    transition-delay: 1s;
}

.isopen .newMenu li:nth-child(6) {
    transition-delay: 1.2s;
}

.isopen .newMenu li:nth-child(7) {
    transition-delay: 1.4s;
}

.isopen .newMenu li:nth-child(8) {
    transition-delay: 1.6s;
}

.newMenu li .themeBtn {
    width: fit-content;
    display: block;
    margin: 0 auto;
    font-size: 1.125rem;
    letter-spacing: 2px;
    padding: 0.9rem 3rem;
}

.newMenu li .themeBtn::before {
    background-color: var(--black);
}

.newMenu li .themeBtn:hover {
    color: var(--white);
}

button.btn.btnmenu div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 30px;
    text-transform: uppercase;
    color: var(--primary);
}

.browse-sec {
    /*padding-top: 14rem;*/
    /*padding-bottom: 2rem;*/
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.course-view-details-box {
    border: 2px solid #ca3433;
    background-color: var(--white);
    position: relative;
    top: -10rem;
}

.course-view-details-box .seperator {
    margin: 0;
    padding: 0;
}

.course-view-details-box > div {
    padding: 1rem;
}

.course-view-details-box h4, .course-view-details-box span {
    color: var(--primary);
}

.course-view-details-box-deatil-area li {
    padding: 5px 0;
}

.course-view-details-box-btns button, .course-view-details-box-btns a {
    width: 100%;
    text-align: center;
}

.course-view-details-box-btns .flex-center-between {
    flex-wrap: nowrap;
}

.course-view-details-box-btns button.themeBtn {
    border: none;
}

.course-view-details-box-btns button.borderBtn {
    border: 1px solid #E9EAF0;
    color: var(--primary);
    padding: 1rem;
    width: 100%;
}

.course-view-details-box h6 {
    color: var(--primary);
    margin-bottom: 1rem;
}

.what-includes-list li {
    padding: 5px 0;
}

.share-course-on-social {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.share-course-on-social li a i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background-color: #fff0f0;
    font-size: 22px;
    border: 1px solid #ca3433;
}

.share-course-on-social li button {
    height: 40px;
    padding: 0 1rem;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary);
    background-color: #fff0f0;
    border: 1px solid #ca3433;
}

.stars i.active {
    font-weight: 700;
    transform: scale(1.2);
}

.modal-body h4 {
    color: var(--primary);
}

.feedback-field label {
    font-size: 16px;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.feedback-field input::placeholder {
    color: var(--primary);
}

.feedback-field textarea {
    font-size: 16px;
    color: var(--primary);
    border: 1px solid #E9EAF0;
    width: 100%;
    padding: 1rem;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.modal-footer .secondaryBtn {
    background-color: #F5F7FA;
}

.modal-footer button {
    padding: 1rem 2rem;
}

.modal-header h5 {
    color: var(--primary);
}

.modal-header, .modal-footer {
    border: none;
}

.dashboard-sort-section label {
    width: 100%;
}

.dashboard-sort-section .sort-dropdown {
    width: 100%;
}


/* chat system */
.user-profile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 -5px;
}

.user-profile > div {
    padding: 0 5px;
}

.user-profile-img img {
    width: 35px;
    height: 35px;
    border-radius: 100%;
}

.user-profile-content button {
    font-size: 12px;
    color: var(--white);
}

.user-profile-content button i {
    padding-left: 5px;
}

.user-profile-list li {
    padding: 10px 5px;
    border-bottom: 1px solid #E4E4E4;
    text-align: center;
}

.user-profile-list li.last {
    border: none;
}

.user-profile-list li a {
    font-size: 14px;
    color: var(--black);
}

.chat-system-box {
    border: 1px solid #EBF1F6;
}

.chat-box-1 {
    padding: 2rem 1.5rem;
    border: 1px solid #EBF1F6;
}

.chat-user-profile .user-profile-img img {
    width: 60px;
    height: 60px;
}

.chat-user-profile {
    justify-content: flex-start;
    margin: 0 -10px;
}

.chat-user-profile > div {
    padding: 0 10px;
}

.chat-user-profile .user-profile-content h6 {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary);
}

.user-sign {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: var(--primary);
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--white);
}

.chat-user-profile .user-profile-img {
    position: relative;
}

.chat-search-field i {
    left: 10px;
}

.chat-search-field input {
    box-sizing: border-box;
}

.chat-and-alert-tabing-list {
    display: flex;
    margin: 0 -5px;
}

.chat-and-alert-tabing-list li {
    padding: 0 5px;
    width: 50%;
}

.chat-and-alert-tabing-list li button {
    width: 100%;
    padding: 10px 10px;
    text-align: center;
    color: #ACADB7;
    border: 1px solid #ACADB7;
    background-color: var(--white);
    font-size: 16px;
}

.chat-and-alert-tabing-list li.current button {
    background-color: #363636;
    color: var(--white);
    border: 1px solid #363636;
}

.userchat-para {
    display: block;
    font-size: 14px;
    color: var(--primary);
}

.user-chat-image-and-title .user-profile-img img {
    width: 50px;
    height: 50px;
}

.user-chat-image-and-title .user-profile-content h6 {
    font-size: 14px !important;
    font-weight: 500;
}

.user-chat-image-and-title {
    margin: 0 0 0 -10px;
    cursor: pointer;
}

.user-chat-image-and-title > div {
    padding: 0 10px;
}

.user-chat-image-and-title .user-sign {
    right: 14px;
}

.red-sign {
    background-color: #FA896B;
}

.yellow-sign {
    background-color: #FFAE1F;
}

.user-chat-tabing-list > li {
    padding: 12px 0;
}

.chat-time {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    color: var(--primary);
}

.user-chat-tabing-list {
    height: auto;
}

.user-chat-tabing-list::-webkit-scrollbar {
    width: 1px;
    background-color: transparent;
}

.user-chat-tabing-list::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
    display: none;
}

.user-chat-tabing-list::-webkit-scrollbar-track-piece {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: transparent;
}

.user-chat-tabing-list::-webkit-scrollbar-thumb:vertical {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-image: linear-gradient(#CCCCCC, #CCCCCC);
}

.user-chat-tabing-list::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

.user-alert-image-and-title {
    position: relative;
    margin: 0;
    padding: 15px 10px;
}

.user-alert-image-and-title::before {
    content: "";
    width: 4px;
    height: 100%;
    background-color: white;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 0;
}

.green-box {
    background-color: #E6FAF5;
}

.green-box::before {
    background-color: #00CC99;
}

.red-box {
    background-color: #FDEFEF;
}

.red-box::before {
    background-color: #EB5757;
}

.blue-box {
    background-color: #E7EFFA;
}

.blue-box::before {
    background-color: #2680EB;
}

.yellow-box {
    background-color: #FDF8E8;
}

.yellow-box::before {
    background-color: #F2C94C;
}

.user-alert-image-and-title .user-profile-img img {
    /* width: 55px; */
    height: 55px;
}

.user-alert-image-and-title .user-profile-content h6 {
    font-size: 16px;
}

.user-alert-image-and-title .user-profile-content p {
    font-size: 12px;
}

.user-alert-image-and-title .chat-time {
    top: 5px;
    right: 10px;
}

.user-alert-tabing-list li {
    padding: 10px 0px;
}

.chat-user-profile2 {
    padding: 1rem;
    border-bottom: 1px solid #EBF1F6;
    margin: 0;
}

.chating-box .user-profile-img img {
    width: 70px;
    height: 70px;
}

.chating-list li .chating-content span {
    font-size: 12px;
    color: var(--primary);
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
}

.chating-list li .chating-content p {
    font-size: 14px;
    color: var(--primary);
    padding: 8px 12px;
    background-color: var(--primary-light);
    display: inline-block;
    margin-bottom: 1rem;
}

.chating-list li .chating-content div:last-child p {
    margin: 0;
}

.chating-list li:nth-child(even) .chating-content p {
    background-color: var(--primary);
    color: var(--white);
}

.chating-list li:nth-child(even) .chating-box {
    justify-content: flex-end;
}

.chating-list li:nth-child(even) .chating-content {
    text-align: right;
}

.chating-list li {
    padding: 12px 0;
}

.chating-list {
    height: 100%;
    padding: 1rem;
    padding-top: 14.6rem;
}

.chating-box {
    align-items: flex-start;
}

.chating-content img {
    border-radius: 10px;
}

.chating-list::-webkit-scrollbar {
    width: 1px;
    background-color: transparent;
}

.chating-list::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
    display: none;
}

.chating-list::-webkit-scrollbar-track-piece {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: transparent;
}

.chating-list::-webkit-scrollbar-thumb:vertical {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-image: linear-gradient(#CCCCCC, #CCCCCC);
}

.chating-list::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

.chat-field input {
    border: 1px solid #EBF1F6;
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background-color: var(--white);
    color: var(--black);
}

.chat-field input::placeholder {
    color: #ACADB7;
}

.chat-field {
    margin-left: 0;
    position: relative;
    width: 100%;
}

.chat-field-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.chat-field-icon i {
    font-size: 20px;
    color: var(--primary);
}

.emoji-icon {
    left: 15px;
}

.microphone-icon {
    right: 40px;
}

.file-icon {
    right: 70px;
}

.image-icon {
    right: 110px;
}

.chat-field-icon > input {
    display: none;
}

.chat-box-3 {
    display: none;
}

.alert-chat-field::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.searched-sports {
    display: none;
}

.chat-box-2 {
    border: 1px solid #EBF1F6;
}

.chating-profile-img img {
    width: 24px;
    height: 24px;
}

.chating-profile-img {
    padding: 0 !important;
}

.chat-field-and-btn {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #EBF1F6;
}

.chat-btn {
    flex-shrink: 0;
}

.chat-btn .themeBtn {
    padding: 1.1rem 3rem;
    border: none;
}

.chat-user-profile2 .user-profile-img .user-sign {
    right: 10px;
    width: 15px;
    height: 15px;
}

.attach-files-right {
    flex-shrink: 0;
}

.card-body .col-lg-5 .d-flex {
    align-items: flex-start;
}

.show-tablet {
    display: none;
}

.playlist-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.playlist-box-img img {
    border-radius: 5px;
}

.playlist-box-img {
    width: 25%;
    height: 25%;
    flex-shrink: 0;
    position: relative;
}

.playlist-box-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.playlist-box-content p {
    font-size: 14px;
    color: grey;
    margin-bottom: 0.1rem;
    line-height: unset;
}

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

.course-view-purchased-playlist {
    margin-top: 1rem;
}

.course-view-purchased-playlist li {
    padding: 0.5rem 0;
}

.playlist-box-content .Created-by span {
    color: grey;
}

.playlist-box-content .Created-by span::before {
    background-color: grey;
}

.playlist-box-content small {
    font-size: 14px;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    color: var(--primary);
    font-weight: 600;
    background-color: #fff0f0;
}

.playlist-box-img small {
    font-size: 10px;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    color: var(--white);
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    position: absolute;
    bottom: 2%;
    right: 4%;
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    /*padding-top: 25px;*/
    height: 0;
    overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*.scrollable-box {*/
/*    height: 300px;*/
/*    overflow-y: auto;*/
/*    overflow-x: hidden;*/
/*    padding-right: 10px;*/
/*    box-sizing: border-box;*/
/*    border: 2px solid var(--primary);*/
/*    padding: 1rem;*/
/*    scrollbar-width: thin;*/
/*    scrollbar-color: #ccc transparent;*/
/*}*/

.scrollable-box {
    height: 800px; /* Fixed height */
    overflow-y: scroll;
    overflow-x: hidden; /* Prevents horizontal scroll */
    box-sizing: border-box; /* Ensures padding doesn't affect height */
    border: 2px solid var(--primary);
    padding: 0rem 1rem;
}

.scrollable-box::-webkit-scrollbar {
    width: 6px;
}

.scrollable-box::-webkit-scrollbar-track {
    background: var(--secondary);
}

.scrollable-box::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 10px;
}

.course-view-purchased-playlist li a:hover .playlist-box {
    background-color: var(--secondary);
    color: #fff; /* Optional: change text color on hover */
    border-radius: 6px;
    transition: all 0.3s ease;
}

.course-view-purchased-playlist li a:hover .playlist-box h4,
.course-view-purchased-playlist li a:hover .playlist-box p,
.course-view-purchased-playlist li a:hover .playlist-box .Created-by span,
.course-view-purchased-playlist li a:hover .playlist-box small {
    color: var(--primary)
}


.custom-checkbox input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ca3433;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.custom-checkbox input[type="checkbox"]:checked {
    background-color: #ca3433;
}

.custom-checkbox input[type="checkbox"]::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    top: 1px;
    left: 4px;
    transform: rotate(45deg);
    display: none;
}

.custom-checkbox input[type="checkbox"]:checked::after {
    display: block;
}

.btnmenu {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

.menu-icon span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
}

.menu-text {
    font-size: 12px;
    color: #333;
    margin-top: 4px;
}

.newMenu ul li a {
    display: block;
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.newMenu ul li a:hover {
    background-color: #ca3433;
}

.nav-link-header {
    color: #ca3433;
    font-weight: 600;
    padding: 8px 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link-header:hover {
    color: #333; /* Bootstrap primary color or your preferred */
    text-decoration: underline;
}

.main-logo-class {
    width: 110px;
    height: auto;
}

.select-div-active {
    background-color: var(--secondary);
}

.disabled-lecture {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.order-status-badge {
    margin-top: 5px;
    font-size: 12px;
    color: #ff4d4f;
    background: #fff2f0;
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float img {
    width: 30px;
    height: 30px;
}