@import url("about.css");
@import url("career.css");
@import url("clients.css");
@import url("services.css");
@import url("services_inner.css");
@import url("work.css");
@import url("work_inner.css");
@import url("contact.css");
@import url("blog.css");
@import url("services_sub.css");

body#Home, body#About, body#Career, body#Clients, body#Services, body#Services-inner, body#Work, body#Work-inner, body#Contact, body#Blog, body#Services-sub {
    margin: 0 auto;
    padding: 0;
    max-width: 1920px;
}

.w25 {
    width: 25%;
}

.w50 {
    width: 48%;
}

.w60 {
    width: 60%;
}

.w40 {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

}

.w75 {
width: 75%;
}

.w100 {
width: 100%;
}

.d-flex {
display: flex;
align-items: center;
justify-content: center;
}

.d-column {
flex-direction: column;
}

.d-row {
flex-direction: row;
}

#only-menu ul {
list-style: none;
padding: 0;
margin: 0 0 0 8%;
counter-reset: my-sec-counter;
}

#only-menu ul li {
padding: 0, margin:0;
}

#only-menu ul.menu-align li {
font-family: 'montserratbold';
font-size: 35px;
color: #fff;
width: 33%;
margin-bottom: 8%;
}

#only-menu ul.menu-align li a {
font-size: 35px;
color: #fff;
text-decoration: none;
}

#only-menu ul.menu-align li.active {
font-family: 'montserratbold';
font-size: 50px;
color: #c8fe50;
}

#only-menu ul.menu-align li.active a {
font-family: 'montserratbold';
font-size: 50px;
color: #c8fe50;
}

#only-menu ul.menu-align li::before {
position: absolute;
color: #fff;
font-size: 15px;
margin-top: -17px;
margin-left: 0px;
font-family: 'montserratbold';
z-index: -1;
counter-increment: my-sec-counter;
content: "0"counter(my-sec-counter) "";
}

#only-menu ul.social-icon-main {
list-style: none;
padding: 0;
margin: 0 0 0 8%;
display: flex;
}

#only-menu ul li.social-icon {
list-style: none;
padding: 10px;
background: #fff;
border-radius: 50px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #081475;
font-size: 30px;
}

#only-menu ul li.social-icon:last-child {
margin-right: 0px;
}

#only-menu ul li.social-icon:hover {
background: #c8fe50;
}

#only-menu ul.social-icon-main a {
color: #fff;
margin-right: 25px;
text-decoration: none
}

#only-menu ul li.social-icon.browser-window__link {
width: 20px;
height: 20px;
}

#only-menu .ordermenu {
order: 1
}

#only-menu .orderlogo {
order: 2
}

.menu-align {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}

img {
max-width: 100%;
height: auto;
}

/**********Hamburg animation*****************/
.demo-4 .browser-window__link .hamburger {
display: flex !important;
align-content: center;
justify-content: center;
}

.demo-4 .browser-window__link .hamburger span {
left: 0 !important;
webkit-transform: translateX(0%) !important;
-ms-transform: translateX(0%) !important;
transform: translateX(0%) !important;
}

.browser-window__link .hamburger span:nth-child(1), .browser-window__link .hamburger span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: -webkit-transform .3s linear 0.2s;
-moz-transition: -moz-transform .3s linear 0.2s;
transition: transform .3s linear 0.2s;
}

.browser-window__link .hamburger span:nth-child(1).open {
transform: rotate(45deg) !important;
top: 8px !important;
left: 0px !important;
}

.browser-window__link .hamburger span:nth-child(2).n-open {
transform: rotate(-45deg) !important;
top: 8px !important;
left: 0px !important;
}

.d-off {
display: none !important;
}

.d-on {
display: flex !important;
}

.show-world-menu {
transform: scale(1) !important;
}

/*.show-menu{transform: scale(1)!important;}*/

/**********Hamburg animation close*****************/

/*************************************button animation*****************************/

/*our service know more button*/
#our-serv .button-aninmation {
display: flex;
justify-content: flex-start;
margin-left: 47px;
}

#our-serv .inner {
padding: 13px 0px;
display: inline-block;
}

#our-serv .button {
position: relative;
display: inline-block;
}

#our-serv .text {
position: relative;
display: flex;
align-items: center;
font-size: 17px;
font-family: 'montserratthin';
font-style: normal;
color: #fff;
}

#our-serv .inner:hover .button.is-hover .text:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#our-serv .inner:hover .button.is-hover .text:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .1s;
transition-delay: .1s;
}

#our-serv .arrow {
position: absolute;
top: calc(50% - 6px);
right: -36px;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .4s cubic-bezier(.54, .1, 0, .99);
transition: all .4s cubic-bezier(.54, .1, 0, .99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
fill: #fff;
}

#our-serv .inner:hover .button.is-hover .circle-container {
-webkit-transform: translate(185%, -50%);
transform: translate(185%, -50%);
-webkit-transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
}

#our-serv .inner:hover .button.is-hover .arrow {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .25s;
transition-delay: .25s;
}

#our-serv .text:after, #our-serv .text:before {
content: "";
position: absolute;
top: calc(50% - 1px);
display: inline-block;
width: 16px;
height: 2px;
background-color: #fff;
}

#our-serv .text:before {
right: calc(100% + 6px);
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99);
transition: all .5s cubic-bezier(.54, .1, 0, .99);
}

#our-serv .text:after {
left: calc(100% + 6px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#our-serv .text__source {
position: relative;
display: inline-block;
font-size: 11px;
font-family: 'montserratregular';
font-style: normal;
color: #fff;
}

#our-serv .circle-container {
position: absolute;
top: 50%;
left: -50px;
right: 0;
z-index: -1;
width: 82%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
height: 50px;
-webkit-transition: all .7s cubic-bezier(.54, .1, 0, .99);
transition: all .7s cubic-bezier(.54, .1, 0, .99);
}

#our-serv .circle {
display: inline-block;
width: 72px;
border-radius: 50%;
background-color: #000 !important;
opacity: .2;
}

/*------------------------------*/

/*our service discover button*/
#our-serv .service-button-aninmation {
display: flex;
justify-content: flex-start;
margin-left: 47px;
bottom: 22px;
position: absolute;
left: 6%;
}

#our-serv .service-button-aninmation .inner {
padding: 13px 0px;
display: inline-block;
}

#our-serv .service-button-aninmation .button {
position: relative;
display: inline-block;
}

#our-serv .service-button-aninmation .text {
position: relative;
display: flex;
align-items: center;
font-size: 17px;
font-family: 'montserratthin';
font-style: normal;
color: #000;
}

#our-serv .service-button-aninmation .inner:hover .button.is-hover .text:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#our-serv .service-button-aninmation .inner:hover .button.is-hover .text:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .1s;
transition-delay: .1s;
}

#our-serv .service-button-aninmation .arrow {
position: absolute;
top: calc(50% - 6px);
right: -36px;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .4s cubic-bezier(.54, .1, 0, .99);
transition: all .4s cubic-bezier(.54, .1, 0, .99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
fill: #000;
}

#our-serv .service-button-aninmation .inner:hover .button.is-hover .circle-container {
-webkit-transform: translate(130%, -50%);
transform: translate(130%, -50%);
-webkit-transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
}

#our-serv .service-button-aninmation .inner:hover .button.is-hover .arrow {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .25s;
transition-delay: .25s;
}

