/* .case-study-banner {
    background-image: url(../assets/img/customerStories/BackgroundFrame.png);
} */

.inner-banner.case-study-banner.theme-bg.Benetton {
    background-image: url(../assets/img/customerStories/Benetton/benetton.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.aquarelle {
    background-image: url(../assets/img/customerStories/Aquarelle/Aquarelle-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.bhartiya {
    background-image: url(../assets/img/customerStories/Bhartiya/bhartiya-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.clarev {
    background-image: url(../assets/img/customerStories/ClareV/clarev-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.compressport {
    background-image: url(../assets/img/customerStories/Compressport/compressport-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.consuela {
    background-image: url(../assets/img/customerStories/Consuela/consuela-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.crossline {
    background-image: url(../assets/img/customerStories/Crossline/crossline-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.dck {
    background-image: url(../assets/img/customerStories/DCK/dck-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.eam {
    background-image: url(../assets/img/customerStories/EAMMaliban/eam-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.ELK {
    background-image: url(../assets/img/customerStories/ELK/ELK-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.feetures {
    background-image: url(../assets/img/customerStories/Feetures/feetures-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.forevernew {
    background-image: url(../assets/img/customerStories/ForeverNew/forevernew-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.gorjana {
    background-image: url(../assets/img/customerStories/Gorjana/gorjana-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.Nine_Co {
    background-image: url(../assets/img/customerStories/Nineandco/nineco-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.NewWorld {
    background-image: url(../assets/img/customerStories/NewWorldFashion/Newworld-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.oakfort {
    background-image: url(../assets/img/customerStories/OakFort/oakfort-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.oka {
    background-image: url(../assets/img/customerStories/OKA/oka-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.ppj {
    background-image: url(../assets/img/customerStories/PPJ/ppj-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.prosports {
    background-image: url(../assets/img/customerStories/Prosports/prosports-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.quay {
    background-image: url(../assets/img/customerStories/QUAY/quay-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.rainwear {
    background-image: url(../assets/img/customerStories/Rainwear/rainwear-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.ryu {
    background-image: url(../assets/img/customerStories/RYU/ryu-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.sapl {
    background-image: url(../assets/img/customerStories/SAPL/sapl-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.sarahflint {
    background-image: url(../assets/img/customerStories/SarahFlint/sarahflint-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.sasdudes {
    background-image: url(../assets/img/customerStories/SASDudes/sasdudes-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.shimano {
    background-image: url(../assets/img/customerStories/Shimano/shimano-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.showpo {
    background-image: url(../assets/img/customerStories/Showpo/showpo-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.spell {
    background-image: url(../assets/img/customerStories/Spell/spell-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.synergy {
    background-image: url(../assets/img/customerStories/Synergy/synergy-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.texport {
    background-image: url(../assets/img/customerStories/Texport/texport-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.inner-banner.case-study-banner.theme-bg.vermont {
    background-image: url(../assets/img/customerStories/VermontTeddyBear/vermont-banner.webp);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 690px;
}

.feature-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 2% 0%;
}


.casestudy-title {
    margin-top: 47px;
}

.casestudy-title .button-container {
    margin-top: 30px;
    width: 267px;
}

.casestudy-title .tag {
    margin-bottom: 6px;
}

.casestudy-title h1 {
    color: #0E0E0E;
    font-family: "brandon";
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 62px;
    margin-bottom: 33px;
    /* 124% */
}

.tag {
    display: flex;
    width: 153px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.99);
    color: #0E0E0E;
    text-align: center;
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.button-container {
    width: 285px;
    height: 47px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #00D1CF 0%, #0099C4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #FFF;
}

.button-container a {
    color: #FFF;
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}

.case-study-image {
    text-align: end;
}

.case-study-image img {
    object-fit: cover;
    height: 500px;
    width: 86% !important;
    margin: 0 9%;
    border-radius: 14px;
}

.casestudy-tesimoni {
    border-radius: 16px;
    border: 0.5px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    box-shadow: -9px 57px 16px 0px rgba(0, 209, 207, 0.00), -6px 36px 15px 0px rgba(0, 209, 207, 0.01), -3px 20px 12px 0px rgba(79, 79, 79, 0.03), -1px 9px 9px 0px rgba(79, 79, 79, 0.04), 0px 2px 5px 0px rgba(79, 79, 79, 0.05);
    padding: 36px 38px;
    position: relative;
    padding-bottom: 15px;
}

.casestudy-tesimoni p {
    color: #0E0E0E;
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 209%;
    /* 29.26px */
}

.invertedcomms {
    position: absolute;
    top: 0;
    left: 0;
}

#download-story-desk .container-xl {
    position: relative;
}

.casestudy-tesimoni-div {
    display: flex;
    gap: 3%;
    align-items: center;
}

.casestudy-tesimoni-div .logo {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 177px;
    height: 67px;
    flex-shrink: 0;
    border-radius: 16px 0;
    border: 1px solid rgba(14, 14, 14, 0.10);
    background: #FFF;
    box-shadow: -4px -1px 12.3px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px;
}

.casestudy-tesimoni-div .logo img {
    height: 20px;
    width: 124px;
    object-fit: contain;
    /* filter: invert(1); */
}

.casestudy-tesimoni-div img {
    width: 65px;
    height: 65px;
    object-fit: cover;
}

.casestudy-tesimoni-title h3 {
    color: #0099C4;
    font-family: 'brandon';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 71%;
}

.casestudy-tesimoni-title p {
    color: #242733;
    font-family: "Open Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 138%;
    margin: 0;
    max-width: 207px;
}

.case-study-description h2 {
    color: #242733;
    font-family: 'brandon';
    font-size: 49px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.case-study-description p {
    color: rgba(0, 0, 0, 0.69);
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 209%;
    /* 33.44px */
}

.case-study-description-section {
    margin-top: -40px;
}

.case-study-description-section .row {
    justify-content: space-between;
    align-items: center;
}

.case-study-description-section-left,
.case-study-description-section-right {
    width: 47%;
}

.case-study-description-section-left {
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
    padding-bottom: 10px;
}

.case-study-challenges {
    margin: 6% 0;
}

.case-study-description-section-left::after {
    border-bottom: rgb(255 0 0 / 20%);
    contain: "";
    width: 100%;
    height: 1px;
    display: block;
}

.case-study-challenges h2 {
    color: #242733;
    font-family: "brandon";
    font-size: 49px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 73.5px */
}

.case-study-challenges p {
    color: rgba(0, 0, 0, 0.69);
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 209%;
    /* 33.44px */
}

.case-study-implementing h2 {
    color: #242733;
    font-family: "brandon";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-align: center;
    /* 60px */
}

.card_box_text {
    margin-top: 16px;
}

.card_box_text p {
    color: #333;
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
    /* 24px */
}

.card_box_body {
    display: flex;
    flex-wrap: wrap;
    gap: 0%;
    justify-content: space-around;
}


.card_box_body .cards_box {
    width: 30%;
    border-radius: 8px;
    border: 1px solid #dedede85;
    background: #f6f7f747;
    padding: 17px;
    margin: 14px;
}

.card_box_image {
    padding: 11px 14px 10px 13px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.11);
    background: #FFF;
    height: 50px;
    width: 50px;

}




.case-study-form {
    width: 735px;
    margin: 7% auto;
    border-radius: 16px;
    border-top: 0.5px solid rgb(178 178 178 / 13%);
    background: #FFF;
    box-shadow: -9px 57px 16px 0px rgba(79, 79, 79, 0.00), -6px 36px 15px 0px rgba(79, 79, 79, 0.01), -3px 20px 12px 0px rgba(79, 79, 79, 0.03), -1px 9px 9px 0px rgba(79, 79, 79, 0.04), 0px 2px 5px 0px rgba(79, 79, 79, 0.05);
    padding: 20px;
    padding-top: 30px;
    padding-right: 30px;
}

.form_download_btn {
    width: 100%;
    display: block;
    text-align: center;
}

.form_download_btn button {
    color: #FFF;
    text-align: center;
    font-family: "Open Sans";
    font-size: 13px;
    font-style: normal;
    /* 20.16px */
    border-radius: 8px;
    border: 1px solid rgba(215, 215, 215, 0.60);
    background: linear-gradient(90deg, #0099C4 0%, #00D1CF 100%);
    font-weight: 500;
    width: 100%;
}

.form-control {
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid rgba(215, 215, 215, 0.60);
    height: 44px;
}

.form-control::placeholder {
    color: rgba(138, 138, 138, 0.80);
    font-family: "Open Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding-left: 6px;
    line-height: 144%;
    /* 20.16px */
    /* 21px */
}

.case-study-form-main-div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4%;
}
.logo{
    width: 140px;
}
.logo img {
    width: 100%;
}

.download-story-mob {
    width: 66%;
}

.customer_brand {
    display: block;
    color: rgba(0, 0, 0, 0.70);
    font-family: "Open Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 17px;
}

.downloaddivlogo {
    width: 33%;
    height: 304px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-radius: 19px;
    background: rgba(36, 39, 51, 0.04);
    justify-content: center;
}

.indicationarrow {
    position: absolute;
    top: -26%;
    right: -20%;
}

.indicationarrow img {
    width: 100px;
}

.btn-primary {
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #00D1CF 0%, #0099C4 100%);
    /* box-shadow: 3px 4px 10px 2px rgba(239, 166, 74, .2); */
    padding: 10px 23px;
    border-radius: 5px;
    font-family: "brandon";
    font-size: 18px;
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay)
}

.button--calypso:hover span {
    animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
    color: #02BACE;
    /* background: #fff !important; */
}

@keyframes MoveScaleUpInitial {
    to {
        transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
        opacity: 0;
    }
}

@keyframes MoveScaleUpEnd {
    from {
        transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.button--calypso::before {
    content: "";
    background: #fff;
    width: 120%;
    height: 0;
    padding-bottom: 90%;
    top: -201%;
    left: -10%;
    border-radius: 50%;
    transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
    position: absolute;
}

.button--calypso:hover::before {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--calypso span {
    display: block;
    position: relative;
    color: #fff;
    width: 100%;
    color: #FFF;
    font-family: "Open Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    /* z-index: 10; */
}

.button--calypso::after {
    content: "";
    background: #000;
    transform: translate3d(0, -100%, 0);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--calypso:hover::after {
    transform: translate3d(0, 0, 0);
    transition-duration: 0.05s;
    transition-delay: 0.4s;
    transition-timing-function: linear;
}

.button--calypso {
    overflow: hidden;
    position: relative;
}

.case-study-form .form .button-container {
    padding: 0;
}

.button--calypso:hover span .button-container {
    background: #fff;
    color: #02BACE;
    border: 1px solid #02BACE;
}

.customer-image.desktop {
    display: block;
}

.customer-image.Mobile {
    display: none;
}

@media only screen and (min-width: 1025px) and (max-width: 1390px) {
    .inner-banner.case-study-banner.theme-bg {
        height: 620px;
    }

    /* .casestudy-title {
        padding-right: 43px;
    } */

    .casestudy-title h1 {
        font-size: 46px;
    }

    .button-container {
        width: 100%;
        height: 46px;
        border-radius: 8px;
        /* border: 1px solid rgba(215, 215, 215, 0.60); */
        background: linear-gradient(90deg, #0099C4 0%, #00D1CF 100%);
    }

    .button-container a {
        font-size: 14px;
    }

    .case-study-description h2,
    .case-study-challenges h2 {
        font-size: 46px;
    }

    .case-study-description p,
    .case-study-challenges p {
        font-size: 14px;
    }

    .casestudy-tesimoni p {
        font-size: 11px;
    }

    .casestudy-tesimoni-title p {
        font-size: 10px;
    }

    .casestudy-tesimoni-div .logo {
        width: 111px;
        height: 58px;
    }

    .casestudy-tesimoni-div .logo img {
        width: 76px;
    }

    .container-xl {
        max-width: 1097px;
    }

    .case-study-banner .container-xl {
        max-width: 1140px;
    }

    .card_box_text p {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .case-study-implementing h2 {
        font-size: 37px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1025px) {
    .background_gradient {
        height: 84px;
        position: absolute;
        bottom: -9px;
        background: linear-gradient(0deg, #FFF 43.61%, rgba(255, 255, 255, 0.82) 67.83%, rgba(255, 255, 255, 0.00) 100%);
        width: 100%;
    }
}

@media only screen and (min-width: 541px) and (max-width: 769px) {
    .background_gradient {
        height: 84px;
        position: absolute;
        bottom: -9px;
        background: linear-gradient(0deg, #FFF 43.61%, rgba(255, 255, 255, 0.82) 67.83%, rgba(255, 255, 255, 0.00) 100%);
        width: 100%;
    }

    .inner-banner.case-study-banner.theme-bg {
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), linear-gradient(98deg, #3CBBC9 -20.87%, #EFA64A 103.74%);
    }

}

@media screen and (max-width: 768px) {

    .container-xl {
        padding: 0 21px;
    }

    .hide_for_lg {
        margin-bottom: 0px;
    }

    .customer-image.desktop {
        display: none;
    }

    .customer-image.Mobile {
        display: block;
        margin: 0;
        width: 100% !important;
        height: 480px;
        margin-top: 48px;
        object-fit: cover;
    }

    .feature-flex .col-lg-6:last-child {
        width: 88%;
    }

    .inner-banner.case-study-banner.theme-bg.Benetton {
        background-image: url(../assets/img/customerStories/Benetton/benetton-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.aquarelle {
        background-image: url(../assets/img/customerStories/Aquarelle/Aquarelle-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.bhartiya {
        background-image: url(../assets/img/customerStories/Bhartiya/bhartiya-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.clarev {
        background-image: url(../assets/img/customerStories/ClareV/clarev-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.compressport {
        background-image: url(../assets/img/customerStories/Compressport/compressport-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.consuela {
        background-image: url(../assets/img/customerStories/Consuela/consuela-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.crossline {
        background-image: url(../assets/img/customerStories/Crossline/crossline-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.dck {
        background-image: url(../assets/img/customerStories/DCK/dck-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.eam {
        background-image: url(../assets/img/customerStories/EAMMaliban/eam-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.ELK {
        background-image: url(../assets/img/customerStories/ELK/ELK-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.feetures {
        background-image: url(../assets/img/customerStories/Feetures/feetures-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.forevernew {
        background-image: url(../assets/img/customerStories/ForeverNew/forevernew-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.gorjana {
        background-image: url(../assets/img/customerStories/Gorjana/gorjana-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.Nine_Co {
        background-image: url(../assets/img/customerStories/Nineandco/nineco-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.NewWorld {
        background-image: url(../assets/img/customerStories/NewWorldFashion/Newworld-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.oakfort {
        background-image: url(../assets/img/customerStories/OakFort/oakfort-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.oka {
        background-image: url(../assets/img/customerStories/OKA/oka-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.ppj {
        background-image: url(../assets/img/customerStories/PPJ/ppj-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.prosports {
        background-image: url(../assets/img/customerStories/Prosports/prosports-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.quay {
        background-image: url(../assets/img/customerStories/QUAY/quay-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.rainwear {
        background-image: url(../assets/img/customerStories/Rainwear/rainwear-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.ryu {
        background-image: url(../assets/img/customerStories/RYU/ryu-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.sapl {
        background-image: url(../assets/img/customerStories/SAPL/sapl-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.sarahflint {
        background-image: url(../assets/img/customerStories/SarahFlint/sarahflint-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.sasdudes {
        background-image: url(../assets/img/customerStories/SASDudes/sasdudes-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.shimano {
        background-image: url(../assets/img/customerStories/Shimano/shimano-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.showpo {
        background-image: url(../assets/img/customerStories/Showpo/showpo-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.spell {
        background-image: url(../assets/img/customerStories/Spell/spell-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.synergy {
        background-image: url(../assets/img/customerStories/Synergy/synergy-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.texport {
        background-image: url(../assets/img/customerStories/Texport/texport-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg.vermont {
        background-image: url(../assets/img/customerStories/VermontTeddyBear/vermont-banner-mob.webp);
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 707px;
    }

    .inner-banner.case-study-banner.theme-bg .container-xl {
        padding: 0;
    }

    .case-study-description-section {
        margin-top: -19px;
    }

    .tag {
        display: flex;
        width: 112.861px;
        padding: 6.068px;
        justify-content: center;
        align-items: center;
        gap: 6.068px;
        border-radius: 36.407px;
        background: #FFF;
        color: #081F2C;
        text-align: center;
        font-family: "Open Sans";
        font-size: 8.495px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
    }

    .case-study-image {
        margin-top: 23px;
    }

    .case-study-description-section .row {
        flex-direction: column;
    }

    .case-study-description-section-left,
    .case-study-description-section-right {
        width: 100%;
        border: none;
    }

    .case-study-description-section-left::after {
        display: none;
    }

    .case-study-description-section-right {
        margin-top: 5% !important;
    }

    .case-study-image img {
        width: 88% !important;
        margin: 0px 6%;
    }

    .casestudy-tesimoni {
        padding: 21px 21px;
    }

    .casestudy-tesimoni p {
        color: #0E0E0E;
        text-align: center;
        font-family: "Open Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 209%;
        /* 25.08px */
    }

    .casestudy-tesimoni-title p {
        font-size: 10px;
        width: 171px;
        text-align: left;
    }

    .casestudy-tesimoni-title h3 {
        font-size: 14px;
        margin-top: 7px;
        margin-bottom: 0;
    }

    .casestudy-tesimoni-div .logo {
        width: 120px;
    }

    .casestudy-tesimoni-div .logo img {
        width: 85px;
    }

    .case-study-description h2 {
        font-size: 28px;
        text-align: center;
    }

    .case-study-description p {
        font-size: 14px;
        text-align: center;
    }

    .case-study-challenges {
        margin: 20% 0;
        margin-bottom: 12%;
    }

    .case-study-challenges h2 {
        font-size: 28px;
        text-align: center;
    }

    .case-study-challenges p {
        font-size: 14px;
        text-align: center;
    }

    .case-study-implementing h2 {
        font-size: 31px;
    }

    .card_box_body .cards_box {
        width: 100%;
    }

    .form {
        margin-top: 12px;
    }

    .case-study-form {
        margin-top: 34px;
        width: 90%;
        padding: 17px 4px;
    }

    .case-study-form-main-div {
        flex-direction: column;
        gap: 5%;
    }

    .download-story-mob {
        width: 100%;
    }

    .downloaddivlogo {
        width: 100%;
        height: 200px;
        display: none;
    }

    .indicationarrow {
        top: -36%;
        right: 40%;
        display: none;
    }

    .customer_brand {
        font-size: 9px;
    }

    #download-story-mob .form h3 {
        font-size: 19px;
    }

    .indicationarrow img {
        width: 58px;
    }

    .casestudy-title h1 {
        font-size: 28px;
        line-height: 38px;
        text-align: center;
        width: 87%;
    }

    .casestudy-title {
        margin-top: 30px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .inner-banner.case-study-banner.theme-bg .button-container {
        width: 285px;
        height: 52px;
        flex-shrink: 0;
        border-radius: 8px;
        background: linear-gradient(90deg, #0099C4 0%, #00D1CF 100%);
    }

    .button-container {
        width: 100%;
        height: 43px;
        flex-shrink: 0;
        border-radius: 8px;
        background: linear-gradient(90deg, #00D1CF 0%, #0099C4 100%);
        margin-top: 13px;
        margin-bottom: 17px;
    }

    .button-container a {
        color: #FFF;
        font-family: "Open Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .casestudy-title .button-container {
        margin-top: 12px;
        margin-bottom: 40px;
    }

    .casestudy-title .tag {
        margin-bottom: 12px;
    }



    .case-study-description-section {
    margin-top: 17px;
    }
        #download-story-mob{
            width: 100%;
        }
}

@media only screen and (min-width: 541px) and (max-width: 767px) {
    .background_gradient {
        height: 84px;
        position: absolute;
        bottom: 0px;
        background: linear-gradient(0deg, #FFF 43.61%, rgba(255, 255, 255, 0.82) 67.83%, rgba(255, 255, 255, 0.00) 100%);
        width: 100%;
    }

    .inner-banner.case-study-banner.theme-bg {
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), linear-gradient(98deg, #3CBBC9 -20.87%, #EFA64A 103.74%);
        position: relative;
    }

    .case-study-description-section {
        margin-top: 65px;
    }

}

@media only screen and (min-width: 350px) and (max-width: 480px) {
    .background_gradient {
            height: 84px;
            position: absolute;
            bottom: 0px;
            background: linear-gradient(0deg, #FFF 43.61%, rgba(255, 255, 255, 0.82) 67.83%, rgba(255, 255, 255, 0.00) 100%);
            width: 100%;
        }
    .inner-banner.case-study-banner.theme-bg {
        position: relative;
    }

    .background_gradient {
        bottom: 0px;
    }
        .case-study-description-section {
            margin-top: 0px;
        }
}
@media only screen and (min-width: 542px) and (max-width: 640px){
    .inner-banner.case-study-banner.theme-bg.aquarelle{
        height: 991px;
    }
}