:root {
    --header-top: 70px;
    --header-height: 218px;
}

/*!*----- Hero Section Start -----*!*/

.service-channel-hero-content {
    max-width: 1004px;
    margin: 0 auto;
}

.service-channel-hero-content .section-title-before {
    display: inline-block;
    text-transform: uppercase;
    color: #F9452D;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 20%;
    margin-bottom: 30px;
}

/* Typography Overrides */
.hero-title {
    font-weight: 400;
    font-size: 64px;
    line-height: 74px;
    letter-spacing: -1.5px;
    color: var(--white);
    margin-bottom: 16px;
}

.hero-desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #B6B6B6;
    margin-bottom: 32px;
    padding: 0 36px;
}

/* Tags Section */
.hero-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
}

.hero-tag {
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-tag::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: var(--primary); /* Red dot */
    border-radius: 50%;
}

/* Stats Section Layout */
.hero-stats-container {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: center;
    margin-top: 70px;
    padding: 0 82px;
}

.stat-box.middle {
    border-left: 1px solid #323232;
    border-right: 1px solid #323232;
    border-top: none;
    border-bottom: none;
}

.stat-box {
    flex: 1;
    padding: 8px 50px;
    text-align: center;
}

.stat-number {
    color: var(--white);
    font-weight: 500;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: -0.75px;
    margin-bottom: 8px;
}

.stat-desc {
    color: #B6B6B6;
    font-size: 14px;
    line-height: 20px;
}

/*!*----- Hero Section End -----*!*/





/*perks benefits start*/
.grid-section-padding {
    padding: 150px 0 100px 0;
}
.section-common-header .heading {
    font-weight: 400;
    font-size: 48px;
    line-height: 67px;
    letter-spacing: -1.5px;
    color: #000000;
}

.section-common-header .paragraph {
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0;
    color: #6D6D6D;
}

/*for black section */

.section-common-header.black-header .heading {
    color: #FFFFFF;
}

.section-common-header.black-header .paragraph {
    color: #B6B6B6;
}

.section-common-header .offset-5-end {
    grid-column-start: 8;
    grid-column-end: 13;
}

.grid-item .section-title-before {
    display: inline-block;
    text-transform: uppercase;
    color: #F9452D;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 20%;
}

/*grid section*/

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 60px;
}
.grid-item {
    padding: 50px 30px 30px 30px;
}
.grid-item .heading {
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: normal;
    color: #000000;
    margin-bottom: 6px;
}
.grid-item .paragraph {
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0;
    color: #6D6D6D;
}
.grid-item .icon {
    margin-bottom: 50px;
}
.grid-item:nth-child(1) {
    border-right: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4;
    padding-left: 0;
}
.grid-item:nth-child(2) {
    border-right: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4;
}
.grid-item:nth-child(3) {

    border-bottom: 1px solid #E4E4E4;
}
.grid-item:nth-child(4) {
    border-right: 1px solid #E4E4E4;
    padding-left: 0;
}
.grid-item:nth-child(5) {
    border-right: 1px solid #E4E4E4;
}

/*perks benefits end*/



/* brickclay enterprise section start */

.cards-main-heading {
    padding: 50px 0 65px 0;
    position: sticky;
    top: var(--header-top);
    background-color: white;
    z-index: 85;
    border-radius: 5px;
}

.enterprice-content-wrapper{
    padding: 35px 0;
    border-top: 1px solid #E4E4E4;
}

.enterprice-content-wrapper .subtitle {
        display: inline-block;
        text-transform: uppercase;
        color: #F9452D;
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 14px;
        line-height: 22.4px;
        letter-spacing: 20%;
}

.enterprice-content-wrapper .heading{
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
}

.enterprice-content-wrapper .points {
    padding-left: 15px;
}

.enterprice-content-wrapper .points li{
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #6D6D6D;
    margin-bottom: 3px;
}

.points li::marker {
    color: #F9452D;
}
/* brickclay enterprise section end */










/* black cards section start  */
.how-it-work-grid {
    gap: 0;
    margin-top: 100px;
}
.how-it-work-card{
    padding: 24px 32px;
    border-left: 1px solid #323232;
    height: 100%;
}
.how-it-work-card .index{
    font-weight: 400;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: -0.75px;
    color: #FFFFFF;
    margin-bottom: 90px;
    position: relative;
    display: inline-block;
}
.index::after {
    content: ".";
    color: #F9452D;
}
.how-it-work-card .heading{
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: normal;
    color: #FFFFFF;
    margin-bottom: 8px;
}
.how-it-work-card .paragraph{
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0;
    color: #B6B6B6;
    position: relative;
}
/* black cards section end  */



