body { margin:0px; padding: 0px; box-sizing: border-box; font-family: 'Cairo', sans-serif;  overflow-x: hidden; direction: rtl !important;}
* { box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
h1,h2 {font-family: 'Cairo', sans-serif;}
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:200px; margin-top: 10px; float: left; height: 30px; font-size: 16px; color: #fff; line-height: 40px; text-align: left;}
header .social .lan { width:80px; font-family: 'ITC Avant Garde Pro Md'; float: right; cursor: pointer; text-align: left; height:auto; line-height: 40px; font-size: 13px; text-transform: uppercase; color:#f11822; }
header .social .fb { height:40px; width:40px; background: url("../images/social.png")no-repeat; background-position: 0px 0px; margin-right: 15px; float: right;}
header .social .tw { height:40px; width:40px;  background: url("../images/social.png")no-repeat; background-position: -52px 0px; margin-right: 15px; float: right;}
section#banner { height:90vh; width: 100%; padding:15% 10% 0px; background: url("../images/banner.jpg")no-repeat; background-size: cover; float: left; box-sizing: border-box;}
section#banner h1 {color:#000; font-size: 62px; line-height: 66px; font-family: 'ITC Avant Garde Pro Md' !important;; text-align: right;  margin-bottom: 30px;}
section#banner h3 {color:#9f9c90; font-size: 24px; line-height: 34px; text-align: right;  margin-bottom: 20px; margin-top: 10px; font-family: 'ITC Avant Garde Pro Md'; font-weight: 500;}
section#banner h3::before { height: 50px; width:50px;margin-right: -15px; background: url("../images/bltt.png") no-repeat; background-size: contain; content: ''; float: right; margin-right: 15px;}
section#banner .btn { height:50px; width:160px; line-height: 20px; padding: 10px 15px; background: #b4c767; cursor: pointer;color: #1c7050; line-height: 30px; text-align: center; font-size: 15px; font-weight: 400;}
section#banner .btn:hover { background: #1c7050; cursor: pointer;color: #b4c767;}

section#what { height:auto; width: 100%; padding: 120px 25%; float: left; background: #f11822; box-sizing: border-box;}
section#what h3 { font-size:36px; text-align: center; color:#fff; margin-top: 0px;  margin-bottom: 0px;  font-family: 'Cairo', sans-serif; font-weight: 500; letter-spacing: 1px;  }
section#what p { font-size:15px; text-align: center; color:#fff;  line-height: 26px;  font-weight: 400; font-family: 'Cairo', sans-serif;  }

section.product { height:auto; width: 100%; box-sizing: border-box; padding: 50px 0%; float: left; position: relative;}
section.product .mbox { height:auto; width:100%; position: relative; margin-bottom: 50px; float: left;}
section.product .bgbx { height:auto; width:60%; position: relative; margin: 50px auto; display: block;  top: 0px; background: #f11822; padding: 3% 8% 3% 20%;  box-sizing: border-box; -webkit-border-top-right-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomright: 40px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;}
section.product .bgbx h1 { font-size:80px; margin-bottom: 20px; line-height: 80px; color: #fff; margin-top: 10px; }
section.product .bgbx p span { font-size:18px; margin-bottom: 0px; margin-top:0px; line-height: 30px; color: #FFF; font-weight: 700;}
section.product .bgbx p  { font-size:16px; margin-top:0px; margin-bottom: 0px; line-height: 20px; color: #FFF; font-weight: 400;}
.clear { height:18px; width:100%; float: left;}
section.product .pbox { position:absolute; height:100%; width:40%; left: -10%; top: -2%; height: auto; }
section.product .pbox img { width:100%; background-size: contain;}
section.product .mbox .milkleft { position:absolute; left:0px; top:30%; width:30%; height: auto; }
section.product .mbox .milkleft img { width:100%; background-size: contain;}
section.product .mbox .milkright { position:absolute; right:-5%; top:30%; width:30%; height: auto; }
section.product .mbox .milkright img { width:100%; background-size: contain;}

section.product .bgbx1 { height:auto; width:60%; position: relative; margin: 50px auto; display: block;  top: 0px; background: #f11822; padding: 3% 20% 3% 5%;  box-sizing: border-box; -webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-bottomleft: 40px;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;}
section.product .bgbx1 h1 { font-size:4em; margin-bottom: 20px; line-height: 80px; color: #fff; margin-top: 10px; }
section.product .bgbx1 p span { font-size:18px; margin-bottom: 0px; margin-top:0px; line-height: 30px; color: #FFF; font-weight: 700;}
section.product .bgbx1 p  { font-size:16px; margin-top:0px; margin-bottom: 0px; line-height: 20px; color: #FFF; font-weight: 400;}
.clear { height:18px; width:100%; float: left;}
section.product .pbox1 { position:absolute; height:100%; width:40%; right: -10%; top: -2%; height: auto; }
section.product .pbox1 img { width:100%; background-size: contain;}
section.product .mbox .milkleft { position:absolute; left:0px; top:30%; width:30%; height: auto; }
section.product .mbox .milkleft img { width:100%; background-size: contain;}
section.product .mbox .milkright { position:absolute; right:-5%; top:30%; width:30%; height: auto; }
section.product .mbox .milkright img { width:100%; background-size: contain;}
section.product .mbox .milkleft1 { position:absolute; left:0px; top:30%; width:30%; height: auto; }
section.product .mbox .milkleft1 img { width:100%; background-size: contain;}
section.product .mbox .milkright1 { position:absolute; right:0px; top:30%; width:30%; height: auto; z-index: -1; }
section.product .mbox .milkright1 img { width:100%; background-size: contain;}
section.product .mbox .milkleft2 { position:absolute; left:-2%; top:10%; width:20%; height: auto;   }
section.product .mbox .milkleft2 img { width:100%; background-size: contain;}

section.product .mbox .milkleft3 { position:absolute; left:0%; top:55%; width:39.3%; height: auto;   }
section.product .mbox .milkleft3 img { width:100%; background-size: contain;}
section.product .mbox .milkleft4 { position:absolute; left:0px; top:30%; width:20%; height: auto; }
section.product .mbox .milkleft4 img { width:100%; background-size: contain;}
section.product .mbox .milkright4 { position:absolute; right:0px; top:30%; width:20%; height: auto; z-index: -1; }
section.product .mbox .milkright4 img { width:100%; background-size: contain;}

section#why { width: 100%; box-sizing: border-box; padding: 50px 10%; background:#f11822; background-size: contain; height: 80vh; float: right; position: relative;}
section#why .man { width:35%; position: absolute; height: auto; left: 10%; bottom: -5px;}
section#why .man img { width:100%; background-size: contain;}


section#why h4 { color:#fff; font-size: 54px; line-height: 62px; margin-bottom: 40px; text-align:right; margin-top: 10%; font-weight: 900; font-family: 'Cairo', sans-serif;}
section#why ul li { list-style:none; height: 20px; line-height: 20px; margin-bottom:10px; padding-right: 5px; color:#fff; font-weight: 300; font-size:16px;  font-family: 'Cairo', sans-serif;}
section#why ul li::before { content:""; margin-top:5px; height:15px; width:15px; background: #fff; margin-left: 10px; border-radius: 180px; float: right; -webkit-box-shadow: -2px 6px 74px -37px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 6px 74px -37px rgba(0,0,0,0.75);
box-shadow: -2px 6px 74px -37px rgba(0,0,0,0.75);}
section#why ul  { padding-right: 10px;}

section#contact { width:100%; padding: 80px 10%; float: left; height: auto; min-height: 60vh; background: #fff; }
section#contact .cbox { width:60%; float: none; margin:20px auto; display: block;}
section#contact .cbox h2 { font-size:60px; text-align: center; color:#000; margin-top: 20px; }
section#contact .cbox .textt { height:50px; border-radius: 20px; padding: 10px 20px; background: #f4f3f2; border: none; font-size:14px; margin-bottom: 12px; width: 100%; color: #000; font-weight: 400;}
section#contact .cbox .textta { height:120px; padding: 10px; background: #f4f3f2; border: none; font-size:14px; margin-bottom: 12px; width: 100%; color: #000; font-weight: 400; border-radius: 20px;}
section#contact .cbox .submit { float:none; height: 40px ; width:120px; border-radius: 5px; padding: 10px 20px; margin: 15px auto; display: block; cursor: pointer;background: #fff; color:#000; text-align: center; line-height: 15px; border: 1px solid #f11822; font-weight: 700;}
section#contact .cbox .submit:hover { background: #f11822; color:#FFF;}
section#footer { width:100%; height: 110px; padding: 20px 10%; margin-top: 0px; background:#f11822;; background-size: cover;  float: left; }
section#footer .social { width:380px; margin-top: 10px; float: right; height: 30px; font-size: 14px; color: #fff; line-height: 40px; text-align: right;}
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; direction: ltr; 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; 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: 40px; font-size: 14px; line-height: 20px;}
	section#what { padding: 30px 5%;}
	section.product .mbox { margin-bottom: 20px;}
	section.product .bgbx { width:100%; border-radius: 0px; background-color: #f11822; padding-left: 35%;}
	section.product .bgbx1 { width:100%; border-radius: 0px; background-color: #f11822; padding-right: 35%;}
	section.product .bgbx h1 { font-size:32px; line-height: 40px;}
	section.product .bgbx1 h1 { font-size:32px; line-height: 40px;}
	section.product .bgbx p { font-size:15px; ;line-height:20px;}
	section.product .pbox { width:35%; top:20%; left:3%;}
	section.product .pbox1 { width:35%; top:20%; right:3%;}
	section.product .mar { margin-left: 0px;}
	section.product .gbox { width:80%; margin: 5px 10%;}
	section.product .size { font-size:40px !important;}
	section#why { height:65vh;  padding: 20px 5px;}
	section#why h4 { margin-top: 0px; font-size: 24px; line-height: 30px; }
	section#why ul li { font-size: 13px; margin-bottom: 20px;}
	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:2em; line-height: 1.5em;}
	header { height:50px; top:0px;}
	header #logo { height:40px; width:120px; }
	header .social { margin-top: 0px;}
	section.product .mbox .milkright {right:-22%; }
	.milkleft3 { display:none;}

	
	
}

@media screen and (min-width:451px) and (max-width:768px) {
	section#banner { height: 70vh;  background: url("../images/banner-mob.jpg") no-repeat; 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:40px; line-height: 50px;}
	section.product .bgbx p { font-size:15px; ;line-height:20px;}
	section.product .pbox { width:50%; top:20%;}
	section.product .mar { margin-left: 0px;}
	section.product .gbox { width:80%; margin: 5px 10%;}
	section.product .size { font-size: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;}
	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;}
	header #logo { height:40px; width:120px; }
	header .social { margin-top: 0px;}
	section.product .mbox .milkright {right:-10%; }
	.milkleft3 { display:none;}
	
	
	
}

@media screen and ( min-width:1200px) and (max-width:1300px) {
	
	section.product .bgbx h1 { font-size:3.5em;}
	section.product .bgbx1 h1 { font-size:3.5em;}
	section#contact .cbox h2 { font-size: 3em;}
	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:3.5em;}
	section.product .bgbx1 h1 { font-size:3.2em;}
	section#contact .cbox h2 { font-size: 3em;}
	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#contact .cbox { width:70%;}
	section.product .bgbx h1 { font-size:2.5em;}
	section#contact .cbox h2 { font-size: 3em;}
	section.product .bgbx1 h1 { font-size:2.5em;}
	section#what { padding: 40px 10%;}

	section#contact .cbox h2 {font-size: 2em !important;}
	section.product .size  { font-size:70px !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:80px;}
	section.product .bgbx p { font-size: 24px; line-height: 28px;}
	section.product .size  { font-size:60px !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;}
	
}