:root{
    --main-color: #d7d7d0;
    --second-color:#224033;
    --third-color: #ad9d85;
   

}

body {
  font-family: 'Readex Pro', sans-serif;
   /* padding-top: 10px; */
     overflow-x: hidden !important;

}




#nav > nav,#aboutSection{
     background-color: #D8D9D1 !important;
}

.nav-link.active {
  font-weight: bold;
  color: var(--third-color) !important;
  border-bottom: 2px solid var(--third-color);
}



/* resources/css/app.css */
body[dir="rtl"] {
    text-align: right;
    direction: rtl;
    
}

body[dir="rtl"] .text-start { text-align: right !important; }
body[dir="rtl"] .text-end   { text-align: left !important; }

body {
  background-color: #D8D9D1; 
  color: var(--second-color);
}

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

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

.second-color{
    color: var(--second-color);
}

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

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

/* Hover states */
.hover-second-color:hover {
    color: var(--second-color);
}
.hover-bg-second-color:hover {
    background-color: var(--second-color);
}

/* Border color utilities */
.border-second-color {
    border-color: var(--second-color) !important;
}
.border-third-color {
    border-color: var(--third-color) !important;
}

.bg-second-color,
.bg-third-color {
    color: #fff; /* Ensures readable text over dark/medium backgrounds */
}




/* .forthSection */


.forthSection {
    background-color: var(--main-color);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.forthSection img {
    /* transition: transform 0.3s ease; */
}

.forthSection img:hover {
    /* transform: scale(1.05); */
}

.forthSection h4 {
    color: var(--second-color);
}

/* .forthSection p {
    color: var(--third-color);
} */
/* Base styling */
.wezarat-item {
    position: relative;
    display: inline-block;
}

/* Create the underline */
.wezarat-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 98%;
    height: 10px;
    background-color: var(--second-color);
    transform: scaleX(0);
    transform-origin: right;
    /* transition: transform 0.3s ease; */
}

/* Animate underline on hover */
.wezarat-item::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Optional: subtle zoom for logos */
/* .wezarat-item img {
    transition: transform 0.3s ease;
} */

/* .wezarat-item:hover img {
    transform: scale(1.05);
} */
.contactSection {
  background-color: var(--main-color);
}

.contactSection h3 {
  color: var(--second-color);
}

.contactSection p, label {
  color: var(--third-color);
}

.contactSection .form-control,
.contactSection .form-select {
  border-color: var(--third-color);
  border-radius: 8px;
}

.contactSection .form-control:focus,
.contactSection .form-select:focus {
  border-color: var(--second-color);
  box-shadow: 0 0 0 0.2rem rgba(32, 64, 51, 0.15);
}

.bb:hover{

    background-color: var(--third-color);
    color: var(--second-color) !important;

}


/* footer */

.footerSection {
  background-color: var(--second-color);
  color: #fff;
}

.footerSection a {
  transition: color 0.3s ease;
}

.footerSection a:hover,
.hover-third-color:hover {
  color: var(--third-color);
}

.footerSection i {
  color: var(--third-color);
}



#btnTop {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 99;
  background-color: var(--second-color);
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 12px 15px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  display: none; /* hidden by default */
}

#btnTop:hover {
  background-color: var(--third-color);
  color: var(--second-color);
  transform: translateY(-3px);
}



/* WhatsApp Floating Button */
#btnWhatsApp {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 100;
  background-color: #25D366; /* WhatsApp Green */
  color: white;
  border-radius: 50%;
  padding: 14px 16px;
  font-size: 22px;
  text-decoration: none;
  transition: all 0.3s ease;
}

#btnWhatsApp:hover {
  background-color: var(--third-color);
  color: var(--second-color);
  transform: scale(1.1);
}

/* RTL Support — move buttons properly if body is RTL */
body[dir="rtl"] #btnTop {
  right: auto;
  left: 25px;
}

body[dir="rtl"] #btnWhatsApp {
  left: auto;
  right: 25px;
}


.table-hover tbody tr:hover {
  background-color: rgba(32, 64, 51, 0.05);
  transition: background-color 0.3s ease;
}

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

.table-warning {
  background-color: rgba(255, 244, 179, 0.5);
}