#our-serv .service-button-aninmation .text:after, #our-serv .service-button-aninmation .text:before {
content: "";
position: absolute;
top: calc(50% - 1px);
display: inline-block;
width: 16px;
height: 2px;
background-color: #000;
z-index: 1;
}

#our-serv .service-button-aninmation .text:before {
right: calc(100% + 6px);
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99);
transition: all .5s cubic-bezier(.54, .1, 0, .99);
}

#our-serv .service-button-aninmation .text:after {
left: calc(100% + 6px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#our-serv .service-button-aninmation .text__source {
position: relative;
display: inline-block;
font-size: 17px;
font-family: 'montserratmedium';
font-style: normal;
color: #000;
z-index: 1;
}

#our-serv .service-button-aninmation .circle-container {
position: absolute;
top: 50%;
left: -50px;
right: 0;
z-index: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
height: 72px;
-webkit-transition: all .7s cubic-bezier(.54, .1, 0, .99);
transition: all .7s cubic-bezier(.54, .1, 0, .99);
}

#our-serv .service-button-aninmation .circle {
display: inline-block;
border-radius: 50%;
background-color: #e7e7e7 !important;
opacity: 1;
}

/*-----------------------*/

/*artical discover button*/
#artical .artical-button-aninmation {
display: flex;
justify-content: flex-start;
margin-left: 47px;
bottom: 22px;
position: absolute;
left: 6%;
}

#artical .artical-button-aninmation .inner {
padding: 13px 0px;
display: inline-block;
}

#artical .artical-button-aninmation .button {
position: relative;
display: inline-block;
}

#artical .artical-button-aninmation .text {
position: relative;
display: flex;
align-items: center;
font-size: 17px;
font-family: 'montserratthin';
font-style: normal;
color: #000;
}

#artical .artical-button-aninmation .inner:hover .button.is-hover .text:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#artical .artical-button-aninmation .inner:hover .button.is-hover .text:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .1s;
transition-delay: .1s;
}

#artical .artical-button-aninmation .arrow {
position: absolute;
top: calc(50% - 6px);
right: -36px;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .4s cubic-bezier(.54, .1, 0, .99);
transition: all .4s cubic-bezier(.54, .1, 0, .99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
fill: #000;
}

#artical .artical-button-aninmation .inner:hover .button.is-hover .circle-container {
-webkit-transform: translate(130%, -50%);
transform: translate(130%, -50%);
-webkit-transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
}

#artical .artical-button-aninmation .inner:hover .button.is-hover .arrow {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .25s;
transition-delay: .25s;
}

#artical .artical-button-aninmation .text:after, #artical .artical-button-aninmation .text:before {
content: "";
position: absolute;
top: calc(50% - 1px);
display: inline-block;
width: 16px;
height: 2px;
background-color: #000;
z-index: 1;
}

#artical .artical-button-aninmation .text:before {
right: calc(100% + 6px);
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99);
transition: all .5s cubic-bezier(.54, .1, 0, .99);
}

#artical .artical-button-aninmation .text:after {
left: calc(100% + 6px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#artical .artical-button-aninmation .text__source {
position: relative;
display: inline-block;
font-size: 17px;
font-family: 'montserratmedium';
font-style: normal;
color: #000;
z-index: 1;
}

#artical .artical-button-aninmation .circle-container {
position: absolute;
top: 50%;
left: -50px;
right: 0;
z-index: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
height: 72px;
-webkit-transition: all .7s cubic-bezier(.54, .1, 0, .99);
transition: all .7s cubic-bezier(.54, .1, 0, .99);
}

#artical .artical-button-aninmation .circle {
display: inline-block;
border-radius: 50%;
background-color: #e7e7e7 !important;
opacity: 1;
}

/*-----------------------*/

/*************************************button animation clode*****************************/

/* ***************************  navbar css ***************************  */
.nav {
position: fixed;
display: grid !important;
grid-template-columns: 1fr 1fr;
width: 100%;
z-index: 10;
max-width: 1920px;
padding: 34px 0 34px 0;
}

.logo {

/* padding: 2% 5% 2% 10%;
 width: 12%;*/
width: 15vh;
}

#nav-tab {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
display: flex;
background-color: #081475;
z-index: 9;
overflow: hidden;
animation-name: menuanimation;
-webkit-transition: all 2s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: scale(0);
max-width: 1920px;
}

.world-wide-menu {
display: flex;
flex-direction: row;
align-items: center;
-webkit-transition: -webkit-transform .5s linear 0.2s;
margin-left: 12.5%;
-moz-transition: -moz-transform .5s linear 0.2s;
transition: transform .5s linear 0.2s;
/*width: 43.8%;*/
}

.grid{/*width: 45.7%;margin-right: 4.3%*/ }

.world-menu {
display: flex;
flex-direction: row;
padding: 10% 10% 0 10%;
justify-content: space-around;
width: 100%;
}

.world-menu ul {
list-style: none;
padding: 0;
margin: 0 20px 0 0;
}

.world-menu ul li {
display: flex;
justify-content: center;
flex-direction: column;
color: #c7fd50;
font-size: 23px;
font-family: 'montserratmedium';
margin-bottom: 15px;
}

.world-menu ul li a {
color: #c7fd50;
text-decoration: none;
}

.world-menu ul li span {
color: #fff;
font-size: 15px;
text-transform: uppercase;
font-family: 'montserratmedium';
}

.world-menu ul li span a {
color: #fff;
text-decoration: none;
line-height: 25px;
}

.world-menu ul li span.active a {
color: #c7fd50;
font-size: 15px;
text-transform: uppercase;
font-family: 'montserratmedium';
}

.world-menu ul li:first-child {
font-size: 25px;
color: #fff;
font-family: 'montserratmedium';
text-transform: uppercase;
position: relative;
margin-bottom: 30px;
}

.world-menu ul li:first-child:before {
content: "";
position: absolute;
background-color: #c7fd50;
width: 40px;
height: 2px;
top: 30px
}

#world-menu-btn {
display: flex;
width: 50px;
height: 50px;
border-radius: 50%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
background-color: #c8fe50;
position: absolute;
right: 2.5%;
top: 17px;
}

#world-menu-btn .hamburger {
width: 26px;
height: 18px;
position: relative;
}

#world-menu-btn .hamburger span:nth-child(1) {
transform: rotate(45deg) !important;
top: 8px !important;
left: 0px !important;
}

#world-menu-btn .hamburger span:nth-child(2) {
transform: rotate(-45deg) !important;
top: 8px !important;
left: 0px !important;
}

#world-menu-btn .hamburger span {
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: 2px;
background: var(--color-text);
z-index: 0;
}

#world-menu-btn .hamburger span:before {
position: absolute;
content: "";
display: block;
top: 0;
height: 100%;
width: 0;
right: 0;
left: auto;
}

#world-menu-btn .hamburger span:after {
position: absolute;
content: "";
display: block;
top: 0;
height: 100%;
width: 0;
right: 0;
left: auto;
}

/*-------------------- only menu-------------------*/
#only-menu {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
display: flex;
background-color: #081475;
z-index: 9;
overflow: hidden;
animation-name: menuanimation;
-webkit-transition: all 2s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
max-width: 1920px;
}

.show-only-menu {
transform: scale(0) !important
}

/*#only-menu{transform: scale(1)!important;}*/

