/* -------- Faq CSS Start ------- */

.hide-on-desktop{
display:none !important;
}

.faq-section .accordion-box a:hover,
.question-content .question-inner a:hover{
color:var(--gold-yellow) !important;
}

.question-content .question-inner a{
text-decoration:none !important;
}

/* --------- Faq tabs header Start -------- */

.faq-tab-header{
min-height:fit-content;
box-shadow: var(--cpc-box-shadow);
background: var(--theme-color-white) !important;
color: var(--navy-blue, #0a2342);
text-transform: capitalize;
position:sticky;
top: 115px;
}

.faq-tab-header::-webkit-scrollbar {
display: none; 
}

.sidebar-service-list .title{
font-size: var(--section-sub-heading) !important;
text-transform: capitalize;;
}

.faq-tab-header.sidebar-service-list .title:before{
width: 35px !important;
}

.faq-tab-header ul{
display:flex;
flex-direction:column;
gap:20px !important;
}

.faq-tab-header ul i{
position:absolute;
top:50%;
left:24px !important;
transform:translate(-50%, -50%);
font-size:12px !important;
}

.index-number-positioning{
display: flex;
align-items: baseline;
gap: 15px;
color:var(--navy-blue) !important;
font-size:20px !important;
}

.faq-tab-header ul li{
position:relative !important;
padding:9px 45px;
background: var(--platinum-gray) !important;
color: var(--navy-blue) !important;
min-width:100%;
cursor:pointer !important;
margin-bottom:0 !important;
margin-top:0 !important;
}

.faq-tab-header ul li:hover {
background: var(--cpc-gradient) !important;
}

.faq-tab-header ul li.active{
transform: scale(1, 1);
transform-origin: top right;
color:var(--theme-color-white) !important;
background:var(--navy-blue) !important;
}

/* --------- Faq tabs header End -------- */
.faq-content-1 .accordion-box{
margin-top:40px !important;
}

.faq-content-1 .accordion-box .block{
border:1px solid #0000001A;
padding-bottom:0;
border-radius:10px !important;
overflow:hidden !important;
}

.faq-content-1 .accordion-box .block .acc-content{
padding: 20px 28px !important;
padding-right:80px !important;
margin-top:0;
}

.faq-main-container{
margin-top:60px !important;
margin-bottom:80px !important;
}

.faq-section-padding{
padding-top:15px !important;
}

.faq-section .row .col-xl-5,
.faq-section .row .col-lg-7{
padding-left:20px !important;
padding-right:20px !important;
}

.faq-left-items-1 .faq-image {
height:350px !important;
max-height:400px !important;
margin-top:0 !important;
border-radius:30px !important;
overflow:hidden !important;
}

.faq-left-items-1 .faq-image::before{
content: "";
position: absolute;
height: 135px;
width: 100%;
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(6.2px);
mix-blend-mode: lighten;
z-index: 2 !important;
}

.faq-left-items-1 .faq-image::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 160px;
background: linear-gradient(to top, #EFA500 0%, rgba(239, 165, 0, 1) 8%, rgba(242, 175, 30, 0.95) 18%, rgba(245, 185, 40, 0.88) 28%, rgba(248, 195, 50, 0.78) 38%, rgba(250, 205, 70, 0.68) 48%, rgba(252, 210, 80, 0.55) 58%, rgba(253, 215, 87, 0.42) 68%, rgba(254, 219, 93, 0.28) 78%, rgba(254, 219, 93, 0.15) 88%, rgba(254, 219, 93, 0.05) 96%, rgba(254, 219, 93, 0) 100%);
pointer-events: none;
z-index: 1;
}

.faq-left-items-1 .faq-image h2{
position:absolute !important;
bottom: 6%;
left: 50%;
transform: translate(-50%, -50%) !important;
z-index:2;
width:100% !important;
text-align:center !important;
text-transform: uppercase !important;
}

.faq-content-1 .accordion-box .block .acc-btn{
font-weight:500 !important;
}

.faq-content-1 .accordion-box .block .acc-btn span{
   padding-right:30px !important; 
}

.faq-content-1 .accordion-box .block .acc-btn:not(.active):hover,
.faq-content-1 .accordion-box .block .acc-btn:not(.active):hover .icon,
.faq-content-1 .accordion-box .block .acc-btn:not(.active):hover .index-number-positioning{
color:var(--gold-yellow) !important;
}

.faq-content-1 .accordion-box .block .acc-btn .icon i {
font-size:14px !important;
}

.faq-content-1 .accordion-box .block .acc-btn .icon{
top: 50% !important;
right: 6% !important;
transform: translate(-60%, -35%);
}

.faq-content-1 .accordion-box .block .acc-btn{
font-size:var(--ctc-font-size) !important;
padding:20px 28px !important;
}

.faq-content-1 .accordion-box .block .acc-btn.active{
background:var(--cpc-gradient) !important;
}

/* --------------------- Nested FAQ Container --------------------- */
.nested-faq-container {
max-width: 1200px;
margin: 100px auto 0;
padding: 20px;
}

.nested-faq-container .title{
margin-bottom:30px;
font-size:24px !important;
}

.nested-faq-container .title:before{
width: 35px !important;
background-color: #EFA500;
bottom: 0;
content: "";
height: 1px;
position: absolute;
}

/* Category Accordion */
.category-accordion {
display: flex;
flex-direction: column;
gap: 15px;
}

.category-item {
border: 1px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
background: #fff;
transition: all 0.3s ease;
}

/* Category Header */
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
cursor: pointer;
background: #f8f9fa;
transition: all 0.3s ease;
color:var(--navy-blue) !important;
background:var(--platinum-gray) !important;
position:relative;
}

