@charset "UTF-8";
html {
	scroll-behavior: smooth;
}
@font-face {
    font-family: 'Far_Dinar_Two_Medium';
    src:url('Fonts/Far_Dinar_Two_Medium.woff') format('woff'),
        url('Fonts/Far_Dinar_Two_Medium.woff2') format('woff2'),
        url('Fonts/Far_Dinar_Two_Medium.svg#Far_Dinar_Two_Medium') format('svg'),
        url('Fonts/Far_Dinar_Two_Medium.eot'),
        url('Fonts/Far_Dinar_Two_Medium.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Far_Dinar_Two_Medium.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Segoe_UI';
    src:url('Fonts/segoeui.woff') format('woff'),
        url('Fonts/segoeui.woff2') format('woff2'),
        url('Fonts/segoeui.svg#segoeui') format('svg'),
        url('Fonts/segoeui.eot'),
        url('Fonts/segoeui.eot?#iefix') format('embedded-opentype'),
        url('Fonts/segoeui.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Segoe_UI_SemiBold';
    src:url('Fonts/seguisb.woff') format('woff'),
        url('Fonts/seguisb.woff2') format('woff2'),
        url('Fonts/seguisb.svg#seguisb') format('svg'),
        url('Fonts/seguisb.eot'),
        url('Fonts/seguisb.eot?#iefix') format('embedded-opentype'),
        url('Fonts/seguisb.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Body */
body {
    font-family: source-sans-pro;
    background-color: #f2f2f2;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-style: normal;
    font-weight: 200;
}
/* Container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	float: top;
}
/* Navigation */
header {
	width: 100%;
	height: 5%;
	background-color: #52bad5;
	border-bottom: 1px solid #2C9AB7;
}
.logo {
	color: #fff;
	font-family: 
	font-weight: bold;
	text-align: undefined;
	width: 10%;
	float: left;
	margin-top: 15px;
	margin-left: 25px;
	letter-spacing: 4px;
}
nav {
    float: right;
    width: 50%;
    text-align: right;
    margin-right: 25px;
}
header nav ul {
	list-style: none;
	float: right;
	
}
nav ul li {
    float: left;
    color: #FFFFFF;
    font-size: 14px;
    text-align: left;
    margin-right: 25px;
    letter-spacing: 0px;
    font-weight: normal;
    transition: all 0.3s linear;
    font-family: "Far_Dinar_Two_Medium";
}
ul li a {
	color: #FFFFFF;
	text-decoration: none;
}
ul li:hover a {
	color: #2C9AB7;
}
.hero_header {
	color: #FFFFFF;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	letter-spacing: 4px;
}
/* Hero Section */
.hero {
	background-color: aqua;
	padding-top: 150px;
	padding-bottom: 150px;
	height: 100vh;}
.light {
	font-weight: bold;
	color: #717070;
}
.tagline {
	text-align: center;
	color: #FFFFFF;
	margin-top: 4px;
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
}
/* About Section */
.text_column {
	width: 46%;
	
	font-weight: lighter;
	line-height: 25px;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	color: #A3A3A3;
}
.productsSectionClass {
	width: 100%;
	padding-top: 0px;
	background-color: #FFFFFF;
	height: 0px;;
}
/* Stats Gallery */
.stats {
	color: #717070;
	margin-bottom: 5px;
}
.gallery {
	clear: both;
	display: inline-block;
	width: 100%;
	background-color: #FFFFFF;
	/* [disabled]min-width: 400px;
*/
	padding-bottom: 35px;
	padding-top: 0px;
	margin-top: -5px;
	margin-bottom: 0px;
}
.thumbnail {
	width: 25%;
	text-align: center;
	float: left;
	margin-top: 35px;
}
.gallery .thumbnail h4 {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	color: #52BAD5;
}
.gallery .thumbnail p {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #A3A3A3;
}
/* Parallax Section */
.banner1Class {
	display: inline-block;
	background-color:rgba(179,179,179,1.00);
	height: 700px;
	float: left;
	width: 100%;
}
.banner1Text1Class {
	
	width: 30%;
	height: 100%;
	direction: rtl;
	font-family: "Far_Dinar_Two_Medium";
	font-size: 60px;
	text-align: justify;
	color: #FFFFFF;
	text-align: center;
	padding-right: 100px;
	padding-top: 130px;
	margin-top: 0px;
	float: left;
	line-height: 150px;
	background-color: rgba(187,187,187,1.00)
}
font-family: "Far_Dinar_Two_Medium";
.parallax_description {
	color: #FFFFFF;
	text-align: right;
	padding-right: 100px;
	width: 30%;
	float: right;
	font-weight: lighter;
	line-height: 23px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
/* More info */
footer {
	background-color: #000000;
	height: 250px;
	width: 100%;
	margin-bottom: -4px;
}
.footer_column {
	width: 50%;
	text-align: center;
	padding-top: 30px;
	float: left;
}
footer .footer_column h3 {
	color: #B3B3B3;
	text-align: center;
}
footer .footer_column p {
	color: #717070;
	background-color: #FFFFFF;
}
.cards {
	width: 100%;
	height: auto;
	max-width: 400px;
	max-height: 200px;
}
footer .footer_column p {
	padding-left: 30px;
	padding-right: 30px;
	text-align: justify;
	line-height: 25px;
	font-weight: lighter;
	margin-left: 20px;
	margin-right: 20px;
}
.button {
	width: 200px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
}
.button:hover {
	background-color: #FEFEFE;
	color: #C4C4C4;
	cursor: pointer;
}
.footer_banner {
	background-color: #B3B3B3;
	padding-top: 60px;
	padding-bottom: 60PX;
	margin-bottom: 0px;
	background-image: url(../images/pattern.png);
	background-repeat: repeat;
}
footer {
	display: inline-block;
}
.hidden {
	display: none;
}

/* Mobile */
@media (max-width: 320px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	display: none;
}
header nav ul {
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.text_column {
	width: 100%;
	text-align: justify;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 90%;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 12px;
	float: none;
	text-align: center;
}
.banner {
	background-color: #2D9AB7;
	background-image: none;
}
.tagline {
	margin-top: 20px;
	line-height: 22px;
}
.hero_header {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #043745;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	overflow: auto;
	display: inline-block;
	background: #52bad5;
}
header nav ul {
	padding: 0px;
	float: none;
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
}
.text_column {
	width: 100%;
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 30%;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: none;
	width: 100%;
	text-align: center;
}
.thumbnail {
	width: 50%;
}
.parallax {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 20%;
}
.parallax_description {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	padding-top: 30px;
}
.banner {
	padding-left: 20px;
	padding-right: 20px;
}
.footer_column {
	width: 100%;
}
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
.text_column {
	width: 100%;
}
.thumbnail {
	width: 50%;
}
.text_column {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.banner {
	margin-top: 0px;
	padding-top: 0px;
}
}
.Header {
	height: 60px;
	background-color:rgba(0,0,0,0.5);
	border-bottom: none;
	position: fixed;
	float: top;
	top:0px;
	z-index: 20;
}
.LogoDIV {
	width: 20%;
	height: 100%;
	float: left;
}

.Logo {
	height: 100%;
}

.BannerClass {
	height: 100vh;
	float: top;
	background-color:rgba(52,34,209,1.00);
	background-image:url("../Images/Banner01.jpg");
	background-position: center;
	background-size: cover;
}
.BannerText1Class {
	font-family: "Segoe_UI_SemiBold";
	letter-spacing: 10px;
	color:white;
	font-size: 60px;
	float: left;
	width: 100%;	
	position: relative;
}
.BannerText2Class {
	font-family: "Segoe_UI";
	letter-spacing: 30px;
	color:white;
	font-size: 20px;
	width: 100%;
	float: left;
	position: relative;
}

.BannerTextsClass {
	width: 100%;
	height: 100px;
	float: top;
	text-align: center;
	z-index: 10;
	position: absolute;
	margin-top: 40vh;
}

.overlayer {
	width: 100%;
	height: 100%;
	z-index: 1;
	float: top;
	top:0px;
	background-color: black;
	opacity: 0.3;
	position: absolute;
}

.productsSectionColumnsClass {
	float: left;
	width: 45%;
	height: 300px;
	padding-left: 25px;
	padding-right: 25px;
	margin-top: 100px;
}

.productsSectionTextClass {
	font-family: "Far_Dinar_Two_Medium";
	font-size: 60px;
	color: rgba(132,132,132,1.00);
	float: right;
	margin-top: 50px;
	margin-right: 20px;
	text-align: center;
	direction: rtl;
}

.productsButtonClass {
	text-decoration: none;
	float: left;
	font-family: "Far_Dinar_Two_Medium";
	color: rgba(87,87,87,1.00);
	font-size: 14px;
	text-align: center;
	border: solid;
	border-width: 1px;
	border-radius: 3px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 45%;
	margin-bottom: 30px;	
	transition: all 0.3s linear;
}
.productsButtonClass:hover{
	background-color: rgba(37,37,37,1.00);
	color: rgba(213,213,213,1.00);
	border-color: rgba(37,37,37,1.00);
}

.banner1Text2Class {
	width: 90%;
	direction: rtl;
	font-family: "Far_Dinar_Two_Medium";
	font-size: 18px;
	text-align: justify;
	text-justify: inter-word;
	color:white;
	padding-top: 20px;
	padding-right: 30px;
	margin-top: 0px;	
	float: right;
}

.banner3Class {
	background-color:rgba(161,181,188,1.00);
	float: left;
	width: 100%;
}

.banner3DivClass {
	float: right;
	width: 50%;
	height: 100%;
}

.banner3Text1Class {
	width: 70%;
	direction: rtl;
	font-family: "Far_Dinar_Two_Medium";
	font-size: 30px;
	color: #FFFFFF;
	padding-top: 100px;
	padding-right: 15%;
	margin-top: 0px;
	float: right;
}

.banner3Text2Class {
	width: 70%;
	direction: rtl;
	font-family: "Far_Dinar_Two_Medium";
	font-size: 18px;
	text-align: justify;
	text-justify: inter-word;
	color:white;
	padding-top: 20px;
	padding-right: 15%;
	margin-top: 0px;
	float: right;
}

.banner1DivClass {
	float: right;
	padding-right: 20px;
	width: 60%;
	height: 100%;
}

.banner2Class {
	display: inline-block;
	background-color:white;
	height: 500px;
	float: left;
	width: 100%;
	padding-top: 30px;
}

.banner2Text2Class {
	width: 25%;
	direction: rtl;
	font-family: "Far_Dinar_Two_Medium";
	font-size: 18px;
	text-align: justify;
	text-justify: inter-word;
	color:rgba(132,132,132,1.00);
	padding-top: 100px;
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 0px;	
	float: left;
}

.banner2Text1Class {
	width: 20%;
	direction: rtl;
	font-family: "Far_Dinar_Two_Medium";
	font-size: 50px;
	text-align: center;
	text-justify: inter-word;
	color:rgba(132,132,132,1.00);
	padding-top: 70px;
	padding-right: 30px;
	margin-top: 0px;	
	float: right;
}

.banner2DivClass {
	width: 40%;
	height: 100%;
	float: left;
}

.sofaColorsDivLeftClass {
	width: 33%;
	height: 20%;
	float: left;
	text-align: center;
}

.sofaColorsDivRightClass {
	width: 45%;
	height: 14%;
	float: right;
	text-align: center;
}

.sofaColorImageClass {
	height: 50%;
	transition: all 0.2s linear;
}
.sofaColorImageClass:hover{
	height: 53%;
}

.productsSectionImageClass {
	width:98%;
	transition: all 0.5s linear;
}
.productsSectionImageClass:hover{
	width: 100%;
}

.footerPart1Class {
	width: 50%;
	height: 170px;
	float: left;
	color: white;
}

.footerPar21Class {
	direction: rtl;
	font-family: "Far_Dinar_Two_Medium";
	font-size: 14px;
	width: 40%;
	height: 180px;
	color: rgba(184,184,184,1.00);
	float: right;
	padding-top: 50px;
	padding-right: 30px;
}

.copyrightClass {
	font-family: "Segoe_UI";
	font-size: 12px;
	float: left;
	height: 30px;
	letter-spacing: 1px;
	padding-left: 10px;
	padding-top: 50px;
	color: white;
}

.arrowDownIcon {
	width: 100%;
	float: top;
	text-align: center;
	z-index: 10;
	position: absolute;
	margin-top: 95vh;
}

.section1Class {
	display: inline-block;
	background-color:rgba(240,240,240,1.00);
	float: left;
	width: 100%;
	padding-bottom: 5vw;
	text-align: justify-all;
}

.productClass {
	float: right;
	width: 26vw;
	height: 30vw;
	margin-top: 5vw;
	margin-right: 5vw;
	background-color: rgba(241,241,241,1.00);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(215,215,215,1.00);
}
.productClass:hover{
	border-color: rgba(180,180,180,1.00);
}

.productImageClass {
	height: 80%;
	width: 100%;
	display: flex;
	align-items: center;
}

.productTextClass {		
	height: 13%;
	width: 100%;
	text-align: center;
	padding-top: 8%;
	background-color: rgba(215,215,215,1.00);
	font-family: "Far_Dinar_Two_Medium";
	font-size: 16px;
	color: rgba(75,75,75,1.00);
}

.productsTitleClass {
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 40px;
	width: 89vw;
	height: 50px;	
	font-family: "Far_Dinar_Two_Medium";
	font-size: 22px;
	direction: rtl;
	text-align: right;
	color: rgba(100,100,100,1.00);
	border-style: solid;
	border-top: none;
	border-right: none;
	border-left: none;
	border-width: 1px;
	border-color: rgba(100,100,100,1.00);
}

.productsPageBannerClass {
	height: 300px;
	float: top;
	background-color:rgba(52,34,209,1.00);
	background-image:url("../Images/ProductsPageBanner.jpeg");
	background-position: center;
	background-size: cover;
}

.aboutUsPageBannerClass {
	height: 600px;
	float: top;
	background-color:rgba(52,34,209,1.00);
	background-image:url("../Images/AboutUsPageBanner.jpg");
	background-position: center;
	background-size: cover;
}

.aboutUsTextClass {
	margin-left: 6vw;
	margin-right: 6vw;
	margin-top: 40px;
	width: 87vw;
	height: 50px;	
	font-family: "Far_Dinar_Two_Medium";
	font-size: 16px;
	direction: rtl;
	text-align: justify;
	text-justify: inter-word;
	color: rgba(100,100,100,1.00);
	height: auto;
}

.contactUsPageBannerClass {
	height: 100vh;
	width: 60vw;
	float: left;
	background-image:url("../Images/ContactUsBanner.jpeg");
	background-position: center;
	background-size: cover;
}

.contactUsTextClass {
	float: left;
	margin-left: 30px;
	margin-right: 0px;
	margin-top: 200px;
	width: 35vw;
	height: 50px;	
	font-family: "Far_Dinar_Two_Medium";
	font-size: 16px;
	direction: rtl;
	text-align: justify;
	text-justify: inter-word;
	color: rgba(224,224,224,1.00);
	height: auto;
}

.instagramLinkClass {
	width: 70px;
	height: 70px;
	position: fixed;
	margin-left: 10px;
	bottom: 25px;
	transition: 0.3s;
	z-index: 30;
}
.instagramLinkClass:hover{
	width: 80px;
	height: 80px;
	margin-left: 5px;
	bottom: 5px;
}