/*---------------------------------------*/

/* ***************************  navbar css close ***************************  */

/* ***************************  banner css  *************************** */
.banner {
height: 870px;
background-image: url("../images/top-head-img.jpg");
background-size: cover;
position: relative;
background-position: center center;
background-repeat: no-repeat;
}

.banner .banner-text{position: relative;top:500px; padding: 0 0 0 7.5%;}

.banner .text-div {
position:relative;
padding: 0 0 0 97px;
/*top:514px;
padding: 0 0 0 14%;*/
}

.banner .button-div {
position: absolute;
/*top:640px;*/
    top: 130px;
background-image: url(../images/background-dots.png);
background-repeat: no-repeat;
/*width: 16%;*/
height: 14vh;
background-size: contain;
background-position: left bottom;
align-items: flex-end;
display: flex;
}

.banner .button-div button {
position: relative;
bottom: 4%;
margin: 0 0 0 0%;
display: flex;
align-items: center;
font-size: 14px;
color: #fff;
font-family: 'montserratregular';
background-color: transparent;
border: 0;
outline: 0
}

.banner h1 {
font-family: 'montserratsemibold';
font-size: 53px;
color: #c8fe50;
letter-spacing: -5px;
margin: 0;
}

.banner h3 {
font-family: 'montserratextralight';
font-size: 35px;
color: #fff;
line-height: 50px;
margin: 0;
}

/* ***************************  banner css close *************************** */

/* ***************************  about section css  *************************** */
#Home .about-sect {
display: flex;
align-items: center;
background-image: url("../images/top-bg-section-element-right.png"), url("../images/top-bg-section-element-left.png"), url("../images/top-bg-section-element-mid.png");
background-repeat: no-repeat;
background-position: top right, bottom left, 80% bottom;
background-size: auto 30%, auto 45%, auto 15%;/*background-size: 14% 40%,20% 60%,9% 18%;*/
}

#Home .about-sect .about-text-div {
margin: 0 auto;
}

#Home .about-sect .about-text-div h2 {
font-family: 'montserratsemibold';
font-size: 50px;
color: #1b2bae;
text-align: center;
font-style: italic;
width: 70%;
margin: 0 auto;
padding-bottom: 30px;
line-height: 58px;
padding-top: 217px;
}

#Home .about-sect .about-text-div h4 {
font-family: 'montserratlight';
font-size: 16px;
color: #494a4a;
text-align: center;
width: 60%;
margin: 0 auto;
line-height: 30px;
}

/* button animation*/
.button-aninmation {
display: flex;
justify-content: center;
}

.inner {
padding: 80px;
display: inline-block;
}

.button {
position: relative;
display: inline-block;
}

.text {
position: relative;
display: inline-block;
font-size: 17px;
font-family: Geomanist, sans-serif;
font-weight: 500;
font-style: normal;
color: #2b1e31;
z-index: 2;
}

.inner:hover .button.is-hover .text:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

.inner:hover .button.is-hover .text:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .1s;
transition-delay: .1s;
}

.arrow {
position: absolute;
top: calc(50% - 8px);
right: -36px;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .4s cubic-bezier(.54, .1, 0, .99);
transition: all .4s cubic-bezier(.54, .1, 0, .99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}

.inner:hover .button.is-hover .circle-container {
-webkit-transform: translate(130%, -50%);
transform: translate(130%, -50%);
-webkit-transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
}

.inner:hover .button.is-hover .arrow {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .25s;
transition-delay: .25s;
}

.text:after, .text:before {
content: "";
position: absolute;
top: calc(50% - 3px);
display: inline-block;
width: 16px;
height: 2px;
background-color: #2b1e31;
}

.text:before {
right: calc(100% + 6px);
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99);
transition: all .5s cubic-bezier(.54, .1, 0, .99);
}

.text:after {
left: calc(100% + 6px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

.text__source {
position: relative;
display: inline-block;
font-size: 17px;
font-family: Geomanist, sans-serif;
font-weight: 500;
font-style: normal;
color: #2b1e31;
}

.circle-container {
position: absolute;
top: 50%;
left: -50px;
right: 0;
z-index: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
height: 72px;
-webkit-transition: all .7s cubic-bezier(.54, .1, 0, .99);
transition: all .7s cubic-bezier(.54, .1, 0, .99);
}

.circle {
display: inline-block;
width: 72px;
border-radius: 50%;
background-color: #f0f0f1;
}

/*-------------------------------*/

/* ***************************  about section css close *************************** */

/* ***************************  work section css *************************** */
#Home .work {
margin-bottom: 3%;
background-image: url("../images/third-bg-section-element-right.png");
background-repeat: no-repeat;
background-position: bottom right;
background-size: auto 38%;
}

#Home .work .work-container {
margin: 0 10%;
}

#Home .work .work-container .title-small-text {
font-family: 'montserratsemibold';
font-size: 14px;
color: #9c9c9c;
padding: 0 0 27px 0;
text-transform: uppercase;
}

#Home .work .work-container .title-mid-text {
font-family: 'montserratlight';
font-size: 33px;
color: #313131;
    margin: 0 0 8px 0;
    line-height: 32px;
}

#Home .work .work-container .title-big-text {
font-family: 'montserratbold';
font-size:  45px;
color: #1b2bae;
    line-height: 45px;
        margin-bottom: 75px;
}

#Home .work .work-container .title-big-text:after {
content: "";
background: url("../images/design-element.png") no-repeat;
width: 50px;
height: 50px;
position: absolute;
display: inline-block;
z-index: -1;
    margin-left: -36px;
    margin-top: -18px;
    background-size: 100% auto;
}

#Home .work .work-container .squre-element-div {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

.squre-element-div .span-div {
width: 33%;
}

.span-div .squre-div-type-1 {
margin: 20px 10px;
display: flex;
position: relative;
}

.span-div .squre-div-type-2 {
margin: 20px 10px;
display: flex;
position: relative;
}

.work .span-div .squre-div-type-2 .img-div-cont {
position: relative;
}

.work .span-div .squre-div-type-2 .img-div-cont canvas {
position: absolute;
left: 0;
}

.work .span-div .squre-div-type-1 .img-div-cont {
position: relative;
}

.work .span-div .squre-div-type-1 .img-div-cont canvas {
position: absolute;
left: 0;
}

.work-button-div {
align-items: center;
align-content: center;
height: 52.5%;
justify-content: center;
}

#Home .work .span-div .text-div {
position: absolute;
}

#Home .work .span-div .text-div .text-head {
font-family: 'montserratsemibold';
font-size: 22px;
color: #020202;
}

#Home .work .span-div .text-div .text-sub {
font-family: 'montserratlight';
font-size: 17px;
color: #020202;
font-style: italic;
}

#Home .work .squre-element-div .span-div:nth-child(1) .squre-div-type-1 .text-div {
bottom: 20px;
left: -20px
}

#Home .work .squre-element-div .span-div:nth-child(1) .squre-div-type-2 .text-div {
top: 20px;
right: -20px;
}

#Home .work .squre-element-div .span-div:nth-child(2) .squre-div-type-2 .text-div {
bottom: 16px;
right: -20px
}

#Home .work .squre-element-div .span-div:nth-child(2) .squre-div-type-1 .text-div {
bottom: 20px;
right: -20px;
}

#Home .work .squre-element-div .span-div:nth-child(3) .squre-div-type-1 .text-div {
top: 20px;
right: -20px
}

