:root {
        --primary: #4f234b;
        --secondary: #a4c29e;
        --secondary-se: #cca3c6;
        --tertiary: #bf80d7;
        --lilac: #f0f2f5;
        --white: #FFFFFF;
        --gray: #4E4D4D;
        --dark-gray: #92929D;
        --primary-rgb: 79, 35, 75; 
    }

html {
  scroll-behavior: smooth;
}
    
/* 
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../../font/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
} */
.ibm-plex-sans-arabic-thin {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-sans-arabic-extralight {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-sans-arabic-light {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-arabic-regular {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-arabic-medium {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-arabic-semibold {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-arabic-bold {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body {
  /* font-family: "Plus Jakarta Sans", sans-serif; */
  /* font-family: 'Somar Sans', sans-serif; */
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* font-weight: 300 !important; */
  overflow-x: hidden;
}


main {
  flex: 1;
}

/* nav */
header {
  z-index: 1000;
}

nav {
    position: sticky !important;
    top: 0;
    z-index: 1001;
    background-color: #f9f9f9;
    padding: 2rem 9rem;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    .navbar-toggler,
    .btn-close {
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        z-index: 1050;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* bars color */
   .navbar-toggler .navbar-toggler-icon {
    background-image: none;
    width: 24px;
    height: 2px;
    background-color: rgba(var(--primary-rgb), 0.7); 
    position: relative;
    display: inline-block;
}


    .navbar-toggler .navbar-toggler-icon::before,
    .navbar-toggler .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
    background-color: rgba(var(--primary-rgb), 0.7); 
        left: 0;
    }

    .navbar-toggler .navbar-toggler-icon::before {
        top: -8px;
    }

    .navbar-toggler .navbar-toggler-icon::after {
        top: 8px;
    }

    /* close color */
    .btn-close {
        opacity: 0;
        pointer-events: none;
        filter: invert(27%) sepia(18%) saturate(805%) hue-rotate(270deg) brightness(90%) contrast(90%);
    }

    /* When menu is open, hide toggler and show close */
    .mobile-menu.show ~ .btn-close {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu.show ~ #mobileToggle {
        opacity: 0;
        pointer-events: none;
    }

    /* Animate nav items */
    .mobile-menu .nav-item {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .mobile-menu.show .nav-item {
        opacity: 1;
        transform: translateY(0);
    }
}

/*desktop hide close button */
@media (min-width: 992px) {
    .btn-close {
        display: none !important;
    }
}




@media (min-width: 992px) {
    .btn-close {
        display: none !important;
    }
}
html[dir="rtl"] .navbar .navbar-brand {
  margin-left: auto !important;  
  margin-right: 0 !important;
}

html[dir="rtl"] .navbar-nav {
  flex-direction: row !important; 
  justify-content: flex-start;
}

html[dir="rtl"] .navbar-collapse {
  justify-content: flex-start;
}


nav.scrolled {
  background-color: rgba(79, 35, 75, 0.85) !important;
  backdrop-filter: blur(10px); 
}
.logo-scroll {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

nav:not(.scrolled) .logo-scroll {
    display: none !important;
}

nav.scrolled .logo-scroll {
    display: inline-block !important;
}



.nav-link {
  color: var(--white) !important;
  font-weight: 400;
  opacity: 50%;
  text-transform: uppercase !important;
}

.nav-link.active {
  /* background-color: red; */
  color: white;
  border-radius: 1rem;
  padding: 5px 10px;
}

/* nav end */

.btn-blk{
  background-color: var(--tertiary);
  border: 1px solid var(--tertiary);
}
.btn-tertiary {
  background-color: var(--tertiary);
  color: #000; 
  border: none;
}
.btn-tertiary-outline{
  color: #fafafa;
  border-color: var(--tertiary);
}


footer{
    background-color: var(--primary);

}

/* notfication */
  @keyframes bell-swing {
            0% {
                transform: rotate(0deg);
            }

            10% {
                transform: rotate(15deg);
            }

            20% {
                transform: rotate(-15deg);
            }

            30% {
                transform: rotate(12deg);
            }

            40% {
                transform: rotate(-12deg);
            }

            50% {
                transform: rotate(8deg);
            }

            60% {
                transform: rotate(-8deg);
            }

            70% {
                transform: rotate(4deg);
            }

            80% {
                transform: rotate(-4deg);
            }

            90% {
                transform: rotate(2deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        .bell.animate i {
            animation: bell-swing 1s ease-in-out infinite;
            transform-origin: top center;
        }

        .notif-item {
            padding: 0.75rem 1rem;
            color: #333;
            text-decoration: none;
            font-weight: 600;
            display: block;
        }

        .notif-item:hover {
            background: var(--secondary);
            color: white;
        }

        .notif-dropdown {
            position: absolute;
            top: -141px;
            right: 0;
            background: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 0.4rem;
            width: 260px;
            display: flex;
            flex-direction: column;
            z-index: 1060;
            direction: rtl;
        }

        .d-none {
            display: none !important;
        }