* {
    margin: 0;
    padding: 0;
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700,800&display=swap");
@import url("../fonts/bignoodletitling_font.css");

/* Start - Global Settings */

:root {
    /* Start - Colour Variables */
    --clr-white: hsl(0, 0%, 100%);
    --clr-Off-white: hsl(0, 0%, 96%);
    --clr-grey: hsl(0, 0%, 55%);
    --clr-black: rgba(81, 82, 83, 1);
    --clr-black-blue: hsl(234.7, 45.9%, 14.5%);
    --clr-blue: rgb(7 155 203);
    --clr-blue-bright: rgb(8 189 232);
    --clr-blue-dark: rgb(9 130 182);
    --clr-orange: hsl(25, 100%, 60%);
    --clr-red: #f54748;
    --clr-green: #8dc96b;
    /* Shadow Colours */
    --shadow-light: 0 0 20px hsla(0, 0%, 0%, 0.05);
    --shadow-small: 0 0 20px hsla(0, 0%, 0%, 0.09);
    --shadow-regular: 7px 7px 20px hsla(0, 0%, 0%, 0.07);
    /* Gradients */
    --gradient-transparent: linear-gradient(to bottom right, transparent, var(--clr-white));
    --gradient-blur: linear-gradient(to bottom right, hsla(0, 0%, 100%, 0.7), var(--clr-white));
    /* End - Colour Variables */
    /* Font Family Variables */
    --font-primary: "Open Sans", sans-serif;
    --font-secondary: "BigNoodleTitling";
    /* Font Weight */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 900;
    /* Font Size */
    --fs-xs: clamp(15rem, 1.04vw, 16rem);
    --fs-small: clamp(16.5rem, 1.17vw, 18rem);
    --fs-regular: clamp(17.75rem, 1.3vw, 20rem);
    --fs-medium: clamp(21rem, 1.62vw, 25rem);
    --fs-large: clamp(38rem, 2.92vw, 45rem);
    --fs-xl: clamp(62rem, 5.53vw, 82rem);
    --fs-bg: clamp(180rem, 13.99vw, 215rem);
    /* Line Height */
    --lh-xs: clamp(22rem, 1.69vw, 26rem);
    --lh-small: clamp(24rem, 1.82vw, 28rem);
    --lh-regular: clamp(27rem, 2.08vw, 32rem);
    --lh-medium: clamp(32rem, 2.27vw, 35rem);
    --lh-large: clamp(48rem, 3.58vw, 55rem);
    --lh-xl: clamp(72rem, 5.85vw, 87rem);
    --lh-bg: clamp(190rem, 14.64vw, 225rem);
    --pad-page: 8%;
    --scrollbar-dimention: 15px;
    --light-black: #515253;
}

/* Body Styles */

html {
    overflow: scroll;
}

body {
    font-family: var(--font-primary);
    overflow-x: hidden;
}

/* Start - Global Font Styles */

h1 {
    font-size: 42px;
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 38px;
    font-weight: 300;

    color: var(--clr-black);
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

h3 {
    color: (--clr-black);
    font-size: 33px;
    font-weight: 500;
}

h4 {
    font-size: 20px;
    font-weight: 500;
    color: #633991 !important;
}

h5 {
    font-size: 28px;
    font-weight: 300;
    color: #633991 !important;
    margin-bottom: 0.7rem;
}

p {
    color: #959094;
    font-size: 16px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

p,
a {
    color: var(--clr-black);
    font-size: 14px;
}

a {
    text-decoration: none;
}

a:hover {
    color: inherit;
}

a:focus {
    outline: none;
}

::selection {
    color: var(--clr-white);
    background-color: var(--clr-blue);
}

/* End - Global Font Styles */

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

.banner {

    background-image: url(../img/cover11476.jpg);
    height: 500px;
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: cover;
}

.banner_text {
    text-align: center;
    padding-top: 60px;
}

.banner_text h1 {
    padding-bottom: 40px;
    font-size: 32px;
    font-weight: 700;
    color: var(--light-black);
}

.banner_text p {
    font-size: 18px !important;
    font-weight: 400;
    color: var(--light-black);
}

.top_img {
    padding-top: 90px;
    text-align: end;
}

.pop_text h2 {
    font-size: 40px;
    line-height: 48px;
    padding-top: 30px;
    color: var(--light-black) !important;
    font-weight: 600;
    padding-bottom: 32px;
}

.koranm_text {
    margin-top: 108px;
}

.koranm_item h6 {
    font-size: 28px;
    font-weight: 700;
    color: var(--light-black);
}

.kisha_brief {
    margin-top: 35px !important;
}

.koranm_text_box {
    background-color: #0C83D1;
    width: 469px;
    margin: 0 auto;
    margin-right: 0;
    padding: 60px 48px;
}

.koranm_item {
    padding: 0px;
    width: 612px;
    margin-top: 70px;
}

.koranm_has_box ul {
    list-style: none !important;
}

.koranm_text_box h4 {
    font-size: 40px;
    font-weight: 800;
    color: var(--clr-white) !important;
    padding-bottom: 24px;
}

.koranm_text_box ul {
    list-style: disc;
}

.koranm_text_box ul li {
    font-size: 20px;
    font-weight: 400;
    color: var(--clr-white) !important;
    line-height: 48px;
}

.koranm_item h2 {
    font-size: 40px;
    line-height: 48px;
    padding-top: 30px;
    color: var(--light-black) !important;
    font-weight: 600;
}

.koranm_item p {
    padding-top: 32px;
    font-size: 20px !important;
    color: var(--light-black);
    font-weight: 400;
    line-height: 32px;
}

.brief_text_box {
    background-color: #F5F5F5;
    width: 532px;
    position: relative;
}

.brief_text_box::after {
    content: "";
    position: absolute;
    background-color: #f5f5f5;
    width: 100%;
    height: 100%;
    right: -60%;
    z-index: -1;
    top: 0;
}

.brief_text_box h4 {
    color: #0C83D1 !important;
}

.brief_text_box ul li {
    color: var(--light-black) !important;
}

.vision_text h2 {
    font-size: 40px;
    line-height: 48px;
    padding-top: 30px;
    color: var(--light-black) !important;
    font-weight: 600;
}

.vision_text {
    padding: 140px 0;
    /* width: 432px; */
    /* margin: 0 auto;
    margin-right: 0; */
}

.vision_img {
    float: left;
}

.approach_img img {
    height: unset;
    position: relative;
    top: -65px;
}

/* .vision_img img {
    width: 100%;
    height: 500px;
    object-fit: contain;
}

.vision_text p {
    padding-top: 48px;
    font-size: 20px !important;
    color: var(--light-black);
    font-weight: 400;
    line-height: 32px;
} */
.vision_img {
    position: relative;
    display: inline-block;
    overflow: hidden;
    float: left;

}

.vision-top_img {
    width: 70%;
    margin-left: auto;
    transform: translateY(100px);

}

@media(max-width:768px) {
    .vision-top_img {
        width: 100%;
        margin: 40px 0px;
        transform: none;
    }
}


.vision-top_img img {
    width: 100%;
}

.vision_img img {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out;
    transform: scale(1);
}

/* Create the hover effect using a pseudo-element */
.vision_img::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgb(12, 131, 209, 0.5);
    /* Change this color to your desired hover color */
    transition: left 0.5s ease-in-out;
    z-index: 1;
}

/* Apply the hover effect */
.vision_img.hover-effect::before {
    left: 0;
    animation: slideInOut 1s forwards;
}

.vision_img.hover-effect img {
    opacity: 1;
    transform: scale(1.05);
    /* Slightly scale up the image on hover for a better effect */
}

/* Keyframes for the sliding effect */
@keyframes slideInOut {
    0% {
        left: -100%;
    }

    50% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}



.vision_text p {
    padding-top: 32px;
    font-size: 18px !important;
    color: var(--light-black);
    font-weight: 400;
}

.case_slider .slick-slide {
    transform: scale(0.8);
    transition: all 0.4s ease-in-out;
    padding: 40px 0;
}

.case_slider .slick-slide img {
    max-width: 100%;
    transition: all 0.4s ease-in-out;
    width: 65%;
    margin: auto;
}

.case_slider .slick-center {
    transform: scale(1.1);
}

.approach_img img {
    height: unset;
}

/* .approach_text {
    margin-top: 240px;
} */

.client {
    margin-top: 75px;
    text-align: center;
}

.client_text {
    width: 55%;
    text-align: left;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
}

.client_text h4 {
    color: #515253 !important;
    font-size: 40px;
    font-weight: 600;
}

.client_text p {
    color: #515253;
    font-size: 18px !important;
    font-weight: 400;
    padding-top: 5px;
}

.client_ecommerce {
    margin-top: 60px;
    margin-bottom: 60px;
}

.client_ecommerce_img {
    background-image: url(https://bluehorse.in/Kisah_case_study/asset/img/kisha_last1.jpg);
    width: 568px;
    height: 440px;
    padding: 60px 83px 48px 48px;
}

.client_ecommerce_img2 {
    background-image: url(https://bluehorse.in/Kisah_case_study/asset/img/kisha_last2.jpg);
    width: 568px;
    height: 440px;
    padding: 60px 83px 48px 48px;
}

.client_ecommerce_img h5 {
    font-weight: 700;
    font-size: 32px;
    color: #fff !important;
    padding-bottom: 15px;
    height: 100px;
}

.client_ecommerce_img p {
    color: #fff;
    font-size: 18px !important;
    font-weight: 400;
    padding-bottom: 55px;
}

.client_ecommerce_img a {
    background-color: #fff;
    padding: 10px 12px;
    font-size: 17px;
}

.client_ecommerce_img2 p {
    padding-bottom: 95px;
}

.get_in_wrap {
    padding: 0px var(--pad-page);
    padding-bottom: 70px;
    position: relative;
}

.get_in_wrap .get_inner {
    position: relative;
    background-color: #f2f6fd;
    text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 5px;
}

.get_in_wrap .get_inner .left_shape {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    object-fit: contain;
    object-position: bottom;
}

.get_in_wrap .get_inner .right_shape {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 200px;
    height: 200px;
    object-fit: contain;
    object-position: bottom;
}

.get_in_wrap .get_inner .get_con {
    position: relative;
    padding: 50px;
}

.get_in_wrap .get_inner .get_con h3 {
    margin-bottom: 10px;
}

.get_in_wrap .get_inner .get_con p {
    font-size: 16px;
    font-weight: normal;
    color: var(--clr-black);
    margin-bottom: 25px;
}

.get_in_wrap .get_inner .get_con a {
    display: inline-block;
    border: solid 1px var(--clr-blue);
    background-color: var(--white);
    color: var(--clr-blue);
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 15px;
    line-height: 15px;
    font-weight: 500;
}

.get_in_wrap .get_inner .get_con a:hover {
    background-color: var(--clr-blue);
    color: var(--clr-white);
}

.testi_img22 {
    margin-top: 0px;
    margin-bottom: unset;
    margin-right: 10px;
}

.vision_item_box {
    margin-bottom: 48px;
}

.every_box {
    margin-top: 50px;
}

.intro_action {
    padding: 30px var(--pad-page);
    padding-bottom: 70px;
}

.intro_action .btn_action:hover {
    background-color: var(--clr-blue);
    color: var(--clr-white);
}

.intro_action .btn_action {
    display: inline-block;
    border: solid 1px var(--clr-blue);
    background-color: var(--white);
    color: var(--clr-blue);
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 15px;
    line-height: 15px;
    font-weight: 500;
    text-transform: uppercase;
    min-width: 200px;
    margin: 0px 10px;
}

.pop_img img {
    width: 100%;
}

.pop_text {
    padding-top: 25px;
}

.pop_text p {
    font-size: 18px !important;
    color: var(--light-black);
    font-weight: 400;
}

.Implemented h2 {
    font-size: 40px;
    line-height: 48px;
    padding-top: 30px;
    color: var(--light-black) !important;
    font-weight: 600;
    text-align: center;
}

.Implemented p {
    padding-top: 32px;
    font-size: 18px !important;
    color: var(--light-black);
    font-weight: 400;
}

#discovery_1 {
    padding-top: 60px;
    padding-bottom: 60px;
}

.content_light {
    background-image: url(../image/restru.jpg);
    background-size: cover;
    background-position: center;
    height: 450px;
    position: relative;
}

.content_light::after {
    content: "";
    position: absolute;
    background-color: #0c83d1c2;
    top: 0;
    height: 100%;
    width: 100%;
}

.content_light p {
    color: white;
    position: absolute;
    z-index: 123;
    font-size: 18px !important;
    padding: 145px;
    font-weight: 400;
}

.title_new {
    padding-bottom: 25px;
    text-align: center;
}

.title_new h2 {
    font-size: 40px;
    line-height: 48px;
    padding-top: 30px;
    color: var(--light-black) !important;
    font-weight: 600;
}

.kisha_banner {
    text-align: center;
    margin-top: 108px;
}

.kisha_banner img {
    /* width: 60%; */
    width: 100%;
}

.kisha_approach img {
    /* width: 95%; */
    opacity: unset;
}

.engage_box {
    margin-top: 80px;
    margin-bottom: 70px;
}

.engage_box h3 {
    /* font-family: Open Sans; */
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    color: #515253 !important;
    padding-bottom: 20px;

}

.engage_item {
    width: 260px;
    height: 32px;
    background-color: #0C83D1;
    position: absolute;
    left: 0;
    margin-top: 60px;
}

.engage_text p {
    font-size: 18px !important;
}

.barnd_item_box .vision_img img {
    opacity: unset;
}

@media(max-width:1400px) {
    .approach_img img {
        height: 690px;
    }
}

@media(max-width:1050px) {
    .engage_item {
        width: 240px;
    }

}

@media(max-width:1024px) {
    .koranm_item {
        width: unset;
    }

    .vision_img img {
        height: unset;
    }

    .vision_text {
        padding-top: 100px;
        padding-left: 10px;
    }

    .kisha_banner img {
        width: 100%;
    }

    .client_ecommerce_img {
        width: 98%;
        margin-bottom: 20px;
    }

    .approach_text {
        padding-bottom: 0;
    }

    .barnd_item_box .vision_img {
        margin-top: 0;
    }

    .barnd_item_box .vision_text {
        padding-top: 10px;
        padding-left: 20px;
        padding-bottom: 0;
    }

    .kisha_banner {
        text-align: center;
        /* margin-top: 108px; */
        margin-bottom: -51px;
    }

}

@media(max-width:992px) {
    .engage_item {
        width: 195px;
    }

    .koranm_item {
        width: unset;
    }

    .banner {
        background-position: center;
    }

    .vision_img img {
        opacity: 1;
        height: 290px;
    }

    .vision_text {
        padding-top: 80px;
        padding-left: 18px;
        padding-bottom: 0;
    }

    .anunta_koranm_text {
        margin-top: unset;
    }

    .brief_text_box {
        padding: 60px 35px;
    }

    .kisha_banner {
        margin-top: 20px;
    }

    .kisha_banner img {
        width: 100%;
    }

    .kisha_approach img {
        height: unset;
        position: unset;
        margin-top: 0;
    }

    .approach_text {
        margin-top: 20px;
    }

    .client_ecommerce_img {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media(max-width:575px) {
    .client figure img {
        width: 100%;
    }

    .client_text {
        width: 100%;
    }

    .client_ecommerce_img {
        padding: 20px 20px;
        width: unset;
        height: unset;
    }

    .client_ecommerce_img2 {
        margin-top: 15px;
    }

    .client_ecommerce_img h5 {
        font-size: 27px;
    }

    /* .client_ecommerce_img p {
        font-size: 15px !important;
    } */

    .client_ecommerce_img2 p {
        padding-bottom: 25px;
    }

    .approach_text {
        padding: 0;
        margin-top: -30px;
    }

    .koranm_item {
        width: unset;
        padding-top: 0;
        padding-bottom: 20px;
    }

    .koranm_text {
        margin-top: 20px;
    }

    .vision_text {
        padding: 20px 0;
        padding-bottom: 0;
    }

    .vision_img img {
        height: unset !important;
    }

    .vision_text h2 {
        /* font-size: 30px; */
        padding-top: 0;
    }

    .vision_text p {
        padding-top: unset;
    }

    .koranm_item h2 {
        font-size: 30px;
        padding-top: 0;
    }

    .koranm_item p {
        padding-top: unset;
    }

    .brief_text_box {
        /* position: unset; */
        margin-bottom: 40px;
        width: unset;
    }

    .koranm_item h6 {
        font-size: 20px;
    }

    .kisha_banner img {
        width: 95%;
    }

    .kisha_banner {
        margin-top: unset;
    }

    .vision_item_box {
        margin-bottom: -30px;
    }

    .engage_item {
        margin-top: -45px;
        position: unset;
    }

    .get_in_wrap .get_inner .right_shape {
        display: none;
    }

    .get_in_wrap .get_inner .left_shape {
        display: none;
    }
}

@media(max-width:370px) {
    .banner {
        background-position: 56%;
    }
}