/*banner-textarea*/

.dtf.posrelative.textarea {
    width: 100%;
}

textarea.header {
    border-radius: 30px;
}

/*banner-textarea*/

/*see-how-it-works*/

.it_work_sec {
    padding: 60px 0 80px;
}

.container-fluid {
    padding-left: 6% !important;
    padding-right: 6% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: unset !important;
}

.cn {
    text-align: center;
}

.title_blk {
    margin: 0px 0 35px 0;
    padding: 0px;
    color: #292f39;
    font-size: 56px;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
}

.title_blk:after {
    content: "";
    background-color: #0274ff;
    width: 70px;
    height: 4px;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0px;
    margin: auto;
}

.para_title {
    font-size: 16px;
    color: #5c5c5c;
    padding: 10px 0 0;
    width: 100%;
    margin: 0 0 55px;
    position: relative;
}

.para_title:after {
    content: "";
    background-image: url(../../images/para-after.png);
    position: absolute;
    height: 50px;
    width: 10px;
    left: 50%;
    bottom: -70px;
    transform: translateX(-50%);
}

.it_work_boxes {
    margin: 80px 0 0;
}

.it_work_box_up {
    position: relative;
}

.it_work_box_up:before {
    content: "";
    position: absolute;
	width: 335px;
    width: 100%;
    height: 100%;
    border: 2px solid #cccccc;
    z-index: -1;
    bottom: -15px;
    left: 15px;
}

.it_work_box h3 {
    color: #000;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    margin: 35px 0 0;
    text-transform: uppercase;
}

.it_work_box h3 span {
    color: #ff2424;
    font-weight: 900;
    margin: 0 5px 0 0;
}

.it_work_box_down {
    margin: 130px 0 0;
    position: relative;
}

.it_work_box_down:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #cccccc;
    bottom: -15px;
    z-index: -1;
    left: 15px;
}

.work-boxes {
    /* float: left; */
    /* margin: 0 10px 0; */
}

.it_work_box.it_work_box_up.wow.bounceInUp img {
    width: 100%;
}

.it_work_box.it_work_box_down.wow.bounceInUp img {
    width: 100%;
}

/* .it_work_box.it_work_box_down.wow.bounceInUp.last::before {
    border: indianred;
} */

/*see-how-it-works*/


/*types-of-explainer-videos*/

.types_of_videos_sec {
    background: #f4f4f4 url(../../images/types-of-videos-bg.png);
    background-repeat: no-repeat;
    background-position: right 90px;
    padding: 60px 0 10px;
    display: table;
    width: 100%;
    position: relative;
    /* height: 100vh; */
}

.PopUpModal_types_of_videos {
/*    position: absolute;*/
/*    width: 100%;*/
/*    background: #880000;*/
/*    background: -moz-linear-gradient(left, #880000 0%, #ff0000 100%);*/
/*    background: -webkit-linear-gradient(left, #880000 0%, #ff0000 100%);*/
/*    background: linear-gradient(to right, #880000 25%, #ff0000 75%);*/
/*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#880000', endColorstr='#ff0000', GradientType=1 );*/
/*    z-index: 99;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    align-items: center;*/
/*    height: 100%;*/
}

/* .video-types {
    float: left;
} */

.ClosePopUp_types_of_videos, .ClosePopUp_types_of_videos:focus {
    position: absolute;
    right: 30px;
    background-color: #fff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50px;
    font-size: 25px;
    color: #f00;
    top: 30px;
    outline: none;
    z-index: 9999999;
}

.types_of_videos_boxes {
    padding-left: 15px;
    margin: 50px 0px 60px;
    padding-bottom: 0;
    display: table;
    width: 100%;
    padding-right: 15px;
}

.types_of_videos_box {
    overflow: hidden;
    position: relative;
}

a.OpenCaseStudy {
    display: table;
    width: 100%;
    position: relative;
    transition-duration: .5s;
}

.types_of_videos_box a:before {
    content: "";
    position: absolute;
    background-color: rgba(0, 0, 0, 0.69);
    top: 0;
    bottom: 0;
    z-index: 9;
    left: 0;
    right: 0;
    transition-duration: .5s;
}

.port_name_box1 {
    position: absolute;
    top: 30px;
    z-index: 9;
    left: 30px;
}

.port_name_box1 h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    transform: rotate(0deg);
}

.port_name_box2 {
    position: absolute;
    bottom: 130px;
    z-index: 9;
    right: -85px;
    text-align: left;
    width: 266px;
    transition-duration: .5s;
}

.port_name_box2 h3 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    transform: rotate(-90deg);
}

.types_of_videos_box img {
    width: 100%;
}