/* Rare partner FAQ section start */
.rare-partner-section{
    padding-top: 22px;
}
.rare-partner-section .heading{
    font-weight: 400;
    font-size: 48px;
    line-height: 67px;
    margin-bottom: 16px;
    letter-spacing: -1.5px;
    color: #ffff;
}
.rare-partner-section .paragraph{
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 24px;
    color: #B6B6B6;
}
.button-orange:hover {
    background: #FFFFFF;
    color: #000000;
}
.blackFaq-accordion .faq-item{
    border-color: #323232;
}
.blackFaq-accordion .question-text {
    color: #FFFFFF;
}
.blackFaq-accordion .faq-answer p{
    color: #B6B6B6;
}
/* Rare partner FAQ section end */

/*case study section custom padding start*/
.case-study-padding {
    padding: 50px 0;
}
/*case study section custom padding end*/




@media (max-width: 1024px) {

    /*!*----- Hero Section Start -----*!*/

    .service-channel-hero-content {
        max-width: 100%;
    }

    .content-except-hero-stats {
        padding: 0 100px;
    }

    .service-channel-hero-content .section-title-before {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 16px;
    }

    /* Typography Overrides */
    .hero-title {
        font-size: 40px;
        line-height: 53px;
    }

    .hero-desc {
        font-size: 16px;
        margin-bottom: 24px;
        padding: 0;
    }

    /* Tags Section */
    .hero-tags {
        gap: 10px;
        margin-bottom: 24px;
    }

    .hero-tag {
        font-size: 12px;
    }

    /* Stats Section Layout */
    .hero-stats-container {
        margin-top: 24px;
        padding: 0;
    }

    .stat-box {
        padding: 8px 20px;
    }

    .stat-number {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: normal;
    }

    /*!*----- Hero Section End -----*!*/


    /*perks benefits start*/
    .grid-section-padding {
        padding: 80px 0 40px 0;
    }
    .grid-item .section-title-before {
        font-size: 14px;
        line-height: 20px;
    }
    .section-common-header .heading {
        font-size: 34px;
        line-height: 44px;
        letter-spacing: -0.65px;
        margin-bottom: 10px;
    }
    .section-common-header .paragraph {
        font-size: 16px;
    }
    .section-common-header .offset-5-end {
        grid-column-start: 1;
    }
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 15px;
    }
    .grid-item .heading {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 7px;
    }
    .grid-item .icon {
        margin-bottom: 60px;
    }
    .grid-item:nth-child(1) {
        border-right: 1px solid #E4E4E4;
        border-bottom: 1px solid #E4E4E4;
    }
    .grid-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #E4E4E4;
    }
    .grid-item:nth-child(3) {
        border-right: 1px solid #E4E4E4;
        border-bottom: 1px solid #E4E4E4;
        padding-left: 0;
    }
    .grid-item:nth-child(4) {
        border-right: 0;
        padding-left: 30px;
        border-bottom: 1px solid #E4E4E4;
    }
    .grid-item:nth-child(5) {
        border-right: 1px solid #E4E4E4;
        padding-left: 0;
    }
    /*perks benefits end*/


    /* brickclay enterprise section start */
    .cards-main-heading {
        padding: 40px 0;
        top: 53px;
    }

    .enterprice-content-wrapper{
        padding: 0 0 20px 0;
        border-top: transparent;
        border-bottom: 1px solid #E4E4E4;
        margin-bottom: 20px;
    }
    .enterprice-content-wrapper:last-child{
        margin-bottom: 0;
        border-bottom: transparent;

    }
    .enterprice-content-wrapper .heading{
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 12px;
    }
    .enterprice-content-wrapper .points{
        margin-bottom: 6px;
    }
    .enterprice-content-wrapper .points li{
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 8px;
    }
    /* brickclay enterprise section end */





    /* black cards section start  */

    /* black cards section start  */
    .how-it-work-grid {
    margin-top: 30px;
    }
    .how-it-work-card{
        padding: 40px 0;
        border-left: 0;
        border-bottom: 1px solid #323232;
    }
    .how-it-work-card .index{
        margin-bottom: 63px;
    }
    .how-it-work-card .heading{
        font-size: 18px;
        line-height: 25px;
        letter-spacing: -0.18px;
    }
    /* black cards section end  */

    /* black cards section end  */

    /* Rare partner FAQ section start */
    .rare-partner-section{
        padding-top: 0;
        padding-bottom: 30px;
    }
    .rare-partner-section .heading{
        font-size: 34px;
        line-height: 44px;
        margin-bottom: 10px;
        letter-spacing: -0.65px;
    }
    .rare-partner-section .paragraph{
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 24px;
        padding-right: 0;
    }
    /* Rare partner FAQ section end */

    /*case study section custom padding start*/
    .case-study-padding {
        padding: 0;
    }
    /*case study section custom padding end*/

}


