@import url('https://fonts.googleapis.com/css2?family=Gupter:wght@400;500;700&family=Open+Sans:wght@300;400;600;700&display=swap');

/************************************/
/***       12. Our FAQs css 	  ***/
/************************************/

[id] {
scroll-margin-top: 20px;
}

.faq-accordion.page-faq-accordion .accordion-item {
border-bottom: 1px solid rgba(123, 121, 140, 0.20);
}

.faq-first-accordion {
padding-top: 26px;
border-top: 1px solid rgba(123, 121, 140, 0.20);
}

.faq-last-accordion {
padding-bottom: 32px !important;
border-bottom: 1px solid rgba(123, 121, 140, 0.20) !important;
}

.faq-accordion.page-faq-accordion .accordion-header .accordion-button,
.faq-accordion.page-faq-accordion .accordion-item .accordion-button::after,
.faq-accordion.page-faq-accordion .accordion-item .accordion-button.collapsed::after {
color: var(--primary-color);
}

.accordion-button {
font-size: 26px;
font-weight: var(--semi-bold) !important;
font-family: var(--openSance);
line-height: 26.4px !important;
color: var(--blue) !important;
}

.faq-accordion.page-faq-accordion .accordion-item .accordion-body p {
color: var(--text-color);
}

.our-faqs {
position: relative;
padding: 100px 0;
}

.our-faqs::before {
content: '';
position: absolute;
left: 0;
top: 50px;
background: url('../images/section-bg-leaf-1.png');
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
width: 194px;
height: 224px;
transition: all 0.5s ease-in-out;
animation: leafimg-4 3s infinite alternate;
z-index: 0;
}

.our-faqs::after {
content: '';
position: absolute;
right: 0;
bottom: 50px;
background: url('../images/section-bg-leaf-5.png');
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
width: 223px;
height: 153px;
transition: all 0.5s ease-in-out;
animation: leafimg-2 3s infinite alternate;
z-index: 0;
}

.our-faqs-content {
position: sticky;
top: 20px;
margin-right: 30px;
}

.faq-accordion .accordion-item {
border-bottom: 1px solid var(--dark-divider-color);
margin-bottom: 30px;
padding-bottom: 30px;
}

.faq-accordion .accordion-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

.faq-accordion .accordion-header .accordion-button {
font-size: 20px;
font-weight: 400 !important;
line-height: 1.2em;
padding-right: 25px;
transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed) {
padding-bottom: 15px;
font-size: 22px;
color: #20A920 !important;
font-weight: 600 !important;
}

.faq-accordion .accordion-item .accordion-button svg,
.faq-accordion .accordion-item .accordion-button.collapsed svg {
content: '';
position: absolute;
right: 0;
top: 14px;
transform: translateY(-50%) rotate(-45deg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 26px;
height: 20px;
transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed) svg {
transform: translateY(-55%) rotate(90deg);
color: #20A920 !important;
}

.faq-accordion .accordion-item .accordion-body {
padding-right: 25px;
}

.faq-accordion .accordion-item:last-child .accordion-body {
padding-bottom: 0;
}

.faq-accordion .accordion-item .accordion-body p {
margin-bottom: 15px;
color: #4C4C4C !important;
font-size: 16px !important;
font-family: 'Open Sans', sans-serif;
line-height: 35px;
}

.faq-accordion .accordion-item .accordion-body p:last-child {
margin-bottom: 0;
}

.page-faqs {
padding: 100px 0 0;
}

.page-faqs .page-faq-accordion {
margin-bottom: 60px;
}

.page-faqs .page-faq-accordion:last-child {
margin-bottom: 0px;
}

.faq-and-custom-section {
margin-top: 100px;
}

.page-catagery-list ul li a.active-faq-nav-item {
color: var(--white-color);
position: relative;
}

.page-catagery-list ul li a.active-faq-nav-item::after {
height: 100%;
/* or any value you use for the highlight */
background: var(--green);
}

.page-catagery-list ul li a.active-faq-nav-item svg {
transform: translateY(-50%) rotate(0deg) !important;
}

.faq-image-global{
height:260px !important;
width:400px !important;
margin-top:20px;
margin-bottom:50px;
border-radius:20px;
}

.faq-image-global img{
width:100% !important;
height:100% !important;
object-fit:cover;
border-radius:20px;
}

@media only screen and (max-width: 1024px) {
.faq-image-global {
width:94% !important;
}
}

@media only screen and (max-width: 651px) {
    #faq-banner {
        padding-top: 300px;
    }
}

@media only screen and (max-width: 767px) {
.page-faqs .center{
max-width: fit-content !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: left !important;
}
}