@import url('https://fonts.googleapis.com/css2?family=Suse&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Chau+Philomene+One:ital@0;1&family=Suse:wght@300..700&family=SUSE:wght@300..700&family=KoHo:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock+Salt&display=swap'); */
@import 'https://fonts.googleapis.com/css?family=Lora:400,400i,700|SUSE:300,600,700,900';
@import 'https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css';
body {
	font-family: 'SUSE', sans-serif;
	background-color: #fff;
}
a:hover, a:active, a:focus {
	color: #082D84 !important;
	background-color:#fff !important;
	text-decoration:none !important;
}

a:focus {
	color: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'SUSE', sans-serif;
	color: #333;
	margin-bottom: 25px;
	margin-top: 0;
}
.h4, h4 {
	font-size: 20px;
}
h1 {
	font-size: 45px;
}
h2 {
	font-size: 35px;
	text-align: center;
	letter-spacing: -0.02em;
	font-weight: bold;
}
.parallax-mirror {
	top:-20px !important;
	border-radius: 0 0 40px 40px !important;
}
.toplayer {
	max-width: 1100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    justify-items: center;
}

.col-sm-offset-2{        
	display: flex;
    flex-direction: column;}

.aboutWrap {    
	display: flex;
    flex-direction: row;
    gap: 30px; }	

.aboutInnerWrap {
	display: flex;
    flex-direction: column;
	align-items: flex-start;
    gap: 30px;
}
.btnWrap{
	display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.lightboxopen {color:#000;}
.col-md-4 {
	width: 33.33333333%;
	height: 15px;
}
.handwriting {
	font-family: calibri, 'SUSE', sans-serif;
}
.titleHand, .titleHand2 {
	color: #082D84;
	font-family: calibri, 'SUSE', sans-serif;
	font-size: 40px;
	text-align: center;
	font-weight: 700;
	margin-bottom: 120px !important;
}
h3 {
	font-size: 28px;
	direction: rtl;
	color: #082D84;
}
h3 a {
	color: #082D84;
	font-weight: normal;
	padding: 5px 30px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	font-size: 22px;
}
h3 a:hover {
	background-color: #082D84;
	color: #fff;
	text-decoration: none;
}
section#portoSite {
	background-color: #000;
	padding-top: 40px;
	margin-bottom: 40px;
}
section#portoUX {
	padding-top: 40px;
	margin-bottom: 0px;
}
.portoX:after {
	background-color: rgba(0, 0, 0, 0.6);
}
section#porto h3 {
	font-size: 20px;
	margin-bottom: 10px;
}
section#porto .ubutia-card {
	margin-top: 0px;
}
section#porto p {
	font-size: 18px;
	color: #000;
	margin-bottom: 20px;
}
section#porto {
	padding: 30px 0 0px;
}
section#portoWeb h3 {
	font-size: 20px;
	margin-bottom: 10px;
}
section#portoWeb .ubutia-card {
	margin-top: 0px;
}
section#portoWeb p {
	font-size: 18px;
	color: #000;
	margin-bottom: 20px;
}
section#portoWeb {
	padding: 30px 0 0px;
}
section#portoSite h3 {
	font-size: 20px;
	margin-bottom: 10px;
}
section#portoSite .ubutia-card {
	margin-top: 0px;
}
section#portoSite p {
	font-size: 18px;
	color: #000;
	margin-bottom: 20px;
}
section#portoSite {
	padding: 30px 0 0px;
}
section#portoSite .titleHand {
	margin-top: 80px;
}
section#portoUX h3 {
	font-size: 20px;
	margin-bottom: 10px;
}
section#portoUX .ubutia-card {
	margin-top: 0px;
}
section#portoUX p {
	font-size: 18px;
	margin-bottom: 20px;
	color: #fff;
}
section#portoUX {
	padding: 120px 0 0px 0px;
	background-color: #333;
}
section#portoUX .titleHand {
	color: #fff;
}
section#portoUX .titleHand::after {
	background-color: #fff;
}
#purposeBox h3 {
	margin-bottom: 0px;
    margin-top: 25px;
	direction: rtl;
	font-weight: bold;
}
#purposeBox .item {
	margin-right: 35px;
	font-size: 17px;
}
p {
	font-size: 16px;
	color: #082D84;
	/* direction: rtl; */
}
a {
	transition: all 0.3s ease-in-out;
	color: #fff;
}
section {
	text-align: center;
}

.blockquote p {
	font-size: 32px;
	line-height: 45px;
	padding-left: 30px;
	border-left: 3px solid #424242;
	color: #424242;
}
span._ion-android-menu.ion-navicon {
	font-size: 31px;
}
.col-sm-55 {
	width: 30%;
	float: right;
	margin: 20px;
}
.title {
	position: relative;
	margin-bottom: 32px;
}
.testi ul {
	list-style-type: none;
	font-size: 16px;
}
#portoUX h3 {
	font-size: 28px;
	direction: rtl;
	color: #fff;
	padding-bottom: 30px;
}
#portoSite h3 {
	font-size: 28px;
	direction: rtl;
	color: #fff;
	padding-bottom: 30px;
}
.titleTop {
	padding-top: 35px;
	font-weight: bold;
	color: #fff;
	/* padding-bottom: 15px; */
}
.titleTop2 {
	margin-top: 0px;
	padding-top: 55px;
	font-weight: normal;
	font-family: 'SUSE' !important;
	color: #0c84da;
	padding-bottom: 0px;
}
.title:after {
	content: '';
	height: 2px;
	width: 110px;
	position: absolute;
	top: 81px;
	left: calc(50% - 60px);
}
.titleTop:after {
	content: '';
    height: 4px;
    width: 64px;
    background-color: #df059c;
    position: absolute;
    top: 81px;
    left: calc(50% - 23px);
}
.titleHand:after {
	content: '';
	height: 3px;
	width: 87px;
	background-color: #DF059C;
	position: absolute;
	top: 81px;
	left: calc(50% - 42px);
}
a.work {
	position: relative;
	top: -300px;
}
.topPadding {
	margin-top: 50px;
}
/*Bootstrap*/

.navbar-ubutia {
	background-image: none;
	background-color: transparent;
	margin-bottom: 0;
	border-radius: 0;
	border-color: transparent;
	transition: all 0.3s ease-in-out;
}
.form-control option {
	color: #424242;
}
.form-control {
	border-radius: 0;
	padding: 25px;
	font-size: 18px;
	font-style: italic;
	background-color: transparent;
	color: #424242;
	margin-bottom: 30px;
	border-color: #51c2b9;
}
.form-control:focus {
	border-color: #51c2b9;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(81, 194, 185, 0.6);
}
.form-control::-webkit-input-placeholder {
	color: #fff;
}
.form-control:-moz-placeholder {
	/* Firefox 18- */
	color: #fff;
}
.form-control::-moz-placeholder {
	/* Firefox 19+ */
	color: #fff;
}
.form-control:-ms-input-placeholder {
	color: #fff;
}
.element .form-control::-webkit-input-placeholder {
	color: #424242;
}
.element .form-control:-moz-placeholder {
	/* Firefox 18- */
	color: #424242;
}
.element .form-control::-moz-placeholder {
	/* Firefox 19+ */
	color: #424242;
}
.element .form-control:-ms-input-placeholder {
	color: #424242;
}
/*UI */

