*{font-family: 'Poppins', sans-serif;}
body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

a{
	text-decoration: none;
	color: #000;
}

ul{
	padding-left: 0;
	margin: 0;
}

ul li{
	list-style: none;
	float: left;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin: 0;
	color: #fff;
}

canvas{
	width: 400px!important;
	height: 400px!important;
}

.cloudimage-360{
	justify-content: center;
	align-items: center;
	height: 70vh;
}

.cloudimage-inner-box div{
	justify-content: center!important;
}

@font-face {
  font-family: PoppinsLight;
  src: url(fonts/PoppinsLight.otf);
}

@font-face {
  font-family: Poppins;
  src: url(fonts/PoppinsRegular.otf);
}

@font-face {
  font-family: PoppinsMedium;
  src: url(fonts/PoppinsMedium.otf);
}

@font-face {
  font-family: Poppins;
  src: url(fonts/Poppins.otf);
}

header,
main,
div,
section,
footer,
article,
nav{
	display: flex;
}

main{
	width: 100vw;
	align-items: center;
	flex-direction: column;
}

.over{
	overflow: hidden;
}

.conmob{
	display: none;
}

.first{
	width: 85.4vw;
	height: auto;
	flex-direction: column;
}

header{
	width: 100%;
	align-items: center;
}

.logo{
	margin: 2vh 0;
	width: 15vw;
}

.logo img{
	width: 50%;
}

.menu-web{
	height: 100%;
	width: 70vw;
	justify-content: center;
}

.menu-web ul{
	display: flex;
	width: 100%;
	justify-content: center;
}

.menu-web ul li{
	display: flex;
	width: 10vw;
	justify-content: center;
	align-items: center;
}

.menu-web ul li:focus a,
.menu-web ul li:hover a{
	color: #FAD970;
	transition: all .3s;
}

.menu-web ul li a{
	text-transform: uppercase;
	font: normal 1.250em Poppins;
}

/*MENU*/


.menu-tab {
  height: 70px;
  z-index: 101;
  top: 0px;
  right: 0px;
  cursor: pointer;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  flex-direction: column;
  justify-content: center;
  /*end of div*/
}
.menu-tab div {
  width: 33px;
  height: 4px;
  background-color: #2d2d2d;
  display: block;
  margin: 5px 0 5px 28px;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

/*end of menu-tab*/
.active {
  -webkit-transition: all 600ms ease-in-out;
  transition: all 600ms ease-in-out;
  border-radius: 50%/100%;
}

.menu-tab.active #one {
  -webkit-transform: translateY(14px) rotate(-135deg);
          transform: translateY(14px) rotate(-135deg);
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  background-color: #000;
}

.menu-tab.active #three {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  background-color: #000;
}

.menu-hide {
  width: 538px;
  right: -538px;
  height: 100vh;
  position: fixed;
  z-index: 100;
  top: 0px;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}

.sidebar-nav nav,
.menu-hide nav{
	width: 80%;
}

.menu-hide nav{
	height: 90vh;
}

.sidebar-nav nav ul {
	flex-direction: column;
}

.sidebar-nav nav > ul > li,
.menu-hide nav > ul > li {
	height: 70px;
	list-style-type: none;
	width: 70%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	display: flex;
	align-items: center;
}

.menu-hide nav > ul > li {
	padding: 0 24px;
}

