/* [ ================ MAIN - PREDEFINES ================== ] */
/* [ ================ MAIN - PREDEFINES ================== ] */
/* [ ================ MAIN - PREDEFINES ================== ] */

:root {
    --blue: #1d426d;
    --silver:#747474;
}


html {
    transition: opacity 0.2s;
    padding: 30px;
}

body, html 
{
	font-family: 'Nunito Sans', sans-serif;
	background: #fff;
	line-height: 1.35;
    font-size: 16px;
    margin:0;
    color: var(--dark);
    font-weight: 600;
}

body {
    margin:0 auto;
}


* {box-sizing: border-box;}



p, ul, li, a, h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
}

li {list-style: none}

.container {
	max-width: 1660px;
	padding:0 20px;
	width: 100%;
	margin: 0 auto;
}




a, button, input, textarea, select {font-family: 'Nunito Sans', sans-serif;}

a, button {
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s;
    outline: none!important;
}

ul {margin-bottom: 0;}
li {list-style: none}

img {
	max-width: 100%;
	display: block;
}


img[data-lazy] {opacity:0; transition:0.8s; }
img[data-lazy].fade {opacity:1; }


p a {
    color: var(--red);
    font-weight: bold;
    transition: 0.2s;
    text-decoration: underline;
}


img[src=""] {
  display:none;
  opacity: 0;
  visibility: hidden;
}

p a:hover {
    opacity: 0.6;
}


/*scrollbar*/

::-webkit-scrollbar-track
{
    border-radius: 0px;
    background-color:#1c1c4629;
}

::-webkit-scrollbar
{
    width: 8px;
    background-color: #1c1c4629;
}

::-webkit-scrollbar-thumb
{
    border-radius: 0px;
    background-color: var(--blue);
}




.textShadow {filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));}

/*font defines*/






.fs18 {font-size: 18px}
.fw500 {font-weight: 500}


h1 {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.14;
}

h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
}


h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
}


h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.33;
}


h5 {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.33;
}


h6 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
}



.silver {
    color: var(--silver);
}



/* center div */

.middle{
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: flex!important;
    -webkit-flex-direction: column!important;
    flex-direction: column!important;
    -webkit-justify-content: center!important;
    justify-content: center!important;
}


/* text elipsis */

.limitRows1, .limitRows2, .limitRows3, .limitRows4, .limitRows5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.limitRows1 { -webkit-line-clamp: 1; }
.limitRows2 { -webkit-line-clamp: 2; }
.limitRows3 { -webkit-line-clamp: 3; }
.limitRows4 { -webkit-line-clamp: 4; }
.limitRows5 { -webkit-line-clamp: 5; }




.hasImageBG {
    position: relative;
}

.hasImageBG .container {
    position: relative;
    z-index: 100;
}

.hasImageBG .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hasImageBG .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}   





/* HAMBURGER */

.menu-wrapper {
    position: absolute;
    top: 28px;
    right: 30px;
    margin: auto;
    width: 26px;
    height: 50px;
    cursor: pointer;
    z-index: 100500;
    display: none;
}

.menu-wrapper.fixed {
    position: fixed;
    top: 58px;
    right: 60px;
    z-index: 1000000000;
}

.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
    width: 26px;
    height: 2px;
}

.hamburger-menu {
    position: relative;
    transform: translateY(25px);
    background: #fff;
    transition: all 0ms 300ms;
    width: 26px;
}

.hamburger-menu.animate {
    background: rgba(255, 255, 255, 0)!important;
}

.hamburger-menu:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    background: #fff;
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu:after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    background: #fff;
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:after {
    top: 0;
    transform: rotate(45deg);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:before {
    bottom: 0;
    transform: rotate(-45deg);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}





.menu-wrapper.fixed .hamburger-menu:after {background: black;}
.menu-wrapper.fixed .hamburger-menu:before {background: black;}

/* CURSOR */



/* [ ================ HEADER ================== ] */
/* [ ================ HEADER ================== ] */



.header {
    padding: 30px 44px;
    position: relative;
    z-index: 10000;
}



.header-flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}