.img-responsive1 {
	transition: all .2s ease-in-out;
}
.img-responsive1:hover {
	transform: scale(1.05);
}
.img-responsive1 {
	padding: 0px !important;
}
.ui-1 {
	width: 50%;
	float: right;
	padding: 0px;
}
#portoUXMOB .container, section#portoUX .container {
	width: 100%;
	margin:70px 0;
}
.container2 {
	width: 100%;
	padding-right: 0px;
	padding-left: 0px;
}
section#portoUXMOB {
	padding: 0px;
	background-color: #FFF;
	max-width:1400px;
	margin:0 auto;
}
.image {
	position: relative;
	width: 31%;
	float: left;
	margin: 15px;
    border: 2px solid #082D84;
        border-radius: 20px;
}
.projWrap{padding:10px 0;}
.projTitle{
    color:#082D84;
    font-size: 22px;
    font-weight:600;
}
.lb-container, .lightbox .lb-image {
        background-color: #fff;
        border-radius: 30px 30px 0 0 !important;
}
.lb-dataContainer {
     background-color: #fff !important;
    border-radius: 0 0 30px 30px!important;
}
.lb-data .lb-details, .lb-data .lb-caption{
    color: #082D84 !important;
    padding: 3px 0px;
    font-weight: 600 !important;
}
.lb-data .lb-caption{
    text-transform: uppercase;
}
.lb-data .lb-details {
        padding: 5px 0px 10px !important;
        margin:0px !important;
}
.lb-data{
        padding: 0 30px !important;
}
.lb-data .lb-close {
    float: right;
    height: 36px !important;
}
.findout {
	margin-top: 0px;
	padding: 5px 35px;
	
}
.findout a {
	font-size: 17px;
}
.findout a:hover {
	text-decoration: none;
	color: #082D84;
}
.findout:hover {
	color: #082D84;
}
.cv {
	padding: 6px 17px;
    color: #fff;
	text-align:center;
    font-size: 15px;
    border-radius: 20px;
    margin: 0px !important;
    font-family: 'SUSE' !important;
    font-weight: 400;
    background-color: #082D85;
	width: 150px;
}
.image__img {
	display: block;
	width: 100%;
	border-radius: 20px 20px 0 0;
	border: 0px solid #0055B2;

}
.image__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: rgba(8, 45, 132, 0.4); */
	/* border: 4px solid #FFF; */
	color: #ffffff;
	font-family: 'SUSE', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	 opacity: 1; 
	transition: opacity 0.25s;
	/* border: 3px solid #082d85; */
}
.image__overlay p {
	color: #fff;
	font-size: 17px;
}
.image__overlay p a {
	text-decoration: underline;font-weight: bold;
}
.image__overlay--blur {
	backdrop-filter: blur(5px);
}
.image__overlay--primary {
	border-radius: 20px;
	/* background: rgba(8, 45, 132, 0.9);
	border: 0px solid #00aaff; */
	
}
.image__overlay>* {
	transform: translateY(20px);
	transition: transform 0.25s;
}
.image__overlay:hover {
	opacity: 0;
}
.image__overlay:hover>* {
	transform: translateY(0);
}
.image__title {
	padding: 0px 25px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: #082d85;
border-radius: 30px !important;
    border: 10px solid #082d85;

}
.image__title:hover{
	color: #fff;
    background-color: #082D84;
	border: 3px solid #082D84;
}
.image__description {
	font-size: 22px;
	margin-top: 0.25em;
	font-family: 'SUSE';
	color: #fff;
}


.complex{
	    width: 396px;
    float: left;
}
#inner {
	color: #fff;
	font-size: 20px;
	width: 530px;
	min-height: 228px;
	padding: 23px;
	margin: 0 auto;
	margin-top: 60px;
	background-color: rgba(0, 85, 178, 0.7);
	
}
#inner2 {
	color: #fff;
	font-size: 20px;
	width: 530px;
	min-height: 255px;
	padding: 23px;
	margin: 0 auto;
	margin-top: 60px;
	background-color: transparent;
	
}
#inner h2 {
	font-weight: bold;
    font-family: 'SUSE';
    font-size: 26px;
    color: #fff;
    background-color: transparent;
    padding: 0px 16px;
    padding: 5px 25px;
    text-align: center;
}
#inner2 h2 {
	font-weight: bold;
    font-family: 'SUSE';
    font-size: 26px;
    color: #fff;
    background-color: transparent;
    padding: 0px 16px;
    padding: 5px 25px;
    text-align: center;
}
#inner a , #inner2 a {
	color: #C5C5C5;
}
#inner a:hover , #inner2 a:hover {
	color: #fff;
}
.topInner {position:fixed !important;}
#topMenu {
	position: relative;
    width: 250px;
    z-index: 99999	
}
#topMenu a, .cv {
	padding: 8px 17px;
    font-size: 15px;
    color: #fff;
    margin: 0px 9px;
    font-family: 'SUSE' !important;
    font-weight: 400;
    background-color: #082d84;
    border-radius: 20px;
}
#topMenu a:hover, .cv a:hover  {
	text-decoration:none;
	color: #082D85 !important;
    background-color: #fff !important;
	border:1px solid #082D85 !important;
}
.linked {
	padding: 6px 28px;
	color:#082D85;
	font-size: 15px;
	border-radius: 20px;
	margin-right:15px;
	font-family: 'SUSE' !important;
	font-weight: 600;
    background-color: #fff;
	border:2px solid #082D85 !important;
}
.linked:hover  {
	text-decoration:none;
	color: #fff !important;
    background-color: #082D85 !important;
	border:2px solid #fff !important;
}
#projectsWrapUP {
	width: 100%;
	margin: 30px auto;
}
#projectsWrap {
	margin: 0 auto;
	width: 400px;
	margin-top: 80px;
}
.allp {
	float: left;
}
.allp a {
	font-size: 16px;
}
.next {
	margin-left: 80px;
	float: left;
}
.prev {
	margin-right: 80px;
	float: left;
}
.next a {
	font-size: 40px;
	color: #fff;
}
.prev a {
	font-size: 40px;
	color: #fff;
}
.allp a {
	font-size: 21px;
	color: #fff;
}
.prevTop {
	position: absolute;
    left: 10px;
    background-color: #df059c;
    font-family: 'SUSE';
    border-radius: 100px;
    height: 104px;
    padding-top: 4px;
}
.prevTop a {
	font-size: 34px;
	padding: 46px 37px;
}
.prevTop a:hover, .prevTop:hover {
	text-decoration: none;
}
.prevTop:after {
	content: "next project";
	font-size: 14px;
	padding-bottom: 5px;
	color: #fff;
	float: left;
	width: 105px;
}
.NEXTPREV {
	position: fixed;
}
.numbers {
	display:none;
	position: absolute;
	color: rgba(1, 82, 174, 0.7);
	font-size: 300px;
	top: 0px;
	left: -5px;
	font-family: 'SUSE';
	font-weight: bold;
}
.next a:hover, .prev a:hover, .allp a:hover {
	text-decoration: none;
	color: #333;
}
.green {
	background-color: #75B932;
}
.green2 {
	background-color: #46B989;
}
.green3 {
	background-color: #53AE4A;
}
.black {
	background-color: #000;
}
.blue {
	background-color: #339AE5;
}
.blue2 {
	background-color: #0055B2;
}
.darkblue {
	background-color: #082D84;
}

