* { margin: 0; padding: 0; box-sizing: border-box; }

/*@font-face {
	font-family: "AdobeCaslonProRegular";
	src: url("../fonts/AdobeCaslonProRegular.eot");
	src: url("../fonts/AdobeCaslonProRegular.eot?#iefix") format("embedded-opentype"),
	url("../fonts/AdobeCaslonProRegular.woff") format("woff"),
	url("../fonts/AdobeCaslonProRegular.woff2") format("woff2"),
	url("../fonts/AdobeCaslonProRegular.ttf") format("truetype"),
	url("../fonts/AdobeCaslonProRegular.svg#AdobeCaslonProRegular") format("svg");
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@font-face {
	font-family: "LondonTwo";
	src: url("../fonts/LondonTwo.eot");
	src: url("../fonts/LondonTwo.eot?#iefix") format("embedded-opentype"),
	url("../fonts/LondonTwo.woff") format("woff"),
	url("../fonts/LondonTwo.woff2") format("woff2"),
	url("../fonts/LondonTwo.ttf") format("truetype"),
	url("../fonts/LondonTwo.svg#LondonTwo") format("svg");
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}*/

/****base css*********/

	body { font-family: calibri, sans-serif; font-weight: 300; font-size:18px; color: #7b99a3; line-height: 26px; -webkit-font-smoothing: antialiased; letter-spacing: 2px; max-width: 1558px; margin: 0 auto; }
	body , html { height: 100%; width: 100%; }

	h1, h2, h3, h4, h5, h6 { margin:0px; padding:0px; font-weight: 300; font-family: calibri, sans-serif; }
	h1 { font-size:72px; margin:0px 0px 20px; padding:0px; line-height: 1; letter-spacing: 4px; }
	h1 span { color: #D9D9CB; }
	h2 { font-size:72px; margin:0px 0px 20px; padding:0px; line-height: 1; letter-spacing: 4px; }
	h2 span { color: #D9D9CB; }
	h3 { font-size:23px; margin:0px 0px 20px; padding:0px; line-height: 1; color: #D9D9CB; }
	h4 { font-size:18px; margin:0px 0px 15px; padding:0px; }
	h5 { font-size:16px; margin:0px 0px 15px; padding:0px; }

	.fl{ float:left;}
	.fr{ float:right;}

	p { margin:0; padding:0 0 20px 0; color:#444444}

	article, aside, figure, footer, header, hgroup,menu, nav, section { display: block; }
	.clearfix:after, .grid-block:after, .deepest:after {    clear: both;}
	.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after, .deepest:before, .deepest:after {    content: "";    display: 		table;}
	.cl{ clear:both; height:0; }
	a { color: #789fc1; outline:none !important; transition:all 0.3s ease-in 0s;-webkit-transition:all 0.3s ease-in 0s; text-decoration: none; }  
	a:hover,a:focus { outline: none !important; color: #0d1424; }
	.no-padding{ padding:0px; }
	input , button { transition:all 0.3s ease-in 0s; -webkit-transition:all 0.3s ease-in 0s; outline: none !important; }
	ul,ol { padding-left: 15px; margin-bottom: 15px; }
	img { outline: none !important; max-width: 100%; height: auto; }

	.container { max-width: 1280px; width: 94%; padding: 0; margin: 0 auto; }

/*additional css*/
.list-flex{
	display:flex;
}
.left-list{
	flex:1;
}
.right-list{
	flex:1;
}

/*********************************  Header *************************************/
header { float: left; width: 100%; z-index: 11; position: relative; }
.header-top { float: left; width: 100%; background: #7b99a4; color: #ffffff; padding: 15px 60px 14px 60px; }
.header-top .header-right { float: right; line-height: 1; }
.header-top .header-call { float: left; margin-right: 30px; font-family: calibri, sans-serif; }
.header-top .header-call a { color: #ffffff; }
.header-top .header-call a:hover , .header-top .header-call a:focus { color: rgba(255,255,255,0.80); }
.header-top .header-call img { top: 3px; position: relative; margin-right: 7px; transition:all 0.3s ease-in 0s;-webkit-transition:all 0.3s ease-in 0s; }
.header-top .header-call a:hover img , .header-top .header-call a:focus img { opacity: 0.80; }
.header-top .mail-col { float: left; margin-top: 4px; }
.header-top .mail-col:hover img , .header-top .mail-col:focus img { opacity: 0.80; }
.header-bottom { float: left; width: 100%; padding: 25px 60px 30px 60px; text-align: center; }
.logo { display: inline-block; float: left; line-height: 1; }
.logo a { display: inline-block; }
.logo p { padding: 0; }
.header-bottom .claim { font-family: calibri, sans-serif; font-size: 18px; color: #8d6229; float: right; margin: 72px 50px 0 45px; }
.header-bottom .claim p { padding: 0; }
.header-bottom .claim a { color: #8d6229; }
.header-bottom .claim span { color: #D9D9CB; }

.navigation { float: left; width: 100%; margin-top: 20px; border-top: solid 3px #D9D9CB; border-bottom: solid 3px #D9D9CB; line-height: 1; padding: 25px 0 20px 0; }
.navigation ul.nav { margin: 0; padding: 0; }
.navigation ul.nav > li { list-style-type: none; display: inline-block; position: relative; }
.navigation ul.nav > li + li { margin-left: 75px; }
.navigation ul.nav > li + li:before { content: ""; background: #D9D9CB; font-size: 22px; position: absolute; left: -35px; top: 0; width: 3px; height: 22px; }
.navigation ul.nav > li > a { color: #7c9ba5; font-size: 22px; font-family: calibri, sans-serif; border-bottom: solid 4px transparent; display: inline-block; padding: 0 2px 4px 2px; }
.navigation ul.nav > li.active > a , .navigation ul.nav > li:hover > a , .navigation ul.nav > li:focus > a { border-color: #D9D9CB; }

.navigation ul.nav ul { display: none; margin: 0; padding: 0; width: 287px; background: rgba(123, 153, 163, 0.72); position: absolute; text-align: left; padding: 15px 0; }
.navigation ul.nav li:hover > ul { display: block; }
.navigation ul.nav ul li { list-style-type: none; position: relative; }
.navigation ul.nav ul li + li { margin-top: 1px; }
.navigation ul.nav ul li a { color: #ffffff; font-size: 22px; font-family: calibri, sans-serif; display: block; padding: 8px 42px 8px 15px; line-height: 1; position: relative; }
.navigation ul.nav ul li a:hover , .navigation ul.nav ul li > a:focus , .navigation ul.nav ul li:hover > a , .navigation ul.nav ul li.active > a { background: #D9D9CB; }
.navigation ul.nav ul li > a:after { content: ""; width: 26px; height: 25px; background: url(../images/small-logo.png) no-repeat 0 0 / 100% auto; position: absolute; right: 15px; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); opacity: 0; transition:all 0.3s ease-in 0s;-webkit-transition:all 0.3s ease-in 0s; }
.navigation ul.nav ul li > a:hover:after , .navigation ul.nav ul li > a:hover:focus , .navigation ul.nav ul li:hover > a:after , .navigation ul.nav ul li.active > a:after { opacity: 1; }
.navigation ul.nav ul ul { left: 240px; top: 0; }

/*********************************  Slider *************************************/
.slider { float: left; width: 100%; }
.slider > img { width: 100%; }

/*********************************  About Us *************************************/
.about-us { float: left; width: 100%; padding: 35px 50px; }
.about-us .about-left { float: left; width: 51%; background: #7b99a3; text-align: center; color: #fff; position: relative; }
.about-us p {color: #ffffff; }
.about-us .about-left:after { content: ""; width: 100%; height: 100%; background: url(../images/about-left-after.png) no-repeat right bottom / 100% 100%; position: absolute; right: 0; bottom: 0; }
.about-us .about-left .padd { padding: 80px 30px 40px 30px; position: relative; z-index: 1; max-width: 710px; margin: 0 auto; }
.about-us .about-right { float: right; width: 46%; }
.about-us .about-right img { width: 100%; }
.about-us .about-left h2 { margin: 0 0 35px 0; }
.about-us .about-left h2 span { color: #d6d6d5; }
.about-left .read-more { margin-top: 30px; }
.read-more a { background: #D9D9CB; color: #fff; font-size: 30px; font-family: calibri, sans-serif; line-height: 1; padding: 18px 50px; display: inline-block; box-shadow: 0px 4px 0px rgba(0,0,0,0.2); letter-spacing: 4px; }
.read-more a:hover , .read-more a:focus { background: #7B99A3; }

/*********************************  Interior Design *************************************/
.interior-design { float: left; width: 100%; padding: 0 50px; position: relative; min-height: 450px; }
.interior-design .container { width: 100%; max-width: 100%; padding: 40px 0; border-top: solid 3px #D9D9CB; border-bottom: solid 3px #D9D9CB; overflow: hidden; }
.interior-design h2 img { margin-left: 8px; }
.interior-design .interior-image { float: left; width: 50%; position: absolute; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); left: 20px; }
.interior-design .interior-right { float: right; width: 56%; text-align: right; z-index: 1; position: relative; }
.interior-design .interior-right p { max-width: 700px; float: right; }
.interior-design .interior-right .read-more { text-align: center; margin-top: 10px; float: left; width: 100%; }
.interior-design .read-more a { background: #7b9aa4; box-shadow: 0px 4px 0px #D9D9CB; }
.interior-design .read-more a:hover , .interior-design .read-more a:focus { background: #D9D9CB; }

/*********************************  Our Products *************************************/
.our-products { float: left; width: 100%; padding: 40px 50px 50px 50px; position: relative; text-align: center; }
.our-products h2 img { margin-left: 8px; position: relative; top: 3px; }
.our-products .container { max-width: 1330px; }
.our-products .products { text-align: left; float: left; width: 100%; margin-top: 30px; }
.our-products .products .image-col { margin-bottom: 20px; line-height: 1; }
.our-products .products .image-col img { display: block; }
.our-products .products .image-col a { display: block; position: relative; }
.our-products .products .image-col a:after { background: rgba(123, 154, 164, 0.70); position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; opacity: 0; transition:all 0.3s ease-in 0s; -webkit-transition:all 0.3s ease-in 0s; }
.our-products .products .image-col a:hover:after , .our-products .products .image-col a:focus:after { opacity: 1; }
.our-products .col-3 { width: 26%; }
.our-products .col-9 { width: 72.3%; }
.our-products .col-12 .col-6 { width: 49%; }
.our-products .col-12 .col-2 { float: left; width: 23.5%; }
.our-products .col-12 .col-2 + .col-2 { margin-left: 2%; }
.view-shop { float: left; width: 100%; text-align: center; margin-top: 30px; }
.view-shop a { background: #7b9aa4 url(../images/basket-icon.png) no-repeat 28px center; box-shadow: 0px 4px 0px #D9D9CB; color: #fff; font-size: 30px; font-family: calibri, sans-serif; line-height: 1; padding: 18px 30px 18px 75px; display: inline-block; letter-spacing: 4px; }
.view-shop a:hover , .view-shop a:focus { background-color: #D9D9CB; }

/*********************************  Footer  *************************************/
footer { float: left; width: 100%; background: #7b99a3; padding: 30px 0; text-align: center; color: #ffffff; position: relative; }
footer .container { width: 100%; max-width: 100%; padding: 0 50px; }
.footer-menu { float: left; width: 100%; text-align: center; }
.footer-menu ul { margin: 0; padding: 0; }
.footer-menu ul li { list-style-type: none; display: inline-block; position: relative; }
.footer-menu ul li + li { margin-left: 38px; }
.footer-menu ul li + li::before { content: ""; background: #ffffff; font-size: 22px; position: absolute; left: -20px; top: 3px; width: 3px; height: 18px; }
.footer-menu ul li a { color: #ffffff; font-size: 21px; font-family: calibri, sans-serif; }
.footer-menu ul li a:hover , .footer-menu ul li a:focus { color: rgba(255,255,255,0.80); }
.copyright { position: absolute; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); bottom: 38px; font-family: "Open Sans"; font-size: 13px; letter-spacing: 0; }
.copyright img { margin-left: 10px; position: relative; top: 6px; }
.copyright p { padding: 0; }
.footer-social { float: right; margin-top: 10px; }
.footer-social ul { margin: 0; padding: 0; }
.footer-social ul li { list-style-type: none; display: inline-block; }
.footer-social ul li a:hover img , .footer-social ul li a:focus img { opacity: 0.80; }
.footer-social ul li + li { margin-left: 20px; }

/************************************************************/
.content-box { float: left; width: 100%; padding: 30px 0; }
.content-side { float: left; width: 100%; }

.inner-page h1 , .inner-page h2 { font-size: 25px; line-height: 1;}

.left-side { float: left; width: 23%; padding-right: 15px; }
.left-side .left-col { float: left; width: 100%; }
.left-side .left-col + .left-col { margin-top: 15px; } 

.right-side { float: right; width: 23%; }
.right-side .right-col { float: right; width: 100%; }
.right-side .right-col + .right-col { margin-top: 15px; } 

.content-side.left { float: right; width: 76%; }
.content-side.right { float: left; width: 74%; }
.content-side.both { float: left; width: 50%; margin-left: 1%; }

.main-body-top { float: left; width: 100%; margin-bottom: 20px; } 
.main-body-bottom { float: left; width: 100%; margin-top: 20px; }

.header-top-left { float: left; width: 70%; text-align: center; }
.header-top-left h3 { margin: 0; }
.footer-left { position: absolute; bottom: 25px; width: 34%; text-align: center; }
.footer-left h3 { color: #fff; margin: 0; font-size: 26px; }
.footer-right { position: absolute; bottom: 25px;  right: 240px; width: 21%; }
.footer-right h3 { color: #fff; margin: 0; font-size: 26px; }

/* css 2026 */

body.full-width{
	max-width:100%
}

.full-width .container {
    max-width: 100%;
    width: 100%;
}

/*about*/

.about-flex {
    padding-left: 60px;
    padding-right: 60px;
}

.about-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1050px;
    min-height: 700px;
    text-align: center;
    margin: 0 auto;
}

.about-quote h2 {
    font-size: 56px;
    font-weight: 100;
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.about-left {
    flex: 1;
}

.about-right {
    flex: 1;
}

.about-right h3 {
    font-size: 42px;
    font-weight: 100;
}

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

/* what we do */

.what-we-do {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-image: url(/images/what-we-do-bg.jpg);
    background-size: cover;
    padding-top: 80px;
    padding-left: 60px;
    padding-right: 60px;
    margin: 0 auto;
}

.what-title {
    text-align: center;
}

.what-title h2 {
    font-size: 46px;
    font-weight: 100;
}

.what-we-do-col {
    display: flex;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    min-height: 600px;
    
}

.what-left {
    display: flex;
    flex-direction: column;
    justify-content: end;
    flex: 1;
    background-image: url(/images/what-we-do-1.jpg);
    background-size: cover;
    background-position: center;
    color:#f3f3f3;
    padding: 20px;
}

.what-right {
    display: flex;
    flex-direction: column;
    justify-content: end;
    flex: 1;
    background-image: url(/images/what-we-do-2.jpg);
    background-size: cover;
    color:#f3f3f3;
    padding: 20px;
}

.what-text {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0;
}

.what-heading {
    font-size: 80px;
    font-weight: 100;
    margin: 0%;
}

/* projects */

.project-flex {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 60px
}

.project-col {
    display: flex;
    justify-content: center;
    column-gap: 20px;
    row-gap: 20px;
    flex-wrap: wrap;
}

.project-main-title {
    text-align: center;
}

.project-main-title h2 {
    font-size: 46px;
    font-weight: 100;
}

.project-text {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.project-heading {
    font-size: 80px!important;
    font-weight: 100;
    margin: 0%;
}

.project-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    background-image: url(/images/project-img-1.jpg);
    background-size: cover;
    background-position: center;
    min-height: 548px;
    color: #f3f3f3;
    padding: 20px;
}

.project-2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    background-image: url(/images/project-img-2.jpg);
    background-size: cover;
    background-position: center;
    min-height: 548px;
    color: #f3f3f3;
    padding: 20px;
}

.project-3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    background-image: url(/images/project-img-3.jpg);
    background-size: cover;
    background-position: center;
    min-height: 548px;
    color: #f3f3f3;
    padding: 20px;
}

/* closing statement */

.statement {
	display: flex;
	flex-direction: column;
	max-width: 1050px;
	min-height: 700px;
	align-items: center;
	text-align: center;
	margin: 0 auto;
}

.statement h2 {
	font-size: 46px;
    font-weight: 100;
}

/* footer*/

.footer-main {
    max-height: 560px;
    background-image: url(/images/footer-bg.jpg);
    background-size: cover;
    padding: 60px;
}

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
}

.socials {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-contact {
    display: flex;
    justify-content: center;
    margin: 30px 0px;
}

.btn-dark {
    background-color: #141927;
    border: none;
    border-radius: 100px;
    color: white;
    padding: 10px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
}

@media screen and (max-width: 768px) {
    .about-flex {
    padding-left: 20px;
    padding-right: 20px;
}

.about-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vhpx;
}

.about-quote h2 {
    font-size: 50px;
    font-weight: 100;
}

.about {
    flex-direction: column;
    text-align: center;
    row-gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 60px;
}


.what-we-do {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.what-title {
    text-align: center;
}

.what-we-do-col {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    min-height: 600px;
    
}

.what-left {
    min-height: 70vh;
}

.what-right {
    min-height: 70vh;
}

.what-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-flex {
    padding: 60px 20px
}

.project-col {
    flex-direction: column;
    row-gap: 20px;
    column-gap: 20px;
}

.project-main-title {
    text-align: center;
}

.project-text {
    display: flex;
    justify-content: space-between;
}

.project-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    min-height: 548px;
    color: #f3f3f3;
    padding: 20px;
}

.project-2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    min-height: 548px;
    color: #f3f3f3;
    padding: 20px;
}

.project-3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    min-height: 548px;
    color: #f3f3f3;
    padding: 20px;
}

.footer-main {
    max-height: 560px;
    padding: 20px;
}

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
}

.socials {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-contact {
    display: flex;
    justify-content: center;
    margin: 30px 0px;
}

.btn-dark {
    background-color: #141927;
    border: none;
    border-radius: 100px;
    color: white;
    padding: 10px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
}
}