/*-----------------------------------------------------------------------------------
Copyright (c) 2024
Theme Name:  -
Theme URI:   -
Description: -
Author:      - Adem Duran -
Author URI:  - https://bionluk.com/adeemdrn - https://ademduran.com - @frontend.adem -
Version:     - 1.01 -

-----------------------------------------------------------------------------------*/

/*==================================================
===| Global Css
===================================================*/
@charset "UTF-8";

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	font-size: 100%;
	box-sizing: border-box;
	box-sizing: inherit;
}

input,
button,
select,
textarea {
	outline: none;
}

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

a {
	text-decoration: none !important;
}

section {
	margin: 100px 0;
}

body {
	overflow-x: hidden;
	flex-direction: column;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif !important;
	font-weight: var(--fw-4) !important;
	font-size: var(--fs-15) !important;
	letter-spacing: -0.8px;
}

/*==================================================
===| Roote Settings
===================================================*/

:root {
	/* Theme Color */
	--blackColor: #545454;
	--textColor: #f4f4f4;
	--whiteColor: #fff;
	--redColor: #ff000f;
	--greyColor: #6b6969;

	--br-5: 5px;
	--br-10: 10px;
	--br-15: 15px;
	--transition4: all 0.4s ease-in-out;
	--transition8: all 0.8s ease-in-out;

	/* Font Size */
	--fs-12: 12px;
	--fs-13: 13px;
	--fs-14: 14px;
	--fs-15: 15px;
	--fs-16: 16px;
	--fs-17: 17px;
	--fs-18: 18px;
	--fs-19: 19px;
	--fs-20: 20px;
	--fs-21: 21px;
	--fs-22: 22px;
	--fs-23: 23px;
	--fs-24: 24px;
	--fs-25: 25px;
	--fs-26: 26px;
	--fs-27: 27px;
	--fs-28: 28px;
	--fs-29: 29px;
	--fs-30: 30px;
	--fs-31: 31px;
	--fs-32: 32px;
	--fs-33: 33px;
	--fs-34: 34px;
	--fs-35: 35px;
	--fs-40: 40px;
	--fs-45: 45px;
	--fs-50: 50px;
	--fs-55: 55px;
	--fs-60: 60px;
	--fs-65: 65px;
	--fs-70: 70px;
	--fs-75: 75px;

	/* Font Weight */
	--fw-1: 100;
	--fw-2: 200;
	--fw-3: 300;
	--fw-4: 400;
	--fw-5: 500;
	--fw-6: 600;
	--fw-7: 700;
	--fw-8: 800;
	--fw-9: 900;
}

/*==================================================
===| Theme Settings
===================================================*/

html ::-webkit-scrollbar {
	width: 2px;
}

html ::-webkit-scrollbar-button {
	display: none;
}

html ::-webkit-scrollbar-track-piece {
	background-color: transparent;
}

html ::-webkit-scrollbar-thumb {
	background-color: var(--blackColor);
	border-radius: 1px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	-ms-border-radius: 1px;
	-o-border-radius: 1px;
}

html ::-webkit-scrollbar-thumb:hover {
	background-color: var(--textColor);
	border-radius: 1px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	-ms-border-radius: 1px;
	-o-border-radius: 1px;
}

html ::-webkit-scrollbar-corner {
	background-color: transparent;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}

