/* ----------------------------------------------------------------

	Canvas: Interior Design

-----------------------------------------------------------------*/



:root {

	--cnvs-themecolor: #a6774e;

	--cnvs-themecolor-rgb: 166, 119, 78;



	--cnvs-body-font: 'Rubik', sans-serif;

	--cnvs-primary-font: 'Rubik', sans-serif;

	--cnvs-secondary-font: 'Playfair Display', serif;

}



p { font-weight: 300; }



#header {

	--cnvs-primary-menu-font-weight: 500;

	--cnvs-primary-menu-font-size:	1rem;

	--cnvs-primary-menu-tt:	none;

	--cnvs-primary-menu-ls:	0;

	--cnvs-primary-menu-submenu-font-size:	0.875rem;

	--cnvs-primary-menu-submenu-font-weight:	400;

	--cnvs-primary-menu-submenu-hover-font-weight: 500;

	--cnvs-primary-menu-submenu-tt:	none;

}



#header {

	--cnvs-primary-menu-color: #525975;

	--cnvs-primary-menu-font-size: 16px;

	--cnvs-primary-menu-font-weight: 400;

	--cnvs-primary-menu-ls: 1px;



	--cnvs-primary-menu-submenu-font-size: 14px;

	--cnvs-primary-menu-submenu-font-weight: 400 !important;

	--cnvs-primary-menu-submenu-color: #525975;

	--cnvs-primary-menu-submenu-hover-bg: transparent;

}



#side-panel { --cnvs-side-panel-bg: #FFF; }



body.side-panel-open #side-panel {

	-webkit-box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

	-moz-box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

	box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

}



.emphasis-title h2 {

	font-size: 48px;

}



.emphasis-title p {

	font-size: 18px;

	font-weight: 400;

	color: #525975;

}



/* ----- Hero Widget ----- */

#widget-subscribe-form {

	display: block;

	padding: 8px;

	background-color: #FFF;

	border: 1px solid #EEE;

	border-radius: 3px;

	box-shadow: 0 0 30px 4px rgba(0,0,0,0.15);

	transition: box-shadow .4s linear;

}



#widget-subscribe-form:hover { box-shadow: 0 0 42px 4px rgba(0,0,0,.3) !important; }



.input-lg { height: 50px; }





@media (min-width: 992px) {



	.sub-menu-container:not(.mega-menu-column) {

		width: 260px;

		padding: 20px;

		border: transparent !important;

		box-shadow: 0px 20px 41px 1px rgba(0,0,0,0.1);

	}



	.toggle-bg .toggle-icon i {

		width: 1.25rem;

		font-size: 1.25rem;

	}



	.toggle-bg .toggle-header {

		background-color: #F2F6FA;

		padding: 1rem 1.5rem;

		align-items: center;

	}



	.toggle-bg .toggle-content {

		background-color: #F2F6FA;

		font-weight: 400;

		font-size: 1rem;

		padding: 0 1.5rem 1.5rem;

		color: #888;

		line-height: 1.7;

	}



	.toggle-bg .toggle-header .toggle-icon {

		-webkit-transition: transform .25s ease;

		-o-transition: transform .25s ease;

		transition: transform .25s ease;

	}



	.toggle-bg.toggle-active .toggle-header .toggle-icon {

		-webkit-transform: rotate(45deg);

		-ms-transform: rotate(45deg);

		-o-transform: rotate(45deg);

		transform: rotate(45deg);

		color: var(--cnvs-themecolor);

	}

}





.portfolio.gutter-interior-design {

	margin-right: -8px;

	margin-left: -8px;

	margin-bottom: -16px;

}



.portfolio.gutter-interior-design > .col,

.portfolio.gutter-interior-design > [class*="col-"] {

	padding-right: 8px;

	padding-left: 8px;

	padding-bottom: 16px;

}





.customers-count { border-right: 1px solid rgba(0, 0, 0, 0.1); }



.customers-count .counter {

	font-family: var(--cnvs-secondary-font);

	font-weight: 700;

	color: #a6774e;

	font-size: 64px;

	line-height: 1.2;

}



.customers-count p {

	font-size: 20px;

	margin: 8px 0 0;

}



.quote p { font-size: 20px; }





.heading-block h2 + span {

	font-size: 18px;

	color: #999 !important;

}



/* ----- | Story-Box | ----- */

.story-box {

	display: -ms-flexbox;

	display: flex;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap;

	cursor: pointer;

}



.story-box .story-box-image {

	width: 70%;

	height: 500px;

	z-index: 2;

	overflow: hidden;

	-ms-flex-preferred-size: auto;

	flex-basis: auto;

}



.story-box .story-box-image img {

	display: block;

	height: auto;

	width: 100%;

	opacity: 1;

	transition: opacity .3s ease;

}



.story-box:hover .story-box-image img {

	opacity: .9;

}



.story-box .story-box-info {

	box-sizing: border-box;

	width: 50%;

	height: 430px;

	padding: 60px;

	margin: 35px 0 0 -20%;

	background: #fff;

	z-index: 4;

	box-shadow: 0 10px 45px rgba(0,0,0,.1);

	transition: all ease-in .3s;

	-ms-flex-preferred-size: auto;

	flex-basis: auto;

}



.story-box.description-left .story-box-info {

	-ms-flex-order: -1;

	order: -1;

	margin: 35px -20% 0 0;

}



.story-box .story-box-info .story-title {

	font-family: var(--cnvs-secondary-font);

	font-size: 26px;

	line-height: 1.4;

	font-weight: 700;

	letter-spacing: 0;

	color: #1d2c4c;

}



