.faq-block-one {
    background-color: var(--theme-color-black);
    position: relative;
	padding: 25px 30px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 20px;
	line-height: 1;
	position: relative;
	z-index: 9;

    &::before {
        display: none;
    }

	@include media-breakpoint-down (lg){
		padding: 20px 26px;
	}

	@include media-breakpoint-down (sm){
		padding: 18px 24px;
	}

    @include transition(all 400ms ease);
    .content-box{
        display: none;
        &.show{
            display: block;
        }
    }

    .title-box {
        align-items: center;
        background-color: transparent;
        box-shadow: none;
        display: flex;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 0;
        position: relative;
        width: 100%;
        @include transition(all 400ms ease);
        span {
            display: block;
        }
        .content {
            align-items: center;
            display: flex;
            gap: 30px;
            .title {
                color: #fff;
                margin-bottom: 0;
				font-size: 19px;
				font-weight: 500;

				@include media-breakpoint-down (xxl){
					font-size: 17px;
				}

				@include media-breakpoint-down (sm){
					font-size: 15px;
				}
            }
        }
        .icon {
			max-width: 34px;
			width: 100%;
			height: 34px;
			line-height: 34px;
			text-align: center;
			border-radius: 50%;
			background-color: var(--theme-color3);

            i{
                color: #fff;
                font-size: 12px;
                font-weight: 600;
                @include transition(all 400ms ease);
            }
        }
        &::after{
            display: none;
        }
        &:hover{
            cursor: pointer;
        }
    }

    .inner {
        margin-top: 28px;

		@include media-breakpoint-down (md){
			margin-top: 20px;
		}

        .text {
            max-width: 562px;
           font-size: 16px;
		   font-weight: 400;
		   color: #fff;
		   letter-spacing: -0.02em;
		   line-height: 162%;

		    @include media-breakpoint-down (md){
			font-size: 13px;
		   }
        }
    }

    &.active{
        .title-box{
            .content{
                .count{
                    border-right: 1px solid var(--text-color);
                }
            }
        }
        .title,
        .icon i,
        .count{
            color: #fff;
        }
        .icon{
			background-color: var(--theme-color1);
			a
            i{
                transform: rotate(45deg);
            }
        }
    }
    &:not(:last-child) {
        margin-bottom: 10px;
    }

    &.new-style-add {
        max-width: 716px;
        margin-left: auto;

        .inner {
            .text {
                color: var(--text-color);
                max-width: 590px;
            }
        }
    }

    &.style-new-2 {
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.1);
        max-width: 816px;

        .inner {
            .text {
                color: rgba(255, 255, 255, 0.6);
                max-width: 690px;
            }
        }

        .title-box {
      
        .content {
           
            .title {
                color: #fff;
            }
        }
        .icon {
			background-color: transparent;
            width: initial;
            height: initial;
            line-height: initial;

            i{
                color: #fff;
                font-size: 12px;
                font-weight: 600;
                @include transition(all 400ms ease);
            }
        }
        &::after{
            display: none;
        }
        &:hover{
            cursor: pointer;
        }
         }

         &.active {
            .title-box {
                .content {
                    .title {
                        color: var(--theme-color1);
                    }
                }
            }
         }
    }
}

.faq-section {
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);

	.faq-light-shape {
		position: absolute;
		top: -55%;
		left: 0;

		@include media-breakpoint-down (xxxl){
			display: none;
		}
	}

	.faq-shape {
		position: absolute;
		top: -20%;
		left: 0;
		z-index: 99;
		
		@include media-breakpoint-down (xxxl){
			display: none;
		}
	}
}

.faq-inner-2 {
    border-radius: 40px;
    margin: 0 60px;
    position: relative;
    z-index: 9;
    border: 1px solid rgba(255, 255, 255, 0.14);

    @include media-breakpoint-down (xxxl){
        margin: 0 35px;
    }

    @include media-breakpoint-down (xxl){
        margin: 0 28px;
    }

     @include media-breakpoint-down (xl){
        margin: 0 20px;
    }

     @include media-breakpoint-down (xxs){
        margin: 0 16px;
    }
}


