.portfolio.portfolio #left-menu{display:none;}

/* beloved end */
 /* ark branding.css start*/
  :root {
    --color-b1: #013034;
    --color-b2: #808d83;
    --color-b3: #c9cec9;
    --color-b4: #d6d6cb;
}
p{font-size: 20px;}
.pt-120{padding-top: 120px;}
.pb-120{padding-bottom: 120px;}

.container {max-width: 1280px;padding-top: 80px;padding-bottom: 80px;border-bottom: 1px solid #ccc;} 
.row{display: flex;align-content: flex-start;align-items: stretch; }

/* angel-bee start */
section#work-video .alert { margin-top: 20px;}
section#work-video .video_box_wrap {height:auto;width:100%;overflow:hidden;position:relative;padding-bottom:20px;/* border:1px solid #ccc; *//* border-left: 1px solid #ccc; */min-height:420px;margin-top: -1px;}
section#work-video .video_box_wrap .video_box { background:#eee;} 


section#work-video .video_project{padding: 12%;height:100%;position: relative;z-index: 10;}
section#work-video .video_project .line{position: absolute;width: 0%;height: 3px;background: #fff;z-index: 999;left: 0px;top: 50%;transition: all 0.5s ease;}
section#work-video .video_project h1 {font-size: 10vh;margin: 0px;font-family: 'open sans';position: absolute;top: 49%;left: 50%;opacity: 0;color: transparent;transform: translate(-50%,-50%);transition: all 0.5s ease-in-out;z-index: 999;}

section#work-video a.html5lightbox:hover .video_project h1 { opacity: 1;transition: all 0.5s ease-in-out;}
section#work-video .video_details {padding:0 5%;position: relative;z-index: 2;display: flex;}
section#work-video .video_details p {font-size: 15px; margin-top:20px;}
section#work-video .project_number {position: relative;margin: 0px auto;clear: both;font-size: 12px;font-family: var(--font-number);font-weight: 500;margin-top: 10px;color: transparent;-ms-transform: rotate(-270deg);-webkit-transform: rotate(-270deg);transform: rotate(-270deg);}
section#work-video .line_vertical { width: 1px;height: 30px;margin: 0px auto;background: #000;/* float: left; */
clear: both;transition: all 0.5s ease;}


section#work-video .lightboxcontainer { width:100%;text-align:left;}
section#work-video .lightboxleft { width: 40%;float:left;}
section#work-video .lightboxright { width: 60%;float:left;}
section#work-video .lightboxright iframe { min-height: 390px;}
section#work-video .divtext { margin: 36px;}
@media (max-width: 800px) { 
	section#work-video .lightboxleft { width: 100%;}
	section#work-video .lightboxright { width: 100%;}
	section#work-video .divtext { margin: 12px;}
}

span#msg {position: fixed;bottom: 0;left: 0;width: 100%;z-index: 999;margin: 0px;}
span#msg > div {margin-bottom: 0px;text-align: center;font-size: 21px;}

/*----video--overlay----*/
/* 
when .item:hover, show overlay.
overwrite .item-overlay."position"
*/

section#work-video .item-overlay {cursor: default !important;position: absolute !important;top: 0;left: 0 !important;bottom: 0;/*background: rgba(0,0,0,0.5);*/color: #fff;overflow: hidden;text-align: center;/* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */width: 0%;z-index:1;transition: all 1s ease-in;}
section#work-video .item-overlay.orange { background: rgba(244, 142, 126, 1);}
section#work-video .item-overlay.magenta { background: rgba(184, 159, 255,1);}
section#work-video .item-overlay.greenishblue { background: rgba(80, 172, 204,1);}
section#work-video .item-overlay.blue { background: rgba(43, 104, 210, 1);}
section#work-video .item-overlay.green { background: rgba(95,226,128,1);}
section#work-video .item-overlay.yellow { background: rgba(241,200,8,1);}
section#work-video .item-overlay.darkorange { background: rgba(242,105,62,1);}
section#work-video .item-overlay.pink { background: rgba(235,0,139,1);} 
section#work-video .item-overlay.top { top: 100%;}
section#work-video .item-overlay.right {/* right: 0%; *//* left: -100%; *//* width: 0%; */}
section#work-video .item-overlay.bottom { bottom: 100%;}
section#work-video .item-overlay.left { left: 100%;}
/* misc. CSS */ 
section#work-video .item {/* position: relative; *//*border: 1px olid #333;*//* float: left; *//* margin: 2%; *//* overflow: hidden; *//* width: 21%; *//* min-height: 500px; */max-width: 540px;}
section#work-video .item img { max-width: 100%;}
/* end of misc. CSS */

section#work-video a.html5lightbox:hover .item .item-overlay.top { top: 0;}
section#work-video a.html5lightbox:hover .item .item-overlay.right {right: 0 !important;left: inherit !important;width: 100%;transition: all .5s ease-out;}
section#work-video a.html5lightbox:hover .item .item-overlay.bottom { bottom: 0;}
section#work-video a.html5lightbox:hover .item .item-overlay.left { left: 0;}

