:root{

    /* --color-main-light: #fab3663a; */
    /* --color-main: #000080;
    --color-main-d: #000080;
    --color-main-light: #00008010;
    --color-main-light-d: #00008010;
    --color-main-dark: #000080;
    --category: #000080; */

    /* --color-main : #660099;
    --color-main-d : #660099;
    --color-main-light : #66009940;
    --color-main-light-d : #66009910;
    --color-main-dark : #660099; */
    --color-main : #3F788B;
    --color-main-d : #3498db;
    --color-main-light : #3498db40;
    --color-main-light : #7fc5dd40;
    --color-main-light-d : #3498db10;
    /* --color-main-dark : #3498db; */
    --color-main-dark : #448C9A;

}
@font-face {
    font-family: 'dinnext';
    src: url('../fonts/DIN NEXT ARABIC REGULAR.otf') format('opentype');
    font-weight: bolder;
    font-style: normal;
}
*{
    font-family: 'dinnext'
}
.form-check-input {
    width: 25px;
    height: 25px;
}
.form-check-input:checked {
    background-color: var(--color-main);
}
.pattern{
    color: var(--color-main) !important;
    background-image: url("pattern-nb.webp");
    background-position: center;
    background-size: 20%;
}
#container{
    max-width: 860px;
    width: 560px;

    width: 100%;
    height: 100%;
    min-height: 100vh;
}


.text-main{
    color: var(--color-main-dark);
}

.text-default{
    color: var(--color-main-dark);
}

.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px);}
    100%   { transform: translate(0, -0px);}
}

.noto-sans-arabic{
    font-family: "Noto Sans Arabic", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}

.liquid_shape{
    background: linear-gradient(45deg, var(--color-main-dark) 0%, var(--color-main-light) 100%);
    width:  200px;
    height: 200px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: liquid 8s ease-in-out infinite;
}

@keyframes liquid{
    0%{
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; background-size:100% 100%;
    }
    50%{
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; background-size:300% 150%;
    }
    100%{
        border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; background-size:100% 100%;
    }
}
@keyframes liquid_divider{
    0%{
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; background-size:100% 100%;
    }
    50%{
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; background-size:300% 150%;
    }
    100%{
        border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; background-size:100% 100%;
    }
}
  /* Grid Layout */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .75rem; /* Adjust gap as needed */
}
.menu-grid>div{
    background-color: #fff;

}
.shadow-md{
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
    , 0 -2px 3px 1px rgba(0, 0, 0, 0.06)
    ;
}
.font-30{
    font-size: 30px;
}
.font-25{
    font-size: 25px;
}
.font-12{
    font-size: 12px;
}
/* Example usage in Bootstrap 5.3 */

.btn-primary {
--bs-btn-bg: var(--color-main);
--bs-btn-border-color: var(--color-main);
--bs-btn-hover-bg: var(--color-main-light); /* Slightly darker for hover */
--bs-btn-hover-border-color: var(--color-main);
--bs-btn-hover-color: var(--color-main);
/* font-weight: 900; */
}
.btn-default {
--bs-btn-bg: var(--color-main-d);
--bs-btn-border-color: var(--color-main-d);
--bs-btn-hover-bg: var(--color-main-light-d); /* Slightly darker for hover */
--bs-btn-hover-border-color: var(--color-main-d);
--bs-btn-hover-color: var(--color-main-d);
--bs-btn-active-color: #fff;
font-weight: 900;
color: var(--bs-btn-active-color);
}
.btn-outline-primary {
--bs-btn-active-color: white !important;
--bs-btn-active-bg: var(--color-main);
--bs-btn-active-border-color: var(--color-main);

--bs-btn-color: var(--color-main) !important;
--bs-btn-bg: var(--color-main-light);
--bs-btn-border-color: var(--color-main);

/* font-weight: 900; */
}
.badge{
    --bs-badge-color: black;

}
.btn-primary:visited {
--bs-btn-bg: var(--color-main);
--bs-btn-border-color: var(--color-main);
--bs-btn-hover-bg: var(--color-main-light); /* Slightly darker for hover */
--bs-btn-hover-border-color: var(--color-main);
--bs-btn-hover-color: var(--color-main);
}
.accordion-button:not(.collapsed) {
    color: var(--color-main);
    background-color: var(--color-main-light);
}
/* Example usage for other elements */

.nav-link.active,
.nav-link:hover {
color: var(--color-main);
}

.text-primary {
color: var(--color-main);
}
/* Bootstrap 5.3 color classes */

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

.text-primary {
color: var(--color-main);
}

.bg-dark {
background-color: var(--color-main-dark);
}

.text-dark {
color: var(--color-main-dark);
}

.bg-main-light {
background-color: var(--color-main-light);
}
.bg-instagram {
    background: radial-gradient(
      circle farthest-corner at 10% 75%,
      rgba(255, 225, 125, 1) 0%,
      rgba(255, 205, 105, 1) 12%,
      rgba(250, 145, 55, 1) 25%,
      rgba(235, 65, 65, 1) 40%,
      transparent 75%
    ),
    linear-gradient(-15deg, rgba(35, 75, 215, 1) 20%, rgba(195, 60, 190, 1) 90%);
  }
  .bg-yellow{
    background-color: #fffc00;
  }
  .rounded-1{
    border-radius: 8px !important;
  }
.text-light {
color: var(--color-main);
}
.border-dark {
border-color: var(--color-main) !important;
}
.border-main{
    border-color: var(--color-main-light) !important;
}
/* Example usage */

/* ... add more CSS rules as needed ... */

.accordion-button::after{
    margin-right: auto !important;
    margin-left: 0 !important;
    position: absolute;
    left: 10px;
}
.switch-success:checked{
    background-color: rgb(82, 196, 26) ;
    border-color: rgb(82, 196, 26) ;
}
.list-group-item{
    /* height: 70px; */
    min-height: 56px;
}
.form-switch input {
    height: 23px !important;
    width: 40px !important;
}

.currency {
    color: white !important;
    border-top-right-radius: 0.375rem;
}

.shadow-1{
    box-shadow: 0 -3px 5px rgba(0, 0, 0, .09), 0px 24px 32px rgba(0, 0, 0, .08);
}

.counter{
    z-index: 9;
}

.rounded-bottom-right-0{
    border-bottom-right-radius: 0;
}
@font-face {
    font-family: 'saudi_riyal';
    src: url("../fonts/saudi_riyal.woff2") format('woff2'),
         url("../fonts/saudi_riyal.woff") format('woff'),
         url("../fonts/saudi_riyal.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

  /* Ensure the icon class correctly loads the Riyal symbol */
  .icon-saudi_riyal::before {
    content: "\e900";
    font-family: 'saudi_riyal' !important;
    font-size: 1.3em;
    font-weight: 100;
    color: inherit;
  }
  .w-33{
    width: 33% !important;
  }
  .drag-handle {
    cursor: grab; /* Indicate it's draggable */
    margin-right: 5px; /* Add some spacing */
}
.btn-sm{
    font-size: 12px;
}
.btn:hover {
    background-color: var(--color-main-dark);
    color: #fff;
}
.no-select {
  /* Standard property for modern browsers */
  user-select: none;

  /* Vendor prefixes for older browsers */
  -webkit-user-select: none; /* Safari, Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
}

.card-custom{
    width: 150px !important;
    height: 150px !important;
}