.header-flex .logo img {
    height: 50px;
}

.logomobile {display: none;}


#menu-header-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


#menu-header-menu a {
    color: white;
    position: relative;
    font-size: 20px;
    text-transform: uppercase;
    margin-left: 80px;
    display: block;
    letter-spacing: 2.72px;
    transition: 0.2s;
}



#menu-header-menu a::before {
    width: 1px;
    height: 30px;
    background: white;
    position: absolute;
    top: -53px;
    left: 0;
    right: 0;
    margin:0 auto;
    content: '';
    transition: 0.2s;
    height: 0;
    opacity: 0.6;
}


#menu-header-menu a:hover::before {
    height: 36px;
}

#menu-header-menu a:hover {opacity: 0.6}






/* INTRO */

.intro {
    margin-top: -110px;
    height: calc(100vh - 60px);
    position: relative; 
}

.intro.intro-content {
    height: 100%;
    padding: 368px 0 260px 0;
    text-transform: uppercase;
}


.intro .container {
    display: flex;
    align-items: center;
    height: 100%;
    text-align: center;
}

.intro h1 {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 8px;
    color: white;
}

.intro .center-content {
    width: 100%;
}


.intro .scroll-anima {
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    margin:0 auto;
    width: 53px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid white;
    border-radius: 35px;
    z-index: 100;
    cursor: pointer;
}


.intro .scroll-anima img {
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}








/* FLEX CONTENT */


.flex-content-img-right {
    display: flex;
    justify-content: space-between;

}

.flex-content-img-right .image {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.flex-content-img-right .image img {object-fit: contain;}

.flex-content-img-right > div {
    width: 50%;
}


.flex-content-img-right .content {
    padding-right: 50px;
    max-width: 670px;
}



.flex-content {
    padding: 144px 0 94px 0;
}


.flex-content-img-right .content h2 {
    color: var(--blue);
    font-size: 30px;
    letter-spacing: 6px;
    margin-bottom: 44px;
}

.flex-content-img-right .content p {
    color: var(--silver);
    font-size: 17px;
    letter-spacing: 0.17px;
    margin-bottom: 15px;
}




/* LEADERS */

.leaders {
    padding-top: 50px;
}


.leaders-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 31px;
}


.leader-person {
    position: relative;
    padding-bottom: 90%;
}

.leader-person img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
}

.leader-person p {
    width: 100%;
    padding:30px;
    bottom: 0;
    color: white;
    left: 0;
    position: absolute;
    z-index: 100;
    font-size: 25px;
    line-height: 30px;
    line-height: 1.1;

}

.leader-person p span {
    display: block;
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 2.7px;
    margin-top: 8px;
}


.leader-person::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.50) 53%, rgba(0,0,0,1) 100%);
}


.leaders-text {
    background-color: #1d426d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 80px 20px;
}

.leaders-text p {
    max-width: 635px;
    line-height: 1.1;
    margin:0 auto;
    font-size: 20px;
    letter-spacing: 4px;
    margin-top: 42px;
}



/* PORTFOLIOS */


.portfolios {
    background: #efefef;
    padding: 140px 0;
    margin-top: 140px;
}

.portfolios .container > h2, .news .container > h2, .leaders .container > h2 {
    color: var(--blue);
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 6px;
    margin-bottom: 45px;
}




.portfolio-item {
    position: relative;
    padding: 140px 160px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    justify-content: center;
}


.portfolio-item .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.portfolio-item .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.portfolio-item .p_content, .portfolio-item .logo{
    position: relative;
    z-index: 10;
    width: 50%;
}




.portfolio-item .p_content {
    max-width: 620px;
    color: white;
}

.portfolio-item .p_content h2 {
    margin-bottom: 44px;
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 5px;
}

.portfolio-item .p_content p {
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 0.17px;
}


.portfolio-item  .leranmore {
    margin-top: 59px;
}

.portfolio-item  .leranmore a {
    color: white;
    border: 1px solid white;
    font-size: 17px;
    padding: 10px 15px;
    text-transform: uppercase;
    letter-spacing: 2.72px;
    display: inline-block;
}