section#work-video a.html5lightbox {color: #000;text-decoration: none;}
section#work-video a.html5lightbox .item img { transition: all 0.5s ease;}
section#work-video a.html5lightbox:hover .item img { opacity: 1;border-radius:50%;transition: all 0.5s ease;/*border:5px solid #fff;*/}
section#work-video a.html5lightbox:hover .video_project .line {width: 25%;opacity: 1;/* background: #FFFFFF; *//* height: 3px; */transition: all 0.5s ease;}

section#work-video a.html5lightbox .video_project .video_project-images:after { content: "";position: absolute;z-index: 99;width: 100%;height: 100%;left: 0%;top: 0%;border: 5px solid rgba(255,255,255,0.00) !important;transition: all 0.5s ease-in-out, .5s;}
section#work-video a.html5lightbox:hover .video_project .video_project-images:after { border-radius: 10%; /*border-bottom-right-radius: 50%;border-top-left-radius: 50%;*/background: rgba(51, 51, 51, 0.34);/*border:5px solid #fff;*/transition: all 0.5s ease-in-out;}


div#html5-watermark { display: none !important;}


div#html5-elem-wrap,
div#html5-elem-data-box { background: rgb(26, 26, 26) !important;}
section#work-video #html5box-html5-lightbox #html5-text { color: #FFF !important;}
section#work-video a.html5lightbox:hover .project_number1 {color:#fff !important;text-decoration: none;border: none;outline: none;transition: all 0.5s ease;}
section#work-video a.html5lightbox:hover .project_number:after {color:#fff !important;text-decoration: none;border: none;outline: none;transition: all 0.5s ease;}

section#work-video a.html5lightbox:hover .line_vertical { height:50px;background:#fff !important;transition: all 0.5s ease;}
section#work-video .video_project-images 	{border:5px solid #fff;position:relative;transition: all 0.5s ease-in-out;/*background-size: 186%  !important;*/}
section#work-video .video_project img.gif 	{opacity:0; position:absolute; top:0px; z-index:9; display:none;}
section#work-video a.html5lightbox:hover .video_project-images { border-radius: 10%; /*border-bottom-right-radius: 50%;border-top-left-radius: 50%;*/transition: all 0.5s ease-in-out;}

/*section#work-video a.html5lightbox:hover .video_project img.webp, 
section#work-video a.html5lightbox:hover .video_project-images img.webp {opacity:0; position:relative; top:1; z-index:0}*/
/*section#work-video section#work-video a.html5lightbox:hover .video_project img.gif, 
section#work-video a.html5lightbox:hover .video_project-images img.gif	{opacity:1; }*/

section#work-video .video_details p span {margin-left: 9px;font-size: 13px;font-weight: 400 !important;line-height: 20px;}
section#work-video a.html5lightbox:hover .video_project:before {left: calc( 36% - 7vh );opacity: 1;transition: all 0.5s ease;}
section#work-video a.html5lightbox .video_project:before {content: "";position: absolute;top: calc( 61% - 7vh );left: 0;/* transform: translate(-50%,-50%); *//* margin: 0px auto; */z-index: 9999;width: 6vh;height: 6vh;background: rgba(0,0,0,0.8);opacity: 0;border-radius: 1.5vh;transition: all 0.5s ease;} 


section#work-video a.html5lightbox:hover .video_project:after {/* left: 49%; */opacity: 1;transition: all 300ms ease-in-out;} 
section#work-video a.html5lightbox .video_project:after {content: "";position: absolute;top: calc( 69% - 7vh );left: calc( 46% - 7vh );transform: translate(-50%,-50%);/* margin: 0px auto; */z-index: 99999;border-top: 1.1vh solid transparent;border-right: 1.1vh solid transparent;border-bottom: 1.1vh solid transparent;border-left: 1.8vh solid rgb(255, 255, 255);opacity: 0;transition: all 300ms ease-in-out;}




/*section#work-ui-web .slider_vid eo_caption h2 {font-family: 'Dancing Script', cursive;}*/
section#work-ui-web #nav_scrollspy li a, #nav_scrollspy li .container {/*display: none;*/visibility: hidden;opacity: 0;transition: visibility 0s 1s, opacity 1s linear;}
section#work-ui-web #nav_scrollspy li.active a, #nav_scrollspy li.active .container {/*display: block;*/visibility: visible;opacity: 1;transition: opacity 1s linear;}
section#work-ui-web a.ui_box_wrap {height: auto;width: 100%;overflow:hidden;/*position:relative;*/float:left;margin-bottom:100px;}
@media screen and (min-width: 1280px)
{
    section#work-ui-web a.ui_box_wrap {padding-bottom: 28%;margin-bottom: 0;}
}

