/* --- Main FAQ Container --- */
.cfa-faq-container {
    font-family: "Fustat arabic 400 normal", Sans-serif;
    margin: 40px auto;
    color: #333;
}

/* --- Tabs --- */
.cfa-tabs {
	    flex-wrap: nowrap;
        border-top: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        margin: 0 0 50px 0;
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0 0 70px 0;
    border-bottom: 1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;

}
.cfa-tabs li {
    padding: 30px 20px;
    margin-right: 15px;
    cursor: pointer;
    color: #646464;
    font-family: "Fustat arabic 400 normal", sans-serif;
    font-size: 28px;
    position: relative;
    transition: color 0.3s ease;
}
.cfa-tabs li.active {
    color: #2E8B57; /* A nice green color */
}
.cfa-tabs li.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    /*background-color: #2E8B57;*/
}

/* And replace it with this combined rule */
.cfa-faq-question.active .cfa-icon,
.cfa-faq-question:hover .cfa-icon {
    color: #3e965b; /* This color now applies to active and hover */
}

.faq-h-css{
    font-size: 64px;
    font-weight: 600;
    letter-spacing: -0.4px;
}
/* --- Search Box --- */
.cfa-search-wrapper {
    position: relative;
    margin-bottom: 70px;
}
#cfa-search-input {
    width: 100%;
    padding: 15px 75px 15px 20px;
    border: 1px solid #052D14;
    border-radius: 0.5px;
    font-size: 32px;
    box-sizing: border-box;
}
#cfa-search-input:focus {
    outline: none;
    border-color: #2E8B57;
}
.cfa-search-icon {
    position: absolute;
    right: 15px;
    top: 55%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-image: url('/wp-content/uploads/2025/09/Frame-1400005431.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

/* Styles for the clear search 'X' icon */
.cfa-clear-search {
    position: absolute;
    right: 15px; /* Positioned where the search icon was */
    top: 60%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: #238F44;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    display: none; /* Hidden by default */
}
.cfa-clear-search:hover {
    color: #333;
}


/* --- FAQ List & Items --- */
.cfa-faq-list {
    border-top: 0;
}
.cfa-faq-item {
    border-bottom: 0;
}
.cfa-no-results {
    padding: 20px;
    text-align: center;
    color: #888;
    display: none; /* Hidden by default */
}
.cfa-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    cursor: pointer;
    font-size: 28px;
    font-weight: 400;
    line-height: 276%;
    letter-spacing: -0.4px;
    font-family: 'Fustat arabic 400 normal';
}
.cfa-question-content {
    display: flex;
    align-items: baseline;
    transition: color 0.3s ease;
}
/* --- And replace it with this to include the hover effect --- */
.cfa-faq-question.active .cfa-question-content,
.cfa-faq-question:hover .cfa-question-content {
    color: #238F44;
}
.cfa-faq-question .cfa-icon {
    font-size: 24px;
    font-weight: bold;
    color: #888;
}

/* --- FAQ Answer --- */
.cfa-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 20px;
    color: #1D1E23;
    line-height: 31px;
    font-size: 22px;
    font-family: 'Fustat arabic 400 normal';
}
.cfa-faq-answer.open {
    padding: 30px 20px 30px 20px;
	max-height: 400px !important;
    background: #D9D9D924;
}

.cfa-faq-answer p:first-child {
    margin-top: 0;
}
.cfa-faq-answer p:last-child {
    margin-bottom: 0;
	max-width: 1000px;
}


@media (max-width: 1600px) and (min-width: 1440px) {
.cfa-tabs {
		    flex-wrap: nowrap;
        border-top: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        margin: 0 0 50px 0;
    
    display: flex;
	list-style-type: none;
    padding: 0;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
}
}


@media (max-width: 2400px) and (min-width: 1600px) {
.cfa-tabs {
    display: flex;
	flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0 0 70px 0;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    gap: 42px;
}
}

@media (max-width: 768px){
	.cfa-faq-container {font-family: "Fustat arabic 400 normal", Sans-serif; margin: 0px 0 40px;  color: #333;}
    .cfa-tabs { flex-wrap: nowrap;  border-top: 0;   overflow-x: auto;    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */gap:0;   margin: 0 0 50px 0; }
	.cfa-search-wrapper {position: relative; margin-bottom: 50px;}
    .cfa-tabs li {white-space: nowrap; /* Prevents text like "Executive Search" from breaking into two lines */font-size:14px;   padding: 25px 5px; }
    .cfa-tabs::-webkit-scrollbar {   display: none; /* Hide scrollbar for a cleaner look */    }
	.cfa-faq-question{font-size: 14px;}
	.cfa-faq-answer {line-height: 18.9px; font-size: 12px;}
	.cfa-faq-question .cfa-icon {font-size: 10px; font-weight: bold; color: #888;}
	.cfa-faq-answer.open { padding: 20px 20px 20px 20px;}
	.faq-h-css {font-size: 18.3px;}
	#cfa-search-input{font-size: 12px}
	.cfa-search-icon {width: 20px;  height: 20px;}
	
	
}

@media (max-width: 1024px) {
    .cfa-faq-question {
        font-size: 20px;
    }
	.cfa-faq-answer {
        line-height: 26.9px;
        font-size: 16px;
    }
}