/* ***************************  work section css close *************************** */

/* ***************************  services section css  *************************** */


#Home .services {
margin-bottom: 8%;
margin-top: 10%;
background-image: url("../images/top-bg-section-element-mid.png");
background-repeat: no-repeat;
background-position: top left 70%;
background-size: auto 15%;
}

#Home .services .services-bg {
background: rgba(250, 250, 250, 1);
background: -moz-linear-gradient(left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(250, 250, 250, 1)), color-stop(40%, rgba(250, 250, 250, 1)), color-stop(40%, rgba(250, 250, 250, 0)), color-stop(41%, rgba(250, 250, 250, 0)), color-stop(100%, rgba(250, 250, 250, 0)));
background: -webkit-linear-gradient(left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
background: -o-linear-gradient(left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
background: -ms-linear-gradient(left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
background: linear-gradient(to right, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#fafafa', GradientType=1);
padding-bottom: 40px;
}

#Home .services .services-container {
margin: 0 0 0% 10%;
/*padding: 3% 0;*/
padding: 90px 0 60px 0;
}

#Home .services .services-container .title-small-text {
font-family: 'montserratsemibold';
font-size: 14px;
color: #9c9c9c;
padding: 0 0 27px 0;
text-transform: uppercase;
}

#Home .services .services-container .title-mid-text {
font-family: 'montserratlight';
font-size: 33px;
color: #313131;
    margin: 0 0 8px 0;
    line-height: 32px;
}

#Home .services .services-container .title-big-text {
font-family: 'montserratbold';
z-index: 2;
position: relative;
    font-size: 45px;
    color: #1b2bae;
    line-height: 45px;
}

#Home .services .services-container .title-big-text:after {
content: "";
background: url("../images/design-element.png") no-repeat;
width: 50px;
height: 50px;
position: absolute;
display: inline-block;
z-index: -1;
    margin-left: -38px;
    margin-top: -22px;
    background-size: 100% auto;
}

/*----------------services slider css start-----------------------*/
#Home #our-serv {
position: relative;
}

#Home #our-serv .owl-stage {
counter-reset: my-sec-counter;
}

#Home #our-serv .owl-item {
overflow: hidden;
}

#Home #our-serv .owl-item:before {
position: absolute;
color: #000;
font-size: 100px;
margin-top: 41px;
margin-left: -36px;
z-index: -1;
font-family: 'montserratsemibold';
font-style: italic;
counter-increment: my-sec-counter;
content: "0"counter(my-sec-counter) "";
opacity: 0.1;
}

#Home #our-serv .owl-stage {
display: flex;
}

#Home #our-serv .owl-item {
margin-right: 30px !important;
}

#Home #our-serv .owl-item .item {
display: flex;
height: 65vh;
text-align: left;
}

#Home #our-serv .owl-item:nth-child(4n+1) {
background-color: #162497
}

#Home #our-serv .owl-item:nth-child(4n+2) {
background-color: #f4bc15
}

#Home #our-serv .owl-item:nth-child(4n+3) {
background-color: #f7f6f5
}

#Home #our-serv .owl-item:nth-child(4n+4) {
background-color: #4c1cbc
}

#Home #our-serv .owl-item:nth-child(4n+3) .item .heading h3, #our-serv .owl-item:nth-child(4n+3) .item .heading p, #our-serv .owl-item:nth-child(4n+3) .text__source {
color: #000;
}

#Home #our-serv .owl-item:nth-child(4n+3) .text:after, #our-serv .owl-item:nth-child(4n+3) .text:before {
background-color: #000;
}

#Home #our-serv .owl-item:nth-child(4n+3) .arrow {
fill: #000;
}

#Home #our-serv .counter-div {
position: absolute;
width: 100%;
height: 50%;
overflow: hidden;
margin-top: 20px;
}

#Home #our-serv .icon-div {
width: 35%;
position: absolute;
right: 0;
top: 20px
}

#Home #our-serv .icon-div img {
width: 100%;
}

#Home #our-serv .owl-item .item .heading {
position: absolute;
bottom: 0;
padding: 20px
}

#Home #our-serv .owl-item .item .heading h3 {
font-family: 'montserratmedium';
font-size: 2.3vw;
color: #fff;
}

#Home #our-serv .owl-item .item .heading p {
font-family: 'montserratregular';
font-size: 12px;
color: #fff;
line-height: 19px;
}

#Home #our-serv .owl-nav {
margin-top: 50px;
display: flex;
justify-content: flex-end;
padding-right: 10%;
}

#Home .owl-carousel .owl-nav button.owl-next span {
font-size: 0
}

#Home .owl-carousel .owl-nav button.owl-prev span {
font-size: 0
}

#Home .owl-carousel .owl-nav button.owl-next {
background-image: url(../images/arrow-right.png) !important;
background-repeat: no-repeat !important;
height: 50px;
width: 50px;
background-position: center center !important;
outline: none;
}

#Home .owl-carousel .owl-nav button.owl-prev {
background-image: url(../images/arrow-left.png) !important;
background-repeat: no-repeat !important;
height: 50px;
width: 50px;
background-position: center center !important;
outline: none;
}

/*----------------services slider css close-----------------------*/

/* *************************** services section css close *****************************/

/* ***************************  clients section css ***************************  */

#Home .clients {
margin-bottom: 8%;
background-color: #081375;
padding: 73px 0;
background-image: url("../images/squire-bg-section-element-left.png"), url("../images/squire-bg-section-element-right.png");
background-repeat: no-repeat;
background-position: top 10% left 5%, bottom 10% right 5%;
background-size: auto 18%, auto 18%;
}

#Home .clients .clients-container {
margin: 0 10%;
}

#Home .clients .clients-container .title-small-text {
font-family: 'montserratsemibold';
font-size: 14px;
color: #c8fe50;
padding: 0 0 30px 0;
text-align: center;
text-transform: uppercase;
}

#Home .clients .clients-container .title-mid-text {
font-family: 'montserratlight';
font-size: 29px;
color: #ffffff;
text-align: center;
}

#Home .clients .clients-container .title-big-text {
font-family: 'montserratbold';
font-size: 35px;
color: #c8fe50;
text-align: center;
z-index: 2;
position: relative;
}

#Home .clients .clients-container .title-big-text:after {
content: "";
background: url("../images/design-element-white.png") no-repeat;
width: 50px;
height: 50px;
position: absolute;
display: inline-block;
z-index: -1;
    margin-left: -10px;
    margin-top: 3px;
    background-size: 60% auto;
}

#Home .clients .clients-container .squre-element-div {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
    margin: 40px 0 0 0;
}

#Home .clients-container .squre-element-div .span-div {
width: 20%;
display: flex;
align-items: center;
padding: 40px 0;
justify-content: center;
}

/* ***************************   clients section css close *************************** */

/* ***************************  artical section css  *************************** */

#Home .artical {
margin-bottom: 8%;
position: relative;
}

#Home .artical:after {
content: "";
position: absolute;
top: -100px;
right: 0px;
height: 26%;
width: 12%;
background-image: url("../images/fourth-bg-section-element-right.png");
background-size: auto 100%;
background-repeat: no-repeat;
background-position: top right;
}