.sidebar-nav nav > ul > li:hover,
.menu-hide nav > ul > li:hover {
  background-color: #FAD970;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.sidebar-nav nav > ul > li:hover a{
	transform: translateX(24px);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.menu-hide nav ul li:nth-child(12):hover,
.menu-hide nav ul li:nth-child(10):hover,
.menu-hide nav ul li:nth-child(11):hover{
	background-color: #fff;
}

.menu-hide nav ul li:nth-child(9){
	border-bottom: solid 2px #517a8540;
}

.menu-hide nav ul li:nth-child(10){
	padding: 48px 0 0 24px;
}

.menu-hide nav ul li:nth-child(12) a,
.menu-hide nav ul li:nth-child(11) a,
.menu-hide nav ul li:nth-child(10) i {
	color: #629DAC;
	transition: all 0.5s ease;
}

.menu-hide nav ul li:nth-child(12):hover a,
.menu-hide nav ul li:nth-child(11):hover a,
.menu-hide nav ul li:nth-child(10) i:hover  {
	color: #517A85;
}

.sidebar-nav nav ul li a,
.menu-hide nav ul li a {
	text-decoration: none;
	font-weight: 800;
	font: normal 1.250em Poppins;
	line-height: 1.75em;
	color: #517A85;
}

.menu-hide nav > ul > li:nth-child(1){
	background: #FAD970;
	border-radius: 30%/100%;
	width: 35%;
	display: flex;justify-content: center;align-items: center;
}

.menu-hide nav > ul > li:nth-child(1) a{
	color: #000;
}

.sidebar-nav nav ul li:nth-child(2) a,
.menu-hide nav ul li:nth-child(2) a{
	font-family: PoppinsLight;
}

.menu-hide nav ul li:nth-child(2):hover{
	background-color: #fff;
}

.extra{
	width: 100%;
}

.extra li{
	width: 15%!important;
}

.extra li a{
	float: left!important;
}

.extra li i{
	font-size: 1em;
}

.menu-layer{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #517A8540;
	z-index: 9;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.ml-show{
	display: none;
}

/*end of menu-hide*/
.show {
  right: 0px;
  background-color: #fff;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  box-shadow: -3px 0 9px -9px #000;
}

.color-palette{
	width: 10vw;
}
.language-mobile{
    align-items:center;
}
.language-mobile a{
    margin: 5px;
    background: #fad970;
    padding: 10px;
    border-radius: 37px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 23%;
}
.palet{
	font: normal 1em Poppins;
	padding: 15px 20px;
	border-radius: 30%/100%;
	background: #FAD970;
}

.menu{
	width: 5vw;
	justify-content: flex-end;
}


/*MAIN*/

.mainPage{
	width: 100%;
	height: 80vh;
}

.mainPage span{
	width: 674px;
	height: 70%;
	background: #FAD970;
	position: absolute;
	z-index: -1;
}

.mainPage img{
	width: 700px;
}

.mainImage{
	flex: 5;
	align-items: center;
	width: 50%;
}

article{
	flex-direction: column;
}

.slogan{
	flex: 3;
	justify-content: center;
	width: 40%;
}

.socialMain{
	flex: 2;
	align-items: flex-end;
}

.slogan h1{
	font: normal 1.250em Poppins;
	color: #517A85;
	text-transform: uppercase;
}

.slogan p{
	font: normal 2em Poppins;
	line-height: 1.5em;
	margin: 24px 0;
	color: #517A85;
	width: 90%;
}

.socialMedia{
	display: flex;
	flex-wrap: wrap;
	width: 60%;
}

.socialMedia ul{
	width: 100%;
}

.socialMedia li{
	width: 20%;
	justify-content: center;
}

.socialMedia li a{
	float: right;
}

.socialMedia i{
	font-size: 1.250em;
	color: #517A85;
}

.socialMediaContact{
	justify-content: flex-start;
}

.socialMediaContact i{
	font-size: 1.25em!important;
}

.socialMediaContact li {
    width: 10%!important;
}

.shortContact{
	flex-direction: column;
}

.shortContact a{
	color: #517A85;
	font: normal 3em Poppins;
}

.shortContact p{
	color: #517A85;
	margin: 0;
	font: normal 1em Poppins;
}

.shortContact{
    bottom: 0;
    flex: 1;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
}
/*MAIN*/

/*BOYA-AZ*/

.boya-az{
	justify-content: center;
	align-items: center;
	padding: 4em 0;
}

.boya-content{
	width: 85vw;
	height: 35vh;
}

.boya-mobile{
	flex: 1;
	border-radius: 6px;
	background: #F81155;
	padding:  48px 24px;
	color: #fff;
	margin-right:24px;
	position: relative;
}

.web-cap,
.mobile-cap{
	flex-direction: column;
}

.mobile-cap{
	flex: 2;
}

.boya-mobile div:nth-child(2){
	flex: 1;
}

.boya-mobile img{
	width: 100%;
	object-fit: contain;
}

.boya-web img{
	right: 0;
	bottom: 0;
	width: 100%;
	object-fit: contain;
}

.boya-web div{
	flex: 1;
}

.boya-web p,
.boya-mobile p{
	margin: 0;
	font: normal 1.125em Poppins;
}

.boya-web h1,
.boya-mobile h1{
	font: normal 2em Poppins;
	text-transform: uppercase;
	margin: 12px 0;
}

.boya-web a,
.boya-mobile a{
	padding: 16px 32px;
	border-radius: 3px;
	font: normal 1em Poppins;
	background: #FF2A69;
	color: #fff;
	width: fit-content;
	transition: .5s;
	box-shadow: 0px 10px 21px rgb(255 255 255 / 15%);
}

.boya-web a{
	background: #3EA3FE;
	box-shadow: 0px 10px 21px rgb(255 255 255 / 15%);
}

.boya-web a:hover,
.boya-mobile a:hover{
	transition: .5s;
	transform: scale(0.98,0.98);
	box-shadow: none;
}

.boya-web{
	flex: 2;
	border-radius: 6px;
	background: #0086FF;
	padding:  48px 24px;
	color: #fff;
	position: relative;
}


/*BOYA-AZ*/

/*sloganFirst*/

.sloganFirst, .sloganSecond{
	width: 100%;
	justify-content: center;
	align-items: center;
}

.sloganSecond,
.sloganFirst{
	height: 50vh;
}

.sloganFirst p{
	width: 65vw;
	text-align: center;
	font: normal 2em Poppins;
	color: #517A85;
	line-height: 1.5em;
}

.sloganSecond p{
	width: 65vw;
	text-align: center;
	font: normal 4em PoppinsMedium;
	color: #629DAC;
	line-height: 1.75em;
	background-color: #fff8;
}

.sloganSecond a{
	color: #FF5B16;
	font: normal 1.125em Poppins;
	display: flex;
	position: relative;
	flex-direction: column;
}

.sloganSecond a:before{
	content: '';
    width: 100%;
    height: 3px;
    background: #FF5B16;
    position: absolute;
    bottom: -10px;
}

.sloganFirst a{
	color: #517A85;
}

/*sloganFirst*/

/*ABCD*/

.pro{
	flex-direction: column;
}

.pro > a:nth-child(1){
	width: 100%;
	height: 100%;
}

.pro > div > a{
	width: 100%;
}

.pro > div{
	justify-content: space-between;
}

.layer{
	position: relative;
	flex-direction: column;
	background-size: cover;
	transition: .5s;
}

.layer:hover{
	transition: .5s;
	transform: scale(.98,.98);
}

.layer:before{
	content: '';
	width: 100%;
	height: 50%;
	position: absolute;
	z-index: 0;
    background-image: linear-gradient(to top, rgba(81, 122, 133, .9), rgba(81, 122, 133, .0));
}

.layer h1{
	font: normal 2em Poppins;
	padding: 48px;
	position: relative;
	z-index: 1;
}

.layer a:nth-child(2), .shipPaint a{
	font: normal 1.125em Poppins;
	padding: 15px 20px;
	border-radius: 30%/100%;
	background: #FAD970;
	width: 144px;
	margin-top: 3vh;
	text-align: center;
	color: #000;
	margin-left: 48px;
	position: relative;
	z-index: 1;
}


.shipPaint a{
	margin-left: 0;
}

.b, .c{
	width: 100%;
	height: 55.7vh;
}

.a{
	width: 100%;
	height: 55.7vh;
	background: url(img/a.webp) center center;
}

.b{
	background: url('img/b.webp');
	margin: 24px 0;
}

.c{
	background: url('img/c.webp');
	margin: 24px 0;
}

.d{
	width: 100%;
	height: 55.7vh;
	background: url('/uploads/photo_2021-08-23_11-05-48.jpg');
	    background-position: bottom;

}

.a, .b, .c, .d{
	background-size: cover;
	justify-content: flex-end;
}

/*ABCD*/

/*GALLERY*/

.gallery{
	height: 80vh;
}

.gallery img{
	width: 100%;
	object-fit: cover;
    height: 100%;
}

.gallery div{
	background-size: cover;
}

.firstCol{
	flex: 2;
	flex-direction: column;
}

.firstCol > div{
	height: 50%;
	width: 100%;
}

.firstColUp{
}

.firstColUpLeft{
	width: 50%;
	background: url('img/d.webp') center center;
	margin-right: 24px;
}

.firstColUpRight{
	width: 50%;
	background: url('img/e.webp') center center;
}

.firstColDown{
	margin-top: 24px;
	background: url('img/i.webp') center center;
}

.secondCol{
	flex: 1;
	margin: 0 24px;
	background: url('img/h.webp') center center;
}

.thirdCol{
	flex: 1;
	flex-direction: column;
}

.thirdColUp{
	background: url('img/g.webp') center center;
	width: 100%;
	height: 50%;
}

.thirdColDown{
	background: url('img/f.webp') center center;
	width: 100%;
	height: 50%;
	margin-top: 24px;
}

/*GALLERY*/

/*PRODUCTS*/

.products{
	height: 120vh;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.prof {
	flex: 1;
	/* height: 60vh; */
	flex-direction: column;
	margin: 2vh 0;
}

.prof div{
	height: 50%;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.prof p{
	font: normal 1.25em PoppinsLight;
	line-height: 1.5em;
	color: #517A85;
}

.prof h1{
	font: normal 2em Poppins;
	/* line-height: 2.5em; */
	color: #0f0f0f;
}

.prof a{
	font: normal 1em Poppins;
	line-height: 1.5em;
	color: #0f0f0f;
	border: solid 2px #0f0f0f;
	padding: 16px 32px;
	width: 50%;
	text-align: center;
}

.productImage{
	width: 100%;
	justify-content: center;
	align-items: center;
}

.productImage img{
	justify-content: center;
}

.productSecond{
	margin: 0 24px;
	background: #FAD970;
	padding: 24px;
}

/*PRODUCTS*/

/*shipPaint*/

.shipPaint{
	    width: 100%;
    height: 40vh;
    background: url(img/aa.jpg) center center;
    background-size: cover;
    justify-content: center;
    background-repeat: no-repeat;
    background-position-x: right;
    align-items: center;
}

.shipPaint > div{
	width: 85.4vw;
	flex-direction: column;
}

.shipping p{
	font: normal 1em Poppins;
	line-height: 1.5em;
	color: #517A85;
}

.shipPaint p{
	font: normal 1.25em Poppins;
	line-height: 1.5em;
	width: 30%;
	color: #fff;
	padding-left: 3vw;
}

.shipPaint a{
	margin-left: 3vw;
}

/*shipPaint*/

/*Video Background*/

.videoBg{
	width: 100%;
	/* height: 100vh; */
	justify-content: center;
	align-items: center;
	background: #fff;
	/* margin-bottom: 20vh; */
}

.videoBg h1{
	position: absolute;
	font: normal 7em Poppins;
	text-transform: uppercase;
	text-align: center;
}

.video {
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  background-size: cover;
  object-fit: contain;
}

/*Video Background*/

/*shipping*/

.shipping{
	width: 100%;
	/* height: 100vh; */
	flex-direction: column;
	align-items: center;
	flex-direction: column;
}

.shipping article{
	width: 85.4vw;
	/* height: 90vh; */
	justify-content: center;
	flex-direction: column;
}

.shipping article h1{
	font: normal 5em PoppinsMedium;
	color: #517A85;
	margin: 10vh 0 3vh 0;
}

.shipping article p{
	color: #629DAC;
	width: 40%;
}

.shippingMethods{
	height: 60vh;
	width: 85.4vw;
	justify-content: center;
	align-items: center;
}

.method{
	flex-direction: column;
	flex: 1;
	max-width: 33%;
	justify-content: center;
	align-items: center;
}

.method img{
	height: 100%;
	width: 100%;
}

.method div{
	width: 60%;
}

.capImg{
	min-height: 40vh;
}

.caption{
	flex-direction: column;
	width: 70%;
}

.caption h1{
	font: normal 2em PoppinsMedium;
	color: #517A85;
}

.caption p{
	color: #629DAC;
}

/*shipping*/

/*footer*/

footer{
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

footer article{
	width: 85.4vw;
	height: 90vh;
	justify-content: center;
}

footer article p:nth-child(1){
	font: normal 1.5em PoppinsLight;
	line-height: 1.5em;
	color: #517A85;
}

footer article p:nth-child(2){
	font: normal 3em PoppinsLight;
	color: #FF5B16;
}

footer article p:nth-child(3),
footer article p:nth-child(4){
	font: normal 3em PoppinsLight;
	color: #517A85;
	margin: 0;
	line-height: 1.75em;
}

.footerInfo{
	width: 85.4vw;
	height: 10vh;
	justify-content: center;
}

.footerInfo a{
	width: 50%;
	height: 100%;
	font: normal 1.125em PoppinsLight;
	color: #629DAC;
    display: flex;
    align-items: center;
}

.footerInfo a:nth-child(2){
	justify-content: flex-end;
}

.footerInfo span{
	color: #517A85;
}

/*footer*/

/*MEHSULLAR*/

.shortcut{
	width: 100%;
	height: 5vh;
	align-items: center;
}

.shortcut i{
	width: 2vw;
	text-align: center;
	color: #629DAC;
}

.shortcut a{
	font: normal 1em PoppinsLight;
	color: #629DAC;
}

.shortcut a:last-child{
	color: #517A85;
}

.mehsul{
	height: 70vh;
	width: 100%;
	align-items: center;
}

.sidebar-nav{
	flex: 2;
	height: 100%;
}

.mehsullar{
	flex: 3;
	align-items: flex-end;
	height: 100%;
}

.mehsul-a{
	flex: 1;
	height: 90%;
	position: relative;
}

.bg-img{
	width: 80%;
	height: 100%;
	position: relative;
	transition: all .7s;
}

.bg-img img{
	width: 100%;
	height: 100%;
	position: absolute;
	background-size: cover;
	object-fit: cover;
}

.bg-img a{
	position: relative;
	z-index: 99;
	color: #fff;
	font: normal 1.25em Poppins;
	padding: 24px;
}

.mehsul-pre img{
	width: 100%;
	position: absolute;
}

.mehsul-pre{
	width: 70%;
    position: absolute;
    height: -webkit-fill-available;
    align-items: flex-end;
    right: 0;
    	bottom: 0px;
}

.mehsul-image img{
	object-fit: contain;
    width: 100%;
    max-height: 300px;
}


/*MEHSULLAR*/

/*ƏLAQƏ*/

.product-img,
.contact-img{
	flex: 1;
	position: relative;
}

.product-img{
	max-height: 100vh;
}

.contact-img{
	height: 70vh;
}

.contact-img img,
.product-img img{
	width: 100%;
	object-fit: contain;
}

.product-info,
.contact-info{
	flex: 2;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.contact-info h1:first-child{
	font: normal 4em Poppins;
}

.product-info h1,
.contact-info h1{
	color: #517A85;
	font: normal 2.5em Poppins;
	padding: 12px 0;
}

.product-info h1{
	font: normal 1em PoppinsLight;
	padding: 0;
	margin: 3vh 0;
}

.pro-name{
	align-items: center;
}

.pro-name h1{
	font: normal 2.5em PoppinsMedium!important;
	flex: 1;
	padding-right: 24px;
}

.pro-name a{
	font: normal 1em Poppins;
	color: #FF5B16;
	padding: 16px 32px;
	height: fit-content;
	border-radius: 3px;
}

.pro-order:hover{
	background: #FF5B16;
	color: #fff;
}

.pro-order i{
	padding: 0 6px;
}

.pro-order{
	border: solid 3px #FF5B16;
}

.anla,
.tetbiq,
.terkib{
	flex-direction: column;
}

.contact-info p{
	color: #517A85;
	font: normal 1.125em Poppins;
}

.product-info p{
	font: normal 1em PoppinsLight;
	line-height: 1.75em;
}

.pro-info-det,
.con-info-det{
	flex-direction: column;
	width: 80%;
}

.pro-info-det{
	justify-content: space-between;
}

.pro-det ul{
	width: 100%;
}

.pro-det li{
	width: 100%;
	display: flex;
}

.pro-det h1,
.pro-det p{
	display: inline-block;
	width: 50%;
	margin: 12px 0;
}

.xett{
	flex-direction: column;
	width: 10vw;
	height: 13vh;
	background: #517A85;
	border-radius: 6px;
	justify-content: center;
	margin: 24px 0;
}

.xett h1,
.xett p{
	color: #fff;
	padding: 0;
	margin: 0;
}

.xett h1{
	padding: 0 24px;
	font: normal 3em PoppinsMedium;
}

.xett p{
	padding: 12px 24px;
}

.con-info-det ul{
	width: 50%;
	margin-top: 24px;
}

.con-footer{
	height: 10vh;
	background: #517A85;
}

.con-footer a,
.con-footer span{
	color: #fff;
}

/*ƏLAQƏ*/

/*HAQQIMIZDA*/
.first-haq{
	align-items: center;
}

.com-image{
}

.com-image{
	background: #517A85;
	padding: 0;
	margin: 24px 0;
	width: 100%;
	max-height: 50vh;
}

.com-image >div{
	width: 100%;
}

.com-image img{
	width: 100%;
	object-fit: cover;
}

.hashtwo,
.hashone{
	flex: 1;
}

.hashtwo-text,
.hashone-text{
	flex: 1;
}

.hashtwo-text p,
.hashone-text p{
	font: normal 1.125em PoppinsLight;
	color: #517A85;
	line-height: 1.5em;
}

.hashtwo h1,
.hashone h1{
	font: normal 3em PoppinsMedium;
	color: #517A85;
}

.about-com,
.list-com{
	padding: 4em 0;
	width: 100%;
}

.hashtwo-text{
	flex-direction: column;
}

.hashtwo-text h1{
	font: normal 2em PoppinsMedium;
	color: #517A85;
}

.hashtwo h1{
	width: 70%;
}

.companies{
	justify-content: space-between;
    width: 71vw;
}

.companies div{
	width: 13.5vw;
	height: auto;
	transition: .5s;
}

.companies div:hover{
	transition: .5s;
	transform: scale(0.98,0.98);
}

.companies a{
	width: 100%;
	height: 100%;
}

.companies img{
	width: 100%;
	object-fit: cover;
}

/*HAQQIMIZDA*/

/*MƏHSUL SIYAHI*/

.product-list{
	flex: 4;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.product-name{
	font: normal 2em PoppinsMedium;
	color: #517A85;
	margin: 2vh 0;
}

.product{
	width: 100%;
	height: auto;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 24px 0;
}

.product >div{
	width: 15.5vw;
	box-shadow: 0 0 6px -4px rgba(0,0,0,0.4);
	margin: 12px 0;
	padding: 24px;
	flex-direction: column;
}

.mehsul-meh{
	height: auto;
	align-items: flex-start;
}

.parent-img{
	position: relative;
	width: 100%;
	height: 50%;
	flex: 1;
	justify-content: center;
}

.child-img{
	width: 100%;
}

.why-we h1,
.product h1{
	font: normal 1.25em Poppins;
	color: #517A85;
	margin: 1vh 0;
}

.product p{
	font: normal 1em PoppinsLight;
	color: #517A85;
}

.product a{
	font: normal 1em PoppinsLight;
	color: #FF5B16;
	padding: 6px 24px;
	border: solid 2px #FF5B16;
	border-radius: 6px;
	transition: .5s;
}

.product a:hover{
	background-color: #FF5B16;
	color: #fff;
	transition: .5s;
}

.product ul{
	width: 50%;
	display: flex;
	flex: 1;
}

.more-button{
	align-items: center;
}

.product ul li{
	width: 16px;
	height: 16px;
	background: #FF5B16;
	border-radius: 100%/100%;
	margin: 0 3px;
}

.why-we{
	/* height: 70vh; */
	justify-content: center;
}

.why-we h1{
	font: normal 3em PoppinsMedium;
	color: #517A85;
	margin: 48px 0;
}

.why-we ul{
	width: 100%;
}

.why-we ul li{
	font: normal 1.125em Poppins;
	color: #517A85;
	width: 50%;
	/* height: 10vh; */
	margin: 2vh 0;
}

.why-we ul li p{
	width: 70%;
	display: inline-block;
	font-family: PoppinsLight;
	letter-spacing: 1px;
}

.why-we span{
	display: inline-block;
	width: 24px;
	height: 24px;
	border: solid 3px #629DAC;
	background: #5CD2AD;
	border-radius: 100%/100%;
	margin-right: 24px;
}

/*MƏHSUL SİYAHI*/

/*MƏHSUL MƏLUMAT*/

.more-pro{
    height: 70vh;
    flex-wrap: nowrap;
    align-items: center;
}

/*MƏHSUL MƏLUMAT*/

/*RƏNG KATALOQU*/

.catalog{
	width: 85.4vw;
	flex-direction: column;
}

.preview h1{
	text-shadow: 1px 1px 5px #000;
}

.preview{
	width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.preview-one{
	width: 27vw;
	height: 40vh;
	justify-content: space-between;
	margin-top: 3vh;
}

.preview-img{
	flex: 3;
}

.preview-img img{
	width: 100%;
	background-size: cover;
}

.preview-col{
	flex: 1;
	flex-direction: column;
}

.preview-col div{
	flex: 1;
	justify-content: center;
	align-items: center;
}

.preview-col div h1{
	font: normal 1em PoppinsLight;
}

.preview-col div:nth-child(1){
	background: #BDBCB8;
}

.preview-col div:nth-child(2){
	background: #494A4C;
}

.preview-col div:nth-child(3){
	background: #B6A18A;
}

.list-cat{
	width: 85.4vw;
}

.list-cat div:first-child{
	align-items: flex-end;
	align-items: center;
}

.list-cat div:last-child{
	justify-content: flex-end;
}

.list-cat h1{
	/* width: 50%; */
}

.list-cat-text h1{
	width: 100%;
	font: normal 1.5em Poppins;
}

.list-cat-text p{
	margin-bottom: 0;
}

.ral{
	width: 85.4vw;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-wrap: wrap;
}

.ral-one{
	margin: 3vh;
	flex-wrap: wrap;
}

.ral-one div{
	width: 64px;
	height: 64px;
	margin: 12px;
	justify-content: center;
	align-items: center;
}

.ral-one p{
	color: #101010;
	font: normal 1em Poppins;
	transition: .5s;
}

.ral-one div:hover p{
	display: block;
	cursor: pointer;
	transition: .5s;
}

.ral-one div:nth-child(1){
	background: #BDBCB8;
}

.ral-one div:nth-child(2){
	background: #494A4C;
}

.ral-one div:nth-child(3){
	background: #B6A18A;
}

.ral-one div:nth-child(4){
	background: #B6A19A;
}

.notice ul li{
	display: flex;
	align-items: center;
}

.notice ul li p{
	width: 80%;
}

/*RƏNG KATALOQU*/



/*BACK TO TOP BUTTON*/

#button {
  display: inline-block;
  background-color: #FAD970;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button i {
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

/*BACK TO TOP BUTTON*/

/*YENI NEW*/

.new{
	width: 48px;
	height: 48px;
	background: #FF5B16;
	border-radius: 24px;
	box-shadow: 0 0 10px -4px rgba(0,0,0,.3);
	justify-content: center;
	align-items: center;
	align-self: flex-end;
}

.new p{
	margin: 0;
	padding: 0;
	color: #fff;
	font: normal 1em Poppins;
}

/*YENI NEW*/

/*RESPONDIVE*/

@media only screen and (max-width: 1440px) {
	.logo img {
	    width: 70%;
	}

	.menu-web ul li {
    	width: 12vw;
    }

    .menu-web{
    	width: 65vw;
    }

    .menu-hide nav{
    	height: 90vh;
    }

    .mainPage {
	    height: 75vh;
	}

    .color-palette {
    	width: 15vw;
    }

    .mainPage span {
    	width: 474px;
    }

    .mainPage img {
	    width: 576px;
	}

	.slogan p{
		font-size: 2em;
	}

	.socialMain {
	    flex: 2;
	}

	.sloganFirst p{
		font-size: 1.75em;
	}

	.layer h1{
		font: normal 2em Poppins;
    	width: 40%;
	}

	.a, .d{
		height: 60vh;
	}

	.b, .c{
	    height: 45vh;
	}

	.layer a:nth-child(2), .shipPaint a{
		padding: 15px 10px;
	}

	.gallery {
	    height: 70vh;
	}

	.sloganSecond p{
		font-size: 3em;
	}

	.xett{
		width: 15vw;
	}

	.mehsul-image h1{
		margin: 2vh 0;
	}

	.pin-spacer{
		height: 220vh!important;
	}

	footer article p:nth-child(1){
		font-size: 1.25em;
	}

	footer article p:nth-child(2),
	footer article p:nth-child(3),
	footer article p:nth-child(4){
		font-size: 1.75em;
	}

	.shipping article h1 {
    	font: normal 3em PoppinsMedium;
    }

	.shipping article p {
	    width: 60%;
	}

	.method div {
	    width: 80%;
	}

	.method p {
    font: normal 1em PoppinsLight;
}

@media only screen and (max-width: 1224px) {
    .color-palette {
	    /* width: 20vw; */
	}

	.menu-web {
	    width: 60vw;
	}

	.menu-web ul li {
	    width: 15vw;
	}

	.menu-web ul li a {
	    font-size: 1.125em;
	}

	.socialMedia i{
	    font-size: 1em;
	}

	.mainPage span {
	    width: 274px;
	}

	.mainPage img {
	    width: 376px;
	}

	.slogan h1 {
    	font-size: 1em;
    }

    .slogan p {
	    font-size: 1.5em;
	}
}


@media only screen and (max-width: 1024px) {
	.logo img {
	    width: 40%;
	}

	.menu-web ul li a{
		font-size: 1em;
	}

	.menu-web{
		width: 62vw;
	}

	.color-palette{
		width: 18vw;
	}

	.color-palette a{
		font-size: .9em;
	}

	.mainPage span {
	    width: 374px;
	}

	.mainPage img {
	    width: 406px;
	}

	.slogan h1, .socialMedia i, .shortContact a, .prof p, .caption p, .footerInfo a{
		font-size: 1em;
	}

	.slogan p {
	    font-size: 1.5em;
	}

	.sloganFirst p, .caption h1{
	    font-size: 1.125em;
	}

	.a, .d {
	    height: 60vh;
	}

	.b, .c {
	    height: 50vh;
	}

	.sloganSecond p,
	footer article p:nth-child(2),
	footer article p:nth-child(3),
	footer article p:nth-child(4){
	    font-size: 2em;
	}

	.prof p, footer article p:nth-child(1){
		line-height: 1.25em;
	}

	.videoBg h1{
		font-size: 5em;
	}

	.shipping{
		/* height: 120vh; */
	}

	.shipping article h1{
		font-size: 3em;
	}

	.shipping article p{
		width: 50%;
		font-size: 1em;
	}

	.shippingMethods {
    	height: 80vh;
	}

	.mehsullar{
		flex-direction: column;
	}

	.mehsullar .mehsul-a:nth-child(2){
		margin: 24px 0;
	}

	.mehsul-a{
		width: 100%;
	}

	.bg-img{
		width: 100%;
	}

	.mehsul-pre{
		width: 30%;
	}

	.sidebar-nav nav > ul > li{
		padding: 0;
		width: 100%;
	}

	.sidebar-nav nav ul li a{
		font-size: 1.125em;
	}

	.com-image,
	.companies,
	.list-com,
	.about-com{
		width: 85.4vw;
	}

	.companies div{
		width: 15vw;
	}

	.hashtwo h1,
	.hashone h1{
		font-size: 2em;
	}

	.hashtwo-text h1{
		font-size: 1.5em;
	}

	.product-details{
		flex-direction: column;
	}

	.product-img{
		flex: auto;
    	height: 35vh;
    	margin: 48px 0;
	}

	.pro-info-det{
	    width: 100%;
	}

	.more-pro{
		flex-wrap: wrap;
		height: 100vh;
	}

	.product >div {
	    width: 22.5vw;
	}

	.preview-one {
    	 width: 41vw;
    }

    .notice ul li {
    	width: 50%;
    }

    .boya-content{
    	height: auto;
    }

    .boya-web, .boya-mobile{
    	flex: 1;
    }

    .boya-web h1, .boya-mobile h1{
    	font-size: 1.25em;
    }

}

@media only screen and (max-width: 768px) {
	.menu-web, .color-palette{
		display: none;
	}

	.logo {
	    width: 30vw;
	}

	.menu-tab {
	    width: 70vw;
	    align-items: flex-end;
	}

	.mainPage {
	    height: 65vh;
	    flex-direction: column;
	}

	.mainPage span {
	    width: 90vw;
	    height: 30%;
	}

	.mainPage img {
	    width: 306px;
	}

	.socialMain{
		display: none;
	}

	.slogan {
    	flex: 5;
    	width: 100%;
    }

    .conmob{
    	display: flex;
    }

    .shortContact {
	    align-items: flex-start;
	    justify-content: flex-start;
	}

	.shortContact a{
		font-size: 2em;
	}

	.sloganFirst p, .caption h1 {
	    font-size: 1.5em;
	}

	.sloganFirst p{
	    width: 85vw;
	}

	.pro div:nth-child(2){
		flex-direction: column;
	}

	.layer{
		height: 35vh;
	}

	.layer:before {
    width: 100%;
	}

	.b, .c{
		margin: 0;
		width: 100%;
	}

	.b{
		margin: 24px 0 12px 0;
	}

	.c{
		margin: 12px 0 24px 0;
	}

	.layer h1{
		width: 70%;
	}

	.gallery{
		height: 100vh;
		flex-direction: column;
	}

	.secondCol{
		margin: 24px 0;
	}

	.thirdCol {
	    flex-direction: row;
	}

	.thirdColDown, .thirdColUp{
		height: 100%;
		margin: 0;
	}

	.thirdColUp{
		margin-right: 24px;
	}

	.sloganSecond {
	    height: 50vh;
	}

	.productSecond{
		display: none;
	}

	.shipPaint, .videoBg, .shippingMethods, footer{
    	height: 50vh;
    }

    .shipPaint p {
    	width: 70%;
    }

    .videoBg h1 {
	    font-size: 4em;
	}

	.shipping article p {
	    width: 90%;
	}

	.capImg {
	    min-height: 20vh;
	}

	.method div {
	    width: 70%;
	}

	.caption h1 {
    	font-size: 1em;
	}

	.contact{
		flex-direction: column;
	}

	.contact-img {
	    flex: auto;
	}

	.con-info-det {
	    width: 100%;
	    height: 70vh;
	}

	.xett {
	    width: 25vw;
	}

	.list-com,
	.about-com{
		flex-direction: column;
	}

	.companies{
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.companies div{
		width: 15vw;
	}

	.companies div {
	    width: 48%;
	}

	.product >div {
	    width: 32.5vw;
	}

	.notice ul li {
	    width: 100%;
	}

	.prof div{
		align-items: center;
	}

	.prof a{
		width: 35%;
	}

	.productImage img {
    	width: 50%;
		object-fit: contain;
	}

	.pin-spacer{
		height: 230vh!important;
	}

	.cloudimage-360 {
	    height: 100vh;
	}

	.boya-mobile,
	.boya-web{
		flex-direction: column;
		padding: 0;
	}

	.boya-mobile div,
	.boya-web div{
		padding: 2em;
	}

	.boya-mobile div:nth-child(2),
	.boya-web div:nth-child(2){
		height: 20vh;
	}

	.boya-mobile img,
	.boya-web img{
    	object-position: top;
	}

	.boya-mobile img{
		object-fit: cover;
	}
}

@media only screen and (max-width: 425px) {
	.first{
		width: 90vw;
	}

	.mainImage{
		height: 30vh;
		z-index: 0;
	}

	.slogan{
	    position: relative;
	    bottom: 0;
	    margin: 5vh 0;
	}

	.logo, .menu{
		width: 50vw;
	    position: relative;
	    z-index: 99;
	}

	.menu-hide {
    	width: 438px;
	}

	.menu-hide nav {
	    width: 70%;
	    align-items: center;
    	height: -webkit-fill-available;
	}

	.menu-hide nav ul {
	    height: 70%;
	}

	.menu-hide nav > ul > li{
		width: 100%;
		height: 50px;
	}

	.menu-hide nav ul li a{
		font-size: 1em;
	}

	.menu-hide nav ul li:nth-child(9){
		padding: 0 24px;
	}

	.sloganFirst p, .caption h1 {
	    font-size: 1.125em;
	    text-align: start;
	}

	.layer h1 {
		font-size: 1.75em;
    	padding: 24px;
    }

    .layer a:nth-child(2){
    	padding: 10px 5px;
    	font-size: 1em;
    	margin-left: 24px;
    }

	.b{
		margin: 12px 0 6px 0;
	}

	.c{
		margin: 6px 0 12px 0;
	}

	.firstColUpLeft, .thirdColUp{
		margin-right: 12px;
	}

	.secondCol {
	    margin: 12px 0;
	}

	.firstColDown {
    	margin-top: 12px;
    }

    .sloganSecond p{
    	font-size: 1.5em;
    }

    .sloganSecond p {
    	width: 95vw;
    }

    .products{
    	flex-direction: column;
    }

    .productSecond {
	    margin: 0;
	}

	.shipPaint > div {
	    width: 90vw;
	}

	.shipPaint p{
	    font-size: 1em;
	    width: 90%;
	}

	.videoBg h1 {
	    font-size: 2em;
	}

	.shipping article {
	    width: 90vw;
	}

	.shippingMethods {
		width: 95vw;
		height: 150vh;
	   flex-direction: column;
	}

	.method{
		max-width: 100%;
	}

	footer{
		height: 70vh;
	}

	footer article p:nth-child(2),
	footer article p:nth-child(3),
	footer article p:nth-child(4){
		font-size: 1.25em;
	}

	.footerInfo{
		flex-direction: column;
		height: 10vh;
		width: 90vw;
	}

	.footerInfo a {
	    width: 100%;
	}

	.footerInfo a:nth-child(2) {
	    justify-content: flex-start;
	}

	.mehsul{
		flex-direction: column;
	}

	.first-meh{
		width: 90vw;
	}

	.shortcut i {
    	width: 8vw;
    }

    .shortcut{
    	opacity: .7;
    }

    .shortcut:hover,
    .shortcut:focus{
    	opacity: 1;
    }

    .mehsul {
    	height: 130vh;
    }

    .mehsullar{
    	width: 100%;
    }

    .bg-img-layer{
    	width: 100%;
	    height: 100%;
	    background: rgba(81, 122, 133, .3);
	    position: absolute;
    }

    .contact-info h1{
    	font-size: 1.5em;
    }

    .xett {
	    width: 50vw;
	}

	.xett h1{
	    font-size: 3em;
	}

	.com-image{
		height: 25vh;
	}

	.companies div{
		margin: 6px 0;
	}

	.pro-name{
		height: auto;
	    flex-direction: column;
	    align-items: self-start;
	}

	.product >div {
	    width: 100%;
	    height: max-content;
	}

	.more-pro {
	    height: max-content;
	}

	.pro-det ul{
		width: 100%;
	}

	.shortcut a{
		font-size: .8em;
	}

	.mehsul-meh{
		min-height: max-content;
		height: -webkit-fill-available;
	}

	.why-we ul li{
		width: 100%;
	    display: flex;
	    align-items: center;
	}

	.why-we ul li p{
		width: 80%;
	}

	.preview-one{
		width: 100%;
	}

	.notice h1{
		font-size: 2em;
	}

	.mobile-sidebar{
		display: none;
	}

	.mehsul-meh .sidebar-nav{
		display: none;
	}

	.menu-tab {
    	width: 50vw;
    }

    .parent-img{
    	height: auto;
    }

    .pro-name h1{
    	font-size: 2em;
    	padding: 0;
    }

    .why-we h1{
    	font-size: 1.5em;
    }

    .why-we ul li{
    	height: auto;
    	font-size: 1em;
    }

    .boya-content{
    	flex-direction: column;
    }

    .boya-content{
    	height: auto;
    	padding: 0;
    }

    .boya-mobile{
    	margin-right: 0;
    }

    .boya-web{
    	margin-top: 24px;
    }

    .boya-mobile h1,
    .boya-web h1{
    	font-size: 1.25em;
    }
}

@media only screen and (max-width: 325px) {

	.shippingMethods{
		display: none;
	}

	.menu-hide nav{
		width: 50%;
	}

	.menu-hide nav > ul > li{
		height: 40px;
	}

	.slogan p, footer article p:nth-child(1) {
	    font-size: 1.25em;
	}

	.shippingMethods{
		height: 250vh;
	}

	.prof p, footer article p:nth-child(1) {
	    line-height: 1.5em;
	}

	.shipping article{
		height: 50vh;
	}

	.shipping article h1 {
	    font-size: 2em;
	}

	.shipping article p {
	    width: 100%;
	}

	footer {
	    height: 70vh;
	}

	.footerInfo a:nth-child(2){
		font-size: .8em;
	}

	.mehsul {
	    height: 170vh;
	}

	.contact{
		height: 120vh;
	}

	.contact-info{
		height: 100vh;
	}

	.con-info-det{
		height: 170vh;
	}

	.xett h1{
		font-size: 2em;
	}

	.xett p{
		padding: 0 24px;
	}

	.shortcut a {
	    font: normal .6em PoppinsLight;
	}

	.pro-name h1 {
	    font: normal 1.5em PoppinsMedium!important;
	}

	.product-info {
	    height: 240vh;
	}

	.product >div{
		height: 65vh;
	}

	.more-pro {
	    height: 320vh;
	}

	.productImage img{
		width: 50%;
	}

}