/*
Project: Nashat Garments
Domain : www.nashatgarments.com
Company: PixalFLoat
Author : Shameer
Version: 0.2.1
*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Noto+Kufi+Arabic:wght@100..900&display=swap');

* { 
	margin:0; padding:0; font-style: normal; font-weight: 400;
	font-family: "Cairo", sans-serif; }

.cairo-<uniquifier> {
  font-family: "Cairo", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0; }
.noto-kufi-arabic-<uniquifier> {
  font-family: "Noto Kufi Arabic", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal; }

body {
	margin: 0; padding: 0; overflow-x:hidden !important;
	font-weight: 400; font-size: 16px; color:#1B271F;
	background: #fff; text-align:right;}


img { max-width: 100%; height: auto; }

h1, h2, h3 { 
	color:#1B271F; text-align: right;
	font-family: "Noto Kufi Arabic", sans-serif !important;
	margin:0 0 50px; padding:0; line-height:1.3; }
h4, h5 { 
	color:#1B271F; text-align: right;
	font-family: "Noto Kufi Arabic", sans-serif !important;
	margin:0 0 50px; padding:0; line-height:1.3; }

h1 { font-size:60px; }
h2 { font-size:46px; }
h3 { font-size:40px; }
h4 { font-size:35px; }
h5 { font-size:30px; }
h6 { 
	margin:0 0 20px 0; padding:0; 
	font-family: "Noto Kufi Arabic", sans-serif; 
	font-size:22px; color:#141414; text-align: right; }

a[href^="tel"] {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}
p { 
	text-align: right;
	font-size:16px; font-weight:400; line-height: 1.5;
	margin:0 0 25px; padding:0; color:#1B271F; }
p a { text-decoration:underline; color:#231F20; }
p a:hover { color:#F90044; }

span {}
strong { font-weight:700; }

a { text-decoration:none; color:#F90044; transition: all 1s; }
a:hover { color:#F90044; }
a img { border: none; outline: none; }

@media(max-width:1200px){
	h1, h2, h3 { margin:0 0 30px; }
	h4, h5, h6 { margin:0 0 20px; }
}
@media(max-width:991px){
	h1 { font-size:48px; }
	h2 { font-size:40px; }
	h3 { font-size:36px; }
	h4 { font-size:30px; }
	h5 { font-size:22px; }
	h6 { font-size:20px; }
	p  { font-size:15px; line-height: 1.6;  margin:0 0 20px; }
}
@media(max-width:767px){
	h1, h2, h3 { margin:0 0 15px; }
	h4, h5, h6 { margin:0 0 10px; }
	h1 { font-size:40px; }
	h2 { font-size:36px; }
	h3 { font-size:30px; }
	h4 { font-size:22px; }
	h5 { font-size:20px; }
	h6 { font-size:18px; }
	p { font-size:14px; }
}
@media(max-width:575px){ }
::after,
::before { font-family: "Font Awesome 5 Free"; font-weight:900; }
a::after,
a::before { 
	display: inline-block; margin:0 8px 0 0; padding:0; }
a.white_button,
a.button {
	display: inline-block;
	margin:0; padding:5px 0;
	text-decoration: none; 
	border-radius: 0px; text-transform: capitalize;
	font-weight:400; font-size:14px; color:#F90044; text-align: center;
	background:none; border-bottom:2px solid #F90044; }
a.white_button { background:#fff; color:#000; border:none;}
a.button:hover { background:none; }
a.white_button:hover { background:#F90044; }

a.readmore { font-weight:500; color:#00276C; }
a.readmore span { display: inline-block; margin:0 5px 0 0; }
a.readmore::after { content:'\f178'; }
a.readmore:hover { color:#F90044; }

a.readback { font-weight:500; color:#F90044; }
a.readback::before { content:'\f060';}
a.contact-button { 
	color:#000; text-transform: uppercase; }
@media(max-width:767px){
	a.whtie_button, a.button { padding:13px 20px; font-size:13px; }
}
.text-center {
	text-align: center; }

ul, ol {}
ul li, ol li {
	position: relative;
	margin:0 0 10px; padding:0 0 0 20px; }
ul li a, ol li a { text-decoration: underline; }

ul.nostyle {
	list-style: none; margin:0; padding:0;
}ul.nostyle li {  }

ul.listing { 
	width:100%; float:left; list-style: none;
	margin:0; padding:0; }
ul.listing strong { font-weight:600; }
ul.listing li  { 
	position:relative; padding:0 0 10px 20px; margin:0; }
ul.listing li::before { 
	position:absolute; top:0; left:0; content:'-'; }
ul.listing li a {}

/* FORM CONTENT ----------*/
input[type="text"], input[type="tel"], input[type="number"],
input[type="date"], input[type="email"], 
textarea, select, option {
	color:#6C757D; font-size:13px; font-weight:400;
	background:#fff; border:1px solid #E5E5E5; }
input[type="text"], input[type="tel"], input[type="number"],
input[type="date"], input[type="email"] { 
	width:100%; height:46px;  border-radius:4px;
	padding:10px 15px; margin:20px 0 0; }
input[type="date"] {
	max-width: 150px; }
input[type="number"] {
	max-width: 130px; }
select {
	width:100%; height: 40px; 
	padding:10px 15px; margin:0 0 15px; }
textarea { 
	width:100%; height: 100px; padding:10px 15px; margin:0 0 15px;
	resize:none; outline: none; border-radius:3px; }
input[type="submit"],
input[type="button"]{
	width:100%; min-height:50px; max-width:220px;
	background:#F90044; color:#fff; font-size:14px;
	font-weight:600; border-radius: 3px;
	border:1px solid #F90044; outline:none; cursor: pointer; }
input[type="submit"]:hover,
input[type="button"]:hover { 
	background:#000; color:#F90044; border-color:#F90044; }
button { border:none; outline:none; background:none; }

/*  MENU  ----------------------*/

.top-menu { 
	eft; width: auto; float:right;
	padding:0; margin:0; text-align: center; }
.language-dropdown {
	text-align: left; float:left;
	position: relative;
	display: inline-block; }
.language-dropdown img { 
	width:20px; margin:0; padding:0; }
.language-dropdown span { 
	display: inline-block; margin:0 5px 0 10px; padding:0; }
.language-dropdown ul { margin:4px 0 0 0; padding:0; } 
.language-dropdown ul li { list-style:none; margin:0; padding:0;}
.language-dropdown ul li a { font-size:14px; margin:0; padding:0; }
.language-dropdown ul li a:hover { text-decoration: none; }
.language-dropdown ul li a::after { display: none; }

/* DROP DOWN MENU  ------------*/
.menu-button { 
	display: none;
	cursor: pointer; float:left;
	width:40px; height:40px; 
	margin:0; padding:6px 0 0; line-height:2.6;
	color:#fff; text-align:center; font-size:16px;
	background:none; border-radius: 0px; }
.menu-close {
	display: none; background:#fff;
	width:30px; height:30px;
	position: absolute; top:90px; right:20px;
	text-align: center; line-height: 30px;
	font-size:1.1em; color:#000; cursor: pointer;
	border-radius: 30px; -webkit-border-radius: 30px; 
	-moz-border-radius: 30px; /*border:1px solid #3a88fa;*/ }
.menu-area ul { 
	margin:0; padding:0; list-style:none; float:right;}
.menu-area ul li { display: inline-block; padding:0; margin:0 18px; }
.menu-area ul li a  {
    margin: 0;
    padding: 0;
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 18px;
    text-decoration: none;
    color: #1B271F;
    position: relative;
    overflow: hidden;
}

.menu-area ul li a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: red;
    transition: width 0.3s ease;
}

.menu-area ul li a:hover::after {
   width:100%;
}
@media screen and (max-width:1200px) {
  .menu-area ul li a { font-size:17px; }
	.menu-area ul li { margin:0 13px; }
}
@media screen and (max-width:1000px) {
	.menu-close, .menu-button { display: block; }
	.menu-area { 
		transition: all 1s;
		width:100%; height:0vh; overflow:hidden;
		margin:0; padding:0;
		opacity: 0; 
		position: fixed; top:0; left: 0; z-index: -1;
		background:#000; }
	.menu-area .top-menu { 
		width:100%;
		margin:0; padding:140px 0 50px; }
	.menu-area ul { 
		width:100%; display: block;
		margin:0; padding:0; }
	.menu-area ul li { 
		width:100%; float:left; text-align: center; margin:10px 0 20px; padding:0; }
	.menu-area ul li a { 
		font-family: "Noto Kufi Arabic", sans-serif;
		font-size:2.5rem; color:#fff; text-decoration:none; }
	.menu-area ul li a.button { 
		font-size:1.4em; padding:10px 20px; border-color:#333; color:#333; }
	.menu-area ul li a:hover { 
		color:#333; }
	.top-menu { float:left; }	
	.language-dropdown { width:100%; float:right; text-align:center; padding:10px 0 15px; }
	.language-dropdown ul { display: inline-block; float:none; }
	.language-dropdown span { padding:0; margin:0px 10px 0 0; display: inline-block; font-size:22px; }
	.language-dropdown img { display: inline-block; margin:4px 0 0; padding:0; width:25px; }
	.language-dropdown a:hover { color:#fff; }

}

@media (max-width: 767px) {  }
@media (max-width:575px) { 
	.menu-area ul li a { font-size: 2rem; }
}
@media (max-width:380px) { }
/* menus script ---*/
.menu-active { 
	width: 100%; height:100vh; display: block; overflow-y:auto; opacity:1;  z-index: 5001;}

/* owl carousel ------------- */
.owl-carousel .owl-nav {
/* 	position: absolute; top:35%; right:0; z-index: 2001; */
}
.owl-carousel .owl-nav div {
	width:35px; height:35px; line-height:36px;
	margin:0; padding:0; float: left;
	color:#7D7D7D; text-align:center; font-size:17px;
	background: #fff; border-radius:3px; }
.owl-carousel .owl-nav div.owl-next { position: absolute; top:40%; right:-45px; }
.owl-carousel .owl-nav div.owl-prev { position: absolute; top:40%; left:-45px;  }
.owl-carousel .owl-nav div:hover { background: #F90044; }

@media(max-width:767px){
	.owl-carousel .owl-nav { display: none; }
}
.owl-carousel .owl-dots {
	margin:10px 0 10px;
	text-align: center; }
.owl-carousel .owl-dots .owl-dot {
	display: inline-block;
	width:10px; height: 10px;
	margin:0 3px; padding:0;
	background: #CCCFCE; border-radius:10px;
	-webkit-border-radius:10px; -moz-border-radius:10px; }
.owl-carousel .owl-dots .owl-dot.active {
	background:#F90044; }
.next-slide, .prev-slide { cursor: pointer; }



/* ------------------------------------ */
/* Masonry components ----------------- */
.grid {
	max-width: 100%;
	list-style: none;
	margin: 30px auto;
	padding: 0;
}

.grid li {
	display: block;
	float: left;
	padding:15px;
	width: 33%;
	opacity: 0;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
	border-radius: 10px;
}



/* Effect 2: Move Up */
.grid.effect-2 li.animate {
	-webkit-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}