*{
	margin: 0;
	padding: 0;
}

html{
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body{
	overflow-x: hidden;
	scroll: smooth;
}

:root {
  --circuit-green: #20F6A9;
}

.clear{
	clear: both;
}

.mt-20{
	margin-top: 20px!important;
}

.z1{
	z-index: 1;
}


#loader {
    /*background: url('https://media.giphy.com/media/VseXvvxwowwCc/giphy.gif') no-repeat center center;*/
    /*background: url('https://cdn.dribbble.com/users/93713/screenshots/1701773/_shot.gif') no-repeat center center;*/
    background: url('https://bhaveshasnotkar.in/images/loader.gif') no-repeat center center;
    background-color: #000000;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}

.skill-text a{
	text-decoration: none;
	color: #609c7fe0;
	font-size: 12px;
	transition-delay:.2s;
}

.skill-text a:hover{
	color: #37ed96;
	cursor: pointer;
}
	

/*FONTS*/

@font-face {
  font-family: DMsans-Regular;
  src: url(../fonts/DMSans-Regular.ttf);
}
@font-face {
  font-family: Gemunu-XBold;
  src: url(../fonts/gemunu-libre.extrabold.ttf);
}
@font-face {
  font-family: Gemunu-Regular;
  src: url(../fonts/gemunu-libre.regular.ttf);
}
@font-face {
  font-family: Gemunu-Medium;
  src: url(../fonts/gemunu-libre.medium.ttf);
}

/*FONTS*/


/*NAVIGATION*/
nav{
	background-color: #383838;
	/*padding: 10px;*/
	color: white;
	box-shadow: 0 3px 5px -2px #00000054;
	vertical-align: middle;
	display: flex;
	border-radius: 0 0 9px 9px;
	justify-content: space-between;
	padding:10px 100px;
	font-family: DMsans-Regular;
	align-items: center;
	/*position: sticky;*/
	position: fixed;
	width: -webkit-fill-available;
	top: 0;
	z-index: 9999999;
}

.logo{
	height: 65px;
}

.mobile-logo{
	display: none;
}

.dark-theme{
	background-color: #282828;
}

.menu-items{
	display: flex;
	list-style: none;
	align-items: center;
}

.menu-items li{
	margin-left: 50px;
}

.menu-items li a{
	color: white;
	text-decoration: none;
	letter-spacing: -0.33px;
	font-size: 18px;
}

.menu-items li a:hover{
	color: #20F6A9;
	border-bottom: 1px solid var(--circuit-green);
	transition: 0.1s;
	transform-origin: center;
}

.menu-items li a:hover::before{
	text-shadow: 1px 2px 0px red;
}

#nav-icon{
	display: none;
}

.hamburger{
	height: 28px;
	width: 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.nav-circuit{
	display: flex;
	align-items: center;
}

.ellipse{
	border-radius: 100%;
	border: 2px solid var(--circuit-green);
	height: 3px;
	width: 3px;
	margin:-1px;
}

.line{
	height: 2px;
	width: 20px;
	background-color: var(--circuit-green);
}

/*NAVIGATION*/



/*HREO SECTION*/

.hero{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 100px;
	height: 90vh;
}

.left-hero h2{
	font-family: "Gemunu-XBold", Helvatica , sans-serif;
	font-size: 85px;
	color: #eaeaea;
	font-weight: normal;
}

/*.left-hero h2 span{
	color: #EAEAEA;
}
*/
.ultimate-circuit{
	height: 54px;
}

.left-hero h4{
	font-family: "Gemunu-Regular", Helvatica , sans-serif;
	font-size: 62px;
	color: #b9b9b9;
	font-weight: normal;
	font-size: 34px;
	margin-top: 30px;
}

.left-hero p{
	font-family: "DMsans-Regular", Helvatica, sans-serif;
	color: #5f5f5f;
	font-size: 16px;
}

.left-hero > span{
	display: inline-block;
	width: 532px;
	color: #a5a5a5;
	font-family: "DMsans-Regular", Helvatica, sans-serif;
	font-size: 18px;
	margin-top: 15px;
}

.bg-svg{
	background-image: url('../svg/banner-bg.svg');
	/*background-image: url('../images/banner-me.png');*/
	background-repeat: no-repeat;
	height: 470px;
	width: 624px;
	text-align: center;
}

.banner-img{
	height: 100%;
}

.cta-set{
	margin-top: 18px;
}

.cta-set button:first-child{
	margin-right: 10px;
}

/*.banner-img-hw{
	height: 500px;
}*/


.banner-img-me{
	height: 1100px;
	position: absolute;
	right: -20px;
	top: 90px;
}
/*HREO SECTION*/


/*BUTTON*/

.btn{
	padding: 5px 15px;
    height: 38px;
    width: 171px;
    border-radius: 4px;
    border: 0;
    background: white;
    font-size: 18px;
    border: 1px solid transparent;
    font-family: "DMsans-Regular", Helvatica, sans-serif;
    letter-spacing: -0.33px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.btn:hover{
	cursor: pointer;
}

.btn.primary{
	color: #222222;
	background-color: #60ECCA;
}

.btn.secondary{
	color: #fff;
	border: 1px solid #fff;
	background-color: transparent;
}

.btn.primary:hover,
.btn.secondary:hover{
	border: 1px solid white;
	animation: glow 2s infinite 0s linear;
}

.btn.secondary:hover{
	background-color: #353535;
}

.btn > .btn-icon{
	width: 100%;
	display: block;
	position: absolute;
	top:-29px;
	left: 0px;
	text-align: center;
}

.btn:hover >  .btn-icon{
	top:5px;
	transition: 0.3s;
}

.btn-txt{
	position: absolute;
	left: 0px;
	text-align: center;
	top: 5px;
	width: 100%;
	display: block;
}

 .btn:hover > .btn-txt{
 	top: 38px;
	transition: 0.3s;
 }
/*BUTTON*/

/*SECTION TITLE*/


.section-title{
	display: block;
	text-align: center;
	font-family: Gemunu-Medium;
	color: #f7f7f7;
	position: relative;
	margin-bottom: 50px;
	text-transform: uppercase;
}

.section-title > h3 {
	border-top: 1px solid var(--circuit-green);
	border-bottom: 1px solid var(--circuit-green);
	display: inline-block;
	padding: 5px;
	font-weight: 500;
	letter-spacing: 0.33px;
	font-size: 26px;
}

.section-title > .ellipse{
	position: absolute;left: 48%;
}


/*SECTION TITLE*/


/*PORTFOLIO*/

.portfolio{
	position: relative;
	margin-bottom: 25px;
	min-height: 100vh;
}

.portfolio-showcase{
	display: grid;
    padding: 0 100px;
    grid-gap: 43px;
    grid-template-columns: repeat(3, 385px);
    justify-content: center;
}

.portfolio-item{
	/*border: 1px solid white;*/
	border-radius: 9px;
	overflow: hidden;
	/*height: 250px;
	width: 250px;*/
	/*background-color: white;*/
	/*z-index: 1;*/
}


.big-circuit-design{
	position: absolute;
}

.big-circuit-design.one{
	height: 228px;	
	left: -150px;
    top: 150px;
    transform: rotate(90deg);
    z-index: -1;
}

.portfolio-tray{
	padding: 0 100px 100px 100px;
}

.tray-item{
	width: 100%;
	height: 500px;
	overflow: hidden;
	border-radius: 9px;
	display: flex;
	background-color: white;
	position: relative;
	margin-bottom: 50px;
}

.tray-img{
	height: 140%;
	/*width: 575px;*/
	position: absolute;
	top:-10px;
}

.tray-img.spyduscover{
	height: 100%;
	left:-50px;
}

.tray-item > div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.tray-title{
	font-size: 90px;
	font-family: Gemunu-XBold, sans-serif;
	color: #333333;
	text-shadow: 2px 2px 5px #c8c8c8;
}

.black-one-bfc .tray-title,
.black-one .tray-title{
	text-shadow: 2px 2px 5px #323232;
}

.tray-subtitle{
	font-size: 32px;
	font-family: DMsans-Regular, sans-serif;
	margin-top: 20px;
	text-shadow: 1px 1px 3px #c8c8c8;
}

.black-one-bfc .tray-subtitle,
.black-one .tray-subtitle{
	text-shadow: 1px 1px 3px #323232;
}

.tray-cta{
	padding: 10px 25px;
	color: #222222;
    /*background-color: #20f6a9;*/
    border:2px solid #20f6a9;
	border-radius: 5px;
	font-size: 18px;
	text-decoration: none;
	font-family: DMsans-Regular, sans-serif;
	margin-top: 15px;
	transition: 0.3s;
	z-index: 999999;
}

.tray-cta:hover{
    background-color: #20f6a9;
    box-shadow: 1px 5px 9px #e4dfdf;
}

.tray-item.first .tray-img{
	left: -10px;
	left: none;

}

.tray-item.second .tray-img{
	right: -10px;
	left: none;

}

.portfolio-tray .tray-item:last-child{
	margin-bottom: 0;
}

.tray-item.first.rems_tray .tray-img {
    left: -332px;
    left: none;
}



/*PORTFOLIO*/


/*----------------------MY WORK --------------- */

.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
box-sizing: border-box;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
font-family: "DMsans-Regular", Helvatica, sans-serif;
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
overflow:hidden;
height: 100%;
width: 100%;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:20px 10px;
overflow:hidden;
border-radius: 0 0 5px 5px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:141px 0 0;
padding:7px 14px;
overflow:hidden;
border-radius: 5px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
overflow:hidden;
}


.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
overflow:hidden;
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
overflow:hidden;
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
overflow:hidden;
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
overflow:hidden;
}