section#work-ui-web a.ui_box_wrap .project_name{color:#333333;font-size: 14px;}
section#work-ui-web a:hover.ui_box_wrap:hover .project_name{color:#000000}
section#work-ui-web a.ui_box_wrap .overlay_weblinks i{font-size:40px;position:absolute;opacity:0;top:30%;left:45%;margin:0px auto;transition:all 0.5s ease-in-out;}
section#work-ui-web a:hover.ui_box_wrap:hover .overlay_weblinks i{font-size:40px;opacity:1;margin:0px auto;transition:all 0.5s ease-in-out;}
section#work-ui-web a.ui_box_wrap .overlay_weblinks{background:rgba(0,0,0,0.00);/*opacity:0;*/color:#ffffff;position:absolute;left: 18px;z-index: 9;top:0;width: 90%;height:100%;transition:all 0.5s ease-in-out;}
section#work-ui-web a:hover.ui_box_wrap:hover .overlay_weblinks{font-size:5vw;background:rgba(0,0,0,0.7);/*opacity:.6;*/transition:all 0.5s ease-in-out;}
section#work-ui-web a.ui_box_wrap .ui_box {background:#eee;}
section#work-ui-web a.ui_box_wrap .ipad_icon{background:url(../../img/ui-work/ipad-icon.webp) no-repeat top center;background-size:100%;width: calc(100% - 30px);height:100%;position:absolute;z-index: 10;}
section#work-ui-web .ipad_project{width: 67.8%;height: 100%;margin: 13.7% 0% 3% 17%;}
section#work-ui-web a.ui_box_wrap .laptop_icon{background:url(../../img/ui-work/laptop-icon.webp) no-repeat top center;background-size:100%;width: calc(100% - 30px);height:100%;position:absolute;z-index: 10;}
section#work-ui-web .laptop_project{width: 75%;height:100%;margin: 10.3% 0% 3% 12.6%;}
section#work-ui-web a.ui_box_wrap .computer_icon{background:url(../../img/ui-work/computer-icon.webp) no-repeat top center;background-size:100%;width: calc(100% - 30px);height:100%;position:absolute;z-index: 10;}
section#work-ui-web .computer_project{width: 92%;height: 100%;margin: 4% 0% 0% 3.5%;}
section#work-ui-web .project_name {position: absolute;z-index: 12;left: 15%;bottom: 8%;}

/* angel-bee end */


