body{
    background-color: #FFF !important;
}
*{
    color: #000 !important;
}
.red_btn:hover{
    color: #FFF !important;
}
section.des_sec-1{
    background: #FFF url('../images/design/Rock.png');
    position: relative;
    background-repeat: no-repeat;
    background-size: 320px;
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 750px;
    padding: 130px 0px;
    overflow: hidden;
}
section.des_sec-1 .des_main_lin{
    position: absolute;
    right: 0px;
    bottom: 0px;
}
section.des_sec-1 h1,
section.des_sec-1 h1 b{
    color: #000;
    /* font-size: 84px ; */
}
section.des_sec-1 h1 .animate_border:after{
    margin-top: 50px;
    transition: 2s ease-in-out;
}

/*@keyframes animatedBackground {*/
/*    0% { background-position: -200px 0; }*/
/*    100% { background-position: 0 0; }*/
/*}*/
/*@-moz-keyframes animatedBackground {*/
/*    0% { background-position: -200px 0; }*/
/*    100% { background-position: 0 0; }*/
/*}*/
/*@-webkit-keyframes animatedBackground {*/
/*    0% { background-position: -200px 0; }*/
/*    100% { background-position: 0 0; }*/
/*}*/
/*@-ms-keyframes animatedBackground {*/
/*    0% { background-position: -200px 0; }*/
/*    100% { background-position: 0 0; }*/
/*}*/
/*@-o-keyframes animatedBackground {*/
/*    0% { background-position: -200px 0; }*/
/*    100% { background-position: 0 0; }*/
/*}*/
.des_sec_2{
    background: #FFF url('../images/design/ux-sec2-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 0px 100px;
}
.des_sec_2 .row{
    height: 600px;
}
.des_sec_2 .row img{
    width: 525px;
}
.des_sec_2 .img_Graphics,
.des_sec_2 .img_user_interface{
    width: 560px !important;
}
.img_user_exp{
    margin-left: -5%;
}
#main-content-div > section.des_sec_2 > div > div.row.my-md-5.py-md-5 img{
    width: 560px;
}
.des_sec_2_para{
    display: flex;
}
.gif_container{
    height: 600px;
    margin-top: 5vh;
}
.gif_mobile{
    z-index: 4;
    object-fit: none;
    width: 240px !important;
    border-radius: 28px;
    left: 140px;
    top: 5px;
}
.red_boxes_1,
.red_boxes_2{
    object-fit: cover;
    height: 300px;
}
.red_boxes_1{
    top: 100px;
    left: 340px;
    width: 120px !important;
}
.red_boxes_2{
    bottom: 20px;
    left: 450px;
    transform: rotate(70deg);
    width: 150px !important;
}
.des_slider{
    background: #000;
    /*background: #000 url('../images/design/slider_bg.png');*/
    /*background-position: left center;*/
    /*background-size: 30%;*/
    /*background-repeat: no-repeat;*/
    padding: 150px 0px 100px;
    /*height: 900px;*/
}
.des_slider *{
    color: #FFF !important;
}
.des_slider .process_slider .process-index > span{
    font-family: 'Whyte';
    font-style: normal;
    font-weight: 1000;
    font-size: 96px;
    line-height: 140%;
    letter-spacing: 0.07em;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.des_slider .process_slider .process-index > img{
    width: 102px;
    height: 102px;
    transform: translateY(10px);
}
.des_slider .process_slider h3.sub-heading{
    font-size: 24px;
}

.des_slider .slick-dots li button{
    font-size: 0;
    position: relative;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    transition: opacity 0.5s, background-color 0.5s, height 0.4s;
    background: transparent;
    margin: 3px;
}

.des_slider .slick-dots li button:before {
    content: ' ';
    font-size: 22px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    text-align: center;
    background-color: #FFF;
    border-radius: 50%;
    transition: opacity 0.5s, background-color 0.5s, height 0.4s;
}
.des_slider .slick-dots li.slick-active button{
    height: 37px;
}
.des_slider .slick-dots li.slick-active button:before{
    background-color: var(--primary-red);
    border-radius: 30px;
    height: 37px;
}
.des_slider .slick-dots li{
    margin-right: 5px;
    list-style: none;
}
.process_slider_container{
    position: unset !important;
}
.des_slider .slick-dots{
    padding-left: 0px;
    position: fixed;
    right: -200%;
    top: 45%;
}
.des_slider_heading{
    padding-top:15vh
}
#main-content-div > section.des_slider > div > div > div.col-md-9.col-xl-8.col-xxl-6 > div > div > div > div.process_slider:nth-child(2),
#main-content-div > section.des_slider > div > div > div.col-md-9.col-xl-8.col-xxl-6 > div > div > div > div.process_slider:nth-child(3){
    padding: 25vh 0px 25vh;
}
#main-content-div > section.des_slider > div > div > div.col-md-9.col-xl-8.col-xxl-6 > div > div > div > div.process_slider:nth-child(4){
    padding: 20vh 0px 25vh;
}

