@charset "utf-8";

/* font-family: 'Inter', sans-serif; */


@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
/* font-family: 'Manrope', sans-serif; */




/* CSS Document */
body {
    padding: 0px;
    margin: 0px;
    background-color: var(--bg-white);
    font-size: 16px;
    color: #303030;
    line-height: 20px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
main,
nav,
section,
audio,
video,
source {
    display: block;
    margin: 0;
    padding: 0;
}

a,
img {
    border: medium none;
}

a {
    color: #303030;
    text-decoration: none;
}

div {
    margin: 0;
    padding: 0;
}

p {
    font-size: 16px;
    line-height: 24px;
    padding: 0px;
    margin: 0px;
    color: #350B20;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    line-height: 30px;
}

a {
    color: #303030;
    outline: none;
}

ul,
li {
    list-style: none;
}

a:focus,
:focus {
    outline: none;
}

ul,
ol {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clear {
    clear: both;
    line-height: 1px;
    padding: 0px;
    height: 0px;
    font-size: 1px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.anim {
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.anim2 {
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.row {
    width: 1290px;
    margin: auto;
    padding: 0px;
}

.text-center {
    text-align: center;
}

header {
    float: left;
    width: 100%;
    position: relative;
    z-index: 999999;
    background: #fff;
}

.menu-sec {}

.menu-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* flex-wrap: wrap; */
    column-gap: 0;
    float: left;
    width: 100%;
    padding: 16px 0;
    align-items: center;
}

.logo {
    float: left;
}

.main-menu {
    display: flex;
}

body section.in-banner {
    float: left;
    width: 100%;
    background: linear-gradient(71.74deg, #00ACF6 -53.88%, #01ADF5 -21.99%, #02E1B9 93.82%);
    background-blend-mode: multiply;
    overflow: hidden;
    height: 828px;
    position: relative;
}

body section.in-banner .ban1 {

background: url(../images/ban-1.png) repeat-y;

animation: slide 500s linear infinite;

-webkit-animation: slide 500s linear infinite;

position: absolute;

width: 100%;

height: 10710px;

backface-visibility: hidden;

background-size: contain;

left: 0;

top: -630px;

z-index: 9999;
}

.ba-pad {
    transform: rotate(318deg);
    width: 790px;
    height: 1290px;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 9;
}

 


body section.in-banner .ban2 {

background: url(../images/ban-2.png) repeat-y;

animation: slide1 500s linear infinite;
-webkit-animation: slide1 500s linear infinite;
position: absolute;

width: 100%;

height: 10710px;

backface-visibility: hidden;

background-size: contain;

left: 0;

bottom: -190px;
}

.ba-pad.bb-1 {
 
top: -330px;
 
right: -690px;
}
.ba-pad.bb-2 {
 
top: -330px;
 
right: 1250px;
 
}
    
 

@-webkit-keyframes slide {
    0% {
        transform: translateY(0) translateZ(0);
    }

    100% {
        transform: translateY(-100%) translateZ(0);
    }
}
@keyframes slide {
    0% {
        transform: translateY(0) translateZ(0);
    }

    100% {
        transform: translateY(-100%) translateZ(0);
    }
}


@keyframes slide1 {
    0% {
        transform: translateY(0) translateZ(0);
    }

    100% {
        transform: translateY(100%) translateZ(0);
    }
}
@-webkit-keyframes slide1 {
    0% {
        transform: translateY(0) translateZ(0);
    }

    100% {
        transform: translateY(100%) translateZ(0);
    }
}
body section.port-cnt {
    float: left;
    width: 100%;
    padding: 120px 0;
}
body section.port-cnt div.row {}
body section.port-cnt div.row h1 {
    color: #333;
    font-family: 'Manrope', sans-serif;
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 24px;
}
body section.port-cnt div.row h1 span {
    font-weight: 700;
}
body section.port-cnt div.row p {
    color: #333;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    margin-bottom: 24px;
    letter-spacing: 0.1px;
}
body section.port-cnt div.row p span {
    font-weight: 600;
}
body section.port-cnt div.row ul {
    display: flex;
    margin-top: 40px;
    border-top: 1px solid #EFEFEF;
    padding-top: 40px;
}
body section.port-cnt div.row ul li {
    flex: 0 1 35%;
}
body section.port-cnt div.row ul li h2 {
    color: #333;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 30px */
    letter-spacing: 0.1px;
}
body section.port-cnt div.row ul li p {
    color: #333;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.1px;
    margin: 0;
}
body section.port-img {
    float: left;
    width: 100%;
    background: #FAF8F6;
    padding: 120px 0;
}
body section.port-img div.row {}
body section.port-img div.row ul {
    display: flex;
    row-gap: 60px;
    flex-wrap: wrap;
}
body section.port-img div.row ul li {
    flex: 0 1 100%;
}
body section.port-img div.row ul li img {
    float: left;
    width: 100%;
}
body section.port-img div.row ul li ul {column-gap: 4%;}
body section.port-img div.row ul li ul li {
    flex: 0 1 48%;
}
body section.port-img div.row ul li ul li img {}
body section.port-img div.testi {
    text-align: center;
    float: none;
    max-width: 1040px;
    margin: 0 auto;
    margin-top: 70px;
}
body section.port-img div.testi img.tile {
    margin-bottom: 180px;
}
body section.port-img div.testi p {
    font-family: 'Manrope';
    font-size: 24px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: 0.01em;
    text-align: left;
    margin: 0 auto 24px;
}
body section.port-img div.testi div.test-img {
    display: flex;
    align-items: center;
}
body section.port-img div.testi div.test-img img {
    float: left;
}
body section.port-img div.testi div.test-img p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.4000000059604645px;
    text-align: left;
    margin-left: 30px;
}
body section.port-img div.testi div.test-img p span {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.5px;
    text-align: left;
    display: block;
}
body footer {
    float: left;
    width: 100%;
    text-align: center;
    padding-top: 120px;
}
body footer h3 {
    color: #000;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 60px;
    line-height: 76.8px; /* 76.8px */
}
body footer h3 span {
    font-weight: 700;
}
body footer a.gt {
    color: #FFF;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    letter-spacing: 1px;
    border-radius: 190px;
    background: #0095A3;
    text-transform: uppercase;
    padding: 24px 36px;
}
body footer div.f-1 {
    float: left;
    width: 100%;
    text-align: left;
    margin-top: 120px;
    padding-top: 30px;
    border-top: 1px solid #E0E0E0;
}
body footer div.f-1 div.row {}
body footer div.f-1 div.row div.f-pad {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body footer div.f-1 div.row div.f-pad img {}
body footer div.f-1 div.row div.f-pad ul {
    display: flex;
    column-gap: 50px;
}
body footer div.f-1 div.row div.f-pad ul li {}
body footer div.f-1 div.row div.f-pad ul li a {
    color: #4F4F4F;
    text-align: right;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
    letter-spacing: 2px;
    text-transform: uppercase;
}
.s-img{float: left; width: 100%;}
section.in-banner.s-ban{
    background: none;
    min-height: inherit;
}

/* mobile menu css */
.mobile-menu {
    position: fixed;
    top: 51px;
    width: 100%;
    z-index: 9999;
    background: #ffffff;
    height: 100vh;
    overflow: auto;
    padding: 20px 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.m-menu img {
    width: 20px;
}

.mobile-menu .mob-main {
    float: left;
    width: 100%;
    padding-top: 40px;
    text-align: center;
}

.mobile-menu .logo {
    float: left;
    padding: 20px;
    width: 100%;
}

.mobile-menu .logo img {
    float: left;
    background: none;
    background: #ffffff;
}

.mobile-menu.slow {
    opacity: 1;
    visibility: visible;
}

.mobile-menu .nav {
    width: 100%;
    background: #fff;
    float: left;
    padding: 0 0 75px 0;
    height: 100%;
}

.m-menu {
    float: right;
    z-index: 99999;
    position: absolute;
    right: 10px;
    display: none;
    width: 30px;
    height: 15px;
    top: 30px;
    margin: 0px 0 0 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.m-menu a {
    display: block;
    float: left;
    min-height: 27px;
    min-width: 30px;
}

.m-menu span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #FF5722;
    border-radius: 0px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.m-menu:hover span {
    background: #000;
}

.wht-logo-hdr .m-menu span {
    background: #ffffff;
}

.wht-logo-hdr .m-menu:hover span {
    background: #ffffff;
}

/* Icon 4 */
.m-menu span:nth-child(1) {
    width: 24px;
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

.m-menu span:nth-child(2) {
    width: 24px;
    left: auto;
    top: 7px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

.m-menu span:nth-child(3) {
    width: 24px;
    top: 15px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

.m-menu.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 4px;
    background: #FF5722;
}

.m-menu.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.m-menu.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 17px;
    left: 4px;
    background: #FF5722;
}

ul.nav-menu li {
    text-align: center;
    margin-bottom: 20px;
}


.banner {
    float: left;
    width: 100%;
    /* overflow-y: hidden; */
    text-align: center;
    position: relative;
    padding: 140px 0;
}
.banner h1 {
    font-size: 64px;
    text-align: center;
    line-height: 76.8px;
    max-width: 890px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.banner h1 span.sp {
    position: relative;
}
.banner h1 span.tt {
    font-weight: 600;
}
.banner p {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.01em;
    max-width: 974px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 30px;
}
.banner p span {
    color: #F37021;
}
.banner a {
    background: #F37021;
    display: inline-flex;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 1px;
    position: relative;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    height: 60px;
    align-items: center;
    justify-content: center;
    padding: 0 30px 0 50px;
    border-radius: 100px;
}
.works {}
.works {
    float: left;
    width: 100%;
    background: #191919;
    padding: 120px 0 370px;
}
.works ul {
    display: flex;
    align-items: center;
    justify-content: center;
}
.works ul li {
    flex: 0 1 25%;
    padding: 0 3%;
}
.works ul li h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 74px;
    letter-spacing: 0em;
    margin-bottom: 20px;
    color: #FFFFFF;
    text-align: center;
}
.works ul li p {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 38px;
    letter-spacing: 0.01em;
    text-align: center;
    color: #fff;
}
.works .work-pad {
    float: left;
    width: 100%;
    border-top: 1px solid #474747;
    padding-top: 80px;
    margin-top: 90px;
    display: flex;
    column-gap: 0%;
    flex-wrap: wrap;
}
.works .work-pad h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 64px;
    letter-spacing: 0em;
    flex: 0 1 51%;
    text-align: left;
    color: #FFFFFF;
}
.works .work-pad p {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 38px;
    letter-spacing: 0.01em;
    flex: 0 1 44%;
    text-align: left;
    color: #fff;
}
.services {
    float: left;
    width: 100%;
    text-align: center;
}
.services img {
    max-width: 1040px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 140px;
    margin-top: -280px;
}
.services h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 64px;
    font-weight: 400;
    margin-bottom: 90px;
    line-height: 90px;
    letter-spacing: 0em;
    padding: 0 3%;
    float: left;
    width: 100%;
}
.services h2 span {
    font-weight: 600;
}
.services ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.services ul li {
    flex: 0 1 100%;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 60px;
    margin-top: 60px;
}
.services ul li .ser-1 {
    float: left;
    width: 30%;
    padding-right: 30px;
    text-align: left;
}
.services ul li .ser-1 p {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
    letter-spacing: 0em;
    text-align: left;
}
.services ul li .ser-2 {
    float: left;
    width: 70%;
}
.services ul li .ser-2 p {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: 1px;
    text-align: left;
}
.creative-endore {
    float: left;
    width: 100%;
    background: #F9F9F9;
    padding: 120px 0;
}
.creative-endore ul.ree {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
}
.creative-endore ul.ree li {
    flex: 0 1 49%;
}
.creative-endore ul.ree li ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 120px;
}
.creative-endore ul.ree li ul li {
    flex: 0 1 100%;
}
.creative-endore ul.ree li ul li .ser-pad {
    float: left;
    width: 100%;
}
.creative-endore ul.ree li ul li .ser-pad .ser-img {
    float: left;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    margin-bottom: 40px;
/* transform: scale(1.1); */
    width: 100%;
    overflow: hidden;
}
.creative-endore ul.ree li ul li .ser-pad .ser-img img {
    float: left;
    width: 100%;
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
}
.creative-endore ul.ree li ul li .ser-pad ul {
    width: 100%;
    flex-wrap: nowrap;
    column-gap: 27px;
}
.creative-endore ul.ree li ul li .ser-pad ul li {
    flex: 0 1 auto;
}
.creative-endore ul.ree li ul li .ser-pad ul li img {
    background: #ECECEC;
    padding: 10px;
    border-radius: 80px;
    width: 60px;
    height: 60px;
    object-fit: none;
}
.creative-endore ul.ree li ul li .ser-pad ul li h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 36px;
    letter-spacing: 0em;
    text-align: left;
}
.creative-endore ul.ree li ul li .ser-pad ul li p {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.1em;
    text-align: left;
    color: #828282;
    text-transform: uppercase;
}
.banner a::after{content: "";background: url(../images/btn-arrow.svg) no-repeat left center;position: absolute;width: 14px;height: 14px;left: 20px;}
.banner h1 span.sp::after{content: "";position: absolute;background: url(../images/arrow-2.svg) no-repeat;width: 160px;height: 90px;left: -8px;}
.home header::after{content: "";position: absolute;background: url(../images/arrow-3.svg) no-repeat;width: 628px;height: 392px;right: 0;top: 0;z-index: -1;}
.creative-endore h2{
    font-family: 'Manrope', sans-serif;
    font-size: 64px;
    font-weight: 500;
    margin-bottom: 90px;
    line-height: 90px;
    letter-spacing: 0em;
    text-align: center;
}
.creative-endore ul.ree li ul li a:hover .ser-pad ul li span{background: #FF5722  url(../images/arrow-h.svg) no-repeat center center;transform: rotate(-45deg);}
.creative-endore ul.ree li ul li .ser-pad ul li span{
    background: #ECECEC;
    border-radius: 80px;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    width: 60px;
    height: 60px;
    display: inline-flex;
    background: #ECECEC url(../images/arrow.svg) no-repeat center center;
    }
    .creative-endore ul.ree li ul li:hover .ser-pad .ser-img img{    transform: scale(1.1);}
    .creative-endore ul.ree li.mm {
        margin-top: 120px;
    }
    .serv-img{
    float: left;
    width: 100%;
    position: relative;
}
.serv-img::after{content: "";background: url(../images/arrow-1.svg) no-repeat;width: 130px;height: 380px;position: absolute;left: 0;top: -270px;}
.services ul li:last-child{border: none;}
.is-sticky header::after {display: none;}
.cnt {
    float: left;
    width: 100%;
    padding: 40px 0;
}
.cnt .cnt-lft {
    float: left;
    width: 50%;
}
.cnt .cnt-lft h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 89.6px;
    text-align: left;
    margin-bottom: 25px;
}
.cnt .cnt-lft p {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    padding-right: 70px;
    text-align: left;
}
.cnt .cnt-rgt {
    float: left;
    width: 50%;
}
.cnt .cnt-rgt ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 25px;
    column-gap: 2%;
}
.cnt .cnt-rgt ul li {
    flex: 0 1 49%;
}
.cnt .cnt-rgt ul li label {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26.6px;
    letter-spacing: -0.4000000059604645px;
    text-align: left;
    float: left;
    width: 100%;
    margin-bottom: 15px;
}
.cnt .cnt-rgt ul li input[type="text"], .cnt .cnt-rgt ul li input[type="email"], textarea {
    background: #F8F8F8;
    border: none;
    float: left;
    width: 100%;
    padding: 5px 20px;
    font-size: 18px;
    height: 57px;
}
.cnt .cnt-rgt ul li.fw {
    flex: 0 1 100%;
}
.cnt .cnt-rgt ul li.fw label {}
.cnt .cnt-rgt ul li.fw input {}
.cnt .cnt-rgt ul li.fw textarea {
    height: 240px;
    padding: 20px; font-family: 'Manrope', sans-serif;   font-size: 18px;
    font-weight: 500;
}
.cnt .cnt-rgt ul li.sb {
    text-align: right;
    flex: 0 1 100%;  
}
.cnt .cnt-rgt ul li.sb input[type="submit"] {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    line-height: 24px;
    letter-spacing: 1px;
    background: #F37021;
    text-align: center;
    border: none;
    color: #fff;
    padding: 0px 36px 0px 36px;
    text-transform: uppercase;
    border-radius: 100px;
    height: 60px;
    display: inline-flex;
}
.w-bg{background: #fff;}