body { margin:0px; padding: 0px; box-sizing: border-box; font-family: 'Lemonada', cursive; overflow-x: hidden; direction: rtl;}
* { box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
h1,h2 {font-family: 'Lemonada', cursive;}
h3,h4,h5,h6,p {  font-family: 'Gotham';}
header {height: 100px; width:100%; padding: 10px 10%;position: absolute; top: 15px;}
header #logo { height:80px; width:200px; background: url("../images/logo.png")no-repeat; background-size: contain; float: right;}
header .social { width:210px; margin-top: 10px;  float: left; height: auto; border-radius: 20px; background:#1c7050; padding: 5px 0px 5px 10px; font-size: 16px; color: #fff; line-height: 40px; text-align: left; -webkit-box-shadow: -11px 10px 37px -21px rgba(0,0,0,0.75);
-moz-box-shadow: -11px 10px 37px -21px rgba(0,0,0,0.75);
box-shadow: -11px 10px 37px -21px rgba(0,0,0,0.75); }
header .social .fb { height:40px; width:40px; background: url("../images/social.png")no-repeat; background-position: 0px 0px; cursor: pointer; margin-right: 15px; float: right; filter: brightness(0) invert(1);
}
header .social .tw { height:40px; width:40px;  background: url("../images/social.png")no-repeat; background-position: -52px 0px; cursor: pointer; margin-right: 15px; float: right; filter: brightness(0) invert(1);
}
header .social .lan { width:80px; font-family: 'Gotham' ; float: right; cursor: pointer; text-align: left; height:auto; line-height: 40px; font-size: 12px; text-transform: uppercase; color:#fff; }

section#banner { height:115vh; width: 100%; padding:12% 10% 0px; background: url("../images/banner.jpg")no-repeat; background-size: cover; float: left; box-sizing: border-box;}
section#banner h1 {color:#1c7050; float: right; clear: both; font-size: 62px; line-height: 85px; text-align: right;  margin-bottom: 30px; font-family: 'Lemonada', cursive !important;}
section#banner h3 {color:#b4c767; float: right; clear: both; font-size: 30px; line-height: 24px; text-align: right;  margin-bottom: 20px; margin-top: 10px;}
section#banner .btn { height:50px; width:160px; line-height: 20px; padding: 10px 15px; background:#b4c767; cursor: pointer; color:#1c7050 !important; line-height: 30px; text-align: center; font-size: 15px; font-weight: 400; float: right; clear: both;}
section#banner .btn:hover { background:#1c7050 !important; cursor: pointer; color:#b4c767 !important;}

section#what { height:auto; width: 100%; padding: 80px 25%; float: left; background: #fff; box-sizing: border-box; background-position: bottom right  !important;}
section#what h3 { font-size:30px; text-align: center; color:#1c7050;  margin-bottom: 0px;  }
section#what p { font-size:15px; text-align: center; color:#1c7050;  line-height: 26px;  font-weight: 300; }

section.product { height:auto; width: 100%; box-sizing: border-box; padding: 50px 0%; float: right; position: relative;}
section.product .bgbx { height:63vh; width:95%; position: relative; top: 0px; background: #f5f2e3; padding: 5%;  box-sizing: border-box; text-align: left;}
section.product .bgbx h1 { font-size:100px; margin-bottom: 0px; line-height: 100px; color: #fff; margin-top: 30px; margin-bottom:50px; text-transform: uppercase;}
section.product .bgbx p { font-size:25px; margin-top:0px; line-height: 35px; color: #b1a98c; font-weight: 300;}
section.product .gbox { height:160px; width:16%; float: left; margin-top: -8%; background: #b4c767; padding: 20px; margin-right: 3%; position: relative;}
section.product .gbox h4 { color:#fff; font-size:18px; font-weight: 700; line-height: 24px; margin-bottom: 0px; margin-top: 0px;}
section.product .gbox p { color:#fff; font-size:15px; font-weight: 300; line-height: 18px; margin-top: 0px;}
section.product .mar { margin-left: 9%;}
section.product .mar1 { margin-right: 9%;}
section.product .marr { margin-left: 5%;}
section.product .pbox { width:32%; position:absolute; right: 5%; top: 15%; height: auto; }
section.product .pal {  left: 5%; right: inherit !important; }
section.product .pbox img { width:100% ; background-size: contain;}
section.product .al { text-align: right;}
section.product .size {font-size:80px !important; line-height: 80px !important;}
section.product .fl { float: right !important;}
section.product .ml { float: left !important;}

section#why { width: 100%; box-sizing: border-box; padding: 50px 10%; background:#f3ecdf url("../images/sec-banner.jpg")no-repeat; background-size: contain; height: 113.9vh; float: left;}
section#why h4 { color:#1a5446; font-size: 34px; margin-bottom: 10px; text-align: right; margin-top: 10%; font-weight: 700;}
section#why ul li { list-style-image: url("../images/blt.png"); height: 30px; line-height: 20px; margin-bottom:10px; padding-right: 5px; color:#1a5446; font-weight: 300; font-size:18px;}

section#contact { width:100%; padding: 80px 10%; float: left; height: auto; min-height: 60vh; background: url("../images/contact.jpg") no-repeat; background-size: cover; }
section#contact .cbox { width:50%; float: left;}
section#contact .cbox h2 { font-size:60px; text-align: left; color: #b4c767; margin-top: 20px;}
section#contact .cbox .textt { height:40px; padding: 10px; background: #fff; border: none; font-size:14px; margin-bottom: 12px; width: 100%; color: #b4c767; font-weight: 700;}
section#contact .cbox .textta { height:90px; padding: 10px; background: #fff; border: none; font-size:14px; margin-bottom: 12px; width: 100%; color: #b4c767; font-weight: 700;}
section#contact .cbox .submit { float:right; height: 40px ; width:120px; border-radius: 5px; padding: 10px 20px; background: #b4c767; color:#fff; text-align: center; line-height: 15px; border: none;}
section#footer { width:100%; height: 110px; padding: 20px 10%; margin-top: 0px; background: url("../images/ft.jpg") no-repeat; background-size: cover;  float: left; }
section#footer .social { width:400px; margin-top: 10px; float: right; height: 30px; font-size: 13px; color: #fff; line-height: 40px; text-align: left;}
section#footer .social .fb { height:40px; width:40px; background: url("../images/social.png")no-repeat; background-position: 0px 0px; margin-right: 15px; float: left;}
section#footer .social .tw { height:40px; width:40px;  background: url("../images/social.png")no-repeat; background-position: -52px 0px; margin-right: 15px; float: left;}
section#footer p { width:40%; float: left; font-size: 16px; color: #fff; line-height: 40px; text-align: left;}


@media screen and (max-width:450px) {
	section#banner { height: 55vh;  background: url("../images/banner-mob.jpg") no-repeat !important; background-size: cover !important; background-position: bottom right; margin-top: 60px; }	
	section#banner h1 { font-size: 24px; line-height: 26px; }
	section#banner h3 { font-size:16px; line-height: 20px;}
	section#banner .btn  { height: 35px; font-size: 14px; line-height: 20px;}
	section#what { padding: 30px 5%;}
	section.product .bgbx h1 { font-size:40px; line-height: 50px; margin-bottom: 10px; margin-top: 0px;}
	section.product .bgbx p { font-size:15px; ;line-height:20px;}
	section.product .pbox { width:64%; top:20%; right:5% !important; left: inherit !important;}
	section.product .mar { margin-left: 0px;}
	section.product .gbox { width:80%; margin: 5px 10%;}
	section.product .size { font-size:35px !important; line-height: 35px !important;}
	section#why { height:70vh; background-position: bottom center; background: url("../images/sec-banner-mob.jpg") no-repeat #f4efe6 !important; background-size: cover !important; padding: 20px 5px;}
	section#why h4 { margin-top: 0px; font-size: 24px; }
	section#why ul li { font-size: 13px; color:#000 !important;}
	section#contact  { background-size: cover;}
	section#contact .cbox { width:100%;}
	section#footer { margin: 0px; background-repeat: repeat;  height: auto;}
	section#footer p { width: 100%; text-align: center;}
	section#footer .social { margin: 10px auto; display: block; float: none;}
	section#contact .cbox h2 { font-size:40px; line-height: 45px;}
	header { height:50px; top:0px;padding: 10px 5%;}
	header #logo { height:40px; width:120px; }
	header .social { margin-top: 0px; padding: 0px; width:95px;}
	header .social .fb { margin-right: 0px;}
	
	
}

@media screen and (min-width:451px) and (max-width:768px) {
	section#banner { height: 70vh;  background: url("../images/banner-mob.jpg") no-repeat !important; background-size: cover !important; background-position: bottom right;}	
	section#banner h1 { font-size: 26px; line-height: 28px;}
	section#banner h3 { font-size:18px; line-height: 23px;}
	section#banner .btn  { height: 40px; font-size: 14px; line-height: 20px;}
	section#what { padding: 30px 5%;}
	section.product .bgbx h1 { font-size:30px; line-height: 50px; margin-bottom: 10px; margin-top: 0px;}
	section.product .bgbx p { font-size:15px; ;line-height:20px;}
	section.product .pbox { width:50%; top:16%; right:5% !important; left: inherit!important;}
	section.product .mar { margin-left: 0px;}
	section.product .gbox { width:80%; margin: 5px 10%;}
	section.product .size { font-size:30px !important; line-height: 40px !important;}
	section#why { height:65vh; background-position: bottom center; background-color: #f4efe6; padding: 20px 5px;}
	section#why h4 { margin-top: 0px; font-size: 24px; }
	section#why ul li { font-size: 13px; color:#000 !important;}
	section#contact  { background-size: cover;}
	section#contact .cbox { width:100%;}
	section#footer { margin: 0px; background-repeat: repeat;  height: auto;}
	section#footer p { width: 100%; text-align: center;}
	section#footer .social { margin: 10px auto; display: block; float: none;}
	section#contact .cbox h2 { font-size:40px; line-height: 45px;}
	header #logo {  height:50px; top:0px; height:40px; width:120px; }
	header .social { margin-top: 0px; padding: 0px; width:95px;}
	header .social .fb { margin-right: 0px;}
	
	
	
}

@media screen and ( min-width:1200px) and (max-width:1300px) {
	
	section.product .bgbx h1 { font-size:90px;}
	section.product .size  { font-size:60px !important;}
	section#why h4 { margin-top: 5%;}
	section.product .gbox h4 { margin-top: 0px;}
}

@media screen and ( min-width:1100px) and (max-width:1200px) {
	
	section.product .bgbx h1 { font-size:80px;}
	section.product .size  { font-size:50px !important; line-height: 70px !important;}
	section#why h4 { margin-top: 5%;}
	section.product .gbox h4 { margin-top: 0px;}
	section.product .gbox { height:200px;}
}


@media screen and ( min-width:900px) and (max-width:1100px) {
	section#banner { height:80vh;}
	section#why { height:80vh;}
	section#banner h1 { font-size: 46px; line-height: 48px;}
	section#banner h3 { font-size:24px; line-height: 28px;}
	section#what { padding: 40px 10%;}
	section.product .bgbx h1 { font-size:90px;}
	section.product .bgbx p { font-size: 24px; line-height: 28px;}
	section.product .size  { font-size:50px !important; line-height: 50px !important;}
	section#why h4 { margin-top: 5%;}
	section.product .gbox h4 { margin-top: 0px;}
	section.product .gbox { height:200px;}
	section#contact .cbox h2 { font-size:70px}
			header { height:60px; top:0px;}
	header #logo { height:60px; width:120px; }
	header .social { margin-top: 10px;}
}


@media screen and ( min-width:769px) and (max-width:900px) {
	section#banner { height:80vh; background-size: cover; background-position: bottom right;}
	section#why { height:80vh;}
	section#banner h1 { font-size: 46px; line-height: 48px;}
	section#banner h3 { font-size:24px; line-height: 28px;}
	section#what { padding: 40px 10%;}
	section.product .bgbx h1 { font-size:60px;}
	section.product .bgbx p { font-size: 24px; line-height: 28px;}
	section.product .size  { font-size:45px !important; line-height: 45px !important;}
	section#why h4 { margin-top: 5%;}
	section.product .gbox h4 { margin-top: 0px;}
	section.product .gbox { height:200px;}
	section#contact .cbox h2 { font-size:50px}
			header { height:60px; top:0px;}
	header #logo { height:60px; width:120px; }
	header .social { margin-top: 	10px;}
	section#why ul li { font-size:15px;}
}

@media screen and (min-width:1540px) {
	body { margin: 0p auto; display: block;}
	
}