.story-box .story-box-info .story-box-content p {

	font-size: 15px;

	font-weight: 300;

	color: #666;

	line-height: 16px;

}



.story-box .story-box-info .story-box-content a {

	font-size: 16px;

	text-decoration: underline !important;

}



/* ----- Story-Box Responsive ----- */

@media (max-width: 991px) {



	.story-box .story-box-image {

		height: auto;

		width: 100%;

		height: 400px;

		-ms-flex-order: -1;

		order: -1;

	}



	.story-box.description-left .story-box-info {

		-ms-flex-order: -1;

		order: -1;

		margin: 35px -20% 0 0;

	}



	.story-box.description-left .story-box-info { margin: -40px 5% 0; }



	.story-box .story-box-info {

		max-width: 90%;

		height: auto;

		-ms-flex-preferred-size: 90%;

		flex-basis: 90%;

		margin: -40px 5% 0;

	}

}





@media (max-width: 767px) {



	.story-box.description-left .story-box-info { margin: -100px 5% 0; }

	.story-box .story-box-info {

		padding: 35px;

		text-align: center;

		margin: -100px 5% 0;

	}

	.customers-count { border-right: none }

}



@media (max-width: 479px) {



	.story-box .story-box-info {

		width: 100%;

		padding: 15px;

		text-align: center;

		margin: -200px 5% 0;

	}

	.story-box.description-left .story-box-info { margin: -200px 5% 0; }



	ul.tab-nav:not(.tab-nav-lg) li a i {display: none;}

}





/* ----- Tab ----- */



#demo-interior-tab.nav-tabs {

	--bs-nav-tabs-border-width: 0px;

	--bs-nav-link-color: #111;

	--bs-nav-link-hover-color: var(--cnvs-themecolor);

}



#demo-interior-tab.nav-tabs .nav-item .nav-link {

	position: relative;

	font-size: 15px;

	font-weight: 400;

	padding: 0 0 20px 0;

}



#demo-interior-tab.nav-tabs .nav-item .nav-link i {

	display: block;

	font-size: 38px;

	margin: 0 0 10px 0;

	color: var(--bs-nav-link-hover-color);

}



#demo-interior-tab.nav-tabs .nav-item .nav-link.active {

	top: 0;

}



#demo-interior-tab.nav-tabs .nav-item .nav-link.active i {

	color: var(--bs-nav-link-hover-color);

}



#demo-interior-tab.nav-tabs .nav-item .nav-link.active::after {

	content: '';

	position: absolute;

	width: 6px;

	height: 6px;

	bottom: 0;

	left: 50%;

	margin-left: -3px;

	border-radius: 50%;

	background: var(--bs-nav-link-hover-color);

}





/* ----- Review ----- */

.review-row {

	padding-bottom: 24px;

	border-bottom: 1px solid #EEE;

}



.review-row h6 {

	font-size: 18px;

	font-weight: 400;

	color: #1d2c4c;

	margin-bottom: 0;

}



.review {

	border-bottom: 1px solid hsla(60,1%,75%,.3);

	padding-bottom: 52px;

	padding-top: 52px;

}



.review-company {

	display: block;

	font-size: 17px;

	font-weight: 500;

	color: #1d2c4c;

}



.review-id {

	color: #AAA;

	font-weight: 300;

	font-size: 16px;

}



.rating-stars {

	margin: 20px 0;

}



.rating-stars i {

	font-size: 24px;

	margin: 0 2px;

	color: gold;

}



.review-date {

	font-size: 16px;

	font-weight: 300;

	line-height: 1.6;

	margin-bottom: 10px;

}



.review-title h3::before {

	content: "\F6B0";

	font-family: 'bootstrap-icons';

	position: absolute;

	top: -5px;

	left: -70px;

	height: 60px;

	font-size: 60px;

	color: #525975;

	line-height: 60px;

	opacity: .1;

}



.review-title h3 {

	font-family: var(--cnvs-secondary-font);

	font-size: 28px;

	color: #1d2c4c;

	margin-bottom: 20px;

}



.owl-item .review-content {

	position: relative;

	max-height: 140px;

	overflow: hidden;

	transition: all 1s linear;

}



.owl-item .review-content::after {

	position: absolute;

	content: '';

	width: 100%;

	height: 50px;

	bottom: 0;

	left: 0;

	z-index: 9;

	transition: all .3s linear;

	background: linear-gradient(180deg,hsla(0,0%,100%,0) -1%,hsla(0,0%,100%,.01) 0,#fff);

}



.owl-item .review-content:hover { max-height: 500px; }

.owl-item .review-content:hover::after { background: transparent; }



.review-content p {

	margin: 0;

	color: #888;

	font-size: 16px;

	white-space: pre-line;

}



/* ----- Footer ----- */

.widget h4 {

	font-weight: 500;

	letter-spacing: 0;

	font-size: 16px;

	text-transform: none;

}



.widget_links li,

.widget_links li a {

	background-image: none !important;

	padding-left: 0;

	color: #525975;

	opacity: .9;

	padding-top: 5px;

}



.app-links::before {

	content: "";

	display: block;

	width: 20px;

	height: 3px;

	border-top: 2px solid #DDD;

}



.app-links p {

	margin: 20px 0 5px 0;

}



.app-links a span {

	color: #888;

	margin-left: 2px;

	font-weight: 300;

	font-size: 14px;

}



.app-links a i {

	position: relative;

	top: 1px;

	font-size: 16px;

}



.app-links a:not(:first-child) { margin-top: 5px; }



#copyrights span {

	font-weight: 300;

	color: #BBB;

}