.case_study_image{
    margin-left: -150px;
    width: 100%;
}

.mt-0 {
  margin-top: 0 !important;
}

@media only screen and (min-width: 1600px) {
    .des_sec_2 .row{
        height: 900px;
    }
    .des_sec_2 .row div.col-md-6.d-md-flex{
        padding-top: 200px;
        justify-content: start !important;
    }
    .case_study_image {
        margin-left: 0px;
    }
}
@media only screen and (min-width: 1500px) {
    .case_study_image {
        margin-left: 0px;
    }
}
@media only screen and (max-width: 1367px) {
    .des_sec_2 .row img{
        width: 450px;
    }
    .des_sec_2 .row {
        height: 530px;
    }
    /* .des_slider{
        height: 800px;
        background-size: 27%;
    } */
    .case_study_image {
        margin-left: -170px;
    }
}

@media only screen and (max-width: 1280px) {
    .des_slider{
        height: 800px;
        background-size: 27%;
    }
}

@media only screen and (max-width: 600px) {
    section.des_sec-1{
        background: #FFF;
        padding: 130px 0px 20px;
        height: fit-content;
    }
    section.des_sec-1 h1,
    section.des_sec-1 h1 b{
        font-size: 40px;
    }
    section.des_sec-1 h1 b{
        display: inline;
    }
    .des_sec_2{
        background-size: auto;
        padding-top: 0px;
        margin-top: 50px;
    }
    section.des_sec_2 p.primary-para{
        line-height: 25px;
    }
    #main-content-div > section.des_sec_2 > div > div:nth-child(1) > div.col-md-6.paralex_img.is-inview > img{
        margin-top: 0px;
    }
    .des_sec_2 .row{
        height: fit-content;
        margin: 20px 0px;
    }
    #main-content-div > section.des_sec_2 > div > div.row.my-md-5.py-md-5 img,
    .des_sec_2 .row img,
    .des_sec_2 .img_Graphics,
    .des_sec_2 .img_user_interface{
        width: 100% !important;
        margin: 50px auto;
    }
    .img_user_exp{
        margin-left: unset;
    }
    .gif_container{
        height: 450px;
        overflow: hidden;
    }
    .gif_container >img:first-child{
        width: 100%;
    }
    .red_boxes_1, .red_boxes_2{
        height: 200px;
    }
    .des_sec_2 .row .gif_container img.red_boxes_1 {
        top: 115px;
        left: 230px;
        width: 90px !important;
    }
    .des_sec_2 .row .gif_container img.red_boxes_2{
        width: 50px !important;
        bottom: -20px;
        left: 290px;
    }
    .des_sec_2 .row .gif_container .gif_mobile{
        height: 340px;
        width: 170px !important;
        object-position: center;
        left: 84px;
    }

    .des_slider{
        background: #000;
        height: fit-content;
        padding: 70px 0px 30px;
    }
    .des_slider .slick-dots{
        position: unset;
        transform: rotate(-90deg);
        display: inline-block;
        margin-left: 20px;
    }
    .des_slider .process_slider h2 > img {
        width: 50px;
        height: 50px;
    }
    .des_slider_heading{
        padding-top: 64px;
    }
    #main-content-div > section.des_slider > div > div > div.col-md-9.col-xl-8.col-xxl-6 > div > div > div > div.process_slider:nth-child(2),
    #main-content-div > section.des_slider > div > div > div.col-md-9.col-xl-8.col-xxl-6 > div > div > div > div.process_slider:nth-child(3),
    #main-content-div > section.des_slider > div > div > div.col-md-9.col-xl-8.col-xxl-6 > div > div > div > div.process_slider:nth-child(4){
        padding: 30px 0px;
    }

    .case_study_image {
        margin-left: -60px;
        margin-top: -40px;
        width: 120%;
    }
    .des_sec_case_studies .red_btn{
        width: 150px;
        height: 40px;
    }
    body > section.des_sec_case_studies.pb-5 > div.container-fluid > div > div.col-md-7.order-0.order-md-1{
        padding-left: 0px;
        padding-right: 0px;
    }

    .des_sec-1 .sub-heading {
        margin-top: 10px;
    }


}