:root {
    /* Brand Colors */
    --sheik-primary: #b68f49;
    --sheik-primary-100: #fff2e5;
    --sheik-primary-200: rgba(182, 143, 73, .2);
    --sheik-secondary: #C8C6FF;
    --sheik-secondary-100: #ebebff;

    /* Status Colors */
    --sheik-success: #e1f7e3;
    --sheik-yellow: #fffce9;
    --sheik-blue-100: #e5fcff;
    --sheik-danger-100: #fff0f0;

    /* Background Colors */
    --bg-1: #f0f2f5;
    --bg-2: #f5f7fa;
    --bg-3: #E9EDF2;

    /* Text Colors */
    --text-primary-color: #b8711f;
    --text-gray-900: #1d2026;
    --text-gray-200: rgba(0, 0, 0, 20%);
    --text-gray-500: #8c94a3;
    --text-gray-600:#6E7485;
    --text-white: #ffffff;

    /* Button */
    --custom-btn-primary: #fff4e8;

    /* Shadows */
    --box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.12);
    --box-shadow-primary: 0 0 0 .25rem rgba(184, 113, 31, .25);
}

/* Utility Classes */
body {
    font-family: 'Inter', sans-serif !important;
}

main {
    min-height: calc(100vh - 205px) !important;
}

.customBoxShadow {
    box-shadow: var(--box-shadow) !important;
}

.form-control:focus {
    box-shadow: var(--box-shadow-primary) !important;
    border-color: var(--sheik-primary);
}

/* RTL Support */
html[lang='ar'] body {
    direction: rtl !important;
    text-align: right !important;
}

html[lang='ar'] .bannerImgContainer {
    left: 0 !important;
    right: auto !important;
}

html[lang='ar'] .bannerImgContainer img {
    transform: scaleX(-1);
}

html[lang='ar'] .playList>li::after {
    right: 0 !important;
    left: auto !important;
}


/*Padding*/
.py-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/*In RTL LTR Expectations*/
/* html[lang='ar'] .rtl-ltr{
    direction: ltr !important;
    text-align: left;
} */

/* Background Color Utilities */
.bg-1 {
    background-color: var(--bg-1) !important;
}

.bg-2 {
    background-color: var(--bg-2) !important;
}

.bg-3 {
    background-color: var(--bg-3) !important;
}

.bg-secondary {
    background-color: var(--sheik-secondary) !important;
}

.bg-secondary-100 {
    background-color: var(--sheik-secondary-100);
}

.bg-primary-100 {
    background-color: var(--sheik-primary-100);
}

.sheik-bg-success {
    background-color: var(--sheik-success);
}

.sheik-bg-yellow {
    background-color: var(--sheik-yellow);
}

.sheik-bg-blue-100 {
    background-color: var(--sheik-blue-100);
}

.sheik-bg-danger-100 {
    background-color: var(--sheik-danger-100);
}

/* Text Color Utilities */
.primaryTxt-color {
    color: var(--text-primary-color) !important;
}

.primaryTxt-color-hover:hover {
    color: var(--sheik-primary) !important;
}

.text-gray-900 {
    color: var(--text-gray-900);
}

.text-gray-500 {
    color: var(--text-gray-500);
}

.text-gray-600{
    color: var(--text-gray-600) !important;
}

.text-white {
    color: var(--text-white) !important;
}

/*Custom font size*/
.fs-14 {
    font-size: 14px !important;
}

.fs-18 {
    font-size: 18px !important;
}

/*Crads*/
/* .card{
    padding:20px !important;
} */

/* Custom Button */
.custom-btn-primaryColor {
    background-color: var(--custom-btn-primary) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--text-primary-color);
}

.custom-btn-primaryColor:focus,
.custom-btn-primaryColor:hover,
.custom-btn-primaryColor:active,
.custom-btn-primaryColor:visited {
    border-color: var(--text-primary-color) !important;
}

/* Header */
.custom-bg-primary {
    background-color: var(--sheik-primary);
}

/*Nav*/

.navbar {
    background-color: var(--sheik-primary);
}

.nav-link.active,
.nav-link:hover {
    background-color: var(--text-gray-200) !important;
    color: var(--text-white) !important;
}

.navbar-nav > li.nav-item > .nav-link {
    padding: 20px 24px !important;
    border-radius: 8px;
}

.nav-link {
    color: var(--text-white);
}

/* Banner */
.bannerSection {
    height: 340px;
}

.bannerImgContainer {
    position: absolute;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 40%;
}

.playBtn {
    min-width: 56px;
    height: 56px;
}

