/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');


body {
    direction: rtl;
    text-align: right;
}
* {
  font-family: "Montserrat", sans-serif !important;
}
.rtl {
    direction: rtl;
  }
  
  .rtl * {
    font-family: "Cairo", sans-serif !important;
  }
  .navbar-nav-rtl {
    margin-left: auto;
    margin-right: 0;
  }
  
  .navbar-nav-rtl .nav-item {
    float: right;
  }
  
  .navbar-nav-rtl .nav-link {
    text-align: right;
  }
  
  /* Specific adjustments if needed */
  .rtl .navbar-brand {
    float: right;
  }
  
  .rtl .navbar-toggler {
    float: left;
  }
  
  .rtl .navbar-collapse {
    justify-content: flex-end;
  }
  

:root {
    --petrol: #004d5d;
    --aqua: #1ba7a6;
    --light-aqua: #e8f8fb;
    --mustard: #f9971c;
    --red: #de1f26;
    --gray: #4b4b4b;
    --silver: #b6b6b6;
  }
  
  /* Text color classes */
  .text-petrol {
    color: var(--petrol);
  }
  
  .text-aqua {
    color: var(--aqua);
  }
  
  .text-mustard {
    color: var(--mustard);
  }
  
  .text-red {
    color: var(--red);
  }
  
  .text-gray {
    color: var(--gray);
  }
  
  .text-silver {
    color: var(--silver);
  }
  .text-light-aqua {
    color: var(--light-aqua);
  }
  
  /* Background color classes */
  .bg-petrol {
    background-color: var(--petrol);
    color: white;
  }
  
  .bg-aqua {
    background-color: var(--aqua);
    color: white;
  }
  
  .bg-mustard {
    background-color: var(--mustard);
    color: black;
  }
  
  .bg-red {
    background-color: var(--red);
    color: white;
  }
  
  .bg-gray {
    background-color: var(--gray);
    color: white;
  }
  
  .bg-silver {
    background-color: var(--silver);
    color: black;
  }
  
  .bg-light-aqua {
    background-color: var(--light-aqua);
    color: var(--petrol);
  }
  
  .width-5 { width: 5%; }
  .width-10 { width: 10%; }
  .width-15 { width: 15%; }
  .width-20 { width: 20%; }
  .width-30 { width: 30%; }
  .width-40 { width: 40%; }
  .width-50 { width: 50%; }
  .width-60 { width: 60%; }
  .width-70 { width: 70%; }
  .width-80 { width: 80%; }
  .width-90 { width: 90%; }
  .width-100 { width: 100%; }
  
  /* Responsive Height Classes */
  .height-10 { height: 10%; }
  .height-20 { height: 20%; }
  .height-30 { height: 30%; }
  .height-40 { height: 40%; }
  .height-50 { height: 50%; }
  .height-60 { height: 60%; }
  .height-70 { height: 70%; }
  .height-80 { height: 80%; }
  .height-90 { height: 90%; }
  .height-100 { height: 100%; }
  
  @media screen and (max-width: 768px) {
      .responsive-width { width: 100%; }
      .responsive-height { height: auto; }
  }
  
  .customBtn {
    min-width: 100px;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: capitalize;
    border: none;
    border-radius: 7px;
    transition: 0.3s ease-out;
    background-color: var(--mustard);
    color: black;
    text-align: center;
    border: 2.5px solid var(--mustard);
  }
  
  .outLineBtn {
  background-color: white !important;
  color: var(--mustard) !important;
  }
  
  .outLineBtn:hover {
    background-color: var(--mustard) !important;
    color: black !important;
    }
    
  
  .borderBtn {
    background-color: inherit;
    color: var(--mustard);
    margin-inline-end: 10px;
  }
  .customBtn:hover {
    transform: scale(1.1);
    color: var(--mustard);
  }
  
  
  .swiper-pagination-bullet {
    padding: 6px;
  }
  .swiper-pagination-bullet-active {
    background-color: var(--petrol);
  }
  
  /* scroll bar */
  ::-webkit-scrollbar {
    width: 10px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  
  .sidebar ul {
    list-style: none;
    padding: 0;
  }
  
  .sidebar ul ul {
    padding-left: 20px;
  }
  
  .sidebar a {
    color: #333;
    text-decoration: none;
  }
  
  #search-suggestions {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    margin-bottom: 10px;
  }
  
  #search-suggestions .dropdown-item {
    padding: 10px;
    cursor: pointer;
    text-align: right;
  }
  
  [dir="rtl"] .rtl-flip {
    transform: rotate(180deg);
  }

  [dir="rtl"] .rtl-flip .form-control,
  [dir="rtl"] .rtl-flip .btn {
    transform: rotate(180deg);
  }