.hovereffect img{
      margin-bottom: 30px;
      overflow:hidden;
}

/*-----------------ENDS MY WORK ------------------ */


/*SKILLS*/

.skills{
	padding: 0 100px;
	min-height: 75vh;
	display: block;
	position: relative;
	margin-top: 50px;
}

.skill-item{
	margin: 65px 0;
	display: flex;
    align-items: center;
}

.skill-item:first-child{
	margin-top: 0;
}

.bar-bg{
	background-color: #616161;
	width:500px;
	display: inline-block;
	vertical-align: middle;
}

.bar-fill,
.bar-bg{
	box-shadow: 2px 0px 3px 2px #315d444a inset;
	height: 20px;
	border-radius: 4px;
}

.bar-fill{
	background-color: #37ED96;
	/*width: 85%;*/
}

.bar-fill.UIUX-bar{
    width: 98%;
}
.bar-fill.figma-bar{
    width: 94%;
}

.bar-fill.illustrator-bar{
    width: 88%;
}

.bar-fill.photoshop-bar{
    width: 93%;
}

.bar-fill.html-bar{
    width: 98%;
}
.bar-fill.css-bar{
    width: 99%;
}
.bar-fill.js-bar{
    width: 72%;
}

.skill-text{
	display: flex;
    width: 100px;
    color: #b3b3b3;
    font-size: 14px;
    font-family: "DMsans-Regular", Helvatica, sans-serif;
    flex-direction: column;
    align-items: center;
}

.skill-text > img{
	height: 40px;
	margin-bottom: 5px;
}

.skill-flex{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
}

.big-circuit-design.two {
    height: 263px;
    right: 31px;
    top: 150px;
    transform: rotate(0deg);
}
/*SKILLS*/


/*CONTACT*/

.contact-section{
	padding:0 100px;
	padding-bottom: 100px;
	position: relative;
}