.grey {
	background-color: #444;
}
.nicebleu {background-color: #2BC7CD;}
#tagWrap {
	margin: 0 auto;
	margin: 30px 0px;
	padding: 0px 0px 0px 0px;
}
.tag {
	font-size: 16px;
	background-color: #868686;
	padding: 0px 9px;
	color: #fff;
	float: left;
	text-transform: uppercase;
}
.tag {
	display: inline-block;
    position: relative !important;
    margin: 0 10px 8px 4px;
    padding: 6px 8px 4px !important;
    background: #082d84ab;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    border: 2px solid #fff;
}
/ *UI */
/*Mob */

.mobile-1 {
	width: 46%;
	background-color: #E86781;
	float: right;
	padding: 70px 100px;
}
.mobile-2 {
	width: 46%;
	background-color: #0051AB;
	float: right;
	padding: 70px 100px;
}
.mobile-3 {
	width: 50%;
	background-color: #303030;
	float: right;
	padding: 70px 100px;
}
.mobile-4 {
	width: 50%;
	background-color: #70B230;
	float: right;
	padding: 70px 100px;
}
.mobile-test {
	width: 46%;
	background-color: #E86781;
	float: none;
	padding: 0px;
}
.img-responsive3, .img-responsive2 {
	transition: all .2s ease-in-out;
}
.img-responsive3:hover, .img-responsive2:hover {
	transform: scale(1.05);
}
.img-responsive3 {
	padding: 70px 50px !important;
}
/*Helper class*/

.mt80 {
	margin-top: 80px;
}
.mb80 {
	margin-bottom: 80px;
}
.mr60 {
	margin-right: 60px;
}
.bg-img {
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
  }
header.bg-img.header.parallax-window { 
    border-radius:0 0 30px 30px !important;
}
.col-sm-599 {
	margin-bottom: 100px;
}
.bg-img div {
	z-index: 1;
	position: relative;
	padding: 1px 0px;
}
.bg-img:after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
#back {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 26px 24px;
	color: #fff;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	height: 67px;
    background-color: #082D84;
}
#back:hover {
   color:#0055B2;
}
#back a {
	color: #fff;
}
.arrow {
	border: solid #fff;
	border-width: 0 5px 5px 0;
	display: inline-block;
	padding: 8px;
}
.up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
#purposeBox .title::after {
	top: 120px;
}
.section {
	padding: 100px 0;
	position: relative;
}

section#portoWeb {
	/*background-image: url(../images/new/web.jpg); background-attachment: fixed !important;
	 background-image:url(../images/2025/quote.svg); background-attachment: fixed !important;
		    background-size: cover;
	    background-position: 0px -200px;*/
	background-color: #333333;
	height: 64vh;
	position: relative;
	min-height: 600px;
}
section#portoWeb h2 {
	margin-top: 200px;
	font-family: calibri, 'SUSE', ui-sans-serif;
	color: #fff;
}
section#portoWeb h3 {
	color: #fff;
	font-weight: bold;
	font-size: 22px !important;
}
section#about {
	padding: 120px 0px 80px;
}
section#expertise {
	padding: 0px 0 0px;
	margin-bottom: 0px;
}
section#purpose {
	padding: 50px 0 0px;
}
section#porto {
	padding: 60px 0px 30px;
}
section#portoWeb {
	padding: 60px 0px 30px;
}
section#portoLast {
	padding: 50px 0 100px;
}
section#ubutia-quote {
	padding: 100px 0;
}
section#contact {
	background-color: #0055B2;
	position: relative;
}
section#portoGraphic {
	padding: 20px 0 0px;
}
section#portoLast {
	padding: 0px 0;
}
.expert .owl-item.active {
	padding-left: 40px;
}
.expert .owl-item.active h4 {
	margin-bottom: 10px;
	color: #fff;
}
.owl-carousel .owl-stage-outer {
	z-index: -1;
}
.ubutia-card-header .img-responsive {
	margin: 0 auto;
}
.titleInner {
	font-size: 18px;
	color: #fff;
	padding: 10px;
	margin: 20px 0px;
}
#about p {
	text-align: justify;
    max-width: 508px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    gap: 10px;
}
.myquote {
	font-size: 18px;
	direction: rtl;
	text-align: right;
	font-weight: 600;
	letter-spacing: 1px;
}
.ubutia-quote.bg-img::after {
	background-color: rgba(0, 0, 0, 0.5) !important;
}
.ubutia-icon {
	background: transparent url(../images/new/logo2.png) no-repeat;
	width: 96px;
	height: 70px;
	display: block;
	position: fixed;
	top: 7px;
}
.graphic-design {
	background: transparent url(../images/webdevelopment.png) no-repeat;
	width: 120px;
	height: 120px;
	display: block;
}
.webdevelopment {
	background: transparent url(../images/graphic-design.png) no-repeat;
	width: 120px;
	height: 120px;
	display: block;
}
.printing {
	background: transparent url(../images/printing.png) no-repeat;
	width: 120px;
	height: 120px;
	display: block;
}
.play-icon {
	background: transparent url(../images/video-play-icon.png) no-repeat;
	width: 70px;
	height: 69px;
	display: block;
}
/*ubutia Card*/

.ubutia-card {
	text-align: center;
	/* border-bottom: 1px dotted #df059c;*/
	margin-top: 10px;
	/*margin-bottom: 45px;*/
}
.ubutia-card .ubutia-card-header {
	margin-bottom: 25px;
}
.ubutia-card .ubutia-card-header .card-icon {
	border-radius: 100%;
	display: inline-block;
	height: 120px;
	width: 120px;
	line-height: 120px;
	position: relative;
}
.owl-item li {
	font-size: 15px;
	font-weight: bold;
	text-align: left;
}
/*Button*/

