@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&display=swap');
@import url('colors.css');
@import url('fonts.css');
* {
    margin: 0px;
    padding: 0px;
    border: 0;
    outline: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
html{
	
}
body {
    font-size:1.5rem;
	font-weight:300;
    font-family: 'Barlow', sans-serif;
    overflow-x: hidden;
	color:var(--black);
	
}
strong{
	font-weight:500
}
.underline{
	text-decoration:underline
}
a,
a:hover,
a:active,
a:visited,
a:focus {
    color:var(--black);
    text-decoration: none;
    outline: 0;
	transition: all .3s ease;
}

a.link-black{
	color:var(--black);
}

a.read-more{
	margin-top:10px;
	color:var(--black);
	display:inline-block;
	font-size:var(--xxs);
	font-weight:700
}
.heading{
	margin-bottom:30px
}
h1, heading1{
	font-size:var(--lg);
}
h2, heading2{
	font-size:var(--md);
}
h3, heading3{
	font-size:var(--sm);
}
h4, heading4{
	font-size:var(--xs);
}

h1,
h2,
h3,
h4,
h5,
h6,
figure {
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6{}
p {
    line-height:2.2rem;
	margin-bottom: 0;
	
}
p + p{margin-top:1.4rem}
ol,
ul,
li {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
	line-height:2.2rem
}
.bold{
	font-weight:500
}
.logo {
    width: 400px;
	margin:0 auto;
}
.bg-black{
	background:var(--black);
}
.bg-black .heading{
	color:var(--white);
}
.bg-black a,.bg-black  a:hover,.bg-black  a:active,.bg-black  a:visited,.bg-black  a:focus{color:var(--white)}
header{
	padding:48px 0;
	position:relative;
}
header:after{
	content:"";
	position:absolute;
	right:0;
	top:0;
	background:#000;
	width:50%; 
	height:100%;
	z-index:1
}
header .container{
	position:relative;
	z-index:2;
	flex-direction:column
}
.header-top{
	font-size:1rem;
	display: flex;
    align-self: end;
	color:var(--white);
	display:none
}
.header-top .img-contr{
	margin-right:10px; 
	margin-left:5px; 
	position:relative; 
	top:-3px
}
.header-bottom{
	width:100%;
	display:flex;
	justify-content: space-between;
	margin-top:20px;
	position:relative;
}

.header-right{
	width:240px;
	font-size: 1rem;
    align-self:center;
    color: var(--white);
	text-align:right;
	position: absolute;
    top: auto;
	right:0;
}
.header-right .img-contr {
    margin-right: 10px;
    margin-left: 5px;
    position: relative;
    top: -1px;
}
.header-right .input-group{
	height:26px;
	line-height:26px;
	border:1px solid var(--white);
	border-radius:18px;
	
	
}
.header-right .form-outline{width:calc(100% - 26px)}
.header-right .form-control, .header-right button{
	background:transparent; height:20px; line-height:20px;
}
.header-right button{
	margin-right:10px
}
footer{
	font-size:var(--sm);
	font-weight:400;
	background:var(--black);
	color:var(--white);
	padding:40px 0
}
footer .content-area{
	display:flex;
	align-items:center;
	justify-content:space-between
}
footer .social-contr{
	margin-top:0
}
footer .social-contr li{
	display:flex; 
	justify-content:center
}
footer .social-contr a{
	margin:0 10px
}
.container{
	max-width:1280px;
	padding-left:30px;
	padding-right:30px
}
section{
	padding-top:60px; 
	padding-bottom:60px
}
.row{
	margin-right: -30px;
    margin-left: -30px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
	padding-left:30px; 
	padding-right:30px
}
.mT20{
	margin-top:20px
}
.mT80{
	margin-top:80px
}
.mB0{
	margin-bottom:0px;
}
.mB15{
	margin-bottom:15px;
}
.mB30{
	margin-bottom:30px
}



.pR10{
	padding-right:10px
}
.w-auto{width:auto}
#scrollTop{position:fixed; bottom:10px; right:10px; z-index:1}


.numbering{
	margin-top:1.1rem;
	list-style-type: decimal!important;
	padding-left:25px;
}

.numbering li + li{
	margin-top:5px;
}

.list-inline{
	margin-top:1.1rem;
	list-style-type: inherit!important;
	padding-left:20px;
}

.list-inline li + li{
	margin-top:5px;
}
label{
	font-size: 1.2rem;
	font-weight:400;
}
button.close span{
	font-size:40px;
	line-height:30px
}
input,
textarea {
    border: 0;
    outline: 0;
    box-shadow: none;
    resize: none;
    background-color: transparent;
}

input:focus,
textarea:focus {
    box-shadow: none;
    border: 0;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

img {
    max-width: 100%;
	height: auto;
	aspect-ratio: attr(width) / attr(height);

}
img.auto{
	width:auto
}

.navbar-brand{
	position:absolute;
	width: 100%;
    text-align: center;
    left: 0;
	margin-top:-10px;
	margin-right:0;
	cursor: inherit;
}
.navbar-brand .logo img{
	padding-left:15px
}
.main-container{
	
}
.for-mobile{
	display:none
}

.cta-contr{
	font-size:var(--sm);
	font-weight:700;
	margin-top:20px;
	display:flex;
}
.cta-contr img{
	width:24px
}
.inner-page section .section{
	border-bottom:1px solid var(--black);
}
.inner-page section:last-child .section{
	border-bottom:0px solid var(--black);
}
.form-control{background:#fff!important; border:1px solid rgba(0,0,0,0.2)!important; border-radius:2px!important; box-shadow:inset 3px 2px 7px rgba(0,0,0,0.1)!important;height:38px!important}
textarea.form-control{ height:auto!important}
/* ================================================================= */
/*=================  HEADER PART CSS  ==================*/
/* ================================================================= */

.navbar-toggler {
    display:block!important;
	border:none!important;
	padding:0;
	position: relative;
    z-index: 3;
}
button.navbar-toggler:focus{
	outline:none;
}
.navbar-expand-lg .navbar-collapse{
	position: absolute;
    top: 36px;
	display:none!important;
	
}

.navbar-expand-lg .navbar-collapse.show{
	display:block!important;
	position:absolute
}
.navbar-overlay{
	content:"";
	position:fixed;
	background:rgba(0,0,0,0.6);
	z-index:2;
	height:100%;
	width:100%;
	left:0;
	top:0;
	display:none
}
.navbar-expand-lg .navbar-nav{
	flex-direction: column;
	z-index:3;
	padding:20px 40px 60px 20px;
	background:var(--white);
	border:1px solid var(--black);
	position:relative;
}

.main-nav .nav-link {
    padding:15px 0!important;

}
.main-nav {
    padding: 0;
	
}
.main-nav .navbar-nav .nav-link {
    color: rgba(0,0,0,1);
	position:relative;
	font-size:var(--sm);
}
.main-nav .navbar-nav .nav-link:after{
	content: "";
    position: absolute;
    height: 2px;
    width: 40px;
    left: 0;
    right: 0;
    bottom:0;
	background:var(--black);
}
.main-nav .navbar-nav .nav-item:last-child .nav-link:after{
	content: "";
    position: absolute;
    height: 2px;
    width: 40px;
    left: 0;
    right: 0;
    bottom:0;
	background:none;
}
.main-nav .navbar-nav .nav-item.active{
    background: var(--green);
}

.navbar-custom > li > a {
    position: relative;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-transform: capitalize;
    transition: all .3s;
    z-index: 1;
}

.navbar-custom .dropdown li > a.nav-link {
    padding: 5px 20px;
}

.navbar-custom .dropdown li > a.nav-link:hover {
    
}

.dropdown-menu {
    top: 85px;
}

.dropdown-toggle::after {
    margin-left: 8px;
    margin-right: -8px;
}

.nav-btn {
    font-size: 17px;
    font-weight: 500;
    display: inline-block;
    padding: 13px 33px;
    border-radius: 30px;
    background: #fff;
    margin-left: 55px;
    transition: all .3s;
}

.nav-btn:hover {
    
}


.section {
    padding-top:60px;
    padding-bottom:60px;
}


.card {
    border:1px solid var(--darkenGray);
	border-radius:0px;
    margin-bottom: 30px;
    transition: all .3s;
}
.card.no-border{
	border:none;
}

.card:hover {
    box-shadow: 0 10px 18px rgba(0, 0, 0, 7%);
}
.false-card-contr .card:hover{
	box-shadow:none
}
.card-header {
    border: none !important;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}
.card-img {
	position:relative;
}
.card-img .caption {
    background:var(--darkerGreen);
	padding:5px 10px;
	font-size:0.8rem;
	margin:10px;
	font-family: 'Roboto Mono', monospace;
	font-weight:600;
}

.card-info {
    padding: 30px 25px;
}
.card-title {
    font-size: 20px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    transition: all .3s;
}

.card-title:hover {
    
}

.form-control{width: 100%; height: 50px; font-size: 16px; font-weight: 300; border: 1px solid transparent; transition: all .3s; background: #efefef; padding-left: 18px; border-radius: 2px;}
.btn-primary{background:var(--white)!important; border:1px solid var(--black); color:var(--black)!important;  font-weight:500}
.btn-lg{
	height:44px; line-height:42px;  border-radius:22px; padding:0 3rem!important;  font-weight:700
}
select{
	-webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
	background-color:transparent;
	background-image: url(../images/down-arrow.svg)!important;
    background-repeat: no-repeat!important;
    background-position: 97% 20px!important;
    background-size: 15px!important;
}

form{
	margin-top:10px
}
.top-section{
	margin-bottom:30px;
	display:flex;
	align-items:flex-end;
	justify-content:space-between
}
.top-section .heading{
	width:70%
}
.home-top-section{
	position:relative;
	z-index:1
}
.home-top-section{
	padding-top:30px;
	margin-bottom:0px
}
.home-top-section:after{
	content:"";
	position:absolute;
	right:0;
	top:0;
	background:var(--black);
	width:50%; 
	height:100%;
	z-index:1
}
.home-top-section .container{
	position:relative;
	z-index:2
}
.home-top-section .left-panel{
	padding-right:160px;
	font-size:2.3rem;
	font-weight:500;
	line-height:2.8rem;
	flex:1;
	display: flex;
    flex-direction: column;
}
.home-top-section .left-panel .heading{
	font-size:2.8rem;
	line-height:3.1rem;
	font-weight:700;
	margin-bottom:10px
}
.home-top-section .left-panel .cta-contr a{
	display:flex;
	position:relative;
	top:6px
}
.home-top-section .left-panel .cta-contr a img{
	position:relative;
	left:5px;
	top:2px
}
.home-top-section .right-panel{color:var(--white)}


.card-white .topic{
	color:var(--white)
}
.card-white .topic:after{
	background:var(--white);
}
.card-white .date{
	color:var(--white)
}
.card-white .heading{
	color:var(--white)!important
}
.card-white a{
	color:var(--white)!important
}
.card-white .description{
	color:var(--white)
}

.card-white .social-contr a{
	color:var(--white)
}
.card-white .social-contr li a.like{
	background-image: url(../images/like-white.svg);
}
.card-white .social-contr li a.message{
	background-image: url(../images/message-white.svg);
}
.card-white .social-contr li a.message-send{
	background-image: url(../images/message-send-white.svg);
}
.card-white .social-contr li a.download{
	background-image: url(../images/download-white.svg);
}

.card-black .topic{
	color:var(--black)
}
.card-black .topic:after{
	background:var(--black);
}
.card-black .heading{
	color:var(--black)!important
}
.card-black a{
	color:var(--black)!important
}
.card-black .description{
	color:var(--black)
}
.card-black .social-contr a{
	color:var(--black)
}
.card-black .social-contr li a.like{
	background-image: url(../images/like-black.svg);
}
.card-black .social-contr li a.message{
	background-image: url(../images/message-black.svg);
}
.card-black .social-contr li a.message-send{
	background-image: url(../images/message-send-black.svg);
}
.card-black .social-contr li a.download{
	background-image: url(../images/download-black.svg);
}
.design-card-sm{
	background-color:transparent;
	background-repeat: no-repeat!important;
    background-position: 0 0!important;
    background-size: cover!important;
	width: 333px;
    height: 322px;
}
.design-card-sm .card-body{
	padding:20px 40px; 
	text-align:center;
	height:100%;
	position:relation;
	z-index:2
	
}
.design-card-sm .topic{
	font-size:var(--xs);
	font-weight:500;
	position:relative;
	padding-bottom:7px;
}
.design-card-sm .topic:after{
	content: "";
    position: absolute;
    height: 1px;
    width: 80px;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom:0;
}
.design-card-sm .date{
	font-size:var(--xs);
	font-weight:300;
	margin-top:5px;
}
.design-card-sm .heading{
	font-size:var(--md);
	font-weight:600;
	line-height:2.3rem;
	margin-top:5px;
	margin-bottom:20px
}
.design-card-sm .description{
	font-size:var(--xs);
	line-height:1.5rem;
	width:80%;
	margin:20px auto 0
}
.design-card-sm .social-contr{
	margin-top:10px;
	text-align:center;
	display:flex;
	justify-content:center
}
.design-card-sm .social-contr li{
	float:left;
	padding:0 5px;
	display:flex; 
	justify-content:center;
}
.design-card-sm .social-contr a{
	display:block
}
.design-card-sm .social-contr li a.icon{
	background-color:transparent;
	background-repeat: no-repeat!important;
    background-position: 0 0!important;
    background-size: contain!important;
	width:20px;
	height:20px
}
.design-card-lg{
	background-color:transparent;
	background-repeat: no-repeat!important;
    background-position: 0 0!important;
    background-size: cover!important;
	width: 580px;
    height: 560px;
	margin:0 auto;
}
.design-card-lg .card-body{
	padding:60px 30px; 
	text-align:center;
	height:100%;
	display: flex;
    flex-direction: column;
	position:relative;
	z-index:1
}
.design-card-lg .topic{
	font-size:1.9rem;
	font-weight:700;
	position:relative;
	padding-bottom:10px;
}
.design-card-lg .topic:after{
	content: "";
    position: absolute;
    height: 2px;
    width: 170px;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom:-12px;
}
.design-card-lg .date{
	margin-top:20px;
	font-size:1.5rem;
	font-weight:400
}
.design-card-lg .heading{
	font-size:3.6rem;
	font-weight:600;
	line-height:4.2rem;
	margin-top:5px;
	margin-bottom:0px;
	flex: 1
}
.design-card-lg .description{
	font-size:2rem;
	font-weight:400;
	line-height:2rem;
	width:75%;
	margin:30px auto 0;
}
.design-card-lg .social-contr{
	margin-top:30px;
	text-align:center;
	display:flex;
	justify-content:center
}
.design-card-lg .social-contr li{
	float:left;
	padding:0 5px;
	display:flex; 
	justify-content:center;
}

.design-card-lg .social-contr a{
	display:block
}
.design-card-lg .social-contr li a.icon{
	background-color:transparent;
	background-repeat: no-repeat!important;
    background-position: 0 0!important;
    background-size: contain!important;
	width:30px;
	height:30px
}

/* card background */
.designer-and-citizen-a-non-dual-relation{
	background-image: url(../images/designer-and-citizen-a-non-dual-relation.jpg)!important;
}
.design-led-empowerment-index{
	background-image: url(../images/design-led-empowerment-index-bg.jpg)!important;
	position:relative;
}
.critical-theory-based-design{
	background-image: url(../images/critical-theory-based-design-bg.jpg)!important;
	position:relative;
}
.vignettes{
	background-image: url(../images/vignettes.jpg)!important;
}

.social-contr{
	margin-top:30px;
	text-align:center;
	display:flex;
}
.social-contr li{
	float:left;
	padding:0 5px;
	display:flex; 
	justify-content:center;
}
.social-contr a{
	display:block
}
.lead-contr .col{
	display: flex;
    flex-direction: column;
}
.lead-contr .content-area{
	display: flex;
    flex: 1;
    flex-direction: column;
}

.quote-section .left-panel{
	padding-left:30px
}
.quote-section .right-panel{
	background-image: url(../images/quote.svg)!important;
    background-repeat: no-repeat!important;
    background-position:40px 0!important;
	padding:10px 70px 0 80px!important;
	font-size:var(--sm);
	
}
.quote-section .right-panel p{
	line-height:2.3rem
}
.quote-section .right-panel .read-more{
	margin-top:15px;
}
.quote-section .right-panel .author-details{
	margin-top:25px
}
.quote-section .right-panel .author-details .name{
	font-size:var(--sm);
	font-weight:700;
}
.quote-section .right-panel .author-details .designation{
	font-size:var(--sm);
	font-weight:300;
	margin-top:0px
}


.explore-ux-design .main{
	width:35%
}
.explore-ux-design .card-outer{
	margin-top:-50px
}
.explore-ux-design .card-inner{
	margin-top:50px;
}


.main-work-contr .lead-text{
	font-size:var(--md);
	font-weight:700;
	line-height:2.8rem;
}
.inner-page section{
	padding-top:0;
	padding-bottom:0;
}
.share-step{
	display:flex;
    counter-reset: share-work-step;
	margin-top:50px
}

.share-step dt {
    position: relative;
	padding-left: 50px;
	font-weight:300;
	width:calc(33.33% - 20px);
	margin-right:20px
}
.share-step dt:before {
    content: counter(share-work-step);
    counter-increment: share-work-step;
    position: absolute;
    left: 0;
    top: 50%;
	transform:translateY(-50%);
    font-size:5rem;
	font-weight:700
}

.share-steps-section .cta-contr{
	margin-top:50px
}

article .img-contr {
    float: left;
    width: 300px;
    padding: 0 30px 0 0;
}


article h4{
	font-size:var(--xs);
	font-weight:500;
	position:relative;
	padding-bottom:10px;
	display:inline-block;
	margin-bottom:20px
}
article h4:after{
	content: "";
    position: absolute;
    height: 1px;
    width: 80px;
    left: 0;
    right: 0;
    bottom:-10px;
	background:var(--black);

}
article h2{
	margin-bottom:30px
}
.para-img-with-text{
	display:flex;
	align-items:flex-start
}
.imgscroll-contr{
	overflow-x:auto
}
.imgscroll-contr img + img{
	margin-left:20px
}
.dash-listing{
	margin:0;
	padding:0;
	list-style:none
}
.dash-listing li{
	position:relative;
	padding-left:20px
}
.dash-listing li + li{
	margin-top:5px
}
.dash-listing li:before{
	content:"";
	position:absolute;
	width:10px;
	height:1px;
	background:var(--black);
	top:15px;
	left:0;
}
.number-listing{
	margin-left:30px
}
.number-listing li{
	position:relative;
	padding-left:10px;
}
.number-listing li + li{
	margin-top:5px
}
.gray-contr{
	background:var(--gary);
	padding:20px;
}
.get-touch a{
	color:var(--white)
}