.faq-block-two {
    background-color: var(--theme-color-black);
    position: relative;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 20px;
	line-height: 1;
	position: relative;
	z-index: 99;


    @include transition(all 400ms ease);
    .content-box{
        display: none;
        &.show{
            display: block;
        }
    }
    .title-box {
        align-items: center;
        background-color: transparent;
        box-shadow: none;
        display: flex;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 0;
        position: relative;
        border-radius: 20px;
        width: 100%;
        padding-right: 30px;

         @include media-breakpoint-down (sm){
           padding-right: 15px;
        }

        @include transition(all 400ms ease);
        span {
            display: block;
        }
        .content {
            align-items: center;
            display: flex;
            gap: 30px;
            padding: 0 25px;

            @include media-breakpoint-down (sm){
                gap: 12px;
            }

            @media screen and (max-width: 380px) {
                padding: 0 15px;
            }

            .number {
                color: #fff;
                margin-bottom: 0;
				font-size: 20px;
				font-weight: 500;

                @include media-breakpoint-down (xxl){
					font-size: 17px;
				}

				@include media-breakpoint-down (sm){
					font-size: 15px;
				}

                 @media screen and (max-width: 380px) {
                    font-size: 13px;
                }
            }

            .line {
                width: 1px;
                height: 72px;
                background-color: rgba(255, 255, 255, 0.14);
                display: inline-block;

                @media screen and (max-width: 380px) {
                    height: 90px;
                }
            }

            .title {
                color: #fff;
                margin-bottom: 0;
				font-weight: 500;

				@include media-breakpoint-down (xxl){
					font-size: 17px;
				}

				@include media-breakpoint-down (sm){
					font-size: 15px;
				}

                @media screen and (max-width: 380px) {
                    font-size: 13px;
                }
            }
        }
        .icon {
		
            i{
                color: var(--theme-color1);
                font-size: 16px;
                font-weight: 600;
                @include transition(all 400ms ease);
            }
        }
        &::after{
            display: none;
        }
        &:hover{
            cursor: pointer;
        }
    }
    .inner {
        padding: 35px 100px;

        @include media-breakpoint-down (xl){
            padding: 30px;
        }

        @media screen and (max-width: 380px) {
            padding: 18px;
        }

        .text {
            max-width: 765px;
           font-size: 16px;
		   font-weight: 400;
		   color: var(--text-color);
		   line-height: 170%;

           @media screen and (max-width: 380px) {
                font-size: 14px;
            }
        }
    }
    &.active{
        .title-box{
            background-color: var(--theme-color1);
        }
        .title,
        .icon i,
        .count{
            color: #fff;
        }
        .icon{
			background-color: var(--theme-color1);
			a
            i{
                transform: rotate(45deg);
            }
        }
    }
    &:not(:last-child) {
        margin-bottom: 20px;
    }
}

.faq-section-2 {
    position: relative;

    .faq-light {
        position: absolute;
        top: -60%;
        left: 0;

        @include media-breakpoint-down (xl){
            display: none;
        }
    }

    .faq-vec {
        position: absolute;
        top: -15%;
        left: 15px;
        z-index: 11;

        @include media-breakpoint-down (xxl){
            display: none;
        }
    }

    .faq-light2 {
        position: absolute;
        bottom: -40%;
        right: 0;

        @include media-breakpoint-down (xl){
            display: none;
        }
    }

    .faq-vec2 {
        position: absolute;
        bottom: -15%;
        right: 30px;
        z-index: 11;

        @include media-breakpoint-down (xxl){
            display: none;
        }
    }
}

.faq-inner-items {
    background: #000000;
    border-radius: 30px;
    padding: 20px;

    .content {
        padding: 40px;
        background: rgba(244, 244, 244, 0.05);
        border-radius: 30px;

        @include media-breakpoint-down (xl){
            padding: 28px;
        }

        .title {
            font-size: 30px;
            font-weight: 500;
            color: var(--theme-color1);
            margin-bottom: 10px;

            @include media-breakpoint-down (md){
                font-size: 22px;
            }
        }

        .text {
            color: rgba(255, 255, 255, .60);

            @include media-breakpoint-down (md){
                font-size: 14px;
            }
        }

        .icon-box {
            display: flex;
            gap: 20px;
            background-color: var(--theme-color-black);
            border-radius: 30px;
            padding: 38px 30px;
            margin-top: 30px;

            @include media-breakpoint-down (xxl){
                padding: 28px;
                flex-wrap: wrap;
            }

            .icon {
                border-radius: 50%;
                width: 50px;
                height: 50px;
                line-height: 50px;
                background-color: var(--theme-color1);
                text-align: center;
                color: var(--theme-color-white);
            }

            .icon-content {
                .icon-title {
                    font-weight: 600;
                    margin-bottom: 5px;
                }

                .text-2 {
                    max-width: 270px;
                }
            }
        }
    }
}

.faq-section-3 {
    position: relative;
    z-index: 1;

    .faq-light {
        position: absolute;
        top: -15%;
        left: 25%;
        z-index: -1;

        @include media-breakpoint-down (xl){
            display: none;
        }
    }

    .sec-title {
        margin-bottom: 60px;

        @include media-breakpoint-down (xl){
           margin-bottom: 30px;
        }
    }
}

.faq-section-4 {
    .sec-title {
        margin-bottom: 60px;

        @include media-breakpoint-down (md){
            margin-bottom: 30px;
        }
    }
}

.faqs-block-crm {
	overflow: hidden;
	position: relative;
	border-radius: 40px;
	z-index: 1;
	padding: 50px 40px 58px;
	padding-top: 60px;
	border: 1px solid rgba(255, 255, 255, 0.102);
	background: linear-gradient(112.57deg, rgba(255, 107, 30, 0.3) 22.93%, rgba(17, 16, 15, 0) 87.49%);
	text-align: center;
    
    .text {
        color: var(--text-color);
        margin-bottom: 40px;
    } 

	.item-shadow {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: -1;
	}
}