/* You can add global styles to this file, and also import other style files */
html,
body {
height: 100%;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
box-sizing: border-box;
position: relative;
}

html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body {
    font-family: "Roboto", sans-serif;
font-weight: normal;
color: #fff;
background: #1B1C21;
}

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

h1,
h2,
h3,
h4,
h5,
h6,figure {
margin: 0; font-weight: 700;
}
p{font-size: 18px; line-height:26px;color:#A9ACB8; margin: 0;}
a:hover{ text-decoration: none ;}

a,a:hover,a::after, a:hover::after{
-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;
}

/*---- Header ----*/ 
header {padding: 25px 0 0;border-bottom: 1px solid #6A6A6A; background:#1B1C21;
    -webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;
}
.container {max-width:1600px; margin:0 auto; padding:0;}
header .navbar-collapse { flex-grow: inherit;
}
header .nav-link {color:#A9ACB8; text-transform: uppercase; font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 3px; display: inline;
    -webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;
}
header .navbar-nav li {padding-right:60px; position: relative;
    -webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;
}
header .navbar-nav li:nth-last-child(1) { padding-right: 0;}
header .nav-link:focus, header .nav-link:hover { color:#5ABEAA;}

/* header .navbar-nav li.home span { background:#5abeaa8c; position: absolute; top: 0; left: 0; width: 38px; height: 30px;} */
header .navbar-nav li.active a {color: #5ABEAA;}


.banner {align-items:flex-start; padding-top: 100px; display: flex; flex-wrap: wrap;}
.banner h1{ font-size:105px; line-height:105px;font-family: "Playfair Display", serif; margin-bottom:40px; display: inline-block;}
.banner-lft {padding:20px 0 0;}
.banner-rgt figure img {width: 100%; height: auto;}

.banner-btm{
    background: #141519;
    padding:50px 30px 60px 60px;
    margin-top: -140px; margin-bottom: 100px; border-radius: 10px;
}
.banner-btm h2{
    font-family: "Playfair Display", serif; font-size:42px; line-height:50px; margin-bottom: 40px;
    color: #CED3E0;
}
.banner-btm h6{font-size:18px; line-height:25px; margin-bottom: 20px;}
.banner-btm ul li {position: relative;}
.banner-btm ul li:nth-last-child(1)::after { border-right: none;}
.banner-btm ul li h6 {margin-bottom: 20px;}
.banner-in { justify-content: space-between; align-items: center;display: flex; flex-wrap: wrap;}
.right-block h5{ font-family: "Itim", cursive; font-size: 23px; line-height: 30px; font-weight: 400;}
.right-block { padding:100px 0 0;}
.banner-btm ul li::after {border-right: 1px solid #464646; position:absolute; top: 0; right: 0; content:''; height: 100%;}
.banner-btm ul li.design-space{ padding-left:30px;}
.banner-btm ul { display: flex; align-items:flex-start; flex-wrap: wrap;}

footer{
    background: #141519;
    padding: 30px 0; border-top: #27282E 1px solid;
}
.footer-in { display:flex; align-items: center; justify-content: space-between;}
.footer-in ul { display:flex; align-items: center;}
.footer-in ul li a{ cursor: pointer;}
.footer-in ul li a .fa{color:#A9ACB8; font-size: 26px; line-height: 26px;}
.footer-in ul li a .fa:hover {color: #5ABEAA;}
.footer-in ul li{padding-left: 30px;}

.case-study-cont { background: #141519; padding: 120px 0 100px;}
.case-study-cont h2 {color:#CED3E0; font-size: 42px; line-height: 42px; margin-bottom: 50px; font-family: "Playfair Display", serif;}
.study-block {
    background:url('../images/case-study-bg1.png') no-repeat top center;
    background-size: cover; height: 444px;
    border-radius: 10px; position: relative;
    display: flex;align-items: center;justify-content: space-between;
    z-index: 99;
    padding: 0 70px;
    margin-bottom: 40px; flex-wrap: wrap;
    border: 2px solid #6A6A6A;
}
.study-block::after{content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: #000000E5;
        border-radius: 10px;
        z-index: -9;
}
.study-block-lft figure img { border-radius: 10px;}
.study-block-rgt h3{
    color: #5ABEAA;
    font-size:50px; line-height: 50px; margin-bottom: 15px; letter-spacing: 2px;

}
.study-block-rgt h5{
    font-size:30px; line-height:35px; margin-bottom: 15px;
}
.study-block-rgt p { margin-bottom:40px;}
.study-block-rgt a {padding: 18px 40px; border-radius:50px; color:#5ABEAA; text-align: center; cursor: pointer; border:2px solid #5ABEAA;
font-size: 16px; font-weight: 600; letter-spacing: 5px; display: inline-block; text-transform: uppercase;}


.study-block.study-block-second {
    background:url('../images/case-study-bg2.png') no-repeat top center;
}
.study-block.study-block-saas {
    background:url('../images/SaaS_Bg.png') no-repeat top center;
}
.study-block.study-block-third {
    background:url('../images/case-study-bg3.png') no-repeat top center;
}
.study-block.study-block-four {
    background:url('../images/case-study-bg4.png') no-repeat top center; margin-bottom: 0;
}

.case-study-banner { display: flex; align-items:; justify-content: space-between; padding: 100px 0 120px; flex-wrap: wrap;}
.case-study-banner h1{
    font-family: "Playfair Display", serif; font-size:105px; line-height:130px;
    color: #CED3E0;
}

.case-study-banner.caste-view {padding:70px 0 100px;}
.case-study-banner-lft h1 { font-family: "Playfair Display", serif; font-size:82px; line-height:100px;
    color: #CED3E0;}
.case-study-banner-lft ul li { margin-bottom: 24px;}
.case-study-banner-lft ul li p{ position: relative;text-indent: 15px;}
.case-study-banner-lft ul li p::after { content: ''; position: absolute; top: 12px; left: 0; width: 5px; height: 5px; border-radius: 30px; background:#CED3E0;}

.case-study-view { display: flex; align-items:; justify-content:space-between; padding-bottom: 100px; flex-wrap: wrap;}
.case-study-view-rgt h3{
    font-size: 38px; line-height:50px; margin-bottom: 24px;
}
.case-study-view-rgt ul li { margin-bottom: 24px;}
.case-study-view-rgt ul li p{ position: relative; padding-left:35px;}
.case-study-view-rgt ul li p::after { content: ''; position: absolute; top: 10px; left: 0;
background:url('../images/check.png') no-repeat top center; height: 14px; width: 18px;
}
.case-study-view-rgt {padding-left: 70px;}
.case-study-view.project .case-study-view-rgt {padding:0 70px 0 0 ;}
.case-study-view.project .case-study-view-lft { text-align: right;}

.case-study-cont.reserch-block{background: #1B1C21; padding: 70px 0 0;}
.case-study-view-rgt  h5 {
    font-size: 18px; line-height:20px; margin-bottom:5px; font-weight: normal;
}

.case-study-cont.reserch-block .case-study-view-rgt ul li p::after { display: none;}
.case-study-cont.reserch-block .case-study-view-rgt ul li p {padding: 0; display: flex; align-items: center;}
.case-study-cont.reserch-block .case-study-view-rgt ul li {margin: 0;}
.case-study-cont.reserch-block .case-study-view-rgt ul { margin-bottom: 40px;}
.case-study-cont.reserch-block .case-study-view-rgt ul li p span { padding-right: 10px; display: inline-block; padding-top: 2px;}

.case-study-links { padding-bottom: 20px;}
.case-study-links ul { display: flex; align-items: center;}
.case-study-links ul li a {position: relative; padding-left: 16px;color: 
    #A9ACB8;}
.case-study-links ul li { padding-right: 50px;}
.case-study-links ul li:nth-last-child(1) { padding-right: 0;}
.case-study-links ul li a::after { content: ''; position: absolute; top:5px; left: 0; width: 7px; height: 7px; border-radius: 30px; background:#0D99FF;
cursor: pointer;}
.case-study-cont.reserch-block .case-study-view, .case-study-cont.journey-block .case-study-view {padding-bottom: 50px;}

.case-study-cont.journey-block {padding: 70px 0 0;}
.case-study-view-rgt h6{ margin-bottom: 30px;}
.case-study-cont.journey-block .case-study-view-rgt small {color: #A9ACB8; font-size: 18px; line-height: 30px; margin-bottom: 40px; display: block;}
.case-study-cont.journey-block .case-study-view-rgt ul li p::after { display: none;}
.case-study-cont.journey-block .case-study-view-rgt ul li p {padding: 0;}
.case-study-cont.journey-block .case-study-view-rgt ul li { margin-bottom:0;}

.case-study-cont.reserch-block.research-map .case-study-view-rgt {padding-left:0;}

.mood-word { display: flex;align-items: center;background:#141519; padding: 80px 0; text-align: center;}
.mood-word h2{
    font-size: 38px; line-height:50px; margin-bottom: 34px;
}

.case-study-cont.reserch-block.design-updates .case-study-view{ align-items: flex-start;}
.case-study-cont.reserch-block.design-updates h3 { font-size: 38px; line-height: 40px; margin-bottom:40px;}
.case-study-cont.reserch-block.design-updates h4{ font-size: 30px; margin-bottom: 40px;}
.case-study-cont.reserch-block.design-updates .case-study-banner-lft { margin-top: 70px;}
.case-study-cont.reserch-block.design-updates .case-study-banner-lft ul li p { text-indent: 0; position: relative; padding-left: 15px;}
.case-study-cont.reserch-block.design-updates .case-study-banner-lft ul li { margin-bottom: 10px;}
.case-study-cont.reserch-block.design-updates .case-study-banner-lft ul li p::before { content: ''; position: absolute; top: 12px; left: 0; width: 5px; height: 5px; border-radius: 30px; background:#CED3E0;}
.bottom-space{ margin-bottom: 30px;}
.case-study-cont.journey-block .case-study-view-rgt ul li p span { display:inline-block; margin-right: 5px;}
.develop-figma { width: 100%; height: auto;}
.business-space { margin-bottom: 70px;}
.study-block:hover{
    border: 2px solid #5ABEAA;
}
header .navbar-nav li.resume a.nav-link{
     border: 2px solid #5ABEAA; padding: 13px 35px; border-radius:30px; color:#5ABEAA;
}
header .navbar-nav li.resume {padding-right: 15px;}
header .navbar-nav li.email a.nav-link{
    color: #141519;
    background: #5ABEAA;
    padding: 15px 35px; border-radius:30px;
}

header .navbar-nav li.resume a.nav-link span {position: relative; top:-2px; display: inline-block;}
header.sticky {position:fixed; top: 0; left: 0; width: 100%; z-index: 9999;
    -webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;
    background:#141519;

}
/* header.sticky .navbar-nav li { padding-right:30px;
    -webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;
}
header.sticky .navbar-brand {width: 130px;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;}
header.sticky .navbar-brand img { width: 100%; height: auto;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;}
header.sticky .navbar-nav li.resume a.nav-link, header.sticky .navbar-nav li.email  a.nav-link {padding: 13px 30px;
    -webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;
}
header.sticky .nav-link { font-size: 15px;
    -webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; text-decoration: none;
}
header.sticky .navbar-nav li:nth-last-child(1) { padding-right: 0;} */
.container-fluid {padding: 0;}
header .navbar-nav li.resume a.nav-link:hover {
    background: #5ABEAA; color:#fff;
}
header .navbar-nav li.resume a.nav-link:hover span img { filter:brightness(3);}
header .navbar-nav li.email a.nav-link:hover {
    background: #499b8a; color:#fff;
}

.study-block-rgt a:hover {
    background: #499b8a; color:#fff;
}
.about { display: flex; align-items:center;padding: 50px 0;}
.about h3{ font-size:40px; line-height:70px;font-family: "Playfair Display", serif;color: 
    #CED3E0;}
.about-cont {
    background: #141519;
padding: 100px 0;
}
.about-cont h2{ font-size:42px; line-height:55px;font-family: "Playfair Display", serif;color: #CED3E0;;}
.work-exp { display: flex; align-items: flex-start; padding:70px 0 100px;}
.work-exp-lft {border-right: 1px solid #fff; height: 55vw; text-align: right; margin-top: 30px; position: relative;}
.work-exp-lft h5{ margin-right: 30px;}
.work-exp-rgt {padding-left: 50px;}
.work-exp-rgt .case-study-banner-lft ul li {
    margin-bottom: 15px;
}
.work-exp-rgt .case-study-banner-lft { margin: 50px 0;}
.work-exp-lft::after{ content:''; position: absolute; top: 0; right: -8px; background: #fff; width: 15px; height: 15px; border-radius: 30px;}
.work-exp-lft::before{ content:''; position: absolute; bottom: 0; right: -8px; background: #fff; width: 15px; height: 15px; border-radius: 30px;}
.work-exp-lft h5.designer-cls{position: absolute; top: 67%;right: 0;}
.work-exp-lft h5.web-develop{position: absolute; bottom: 0;right: 0;}
.work-exp-lft h5.designer-cls span {position: relative;}
.work-exp-lft h5.designer-cls span::after{ content:''; position: absolute; top: 5px; left:22px; background: #fff; width: 15px; height: 15px; border-radius: 30px;}

.about-cont h6{
    font-size:42px; line-height:55px;font-family: "Playfair Display", serif;color: #CED3E0; margin-bottom: 30px;
}
.lets-talk{
    background: #1B1C21; display: flex; align-items: center; justify-content: center; padding: 100px 0; border-radius: 10px;
    flex-wrap: wrap;
    text-align: center;
}
.lets-talk h4{
    font-size: 28px; line-height:40px; display: inline-block; width: 100%; margin-bottom: 70px; font-weight: 400;
}
.lets-talk a {
    background: #5ABEAA; color: #141519; text-align: center; border-radius: 30px; padding: 15px 0; width: 250px; font-weight: 700; margin: 0 10px
}
.lets-talk a:hover {
    background: #499b8a; color:#fff;
}
.mobile-view { display: none;}
.right-block.mobile-show { display: none;}

.blog-posts{
    background: #141519; padding: 100px 0;
}

.blog-top a {padding: 13px 40px; border-radius:50px; color:#5ABEAA; text-align: center; cursor: pointer; border:2px solid #5ABEAA;
font-size: 16px; font-weight: 600; letter-spacing: 5px; display: inline-block; text-transform: uppercase;}
.blog-top a:hover {
    background: #499b8a; color:#fff;
}
.blog-top h3{
    font-size:42px; line-height:55px;font-family: "Playfair Display", serif;color: #CED3E0; margin-bottom:10px;
}
.blog-top h6{
    font-size:20px; line-height:30px;color: #fff; font-weight: normal;
}
.blog-top {margin-bottom: 60px;}
.blog-sections {}
.blog-sections ul li img { border-radius: 10px 10px 0 0; width: 100%; height: auto;}
.blog-sections ul li .blog-cont {border: 1px solid #6A6A6A;border-radius:10px;padding: 0 0 20px;}
.blog-cont small {color: #5ABEAA; font-size: 14px; line-height: 20px; margin-bottom: 10px; display: block;}
.blog-cont h2{font-size: 24px; line-height: 30px; margin-bottom: 20px;}
.blog-cont p{color: #fff; margin-bottom: 30px; font-weight:300; padding-right: 20px; min-height: 80px;}
.profile { display: flex; align-items: center;}
.profile-rgt { margin-left: 20px;}
.profile-rgt h5{ font-size: 14px; line-height: 20px;}
.profile-rgt span{ font-size: 14px; line-height: 20px; color:#667085; display: block}
.blog-sections ul li .blog-cont .profile img {width: auto;}
.blog-sections ul li { margin-bottom:40px;}
.about figure{ margin: auto;}

.design-think h3, .leadership h3{ font-size: 42px; line-height: 42px; margin-bottom: 60px;font-family: "Playfair Display", serif;}
.design-think figure img {width: 100%; height: auto;}
.design-think, .leadership { margin-bottom: 100px;}
.leadership p { margin-bottom: 30px;}

.carousel-item {
    background: #141519; border-radius: 8px;
    text-align: center;
}
.leader-cont{
    margin: auto; padding: 100px 0 30px;
}
.leader-cont h5{ font-size: 25px; line-height: 35px; font-weight:normal; margin-bottom: 20px; position: relative;}
.leader-cont img { margin-bottom: 10px; border-radius: 50%;}
.leader-cont span {color: #D3DAE6;
}
.leader-cont h5 sub { position: absolute; top: -60px; left: -40px;}
.carousel-indicators { bottom: -60px;}
.carousel-indicators [data-bs-target] {
    border-top: transparent; border-bottom: transparent; border-radius: 10px; margin: 0 5px; width: 8px; height: 8px;
    background: #D9D9D9;

} 
.carousel-indicators .active {
    width: 30px;
    background: #5ABEAA;
}

.carousel-control-next, .carousel-control-prev { top: auto; width: auto; bottom: -70px; display: inline-block; opacity: 1;}


.carousel-control-prev {
    left: auto;
    right:50px;
}
/* .carousel-control-prev-icon {
    background-image:url('../images/arrow-right.png'); height: 45px; width: 45px; 
}

.carousel-control-next-icon {
    background-image:url('../images/arrow-right.png'); height: 45px; width: 45px; 
    transform: rotateZ(180deg);
}

.carousel-control-prev-icon:hover  {
    background-image:url('../images/arrow-hover-right.png'); height: 45px; width: 45px; 
    transform: rotateZ(180deg);
}

.carousel-control-next-icon:hover {
    background-image:url('../images/arrow-hover-right.png'); height: 45px; width: 45px; 
    transform: rotateZ(0deg);
} */

.study-block-rgt a.mobile-case-study { display: none;}
.study-block-rgt figure img { border-radius: 6px}
.banner-lft h1 span { display: block; font-size: 24px; line-height:30px; color:#5ABEAA;font-family: "Roboto", sans-serif; font-weight: normal; text-align: right; padding-top: 15px;}
.blog-cont-in {padding: 30px 0 0 20px;}
.blog-sections ul li .blog-cont:hover{
    border: #499b8a 1px solid;
}
.leader-cont h5 sub img { border-radius:0;}


.carousel-control-prev-icon{
    background-image:url('../images/arrow-hover-right.png'); height: 45px; width: 45px;  
    transform: rotateY(180deg);
}

.carousel-control-next-icon {
    background-image:url('../images/arrow-hover-right.png'); height: 45px; width: 45px;  
}

.carousel-control-prev.enabled .carousel-control-prev-icon,
.carousel-control-next.enabled .carousel-control-next-icon {
    background-image:url('../images/arrow-hover-right.png'); height: 45px; width: 45px; 
}

.carousel-control-prev.disabled .carousel-control-prev-icon{
    background-image:url('../images/arrow-right.png'); height: 45px; width: 45px;  
    transform: rotateZ(0);
}

.carousel-control-next.disabled .carousel-control-next-icon {
    background-image:url('../images/arrow-right.png'); height: 45px; width: 45px;  
}

.carousel-control-prev.disabled,
.carousel-control-next.disabled {
    pointer-events: none;
    opacity:1; 
}

.carousel-control-next.disabled{
    transform: rotateY(-180deg);
    bottom: -70px;
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {opacity: 1;}

.blog-cont h4 {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 10px; min-height: 20px;
}
.blog-cont p.last-para{ min-height: 110px;}

.explore-block { justify-content: space-between; display: flex; align-items: center; border-top: 0.5px solid #6A6A6A; padding-top: 40px;}
.explore-lft a, .explore-rgt a{ color:#A9ACB8; font-weight: normal;}
.explore-rgt { display: flex; align-items: center; text-align: center;}
.explore-lft a { padding-left: 25px;font-size:1.313em;color:#A9ACB8;}
.explore-rgt a { padding-right: 25px; color:#A9ACB8;font-size:1.313em; text-align: right;}
.explore-rgt svg { transform: rotateZ(-180deg);}
.explore-rgt svg, .explore-lft svg{ cursor: pointer;}
.explore-rgt svg path, .explore-lft svg path { fill:#6a6e7a;}

.explore-lft { display: flex; align-items: center;}

a.explore{
font-size:1.313em; line-height:1.6em; border: 1px solid #6a6e7a; padding: 8px 30px; border-radius:4px; text-align: center; cursor: pointer; font-weight: 500;
color:#6a6e7a; display: inline-flex;
}
a.explore:hover{
background:var(--color-yellow); color:var(--color-black) ;
}
.explore-rgt:hover svg path, .explore-lft:hover svg path { fill:#5ABEAA;}
.explore-rgt:hover a, .explore-lft:hover a { color:#5ABEAA;}
.explore-all-cases {
    background: #141519; padding-bottom: 100px;
}