.contact-flex{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.contact-item{
	color: white;
	font-family: "DMsans-Regular", Helvatica, sans-serif;
	display: flex;
	align-items: center;
	font-size: 20px;
	margin:25px; 
}
.contact-item > img{
	margin-right: 15px;
	display: block;
	height: 30px;
	width: : 30px;
}

.big-circuit-design.three {
    height: 32px;
    right: -25px;
    top: 335px;
    transform: rotate(0deg);
    opacity: 50%;
}

/*CONTACT*/


/*QUOTE*/

.quote-section{
	display: block;
	/*overflow-x:hidden; */
}

.quote-bg{
	background-color: #000;
	/*width: 100vw;*/
	color: #afafaf;
	position: relative;
	font-family: "DMsans-Regular", Helvatica, sans-serif;
	/*padding: 50px;*/
	text-align: center;
	/*display: flex;*/
	/*justify-content: center;*/
}

.quote1{
	position: absolute;
	top: -5px;
}

.quote2{
	position: absolute;
	bottom: -5px;
	transform: rotate(180deg);
}





/*QUOTE*/


/*ANIMATIONS*/

@keyframes glow{
    0%{
        transform: rotate(xx);
        box-shadow: 0px 0px 4px 2px #80ffadbd;
        }
    25%{
        transform: rotate(xx);
        box-shadow: 0px 0px 2px 1px  #80ffadbd;
        }
    50%{
        transform: rotate(xx);
        box-shadow: 0px 0px 4px 1px #80ffadbd;
        }
    75%{
        transform: rotate(xx);
        box-shadow: 0px 0px 2px 1px #80ffadbd;
        }
    100%{
        transform: rotate(xx);
        box-shadow: 0px 0px 4px 2px #80ffadbd;
        }
}
   

/*ANIMATIONS*/



/*CASE STUDY PAGE STARTS*/

.case-study-section{
	padding:50px 25px; 
	display: grid;
	grid-template-columns: 200px auto;
	grid-gap: 35px;
}

.side-bar{
	background-color: #2b2b2b;
	display: flex;
	flex-direction: column;
	padding: 0 20px;
	border-radius: 9px;
	box-shadow: 0px 1px 9px -1px #00000073;
	height: auto;
	width: 150px;
	overflow: auto;
	position: fixed;
	top: 50%;
	transform: translateY(-50%); 
}

.side-bar > a{
	font-family: "DMsans-Regular", sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	padding: 10px 0px;
	text-decoration: none;
	color: #9a9a9a;
}

.side-bar > a:hover{
	border-bottom: 2px solid #20F6A9;
	color: #20F6A9;
}

.case-study-content{
	font-family: "DMsans-Regular", 'Helvatica', sans-serif;
	font-size: 16px;
	color: silver;
	grid-column-start: 2;
}

.case-study-title{
	font-size: 24px;
    text-transform: uppercase;
	margin: 100px 0 25px 0;
	text-shadow: 0 0 5px var(--circuit-green);
	color: #41fdb9;
}

.old-layout.mca{
	height: 100vh;
}


.details-div{
	display: flex;
}

.details-text p{
	font-family: "DMsans-Regular","Helvatica", sans-serif;
	margin-left: 25px;
	font-size: 18px;
	color: #a9a9a9;
	margin-bottom: 15px;
}

.details-text > p > span,
.details-text > p > span > a{
	color: #717171;
}

.user-persona-grid{
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-gap: 75px;
}


.user-persona-box{
	border: 1px solid #2a5d4a;
	padding: 30px;
	border-radius: 9px;
	text-align: center;
}

.user-persona-box:hover{
	border: 1px solid var(--circuit-green);
	box-shadow: 0 0 22px -10px var(--circuit-green);
}

.user-persona-box img{
	height: 75px;
	justify-self: center;
	margin-bottom: 9px;
}

.user-persona-box .name{
	font-size: 18px;
}

.user-persona-box .age-place{
	font-size: 14px;
	color: #8a8a8a;
	margin-bottom: 25px;
}

.new-layout.mca{
	width: 75%;
}

.style-guide-img{
 width: 600px; 
}

.ta-center{
	text-align: center;
}

.userflow.esociety{
	width: 1000px;
}

.mobile-wireframe{
	display: grid;
	grid-template-columns: repeat(4,auto);
}

.mobile-wireframe img{
	height: 480px;
}

.prototype-link{
	margin-bottom: 25px;
}

.prototype-link a{
	text-decoration: none;
	color: silver;
}

.prototype-link a:hover{
	color: var(--circuit-green);
	transition: 0.3s;
	text-shadow: 0 0 3px var(--circuit-green);
}

.prototype-link a:hover .eye-svg{
	fill: var(--circuit-green);
	transition: 0.3s;
	filter: drop-shadow(0px 0px 1px var(--circuit-green));
}

.style-guide-img.stayfit{
	width: 900px;
}

.logo-inspi{
	border-radius: 9px;
}

.fbpost-div{
	display: flex;
	flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-around;
    align-items: flex-start;
}

.web-banner-div{
	display: grid;
	grid-template-columns: auto;
}

.web-banner-div > div{
	display: flex;
	margin-bottom: 50px;
}

.web-banner-div > div > div:first-child{
	margin-right: 25px;
	width: 75%;
}
.web-banner-div > div > div:nth-child(2){
	width: 30%;
}

.web-banner-div > div > div > p{
	margin-bottom: 10px;
}

.web-banner-div > div > div:first-child > img{
	width: 100%;
}

.web-banner-div > div > div:nth-child(2) > img{
	width: 100%;
}

.logo-design{
	widows: 100%;
}

.logo-design img{
	margin-right: 25px;
}

.emailer-div{
	display: flex;
	flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-around;
    align-items: flex-start;
}
.emailer-div img{
	margin-right: 50px;
	width: 420px;

}

.video_esoceity{
	width: 75%
}

.video_bfc{
	width: 100%;
}

.video_nutrichef{
	width: 86%;
}

.video_wps,
.video_rems{
	width: 85%;
}
.video_t2c{
	width: 70%;
}

.video_wps{
	width: 83%;
}

.prototype-link a{
	border: 1px solid #f5f5f5;
	padding: 5px 15px;
	border-radius: 3px;
	font-size: 18px;
	font-family: "DMsans-Regular", Helvatica, sans-serif;
    letter-spacing: -0.33px;
    transition: 0.3s;
    color: #f5f5f5;
}

.prototype-link a > svg > path{
	fill: #f5f5f5!important;
}

.prototype-link a:hover{
	border: 1px solid var(--circuit-green);
	box-shadow: 0 0 2px var(--circuit-green);
}

.prototype-link a:hover  > svg > path{
	fill: var(--circuit-green)!important;
}

.tray-item.black-one,.tray-item.black-one-bfc{
	background-color: #0d0f0e;
}

.tray-item.black-one .tray-title,.tray-item.black-one-bfc .tray-title{
	color: #e6e6e6;
	z-index:1;
}

.tray-item.black-one .tray-subtitle,.tray-item.black-one-bfc .tray-subtitle{
	color: #d6d6d6;
	z-index: 5;
}

.tray-item.black-one .tray-cta,.tray-item.black-one-bfc .tray-cta{
	background-color: #0d0f0e;
	color: #f5f5f5;
}

.tray-item.black-one .tray-cta:hover,.tray-item.black-one-bfc .tray-cta:hover{
	cursor: pointer;
	box-shadow: 1px 3px 8px #c9ffe98c;
}

.tray-item.black-one .tray-img{
	top: -20px;
	right: -63px;
}

.tray-item.black-one-bfc .tray-img{
	top: 20px;
	right: 28px;
	z-index: 1;
	height: 500px;
}


.high-fedility-new{
	display: grid;
    grid-template-columns: auto auto;
    width: 100%;
    grid-column-gap: 20px;
    grid-row-gap: 50px;
    margin-top: 25px;
}

.high-fedility-mobile{
	display: grid;
    grid-template-columns: auto auto auto;
    width: 100%;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    margin-top: 25px;
}

.high-fedility-new img{
	width: 100%;
	margin:0 auto;
	border-radius: 5px;
	box-shadow: 1px 2px 5px #444444;
}
.high-fedility-mobile img{
	width: 100%;
	margin:0 auto;
	border-radius: 5px;
	box-shadow: 1px 2px 5px #444444;
}

/*CASE STUDY PAGE ENDS*/


.case-study-section-new{
	margin-top: 50px;
}

.section-title-new{
	position: relative;
}

.slant{
	fill:#383838;
	position: absolute;
	height: 100px;
	width: 100%;
	bottom: 0px;
	left: 0;
}
.slant1{
	fill:#383838;
	position: absolute;
	height: 100px;
	width: 100%;
	bottom: -22px;
	left: 0;
}
.slant2{
	fill:#383838;
	/*position: absolute;*/
	height: 100px;
	width: 100%;
	bottom: 0;
	left: 0;
	transform: rotate(180deg);
}

.project-description{
	background-color: #383838;
	padding: 50px 400px;
	display: flex;
	position: relative;
	z-index: 9;
}
.project-description.hackthon_des{
	background-color: #383838;
	padding: 50px 400px;
	display: grid;
	grid-template-columns: 30fr 70fr;
    grid-row-gap: 80px;
}

.new-title h4{
	font-size: 62px;
	color: white;
	font-family: "Gemunu-XBold", Helvatica , sans-serif;
	text-transform: uppercase;
}

.new-title h6{
	font-family: "Gemunu-Regular", Helvatica , sans-serif;
	font-size: 22px;
	color: #a5a5a5;
	text-transform: uppercase;
}

.project-description-content{
	padding-left: 50px;
	font-family: DMsans-Regular;
	font-size: 18px;
	color: silver;
}

.project-description-content p {
	margin-bottom: 15px;
}

.persona-new{
	padding: 50px 400px;
}

.persona-content{
	display: flex;
	margin-top: 40px;
}

.persona-image{
	width: 220px;
}

.persona-image img{
	width: 100%;
	border-radius: 9px;
}

.persona-image p{
	font-size: 32px;
	color: #e3e3e3;
	font-family: DMsans-Regular;
	text-transform: uppercase;
	text-align: center;
}

.persona-details{
	margin-left: 30px;
}

.persona-details h4{
	font-family: DMsans-Regular;
	font-size: 32px;
	color: #e3e3e3;
}

.persona-details p{
	font-size: 18px;
	color: #c0c0c0;
}

.slant3{
	fill:#1b1b1b;
	/*position: absolute;*/
	height: 58px;
	width: 100%;
	bottom: 0;
	left: 0;
	/*transform: rotate(180deg);*/
}

.user-flow-new{
	padding: 50px 400px;
}

.typography-new{
	margin-top: -4px;
	padding: 50px 400px;
	background-color: #1b1b1b;
}

.colors-new{
	padding: 50px 400px;
	background-color: #1b1b1b;
}

.view-website-button{
	width: 100%;
	padding: 100px 25px;
	background: #defbf7;
	text-align: center;
	/*overflow: hidden;*/
	position: relative;
}

.view-website-button a{
	font-size: 24px;
	color: #48ad9d;
	text-decoration: none;
	font-family: "DMsans-Regular";
	border: 2px solid #48ad9d;
	padding:10px 25px;
	border-radius: 9px;
	z-index: 9;
}

.view-website-button a:hover{
	background-color: #d5f9f4;
	box-shadow: 0 2px 3px #86c2ba;
	cursor: pointer;
}

.slant4{
	fill:#defbf7;
	background: #1b1b1b;
	/*position: absolute;*/
	height: 58px;
	width: 100%;
	bottom: 0;
	left: 0;
	margin-bottom: -4px; 
	/*transform: rotate(180deg);*/
}

.section-title-new{
 padding: 40px 400px;	
}

.banner-bfc{
	display: flex;
	height: 613px;
	position: relative;
}

.banner-bfc div:first-child{
	position: absolute;
	left: -450px;
	width: 1200px;

}

.banner-bfc div:last-child{
	z-index: 9;
	position: absolute;
	right: -15px;
	color: white;
	/*margin-left: 500px;*/
	top: 50%;
    transform: translateY(-95%);
}

.banner-bfc h3, .banner-bfc h2, .banner-bfc h6{
	font-family: "Gemunu-XBold", Helvatica , sans-serif;
}

.banner-bfc h3{
	font-size: 34px;
}

.banner-bfc h2{
	font-size: 75px;
	color: #48ad9d
}

.banner-bfc h6{
	font-size: 22px;
    color: #a5a5a5;
	font-family: "Gemunu-Regular", Helvatica , sans-serif;
}

.bottom_img_bfc{
	position: absolute;
	height: 352px;
    top: -25px;
}


.banner-stayfit{
	display: flex;
	height: 641px;
	position: relative;
}

.banner-stayfit div:first-child{
	position: absolute;
	left: -319px;
	width: 1200px;

}

.banner-stayfit div:last-child{
	z-index: 9;
	position: absolute;
	right: -15px;
	color: white;
	/*margin-left: 500px;*/
	top: 50%;
    transform: translateY(-95%);
}

.banner-stayfit h3, .banner-stayfit h2, .banner-stayfit h6{
	font-family: "Gemunu-XBold", Helvatica , sans-serif;
}

.banner-stayfit h3{
	font-size: 34px;
}

.banner-stayfit h2{
	font-size: 75px;
	color: #48ad9d
}

.banner-stayfit h6{
	font-size: 22px;
    color: #a5a5a5;
	font-family: "Gemunu-Regular", Helvatica , sans-serif;
}

.persona-content.reverse{
	flex-direction: row-reverse;
}

.persona-content.reverse .persona-details{
	margin-right: 30px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.persona-details p{
	width: 300px;
	font-family: "DMSans-Regular", Helvatica , sans-serif;
}

.persona-content.reverse .persona-details p{
	text-align: right;
	margin-right: 0!important;
}

.bottom_img_stayfit {
    position: absolute;
    height: 539px;
    top: -55px;
}

.bottom_img_wps{
	position: absolute;
    height: 484px;
    top: -204px;
    right: 150px;
}

.bottom_img_spydus{
	position: absolute;
    height: 389px;
    top: -158px;
    right: 82px;
}

.bottom_img_spydus_mobile{
	position: absolute;
    height: 517px;
    top: -286px;
    right: 260px;
}


.bottom_img_esociety {
    position: absolute;
    height: 539px;
    top: -47px;
    transform: rotate(-2deg);
    right: 0;
}

.view-website-button.stayfit{
	margin-bottom: 253px;
}

.view-website-button.esociety{
	margin-bottom: 253px;
}

.mobile-wireframe-new{
	display: flex;
	width: 100%;
	margin-top: 25px;
}

.mobile-wireframe-new img{
	width: 220px;
	margin:0 auto;
	border-radius: 5px;
	box-shadow: 1px 2px 5px #444444;
}

.pb-100{
	padding-bottom: 100px;
}

.banner-stayfit.esociety h2{
	color: #62a7e3;
}

.web-banner-bg{
	background-color: #383838;
	padding: 40px 400px;
}

.fbpost-new{
	width: 100%;
	margin-bottom: 100px;
	margin-top: 50px;
	display: flex;
    justify-content: space-between;
}

.banner-holder-new > div{
	display: flex;
	align-items: flex-start;
	width: 100%;
	flex-direction: row;
}

.banner-holder-new img{
	width: 100%;
}

.webandmobile > div{ 
	display: flex;
	flex-direction: column-reverse;
	padding: 25px;
}

.webandmobile > div:first-child{
	width: 215%;
}

.emailer-holder-new{
	display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 25px;
}

.webandmobile > div > p{
	font-family: "Gemunu-Regular", Helvatica , sans-serif;
    font-size: 22px;
    color: #a5a5a5;
    text-transform: uppercase;
    margin-top: 10px;
}

.emailer-holder-new img{
	width: 45%;
}

.logo-design,
.flyer{
	margin-top: 25px;
}

.view-website-button button {
    font-size: 24px;
    color: #48ad9d;
    text-decoration: none;
    font-family: "DMsans-Regular";
    border: 2px solid #48ad9d;
    padding: 10px 25px;
    border-radius: 9px;
    z-index: 9;
}

.view-website-button button:hover{
	cursor: not-allowed;
}

.nda-text{
	font-size: 12px;
	font-family: "DMsans-Regular";
	color: #9d9d9d;
	margin-top: 9px;
}

.bottom_img_rems {
    position: absolute;
    height: 569px;
    top: -302px;
    right: 82px;
}


.banner-stayfit.rems{
    height: 588px;
}

.expertise {
    padding: 0 100px;
    display: block;
    margin-top: 50px;
    margin-bottom: 150px;
}

.expert-img-container{
	text-align: center;
	margin-top: -140px;
}

.expert-info{
	width: 100%;
}

.bottom_img_t2c_mobile {
    position: absolute;
    height: 517px;
    top: -261px;
    right: 100px;
}

.duo_pro_btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 15px;
}


/*PAIN POINT*/

.pp_grid{
	display: grid;
  	grid-template-columns: repeat(3, minmax(280px, 1fr));
 	grid-gap: 30px;
  	align-items: stretch;
  	position: relative;
}

.pp_card{
	background-color: #333333;
	padding: 30px;
	border-radius: 10px;
	font-family: 'DMsans-Regular',sans-serif;
	font-size: 18px;
	transition: background 0.5s ease-in-out, transform 0.3s ease-in-out;
	position: relative;
	margin-top: 50px;
}

.pp_card:hover{
	background-image: linear-gradient(to right, rgba(67,233,123,0.5), rgba(56,249,215,0.5));
	transform: translateY(-4px);
	backdrop-filter: blur(8px); /* Apply blur effect for glass effect */
	border-bottom: 4px solid var(--circuit-green);
	box-shadow: 0px 2px 24px -10px #53b691;
}

.pp_card p{
	color: white;
	font-size: 14px;
	font-family: 'DMSans-Regular', sans-serif;
}

/*.pp_card:hover p{
	color: #333333;
}*/

.pp_card:hover span{
	color: #61ffc6;
}

.pp_card_title{
	font-family: 'Gemunu-Medium',sans-serif;
	font-size: 22px;
	display: block;
	color: #a4a4a4;
	margin-top: 10px;
}

.bulb_idea {
  color: #838383; /* Default color */
  display: inline-block;
  position: absolute;
  top: -10px;
  right: 50%;
  text-align: center;
  transition: transform 0.3s ease, filter 0.3s ease, color 0.3s ease; /* Smooth scaling, glow, and color */
  transform: translateX(50%);
}

.bulb_idea svg{
	height: 32px;
	width: 32px;
}

.pp_card:hover .bulb_idea {
  filter: drop-shadow(0 0 10px rgba(67, 233, 123, 0.8)); /* Add green glow effect */
  color: rgba(67, 233, 123, 1); /* Change icon color to green */
}


.blob {
  position: absolute;
  opacity: 0.5;
  width: 400px;
  aspect-ratio: 1/1;
  animation: animate 10s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite
    alternate forwards;
  filter: blur(40px);
  z-index: -1;
  background: linear-gradient( 47deg, #37ed96 21%, #20f6a9 67%, rgb(55 149 151) 81% );

  /*  Optional  */
     box-shadow: inset 50px 50px 17px 0px #58ff61, inset 100px 100px 17px 0px #373c3b; 
}

@keyframes animate {
  0% {
    translate: 40% -25%;
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
  }
  50% {
    translate: 0% 13%;
    border-radius: 20% 71% 47% 70% / 81% 15% 22% 54%;
    rotate: 41deg;
    scale: 1.15;
  }
  100% {
    translate: -45% 39%;
    border-radius: 100% 75% 92% 74% / 60% 80% 30% 70%;
    rotate: -60deg;
    scale: 1.05;
  }
}


/*PAIN POINT end*/

/*other*/

.tray-item.first.ds_tray .tray-img {
    left: -242px;
    top: -55px;
    rotate: -25deg;
}

.bottom_img_watch{
	height: 300px;
    position: absolute;
    left: 0;
    top: -50px;
}


.tray-img2{
	rotate: 25deg;
	position: absolute;
	right: -10px;
}

.tray-img3{
	position: absolute;
    right: 0px;
    top: 0px;
    width: 835px;
}
	

/*other end*/



/*--------------------------------------------------1920 LAPTOP MEDIA QUERY START--------------------------------------------------*/

@media only screen and (min-device-width : 1530px) and (max-device-width : 1600px) {
	nav{
		padding: 10px 50px;
	}

	.logo{
		height: 55px;
	}

	.banner-img-hw{
		height: 280px;
	}

	.left-hero h2{
		font-size: 45px;
	}

	.ultimate-circuit{
		height: 30px;
	}

	.left-hero h4{
		font-size: 24px;
	}

	.left-hero > span{
		font-size: 16px;
	}

	.btn{
		height: 35px;
	    width: 155px;
	    font-size: 16px;
	}

	.portfolio-showcase{
		padding: 0 50px;
		grid-template-columns: repeat(3, 270px);
	}

	.hovereffect a.info{
		margin: 88px 0 0;
	}

	.hovereffect h2 {
		font-size: 16px;
	}

	.skills,
	.contact-section{
		padding: 0 50px;
		overflow: hidden;
	}

	.contact-section{
		padding-bottom: 100px;
	}

	.bar-fill, .bar-bg{
		height: 16px;
	}

	.bar-bg{
		width: 310px;
	}

	.contact-flex > img{
		height: 200px;
	}

	.contact-item {
		font-size: 16px;
	}

	.contact-item > img {
		height: 22px;
	}

	.big-circuit-design.two {
	    height: 150px;
	    right: -6px;
	}

	.big-circuit-design.three {
	    height: 28px;
	}

	.logo-inspi{
		height: 450px;
	}

	.mobile-wireframe img{
		height: 320px;
	}

	.style-guide-img.stayfit{
		width: 650px;
	}

	.video_esoceity{
		width: 80%
	}

	.banner-img-me{
		height: 910px;
	}

	.banner-img-me{
		position: absolute;
		right: 0;
	}

	.tray-img{
		z-index: 1;
		height: 140%;
	}

	.tray-item > div{
		z-index: 2;
	}

	.tray-cta{
		background-color: #ffffff;
		font-size: 16px;
		margin-top: 9px;
	}

	.tray-item.first .tray-img{
	    left: -154px;
	    top: -48px;
	}

	.tray-title{
		font-size: 75px;
	}

	.tray-item.first.rems_tray .tray-img {
    	left: -356px;
	}

	.tray-subtitle{
		font-size: 24px;
		margin-top: 10px;
	}

	.section-title-new{
		padding: 40px 46px;
	}

	.project-description,
	.persona-new,
	.user-flow-new,
	.typography-new,
	.colors-new,
	.web-banner-bg,
	.section-title-new{
		padding: 40px 250px;
	}

	.banner-stayfit div:first-child{
	    left: -62px;
	    width: 1025px;
	}

	.banner-stayfit div:last-child{
	    right: 53px;
	}

	.persona-image img{
	    height: 315px;
	    width: auto;
	}

	.persona-image{
		/*width: auto;*/
		width: min-width;
	}

	.fbpost-new img{
	    width: 46%;
	}

	.video_wps,
	.video_nutrichef {
	    width: 55%;
	}

	.video_rems{
		width: 65%;
	}

	.banner-stayfit.wps,
	.banner-stayfit.nutrichef {
	    height: 500px;
	}

	.bottom_img_wps {
	    height: 381px;
	    top: -101px;
	    right: 86px;
	}

	.bottom_img_spydus_mobile{
		position: absolute;
	    height: 389px;
	    top: -158px;
	    right: 82px;
	}

	.video_spydus_mobile{
		width:65%;
	}

	.project-description.hackthon_des{
		padding: 50px 250px;
	}

	.persona-image{
		display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
	}

	.banner-stayfit.rems {
	    height: 473px;
	}

	.expertise {
	    padding: 0 50px;
	    display: block;
	    margin-top: 100px;
	    margin-bottom: 100px;
	}

	.video_bfc {
	    width: 76%;
	}

	.video_nutrichef {
	    width: 73%;
	}

	.video_spydus{
		width: 71%;
	}

	.bottom_img_spydus {
	    height: 350px;
	    top: -129px;
    }

    .bottom_img_rems {
	    height: 509px;
	    top: -241px;
	    right: 20px;
	}

	.tray-img2 {
	    height: 350px;
	    top: 45px;
	}

	.tray-img3 {
	    top: 110px;
	    width: 650px;
	}
}


/*--------------------------------------------------1920 LAPTOP MEDIA QUERY START--------------------------------------------------*/


/*--------------------------------------------------LAPTOP MEDIA QUERY START--------------------------------------------------*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1440px)  {
	nav{
		padding: 10px 50px;
	}

	.logo{
		height: 55px;
	}

	.banner-img-hw{
		height: 280px;
	}

	.left-hero h2{
		font-size: 45px;
	}

	.ultimate-circuit{
		height: 30px;
	}

	.left-hero h4{
		font-size: 24px;
	}

	.left-hero > span{
		font-size: 16px;
	}

	.btn{
		height: 35px;
	    width: 155px;
	    font-size: 16px;
	}

	.portfolio-showcase{
		padding: 0 50px;
		grid-template-columns: repeat(3, 270px);
	}

	.hovereffect a.info{
		margin: 88px 0 0;
	}

	.hovereffect h2 {
		font-size: 16px;
	}

	.skills,
	.contact-section{
		padding: 0 50px;
		overflow: hidden;
	}

	.contact-section{
		padding-bottom: 100px;
	}

	.bar-fill, .bar-bg{
		height: 16px;
	}

	.bar-bg{
		width: 310px;
	}

	.contact-flex > img{
		height: 200px;
	}

	.contact-item {
		font-size: 16px;
	}

	.contact-item > img {
		height: 22px;
	}

	.big-circuit-design.two {
	    height: 150px;
	    right: -6px;
	}

	.big-circuit-design.three {
	    height: 28px;
	}

	.logo-inspi{
		height: 450px;
	}

	.mobile-wireframe img{
		height: 320px;
	}

	.style-guide-img.stayfit{
		width: 650px;
	}

	.video_esoceity{
		width: 80%
	}

	.banner-img-me{
		height: 910px;
	}

	.banner-img-me{
		position: absolute;
		right: 0;
	}

	.tray-img{
		z-index: 1;
		height: 140%;
	}

	.tray-item > div{
		z-index: 2;
	}

	.tray-cta{
		background-color: #ffffff;
		font-size: 16px;
		margin-top: 9px;
	}

	.tray-item.first .tray-img{
	    left: -154px;
	    top: -48px;
	}

	.tray-title{
		font-size: 75px;
	}

	.tray-item.first.rems_tray .tray-img {
    	left: -356px;
	}

	.tray-subtitle{
		font-size: 24px;
		margin-top: 10px;
	}

	.section-title-new{
		padding: 40px 46px;
	}

	.project-description,
	.persona-new,
	.user-flow-new,
	.typography-new,
	.colors-new,
	.web-banner-bg,
	.section-title-new{
		padding: 40px 250px;
	}

	.banner-stayfit div:first-child{
	    left: -62px;
	    width: 1025px;
	}

	.banner-stayfit div:last-child{
	    right: 53px;
	}

	.persona-image img{
	    height: 315px;
	    width: auto;
	}

	.persona-image{
		/*width: auto;*/
		width: min-width;
	}

	.fbpost-new img{
	    width: 46%;
	}

	.video_wps,
	.video_nutrichef {
	    width: 55%;
	}

	.video_rems{
		width: 49%;
	}

	.banner-stayfit.wps,
	.banner-stayfit.nutrichef {
	    height: 500px;
	}

	.bottom_img_wps {
	    height: 381px;
	    top: -101px;
	    right: 86px;
	}

	.bottom_img_spydus_mobile{
		position: absolute;
	    height: 389px;
	    top: -158px;
	    right: 82px;
	}

	.video_spydus_mobile{
		width:50%;
	}

	.project-description.hackthon_des{
		padding: 50px 250px;
	}

	.persona-image{
		display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
	}

	.banner-stayfit.rems {
	    height: 473px;
	}

	.expertise {
	    padding: 0 50px;
	    display: block;
	    margin-top: 100px;
	    margin-bottom: 100px;
	}

	.bottom_img_rems {
	    height: 488px;
	    top: -221px;
	    right: -31px;
	}

	.video_bfc {
	    width: 61%;
	}

	.banner-stayfit {
	    height: 425px;
	}

	.mobile-wireframe-new {
		column-gap: 10px;
	}

	.tray-img2 {
	    height: 350px;
	    top: 45px;
	}

	.tray-img3 {
	    top: 110px;
	    width: 650px;
	}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {

	.old-layout.mca {
	    width: 400px;
	    height: auto;
	}

	.details-text p {
		font-size: 16px;
	}

	.user-persona-grid{
		grid-gap: 25px;
		/*grid-template-columns: repeat(3, 200px)*/
	}

	.card-sorting-img{
		width: 600px;
	}

	.style-guide-img, .logo-inspi{
		width: 500px;
		height: auto;
	}

	.userflow.esociety{
		width: 690px;
	}
	.mobile-wireframe img{
		width: 150px;
		height: auto;
	}

	.user-persona-box img {
		height: 65px;
	}

	.persona{
		font-size: 12px;
	}

	.side-bar > a{
		font-size: 15px;
	}

	.fbpost-div > img,
	.emailer-div > img{
		width: 312px;
	}

	.video_esoceity{
		width: 100%
	}

	.section-title-new{
		padding: 40px 46px;
	}

	.project-description,
	.persona-new,
	.user-flow-new,
	.typography-new,
	.colors-new,
	.web-banner-bg{
		padding: 40px 50px;
	}

	.banner-stayfit div:first-child{
	    left: -62px;
	    width: 750px;
	}

	.banner-stayfit div:last-child{
	    right: 53px;
	}

	.persona-image img{
	    height: 250px;
	    width: auto;
	}

	.persona-image{
		width: auto;
	}

	.banner-stayfit{
		height: 480px;
	}

	.bottom_img_stayfit{
		height: 355px;
	}

	.view-website-button.stayfit{
		margin-bottom: 50px;
	}

	.view-website-button{
		padding: 71px 0px;
	}

	.banner-img-me {
	    height: 625px;
	}

	.portfolio-tray{
		padding: 0px 100px;
	}

	.tray-item {
		height: 275px;
	}

	.tray-item.first .tray-img{
		left: -79px;
		top: -21px;
	}

	.tray-item.black-one-bfc .tray-img{
		height: 248px;
	}

	.tray-img {
		height: 124%;
	}

	.tray-title{
		font-size: 45px;
	}

	.tray-cta{
		margin-top: 11px;
	}

	.tray-item.first.rems_tray .tray-img {
    	left: -356px;
	}

	.banner-bfc div:first-child {
		left: -180px;
		width: 730px;
	}

	.banner-bfc{
		height: 498px;
	}

	.slant1{
		bottom: 0;
	}

	.bottom_img_esociety{
		height: 245px;
	}

	.mobile-wireframe-new img {
		width: 165px;
	}

	.view-website-button.esociety{
		margin-bottom: 0;
	}

	.video_wps {
    	width: 58%;
	}

	.video_rems{
		width: 49%;
	}

	.project-description.hackthon_des{
		padding: 50px 250px;
	}

	.persona-image{
		display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
	}

	.banner-stayfit.rems {
	    height: 473px;
	}

	.expertise {
	    padding: 0 50px;
	    display: block;
	    margin-top: 100px;
	    margin-bottom: 100px;
	}

	.mobile-wireframe-new {
		column-gap: 10px;
	}

	.tray-img2 {
	    height: 350px;
	    top: 45px;
	}

	.tray-img3 {
	    top: 110px;
	    width: 650px;
	}

}

/*--------------------------------------------------LAPTOP MEDIA QUERY END--------------------------------------------------*/


/*--------------------------------------------------IPAD MEDIA QUERY START--------------------------------------------------*/


@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
 /*NAVIGATION*/	

	#nav-icon{
		display: inline-block;
		/*float: right;*/
		position: absolute;
	    right: 17px;
	    top: 13px;
	}

	nav{
		display: block;
		/*width: 100%;*/
		padding: 7px 9px;
	}

	.logo{
		display: inline-block;
		height: 35px;
	}

	.logo.desktop-logo{
		display: none;
	}

	.mobile-logo{
		display: inline-block;
	}

	.menu-items{
		display: none;
		text-align: center;
	}


	.menu-items li{
		margin-left: 0;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	/*NAVIGATION*/

	/*HERO*/

	.hero{
	    display: flex;
	    justify-content: space-evenly;
	    align-items: flex-start;
		padding: 0 15px;
    	height: auto;
    	margin-top: 50px;
    	margin-bottom: 100px;
	}

	.left-hero h2{
		font-size: 33px;
	}

	.ultimate-circuit {
	    height: 22px;
	}

	.left-hero h4{
		font-size: 18px;
		margin-top: 20px;
	}

	.left-hero p{
		font-size: 14px;
	}

	.left-hero > span{
		font-size: 10px;
	    width: 38%;
	}

	.bg-svg{
		display: none;
	}

	.banner-img{
		height: 250px;
	}

	.btn{
		font-size: 14px;
		padding: 4px 8px;
		height: 31px;
	}

	.banner-img-hw {
	    /*right: 101px;*/
	    width: 300px;
	    height: auto;
	    /*position: absolute;*/
	}

	/*HERO*/

	.portfolio-showcase{
	    padding: 0 15px;
		grid-gap: 20px; 
		grid-template-columns: repeat(3, auto);
	    justify-content: space-evenly;
	}

	.portfolio-item{
	    height: 190px;
	    width: 190px;
	}

	.hovereffect h2 {
		font-size: 12px;
	}

	.hovereffect a.info{
		margin: 15px 0 0;
	}


	.big-circuit-design.one{
		top: 30;
		left: -50px;
		height: 100px;
	}

	.skills{
		height: auto;
		padding: 0 15px;
		margin-bottom: 100px;
		overflow: hidden;
	}

	.bar-bg {
		width: 400px;
	}

	.bar-fill,
	.bar-bg{
		height: 13px;
	}
	
	.skill-text {
		font-size: 14px;
		width: 130px;
	}

	
	.skill-text > img{
		height: 45px;
	}

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

	.skill-item {
	    margin: 30px 0;
	}

	.contact-section{
		padding: 0 15px;
		overflow: hidden;
	}

	.contact-flex{
		flex-direction: column-reverse;
	}

	.contact-flex > img{
		width: 430px;
		margin-bottom: 50px;
		height: auto;
	}

	.big-circuit-design.two {
		height: 147px;
		right: -70px;
		top: 160px;
		transform: rotate(90deg);
	}

	.big-circuit-design.three{
		height: 22px;
	    right: -34px;
	    top: 220px;
	}

	.case-study-section{
		display: flex;
		flex-direction: column;
		padding: 10px 15px;
	}

	.side-bar{
		/*width: 100vw;
		height: 80px;
		position: fixed;
	    top: 27%;
        transform: none;
        flex-direction: row;*/
        display: none;
	}

	.side-bar > a{
		font-size: 9px;
		width: 50px;
		text-align: center;
	}

	.portfolio{
		min-height: auto;
		margin-bottom: 100px;
	}
	.case-study-content{
		margin: 50px 10px;
	}

	.fbpost-div > img, .emailer-div > img{
		width: 289px;
	}

	.video_esoceity{
		width: 100%
	}

	.banner-img-me{
		height: 470px;
	}

	.portfolio-tray{
		padding: 20px;
	}

	.tray-img{
		/*height: 70%;*/
		z-index: 1;
	}

	.tray-item {
		height: 222px;
	}

	.tray-item  div{
		z-index: 2;
	}

	.tray-title {
		font-size: 40px;
	}

	.tray-subtitle{
		font-size: 22px;
	}

	.tray-cta{
		font-size: 16px;
	}

	.tray-item.first .tray-img {
		left: -92px;
	}

	.banner-stayfit div:first-child{
		width: 575px;
	}

	.banner-stayfit h2,
	.banner-bfc h2{
		font-size: 40px;
	}

	.banner-stayfit h3,
	.banner-bfc h3{
		font-size: 24px;
	}

	.new-title h4{
		font-size: 40px;
	}

	.banner-stayfit {
	    height: 313px;
	}

	.persona-image img{
		height: 200px;
	}

	.persona-image p,
	.persona-details h4{
		font-size: 22px;
	}

	.project-description-content,
	.persona-details p{
		font-size: 14px;
	}

	.colors-new img{
		width: 100%;
	}

	.mobile-wireframe-new img {
	    width: 125px;
	}

	.bottom_img_bfc{
		height: 262px;
	}

	.banner-bfc div:first-child{
		width: 698px;
	}

	.expert-img-container {
	    text-align: center;
	    margin-top: -65px;
	}

	.video_spydus{
		width: 100%;
	}

	.tray-img2 {
	    right: -57px;
	    height: 235px;
	    top: 45px;
	}

	.tray-img3 {
	    top: 82px;
	    width: 323px;
	}


}