.discover_box {
    background-color: #fff;
    z-index: 999;
    position: absolute;
    padding: 0;
    align-items: center;
    display: grid;
    height: 0;
    bottom: -60px;
    transition-duration: .5s;
    height: 60px;
    width: 100%;
    opacity: 0;
    left: 0;
    right: 0;
}

.discover_box h5 {
    margin: 0;
    text-align: center;
    color: #232323;
    font-size: 20px;
    font-weight: 700;
}

.types_of_videos_box a:hover .port_name_box2 {
    position: absolute;
    bottom: 180px;
    z-index: 9;
    right: -85px;
    text-align: left;
    width: 266px;
}

.types_of_videos_box a:hover .discover_box {
    bottom: 0;
    opacity: 1;
}

.types_of_videos_box:hover a:before {
    background-color: transparent;
}


/*types-of-explainer-videos*/

/*pricing*/

.cta2 {
    padding: 60px 0 !important;
}



p.para_title.cn.wow.bounceInUp.pricing {
    color: #fff;
    margin: 20px 0 90px;
}


p.para_title.cn.wow.bounceInUp.pricing:after {
    background-image: url(../../images/para-after1.png);
}

/*pricing*/

/*case-study*/

.case_studies_sec {
    background-image: url(../../images/case-s-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 0 0 60px;
    position: relative;
}

.bg_title {
    color: #fff;
    font-size: 90px;
    font-weight: 900;
    margin: 0;
    display: table;
    position: relative;
    z-index: 0;
    text-transform: uppercase;
    padding: 30px 0 10px 50px;
}

.bg_title:before {
    content: "";
    background-color: #251552;
    position: absolute;
    width: 428px;
    z-index: -1;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    border-radius: 0;
}

.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before, .slick-track:after {
    display: table;
    content: '';
}

.case_studies_slider .slick-slide {
    height: auto;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-slide {
    display: none;
    /* float: left; */
    height: 100%;
    min-height: 1px;
}


.case_studies_brif h3 {
    color: #ffffff;
    font-size: 60px;
    font-weight: 600;
    text-align: left;
    transition: all .3s ease;
    text-transform: capitalize;
    margin: 0 0 10px;
}

h2::before, h3::before {
    content: "";
    display: block;
    border-radius: 0;
}

.case_studies_brif p {
    color: #c7c6c6;
    font-size: 21px;
    font-weight: 400;
    margin: 20px 0 0;
}



.yellow_btn {
    text-align: center;
    font-size: 18px;
    color: #000000;
    padding: 12px 40px;
    font-weight: 700;
    transition-duration: .5s;
    background: linear-gradient(to left, #f6c307 50%, #000 50%);
    background-size: 212%;
    background-position: right bottom;
    transition: all .5s ease;
    text-transform: uppercase;
    border-radius: 0;
    position: relative;
    margin-left: 10px !important;
}

.yellow_btn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50px;
    border: 2px solid #fff;
    left: -10px;
    top: -10px;
    z-index: -1;
    transition: all .5s ease;
}

.case_studies_btn_box a {
    margin: 0 15px;
}

.red_btn {
    text-align: center;
    font-size: 18px;
    color: #fff;
    padding: 12px 40px;
    font-weight: 700;
    transition-duration: .5s;
    background: linear-gradient(to left, #f62525 50%, #000 50%);
    background-size: 212%;
    background-position: right bottom;
    transition: all .5s ease;
    text-transform: uppercase;
    border-radius: 0;
    position: relative;
    margin-left: 10px !important;
}

.red_btn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50px;
    border: 2px solid #fff;
    left: -10px;
    top: -10px;
    z-index: -1;
    transition: all .5s ease;
}

.case_studies_video {
    position: relative;
}

a.fancybox {
    display: block;
    width: 100%;
}

.slick-slide img {
    display: block;
    width: 100%;
	margin: 10px 0 0;
}

.case_studies_video a.fancybox:before {
    content: "";
    background-image: url(../../images/case-play-cion.png);
    width: 52px;
    height: 52px;
    position: absolute;
    z-index: 99999;
    left: 0;
    right: 0;
    margin: auto;
    display: grid;
    align-items: center;
    top: 0;
    bottom: 0;
}

.case_studies_slider .slick-dots {
    position: absolute;
    bottom: -50px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.case_studies_slider .slick-dots li button {
    background-color: #e5e5e5;
    border-radius: 50px;
    width: 10px;
    height: 10px;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.case_studies_slider .slick-dots li button:before {
    font-size: 0px;
    line-height: 0px;
}

/* .case-stu {
    float: left;
	height: 485px;
}

.case-stu-vid {
    float: left;
} */


/*case-study*/

/*why-explainer-videos*/



.why_explainer_sec:before {
    animation: men 5s infinite;
    animation-timing-function: linear;
}

.why_explainer_sec:before {
    content: "";
    width: 296px;
    height: 333px;
    background-image: url(../../images/why-explainer-before.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    position: absolute;
    bottom: -6px;
    z-index: -1;
    left: 50px;
}

.why_explainer_sec:after {
    content: "";
    width: 462px;
    height: 311px;
    background-image: url(../../images/why-explainer-after.png);
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    right: 0px;
    top: -40px;
    z-index: -1;
    background-size: 100%;
}

.cn {
    text-align: center;
}

.title_blk {
    margin: 0px 0 35px 0;
    padding: 0px;
    color: #292f39;
    font-size: 56px;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
}


.para_title {
    font-size: 16px;
    color: #5c5c5c;
    padding: 10px 0 0;
    width: 100%;
    margin: 0 0 55px;
    position: relative;
}

.para_title:after {
    content: "";
    background-image: url(../../images/para-after.png);
    position: absolute;
    height: 49px;
    width: 9px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -70px;
}

.why_explainer_box_img img {
    animation: pulse 1s infinite;
    animation-timing-function: linear;
}

@keyframes men {

 0% {

 transform: translateX(-3vw)

}

 50% {

 transform: translateX(3vw)

}

 100% {

 transform: translateX(-3vw)

}

}

.why_explainer_box_img img {
    margin: auto;
    display: table;
}

.why_explainer_box_text h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0px 0 20px;
}



.why_expl {
    float: left;
}

.why_explainer_sec {
    z-index: 9;
}


/*why-explainer-videos*/

/*header*/




/*header*/

/*contact*/



section.howhelp-sec {
    background: #ffffff url(../../images/types-of-videos-bg-left.png);
    background-repeat: no-repeat;
    background-position: left 152px top 14px;
    padding: 60px 0;
    display: table;
    width: 100%;
    position: relative;
}
/*contact*/

/*contact-form*/
.contact-form-pg {
    background: #ffffff url(../images/how-we-help.png);
    background-repeat: no-repeat;
    background-position: left -146px top 0;
    padding: 0 0 10px;
    display: table;
    width: 100%;
    position: relative;
}

/*contact-form*/
@media only screen and (max-width: 800px) and (min-width: 320px){
	
/*body*/
	
html {
    width: 100%;
    overflow-x: hidden;
}
	


body.homepg.homebg {
	height: unset;
    width: 100%;
    overflow-x: hidden;
}
/*body*/

/*case-study*/
.bg_title:before {
    width: 360px;
}
	
.bg_title {
    font-size: 45px;
    padding: 5px 0 10px 25px;
}
	
.case_studies_brif {
    padding: 25px 0 0;
}
.case_studies_video .case_logo {
    width: 38% !important;
    margin: 0 !important;
    left: -10px !important;
}
	
.case-stu-vid {
    width: 92% !important;
}
	
.case_studies_brif h3 {
    font-size: 35px;
    margin: 0 0 0;
}
	
.case_studies_brif p {
    font-size: 20px;
    margin: 5px 0 0;
}
	
.case_studies_btn_box {
    margin: 35px 0 0;
}
	
.yellow_btn, .red_btn  {
    font-size: 13px;
    padding: 12px 25px;
}
	
.case-stu {
    height: 425px;
}

.case_studies_video .case_logo {
    width: 50%;
}
/*case-study*/

/*see-how-it-works*/
	
/* .it_work_box_down:before {
    left: 0;
	display: none;
}
	
.it_work_box_up:before{
	display: none;
} */
	
.it_work_sec {
    padding: 30px 0 30px;
}
	
.title_blk {
    font-size: 30px;
	margin: 0px 0 15px 0;
}
	
.para_title {
    font-size: 15px;
    margin: 0;
}
	
.title_blk:after {
    bottom: -10px;
}
	
.it_work_box_down {
    margin: 80px 0 0;
}
/* .it_work_box.it_work_box_down.wow.bounceInUp.last::before {
    margin-bottom: 50px;
} */
/* .cta2 {
    padding: 20px 0 !important;
    margin-top: 50px;
} */
	
/* .container-fluid {
    padding-left: unset !important;
    padding-right: unset !important;
    margin-right: unset !important;
    margin-left: unset !important;
    width: unset !important;
} */
	
/* .it_work_box.it_work_box_up.wow.bounceInUp img, .it_work_box.it_work_box_down.wow.bounceInUp img {
    width: 80%;
    margin-left: 45px;
} */
	
.it_work_box h3 {
    margin: 15px 0 0;
    font-size: 16px;
}
	

/*see-how-it-works*/

/*types-of-explainer-videos*/
	
/* section.types_of_videos_sec {
    display: none;
} */
	
.home-banner-content p span {
    padding: 3px 6px;
    background: #241451;
    margin: 0 2px;
}

/*types-of-explainer-videos*/

/*header*/
	
/* .logo-area {
    margin: -8px 0 -20px;
} */
		
.dtf.posrelative.textarea {
    width: 100%;
    margin: 0 0 0;
}
	
.logo {
    padding: 0 0 10px;
}

/* textarea.header {
    height: 70px !important;
    padding: 24px 25px;
} */

.row.appr-warp.mtpx-50 .col-lg-4 {
    margin: -35px 0 -35px;
}
	
.home-banner {
    margin: 0;
}
	
.home-banner-content p span {
    font-size: 11px;
}
	
.home-banner-content h3 {
    padding: 0;
}
	
div.list-point {
    padding: 5px 0;
}
	

	

	
/*header*/
	
	
/*why-explainer-videos*/
	
.title_blk {
    font-size: 28px !important;
    line-height: 35px;
    text-align: center;
}
	
.wow {
    visibility: visible !important;
}
	
.para_title {
    font-size: 15px;
    text-align: center;
}
	
.why_explainer_box_text h3 {
    font-size: 18px;
    margin: 30px 0 20px;
    display: inline;
}
	
.why_explainer_sec:before{
	display: none;
}
	
.why_explainer_sec {
    padding: 20px 0 10px;
}
	
.why_explainer_sec {
    z-index: 9;
}

/* .case_studies_btn_box.order-chat.wow.bounceInUp {
    width: unset;
    margin: 0 auto;
} */

	
/*why-explainer-videos*/
	

/*portfolio*/
	
.tab-custom.sample .tabbing-links li {
    width: 45%;
}
/*portfolio*/
	
/*contact-form*/
section.howhelp-sec {
    background: #ffffff url(../../images/types-of-videos-bg-left.png);
    background-repeat: no-repeat;
    background-position: left -6px top 11px;
    padding: 60px 0 10px;
    display: table;
    width: 100%;
    position: relative;
}
/* 	
section.sec-padding.portsect.mtpx-100.portfolio-mob {
    margin: 35px 0 0 !important;
} */
	
.portsect p {
    padding-bottom: 10px;
}
	
section.howhelp-sec {
    padding: 30px 0;
}

/*contact-form*/
	
/*2d-banner*/
/* .inner-banner-content {
    padding: 0px;
    margin: 70px 0 0;
} */
	
.banner-form {
    margin: 30px 0 0;
    border: 1px solid #000;
    box-shadow: none;
    padding: 10px;
}
	
/* .fldset {
    margin: 0 -6px 0 30px;
} */
	
.chatbannertxt {
    padding: 5px 0px;
}
	
.banner-form {
    margin: 30px 0 263px;
}
/*2d-banner*/
	
	
/*we-are-hear-to-help*/
/* .process-banner-video.offset-lg-2.col-lg-8 {
    margin: 15px -13px 0 !important;
} */
/*we-are-hear-to-help*/
	
/*contact-form*/

.contact-form-pg {
    background-image: none;
}

/*contact-form*/
	
/*popup-form*/
.remodal h1 {
    font-size: 20px !important;
}
	
.remodal h4 {
    font-size: 22px !important;
}
/*popup-form*/
	
}


@media (max-width: 820px) and (min-width: 541px) {
    .tab-navigation{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .custom-margin{
        margin-top: 100px;
    }
    .form-mobile-width{
        width: 100%;
    }

    /* .inner-banner-content {
        padding: 0px;
        margin: 1004px 0 0;
    } */
    .set-width{
        max-width: 571px;
    /* margin-top: -79px; */
    margin-bottom: 1056px
    }
    .banner-form{
        margin: 0px;
      }

      /* .fldset {
        margin: 0px;
    } */

    /* .case_studies_btn_box.order-chat.wow.bounceInUp {
        width: unset;
        margin: 0 auto;
    } */
    .flex-col-handle{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .custom-margin-bottom {
        margin-bottom: 1062px;
      }

    /* .flex-handle{
        display: flex;
        justify-content: center;
        align-items: center;
    } */
   
}

@media (max-width: 767px) and (min-width: 360px) {
    
    .flex-handle{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex-col-handle{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .custom-margin-top {
        margin-top: 24px; /* You can use any size you prefer */
      }

      .banner-form{
        margin: 0px;
      }


    
   
}