html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	vertical-align:baseline;
}

html
{
    height:100%; 
    margin-bottom: 0px; 
	font-family: 'Heebo', sans-serif;
}

body 
{
    text-align:center;
    height:100%; 
    margin-bottom: 0px;
	font-family: 'Heebo', sans-serif;
	direction:rtl;
	background-color: #D7E2FF;
	
}




/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
	background: #D6E2FF;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #5987F1; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #2F60D0; 
}





div.header{
	background-color: #A8BCF3;
	padding: 20px 0 2px 0;
	width: 100%;
	display: inline-block;
	text-align: center;
	background-image: url("../images/header-bg.jpg");
	background-position: bottom;
	background-size: cover;
	background-blend-mode: soft-light;
	background-repeat: no-repeat;
	background-position: 0 -524;
	overflow: hidden;
}



.search-container{
	overflow: hidden;
	position: absolute;
	
}


.search-container input.search-bar{
	display: inline-block; 
	float: left;
	outline: none;
	text-decoration: none;
	font-family: 'Heebo', sans-serif;
	padding: 5px 10px; 
	margin-left: 20px;
	margin-top: 15px;
	box-sizing: border-box;
	background-color: #E9FAFF;
	border: none;
	
}



.search-container button {
  float: left;
  padding: 5px 10px;
  margin-right: 16px;
  background: #ddd;
  font-size: 20px;
  border: none;
  cursor: pointer;
	color: #83BDD9;
	background-color: #282E2E;
	margin-top: 15px;
}

.search-container button:hover {
  background-color: #003E60;
	color: white;
}



h1{
	font-weight: 600;
	color: #2C4996;
	font-size: 27px;
	text-align: center;
	
}


img.logo{
	height: 80px;
	text-align: center;
}


*{
	box-sizing: border-box;
	scroll-behavior: smooth;
}

div.father-dropdowns{
	width: 100%;
	display: inline-flex;
		z-index: 33;

}

.dropbtn{
	background-color: #2C4996;
	color: white;
	padding: 16px;
	font-size: 19px;
	border: none;
	font-family: 'Heebo', sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	width: 100%;
	text-align: center;
	transition: 0.2s;
			z-index: 33;

}


.dropdown{
	position: relative;
	display: inline-block;
	width: 100%;
	transition: 0.2s;
			z-index: 33;

}

.dropdown-content{
	display: none;
	position: absolute;
	background-color: #A8BCF3;
	min-width: 100%;
	z-index: 1;
	transition: 0.2s;
	text-decoration: none;
			z-index: 33;

}

.dropdown-content a{
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	outline: none;
			z-index: 33;

}


.dropdown-content a:hover {background-color: #02164A; color: white;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #02164A;}

#papa{
	width: 60%;
	text-align: center;
	display: inline-block;
	overflow: hidden;
	background-color: #2C4996;
	outline: 10px solid #2C4996;
	position: relative;
}

div.first-part{
	width: 100%;
	display: inline-block;
}



.first-part img{
	width: 100%;
}


a.clickable1{
	text-decoration: none;
	font-size: 23px;
	border: 3px solid white;
	padding: 10px 20px;
	display: inline-block;
	color: white;
	outline: none;
	margin-left: 16px;
	transition: 0.3s;
	border-radius: 7px;

}

a.clickable1:hover{
	color: aqua;
	border: 3px solid aqua;
	
}

a.clickable1 img{
	margin-left: 6px;
	margin-bottom: -2px;
}






div.contact-us h2{
	color: white;
	letter-spacing: 2px;
	font-weight: 800;
	font-size: 23px;

}

div.contact-us h3{
	color: aqua;
	letter-spacing: 1px;
	font-size: 18px;
}


div.contact-us p{
	color: aliceblue;
	
	
}


div.contact-us p.sub-text{
	font-weight: 600;
}

div.contact-us h4{
	font-weight: 900;
	color: aquamarine;
	
}


a.tel1{
	color: white;
	font-size: 25px;
	font-weight: 900;
	letter-spacing: 0.5px;
}


a.tel1:hover{
	color: yellowgreen;
}



a.mail1{
	color: white;
		font-size: 25px;
	font-weight: 200;
	letter-spacing: 0.5px;
}


a.mail1:hover{
	color: yellowgreen;
}



div.catalogs1 img{
	width: 250px;
}

div.catalogs1 p{
	color: white;
	font-size: 20px;
}

div.catalogs1 img{
	transition: 0.3s;
}


div.catalogs1 img:hover{
	transform: translateY(-10px);
}