.cardIcon {
    min-width: 40px;
    height: auto;
    width: 40px;
}

.playList>li {
    counter-increment: item-counter;
    position: relative !important;
}

.playList>li::before {
    content: counter(item-counter) ".";
    position: absolute;
    top: 26px;
    left: 102px;
    font-weight: bold;
    z-index: 1;
}

.playList>li::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0 !important;
    right: auto !important;
    width: 70%;
    height: 100%;
    background-color: var(--sheik-secondary);
    animation: progressBar 30s linear forwards;
}

.noAfter>li::after {
    display: none !important;
}

blockquote>i {
    top: -14px
}

.closeBtn {
    left: 12px;
    top: 20px;
}

.album .card img {
    height: 354px;
    object-fit: cover;
}

.sheik-bg-danger-100>button {
    background: url("../icons/red-play.79a5c6fb297b.svg") no-repeat center;
    background-size: 24px;
}

.bg-secondary-100>button,
.blueplay{
    background: url("../icons/blue-play.d8c6b33ca91c.svg") no-repeat center;
    background-size: 24px;
}

.pauseBtn{
    background:white url("../icons/pause.2857e58e0413.svg") no-repeat center !important;
    background-size: 24px;
}

.sheik-bg-success>button    {
    background: url("../icons/green-play.8b5bff7f87e9.svg") no-repeat center;
    background-size: 24px;
}

.sheik-bg-yellow>button{
    background: url("../icons/greenshade-play.383c6d081302.svg") no-repeat center;
    background-size: 24px;
}

.sheik-bg-blue-100>button{
    background: url("../icons/skyBlue-play.3870b40c18dd.svg") no-repeat center;
    background-size: 24px;
}

.bg-primary-100>button{
        background: url("../icons/orange-play.dd72e02f526e.svg") no-repeat center;
    background-size: 24px;
}

.viewAll{
    padding:12px 16px !important;
}

section{
     padding:80px 0;
}

.playBtn{
    background-size: 40%;
    transition: transform 0.3s ease;
}

.playBtn:hover {
    animation: pulseBg 0.6s ease-in-out;
}

.dropdown-menu{
    padding:12px 0 !important;
    background-color: #ffffff !important;
    width: max-content !important;
}

.nav-link.dropdown-toggle.show{
    background-color: #FFF4E8 !important;
    color: #000 !important;
}

.nav-link.dropdown-toggle.show:hover{
    color: #000 !important;
}

.dropdown-menu > li a{
    padding:12px 16px !important;
    font-size: 22px;
    color: var(--text-gray-900);
    font-weight: 700;
}

.dropdown-item.active, .dropdown-item:active{
    background-color: #f8f9fa !important;
    color: #000 !important;
}

.offcanvas.offcanvas-end.show{
    background-color: var(--sheik-primary) !important;
}

.offcanvas-body .nav-link{
    padding:8px 12px !important;
      transition: color 0.2s ease;
       color: #fff;
}

.offcanvas-body .nav-link:hover {
    color: #222;
}

.offcanvas-body > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.offcanvas-body .section-title {
    font-weight: bold;
    font-size: 1.05rem;
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
}

.offcanvas-body .sub-item {
    padding-right: 24px;
    font-size: 0.95rem;
    opacity: 0.9;
}

.cursor-no-drop:hover{
    cursor: not-allowed !important;
    background-color: #f8f9fa !important;
    color: #000 !important;
}

.breadcrumb-item.active::before{
    color: var(--sheik-primary);
    font-weight: bold;
    font-size: 24px;
}

.modal {
    background-color: rgba(0, 0, 0, 0.6);
}

 @keyframes pulseBg {
   0% {
      background-size: 40%;
    }
    50% {
      background-size: 50%;
    }
    100% {
      background-size: 40%;
    }
  }

/*RTL*/
html[lang='ar'] .playList>li::before {
    right: 102px;
    left: auto;
}

html[lang='ar'] blockquote>i{
    transform: scaleX(-1) !important;
}

@keyframes progressBar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Responsive */
@media screen and (max-width: 768px) {
    .bannerSection {
        height: auto;
    }

    section{
     padding:40px 0 !important;
    }

    .bannerImgContainer {
        position: relative !important;
        width: 100% !important;
    }

    .navbar-toggler {
        top: -62px !important;
        left: 8px !important;
        right: auto !important;
        z-index: 1;
    }

    .btn-close {
        margin: 0 !important;
        left: 12px !important;
        top: 12px;
        position: absolute;
    }

    .foo {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .foo ul {
        padding: 0;
        justify-content: center;
    }
}