.category-header:hover,
.category-item.active .category-header{
background:var(--cpc-gradient-reverse) !important;
}

.category-title {
margin: 0;
font-size: 20px;
font-weight: 500;
color:var(--navy-blue) !important;
font-family:var(--poppins-font) !important;
}

.category-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
transition: all 0.3s ease;
}

.category-icon i {
font-size: 14px;
color: var(--navy-blue);
transition: transform 0.3s ease;
}

.category-item.active .category-icon i {
color: var(--navy-blue);
}

/* Category Content */
.category-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}

.category-inner {
padding: 25px;
}

/* FAQ Category Image */
.faq-category-image {
width: 100%;
margin-bottom: 25px;
border-radius: 8px;
overflow: hidden;
}

.faq-category-image img {
width: 100%;
height: 400px;
display: block;
object-fit:cover;
}

/* Questions Accordion */
.questions-accordion {
display: flex;
flex-direction: column;
gap: 12px;
}

.question-item {
border: 1px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
background: #fff;
}

/* Question Header */
.question-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
cursor: pointer;
transition: all 0.3s ease;
font-family:var(--poppins-font) !important;
position:relative !important;
}

.question-header:hover {
background: var(--cpc-gradient-reverse);
}

.question-title {
margin: 0;
font-size: 16px;
font-weight: 500;
color: var(--navy-blue);
flex: 1;
padding-right: 15px;
font-family:var(--poppins-font) !important;
}

.question-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
}

.question-icon i {
font-size: 12px;
color:var(--navy-blue);
transition: transform 0.3s ease;
}

.question-item.active .question-header {
background: var(--cpc-gradient-reverse);
}

.question-item.active .question-title {
color: var(--navy-blue);
}

.question-item.active .question-icon i {
color: var(--navy-blue);
}

/* Question Content */
.question-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}

.question-inner p {
margin: 0;
line-height: 1.6;
color: var(--text-color);
padding:20px;
}

/* ------ Responsive ------ */

@media (max-width: 491px){
.faq-category-image img{
height: 200px !important;
}
}

@media (max-width: 768px) {
.nested-faq-container {
padding: 15px;
}

.category-header {
padding: 15px 20px;
}

.category-title {
font-size: 18px;
}

.category-inner {
padding: 20px 15px;
}

.question-title {
font-size: 16px;
}

.faq-category-image img{
height: 300px;
}
.index-number-positioning{
   font-size: 16px !important; 
}
}

@media (max-width: 992px){
#general-section-placeholder .accordion-container,
#business-section-placeholder .accordion-container,
#pricing-section-placeholder .accordion-container{
flex-direction: column-reverse !important;
}

.hide-below-tab{
display:none;
}

.hide-on-desktop{
display:block !important;
}

.nested-faq-container{
margin-top: 0 !important;
}
}

@media (max-width: 1024px){

.index-number-positioning{
font-weight: 500;
}


.question-inner p{
padding: 20px 30px !important;
}
}

@media (max-width: 1250px) {
.faq-tab-header ul{
gap:20px;
}
}
/* --------- Faq CSS End -------- */