#Home .artical .artical-bg {
padding: 90px 0 40px 0;
background: rgba(250, 250, 250, 1);
background: -moz-linear-gradient(left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(250, 250, 250, 1)), color-stop(40%, rgba(250, 250, 250, 1)), color-stop(40%, rgba(250, 250, 250, 0)), color-stop(41%, rgba(250, 250, 250, 0)), color-stop(100%, rgba(250, 250, 250, 0)));
background: -webkit-linear-gradient(left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
background: -o-linear-gradient(left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
background: -ms-linear-gradient(left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
background: linear-gradient(to right, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 40%, rgba(250, 250, 250, 0) 40%, rgba(250, 250, 250, 0) 41%, rgba(250, 250, 250, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#fafafa', GradientType=1);
}

#Home .artical .artical-container {
margin: 0 10%;
}

#Home .artical .artical-container .title-small-text {
    font-family: 'montserratsemibold';
    font-size: 14px;
    color: #9c9c9c;
    padding: 0 0 27px 0;
    text-transform: uppercase;
}

#Home .artical .artical-container .title-mid-text {
    font-family: 'montserratlight';
    font-size: 33px;
    color: #313131;
    margin: 0 0 8px 0;
    line-height: 32px;
}

#Home .artical .artical-container .title-big-text {
font-family: 'montserratbold';
    z-index: 2;
    position: relative;
    font-size: 45px;
    color: #1b2bae;
    line-height: 45px;
}

#Home .artical .artical-container .title-big-text:after {
content: "";
background: url("../images/design-element.png") no-repeat;
width: 50px;
height: 50px;
position: absolute;
display: inline-block;
z-index: -1;
    margin-left: -30px;
    margin-top: -22px;
    background-size: 100% auto;
}

/*----------------artical slider css start-----------------------*/
#Home #artical {
position: relative;
margin-top: 60px;
}

#Home #artical .owl-item {
overflow: hidden;
}

#Home #artical .owl-stage {
display: flex;
}

#Home #artical .owl-item {
margin-right: 30px !important;
}

#Home #artical .owl-item .item {
display: flex;
/*height: 65vh;*/
text-align: left;
}

#Home #artical .counter-div {
position: absolute;
width: 100%;
height: 50%;
overflow: hidden;
margin-top: 20px;
}

#Home #artical .icon-div {
width: 100%;
position: relative;
right: 0;
top: 0px
}

#Home #artical .icon-div img {
width: 100%;
}

#Home #artical .owl-item .item .heading {
position: relative;
bottom: 0;
padding: 20px 0 0 0;
}

#Home #artical .owl-item .item .heading h3 {
font-family: 'montserratregular';
font-size: 13px;
color: #a7a6a7;
margin: 0;
}

#Home #artical .owl-item .item .heading p {
font-family: 'montserratmedium';
font-size: 18px;
color: #323131;
line-height: 24px;
}

#Home #artical .owl-nav {
margin-top: 50px;
display: flex;
justify-content: flex-end;
padding-right: 10%;
}

#Home .owl-carousel .owl-nav button.owl-next span {
font-size: 0
}

#Home .owl-carousel .owl-nav button.owl-prev span {
font-size: 0
}

#Home .owl-carousel .owl-nav button.owl-next {
background-image: url(../images/arrow-right.png) !important;
background-repeat: no-repeat !important;
height: 50px;
width: 50px;
background-position: center center !important;
outline: none;
}

#Home .owl-carousel .owl-nav button.owl-prev {
background-image: url(../images/arrow-left.png) !important;
background-repeat: no-repeat !important;
height: 50px;
width: 50px;
background-position: center center !important;
outline: none;
}

/*----------------artical slider css close-----------------------*/

/* ***************************  artical section css close *************************** */

/* ***************************  Say Hello section css ***************************  */

#Home .say-hello {
margin-bottom: 0%;
background-color: #081375;
padding: 3% 0;
background-image: url("../images/squire-bg-section-element-left.png"), url("../images/squire-bg-section-element-right.png");
background-repeat: no-repeat;
background-position: top 25% left 5%, top 10% right 10%;
background-size: auto 18%, auto 18%;
}

#Home .say-hello .say-hello-container {
margin: 10% 10% 5% 10%;
}

#Home .say-hello .say-hello-container .title-small-text {
font-family: 'montserratsemibold';
font-size: 14px;
color: #c8fe50;
padding:0 0 30px 0;
text-align: center;
text-transform: uppercase;
}

#Home .say-hello .say-hello-container .title-big-text {
font-family: 'montserratbold';
font-size: 35px;
color: #fff;
text-align: center;
z-index: 2;
position: relative;
font-style: italic;
}

#Home .say-hello .say-hello-container .title-big-text2 {
font-family: 'montserratbold';
font-size: 35px;
color: #fff;
text-align: center;
z-index: 2;
position: relative;
font-style: italic;
}

#Home .say-hello .say-hello-container .title-big-text:after {
content: "";
background: url("../images/design-element.png") no-repeat;
width: 50px;
height: 50px;
position: absolute;
display: inline-block;
z-index: -1;
    margin-left: -18px;
    margin-top: -25px;
    background-size: 100% auto;
}

#Home .say-hello .say-hello-container .button-aninmation .text__source {
color: #c8fe50;
font-family: 'montserratbold';
font-size: 18px;
}

#Home .say-hello .say-hello-container .button-aninmation .text:after, .say-hello .say-hello-container .button-aninmation .text:before {
background-color: #c8fe50;
}

#Home .say-hello .say-hello-container .button-aninmation svg polygon {
fill: #c8fe50;
}

#Home .say-hello .say-hello-container .button-aninmation .text {
z-index: 2;
}

#Home .say-hello .say-hello-container .button-aninmation .circle-container {
z-index: 0;
}

/* ***************************   Say Hello section css close *************************** */

/* ***************************  footer section css close *************************** */
footer {
background-color: #f8f8f8;
}

.footer-container {
padding: 7% 10% 0 10%;
display: flex;
}

.footer-container .title-small-text {
font-family: 'montserratsemibold';
font-size: 14px;
color: #000000;
padding: 0 5% 3% 0;
text-transform: uppercase;
}

.footer-container .title-big-text {
font-family: 'montserratbold';
font-size: 18px;
color: #bdbaba;
z-index: 2;
position: relative;
padding: 0 5% 8% 0;
line-height: 30px;
}

.footer-container .title-big-text a {
color: #bdbaba;
text-decoration: none
}

.footer-container .title-big-text a:hover {
color: #081375;
}

.footer-container ul.social-icon-main {
list-style: none;
padding: 0 5% 0 0;
margin: 0;
display: flex;
}

.footer-container ul li.social-icon {
list-style: none;
padding: 20px;
background: #aeadae;
border-radius: 50px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff
}

.footer-container ul li.social-icon:last-child {
margin-right: 0px;
}

.footer-container ul li.social-icon:hover {
background: #081375;
}

.footer-container ul.social-icon-main a {
color: #fff;
margin-right: 25px;
text-decoration: none
}

.footer-container ul li.social-icon.browser-window__link {
width: 20px;
height: 20px;
}

footer hr {
margin: 7% 0 0% 0;
color: #e4e4e4
}