.portfolio-item  .leranmore a:hover {
    background: white;
    color: var(--blue);
}


.portfolio-item.logo-right .logo{
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}


.portfolio-item.logo-left .logo {
    order:-1;
}



.contact-us {
    background: #1d426d;
    color: white;
    text-align: center;
    padding: 140px 20px;
}

.contact-us p {
    font-size: 25px;
    line-height: 40px;
}

.contact-us p a {
    text-decoration: underline;
    font-weight: 600;

}



/* NEWS */
.news {
    padding: 140px 0;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px
}


.news-item .thumbnail {
    position: relative;
    padding-bottom: 75%;
    margin-bottom: 30px;
}

.news-item .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item h3 {
    color: var(--blue);
    font-size: 20px;
    line-height: 23px;
    margin-bottom: 30px;
}

.news-item p {
    color:#898989;
    font-size: 17px;
    line-height: 23px;
}






/* FOOTER */

.footertop  {
    padding: 140px 0;
    color: white;
}

.footer-info-flex {
    display: flex;

    justify-content: space-between;
}

.footer-info-flex > div {
    width: 50%;
     padding: 7px 0;
}




.footer-info-flex .left {
    display: flex;
    justify-content: space-between;
    padding-right: 140px;
    border-right: 3px solid white;
}

.footer-info-flex .left > p {
    font-size: 20px;
    line-height: 24px;
    max-width: 285px;
    letter-spacing: 3.2px;
}

.footer-info-flex .left address p{
    text-align: right;
    font-size: 18px
}

.footer-info-flex .left address p a{
    text-decoration: none;
    font-weight: 400;
    font-style: normal;
}


.footer-info-flex .right {
    display: flex;
    justify-content: space-between;
}


.footer-info-flex .right h4 {
    font-size: 20px;
    letter-spacing: 3.2px;
}

.footer-info-flex .right  {
    padding-left: 140px;
}

.footer-info-flex .right .info a {
    color: white;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    position: relative;
    line-height: 1;
    font-size: 17px;
}

.footer-info-flex .right .info a:hover {opacity: 0.6}

.footer-info-flex .right .info strong {
    font-weight: 800;
    /*position: absolute;
    left: -14px;*/
    filter: drop-shadow(1px 0px 0px white);
	text-decoration: none !important;
	margin-right: 4px;
}

.footer-info-flex .right .phones {
    display: flex;
    align-items: center;
	font-size: 17px;
}

.footer-info-flex .right .phones div:first-child {
    margin-right: 29px;
    padding-right: 20px;
    border-right: 3px solid white;
}
.footer-info-flex .right .email {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px; 
}




.copyright {
    background: var(--blue);
    color: white;
    display: flex;
    align-items: center;
    padding: 12px 0;
    justify-content: center;
}

.copyright .container {
    display: flex;
    align-items: center;
    justify-content: center;

}

.copyright .container p {
    font-size: 16px;
    letter-spacing: 2px;
}

.copyright .container p:first-child {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid white;
}

.copyright .container p a {
    font-weight: 400;
    text-decoration: underline;
}




.default-content {
    max-width: 940px;
    margin:0 auto;
    padding: 140px 0;
}

.default-content p, .default-content li {
    color: var(--silver);
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 0.17px;
}

.default-content  h2 {
    
    font-size: 25px;
    line-height: 23px;
    letter-spacing: 0.25px;
    margin-bottom: 30px;
    color: var(--blue); 
    margin-top: 50px;   

}

.default-content p a {
    color: var(--blue);

}


.default-content ul {
    margin:30px 0;
    padding-left: 30px;
}

.default-content ul li {
    margin-bottom: 10px;
    position: relative;
    display: flex;
}

.default-content ul li::before {
    width: 15px;
    height: 1px;
    background: var(--silver);
    content: '';
    margin-right: 10px;
    position: relative;
    top: 10px;
}

.default-content ul li:last-child {margin-bottom: 0;}