@import url('_common-cta-section.css');

.home-banner-section{z-index: 1;}
.home-banner-main{right: 0; bottom: -23px; max-width: 390px; text-align: right; position: absolute;}
.home-banner-main.no-button{padding-bottom: 29px; bottom: 0;}
.home-banner-text h1{max-width: 325px; margin-left: auto; margin-bottom: 32px; font-size: 2.5rem; line-height: normal;}
.home-banner-text .button{margin-top: 26px;}

.landing-sample-main{padding: 105px 0 40px;}
.bg-title{animation: inherit;transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; left: -8px; font-size: 152px; line-height: 140px; letter-spacing: -0.76px; color: #000000; font-weight: 900; font-family: 'Urbanist', sans-serif; text-transform: uppercase; -webkit-text-stroke: 1px rgb(45 204 211 / 5%);}
.landing-sample-list:hover .bg-title {text-shadow: 0 0 32px rgba(45, 204, 211, 0.4)}

.title-main .icon{right: -33px; bottom: -45px; font-size: 80px; color: #ed1556; display: block; position: absolute;}
.title-main .icon .font-icon{width: 80px;}
.title-main .icon .font-icon img{width: 100%; height: 100%; font-family: "object-fit: cover;"; object-fit: cover; -o-object-fit: cover; object-position: 50% 50%; -o-object-position: 50% 50%; }

.landing-projects-wrap{padding: 40px 0 16px;}
.landing-projects-title{margin-bottom: 47px;}
.landing-projects-lists{margin: 0 0 24px;}
.landing-projects-list{overflow: hidden;}
.landing-projects-image{height: 100%; width: 100%; min-height: 400px; display: block;}
.landing-projects-image img{min-height: 400px;}

.landing-projects-text{width: 100%; height: 100%; top: 0; left: 0; z-index: 1; position: absolute;}
.landing-projects-text::after{background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 1%, #000); width: 100%; height: 100%; bottom: 0; left: 0; position: absolute; transition: all 0.5s ease; content: ""; z-index: -1;}
.landing-projects-list:hover .landing-projects-text::after{opacity: 0;}
.landing-projects-pos{width: 100%; height: 100%; padding: 20px 20px 24px; bottom: calc(90px - 100%); left: 0; right: 0; flex-direction: column; position: absolute; transition: all 0.5s ease;}
.landing-projects-pos::after{width: 100%; height: 100%; top: 0; left: 0; background-color: #000; content: ""; display: block; position: absolute; z-index: -1; opacity: 0;}
.landing-projects-list:hover .landing-projects-pos{bottom: 0;}
.landing-projects-list:hover .landing-projects-pos::after{opacity: 0.8;}
.projects-name span{color: #FFFFFF; margin-bottom: 2px; font-size: 1.125rem; line-height: 1.375rem; font-weight: 900; font-family: 'Urbanist', sans-serif; text-transform: uppercase; display: block;}
.projects-name span a{color: #FFFFFF;}
.projects-name span a:hover{color: #ed1556;}
.market-type{font-size: 0.938rem; line-height: 1.375rem; font-weight: 500; color: #ed1556; font-family: 'Urbanist', sans-serif;}
.projects-type-heading{margin-top: auto;}
.projects-type-heading h3{margin: 0;}

.who-work-section{background-color: #000000; padding-bottom: 30px;}
.who-work-main{padding: 70px 0 70px;}
.who-work-title{margin-bottom: 63px;}
.who-work-title .optional-text{letter-spacing: 1px;}
.who-work-image{margin: 0 32px;}
.who-work-slider .slick-track{align-items: center; display: flex;}

/*-- media css starts here --*/
@media only screen and (min-width: 1600px){
    .home-banner-section{height: 800px;}
}
@media only screen and (min-width: 1024px){
    .landing-sample-title{max-width: 780px; margin-bottom: 75px;}
    .landing-sample-title h2{margin: 0; font-size: 3rem; line-height: normal;}
    .title-main{margin-bottom: -5px;}
    .title-main h2{bottom: 37px; left: 1px; margin: 0; letter-spacing: -0.2px; position: absolute;}
    .landing-sample-list:nth-child(even) .title-main h2{right: 1px; left: auto;}
    .landing-sample-list:nth-child(2) .bg-title{left: -27px;}
    .landing-sample-list:nth-child(2) .title-main .icon{left: 0; right: auto;}
    .landing-sample-list:nth-child(n+3) .title-main .icon{top: -61px; right: -26px; bottom: auto;}
    .landing-sample-list:nth-child(4) .bg-title{right: 62px; left: auto;}
    .landing-sample-list:nth-child(4) .title-main .icon{left: -18px; right: auto;}
    .explore-btn{margin-top: 70px; margin-left: 4px; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; display: block;}
    .explore-btn span{position: relative;}
    .explore-btn span::before, .explore-btn span::after{top: 50%; left: 50%; width: 1px; height: 211px; background-color: #2dccd3; content: ""; display: block; position: absolute; z-index: -1;}
    .explore-btn span::before{transform: translate(-50%, -50%) rotate(45deg);}
    .explore-btn span::after{transform: translate(-50%, -50%) rotate(-45deg);}

    .landing-sample-list{width: calc(50% - 118px); margin: 0 118px;}
    .landing-sample-list:nth-child(odd){margin-left: 0;}
    .landing-sample-list:nth-child(even){margin-right: 0; text-align: right;}
    .landing-sample-desc{max-width: 500px; padding-right: 100px;}
    .landing-sample-list:nth-child(even) .landing-sample-desc{padding-left: 100px; padding-right: 0;}
    .landing-sample-list:nth-child(even) .landing-sample-desc{margin-left: auto;}
    .landing-sample-list:nth-child(n+3){margin-top: 224px;}

    .landing-projects-title{padding-right: 210px;}
    .landing-projects-btn{max-width: 210px; top: 0; right: 0; position: absolute;}
    .landing-projects-list{width: calc(32.77777% - 20px); margin: 0 20px 40px;}
    .landing-projects-list:nth-child(3n+1){margin-left: 0;}
    .landing-projects-list:nth-child(3n+3){margin-right: 0;}
    .flex.who-work-logos{flex-wrap: nowrap;}

    body.site-id-3 .bg-title{font-size: 120px; line-height: 120px;}
}
@media only screen and (max-width: 1299px) and (min-width: 1024px){
    .home-banner-main{right: 30px;}
    .bg-title{font-size: 112px; line-height: 112px;}
    .title-main .icon{bottom: -15px; font-size: 64px;}
    .title-main h2{bottom: 17px;}
    .landing-sample-list:nth-child(n+3) .title-main .icon{top: -45px;}
    .landing-projects-list{width: calc(32.7777% - 15px); margin: 0 15px 40px;}
    .who-work-image{margin: 0 15px;}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .home-banner-section{height: 496px;}
    .home-banner-main{right: 20px;}
    .home-banner-text h1{max-width: 100%;}

    .landing-sample-title{max-width: 740px; margin-bottom: 75px;}
    .title-main{margin-bottom: 20px; display: inline-block;}
    .title-main h2{margin: 0; bottom: 0; left: 0; position: absolute;}
    .title-main .icon{bottom: 17px; right: 0;}
    .bg-title{font-size: 110px; line-height: 120px;}
    .landing-sample-lists{display: block;}
    .landing-sample-list{margin-bottom: 48px;}

    .landing-projects-wrap{padding: 40px 0 80px;}
    .landing-projects-list{width: calc(50% - 12px); margin: 0 12px 24px;}
    .landing-projects-list:nth-child(odd){margin-left: 0;}
    .landing-projects-list:nth-child(even){margin-right: 0;}
    .landing-projects-btn{text-align: center;}

    .who-work-main{padding: 86px 0 6px;}
    .who-work-logo{width: 33.3333%;}
    .who-work-image{margin-bottom: 34px;}
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .home-banner-main{right: 24px;}
    .home-banner-text h1{margin-bottom: 16px; font-size: 2rem; line-height: normal;}
    .home-banner-text .button{margin-top: 8px;}
    .landing-sample-title{margin-bottom: 55px;}
    .title-main{margin-bottom: 12px;}
    .bg-title{left: -7px; font-size: 68px; line-height: 68px; letter-spacing: -0.34px;}
    .title-main h2{margin: 0; left: -2px; bottom: -4px; position: absolute;}
    .title-main .icon{bottom: 0; right: 0; font-size: 64px; line-height: 64px;}
    .landing-sample-main{padding: 87px 0 40px;}
    .landing-sample-lists{display: block;}
    .landing-sample-list{margin-bottom: 47px;}
    .explore-btn{display: block;}
    .explore-btn .button{width: 100%;}

    .landing-projects-wrap{padding: 24px 0 64px;}
    .landing-projects-title{margin-bottom: 40px;}
    .landing-projects-lists{margin-bottom: 40px; display: block;}
    .landing-projects-list{margin-bottom: 24px;}
    .landing-projects-image{ min-height: 327px;}
    .landing-projects-image img{min-height: 327px;}
    .landing-projects-btn{text-align: center;}
    .landing-projects-btn .button{width: 100%;}

    .partner-logo-btn .button {width: 100%;}
    
    .who-work-main{padding: 64px 0 23px;}
    .who-work-title{margin-bottom: 40px;}
    .who-work-logo{width: calc(50% - 20px); margin: 0 20px 40px;}
    .who-work-logo:nth-child(odd){margin-left: 0;}
    .who-work-logo:nth-child(even){margin-right: 0;}
    .who-work-image{max-width: 115px; margin: 0 auto;}

}