.footer-container2 {
padding: 2% 10% 2% 10%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.copyright {
font-family: 'montserratlight';
font-size: 11px;
color: #000000;
}

.footer-container ul.contact-footer-main {
list-style: none;
padding: 0 0 0 5%;
margin: 0;
display: flex;
flex-wrap: wrap;
}

.footer-container ul.contact-footer-main a {
color: #222121;
text-decoration: none;
display: flex;
align-items: center;
}

.footer-container ul li.contact-footer {
list-style: none;
display: flex;
align-items: center;/*
justify-content: center;
margin-right: 25px;*/
justify-content: space-between;
color: #222121;
font-size: 16px;
font-family: 'montserratlight';
padding: 0 0% 2% 0;
width: 50%;
}

.footer-container ul.contact-footer-main a:hover {
color: #081375;
}

.footer-container ul li.browser-window__link {
width: auto;
height: auto;
}

.footer-container2 ul.menu-footer-main {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}

.footer-container2 ul.menu-footer-main a {
color: #222121;
text-decoration: none;
display: flex;
align-items: center;
}

.footer-container2 ul li.menu-footer {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
color: #000000;
font-size: 10px;
font-family: 'montserratlight';
padding: 0 1% 1% 1%;
}

.footer-container2 ul.menu-footer-main a:hover {
color: #081375;
}

.footer-container2 ul li.menu-footer.browser-window__link {
width: auto;
height: auto;
}

.demo-4 .footer-container2 ul li.browser-window__link {
margin: 0
}

/* ***************************  footer section css close *************************** */

/*say hello form*/
#sayhello {
display: none;
position: fixed;
top: 0px;
width: 100%;
height: 100%;    /*display: flex;*/
background-color: #081475;
z-index: 99;
overflow: hidden;
animation-name: menuanimation;
-webkit-transition: all 2s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
max-width: 1920px;
}

#sayhello .w40 {
width: 40%
}

#sayhello .w40 .address {
padding: 3% 8% 10% 8%;
height: 100%;
width: 100%;
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-direction: column;
}

#sayhello .w40 .address .add-div {
padding: 0% 0% 8% 0%;
width: 100%
}

#sayhello .w40 .address .add-div2 {
width: 100%
}

#sayhello .w40 .address img {
position: absolute;
top: 0;
left: 0;
padding: 3% 8% 10% 10%;
}

#sayhello .w40 .address h2 {
font-family: 'montserratmedium';
color: #c8fe50;
font-size: 14px;
text-transform: uppercase;
}

#sayhello .w40 .address p {
font-family: 'montserratmedium';
color: #fff;
font-size: 18px;
}

#sayhello .w40 .address .add-div2 h2 a {
font-family: 'montserratmedium';
color: #c8fe50;
font-size: 14px;
text-transform: uppercase;
}

#sayhello .w40 .address .add-div2 p a {
font-family: 'montserratmedium';
color: #fff;
font-size: 18px;
text-decoration: underline;
}

#sayhello .w60 {
width: 60%;
background-color: #fff;
}

#sayhello .w60 .address {
padding: 10% 8% 10% 8%;
height: 100%;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

#sayhello .cont {
padding: 0;
width: 80%;
}

/* say hello form css*/

/*#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}*/

/* Style the input fields */
#sayhello input {
padding: 10px;
width: 100%;
font-size: 12px;
font-family: 'montserratmedium';
border-bottom: 1px solid #aaaaaa;
border-top: 0px;
border-left: 0px;
border-right: 0px;
outline: none;
}

/* Mark input boxes that gets an error on validation: */
#sayhello input.invalid {
background-color: #ffdddd;
}

/* Hide all steps by default: */
#sayhello .tab {
display: none;
font-family: 'montserratmedium';
color: #161617;
font-size: 13px;
text-transform: uppercase;
}

/* Make circles that indicate the steps of the form: */
#sayhello .step {
margin: 0 2px;
border: none;
display: inline-block;
opacity: 0.5;
}

/* Mark the active step: */
#sayhello .step.active {
opacity: 1;
}

/* Mark the steps that are finished and valid: */
#sayhello .step.finish {
color: #4CAF50;
}

#sayhello .col-100 {
width: 100%;
margin-top: 20px;
display: flex;
}

#sayhello .col-100 ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
width: 60%;
}

#sayhello .col-100 .w40 {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
width: 40%;
font-family: 'montserratmedium';
font-size: 10px;
color: #7e7e7f;
}

#sayhello .col-100 ul li:last-child {
font-family: 'montserratmedium';
font-size: 12px;
color: #7e7e7f;
display: flex;
flex-direction: column;
}

#sayhello .col-100 ul li:first-child img {
width: 100%;
opacity: .3;
}

#sayhello .col-100 ul li:last-child span {
font-family: 'montserratmedium';
font-size: 11px;
color: #9e9d9d;
}

#sayhello .col-100 ul li:first-child {
border-radius: 50%;
border: 1px solid #e7e7e7;
display: flex;
align-items: center;
margin-right: 30px;
padding: 20px;
}

#sayhello form .buttun-div {
overflow: auto;
float: left;
margin-top: 30px;
width: 100%;
display: flex
}

#sayhello form .buttun-div .but-inner {
position: relative;
width: 100%;
height: 50px;
padding: 0px;
}

#sayhello form .buttun-div .inner #prevBtn, #sayhello form .buttun-div .inner #nextBtn {
position: absolute;
top: 0;
}

#sayhello form .buttun-div .inner #prevBtn {
left: 0;
background-color: transparent;
border: 0;
outline: none
}

#sayhello form .buttun-div .inner #nextBtn {
right: 0;
background-color: transparent;
border: 0;
outline: none
}

#sayhello .thank-you {
text-align: center;
}

#sayhello .buttun-div .w50 {
width: 50%
}

#sayhello #regForm .isc-tab {
margin-bottom: 40px;
}

/*say hello next button*/
#sayhello .next-btn.w50 {
display: flex;
justify-content: center;
align-items: center;
}

#sayhello .next-btn .inner {
padding: 0px;  /*  display: inline-block;*/
width: 100%;
padding-top: 22px;
display: flex;
align-items: center;
justify-content: center;
}

#sayhello .next-btn .inner .button {
position: relative;
display: inline-block;
}

#sayhello .text {
position: relative;
display: inline-block;
font-size: 17px;
font-family: Geomanist, sans-serif;
font-weight: 500;
font-style: normal;
color: #2b1e31;
z-index: 2;
}

#sayhello .next-btn .inner:hover .button.is-hover .text:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#sayhello .next-btn .inner:hover .button.is-hover .text:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .1s;
transition-delay: .1s;
}

#sayhello .next-btn .arrow {
position: absolute;
top: calc(50% - 22px);
right: -35px;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .4s cubic-bezier(.54, .1, 0, .99);
transition: all .4s cubic-bezier(.54, .1, 0, .99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
z-index: 1;
}

#sayhello  .next-btn .inner:hover .button.is-hover .circle-container {
-webkit-transform: translate(145%, -34%);
transform: translate(145%, -34%);
-webkit-transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
}

#sayhello .next-btn .inner:hover .button.is-hover .arrow {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .25s;
transition-delay: .25s;
}

#sayhello .next-btn .text:after, #sayhello .next-btn .text:before {
content: "";
position: absolute;
top: calc(50% - 0px);
display: inline-block;
width: 16px;
height: 2px;
background-color: #2b1e31;
}

#sayhello .next-btn .text:before {
right: calc(100% + 6px);
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99);
transition: all .5s cubic-bezier(.54, .1, 0, .99);
}