div.about-us{
	text-align: center;
	display: inline-block;
	width: 80%;
}




div.about-us p.paragraph1{
	text-align: center;
	color: #ECECEC;
	
}





div.products1{
	float: left;
	overflow: hidden;
	width: 100%;
	display: inline-block;
	padding-bottom: 45px;
	padding-top: 20px;
	border-bottom: 5px #8EF2FF dotted;
	text-align: center;
	margin: 0 auto;
}



div.product-box{
	display: inline-block;
	text-decoration: none;
	margin: 20px;
	width: 250px;
}

div.product-box img{
	width: 100%;
	transition: 0.3s;


}





div.product-box h2{
	color: white;
	text-decoration: none;
	outline: none;
	font-size: 25px;
	font-weight: 900;
	letter-spacing: 0.5px;
	transition: 0.3s;
}

div.product-box:hover img{
	transform: translateY(-20px);
}




div.product-box:hover h2{
	letter-spacing: 1px;
	text-shadow: 1px 1px 10px #00D7F1;
	

}






































 #papa h1{
	color: white;
	letter-spacing: 1px;
	margin-top: 45px;
	margin-bottom: 25px;
	background-color: #262626;
}


div.p-box1{
	
	width: 30%;
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
	margin-bottom: 20px;
	margin: 10px 0;
	vertical-align: middle;
    height: 350px;
}

dov:hover .p-box1{
	color: white;
}


div.p-box1 img{
	width: 50%;
	text-align: center;
	display: inline-block;
	transition: 0.2s;
	margin-bottom: 9px;
	
}


div.p-box1:hover img{
	transform: scale(1.1);
	border-radius: 25px 25px 25px 25px ;
	border: rgba(255,255,255,0.2) solid 3px;
	
	
}

div.p-box1 h5{
	font-weight: 800;
	color: white;
	letter-spacing: 0.4px;
	font-size: 18px;
		transition: 0.2s;
		margin: 5px 0;


}

div.p-box1:hover h5{
	text-shadow: 0 0 5px mediumspringgreen;
		cursor: zoom-in;
	letter-spacing: 1px;

}



div.p-box1 h7{
	color: yellow;
	font-weight: 900;
	letter-spacing: 0.5px;
	font-size: 13px;
	display: block;
	margin-bottom: 5px;
	margin-top: -5px;
	transition: 0.2s;
	
	
}


div.p-box1:hover h7{
	letter-spacing: 1.5px;
}



div.p-box1 h6{
	font-weight: 400;
	color: mediumspringgreen;
	font-size: 15px;
	transition: 0.2s;
	background-color: #252525;
	width: 50%;
	display: inline-block;
	border-radius: 100px;
}

div.p-box1:hover h6{
	letter-spacing: 0.5px;
	cursor: zoom-in;
	width: 45%;

}




div.p-box1:hover img{
	
}


img.bd-logo{
	width: 14%;
	display: inline-block;
	text-align: center;
	transition: 0.3s;
}

img.bd-logo:hover{
	transform: scale(1.1) rotate(5deg);
}








div.products-links{
	display: inline-block;
	text-align: right;
	direction: rtl;
	float: right;
	right: 0;
	overflow: hidden;
	position: fixed;
	margin-right: 20%;
	
}

div.products-links a{
	color: white;
	text-decoration: none;
	outline: none;
	font-weight: 800;
	letter-spacing: 1.5px;
	transition: 0.3s;
	display: inline-block;
	overflow: hidden;
}

div.products-links a:hover{
	letter-spacing: 2px;

}


div.product-left{
	width: 50%;
	display: inline-block;
float: left;
	height: 100%;
	
}

div.product-left img{
	width: 80%;
	
}


div.product-right{
	width: 50%;
	float: right;
	display: inline-block;
	text-align: right;
	direction: rtl;
	
	
}

div.product-left h2{
	font-weight: 700;
	color: #FFEC6E;
	text-shadow: 0 0 8px black;
	transition: 0.2s;
	font-size: 26px;
	background-color: #001E6F;
	text-align: center;
	margin: 0 auto;
	border-radius: 100%;
	padding: 8px 3px;
	width: 80%;
}


div.product-left h2:hover{
	font-weight: 700;
	color: #FFF6BF;
	text-shadow: 0 0 8px black;
}

div.product-right h3{
	color: white;
	font-size: 20px;
	font-weight: 300;
	padding-bottom: 15px;
	border-bottom: 3px solid black;

	
}


div.product-right h4{
	color: aquamarine;
	font-weight: 300;
	letter-spacing: 0.3px;
	font-size: 16px;
	text-align: left;
	direction: ltr;
		padding-bottom: 15px;
	border-bottom: 3px solid black;
}





