/* beloved start */
.work-video-sec-hero {padding: 0px 10px 0px 10px;}
.work-video-sec-hero .head-box {padding: 130px 0px 30px 0px;background: #fff;}
.work-video-sec-hero .head-box .work-client-logo {margin-top: 6px;border-radius: 7px;overflow: hidden;border: 1px solid #dadada;}
.work-video-sec-hero .head-box .work-client-logo img {}
.work-video-sec-hero .without-video {margin: 70px 0px 30px 0px;border-radius: 7px;border: 2px solid #e8e8e8;}
.work-video-sec-hero .head-box h1 {color: #ed008c;font-size: 50px;margin-top: 27px;margin-bottom: 30px;line-height: 1.1;}
.work-video-sec-hero .head-box h3 {font-size: 21px;font-weight: 600;margin-bottom: 15px;}
.work-video-sec-hero .head-box p {color: #666;font-size: 14px;font-weight: 100;}
.work-video-sec-hero .head-box p.lead {color: #333;font-size: 18px;font-weight: 100;width: 94%;text-align: left;}
.work-video-sec-hero .head-box ul {margin: 0px;padding: 0px;list-style-type: none;position: relative;top: -3px;}
.work-video-sec-hero .head-box ul li {font-size: 16px;font-weight: 600;padding: 3px 0px 3px 25px;position: relative;}
.work-video-sec-hero .head-box ul.para-list li {font-size: 18px;font-weight: 400;text-align: left;}
.work-video-sec-hero .head-box ul li:after {content: "";position: absolute;top: 10px;left: 0;width: 12px;height: 5px;transform: rotate(-45deg);box-shadow: -2px 1px 0 #ed008c;}
.work-video-sec-hero .video-container-box {width: 100vw;height: 100vh;display: table-cell;}
.work-video-sec-hero .video-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;pointer-events: none;overflow: hidden;}
.work-video-sec-02 h2 {font-size: 42px;line-height: 1.2;margin-top: -7px;margin-bottom: 20px;}

@media screen and (max-width: 768px) {
	.work-video-sec-02 h2 {font-size: 30px;margin-bottom: 15px;}
	.work-video-sec-hero .head-box h1 {font-size: 36px;margin-bottom: 15px;}
}
.work-video-sec-02 p {font-size: 18px;font-weight: 100;}
.work-video-sec-02 .owl-carousel {}
.work-video-sec-02 .owl-carousel .item {padding: 25px;}
.work-video-sec-02 img, .work-video-sec-02 .owl-carousel .item img {max-width: 100%;border-radius: 7px;border: 2px solid #e8e8e8;}
.work-video-sec-02 .owl-carousel {}
.work-video-sec-02 .owl-carousel .item {padding: 25px 0px;}
.work-video-sec-02 img, .work-video-sec-02 .owl-carousel .item img {max-width: 100%;border-radius: 7px;border: 2px solid #e8e8e8;}
.work-video-sec-02 .owl-thumbs {text-align: center;}
.work-video-sec-02 .owl-thumbs button {transition: auto;cursor: pointer;display: inline-block;width: 80px;margin: 10px;background: #fff;border: 2px solid #e8e8e8;border-radius: 7px;}
.work-video-sec-02 .owl-thumbs button img {max-width: 100%;}
.work-video-sec-02 .owl-thumbs button:focus, .work-video-sec-02 .owl-thumbs button.active:focus, .work-video-sec-02 .owl-thumbs button.active {outline: none;border: 2px solid #0e0d11;border-radius: 7px;}
.work-video-sec-02 .owl-thumbs button.active img {}
.work-video-sec-02 ul.cs-tabs {text-align: center;/* margin-top: -13px; */border: none;padding: 0px 15px;display: block;}
.work-video-sec-02 ul.cs-tabs li {display: inline-block;padding: 10px;}
.work-video-sec-02 ul.cs-tabs li a {color: #000;font-size: 18px;line-height: 1.2;padding: 10px 26px;border: 2px solid #e8e8e8;border-radius: 10px;transition: all 300ms ease-in-out;}
.work-video-sec-02 ul.cs-tabs li a.active, .work-video-sec-02 ul.cs-tabs li a:hover, .work-video-sec-02 ul.cs-tabs li a:focus {color: #ffffff;font-weight: 600;background: #000000;/* border-radius: 0px 0px .5rem .5rem; */transition: all 300ms ease-in-out;}
.work-video-sec-02 .cs-tabs-content {}
.work-video-sec-02 .cs-tabs-content .tab-pane {}
.work-video-sec-02 .cs-tabs-content .tab-pane img {margin-bottom: 25px;margin-top: 25px;}
.work-video-sec-02 .onetouch-03 {position: absolute;top: 6%;left: -2%;width: 400px;height: 350px;transform: scale(.275);}
.work-video-sec-02 .onetouch-html-02 {position: absolute;top: 14%;right: 7%;width: 400px;height: 350px;transform: scale(.675);}
.work-video-sec-02 a.website-link {color: #ff0097;padding: 7px 7px;margin: 0px 5px;background: #fffcfe;border: 1px solid #ff0097;box-shadow: inset 0px 0px 0px 3px white;}
.your-class-center {padding: 0px 0px;}
.your-class-center .slick-list {padding: 90px 20% !important;}
.your-class-center .img-gallery {position: relative;transition: all 300ms ease-in-out;/* filter: blur(3px); */border: none;}
.your-class-center .w-play-video {}
.your-class-center .w-play-video:before {border-radius: 0px;}
.your-class-center .w-play-video iframe {border-radius: 0px;}
.your-class-center .w-play-video .sv-playvideo {transform: translate(-50%, -50%) scale(0.85);}
.your-class-center .w-play-video:after {border-radius: 0px;height: 100%;}
.your-class-center .slick-current.slick-active a, .your-class-center .slick-current.slick-active .img-gallery {-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);z-index: 9;border-radius: 0px;border: none;filter: blur(0px);box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);transition: all 300ms ease-in-out;}
.your-class-center .slick-current .w-play-video:after {opacity: 0.2;}
a.btn-visit-website {display: inline-block;color: #ed008c;font-family: "MetaCompPro-CondNormal W01 Rg";font-weight: 700;font-size: 14px;text-transform: uppercase;padding: 8px 12px;margin-bottom: 20px;border-bottom: 2px solid #ed008c;z-index: 9999;position: relative;overflow: hidden;transition: all 300ms ease-in-out;}
a.btn-visit-website:before {content: "";width: 100%;height: 0%;background: #ececec;position: absolute;bottom: 0;left: 0;transition: all 300ms ease-in-out .2s;}
a.btn-visit-website:after {content: "";width: 100%;height: 0%;background: #ed008c;position: absolute;bottom: 0;left: 0;transition: all 300ms ease-in-out;}
a.btn-visit-website span {position: relative;z-index: 9;}
a.btn-visit-website:hover {color: #fff;text-decoration: none;transition: all 100ms ease-in-out;}
a.btn-visit-website:hover:before {height: 100%;transition: all 300ms ease-in-out;}
a.btn-visit-website:hover:after {height: 100%;transition: all 300ms ease-in-out .2s;}
.b_bg-color-01 {background: var(--color-b1);}
.b_bg-color-02 {background: var(--color-b2);}
.b_bg-color-03 {background: var(--color-b3);}
.b_bg-color-04 {background: var(--color-b4);}
.bc_full {height: 100vh;overflow: hidden;}
.bc_half {height: 50vh;overflow: hidden;}
.branding-wrp {}
.branding-wrp p {font-size: 21px;}
.branding-wrp h1 {font-size: calc(24px + 3vw);line-height: 1;}
.width-450 {max-width: 450px;text-align: left;display: inline-block;}
.branding-sec-01 {height: 100vh;overflow: hidden;position: relative;}
.branding-sec-01 .h_logo {position: absolute;top: 70%;left: 50%;width: calc(300px + 10vw);transform: translate(-50%,-50%);}
.branding-sec-01 .h_img {}
.branding-sec-02 {color: var(--color-b1);padding: 20vh 0px;background: var(--color-b3);}
.branding-sec-02 .bc_logo-shape {width: calc(100px + 5vw);margin-top: 80px;}
.branding-sec-03 {}
.branding-sec-03 .bc_half {color: #ffffff;text-align: center;display: flex;align-items: flex-end;justify-content: center;padding-bottom: 10%;}
.branding-sec-03 p {line-height: 1.2;}
.branding-sec-03 p span {font-family: 'roboto';font-size: 16px;}
.branding-sec-05 {}
.branding-sec-05 .logos-variation {padding: 13vh 5vh;text-align: center;}
.branding-sec-05 .logos-variation img {max-width: 200px;}
.branding-sec-06 {position: relative;z-index: 9;}
.ark-product-01 {position: relative;top: 10vh;filter: drop-shadow(-4px 24px 16px rgba(0,0,0,.5));}
.branding-parallax {background-repeat: no-repeat;background-position: center center;background-size: cover;background-attachment: fixed;}
.branding-parallax.pb-01 {height: 75vh;background-image: url("../../portfolio/parallax-banner-01.webp");}
.branding-parallax.pb-02 {height: 100vh;background-image: url("../../portfolio/thumb-02.webp");background-attachment: scroll;}
.branding-parallax.pb-03 {height: 100vh;background-image: url("../../portfolio/parallax-banner-02.webp");}
.branding-parallax.pb-04 {height: 100vh;background-image: url("../../portfolio/parallax-banner-03.webp");}
.branding-sec-09 {color: var(--color-b1);text-align: center;position: relative;z-index: 9;height: 100vh;display: flex;align-items: center;}
.branding-sec-09 h1 {}

 /* ark branding.css end*/


 /* blue-orange start */
.branding-wrp{}
.branding-wrp p{font-size:21px;}
.branding-wrp h1{font-size:calc(24px + 3vw);line-height:1;}
.branding-wrp h2{font-size:calc(24px + 3vw);line-height:1;}

.width-450{max-width:450px;text-align:left;display: inline-block;}
.branding-sec-video{position:relative;overflow:hidden;text-align:center;}
.branding-sec-video video{margin:auto;width: 100%;}
.branding-sec-video .img_bottom{margin-bottom:30px;}

.branding-sec-01{height:100vh;overflow:hidden;position:relative;text-align:center;}
.branding-sec-01 .h_logo{position:absolute;bottom:5%;left:0;right:0;margin:auto;width:calc(80px + 5vw);}
.branding-sec-01 .h_img{}
.branding-sec-01 video{position: absolute;top: 50%;left: 50%;/* right:0; *//* bottom:0; */margin:auto;min-width:100%;min-height:100%;transform: translate(-50%,-50%);z-index:-1;}

.branding-sec-02{padding: 15vh 0px 15vh 0px;}
.branding-sec-02 h1{color:var(--color-b2);}
.branding-sec-02 video{margin:auto;width: 100%;}

.branding-sec-03{padding: 15vh 0px 15vh 0px;}
.branding-sec-03 h1{color:var(--color-b2);}
.branding-sec-03 p{line-height: 1.2;}
.branding-sec-03 p span{font-family:'roboto';font-size:16px;}


.branding-sec-04{padding: 15vh 0px 15vh 0px;}
.branding-sec-04 .illustration-slider{display: flex}
.branding-sec-04 .illustration-slider .item{padding:15px;}
 
.branding-parallax{background-repeat:no-repeat;background-position: center center;background-size:cover;background-attachment:fixed;}

.branding-parallax.pb-01{height:100vh;background-image: url("../../portfolio/key-visual-01.webp");}
.branding-parallax.pb-05{height:100vh;background-image: url("../../portfolio/key-visual-05.webp");}
.branding-parallax.pb-06{height:100vh;background-image: url("../../portfolio/key-visual-06.webp");}

 /* blue-orange end */



.projects-sec-heading{min-height: 70vh;padding-top: 15vh;padding-bottom: 10vh;text-align: center;display: flex;align-items: flex-end;background: #ffffff;}
.projects-sec-heading .container{border-bottom:none;}
.projects-sec-heading .client_logo{max-width: 120px;}
.projects-sec-heading h1{font-size: 54px;margin-top: 20px;margin-bottom: 30px;}
.projects-sec-heading p{max-width: 780px;display: inline-block;}

/*iframe.iframe-video-parallax {width: 100%;height: 110%;position: fixed;top: 0%;right: 0;bottom: 0;left: 0;margin: auto;z-index: -1;}*/
iframe.iframe-video-parallax {width: 100vw;height: 100vw;position: absolute;top: 0%;right: 0;bottom: 0;left: 0;margin: auto;z-index: -1;}


.projects-sec-parallax{width:100%;height:100vh;background-position:center center;background-size:cover !important;background-attachment:fixed !important;position:relative;}
.projects-sec-parallax .video-wrapper{}
.projects-sec-parallax .video-wrapper video{}
.projects-sec-parallax a.btn-pv {width: 100%;height: 100%;position: relative;z-index: 1;overflow: hidden;transition: all 500ms ease-in-out;display: flex;justify-content: center;align-items: center;align-content: center;}
.projects-sec-parallax a.btn-pv:before {content: "";}
.projects-sec-parallax a.btn-pv:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);transition: all 500ms ease-in-out;}
.projects-sec-parallax a.btn-pv .sv-playvideo {position: absolute;top: 50%;left: 50%;width: 120px;height: 120px;border-radius: 100px;transform: translate(-50%, -50%);z-index: 5;transition: all 500ms ease-in-out;}
.projects-sec-parallax a.btn-pv .sv-playvideo:before {content: "";position: absolute;top: 50%;left: 57%;border-top: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 16px solid white;transform: translate(-50%,-50%);}
.projects-sec-parallax a.btn-pv .sv-playvideo:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 100px;}
.projects-sec-parallax a.btn-pv .sv-playvideo img {margin: auto !important;border: none !important;filter: invert(100) brightness(100);-webkit-animation: scrolldown__circle 15s infinite;-moz-animation: scrolldown__circle 15s infinite;-o-animation: scrolldown__circle 15s infinite;animation: scrolldown__circle 15s infinite;}

.projects-sec-parallax a.btn-pv:hover {transition: all 500ms ease-in-out;}
.projects-sec-parallax a.btn-pv:hover:after {background: rgba(0, 0, 0, 0.6);transition: all 500ms ease-in-out;}


.projects-sec-details{padding: 0px 150px;background: #ffffff;position: relative;z-index: 1;}
.projects-sec-details .about-project{}
.projects-sec-details .about-project .row{display: flex;align-content: flex-start;align-items: stretch;flex-wrap: nowrap;}
.projects-sec-details .about-project h2{font-size: 44px;line-height: 1;}
.projects-sec-details .about-project p{}

.projects-sec-details .full-width-image{padding-left:15px;padding-right:15px;text-align:center}
.projects-sec-details .full-width-image img{border-radius:15px;}

.services-list ul {margin: 0px;padding: 0px;list-style-type: none;position: relative;gap: 7px;display: flex;flex-direction: column;}
.services-list ul li {font-size: 20px;padding: 3px 0px 3px 25px;position: relative;}
.services-list ul li:after {content: "";position: absolute;top: 10px;left: 0;width: 12px;height: 5px;transform: rotate(-45deg);box-shadow: -2px 1px 0 #ed008c;}

/*.col-sticky{height: 400px;display: flex;flex-direction: column;justify-content: flex-start;top: 120px;position: sticky;}
.col-sticky p{max-width:450px;}*/

.sticky-inner{/*background: red;height: 100%;*/max-height:50vh;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;}


.sticky-heading {padding-right: 18%;/*height: 360px;height:100%;*/display: flex;flex-direction: column;justify-content: flex-start;/*top: 120px;position: sticky;*/}

.sticky-points {height: 300px;display: flex;flex-direction: column;top: 65vh;position: sticky;justify-content: flex-end;align-items: flex-start;}
.sticky-points ul{margin:0px;padding:0px;list-style-type:none;}
.sticky-points ul li{padding: 5px 15px 5px 0px;/* border-bottom:1px solid #cccccc; */}
.sticky-points ul li:nth-last-child(1){border:none;}

.portfolio-work-sticky{}
.portfolio-work-sticky h2{font-size: 36px;line-height: 1;margin-bottom: 30px;}
.portfolio-work-sticky p{}


.git-wrp{gap:30px;display: flex;flex-direction: column;}
.git-wrp .gallery-images{}
.git-wrp .gallery-images.column-01 ul{gap: 30px;column-count: 1;display: flex;flex-direction: column;}
.git-wrp .gallery-images.column-02 ul{gap: 30px;column-count: 2;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;}
.git-wrp .gallery-images.column-02 ul li{width: calc(50% - 15px);}
.git-wrp .gallery-images ul{margin: 0px;padding: 0px;list-style-type: none;}
.git-wrp .gallery-images ul li{}
.git-wrp .gallery-images ul li img{border-radius: 15px;}

.git-wrp .gallery-title{padding-top: 70px;padding-right: 27%;}
.git-wrp .gallery-title h3{font-size: 30px;}
.git-wrp .gallery-title p{}

.git-wrp .gallery-video{}
.git-wrp .gallery-video ul{margin: 0px;padding: 0px;list-style-type: none;}
.git-wrp .gallery-video ul li{}
.git-wrp .gallery-video ul .w-play-video{border-radius: 15px;}

.git-wrp .videos{}
.git-wrp .videos ul{margin: 0px;padding: 0px;list-style-type: none;}
.git-wrp .videos ul .w-play-video{border-radius: 15px;border: 1px solid rgba(0, 0, 0, 0.2);}




.w-play-video{display:inline-block;width:100%;margin-top: 25px;position:relative;z-index:1;overflow:hidden;transition:all 500ms ease-in-out;}
.w-play-video:before{content:"";position:absolute;top:80px;left:80px;width:calc(100% - 160px);height:calc(100% - 160px);border-radius:7px;overflow:hidden;z-index:5;transition:all 500ms ease-in-out;}
.w-play-video:after{content:"";position:absolute;top:0;left:0;width:100%;height: 100%;/* border-radius: 7px; */background: rgba(0, 0, 0, 0.3);transition:all 500ms ease-in-out;}
.w-play-video .play-icon{display:inline-block;position:absolute;top:50%;left:50%;width:100px;height:100px;background:#fff;border-radius:100%;border:10px solid rgba(0, 0, 0, 0.1);box-shadow:0 0 20px rgba(0, 0, 0, 0.5);z-index:1;transform:translate(-50%,-50%);transition:all 500ms ease-in-out;}
.w-play-video .play-icon:before{content:"";position:absolute;top:50%;left:60%;width:0;height:0;border-top:12px solid transparent;border-left:15px solid #333;border-bottom:12px solid transparent;border-right:12px solid transparent;transform:translate(-50%,-50%);transition:all 500ms ease-in-out;}
.w-play-video .play-icon:after{content:"";}
.w-play-video .play-text{color:#fff;font-size:21px;font-weight:900;letter-spacing:1px;text-transform:uppercase;display:inline-block;position:absolute;top:62%;left:50%;z-index:1;transform:translate(-50%,-50%);transition:all 500ms ease-in-out;}
.w-play-video .sv-playvideo{position:absolute;top:50%;left:50%;width:120px;height:120px;border-radius:100px;transform:translate(-50%, -50%);z-index:5;transition:all 500ms ease-in-out;}
.w-play-video .sv-playvideo img{margin: auto !important;border:none !important;filter:invert(100) brightness(100);-webkit-animation:scrolldown__circle 15s infinite;-moz-animation:scrolldown__circle 15s infinite;-o-animation:scrolldown__circle 15s infinite;animation:scrolldown__circle 15s infinite;}
.w-play-video .sv-text{}
.w-play-video .sv-playvideo:before{content:"";position:absolute;top:50%;left:57%;border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid white;transform:translate(-50%,-50%);}
.w-play-video .sv-playvideo:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:100px;}
.w-play-video:hover{transition:all 500ms ease-in-out;}
.w-play-video:hover .play-icon{transform:translate(-50%,-50%) scale(1.2);transition:all 500ms ease-in-out;}
/*.w-play-video iframe{width:100%;height:629px;top: 0px;position:relative;}*/
 /* make the iframe fill the box exactly */
.w-play-video iframe{position: absolute;inset: 0;width: 100%;height: 100%;display: block;z-index: 1;}
/* keep the wrapper perfectly 16:9 so no grey bars appear */
/*
.w-play-video{aspect-ratio: 16 / 9;}
*/

/* overlays shouldn't block clicks on the player */
.w-play-video::after,
.w-play-video::before,
.w-play-video .sv-playvideo{ pointer-events: none; }




a.next-portfolio{padding: 5%;min-height: 60vh;background: #ebebeb;overflow: hidden;position: relative;z-index: 9;display: flex;justify-content: center;}
a.next-portfolio .client-text{color: var(--color-02);font-size: var(--rfs-30);position: absolute;top: 15%;left: 50%;transform: translate(-50%,-50%);z-index: 1;}
a.next-portfolio .client-logo{position: absolute;top: -40%;left: 50%;transform: translate(-50%,-50%);}
a.next-portfolio .client-logo img{}
a.next-portfolio .client-thumb{width: 30%;position: absolute;top: 131%;left:50%;transform:translate(-50%,-50%);display: flex;align-items: center;justify-content: center;z-index: 1;transition: all 300ms ease-in-out;}
a.next-portfolio .client-thumb img{width: 100%;}
a.next-portfolio:hover{transition: all 500ms ease-in-out;}
a.next-portfolio:hover .client-thumb{width: 20%;top: 57%;transition: all 300ms ease-in-out;}
@keyframes scroll-next-left {
    to {
        left: calc(-100% / 3);
    }
}
.next-text-wrapper span {height: 100%;width: calc(100% / 6);display: flex;justify-content: center;align-items: center;font-size: clamp(1rem, 9vw, 8rem);padding: 0px 18%;position: absolute;top: 0;left: 100%;animation-name: scroll-next-left;animation-duration: 20s;animation-iteration-count: infinite;animation-timing-function: linear;}
.next-text-wrapper span:nth-child(1) {animation-delay: calc(20s / 6 * (6 - 1) * -1);}
.next-text-wrapper span:nth-child(2) {animation-delay: calc(20s / 6 * (6 - 2) * -1);}
.next-text-wrapper span:nth-child(3) {animation-delay: calc(20s / 6 * (6 - 3) * -1);}
.next-text-wrapper span:nth-child(4) {animation-delay: calc(20s / 6 * (6 - 4) * -1);}
.next-text-wrapper span:nth-child(5) {animation-delay: calc(20s / 6 * (6 - 5) * -1);}
.next-text-wrapper span:nth-child(6) {animation-delay: calc(20s / 6 * (6 - 6) * -1);}
.w1 {color:white ;mix-blend-mode: color-dodge;z-index: 1;}
.w2 {color:black;}


.work-result-page{width: 100%;padding: 0px 150px;background: linear-gradient(180deg, #f7f7f7, transparent);/* border-top: 1px solid #ccc; */position: relative;z-index: 1;}
.work-result-page .container-fluid{}
.work-result-page h2{font-size: 44px;line-height: 1;}
.work-result-page p{}





/* Common CSS */

:root {
    --new-para-01: clamp(1rem, 2vw, 1.3rem);
    --new-para-02: clamp(0.8rem, 1.8vw, 20px);
    --new-title: clamp(1.8rem, 4vw, 4rem);
    --new-subtitle: clamp(1rem, 2vw, 24px);
    --new-mw-700: 85%;
}


/* hero section */
.new_portfolio .img-wrapper {height: 50vw;width: 100%;aspect-ratio: 16 / 9;position: relative;}
.new_portfolio .hero-section .img-wrapper .logo {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:30vw;}
.new_portfolio .hero-section .img-wrapper .hero-img {width: 100%;height: 100%;object-fit: cover;filter:brightness(80%);}


.new_portfolio h4 {font-weight: 500;font-size: var(--new-subtitle);font-weight: 700;margin-bottom: 40px;}
.new_portfolio h1 {font-weight: 500;font-size: var(--new-title);}
.new_portfolio p {font-size: var(--new-para-01);}
.new_portfolio .sec-01-content {padding: 3vw 7vw 7vw 7vw;}
.new_portfolio .sec-01-content p {width: 95%;}
.new_portfolio .sec-01-content ul li {font-size: var(--new-para-01);font-weight: 700;}

.new_portfolio article{padding-top: 80px;padding-bottom: 50px;}
.new_portfolio .px-common {padding-left: 7vw;padding-right: 7vw;}
.new_portfolio .px-common p {width: 80%;}

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

	.projects-sec-details{padding: 15px;}
	.projects-sec-heading h1{font-size: 42px;}
     /*	changes by me*/
	.projects-sec-parallax { height: 50vh;}
	.sticky-heading {padding-right: 0px;}
	.work-result-page {padding: 0 15px;}
	
}

@media (max-width:767px) {
	.new_portfolio .px-common p {width: 100%;}
	.new_portfolio .sec-01-content p {width: 100%;}
     /*	changes by me*/
	.projects-sec-details .about-project .row{flex-wrap: wrap;}
	.git-wrp .gallery-title {padding-top: 10px;}
	.container-fluid,.container { padding: 24px;}
	.git-wrp .gallery-title {padding-right: 15%;}
	a.btn-visit-website {margin-bottom:0px;margin-top:1rem;}
	p{font-size: 18px;}
}

@media (max-width:576px) {
	.projects-sec-details .about-project h2 { font-size: 34px;}
	.sticky-points {position: unset; justify-content: flex-start;}
	.w-play-video .sv-playvideo,
	.projects-sec-parallax a.btn-pv .sv-playvideo { transform: translate(-50%, -50%) scale(0.8);}
}

@media (max-width:480px) {
	  .projects-sec-parallax {  height: 30vh;}
	.work-video-sec-02 ul.cs-tabs li a {font-size: 14px;padding: 10px 24px;}
	.work-video-sec-02 ul.cs-tabs{padding:0px;}
}

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

	.projects-sec-details{padding: 0px;}
	.projects-sec-heading h1{font-size: 38px;}
	
}