.ubutia-btn {
	border-color: #51c2b9;
	font-style: italic;
	color: #51c2b9;
	border-radius: 0;
	letter-spacing: 3px;
	padding: 15px 80px;
	margin-bottom: 30px;
	background-color: transparent;
	transition: all 0.3s ease-in-out;
}
a.btn.ubutia-btn {
	font-size: 40px;
	font-style: normal;
	margin-top: -40px;
}
.ubutia-btn:hover {
	background-color: #51c2b9;
	color: #fff;
}
a.ubutia-btn {
	top: -200px;
}
.solid {
	background-color: #51c2b9;
	color: #fff;
}
.solid:hover {
	background-color: #fff;
	color: #51c2b9;
}
.small-btn {
	padding: 10px 130px;
}
/*Element page*/

.element .navigation-bar {}
.element .navigation-bar a {
	color: #fff;
}
.element .dark-bar {}
.element .menu:after {
	color: #fff;
}
.element .title:after {}
.main.element {
	text-align: center;
}
.element p img {
	float: right;
	padding: 0px 20px;
}
.element .headings p {
	max-width: 700px;
	text-align: ;
	margin: 0 auto;
	margin-bottom: 0px;
	margin-bottom: 50px;
}
.testi p {
	direction: ltr;
}
.element .headings {
	margin-top: 50px;
}
.element .mt806 {}
.headings p {
	margin-bottom: 80px;
}
.social-icons ul {
	text-align: center;
	padding-left: 0;
	display: inline-block;
}
.social-icons ul a li:hover {
	margin-right: 10px;
	background-color: #8E08D8;
	color: #fff;
}
.social-icons ul a li:last-child {
	margin-right: 0;
}
.social-icons ul a li {
	display: inline-block;
	list-style-type: none;
	color: #fff;
	font-size: 27px;
	line-height: 32px;
	width: 36px;
}
.social-icons .ion-social-linkedin {
	font-size: 30px !important;
}
.social-icons {
	padding-bottom: 20px;
}
.element .social-icons {
	margin-bottom: 40px;
}
/*Navigation*/

#menu-item {
	transition: all 0.3s ease-in-out;
}
.menu-item {
	background-color: #171717;
	text-align: center;
	font-size: 18px;
	text-transform: uppercase;
}
.menu-item ul {
	padding-left: 0;
	margin-bottom: 0;
}
.menu-item ul a li {
	padding: 15px 0;
	list-style-type: none;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.menu-item ul a:hover li {
	color: #df059c;
	text-decoration: underline;
}
.hide-menu {
	margin-top: -226px;
}
.show-menu {
	margin-top: 0;
}
.dark-bar {
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
}
.logo-icon {
	position: fixed;
}
.logo-icon-top {
	position: fixed;
	bottom: 20px;
	width: 22px;
	height: 40px;
	left: 237px;
	z-index: 999999;
	background-size: 19px;
	background-repeat: no-repeat;
}
#hover-content, #hover-content2 {
	font-family: 'SUSE';
	padding: 38px 3px;
	font-weight: normal;
	background-color: #082D84;
	margin-top: -11px;
	position: fixed;
	z-index: 99999;
	bottom: 5px;
	right: 5px;
	border-radius: 100px;
	width: 93px;
	line-height: 16px;
	height: 92px;
	text-align: center;
}
#hover-content, #hover-content2 {
	color: #fff;
	font-family: 'SUSE';
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
#hover-content:hover, #hover-content2:hover {
	color: #fff;
	background-color: #DF059C;
}
.slideUp {
	animation-name: slideUp;
	-webkit-animation-name: slideUp;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;
}
@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50% {
		transform: translateY(-8%);
	}
	65% {
		transform: translateY(4%);
	}
	80% {
		transform: translateY(-4%);
	}
	95% {
		transform: translateY(2%);
	}
	100% {
		transform: translateY(0%);
	}
}
@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50% {
		-webkit-transform: translateY(-8%);
	}
	65% {
		-webkit-transform: translateY(4%);
	}
	80% {
		-webkit-transform: translateY(-4%);
	}
	95% {
		-webkit-transform: translateY(2%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}
}
.navigation-bar {
	padding: 2px 0;
	font-size: 30px;
}
.navigation-bar a {
	color: #fff;
}
.menu {
	position: relative;
	display: inline-block;
}
.menu:after {
	position: absolute;
	left: -65px;
	top: 10px;
	color: #fff;
	font-size: 18px;
}
.m:after {
	content: '×ª×¤×¨×™×˜';
	font-family: 'SUSE';
}
.c:after {
	content: '×¡×’×•×¨';
}
/*Footer menu */

#menu-item2 {
	transition: all 0.3s ease-in-out;
	padding-bottom: 20px;
}
.menu-item2 {
	text-align: center;
	font-size: 16px;
}
.menu-item2 ul {
	padding-left: 0;
	margin-bottom: 0;
}
.menu-item2 ul a li {
	padding: 15px 0;
	list-style-type: none;
	color: #fff;
	border-bottom: 1px dotted #2E75B6;
	font-size: 17px;
	font-family: 'SUSE' !important;
}
.menu-item2 ul a:hover li {
	color: #76B6E1;
	text-decoration: none;
}
/*Footer menu */

.hand {
	color: #DA069D;
	font-size: 28px;
	direction: ltr;
	width: 100%;
	margin-top: 20px;
	font-weight: 700;
}
/*Home page*/

.header {
	position: relative;
	min-height: 510px;
}
.headerIzzo {
	position: relative;
	min-height: 500px;
}
.headerAma {
	position: relative;
	min-height: 500px;
}
.headerBaruch {
	position: relative;
	min-height: 420px;
}
.headerLand {
	position: relative;
	min-height: 420px;
}
.headerCoffee {
	position: relative;
	min-height: 500px;
}
.headerTus {
	position: relative;
	min-height: 500px;
}
.headerAma2 {
	position: relative;
	min-height: 500px;
}
.headerLotem {
	position: relative;
	min-height: 500px;
}
.lightbox .lb-image {
	border: 10px solid #fff;
}
.navbar-default {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
	z-index:9999;
}
img.img-responsive2 {
	max-width: 100%;
}
.titleWrap {
	   /* background-color: #fff;  */
	   border-radius: 4px;
	   max-width: 500px;
       /* margin: 0 auto; */
}
.headerT {
	height: 47vh;
	position: relative;
	min-height: 300px;
	background-attachment: fixed !important;
	background-size: contain;
}