@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  
}

/*---------------------------------------------- MOBILE QUERY STARTS --------------------------------------------------------*/


@media only screen and (max-width:736px){

	.mobile-hide{
		display: none;
	}

	/*NAVIGATION*/	

	#nav-icon{
		display: inline-block;
		/*float: right;*/
		position: absolute;
	    right: 17px;
	    top: 13px;
	}

	nav{
		display: block;
		/*width: 100%;*/
		padding: 7px 9px;
	}

	.logo{
		display: inline-block;
		height: 35px;
	}

	.logo.desktop-logo{
		display: none;
	}

	.mobile-logo{
		display: inline-block;
	}

	.menu-items{
		display: none;
		text-align: center;
	}


	.menu-items li{
		margin-left: 0;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	/*NAVIGATION*/

	/*HERO*/

	.hero{
		display: block;
		padding: 0 15px;
    	height: auto;
    	margin-top: 94px;
    	margin-bottom: 85px;
	}



	.left-hero h2{
		font-size: 33px;
	}

	.ultimate-circuit {
	    height: 22px;
	}

	.left-hero h4{
		font-size: 18px;
		margin-top: 20px;
	}

	.left-hero p{
		font-size: 14px;
	}

	.left-hero > span{
		font-size: 10px;
	    width: 58%;
	}

	.bg-svg{
		display: none;
	}

	.banner-img{
		height: 250px;
	}

	.btn{
		font-size: 14px;
		padding: 4px 8px;
		height: 31px;
	}

	.banner-img-hw{
		width: 100%;
		height: auto;
	}

	/*HERO*/

	.portfolio-showcase{
	    padding: 0 15px;
		grid-gap: 40px; 
		grid-template-columns: repeat(2, auto);
		justify-content: space-between;
	}

	.portfolio{
		min-height: auto;
		margin-bottom: 85px;
	}

	.portfolio-item{
	    height: 155px;
	    width: 155px;
	}

	.hovereffect h2 {
		font-size: 12px;
	}

	.hovereffect a.info{
		margin: 15px 0 0;
	}


	.big-circuit-design.one{
		top: 30;
		left: -50px;
		height: 100px;
	}

	.skills{
		min-height: auto;
		padding: 0 15px;
		margin-bottom: 85px;
		overflow: hidden;
	}

	.bar-bg {
		width: 200px;
	}

	.bar-fill,
	.bar-bg{
		height: 13px;
	}
	
	.skill-text {
		font-size: 12px;
	}
	
	.skill-text > img{
		height: 24px;
	}

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

	.skill-item {
	    margin: 30px 0;
	}

	.contact-section{
		padding: 0 15px;
		overflow: hidden;
	}

	.contact-flex{
		flex-direction: column-reverse;
	}

	.contact-flex > img{
		width: 100%;
	}

	.big-circuit-design.two {
		height: 147px;
		right: -70px;
		top: 160px;
		transform: rotate(90deg);
	}

	.big-circuit-design.three{
		height: 22px;
	    right: -34px;
	    top: 220px;
	}

	.case-study-section{
		display: flex;
		flex-direction: column;
		padding: 10px 15px;
	}

	.side-bar{
		/*width: 100vw;
		height: 80px;
		position: fixed;
	    top: 27%;
        transform: none;
        flex-direction: row;*/
        display: none;
	}
	.case-study-title{
		margin: 50px 0 25px 0;
	}

	.case-study-content{
		margin-top: 50px;
	}

	.side-bar > a{
		font-size: 9px;
		width: 50px;
		text-align: center;
	}
	.old-layout.mca{
		height: auto;
		width: 100%;
	}
	.details-div{
		flex-direction: column-reverse;
	}
	.details-text p{
		margin-left: 0;
	}

	.user-persona-grid{
		grid-template-columns: repeat(1, auto)
	}

	.user-persona-grid{
		grid-gap: 40px;
	}

	.card-sorting-img,
	.style-guide-img,
	.userflow.esociety,
	.logo-inspi,
	.style-guide-img.stayfit{
		width: 100%
	}

	.mobile-wireframe img {
		height: 250px;
	}

	.mobile-wireframe{
		grid-gap: 40px;
		grid-template-columns: repeat(2,auto);
	}

	.fbpost-div > img,
	.emailer-div > img{
		width: 100%;
		margin-bottom: 40px;
	}

	.web-banner-div > div{
		flex-direction: column;
	}

	.web-banner-div > div > div:first-child,
	.web-banner-div > div > div:nth-child(2){
		margin-right: 0;
		width: 100%;
		margin: 15px 0;
	}

	.emailer-div img{
		margin-right: 0;
	}

	.logo-design{
		display: grid;
		grid-gap: 25px;
		grid-template-columns: repeat(2,auto);
		justify-content: center;
	}

	.video_esoceity{
		width: 100%
	}


	.banner-img-me{
		height: 470px;
	}

	.portfolio-tray{
		padding: 20px;
	}

	.tray-img{
		/*height: 70%;*/
		z-index: 1;
	}

	.tray-item {
		height: 180px;
	}

	.tray-item  div{
		z-index: 2;
	}

	.tray-title {
		font-size: 29px;
	}

	.tray-subtitle{
		font-size: 18px;
	}

	.tray-cta{
		font-size: 12px;
		padding: 5px 10px;
		background-color: white;
		margin-top: 8px;
	}

	.tray-item.first .tray-img {
		left: -92px;
	}
	.tray-item.second .tray-img {
		top: -5px;
	}

	.tray-subtitle{
		margin-top: 15px;
	}

	.banner-img-me {
	    z-index: -1;
	    height: 248px;
	    opacity: 22%;
	    right: 0;
	}

	.section-title-new{
		padding: 10px 9px;
	}

	.tray-item.black-one-bfc .tray-img{
	    right: -24px;
	    height: 138px;
	}

	.tray-item.first.rems_tray .tray-img {
	    left: -177px;
	}

	.banner-stayfit div:first-child,
	.banner-bfc div:first-child{
		position: relative;
	    left: 0;
	    width: 100%;
	}

	.banner-stayfit div:last-child,
	.banner-bfc div:last-child{
	    position: relative;
	    top: 0;
	    right: 0; 
	    transform: none;
	    text-align: center;
	}

	.banner-stayfit h2,
	.banner-bfc h2{
		font-size: 44px;
	}

	.banner-stayfit h3,
	.banner-bfc h3{
		font-size: 24px;
	}

	.banner-stayfit,
	.banner-bfc {
		height: 408px;
	}

	.banner-stayfit,
	.project-description,
	.banner-bfc{
		flex-direction: column;
	}

	.project-description,
	.persona-new,
	.user-flow-new,
	.colors-new,
	.typography-new,
	.web-banner-bg{
		padding: 25px 9px;
	}

	.colors-new img{
		width: 100%;
	}

	.new-title h4{
		font-size: 30px;
	}

	.new-title h6 {
		font-size: 20px;
	}

	.project-description-content{
		padding-left: 0;
		margin-top: 15px;
	}

	.slant,
	.slant1,
	.slant2,
	.slant4 {
		height: 50px;
	}

	.slant1{
	    bottom: 0;
	}

	.banner-holder-new > div{
		flex-direction: column;
	}

	.webandmobile > div:first-child{
		width: 100%;
	}

	.webandmobile > div{
		padding: 0;
		margin-bottom: 15px;
		margin-top: 15px;
	}

	.persona-image{
		/*width: auto;*/
		width: min-width;
	}

	.persona-image > img{
		height: 150px;
		width: auto;
	}

	.persona-image p,
	.persona-details h4{
		font-size: 20px;
	}

	.persona-details,
	.persona-details p{
		width: 100%;
	}

	.project-description-content p,
	.persona-details p{
		font-size: 14px;
	}

	.mobile-wireframe-new img{
		width: 100px;
	}

	.mobile-wireframe-new{
		flex-wrap: wrap;
		justify-content: center;
	}

	.mobile-wireframe-new img{
		margin: 15px;
	}

	.view-website-button{
		    padding: 50px 15px;	
	}

	.view-website-button a{
		font-size: 18px;
	}

	.bottom_img_stayfit,
	.bottom_img_bfc,
	.bottom_img_esociety{
		height: 150px;
		display: none;
	}

	.view-website-button.stayfit,
	.view-website-button.esociety{
		margin-bottom: 0
	}

	.fbpost-new img{
		width: 100%;
		margin-bottom: 15px;
	}

	.fbpost-new{
	    flex-direction: column;
	}

	.logo-design img{
		margin-right: 0;
	}
	.video_nutrichef,
	.video_wps,
	.video_rems{
		width: 100%
	}

	.high-fedility-new{
		grid-template-columns: auto;
	}

	.video_spydus_mobile{
		width: 100%;
	}

	.project-description.hackthon_des{
		padding: 50px 9px;
		grid-template-columns: auto;
	    grid-row-gap: 5px;
	}

	.project-description.hackthon_des .project-description-content{
		margin-bottom: 50px;
	}

	.high-fedility-mobile{
		grid-template-columns: auto auto;
		grid-column-gap: 12px;
	    grid-row-gap: 12px;
	}

	.video_spydus{
		width: 100%;
	}

	.expert-img-container {
	    margin-top: -40px;
	}

	.expertise {
	    padding: 0 9px;
	    margin-top: 0;
	    margin-bottom: 50px;
	}

	.video_t2c {
	    width: 100%;
	    margin-bottom: 50px;
	}

	.duo_pro_btn {
	    flex-direction: column;
	    row-gap: 15px;
	}

	.pp_grid{
		display: block;
	}

	.bottom_img_watch {
	    height: 180px;
	    position: absolute;
	    left: -100px;
	    top: -78px;
	}

	.tray-img2 {
	    rotate: 25deg;
	    position: absolute;
	    right: -10px;
	    height: 60%;
	    top: 36px;
	}

	.tray-img3 {
		width: 180px;
	}


}




/*---------------------------------------------- MOBILE QUERY ENDS --------------------------------------------------------*/