#sayhello .next-btn .text:after {
left: calc(100% + 6px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#sayhello .next-btn .text__source {
position: relative;
display: inline-block;
font-size: 17px;
font-family: Geomanist, sans-serif;
font-weight: 500;
font-style: normal;
color: #2b1e31;
}

#sayhello .next-btn .inner .button .circle-container {
position: relative;
top: 50%;
left: -29px;
right: 0;
z-index: 0;
width: 88%;
height: 62px;
-webkit-transform: translateY(-28%);
transform: translateY(-28%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
-webkit-transition: all .7s cubic-bezier(.54, .1, 0, .99);
transition: all .7s cubic-bezier(.54, .1, 0, .99);
}

#sayhello .next-btn .inner .button .circle-container .circle {
display: inline-block;
width: 72px;
border-radius: 50%;
background-color: #e7e7e7 !important;
}

/*------------------------------*/

/*say hello Previous button*/

#sayhello .prev-btn.w50 {

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

#sayhello .prev-btn .inner {
padding: 0px;
display: inline-block;
width: 100%;
height: 100%;   /* display: flex;
 align-items: center;
 justify-content: center;*/
}

#sayhello .prev-btn .inner .button {
position: relative;
display: inline-block;
margin-left: 20%;
}

#sayhello .text {
position: relative;
display: inline-block;
font-size: 17px;
font-family: Geomanist, sans-serif;
font-weight: 500;
font-style: normal;
color: #2b1e31;
z-index: 2;
}

#sayhello .inner:hover .button.is-hover .text:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#sayhello .inner:hover .button.is-hover .text:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .1s;
transition-delay: .1s;
}

#sayhello .arrow {
position: absolute;
top: calc(50% - 5px);
right: -35px;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .4s cubic-bezier(.54, .1, 0, .99);
transition: all .4s cubic-bezier(.54, .1, 0, .99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
z-index: 1;
}

#sayhello .prev-btn .inner:hover .button.is-hover .circle-container {
-webkit-transform: translate(180%, -50%);
transform: translate(180%, -50%);
-webkit-transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
transition: all 1.1s cubic-bezier(.54, .1, 0, .99);
}

#sayhello .inner:hover .button.is-hover .arrow {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-delay: .25s;
transition-delay: .25s;
}

#sayhello .text:after, #sayhello .text:before {
content: "";
position: absolute;
top: calc(50% - 0px);
display: inline-block;
width: 16px;
height: 2px;
background-color: #2b1e31;
}

#sayhello .text:before {
right: calc(100% + 6px);
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99);
transition: all .5s cubic-bezier(.54, .1, 0, .99);
}

#sayhello .text:after {
left: calc(100% + 6px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
transition: all .5s cubic-bezier(.54, .1, 0, .99) 0s;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

#sayhello .text__source {
position: relative;
display: inline-block;
font-size: 17px;
font-family: Geomanist, sans-serif;
font-weight: 500;
font-style: normal;
color: #2b1e31;
}

#sayhello .prev-btn .inner .button .circle-container {
position: absolute;
top: 50%;
left: -50px;
right: 0;
z-index: -1;
width: 78%;
height: 60px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
-webkit-transition: all .7s cubic-bezier(.54, .1, 0, .99);
transition: all .7s cubic-bezier(.54, .1, 0, .99);
}

#sayhello .prev-btn .inner .button .circle-container .circle {
display: inline-block;
width: 72px;
border-radius: 50%;
background-color: #e7e7e7 !important;
}

/*------------------------------*/
#sayhello .close-div {
position: absolute;
top: 20px;
right: 20px;
z-index: 21
}

#sayhello .close-div button {
background-color: #e6e6e6;
border: 0px;
border-radius: 50%;
color: #bababb;
padding: 1px 11px;
font-size: 24px;
font-family: 'montserratmedium';
}

/***************/
@media(min-width:1920px) {
}

@media(max-width:1920px) {
}

@media (max-width:1600px) {
#Home .banner .text-div{ padding: 0 0 0 68px;}

}

@media (max-width:1440px) {

#Home .about-sect .about-text-div h2{ font-size: 45px; line-height: 50px;}
#Home .banner .text-div{ padding: 0 0 0 68px;}

}

@media (max-width:1200px) {

/*/////////////////////////Menu///////////////////*/
#only-menu ul.menu-align li, #only-menu ul.menu-align li a {font-size: 32px;}
#only-menu ul.menu-align li.active, #only-menu ul.menu-align li.active a {font-size: 40px;}
/*/////////////////////////////////////////////////////*/
#Home .about-sect .about-text-div h2{ font-size: 35px; line-height: 40px;}
#Home .banner .text-div{ padding: 0 0 0 68px;}

}

@media (max-width:992px) {

/*/////////////////////////Menu///////////////////*/
#only-menu {
flex-direction: row;
}

.w60 {
width: 70%;
}

.w40 {
width: 30%;
margin-top: 0%;
display: flex;
justify-content: center;
}

#only-menu .ordermenu {
order: 1
}

#only-menu .orderlogo {
order: 2
}

#only-menu ul.menu-align li, #only-menu ul.menu-align li a {
font-size: 20px;
}

#only-menu ul.menu-align li.active, #only-menu ul.menu-align li.active a {
font-size: 25px;
}

/*/////////////////////////////////////////////////////*/

/*/////////////////////////Home Page///////////////////*/    
#Home .about-sect .about-text-div h2 {
font-size: 30px;
line-height: 35px;
}

#Home .about-sect .about-text-div h4 {
font-size: 14px;
}

/*/////////////////////////////////////////////////////*/
}

@media (max-width:768px) {

/*/////////////////////////Home Page///////////////////*/
#Home .work .work-container .title-big-text {
font-size: 25px;
}

#Home .work .work-container .title-mid-text {
font-size: 19px;
}

#Home .work .work-container .title-big-text:after {
background-size: 100% auto;
width: 30px;
height: 30px;
margin-left: -30px;
margin-top: -20px;
}

#Home .services .services-container .title-big-text {
font-size: 25px;
}

#Home .services .services-container .title-mid-text {
font-size: 19px;
}

#Home .services .services-container .title-big-text:after {
background-size: 100% auto;
width: 30px;
height: 30px;
margin-left: -30px;
margin-top: -20px;
}

#Home .clients .clients-container .title-mid-text {
font-size: 20px;
}

#Home .clients .clients-container .title-big-text {
font-size: 25px;
}

#Home .artical .artical-container .title-big-text {
font-size: 25px;
}

#Home .artical .artical-container .title-mid-text {
font-size: 19px;
}

#Home .artical .artical-container .title-big-text:after {
background-size: 100% auto;
width: 30px;
height: 30px;
margin-left: -30px;
margin-top: -20px;
}

#Home .say-hello .say-hello-container .title-big-text, #Home .say-hello .say-hello-container .title-big-text2 {
font-size: 20px;
}

#Home .say-hello .say-hello-container .title-big-text:after {
background-size: 100% auto;
width: 30px;
height: 30px;
margin-left: -30px;
margin-top: -20px;
}

#Home .say-hello .say-hello-container .button-aninmation .text__source, .text__source, .work .button-aninmation .inner {
font-size: 14px;
}

.work .button-aninmation .inner {
padding: 20px;
}

#Home .work .span-div .text-div .text-head {
font-size: 15px;
}

#Home .work .span-div .text-div .text-sub {
font-size: 12px;
}