.headerT .intro p {
	font-size: 28px;
	height: 20vh;
}
.intro h1 {
	/* line-height: 47px; */
    font-size: 40px;
    margin: 0 auto;
    padding-top: 12px;
	font-weight: normal;
	
}
.titleTopTESTI {
	background-color: #fff;
	height: 47px;
	width: 460px;
	margin: 0 auto;
	font-family: 'SUSE';
}
.titleTopTESTI p {
	color: #0055b2 !important;
}
.intro2 h1 {
	width: 224px !important;
	/* height: 32px !important; */
}
.intro .titleTop1 {
	line-height: 32px;
    font-size: 32px;
    margin: 8px auto;
    color: #fff;
    margin-bottom: 10px;
    padding-bottom: 10px;
	margin-left: 100px;
    /* text-transform: uppercase; */
    letter-spacing: -1px;
}
.intro .titleTop1 .bold {
	    font-size: 32px;
    font-weight: 700;
}
.intro .titleTop2 {
	line-height: 45px;
	font-size: 47px;
	height: 51px;
	background-color: #0055B2;
	max-width: 542px;
	margin: 0 auto;
	color: #76B6E1;
}
.titleTop23 {
    font-weight: normal;
    font-family: 'SUSE' !important;
    color: #fff;
    padding-bottom: 0px;
}
.headerT .intro-box {
	height: 50vh !important;
}
.testi ul {
	list-style-type: none;
	font-size: 18px;
}
.testiWrap {
	margin: 0 auto;
	max-width: 720px;
}
.testi {
	font-family: SUSE;
	margin: 60px 30px;
	padding: 40px;
	background-image: url(../images/2025/quote.svg);
    background-repeat: no-repeat;
    background-size: 80px;
}
.testiHeb {
	margin: 60px 30px;
	padding: 40px;
	    background-image: url(../images/2025/quote.svg);
    background-repeat: no-repeat;
    background-size: 80px;
	font-family: SUSE !important;
	direction: rtl;
}
.testi h6 {
	font-family: calibri;
	font-size: 17px;
}
.testi h5 {
	color: #41016B;
	text-transform: none;
}
.testiHeb h3 {
	font-family: SUSE !important;
}
.element .headings {
	margin-top: 50px;
}
.element .headings p {
	max-width: 700px;
	font-size: 19px;
	text-align: ;
	margin: 0 auto;
	margin-bottom: 0px;
	margin-bottom: 0px;
	margin-bottom: 50px;
}
.element .headings p {
	color: #000;
}
.intro-box {
    height: 310px;
    display: flex
;
    justify-content: flex-start;
    align-items: center;
}
.intro {
	display: table-cell;
	vertical-align: middle;
}
.element .intro h1 {
	font-size: 53px;
}
.header .ubutia-btn:hover, .element .ubutia-btn:hover {
	display: none;
}
.element .intro h1, .element .intro p {
	color: #fff;
	letter-spacing: 0px;
}
.element .intro p {
	font-weight: normal;
	direction: ltr;
}
.element .intro-box {
	height: 60vh;
}
.element .headings img {
	margin-bottom: 20px;
}
.split {
	margin-bottom: 60px !important;
}
.header h1, .header p {
	color: #fff;
	/* letter-spacing: 2px; */
}
.header p {
	font-size: 32px;
	padding-top: 0;
	padding-bottom: 40px;
}
.header .ubutia-btn, .element .ubutia-btn {
	border: none;
	color: #fff;
}
.header .ubutia-btn:hover, .element .ubutia-btn:hover {
	background-color: transparent;
	color: #df059c;
}
.about {
	background-color: #fff;
}
.about img {
	display: block;
	border-radius: 100%;
}
.about span {
	font-family: 'SUSE';
	font-weight: 600;
}
.expert {
	background: #0650CB;
	color: #fff;
}
.expert .title:after {
	background-color: #fff;
}
.expert p {
	line-height: 200%;
	color: #fff;
}
.expert h1, .expert h2, .expert h3, .expert h4, .expert h5, .expert h6 {
	color: #fff;
}
.expert .bg-img {
	background-image: url(../images/new/2.jpg);
	max-height: 720px !important;
}
.expert .bg-img:after {
	display: none;
}
.expert .section {
	padding: 7px 0px 0px;
	margin-bottom: 40px;
}
.logos .ubutia-card-header .img-responsive {
	max-height: 300px;
}
.ubutia-quote {
	background-image: url(../images/new/3-3.jpg);
	/*padding: 120px 0;*/
	color: #fff;
	font-style: italic;
	background-attachment: fixed !important;
}
.ubutia-quote p, .watch p {
	font-size: 32px;
	color: #fff;
}
.ubutia-quote p {
	font-size: 36px;
}
.ubutia-quote .quote, .watch .quote {
	margin-bottom: 40px;
}
.ubutia-quote .author, .watch .author {
	font-size: 21px;
	margin-bottom: 40px;
}
.watch {
	background-image: url(../images/1.jpg);
	font-style: italic;
	font-size: 32px;
	color: #fff;
	padding: 150px 0;
	background-attachment: fixed !important;
}
.watch a {
	border: 2px solid #fff;
	margin-left: 10px;
	margin-right: 10px;
	line-height: 70px;
	border-radius: 100%;
	width: 70px;
	height: 70px;
	padding: 0;
	font-size: 21px;
	color: #fff;
}
.watch a:hover, .watch a:active, .watch a:focus {
	background-color: #fff;
	color: #424242;
}
#purposeBox .owl-stage-outer {
	height: 330px;
}
#purposeBox .title {
	padding-top: 40px;
	font-weight: bold;
}
#purposeBox .title :after {
	top: 100px;
}
.subscribe {
	background-image: url(../images/11.jpg);
}
.subscribe .ubutia-btn {
	margin-bottom: 0;
	color: #424242;
	font-weight: 700;
	border-color: #fff;
	background-color: #fff;
}
.subscribe .ubutia-btn:hover {
	background-color: transparent;
	color: #fff;
}
.subscribe p {
	color: #fff;
	font-size: 32px;
	margin-bottom: 35px;
}
.subscribe .form-control {
	width: 320px;
	margin-bottom: 0;
	border-color: #fff;
	color: #fff;
}
.contactimg {
	padding-bottom: 20px;
}
.contact .ubutia-card {
	padding: 35px 0;
	transition: all 0.3s ease-in-out;
	margin: 45px;
	margin-bottom: 40px;
	border: 1px solid #fff;
	padding: 40px 20px;
}
.contact .ubutia-card:hover {
	cursor: pointer;
	/* border: 4px solid #fff; */
	color: #fff;
	border-radius: 80px;
}
.contact .ubutia-card:hover a, .contact .ubutia-card:hover p {
	color: #fff !important;
}
/*.contact .ubutia-card:hover{
	box-shadow: 0px 4px 2px rgba(17, 17, 17, 0.3);
}*/