.product-quantity h9 {
  display: block;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  margin-bottom: 0.25rem;
  color: white;
	font-weight: 200;
	margin: 5px;
}

.product-quantity {
  width: 100%;
	display: flex;
	text-align: right;
	margin: 10px;
}

.product-quantity input {
  max-width: 2rem;
  margin: 0;
  padding: 0.50rem 0;
  text-align: center;
  border-top: 1px solid grey;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
  border-right: 0;
	background-color: white;
	color: #1B1B1B;
	font-weight: 800;
}

.quantity-selectors-container {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0;
}

.quantity-selectors {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.quantity-selectors button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border-radius: 0;
  border: 1px solid grey;
  background-color: #fff;
  color: grey;
}

.quantity-selectors button:first-child {
  border-bottom: 0;
}

.quantity-selectors button:hover {
  cursor: pointer;
}

.quantity-selectors button[disabled="disabled"] {
  cursor: not-allowed;
}

.quantity-selectors button[disabled="disabled"] span {
  opacity: 0.5;
}




div.purchase-button{
	
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	
}

div.purchase-button a.pay-button{
	display: inline-block;
	padding: 8px 22px;
	margin: 6px;
	background-color: #008CD0;
	font-weight: 300;
	letter-spacing: 1px;
	color: white;
	text-align: center;
	text-decoration: none;
	outline: none;
	outline: 1px solid white;
	transition: 0.2s;
	box-sizing: border-box;
	overflow: hidden;
		font-size: 18px;


}

div.purchase-button a.pay-button:hover{

background-color: #007DB9;
	outline: 1px solid white;
	outline-offset: -3px;
	text-shadow: 0 0 4px white;
}




div.purchase-button a.send-mail{

background-color: #00B920;

}



div.purchase-button a.send-mail:hover{

background-color: #00A71C;
	outline: 1px solid white;
	outline-offset: -3px;
	text-shadow: 0 0 4px white;
}



div.product-right h8{
	text-decoration: none;
	color: #FFEE0B;
	display: inline-block;
	font-size: 19px;
	outline: none;
	font-weight: 700;
	letter-spacing: 0.5px;
	transition: 0.2s;
	background-color: #1B1B1B;
	padding: 0 35px;
	border-radius: 330px 0 330px 0;
	text-align: right;
	
	
}

div.product-right h8:hover{
	padding: 0 20px;
	box-shadow:
    2px 0 0 #FFEE0B,
    0 2px 0 #FFEE0B,
    2px 2px 0 #FFEE0B,
    -2px 0 0 #FFEE0B,
    0 -2px 0 #FFEE0B,
    -2px -2px 0 #FFEE0B,
    -2px 2px 0 #FFEE0B,
    2px -2px 0 #FFEE0B;
	transform: translateX(-10px);
}








div.product-left p{
	color: rgba(228,250,255,0.80);
	font-size: 11px;
}















.card-price {
	display: inline-block;
  
  width: 100%;
	height: 38px;
	
	background-color: #6ab070;
	-webkit-border-radius: 3px 4px 4px 3px;
	-moz-border-radius: 3px 4px 4px 3px;
	border-radius: 3px 4px 4px 3px;
	
	border-left: 1px solid #6ab070;

	/* This makes room for the triangle */
	margin-left: 19px;
	
	position: relative;
	
	color: white;
	font-weight: 300;
	font-size: 22px;
	line-height: 38px;

	padding: 0 10px 0 10px;
	text-align: center;
	transition: 0.3s;
}


.card-price:hover{
	width: 95%;
}

/* Makes the triangle */
.card-price:before {
	content: "";
	position: absolute;
	display: block;
	left: -19px;
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	border-right: 19px solid #6ab070;
}

/* Makes the circle */
.card-price:after {
	content: "";
	background-color: white;
	border-radius: 50%;
	width: 4px;
	height: 4px;
	display: block;
	position: absolute;
	left: -9px;
	top: 17px;
}





div.buy-page2 img{
	transition: 0.4s;
	box-sizing: border-box;
}

div.buy-page2 img:hover{
	transform: rotate(5deg);

}

div.buy-page1 img{
	transition: 0.4s;

}



div.buy-page1 img:hover{
	transform: rotate(5deg);

}





div.sizes{
	width: 100%;
	display: inline-block;
	color: yellow;
	text-decoration: none;
	text-align: center;
	margin: 0 auto;
	margin-top: -35px;
}

div.sizes p{
	padding: 0 10px;
	margin: 3px;
}