/*==================================================
===| Header Top
===================================================*/
.spinner {
	border: 4px solid #e6e9f9;
	border-top-color: var(--redColor);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999 !important;
	display: none;
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
.lazyload {
	opacity: 0;
	position: relative;
}
.lazyload.loading + .spinner {
	display: block;
}
.lazyload.lazyloaded {
	opacity: 1;
	transition: opacity 1500ms;
}
.sticky-top {
	top: 110px !important;
}
/*==================================================
===| Sticky Menu Css
===================================================*/
.header.menu_sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding: 15px 0;
	background: #000;
	z-index: 1030;
	-webkit-box-shadow: 0px 15px 35px rgba(33, 34, 38, 0.041);
	box-shadow: 0px 15px 35px rgb(33, 34, 38, 0.041);
}
@-webkit-keyframes slideInDown {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes slideInDown {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.slideInDown {
	-webkit-animation-name: slideInDown;
	animation-name: slideInDown;
}

.animated {
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/*==================================================
===| Header Css
===================================================*/
.header {
	background-color: #000;
}
.header .head__menu .nav-link,
.header .right__lang .dropdown .btn {
	color: var(--textColor);
	transition: var(--transition4);
}
.header .head__menu .nav-link.active {
	color: var(--redColor);
}
.header .head__menu .nav-link:hover {
	color: var(--redColor);
}
.header .right__lang .search .btn svg {
	fill: var(--textColor);
}
.offcanvas .nav-link {
	color: white;
}
.offcanvas .nav-link.active {
	color: var(--redColor);
}

/*==================================================
===| Banner Wrapper Css
===================================================*/
.banner__wrapper {
	height: 750px;
	justify-content: center;
	align-items: center;
	display: flex;
}
.banner__wrapper h1 {
	color: var(--textColor);
	position: relative;
}
.banner__wrapper h1::before {
	width: 80px;
	height: 4px;
	border-radius: var(--br-5);
	position: absolute;
	left: 0;
	top: -40px;
	content: "";
	z-index: 1;
	background-color: var(--redColor);
}
.banner__wrapper .desc p {
	color: var(--textColor);
	font-size: var(--fs-18);
}
.banner__wrapper.page_banner {
	height: 450px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.banner__wrapper video {
	position: absolute;
	width: 100%;
	height: 750px;
	object-fit: cover;
}
/*==================================================
===| About Css
===================================================*/
.about__wrapper .large__title h2 {
	font-weight: var(--fw-4);
}
.about__wrapper .large__title span {
	color: var(--redColor);
}
.about__wrapper .small__title span {
	color: var(--redColor);
}
.about__wrapper .about__content span,
.about__wrapper .about__content p {
	font-size: var(--fs-18);
}
.about__wrapper .about__content p {
	font-size: var(--fs-18);
	font-weight: var(--fw-5);
}
.about__wrapper .about__content span {
	color: var(--blackColor);
	font-weight: var(--fw-5);
}
.about__btn a,button {
	background-color: var(--redColor);
	padding: 15px 60px;
	color: var(--whiteColor);
	font-size: var(--fs-17);
	border-radius: var(--br-5);
	transition: var(--transition4);
}
.about__wrapper .about__btn {
	transform: translateY(100px);
	position: relative;
	z-index: 3;
}
.about__wrapper .about__btn a:hover {
	background-color: #da1321;
}
/*==================================================
===| Services Css
===================================================*/
.services__wrapper .ser__btn .btn {
	padding: 15px 50px !important;
}
.services__wrapper .small__title span {
	color: var(--redColor);
}
.services__wrapper .head__content h3 {
	font-weight: var(--fw-4);
}
.services__wrapper .card__item {
	background-color: #212121;
	padding: 35px 18px 35px 18px;
	border-radius: var(--br-5);
}
.services__wrapper .card__item .icon {
	width: 100px !important;
	height: 50px !important;
	justify-content: center;
	align-items: center;
	display: flex;
	margin-right: 20px;
	background-color: #3b3b3b;
	border-radius: var(--br-5);
	position: relative;
}
.services__wrapper .card__item .icon::before {
	height: 72px;
	width: 3px;
	position: absolute;
	background-color: #3b3b3b;
	transform: translateX(-50%) !important;
	left: 50% !important;
	bottom: -85px !important;
	content: "";
}
.services__wrapper .card__item .content .title strong {
	color: var(--whiteColor);
}
.services__wrapper .card__item .content .desc p {
	color: #b0b0b0;
	margin: 15px 0;
}
.services__wrapper .card__item .content .link a {
	color: #b0b0b0 !important;
	transition: var(--transition4) !important;
}
.services__wrapper .card__item .content .link a:hover {
	color: var(--whiteColor) !important;
}
/*==================================================
===| Məhsullarımız Css
===================================================*/
.mah__wrapper .nav .nav-link {
	padding: 15px 20px !important;
	background-color: #e6e6e680;
	color: var(--blackColor);
}
.mah__wrapper .nav .nav-link .icons {
	opacity: 0;
	transition: opacity var(--transition4);
}
.mah__wrapper .nav .nav-link.active .icons {
	opacity: 1 !important;
	transition: opacity var(--transition4);
}
.mah__wrapper .nav .nav-link.active {
	padding: 15px 20px !important;
	background-color: var(--redColor);
}
.mah__wrapper .ser__btn .btn {
	padding: 15px 50px !important;
}
.mah__wrapper .small__title span {
	color: var(--redColor);
}
.mah__wrapper .head__content h4 {
	font-weight: var(--fw-4);
}
.mah__wrapper .tab-content .tab__content strong {
	font-size: var(--fs-30);
}
.mah__wrapper .tab-content .tab__content .contents p {
	color: #545454;
	line-height: 25px;
}
.mah__wrapper .tab-content .tab__content .links a {
	color: #545454;
}
.mah__wrapper .tab-content .tab__img img {
	height: 370px;
}

/*==================================================
===| Gallery Css
===================================================*/
.qalereya .head__title strong {
	font-size: var(--fs-40);
	color: #000;
}
.swiper-button-prevs,
.swiper-button-nexts {
	width: 50px;
	height: 50px;
	background-color: #e6e6e680;
	justify-content: center;
	align-items: center;
	display: flex;
}

/*==================================================
===| Footer Css
===================================================*/
.footer {
	background-color: #212121;
	padding: 100px 0;
}
.footer .about__desc p {
	color: var(--textColor);
}
.footer .about__large__title h6 {
	text-shadow: -1px -1px 0 var(--redColor), -2px -1px 0 var(--redColor), -2px 0px 0 var(--redColor), -2px 1px 0 var(--redColor), -2px 2px 0 var(--redColor), -1px -2px 0 var(--redColor), -1px -1px 0 var(--redColor), -1px 0px 0 var(--redColor), -1px 1px 0 var(--redColor),
		-1px 2px 0 var(--redColor), 0px -2px 0 var(--redColor), 0px -1px 0 var(--redColor), 0px 0px 0 var(--redColor), 0px 1px 0 var(--redColor), 0px 2px 0 var(--redColor), 1px -2px 0 var(--redColor), 1px -1px 0 var(--redColor), 1px 0px 0 var(--redColor), 1px 1px 0 var(--redColor),
		1px 2px 0 var(--redColor), 2px -2px 0 var(--redColor), 2px -1px 0 var(--redColor), 2px 0px 0 var(--redColor), 2px 1px 0 var(--redColor), 2px 2px 0 var(--redColor);
	font-size: var(--fs-45);
}
.footer .ft_title {
	color: var(--textColor);
	font-size: var(--fs-18);
}
.footer .nav .nav-link,
.footer .nav .nav-item {
	color: var(--textColor);
}

/*==================================================
===| About Pages Css
===================================================*/
.detail__pages .about__titles h1 {
	font-weight: var(--fw-4);
	position: relative;
}
.detail__pages .content__desc h2 {
	font-weight: var(--fw-4);
}
.detail__pages .content__desc p {
	color: var(--blackColor);
	font-size: var(--fs-16);
}
.detail__pages .about__titles h1:before {
	width: 100%;
	height: 3px;
	background-color: var(--redColor);
	position: absolute;
	left: 0;
	bottom: -15px;
	content: "";
}
.detail__pages .content__brand strong {
	font-weight: var(--fw-4);
}
.detail__pages .məhsullar__desc p {
	color: var(--blackColor);
	font-size: var(--fs-16);
}
.detail__pages .item .top__head {
	justify-content: start;
	align-items: center;
	display: flex;
}
.detail__pages .item .top__head svg {
	fill: var(--redColor);
	width: 18px !important;
	height: 18px;
}
.detail__pages .item .top__head strong {
	font-size: var(--fs-18);
}

/*==================================================
===| Container Css
===================================================*/

/*==================================================
===| Container Css
===================================================*/
/* Mobil ekranlar (max-width değeri, mobil ekranın genişliğini belirler) */
@media only screen and (max-width: 767px) {
	/* Buraya mobil ekranlara özel stil tanımlamalarınızı ekleyebilirsiniz */
}

/* Tablet ekranlar (768px - 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	/* Buraya tablet ekranlara özel stil tanımlamalarınızı ekleyebilirsiniz */
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 820px !important;
	}
}

/* 12" - 15" ekranlar (1024px - 1365px) */
@media only screen and (min-width: 1024px) and (max-width: 1365px) {
	/* Buraya 12" - 15" ekranlara özel stil tanımlamalarınızı ekleyebilirsiniz */
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1140px !important;
	}
}

/* 15" - 19" ekranlar (1366px - 1599px) */
@media only screen and (min-width: 1366px) and (max-width: 1599px) {
	/* Buraya 15" - 19" ekranlara özel stil tanımlamalarınızı ekleyebilirsiniz */
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1200px !important;
	}
}

/* 19" ve üzeri ekranlar (1600px ve üzeri) */
@media only screen and (min-width: 1600px) {
	/* Buraya 19" ve üzeri ekranlara özel stil tanımlamalarınızı ekleyebilirsiniz */
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1440px !important;
	}
}