.footer-container {
flex-direction: column;
padding: 0% 10% 0 10%;
}

.footer-container .title-big-text {
padding: 0 0 4% 0;
}

.footer-container .w50 {
width: 100%;
padding: 2% 0;
}

.footer-container ul li.contact-footer {
font-size: 12px;
}

/*/////////////////////////////////////////////////////*/

/*///////////////say hallo///////////*/
 #sayhello {
flex-direction: column;
}

#sayhello .w40 {
width: 100%;
height: 30%;
margin: 0%;
}

#sayhello .w60 {
width: 100%;
height: 70%;
margin: 0%;
}

#sayhello .w40 .address {
padding: 0;
flex-direction: row;
align-items: center;
justify-content: center;
}

#sayhello .w40 .address .add-div {
padding: 0% 2% 0% 2%;
}

#sayhello .w40 .address img {
width: 14%;
position: relative;
padding: 0;
margin: 2%;
}

#sayhello .w40 .address p, #sayhello .w40 .address .add-div2 p a {
font-size: 12px;
word-break: break-all;
}

#sayhello .w40 .address h2 {
font-size: 11px;
}

#sayhello #regForm .isc-tab {
margin-bottom: 10px;
}

#sayhello input {
padding: 0px;
}

#sayhello form .buttun-div {
margin-top: 0px;
}

#sayhello .tab {
font-size: 11px;
}

#sayhello .step {
font-size: 11px;
}

#sayhello .next-btn .arrow {
top: calc(50% - 14px);
}

#sayhello .next-btn .inner .button .circle-container {
width: 64%;
height: 46px;
left: -12px;
}

#sayhello .next-btn .inner:hover .button.is-hover .circle-container {
transform: translate(144%, -24%);
-webkit-transform: translate(144%, -24%);
}

#sayhello .col-100 ul li:first-child img {
width: 85%;
}

#sayhello .col-100 ul li:first-child {
padding: 10px;
}

#sayhello .col-100 {
margin-top: 5px;
}

#sayhello .prev-btn .inner .button .circle-container {
width: 56%;
height: 43px;
left: -33px;
}

#sayhello .w60 .address {
padding: 5% 0;
}

/*///////////////////////////////*/
}

@media (max-width:576px) {

/*/////////////////////////Menu///////////////////*/
#only-menu {
flex-direction: column;
align-items: center;
}

.w60 {
width: 100%;
}

.w40 {
margin-top: 13%;
display: flex;
justify-content: center;
margin-bottom: 5%;
}

.w40 img {
width: 70%;
}

#only-menu .ordermenu {
order: 2
}

#only-menu .orderlogo {
order: 1
}

#only-menu ul.menu-align li, #only-menu ul.menu-align li a {
font-size: 15px;
}

#only-menu ul.menu-align li.active, #only-menu ul.menu-align li.active a {
font-size: 18px;
}

#only-menu ul {
margin: 0 5% 0 5%;
}

#only-menu ul.social-icon-main {
margin: 0 5% 0 5%;
flex-wrap: wrap;
justify-content: space-between;
}

#only-menu ul.social-icon-main a {
margin-right: 10px
}

.world-menu ul li {
font-size: 13px;
}

.world-menu ul li span, .world-menu ul li span.active a {
font-size: 11px;
}

.world-menu {
padding: 30% 5% 0 5%;
}

.world-menu ul li:first-child {
font-size: 16px;
}

.footer-container ul li.social-icon {
padding: 15px;
}

/*.logo{width: 35%; padding: 8% 10%;}*/

/*/////////////////////////////////////////////////////*/

/*/////////////////////////Home Page///////////////////*/

.banner h3 {
font-size: 20px;
line-height: 29px;
}

.banner h1 {
font-size: 40px;
color: #c8fe50;
letter-spacing: -2px;
margin: 0;
}

.banner .button-div {
width: 80%;
}

.banner .button-div button {
font-size: 12px
}

#Home .about-sect .about-text-div h2 {
font-size: 20px;
line-height: 25px;
width: 80%;
}

#Home .about-sect .about-text-div h4 {
font-size: 12px;
line-height: 20px;
width: 80%;
}

#Home .about-sect {
background-size: auto 13%, auto 30%, auto 15%;
background-position: top right, bottom left, 75% 79%;
}

#Home .work .work-container .squre-element-div {
flex-direction: column;
}

.squre-element-div .span-div {
width: 100%;
}

#Home .work {
background-size: auto 15%;
}

#Home .artical:after {
top: -45px;
width: 18%;
background-size: auto 50%;
}

#Home #our-serv .owl-item {
margin-left: 30px !important;
}

#Home .work .work-container .title-big-text, #Home .services .services-container .title-big-text, #Home .clients .clients-container .title-big-text {
font-size: 18px;
}

#Home .work .work-container .title-mid-text, #Home .services .services-container .title-mid-text, #Home .clients .clients-container .title-mid-text {
font-size: 15px;
}

#Home .work .work-container .title-small-text, #Home .services .services-container .title-small-text, #Home .clients .clients-container .title-small-text {
font-size: 12px;
}

#Home .services {
background-position: top left 54%;
background-size: auto 11%;
}

#Home #our-serv .owl-nav {
justify-content: center;
padding-right: 0%;
margin-bottom: 50px;
}

#Home #our-serv .owl-item .item {
height: 80vh;
}

#Home #our-serv .owl-item .item .heading h3 {
font-size: 3.5vw;
}

#Home .clients-container .squre-element-div .span-div {
width: 45%;
}

#Home .clients {
background-size: auto 12%, auto 12%;
}

#Home .clients .clients-container .title-big-text:after {
width: 25px;
height: 25px;
margin-left: -25px;
margin-top: -30px;
background-size: 100% auto;
}

#Home .clients .clients-container {
margin: 0;
}

#Home #artical .owl-item {
margin-left: 30px !important;
}

#Home #artical .owl-item .item {
height: 80vh;
}

#Home #artical .owl-nav {
justify-content: center;
padding-right: 0%;
margin-top: 0px;
margin-bottom: 30px;
}

#artical .artical-button-aninmation {
justify-content: center;
margin-left: 0px;
position: relative;
left: 0%;
}

#our-serv .service-button-aninmation {
justify-content: center;
margin-left: 0px;
position: relative;
left: 0;
}

.footer-container .title-small-text, .footer-container .title-big-text, .footer-container ul.contact-footer-main {
text-align: center;
font-size: 12px
}

.footer-container ul.contact-footer-main {
justify-content: center;
}

.footer-container ul li.contact-footer {
margin: 0px;
padding: 0px;
}

.footer-container ul.social-icon-main {
flex-wrap: wrap;
justify-content: center;
padding: 0 0 10% 0;
}

.footer-container2 {
flex-direction: column;
}

.footer-container2 .w50 {
width: 100%;
margin: 3% 0;
text-align: center;
}

.footer-container2 ul.menu-footer-main {
flex-direction: column;
}

.footer-container2 ul li.menu-footer-line {
display: none
}

.footer-container .title-big-text {
padding: 0 0 10% 0;
}

.footer-container ul.social-icon-main a {
margin-right: 6px;
}

.logo {
width: 30%;
}

.world-wide-menu.w50 {
width: 60%;
}

.w50.grid {
width: 35%;
}

/*/////////////////////////////////////////////////////*/
}