.contact .ubutia-card .ubutia-card-header {
	margin-bottom: 15px;
	font-size: 21px;
	color: #51c2b9;
}
.ubutia-card-content .social-icons {
	margin-bottom: 40px;
}
.contact .ubutia-card .ubutia-card-content h3 {
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 45px;
}
.contact .ubutia-card .ubutia-card-content h3:after {
	top: 40px;
}
.contact .ubutia-card .ubutia-card-content p {
	color: #fff;
	font-size: 20px;
}
#workstation-slider .ubutia-card .ubutia-card-content p {
	min-height: 100px;
}
#workstation-slider .ubutia-card-content {
	margin-bottom: 0px;
}
.footerDia {
	/* transform: skewY(3deg); */
	background-color: #0055B2;
	height: 173px;
	/* margin-top: -190px; */
	/* margin-bottom: 50px; */
}
.footerDia2 {
	transform: skewY(3deg);
	background-color: #082D84;
	height: 60px;
	margin-top: -70px;
	margin-bottom: 50px;
}
.footerDia3 {
	transform: skewY(3deg);
	background-color: #082D84;
	height: 135px;
	margin-top: -190px;
	margin-bottom: 50px;
}
.footer .logo {
	margin-top: 40px;
	width: 188px;
	margin: 0 auto;
	background: transparent url(../images/logo-icon.png) no-repeat;
	width: 40px;
	height: 40px;
	display: block;
	margin: 0 auto;
}
.logo {
	margin: 0 auto;
	flex: 2;
}
a.korot {
	color: #5aa9ff;
}
a.korot:hover {
	color: #151515;
}
h2.title {
	color: #082D84;
	letter-spacing: 1px;
}
.footer {
	background-color: #082d84;
	border-radius: 30px 30px 0 0;
	text-align: center;
	padding: 30px 0px 0px 0px;
	margin-top: 80px;
	
}
.footer span {}
.footer p {
	margin-top: 40px;
	font-size: 17px;
	color: #fff;
	margin-bottom: 0;
	font-style: italic;
}
.footer a {
	color: #fff;
}
/*animations*/

.ubutia-card .ubutia-card-header .card-icon:after {
	transition: all 0.3s ease-in-out;
}
.ubutia-card:hover .ubutia-card-header .card-icon:after {
	height: 120px;
	width: 120px;
	top: -1px;
	left: -1px;
}
#purposeBox .owl-dots {
	margin-top: -20px;
	margin-bottom: 10px;
}
.owl-theme .owl-dots .owl-dot span {
	background-color: #00aaff;
	margin: 5px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
	background-color: #fff;
	height: 14px;
	width: 14px;
	margin: 3px;
}
.me {
	/* float: right; */
	padding-left: 70px;
}
.col-sm-8{
	width: 71%;
}


/* 1. Base Styles (Applied to all screens - Mobile First approach) */

.desktop-only {
    /* Hides the desktop image by default */
    display: none;
}

.mobile-only {
    /* Ensures the mobile image is visible by default */
    display: block;
    width: 100%; /* Optional: make it responsive on mobile */
    height: auto;
}

/* 2. Media Query (Styles applied ONLY when the screen is wider than 768px) */

@media (min-width: 768px) {
    .desktop-only {
        /* On desktop, show the desktop image */
        display: block;
        width: 100%; /* Optional: make it responsive on desktop */
        height: auto;
    }

    .mobile-only {
        /* On desktop, hide the mobile image */
        display: none;
    }
}


@media (max-width: 1400px) {
section#portoUXMOB {
	padding: 0px;
	background-color: #FFF;
	max-width:1200px;
	margin:0 auto;
}
.image {
	width: 30%;
    border: 2px solid #082D84;
    border-radius: 20px;
}
}
@media (max-width: 1000px) {
#portoUXMOB .container, section#portoUX .container {
	width: 94%;
	margin:40px auto;
}
.btnWrap{
	padding:0px 13px;
}
.aboutWrap{
	flex-direction: column-reverse;
    gap:10px;
}
.topInner {
	top: 9px;
    right: 8px;
}
	.intro h1 {
		height: 24px;
        font-size: 17px;
        width: 200px;
        margin-bottom: 6px;
        line-height: 22px;
        padding: 5px 0px;
	}
	.intro2 h1 {
	
		 height: 32px !important; 
	}
	.intro .titleTop1 .bold{
		    font-size: 20px;
	}
	section#about {padding: 0px 0px 0px 0px;}
	.image__overlay{
        /* background: rgba(0, 0, 0, 0.2); */
	}
	.intro .titleTop1 {
		padding: 6px 0;
        font-size: 16px;
        line-height: 20px;
        height: 52px;
        max-width: 224px;
        margin-bottom: 4px;
		margin-left: 20px;
	}
	.intro .titleTop2 {
		line-height: 23px;
		font-size: 20px;
		height: 25px;
		max-width: 296px;
	}
	.titleTop23 {
		font-size: 20px;
	}
	.element .headings p {
		font-size: 16px;
	}
	.element .intro p {
		font-size: 14px;
	}
	.titleTopTESTI {
		height: 25px;
		width: 207px;
	}
	.titleTopTESTI p {
		line-height: 23px;
		height: 26px;
		margin-bottom: 4px;
	}
	.testi ul {
		font-size: 16px;
	}
	.testi, .testiHeb {
		margin: 0px;
		padding: 40px 0px 0px;
	}
	.footerDia {
		height: 80px;
		margin-top: -130px;
	}
	#menu-item2 {padding: 0px 30px 20px;}
	img.img-responsive2, img.img-responsive3 {
		width: 100%;
	}
	.img-responsive3 {
		padding: 20px !important;
	}
	.mobiledisplaynone {
		display: none;
	}
	.m:after {
		content: '';
	}
	.col-sm-8 {
		width: 100%;
	}

	.header {
		/* background-image: url(assets/images/new/multi-portofolio9mobile.jpg);
		position: relative;
		background-attachment: fixed !important;
		height: 43vh;
		background-position: -109px -206px !important; */
		min-height: 265px !important;
		margin-top: -50px;		
	}
	.headerBaruch {
		position: relative;
		background-attachment: fixed !important;
	}
	.headerLand {
		position: relative;
		background-attachment: fixed !important;
	}
	.headerCoffee {
		position: relative;
		background-attachment: fixed !important;
		    min-height: 340px;
			    background-position: center -170px;
	}
	.headerLotem {
		background-position: -590px -30px !important;
		position: relative;
		background-attachment: fixed !important;
	}
	.headerTus {
		background-position: -660px top;
		position: relative;
		background-attachment: fixed !important;
	}
	.headerAma2 {
		min-height: 400px;
		background-position: -500px -120px !important;
		position: relative;
		background-attachment: fixed !important;
	}
	.headerAma {
		position: relative;
		background-attachment: fixed !important;
		background-position:-700px -58px !important;
	}
	.headerIzzo {
		min-height: 400px;
		background-position: -560px top !important;
		position: relative;
		background-attachment: fixed !important;
	}


	#purposeBox .item {
		margin-right: 0px;
	}
	#topMenu {
	position: fixed;
   		right: 4px;
		top: 10px;
        flex:1;
	}
	#topMenu a {
		font-size: 14px;
		padding: 3px 8px;
		margin: 0px 4px;
		font-weight: 500;
	}
	.element .headings { margin-top: 10px;}
	.footerDia2 {height: 24px;}
	.footerDia3 {    height: 140px;}
	.findout a {
		font-size: 12px;
	}
	.logo-icon-top {
		display: none;
	}
	h1 {
		font-size: 24px;
	}
	p {
		font-size: 15px;
	}
	h6 {
		font-size: 17px;
	}
	.header p {
		font-size: 20px;
	}
	.hand {
		font-size: 18px;
		
	}
	section#portoWeb, section#contact {
		background-position: center;
	}
	section#portoUX .mobile-3 {
		margin-bottom: 30px !important;
	}
	section#portoSite .ubutia-card-header img {
		width: 100%;
	}
	.col-sm-55 {
		width: 85%;
		float: none;
		margin: 0px auto;
	}
	.bg-img:after {}
	section#porto .title {
		margin-bottom: 55px;
	}
	section#porto .titleWeb {
		margin-bottom: 55px;
	}
	section#portoSite .title, section#portoUX .title {
		margin-bottom: 55px;
	}
	.col-sm-599 {
		margin-bottom: 30px;
	}
	.split {
		width: 100%;
	}
	#back {
    position: fixed;
    bottom: 87px;
    right: 24px;
    padding: 17px 14px;
    color: #fff;
    z-index: 999999;
    background-color: transparent;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    height: 45px;
}
	
	.arrow {
		border: solid #fff;
		border-width: 0 4px 4px 0;
		display: inline-block;
		padding: 7px;
	}
	.intro2 h1 {    width: 101px !important;}
	#hover-content  {
		font-size: 12px;
		    font-weight: normal;
    padding: 28px 10px !important;
    line-height: 28px;
	}

	#hover-content, #hover-content2 {
    font-family: 'SUSE';
    padding: 27px 6px;
    font-weight: normal;
    background-color: #0055B2;
    margin-top: -11px;
    position: fixed;
    z-index: 99999;
    bottom: 5px;
    right: 5px;
    border-radius: 100px;
    width: auto;
    height: 86px;
    text-align: center;
}
 	#hover-content2 {   
	font-size: 12px;
	padding: 21px 21px !important;
	line-height: 28px;
	height: 70px;}
	
	#hover-content a, #hover-content2 a {
		font-size: 13px;
	}
	.contactimg {
		width: 40px;
	}
	.image {
		width: 100%;
		float: left;
		margin: 10px 0px;
	}
	.image__title, .image__description {
		font-size: 18px;
	}
	.menu-item2 ul a li {
		font-size: 14px;
	}
	.contact .ubutia-card .ubutia-card-content p {
		font-size: 17px;
	}
	.header h1 {}
	.me {
		margin: 0 auto;
		width: 170px;
		float: none;
		padding: 20px 0 0 0;
	}
	.intro-box {
		height: 68vh;
	}
	.main .intro-box {
		height: 20vh;
	}
	h2 {
		font-size: 24px;
		font-weight: bold;
	}
	h3 a, h3 {
		font-size: 19px;
	}
	#inner {
		color: #fff;
		font-size: 16px;
		width: 322px;
		padding: 16px;
		margin: 0 auto;
		margin: 30px auto 0px;
	}
	#inner2 {
	color: #fff;
    font-size: 16px;
    width: 300px;
    padding: 6px 14px;
    margin: 0 auto;
    margin: 30px auto 0px;
	}