@media (max-width: 767.98px) {

    /*!*----- Hero Section Start -----*!*/

    .content-except-hero-stats {
        padding: 0;
    }

    /* Typography Overrides */
    .hero-title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.56px;
        margin-bottom: 10px;
    }

    .hero-desc {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 16px;
    }

    /* Tags Section */
    .hero-tags {
        display: none;
    }

    /* Stats Section Layout */
    .hero-stats-container {
        /*display: flex;*/
        flex-direction: column; /* Horizontal layout */
        /*align-items: center;*/
        margin-top: 0;
    }

    .stat-box.middle {
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #323232;
        border-bottom: 1px solid #323232;
    }

    .stat-box {
        width: 100%;
        padding: 8px 0 20px 0;
    }

    .stat-number {
        font-size: 20px;
        line-height: 26px;
        letter-spacing: normal;
    }

    .stat-desc {
        font-size: 12px;
        line-height: normal;
    }

    /*!*----- Hero Section End -----*!*/

    /*perks benefits start*/
    .grid-section-padding {
        padding: 50px 0 10px 0;
    }

    .grid-item .section-title-before {
        margin-bottom: 20px;
    }
    .section-common-header .heading {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.56px;
    }
    .section-common-header .paragraph {
        font-size: 14px;
        line-height: 20px;
    }
    .grid-container {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 0;
    }
    .grid-item {
        padding: 20px 0;
    }
    .grid-item .heading {
        font-size: 16px;
        line-height: 22px;
    }
    .grid-item .paragraph {
        font-size: 14px;
        line-height: 20px;
    }
    .grid-item .icon {
        margin-bottom: 30px;
        width: 24px;
        height: 24px;
    }
    .grid-item:nth-child(1) {
        border-right: 0;
        border-bottom: 1px solid #E4E4E4;
    }
    .grid-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #E4E4E4;
    }
    .grid-item:nth-child(3) {
        border-right: 0;

        border-bottom: 1px solid #E4E4E4;
    }
    .grid-item:nth-child(4) {
        border-right: 0;
        padding-left: 0;
        border-bottom: 1px solid #E4E4E4;
    }
    .grid-item:nth-child(5) {
        border-bottom: 1px solid #E4E4E4;
        border-right: 0;
    }

    /*perks benefits end*/


    /* black cards section start  */
    .how-it-work-card{
        padding: 32px 0;
    }
    .how-it-work-card .index{
        font-size: 20px;
        line-height: 26px;
    }
    .how-it-work-card .heading{
        font-size: 16px;
        line-height: 22px;
        letter-spacing: normal;
    }
    .how-it-work-card .paragraph{
        font-size: 14px;
        line-height: 20px;
    }
    /* black cards section end  */


    /* Rare partner FAQ section start */
    .rare-partner-section .heading{
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 16px;
        letter-spacing: -0.56px;
    }
    .rare-partner-section .paragraph{
        font-size: 14px;
        line-height: 20px;
    }
    /* Rare partner FAQ section end */
}







/* nimra working start  */
.channel-integration-wrapper{
    margin-top: 60px;
    margin-bottom: 30px;
}
.advantage-wrapper{
    background-color: #F5F5F5;
    padding:24px 32px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 2px solid #F9452D;
    height: 100%;
}
.advantage-wrapper .heading{
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #1A1A1A;
    margin-bottom: 8px;
}
.advantage-wrapper .paragraph{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6D6D6D;
    margin-bottom: 8px;
}
/* channel-integration card css start  */
.service-channel-cards{
    margin-bottom: 30px;
}
.service-channel-cards .card-wrapper{
    border: 1px solid #E4E4E4;
    border-radius: 8px;
    padding: 32px 40px 32px 32px;
    height: 100%;
}
.service-channel-cards .icon{
    width: 26px;
    height: 26px;
    margin-bottom: 40px;
}
.service-channel-cards .text{
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #F9452D;
    margin-bottom: 16px;
    display: block;
    text-transform: uppercase;
}
.service-channel-cards .heading{
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
    margin-bottom: 8px;
}
.service-channel-cards .paragraph{
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #6D6D6D;
    margin-bottom: 50px;
}
.service-channel-cards .list-wrapper{
    margin-bottom: 25px;
}
.service-channel-cards .list{
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #6D6D6D;
    margin-bottom: 12px;
    padding-right: 20px;
    list-style-type: none;
    position: relative;
    padding-left: 26px; /* space for icon */
}
.service-channel-cards .list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background-image: url("https://www.brickclay.com/wp-content/themes/brickclay-new/assets/images/pages/uiux-design-new/list-check.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.service-channel-cards .list:last-child{
    margin-bottom: 0px;
}
.service-channel-cards .note{
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    color: #6D6D6D;
    padding-right: 10px;
}
/* channel-integration card css start  */