div.sizes a.sizes-button{
	text-decoration: none;
	outline: none;
	background-color: white;
	color: black;
	padding: 2px 15px;
	border-radius: 8px;
	display: inline-block;
	font-weight: 900;
	border: 2px black solid;
	transition: 0.2s;
}


div.sizes a.sizes-button:hover{
	background-color: black;
	color: white;
	
}



h2.call-gabi{
	display: inline-block;
	text-decoration: none;
	outline: none;
	color: white;
	font-size: 25px;
	background-color: midnightblue;
	width: 100%;
	padding: 3px 0;
}


a.call-gabi{
	display: inline-block;
	text-decoration: none;
	outline: none;
	color: white;
	font-weight: 700;
	letter-spacing: 0.5px;
	transition: 0.2s;
}


a.phone-now:hover{
	color: #48F6FF;
	text-shadow: 0 0 3px black;
}


img.sales-text{
	width: 30%;
}


a.tel1:hover{
	color: greenyellow;
}



a.mail1:hover{
	color: greenyellow;
}







































































































a.to-top-button{
	display: flex;
	color: cornflowerblue;
	font-size: 32px;
	bottom: 5px;
	left: 15px;
	text-decoration: none;
	outline: none;
	position: fixed;
	float: left;
	transition: 0.2s;
}



a.to-top-button:hover{
	transform: translateY(-8px);
	color: #39CAFF;
}








footer.footer{
	width: 100%;
	background-color: #2C4996;
	text-align: center;
	bottom: 0;
	display: inline-block;
}



.footer p{
	display: inline-block;
	color: #9BABD5;
	font-size: 11px;
	margin: 15px 20px;
}




.footer h3{
	text-decoration: none;
	text-align: center;
	display: inline-block;
	color: white;
	outline: none;
	transition: 0.3s;
}


.footer h3:hover{
	color: aquamarine;
}



.footer i{
	color: aliceblue;
	margin: 0 5px;
	display: inline-block;
	transition: 0.2s;
}

.footer i:hover{
	transform: rotate(22deg);
}




h8.bold-text{
	font-size: 55px;
	font-weight: 900;
	color: #FFD442;
	text-shadow: 1px 1px 5px black;
}


div.contact-us p{
	color: #FFFE51;
	font-weight: 400;
}



div.contact-us i{
	color: white;
	font-size: 45px;
	transition: 0.3s;
}


div.contact-us i:hover{
	color: greenyellow;
}













div.top-sales{
	align-content: center;
	margin: 0 auto;
	display: inline-block;
	background-image: url("../images/top-sales-bg.png");
	background-size: cover;
	background-position: center;
}


div.top-sales a{
	text-decoration: none;
	outline: none;
	border: none;
}



div.go-to-shop{
	background-color: #151515;
	color: white;
	cursor: pointer;
	text-decoration: none;
	border: none;
	outline: none;
	text-align: left;
	padding-left: 10px;
		transition: 0.3s;
	display: inline-block;
	width: 100%;

}

div.go-to-shop i{
	font-size: 21px;
	display: inline-block;
	margin: 2px 8px;
	color: #B0B0B0;
}


div.go-to-shop h4{
	transition: 0.3s;
}


div.go-to-shop:hover h4{
	text-shadow: 0 0 3px white;
	transform: translateX(-6px);
}



div.top-sales h2{
	font-size: 32px;
	color: #272727;
	font-weight: 900;
	letter-spacing: 1px;
	outline: solid 8px;
	outline-offset: -6px;
	transition: 0.2s;
}


div.top-sales h2:hover{
		text-shadow: 0px 0px 6px white;
	letter-spacing: 1.5px;
	cursor: pointer;

}




div.top-sales img{
	width: 25%;
	display: inline-block;
	text-decoration: none;
	border: none;
	outline: none;
	margin: 15px;
	transition: 0.5s;
	
}


div.top-sales img:hover{
	transform: translateY(-20px);
}


div.top-sales{
	background-color: #F5F4FF;
	width: cover;
	background-position: center;
}














































.pagination {
  display: inline-block;
}

.pagination a {
  color: white;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #5DB6FF;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #272727;
  border-radius: 5px;
}
























