@charset "utf-8";


/*----- Zoom Variables -----*/
@media only screen and (min-width: 1366px) {
	:root {
		--zoom: 100%;
		--zoomRatio: 1;
		--zoomFactor: 1;
	}
}
@media only screen and (max-width: 1366px) {
	:root {
		--zoom: 90%;
		--zoomRatio: 0.9;
		--zoomFactor: 100/90;
	}
}
@media only screen and (max-width: 768px) {
	:root {
		--zoom: 80%;
		--zoomRatio: 0.8;
		--zoomFactor: 100/80;
	}
}
@media only screen and (max-width: 375px) {
	:root {
		--zoom: 70%;
		--zoomRatio: 0.7;
		--zoomFactor: 100/70;
	}
}



body {
	font-family: 'Poppins', sans-serif;
	padding: 0;
	overflow: hidden;
}
a {
	font-family: 'Poppins', sans-serif;
	text-decoration: none;
	color: #000;
	cursor: pointer;
}
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

::-webkit-scrollbar              {width: 10px;}
::-webkit-scrollbar-button       {height: 0;}
::-webkit-scrollbar-track        {background: #E0E0E0;}
::-webkit-scrollbar-track-piece  {}
::-webkit-scrollbar-thumb        {background: #000;}
::-webkit-scrollbar-corner       {}
::-webkit-resizer                {}

.mar50 {width: 100%; height: 50px; clear: both;}
.mar100 {width: 100%; height: 100px; clear: both;}

.slide {
	position: relative;
	overflow-x: hidden;
}

.gray {background: #f5f9fc;}

h2, h3, p {
	padding: 0;
	margin: 0;
}
.white > h2, .white > p {color: #fff;}
h2.white, p.white {color: #fff;}

.zindex20 {z-index: 20;}



/*=== Navigatio bar ===*/
#fp-nav {
    right: clamp(25px, 3vw, 3vw) !important;
    bottom: clamp(25px, 3vw, 3vw) !important;
	margin-top: 0 !important;
    top: auto !important;
	z-index: 5 !important;
	zoom: var(--zoom);
}
#fp-nav ul li:first-child {display: none !important;}

#fp-nav.white span {background: #fff !important;}



/*=== Fixed ===*/
.top-cont {
	position: fixed;
	left: clamp(15px, 2vw, 2vw);
	top: clamp(15px, 2vw, 2vw);
	z-index: 10;
	width: 40px;
	height: 40px;
	zoom: var(--zoom);
}
.top-cont a {
	width: 100%; height: 100%;
	display: block;
	position: absolute;
	left: 0; top: 0;
}
.top-cont .logo {
	background: url("../img/logo.png") center;
	background-size: 40px;
	-webkit-transition: background 0.2s 0.75s;
	transition: background 0.2s 0.75s;
}
.top-cont .logo.white {
	background: url("../img/logo2.png") center;
	background-size: 40px;
}
.top-cont .menulogo {display: none;}
.top-cont .menulogo img {width: 40px;}
.top-cont .back-btn {display: none;}
.top-cont .back-btn svg {
	display: block;
	margin: 5px auto;
	-webkit-transition: transform 0.2s;
	transition: transform 0.2s;
}
.top-cont .name {
	position: absolute;
	width: 110px;
	height: 50px;
	left: 50px; top: -5px;
	overflow: hidden;
}
.top-cont h2 {
	position: absolute;
	margin: 0;
	left: 0; top: 0;
	font-size: 21px;
	font-weight: bold;
	line-height: 25px;
}

.menu-btn {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	right: clamp(15px, 2vw, 2vw);
	top: clamp(15px, 2vw, 2vw);
	z-index: 10;
	cursor: pointer;
	zoom: var(--zoom);
}
.menu-btn div {
	background: #000;
	height: 3px;
	position: absolute;
	display: block;
	margin: auto;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	left: 0; right: 0;
	top: 0; bottom: 0;
}
.menu-btn.close div {background: #fff !important;}
.menu-btn div:first-child{
	width: 34px;
	-ms-transform: translate(0, -5px);
	-webkit-transform: translate(0, -5px);
	transform: translate(0, -5px);
}
.menu-btn div:last-child{
	width: 26px;
	-ms-transform: translate(-4px, 5px);
	-webkit-transform: translate(-4px, 5px);
	transform: translate(-4px, 5px);
}
.menu-btn.close div:first-child{
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu-btn.close div:last-child{
	width: 34px;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.menu {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0; top: 0;
	z-index: 3;
	background: #000;
	overflow: hidden;
	padding-top: calc(clamp(90px, calc(4vw + 60px), calc(4vw + 40px)) * var(--zoomRatio));
	padding-left: clamp(15px, 2%, 2%);
	padding-right: clamp(15px, 2%, 2%);
	padding-bottom: 0;
	box-sizing: border-box;
	display: none;
	z-index: 8;
}
.menu ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
	max-height: 100%;
    box-sizing: border-box;
    column-gap: 2%;
    row-gap: 1.5vw;
	overflow-x: hidden;
	overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
	border-radius: 25px;
}
.menu ul::-webkit-scrollbar {display: none;}

.menu ul li {
	width: 23%;
	float: left;
	border-radius: 25px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(30)
}

.menu ul li a {
	display: block;
	width: 100%;
	Height: 100%;
	background-size:  100%;
	background-position: center;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}
.menu ul li a span {
	position: absolute;
	width: 100%;
	height: 65px;
	line-height: 65px;
	bottom: 0;
	left: 0;
	color: #fff;
	font-weight: 400;
	font-size: 24px;
	text-align: center;
	zoom: var(--zoom);
}
.menu ul li a img {
	display: block;
	width: 100%;
}
.menu ul .margin {
	background: none;
	width: 100%;
	Height: calc((clamp(70px, calc(4vw + 40px), calc(4vw + 40px)) * var(--zoomRatio)) - 1.5vw);
}



/*=== Sections ===*/
.section .fp-slide {z-index: 10;}
.section .proj-cover, .section .view-proj {
	position: absolute;
	top: 0; bottom: 0;
	margin: auto;
}

.proj-cover .shape {
	position: absolute !important;
	left: auto !important;
}
.proj-cover img {position: absolute;}
.proj-cover .title {
	display: inline-block !important;
	position: absolute;
	height: 150px;
}
.proj-cover .title h2 {
	font-size: 85px;
	margin: 0;
	line-height: 90px;
}
.proj-cover .title p {
	font-size: 20px;
	position: absolute;
	right: 0; top: 110px;
	margin: 0;
	text-align: right;
	
}

/*=== Main Header ===*/
.section.active .fp-slidesContainer::after {
	content: '';
	display: none;
	width: 100%;
	height: calc(40px + 4vw);
	min-height: 70px;
	background: rgba(255,255,255,0.5);
	position: absolute;
	left: 0; top: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	backdrop-filter: blur(7.5px);
	zoom: var(--zoom);
}
.section.active .fp-slidesContainer.fixed::after {position: fixed;}
.section.active .fp-slidesContainer.opacity::after {opacity: 1;}
.fp-slidesContainer .slide {z-index: 10;}
.fp-slidesContainer .slide-proj {z-index: auto;}


/*=== Main Section ===*/
.wording-cont {
	height: 210px;
	position: absolute;
	top: 0; bottom: 0;
	margin: auto;
	zoom: var(--zoom);
}
.wording {
	width: 510px;
	height: 130px;
	padding: 40px 0 40px 0;
	overflow: hidden;
}
.wording p {
	font-size: 35px;
	position: absolute;
	margin: 0;
	padding: 0;
}
.wording h2 {
	font-size: 100px;
	height: 130px;
	line-height: 130px;
	margin: 0;
	float: left;
	display: inline-block;
}
.wording .word {
	display: inline-block;
	height: 130px;
	width: calc(100% - 200px);
	white-space: nowrap;
	position: absolute;
	left: 203px;
	
}
.wording .word div {
	width: 0;
    height: 130px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}
.wording .word div h2:first-child{width: 1px;}
.wording .word div h2:last-child{margin-right: -1px;}
.wording span {
	width: 20px;
	height: 170px;
	position: absolute;
	left: 50px;
	top: 30px;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.wording span div {
	background: #fc3d39;
	height: 0;
	width: 100%;
	background: url("../img/brush.png");
	background-size: 20px 170px;
	border-radius: 10px;
}

.main-txt {
	font-size: 14px;
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	position: absolute;
	left: 2vw;
	bottom: clamp(60px, 8vw, 100px);
	font-weight: 600;
}
.scroll {
	width: 100px;
	height: 12px;
	position: absolute;
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	right: 10px; bottom: 100px;
	z-index: 1;
}
.scroll img {float: left;}
.scroll p {
	float: right;
	line-height: 9px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.shapes {
	position: absolute;
	width: 100%; height: 100%;
	left: 0; top: 0;
}
.shapes img {
	position: absolute;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	opacity: 0;
	zoom: var(--zoom);
}
.shapes img:nth-child(1){left: 21% !important; top: 25% !important;}
.shapes img:nth-child(2){right: 25% !important; top: 15% !important;}
.shapes img:nth-child(3){left: 35% !important; bottom: 20% !important;}
.shapes img:nth-child(4){right: 16% !important; bottom: 30% !important;}

.shapes img:nth-child(7){left: 10% !important; top: 39% !important;}
.shapes img:nth-child(5){right: 37% !important; top: 20% !important;}
.shapes img:nth-child(8){left: 23% !important; bottom: 18% !important;}
.shapes img:nth-child(6){right: 18% !important; bottom: 24% !important;}

.shapes img:nth-child(12){left: 35% !important; top: 18% !important;}
.shapes img:nth-child(11){right: 15% !important; top: 38% !important;}
.shapes img:nth-child(10){left: 23% !important; bottom: 33% !important;}
.shapes img:nth-child(9){right: 28% !important; bottom: 16% !important;}

.shapes img:nth-child(16){left: 16% !important; top: 37% !important;}
.shapes img:nth-child(13){right: 37% !important; top: 20% !important;}
.shapes img:nth-child(15){left: 45% !important; bottom: 18% !important;}
.shapes img:nth-child(14){right: 18% !important; bottom: 24% !important;}

.wording-cont, .view-proj, .proj-cover {transform: scale(1.3) !important;}

/*=== Project Section ===*/

.slide-proj {
	overflow-y: scroll;
	width: 100%;
	height: auto;
}


.slide-proj .header {
	width: 100%;
	display: flex;
	position: relative;
	zoom: var(--zoom);
}

.slide-proj .header .text {
	width: 60%;
	max-width: calc(1000px + 10%);
	padding-left: max(5%, 60px);
	padding-right: max(5%, 60px);
	padding-top: 80px;
	padding-bottom: 80px;
	box-sizing: border-box;
	position: relative;
	height: fit-content;
}
.slide-proj .header.white .text {color: #fff;}
.slide-proj .header .text .bg {
	position: absolute;
	width: calc(100vw * var(--zoomFactor));
	height: 100%;
	left: 0; top: 0;
	z-index: -1;
}

.slide-proj .header .text h2 {
	font-size: clamp(3rem, 8vw, 5rem);
	line-height: 2.1ex;
	margin-bottom: 30px;
}
.slide-proj .header .text p {font-size: clamp(1.2rem, 2vw, 1.5rem);}

.slide-proj .header .cover {
	display: flex;
	width: 40%;
    justify-content: center;
	align-items: flex-end;
	position: relative;
}

.slide-proj .header1 .text {padding-top: clamp(100px, 10vw, 200px);}
.slide-proj .header .phone-feed {
	display: flex;
	position: relative;
	justify-content: center;
	margin-top: 60px;
}
.slide-proj .header1 .phone-feed {margin-top: clamp(80px, 8vw, 200px);}
.slide-proj .header .phone-feed img:hover {cursor: pointer;}
.slide-proj .header .phone-feed h2 {
    font-size: 80px;
	color: #e4e4e4;
	position: absolute;
	right: 95%;
	bottom: 20%;
	margin: 0;
	line-height: 80px;
	text-align: right;
	white-space: nowrap;
}
.slide-proj .header .phone-feed h2 .click,
.slide-proj .header .phone-feed h2 .here {display: block;}



.slide-proj .sm-feed {
	display: none;
	background: #000;
	position: fixed;
	width: 100%; height: 100%;
	padding: 0;
	padding-top: calc(clamp(70px, calc(4vw + 40px), calc(4vw + 40px)) * var(--zoomRatio));
	box-sizing: border-box;
	overflow: hidden;
	left: 0; right: 0;
	top: 0; bottom: 0;;
	z-index: 5;
}
.slide-proj .sm-feed > div {
	width: calc(100% - 5vw);
	max-width: 1080px;
	height: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: scroll;
	left: 0; right: 0;
	margin: 0 auto;
}
.slide-proj .sm-feed > div::-webkit-scrollbar {width: 0 !important;}
.slide-proj .sm-feed img {
	width: 100%;
	margin-bottom: calc(clamp(70px, calc(4vw + 40px), calc(4vw + 40px)) * var(--zoomRatio));
}

.slide-proj .sm-feed .close-btn {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	right: clamp(15px, 2vw, 2vw);
	top: clamp(15px, 2vw, 2vw);;
	cursor: pointer;
	z-index: 2;
	zoom: var(--zoom);
}
.slide-proj .sm-feed .close-btn div {
	width: 34px;
	background: #fff;
	height: 3px;
	position: absolute;
	display: block;
	margin: auto;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	left: 0; right: 0;
	top: 0; bottom: 0;
}
.slide-proj .sm-feed .close-btn div:first-child{
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.slide-proj .sm-feed .close-btn div:last-child{
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



.slide-proj .center-title {
	width: 100%;
	font-weight: 600;
	text-align: center;
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 70px;
	margin-top: 0;
	margin-bottom: 35px;
	color: #000;
	zoom: var(--zoom);
}
.slide-proj .center-title::after {
	content: "";
	display: block;
	height: 0;
	width: 100px;
	border-top: 2px solid #000;
	margin: auto;
}

.slide-proj video.controls:hover {cursor: pointer;}



.proj-sec {
	width: 100%;
    padding: 0 5%;
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
	align-items: center;
    gap: max(3vw, 25px);
	zoom: var(--zoom);
}

.proj-sec > video, .proj-sec > img {
	border-radius: 25px;
	box-sizing: border-box;
}
.shadow {box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);}

.proj-sec .full {
	width: 100%;
}
.proj-sec .half {
	width: 48%;
}
.proj-sec .third {
	width: 31%;
}



.slide-proj .laptop {
	position: relative;
	overflow: hidden;
	width: 100%;
    padding: 0 5%;
	box-sizing: border-box;
	overflow: visible;
}
.slide-proj .laptop > img {
	width: 100%;
	margin-bottom: -7px;
}
.slide-proj .laptop .slider {
	position: absolute;
    width: 70%;
    height: 87%;
    left: 0;
    right: 0;
    top: 3.5%;
    margin: 0 auto;
    overflow: hidden;
    outline: 2px solid #F0F0F0;
    background: #F0F0F0;
    border-radius: 15px;
}

.slide-proj .laptop .slider-btn {
	display: block;
	width: 60px; height: 60px;
	background: url("../img/slider-btn.png") rgba(0,0,0,0.05);
	border-radius: 50%;
	position: absolute;
	top: calc(44% - 20px);
	cursor: pointer;
	-webkit-transition: transform 0.2s;
	transition: transform 0.2s;
}
.slide-proj .laptop .slider-btn.prev {left: calc(5% - 30px);}
.slide-proj .laptop .slider-btn.next {
	right: calc(5% - 30px);
	transform: rotate(180deg);
}
.slide-proj .laptop .slider-btn.disabled {
	opacity: 0.2;
	cursor: default;
}


.slide-proj .laptop .slider div {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	overflow-y: scroll;
}
.slide-proj .slider div::-webkit-scrollbar {width: 8px;}
.slide-proj #ipay-slider .slider div::-webkit-scrollbar,
.slide-proj #rgroup-slider .slider div::-webkit-scrollbar
{width: 0 !important;}
.slide-proj #ipay-slider .slider div::-webkit-scrollbar-button,
.slide-proj #rgroup-slider .slider div::-webkit-scrollbar-button
{height: 0 !important;}
.slide-proj #ipay-slider .slider div,
.slide-proj #rgroup-slider .slider div
{overflow: hidden !important;}

.slide-proj .laptop .slider div:nth-child(1) {left: 0;}
.slide-proj .laptop .slider div:nth-child(2) {left: 100%;}
.slide-proj .laptop .slider div:nth-child(3) {left: 200%;}
.slide-proj .laptop .slider div:nth-child(4) {left: 300%;}

.slide-proj .laptop .slider img,
.slide-proj .laptop .slider video {
	width: 100%;
	margin-bottom: -7px;
}


/*=== Section Vodafone ===*/

.voda .proj-cover, .voda .view-proj {
	width: 420px;
	height: 330px;
	left: calc(50% - 210px);
}
.voda .proj-cover img {
	left: -50px !important;
	top: 0px !important;
	z-index: -1;
}

.voda .slide-proj .header .text .bg {background: #E60000;}


/*=== Section Dingdone ===*/

.dingdone .proj-cover, .dingdone .view-proj {
	width: 430px;
	height: 370px;
	left: calc(50% - 215px);
}
.dingdone .proj-cover img {
	left: -50px !important;
	top: 50px !important;
}

.dingdone .slide-proj .header1 .text .bg {background: #4100e3;}
.dingdone .slide-proj .header1 img {width: clamp(234px, 20vw, 250px);}


/*=== Section iPay ===*/

.ipay .proj-cover, .ipay .view-proj {
	width: 550px;
	height: 370px;
	left: calc(50% - 275px);
}
.ipay .proj-cover img {
	left: -30px !important;
	top: 40px !important;
	z-index: -1;
}


.ipay .slide-proj .header .text .bg {background: #c61618;}



/*=== Section BFL ===*/

.bfl .proj-cover, .bfl .view-proj {
	width: 435px;
	height: 350px;
	left: calc(50% - 217px);
}
.bfl .proj-cover img {
	left: 25px !important;
	top: 40px !important;
}
.bfl .proj-cover .shape {
	width: 160px; height: 300px;
	background: rgba(0,0,0,0.25);
	right: 55px !important;
	top: 55px !important;
}

.bfl .slide-proj .header1 .text .bg {background: #fed102;}
.bfl .slide-proj .header2 .text .bg {background-image: linear-gradient(to bottom, #9dd7c9 , #83c4e5, #86a0d4, #b09cc8);}
.bfl .slide-proj .header3 .text .bg {
	background-image: url(../img/projects/bfl/tfl-bg.jpg);
	background-size: cover;
	background-position: center;
}



/*=== Section Related ===*/

.related .proj-cover, .related .view-proj {
	width: 540px;
	height: 270px;
	left: calc(50% - 280px);
}
.related .proj-cover img {
	left: -50px !important;
	top: -25px !important;
}
.related .proj-cover .title {
	right: 0 !important;
	left: auto !important;
	top: 35px !important;
}
.related .proj-cover .shape {
	width: 260px; height: 230px;
	background: #081e2c;
	right: 35px !important;
	top: 55px !important;
	opacity: 0;
}

.related .slide-proj .header1 .text .bg {background: #081e2c;}
.related .slide-proj .header1 .cover {margin-bottom: -75px;}
.related .slide-proj .header2 .text .bg {background: #fcc55e;}
.related .slide-proj .header2 .cover {align-items: flex-start;}



/*=== Section 5Chicks ===*/
.chicks .proj-cover, .chicks .view-proj {
	width: 500px;
	height: 400px;
	left: calc(50% - 280px);
}
.chicks .proj-cover img {
	left: -40px !important;
	top: -5px !important;
}
.chicks .proj-cover .title {
	right: 0 !important;
	left: auto !important;
	top: 40px !important;
}
.chicks .proj-cover .shape {
	width: 300px; height: 300px;
	border-radius: 50%;
	background: #a91520;
	right: 40px !important;
	top: 90px !important;
}

.chicks .slide-proj .header1 .text .bg {background: #bd212f;}
.chicks .slide-proj .header2 .text .bg {background: #f04d3a;}
.chicks .slide-proj .header2 .cover {
	margin-bottom: -170px;
	left: -50px;
}



/*=== Section ToshFesh ===*/

.toshfesh .proj-cover, .toshfesh .view-proj {
	width: 445px;
	height: 380px;
	left: calc(50% - 220px);
}
.toshfesh .proj-cover img {
	left: -30px !important;
	top: 55px !important;
}
.toshfesh .proj-cover .shape {
	width: 260px; height: 230px;
	background: #E5D52C;
	right: 45px !important;
	top: 55px !important;
	left: auto !important;
}

.toshfesh .slide-proj .header1 .text .bg {background: #efe633;}
.toshfesh .slide-proj .header1 .cover {margin-bottom: -100px;}



/*=== Section Web ===*/
.web .proj-cover, .web .view-proj {
	width: 525px;
	height: 380px;
	left: calc(50% - 262px);
}
.web .proj-cover img {
	left: -100px !important;
    top: 60px !important;
}
.web .proj-cover .shape {
	width: 320px;
    height: 230px;
	background: #000;
	opacity: 0.2;
    right: 55px !important;
    top: 50px !important;
}

.web .slide-proj .header1 .text .bg {background: #255796;}
.web .slide-proj .header1 .cover {margin-bottom: -100px;}
.web .slide-proj .header1 .cover img {width: clamp(300px, 40vw, 359px);}

.web .slide-proj .header2 .text .bg {background: #1e3b6b;}
.web .slide-proj .header2 .cover {margin-bottom: -130px;}
.web .slide-proj .header2 .cover img {width: clamp(450px, 38vw, 550px);}

.web .slide-proj .header3 .text .bg {background: #0fb3df;}
.web .slide-proj .header3 .cover {margin-bottom: -50px;}



/*=== Section Mobile ===*/
.mobile .proj-cover, .mobile .view-proj {
	width: 540px;
    height: 320px;
	left: calc(50% - 270px);
}
.mobile .proj-cover img {
	left: 30px !important;
    top: 50px !important;
}
.mobile .proj-cover .title {
	float: right;
	left: auto !important;
	right: 0;
	top: -10px !important;
}
.mobile .proj-cover .shape {
	width: 190px; height: 190px;
	background: rgba(31, 31, 96, 0.1);
	right: 40px !important;
	top: 35px !important;
}

.mobile .slide-proj .header1 .text .bg {background: linear-gradient(35deg, rgba(91,82,244,1) 0%, rgba(71,223,181,1) 100%);}
.mobile .slide-proj .header1 .cover {margin-bottom: -100px;}

.mobile .slide-proj .header2 .text .bg {background: #2abdbb;}
.mobile .slide-proj .header2 .cover {margin-bottom: -100px;}



/*=== Section Print ===*/
.print .proj-cover, .print .view-proj {
	width: 520px;
	height: 380px;
	left: calc(50% - 270px);
}
.print .proj-cover img {
	top: 65px !important;
	left: -50px !important;
}
.print .proj-cover .title {
	float: right;
	text-align: right;
	width: 535px;
}
.print .proj-cover .shape {
	width: 280px; height: 280px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	right: 40px !important;
	top: 50px !important;
}

.print .slide-proj .header1 .text .bg {background: #bb0418;}
.print .slide-proj .header1 .cover {margin-bottom: -130px;}

.print .slide-proj .header2 .text .bg {background: #343434;}
.print .slide-proj .header2 .cover {align-items: flex-start;}



/*=== Section Logos ===*/
.logos .proj-cover, .logos .view-proj {
	width: 530px;
    height: 350px;
	left: calc(50% - 265px);
}
.logos .proj-cover img {
	top: 60px !important;
	left: calc(50% - 150px) !important;
}
.logos .proj-cover .title h2 {color: #fff;}

.logos .slide-proj .header .text .bg {background: #000;}
.logos .slide-proj .header .cover {margin-bottom: -130px;}

.logos .slide-proj .img {
	border-radius: 25px;
	width: 100%;
    height: clamp(500px, 45vw, 45vw);
    background-size: cover;
    background-position: center;
}