/* brickclay-fits start  */
.brickclay-fits-wrapper{
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 40px;
}
.brickclay-fits-cotent .text{
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #F9452D;
    margin-bottom: 16px;
    display: block;
    text-transform: uppercase;
}
.brickclay-fits-cotent .heading{
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
    margin-bottom: 8px;
}
.brickclay-fits-cotent .paragraph{
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #6D6D6D;
}
.brickclay-fits-list .list{
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #6D6D6D;
    margin-bottom: 12px;
    list-style-type: none;
    position: relative;
    padding-left: 26px; /* space for icon */
}
.brickclay-fits-list .list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background-image: url("https://www.brickclay.com/wp-content/themes/brickclay-new/assets/images/pages/uiux-design-new/list-check.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.brickclay-fits-list .list:last-child{
    margin-bottom: 0px;
}
/* brickclay-fits end  */



@media (max-width: 1024px) {
    .channel-integration-wrapper {
        margin-top: 30px;
    }
    .channel-integration-wrapper .row{
        display: grid;
    }
    .advantage-wrapper{
        padding: 16px 24px;
    }
    .advantage-wrapper .heading{
        font-size: 12px;
        line-height: normal;
        margin-bottom: 6px;
    }
    .advantage-wrapper .paragraph{
        font-size: 12px;
        line-height: normal;
    }
    .channel-integration-wrapper{
        margin-bottom: 20px;
    }


    /* channel-integration card css start  */
    .service-channel-cards .row{
        display: grid;
    }
    .service-channel-cards .card-wrapper{
        padding: 24px;
    }
    .service-channel-cards .icon{
        width: 22px;
        height: 22px;
        margin-bottom: 30px;
    }
    .service-channel-cards .text{
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 10px;
    }
    .service-channel-cards .heading{
        font-size: 18px;
        line-height: 25px;
        letter-spacing: -0.18px;
    }
    .service-channel-cards .paragraph{
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 16px;
    }
    .service-channel-cards .list-wrapper{
        margin-bottom: 16px;
    }
    .service-channel-cards .list{
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 8px;
        padding-right: 0;
    }
    .service-channel-cards .list::before {
        width: 12px;
        height: 12px;
    }
    .service-channel-cards .list:last-child{
        margin-bottom: 0px;
    }
    .service-channel-cards .note{
        font-size: 14px;
        line-height: 20px;
        padding-right: 0;
    }
    /* channel-integration card css start  */


    /* brickclay-fits start  */
    .brickclay-fits-wrapper{
        padding: 24px;
    }
    .brickclay-fits-cotent .text{
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 10px;/
    }
    .brickclay-fits-cotent .heading{
        font-size: 18px;
        line-height: 25px;
        letter-spacing: -0.18px;
    }
    .brickclay-fits-cotent .paragraph{
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 16px;
    }
    .brickclay-fits-list{
        max-width: 250px;
    }
    .brickclay-fits-list .list{
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 8px;
    }
    .brickclay-fits-list .list::before {
        width: 12px;
        height: 12px;
    }
    /* brickclay-fits end  */


}

@media (max-width: 767.98px) {

    .service-channel-cards .row{
        column-gap: 0;
    }

    .channel-integration-wrapper .row{
        column-gap: 0;
    }
    /* channel-integration card css start  */
    .service-channel-cards .list{
        padding-left: 20px;
    }
    .service-channel-cards .list::before {
        top: 5px;
    }
    /* channel-integration card css start  */

    /* brickclay-fits start  */
    .brickclay-fits-cotent .paragraph{
        font-size: 14px;
        line-height: 20px;
    }
    .brickclay-fits-list .list{
        margin-bottom: 16px;
    }
    .brickclay-fits-list .list::before {
        top: 5px;
        width: 12px;
        height: 12px;
    }
    /* brickclay-fits end  */
}