/* --------------------banner------------------------- */

#banner {
    background-color: var(--secondary-color);
    text-align: center;
    padding-bottom: 160px;
}

#banner .banner-content {
    max-width: 810px;
    margin: 0 auto;
}

#banner .banner-content h1 {
    margin-bottom: 10px;
}

#banner .banner-content .banner-txt {
    padding: 0 40px;
}

.banner-btn-col {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* --------------------counter section------------------------- */

.why-us-counter {
    margin-top: -120px;
}

.why-us-counter .counter-wrapper {
    max-width: 1060px;
    margin: auto;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px -1px 30px 0px rgba(0, 0, 0, 0.07);
    padding: 30px 20px;
}

.why-us-counter .counter-col {
    text-align: center;
    background-color: white;
    margin: 0 5px;
    border-radius: 8px;
    border: 1px solid #383b3e24;
}

.why-us-counter .count-heading {
    background-color: var(--third-color);
    border-radius: 8px 8px 0px 0px;
    padding: 5px;
    width: 100%;
    /* outline: 1px solid var(--third-color); */
}

.why-us-counter .count-txt {
    padding: 5px 18px;
    width: 100%;
}

.why-us-counter .counter-col .h2 {
    margin: 0;
}

.why-us-counter .trustpilot-col {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin: 0;
    margin-top: 30px;
}

.why-us-counter .trustpilot-col img {
    max-width: 118px;
}

.why-us-counter .trustpilot-col p {
    font-size: 14px;
    font-weight: 500;
}




/* --------------------free stuff------------------------- */


.free-stuff-txt {
    text-align: center;
    padding: 45px;
    border-radius: 15px;
    background: #FFF;
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.04);
    max-width: 900px;
    margin: 0 auto;
}

.free-stuff-txt h2 {
    margin-bottom: 10px;
}

.free-stuff-btn {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}


/* --------------------who can use------------------------- */

.who-can-use {
    background: linear-gradient(180deg, #fff 31%, var(--secondary-color) 31%);
}

.who-can-use .who-use-col {
    flex: 0 0 20%;
    padding: 0 12px;
}

.who-can-use .who-use-col img {
    width: 100%;
    border-radius: 15px;
}

.who-can-use .who-use-col .h4 {
    text-align: center;
    margin-top: 14px;
    color: #000;
}

.who-use-list {
    margin-top: 30px;
}

.who-use-list-col {
    border-radius: 15px;
    border: 1px solid rgba(56, 59, 62, 0.08);
    background: #FFF;
    padding: 24px;
    margin: 12px 0;
    transition: .5s;
    height: calc(100% - 24px);
}

.who-use-list-col .h4 {
    margin-bottom: 10px;
    transition: .5s;
}

.who-use-list-col p {
    transition: .5s;
}

.who-use-list-col:hover {
    background: var(--third-color);
    transition: .5s;
}

/* .who-use-list-col:hover .h4,
.who-use-list-col:hover p {
    color: white;
    transition: .5s;
} */
/* ----------- new section css -------------- */
.growth-wrapper{
    border-radius: 15px;
    background: var(--grey-color);
    padding: 24px;
    margin: 12px 0;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.13);
    transition: .5s;
    height: calc(100% - 24px);
}

.growth-wrapper:hover{
    background-color: var(--third-color);
}

.growth h2{
    text-align: center; 
}

.growth .growth-wrapper img {
    display: block;
    width: 80px;
    height: 61px;
    margin: 0 auto;
    object-fit: contain;
}

.growth .growth-wrapper .h4{
    text-align: center;
    margin: 10px 0px;
}

.growth .growth-wrapper p{
    text-align: center; 
}




/* --------------------tablet responsive------------------------- */

@media(max-width:992px) {


    /* counter section */

    .why-us-counter .counter-col {
        margin: 10px 5px;
    }

    /* who can use */

    .who-can-use {
        background: linear-gradient(180deg, #fff 24%, var(--secondary-color) 23%);
    }

    .who-can-use .who-use-col {
        flex: 0 0 33.3333%;
        padding: 0 12px;
    }


}

/* --------------------mobile responsive------------------------- */

@media(max-width:767px) {

    /* banner */

    #banner .banner-content .banner-txt {
        padding: 0;
    }

    .banner-btn-col {
        flex-direction: column;
        align-items: center;
    }

    .banner-btn-col .btn {
        width: 100%;
        max-width: 280px;
    }

    /* counter section */

    .why-us-counter .col-2 {
        padding-left: 8px;
        padding-right: 8px;
    }

    .why-us-counter .counter-wrapper {
        padding: 20px 8px;
    }

    .why-us-counter .counter-col {
        margin: 4px 0px;
        /* border: none; */
    }

    .why-us-counter .count-txt {
        padding: 7px 10px;
    }

    .why-us-counter .count-txt p {
        font-size: 12px;
        line-height: 16px;
    }

    .why-us-counter .trustpilot-col {
        gap: 14px;
        margin-top: 20px;
    }

    .why-us-counter .trustpilot-col p {
        font-size: 13px;
    }

    /* free stuff */

    .free-stuff-txt {
        padding: 40px 10px;
    }

    .free-stuff-btn {
        gap: 10px;
        flex-wrap: wrap;
    }

    /* who can use */

    .who-can-use {
        background: linear-gradient(180deg, #fff 16%, var(--secondary-color) 16%);
    }

    .who-can-use .who-use-col {
        flex: 0 0 100%;
        padding: 0 12px;
    }

    .who-can-use .slider-wrapper {
        width: 76%;
        margin: 0 auto;
    }

    .who-use-slider .splide__track {
        width: 76%;
        margin: 0 auto;
    }

    .who-can-use .who-use-col img {
        height: auto;
    }


}

/* free stuff */

@media(max-width:408px) {

    .free-stuff-btn .btn {
        width: 80%;
    }
}