/* ----------------------------------------------------
   LIST STYLE FOR AREAS OF PRACTICE (UNCHANGED)
----------------------------------------------------- */
#areas-of-practice-home .list.s4 li {
    position: relative;
    padding: 12px 10px 12px 50px;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 500;
    color: #ffffff;
    background: none;
    transition: color 0.3s;
}

#areas-of-practice-home .list.s4 li i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 24px;
    color: #ffffff;
    transition: color 0.3s;
}

#areas-of-practice-home.rtl .list.s4 li {
    padding-left: 10px;
    padding-right: 50px;
}

#areas-of-practice-home.rtl .list.s4 li i {
    left: auto;
    right: 15px;
}


/* ----------------------------------------------------
   FEATURE BOX BASE STYLE (YOUR ORIGINAL STYLE)
----------------------------------------------------- */
.feature-box.f-boxed.style-3 {
  background-color: #ffffff;
  color: #000000;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
}

/* Main (front) icon color */
.feature-box.f-boxed.style-3 .id-color {
  color: #610505;
  transition: color 0.3s ease;
}

/* Watermark icon color */
.feature-box.f-boxed.style-3 .wm {
  color: #000000 !important;
  transition: color 0.3s ease;
}

/* Hover state */
.feature-box.f-boxed.style-3:hover {
  background-color: #234370;
  color: #ffffff;
  border-color: #234370; /* FIXED TYPO */
}

.feature-box.f-boxed.style-3:hover .id-color {
  color: #ffffff;
}

.feature-box.f-boxed.style-3:hover .wm {
  color: #000000 !important;
}

.feature-box.f-boxed.style-3:hover .btn-custom.btn-black {
  background-color: #ffffff;
  color: #234370;
  border-color: #ffffff;
}


/* ----------------------------------------------------
   EQUAL WIDTH + HEIGHT + RESPONSIVE FEATURE BOXES
----------------------------------------------------- */

/* Bootstrap columns must stretch */
.col-lg-4.col-md-6 {
    display: flex;
}

/* Equal height & responsive width */
.feature-box.f-boxed.style-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;  /* ADJUST IF YOU WANT */
    width: 100%;
    box-sizing: border-box;
}

/* Clamp excerpt to same number of lines */
.feature-box.f-boxed.style-3 .text p {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* CHANGE TO 4 or 5 IF NEEDED */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

/* Ensure row forms equal-height layout */
.row {
    display: flex;
    flex-wrap: wrap;
}



/* ----------------------------------------------------
   SIDEBAR ICON COLORS 
----------------------------------------------------- */
/* Sidebar service list — icons next to titles */
#sidebar .widget-post ul li {
    display: flex;           
    align-items: center;     
    gap: 12px;               /* space between icon and text */
    margin-bottom: 10px;     
    padding: 8px 12px;       /* padding for hover effect */
    border-radius: 4px;      /* optional rounded corners */
    transition: all 0.3s ease; /* smooth hover */
    background-color: transparent; /* default background */
    color: #234370;          /* default text color */
    cursor: pointer;         /* pointer on hover */
}

/* Icon inside list item */
#sidebar .widget-post ul li i {
    display: inline-block;
    font-size: 24px;         /* adjust icon size */
    line-height: 1;
    color: #234370;          /* default icon color */
    transition: color 0.3s ease;
}

/* Link inside list item */
#sidebar .widget-post ul li a {
    display: inline-block;   
    color: inherit;          /* inherit color from li */
    font-weight: bold;  
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover effect — full background + white text/icon */
#sidebar .widget-post ul li:hover {
    background-color: #234370; /* blue background */
    color: #ffffff;             /* white text */
}

#sidebar .widget-post ul li:hover i,
#sidebar .widget-post ul li:hover a {
    color: #ffffff;             /* white icon and link */
}

/* Optional — maintain other icon colors for widgets */
.widget-post .id-color {
    color: #234370;
    transition: color 0.3s ease;
}

.widget-post .wm {
    color: #000000 !important;
    transition: color 0.3s ease;
}