.blueWrap {background-color: rgba(0, 85, 178, 0.7) !important;}
	.NEXTPREV {    bottom: 110px;}
	.prevTop {    left: 0px;    padding-top: 20px;}
	.prevTop a{ font-size: 20px; }
	.expert .bg-img {
		max-height: 300px !important;
	}
	#projectsWrap {
		margin: 0 auto;
		width: 272px;
		padding: 90px 0px;
	}
	.allp {
		float: left;
	}
	.allp a {
		font-size: 16px;
	}
	.next {
		margin-left: 40px;
		float: left;
	}
	.prev {
		margin-right: 40px;
		float: left;
	}
	#portoInnerPage img {
		width: 100%;
	   padding: 5px;
	}
	.mobile-1, .mobile-2, .mobile-3, .mobile-4 {
		width: 100%;
		padding: 30px;
	}
	.ui-1 {
		width: 100%;
		padding: 0px;
	}
	.mobile-test {
		width: 100%;
	}
	.caption-style-2 li {
		margin: 0px;
	}
	.section {
		padding: 20px 0 0px;
	}
	section#porto {
		padding: 0px 0px 30px;
	}
	section#portoUX {
		padding: 50px 0 0px;
	}
	section#portoUX .titleHand {
		margin-top: 80px;
	}
	section#portoSite {
		padding: 50px 0 0px;
	}
	.container {
		padding: 0px !important;
	}
	.row {
		margin-right: 0px !important;
		margin-left: 0px !important;
		display:flex;
		flex-direction: row;
	}
	.titleHand {
		font-size: 24px;
	}
	.headerT .intro-box {
		height: 52vh;
	}
	.headerP:after {
		background-color: rgba(0, 0, 0, 0.4);
	}
	#about p {
		text-align: justify;
		padding: 13px 13px 0 13px;
	}
	.ubutia-card-content {
		margin-bottom: 0px;
	}
	#workstation-slider .ubutia-card .ubutia-card-content p {
		min-height: auto;
	}
	.owl-item .ubutia-card {
		border-bottom: none;
	}
	.owl-theme .owl-controls {
		margin-top: 0px;
	}
	.topPadding {
		margin-top: 0px;
	}
	.myquote {
		float: left;
		padding-left: 30px;
	}
	.navigation-bar {
		padding: 3px 0 0px;
	}
	section#contact {
		padding: 70px 0px;
	}
	section#pro {
		padding: 100px 0 50px;
	}
	.title {
		margin-bottom: 60px;
	}
	.title::after, .titlehand::after {
		top: 50px;
	}
	#purposeBox .title::after {
		top: 50px;
	}
	#purposeBox .title {
		padding-top: 10px;
	}
	.contact .ubutia-card {
		padding: 0px 0;
		margin-bottom: 25px;
		border: 2px solid #fff;
	}
	.contact .ubutia-card .ubutia-card-content h3 {
		margin-bottom: 15px;
	}
	.expert p {
		line-height: 24px;
	}
	.about img {
		margin: 0px;
		width: 170px;
	}
	.ubutia-card {
		margin-bottom: 60px;
	}
	.expert .owl-item.active {
		padding-left: 0px;
	}
	.owl-item.cloned {
		height: 140px;
	}
	.container-fluid {
		padding-right: 0px;
		padding-left: 0px;
	}
	.ubutia-card-header .img-responsive {
		margin: 0 auto;
	}
	.ubutia-card .ubutia-card-header {
		margin-bottom: 15px;
	}
	.ubutia-card-content h3 {
		margin-bottom: 15px;
	}
	.ubutia-card .social-icons {
		margin: 20px 0px;
	}
	.ubutia-quote {
		background-size: 1600px;
		background-position: -361px;
	}
	.watch.bg-img {
		background-size: 1000px;
		background-position: -200px;
	}
	.ubutia-icon {
		background-size: contain;
		width: 48px;
		height: 48px;
		margin-left: 10px;
	}
	section#ubutia-quote {
		padding: 30px 0;
	}
	section#ubutia-quote {
		padding: 211px 0 30px 0px;
		background-color: #dbdbdb;
	}
	.footer p {
		font-size: 13px;
		font-style: italic;
	}
	.element .intro h1 {
		font-size: 24px;
	}
	.expert p {
		padding: 0px 20px !important;
	}
	.headerT {
		height: 39vh;
		background-color: #fff;
	}
	.headerP {
		height: 50vh;
		background-image: url(../images/3-MOBILE.jpg);
		background-color: #fff;
	}
	#purposeBox .owl-dots {
		margin-top: -10px;
	}
	section#services {
		padding: 62px 0 40px 0px;
	}
	.ubutia-card {
		margin-bottom: 6px;
	}
	.myquote {
		font-size: 16px;
		margin-bottom: 30px
	}
	.expert .bg-img {
		max-height: 266px;
	}
	#purposeBox .title {
		padding-top: 0px;
	}
	.myquote {
		text-align: center;
		float: none;
		padding-left: 0px;
	}

	.numbers {
		font-size: 100px;
		left: -10px;
	}
	.image__overlay--primary, .image {
		border: 0px;
		border-radius: 20px;
		border-top: 0px solid #fff;
		 border: 2px solid #082D84;
    border-radius: 20px;
	}
	.image__title {
		border: 3px solid #082d85;
		margin-top: -34px;
		font-weight:400;
		
	}
	.image__overlay p {
		font-size: 15px;
		line-height: 16px;
	}
	#inner h2, #inner2 h2  {font-size: 16px;}
	#inner2 h2  {color: #fff !important;}
	.tag {    font-size: 13px;}
}