@media (max-width: 1000px) {

	
	
	div.search-container{
		visibility: hidden;
	}
	
	
	
	div.first-part img{
		width: 100%;
	}

	
	#papa{
	width: 100%;
}
	

	
	a{
		font-size: 32px;
		text-decoration: none;
    outline: none;
    border: none;
    border-bottom: none;

	}
	
	h1{
		font-size: 55px;
	}
	
		h2{
		font-size: 55px;
	}
	
		h3{
		font-size: 55px;
	}
	
	
		h4{
		font-size: 55px;
	}
	
		h5{
		font-size: 55px;
	}
	
	
		h6{
		font-size: 55px;
	}
	
	
		h7{
		font-size: 55px;
	}
	
	
		p{
		font-size: 32px;
	}
	
	
	button{
		
        font-size: 55px;

	}

	nav{
				font-size: 55px;

	}
	
	
	.dropbtn{
		font-size: 45px;
		width: 100%;
	}
	
	div.dropdown{
		width: 100%;
	}
	
	
	div.catalogs1 img{
		width: 75%;
		
	
	}
	
	
	div.product-box img{
		width: 75%;
	}
	
	
	img.logo{
		height: 200px;
	
	}
	
	
	div.header{
		    background-position: 0 -280px;

	}
	
	
	div.first-part a{
		width: 85%;
		font-size: 33px;
		margin: 10px;
		
	}
	
	
	
	#papa img.sales-text{
		width: 50%;
	}
	

	div.product-box{
		width: 50%;
	}
	
	div.product-box h2{
		font-size: 50px;
		margin: 10px;
		letter-spacing: 1px;
	}
	
	

	
	
	div.p-box1{
		width: auto;
		display: block;
		height: auto;
		text-align:  center;
		margin: 0 auto;
		padding: 20px;
		text-decoration: none;
		outline: none;
		border: none;
		border-bottom: 4px dotted white;
		margin-top: 33px;
		
	}
	
		
div.p-box1 img {
    width: 80%;
	}

	
	
	img.bd-logo{
		width: 30%;

	}
	
	div.p-box1 h5{
		font-size: 43px;
		text-decoration: none;
		outline: none;
		border: none;
	}
	
		div.p-box1 h7{
		font-size: 15px;
		text-decoration: none;
		outline: none;
	}
	
	
	div.p-box1 h6{
		visibility: hidden;
	}
	
	a.p-box1{
		text-decoration: none;
		outline: none;
		border: none;
		
	}
	
	div.pagination a{
		font-size: 45px;
	}

	
	
	div.product-left{
		float: none;
		width: 100%;
		display: inline;
	
	}
	
	
	div.product-left img{
		width: 50%;
		margin: 40px;
	
	}
	
	
	div.product-right{
		width: 90%;
		display: inline-block;
		margin: 0 auto;
		margin-right: 5%;
	
	
	}
	
	
	
	
	a.pay-button{
		width: 100%;
	}
	

	div.purchase-button a.pay-button{
		font-size: 33px;
	}
	
	div.product-left h2{
		font-size: 44px;
	}
	

	h8.bold-text{
	    font-size: 146px;
    font-weight: 900;
    color: #FFD442;
    text-shadow: 1px 1px 5px black;
    line-height: 80%;
}


div.contact-us p{
	color: #FFFE51;
	font-weight: 400;
}



div.contact-us i{
	color: white;
    font-size: 110px;
	transition: 0.3s;
}
	
	div.sizes a.sizes-button{
		width: 33%;
	}
	
	div.sizes p{
		font-size: 40px;
	}
	
	
	div.top-sales{
		width: 100%;
		background-image: none;
		background-color: white;
	}
	
	div.top-sales img{
		width: 50%;
		margin: 42px 0;
	}
	
	
	div.top-sales h2{
		font-size: 55px;
		
		
	}
	
	div.top-sales h4{
		margin: 0 auto;
		text-align: center;
	}
	
	
	div.top-sales i{
		font-size: 66px;
	}
	
	
	div.product-right h8{
		transform: scale(1.6);
	}
	
	
	
	
	
	
	
	
	
	
}
















$("button").on("click", function(ev) {
  var currentQty = $('input[name="quantity"]').val();
  var qtyDirection = $(this).data("direction");
  var newQty = 0;
  
  if (qtyDirection == "1") {
    newQty = parseInt(currentQty) + 1;
  }
  else if (qtyDirection == "-1") {
    newQty = parseInt(currentQty) - 1;
  }

  // make decrement disabled at 1
  if (newQty == 1) {
    $(".decrement-quantity").attr("disabled", "disabled");
  }
  
  // remove disabled attribute on subtract
  if (newQty > 1) {
    $(".decrement-quantity").removeAttr("disabled");
  }
  
  if (newQty > 0) {
    newQty = newQty.toString();
    $('input[name="quantity"]').val(newQty);
  }
  else {
    $('input[name="quantity"]').val("1");
  }
});