.swiper-wrapper {
    display: flex;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 55px
}

.testimonials-slide {
	overflow: visible !important;
}

.testimonials-slide.swiper-slide-active .testimonial-img {
	opacity: 100%;
}

.swiper-pagination-bullet {
	width: 40px;
	height: 20px;
	background: none;
	border-radius: 100px;
	opacity: 15%;
	cursor: none !important;
	position: relative;
}

.swiper-pagination-bullet::before {
	content: "";
	width: 40px;
	height: 5px;
	background: #11181c;
	border-radius: 100px;
	position: absolute;
	left: 0;
	top: 8px;
}

.swiper-pagination-bullet:focus {
	outline: none;
}

.swiper-pagination-bullet-active {
	opacity: 70%;
}

.swiper-3d .swiper-slide-shadow {
	background: rgba(0, 0, 0, 0.025);
	border-radius: inherit;
}

.testimonials-slider-btn {
	width: calc(50% - 240px);
}

.testimonials-slider-btn:focus {
	outline: none;
}

.workflow-card-step {
	font-variant-numeric: tabular-nums;
}

.nav.dark .nav-link {
	color: #9ba1a6;
}

.nav.dark .nav-link:hover {
	color: #ecedee;
}

.nav.dark .cta {
	color: #54a4eb;
}

.nav.dark {
	background: rgba(21, 23, 24, 0.7);
}

.nav.dark .nav-inner {
	border-color: rgba(223, 243, 253, 0.1);
}


.testimonials{position:relative}.testimonials-slider-btn{position:absolute;left:0;top:0;right:auto;bottom:0;z-index:10;opacity:.15;transition:opacity .2s}.testimonials-slider-btn:hover{opacity:1}.testimonials-slider-btn.slider-btn-right{left:auto;top:0;right:0;bottom:0}


.testimonials-slide{width:100%;min-width:100%;padding:42px 42px 35px;font-size:18px}.testimonials-bottom{margin-right:-42px;margin-bottom:-35px;margin-left:-42px;padding-right:42px;padding-left:42px}.testimonials-wrap{width:400px;margin-top:0}.testimonial-img{width:64px;height:64px;margin-top:0;margin-bottom:18px}

.swiper-container{overflow:hidden;width:100%;border-top:1px solid transparent;background-color:#fff}.projects-list-img{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;width:100%;height:100%;max-width:none;-o-object-fit:cover;object-fit:cover}.project-slider-img{display:block}.project-list-img-wrap{position:relative;overflow:hidden;width:100%;padding-top:52.04%}.project-item-close{position:absolute;left:auto;top:18px;right:18px;bottom:auto;z-index:3;display:flex;width:32px;height:32px;padding:0;justify-content:center;align-items:center;border-radius:50%;background-color:rgba(29,29,31,.8);box-shadow:0 0 15px 0 rgba(0,0,0,.12);transition:opacity .2s,transform .5s;color:#afafb5}.project-item-info-wrap{display:none;background-color:#f8f9fa}.swiper-wrapper{display:flex;width:100%;padding-top:80px;padding-bottom:55px}.project-overlay{position:fixed;left:0;top:0;right:0;bottom:0;z-index:505;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.7);opacity:0;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);transition:opacity 450ms}.section-header{position:relative;z-index:1;max-width:560px;margin-right:auto;margin-bottom:120px;margin-left:auto;text-align:center}.section-header.section-header--workflow{position:absolute;margin-right:0;margin-left:0}.section-header.section-header--faq{max-width:none;margin-bottom:64px}.section-header.section-header--testimonials{margin-bottom:80px}.project-list-img-inner{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;overflow:hidden;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 0 30px 0 rgba(0,0,0,.12);transform-origin:50% 100%;transition:border-radius .2s,transform .2s}.project-list-item-bg{position:absolute;left:0;top:0;right:0;bottom:0}.testimonials-slide{position:relative;display:flex;width:480px;height:auto;min-width:480px;padding:50px 50px 44px;flex-direction:column;align-items:flex-start;border-radius:18px;background-color:#fff;box-shadow:0 0 0 1px hsla(0,0%,51.4%,.12),0 10px 50px 0 rgba(0,0,0,.06),0 2px 4px 0 rgba(0,0,0,.1);font-size:18px;line-height:1.5;font-weight:500}.testimonials-slide.swiper-slide{display:flex;height:auto;box-shadow:0 0 0 1px #e6e8eb,0 14px 45px 0 rgba(0,0,0,.12)}.testimonials-bottom{display:flex;margin:auto -50px -44px;padding:24px 50px;justify-content:space-between;align-items:center;align-self:stretch;border-bottom-left-radius:18px;border-bottom-right-radius:18px;background-color:#fbfcfd}.testimonials-slider{display:flex}.testimonials-slider.swiper-wrapper{padding-top:0;padding-bottom:38px}
.section.section--light.cc-benefits{padding-top:0;background-color:#e6e8eb;background-image:linear-gradient(180deg,#f8f9fa 90%,#fff)}.section.section--testimonials{overflow:hidden;background-image:linear-gradient(180deg,#fff,#f8f9fa)}.section.section--footer{padding-top:0;padding-bottom:80px}.section.section--benefits{position:relative;overflow:hidden;background-color:#151718;color:#ecedee}.projects-wrap{display:flex;flex-direction:column;align-items:center}