:root { --primary-color: #3d2b97;  --secondary-color: #f07d03; --passive-color:#ddd9ee; --dark-color: #130c37; --gap:30px;}
::selection {background-color: var(--primary-color); color: #fff; }
body {font-family: 'Quicksand', sans-serif;counter-reset: say;color: var(--dark-color);} 

img {max-width: 100%;color: transparent;}  
h1 {font-size: 26px;}h2 {font-size: 24px;} h3 {font-size: 22px;} h4 {font-size: 20px;} h5 {font-size: 18px;} h6 {font-size: 17px;}
a {text-decoration: none;color: var(--dark-color);transition: 0.3s ease all;} a:hover {color: var(--passive-color);transition: 0.3s ease all;}
.form-control:focus {box-shadow: unset;border-color: var(--primary-color);}
.btn {border-radius: 5px;background: unset;border: 1px solid var(--primary-color);padding: 8px 16px;color: var(--primary-color);box-shadow: unset !important;transition: 0.3s ease all;}
.btn:hover { background: var(--primary-color); color: #fff;}
button:focus {box-shadow: none!important;outline: none!important;}
#back-to-top {display: flex; width: 40px; height: 40px;background: var(--secondary-color); color: #fff; justify-content: center; align-items: center;border-radius: 5px;opacity: 0;visibility: hidden; position: fixed;right: 15px; bottom: -15px; font-size: 22px; line-height: 1;cursor: pointer; transition: 0.3s ease all;z-index: 2;}
#back-to-top.show {bottom: 15px; opacity: 1;visibility: visible; transition: 0.3s ease all; }
#back-to-top:hover {background: var(--primary-color);}

.sticky-wp {display: flex;align-items: center;justify-content: center;color: #fff;cursor: pointer;height: 50px;width: 50px;margin: 0;position: fixed;right: 15px;z-index: 9;font-size: 28px;box-shadow: -4px 4px 24px -10px #4aae20;background: #4aae20;border-radius: 50%;bottom: 80px;}

.cookies {position: fixed;z-index: 9999;max-width: 370px;bottom: 10px;left: 10px;border: unset; box-shadow: 0 0 50px -20px rgba(0, 0, 0, 0.5);}
.cookies .card-body {padding: 10px;font-size: 0.95rem;}
.cookies .card-body .agree {display: block;margin-top: 10px;}

.breadcrumb-item + .breadcrumb-item::before {color: #fff; content: "\00BB";}

/**/
.container {padding: 0 15px;}
section {margin: 50px 0;}
section .head {margin-bottom: 30px;text-align: center;}
section .bigTitle {display: inline-block;font-size: 30px;font-weight: 500;width: fit-content; margin: 0 auto 10px auto;position: relative;}
section .bigTitle::before {content: "";width: 50%;max-width: 100px; height: 0;border-bottom: 1px solid var(--dark-color);position: absolute;bottom: 0;left: 0;right: 0;margin: auto;opacity: 0.1;}


header {position: fixed;z-index: 4; top: 0; width: 100%; padding: 15px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: 0.3s ease all;box-shadow: 0 0 30px -20px transparent;}
header.sticky {padding: 10px 0; background: #fff; box-shadow: 0 0 30px -20px var(--dark-color);}
header li a , header .con i {color: #fff;}
header .container {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between; gap: 50px;}
header #menu{flex: 1;}
header ul {display: flex;flex-wrap: wrap;gap: 0 30px;list-style: none;margin: 0;padding: 0;align-items: center;}
header .right ul{justify-content: flex-end;gap: 0 20px;font-size: 20px;}
header .logo {padding: 5px;background: #fff;border-radius: 10px;}
header .logo img {width: 100%;height: 40px;}

.mobilMenu {display: none;}

header #menu > ul > li > a{display: block; position: relative;padding: 5px 0;color: #fff;font-weight: 500;}
header #menu > ul > li > a::before {content: "";position: absolute;left: 0;right: 0;margin: auto; bottom: 0;width: 0%;height: 0;border-bottom: 2px solid #fff;transition: 0.3s ease all;}
header #menu > ul > li:hover > a::before {width: 100%;transition: 0.3s ease all;}
header #menu > ul .acilir {position: relative;}
header #menu > ul .acilir > a::before {display: none;}
header #menu > ul .acilir > ul {display: block;min-width: 150px;position: absolute;background: #fff;padding: 10px 0; top: 100%;z-index: -1;transform: translateY(-5px);box-shadow: 0 10px 15px -10px rgb(0,0,0,0.5);border-radius: 5px; opacity: 0;visibility: hidden;}
header #menu > ul .acilir > ul > li {opacity: 0;transform: translateX(15px);}
header #menu > ul .acilir > ul > li > a{display: block;color: var(--dark-color);padding: 8px 20px;white-space: nowrap;transition: 0.3s ease all;}
header #menu > ul .acilir > ul > li:hover > a{padding: 8px 15px 8px 25px;transition: 0.3s ease all;}
header #menu > ul .acilir:hover ul {opacity: 1;visibility: visible;z-index: 2;transform: translateY(0px); transition: 0.3s ease all;}
header #menu > ul .acilir:hover > ul > li {opacity: 1;transform: translateX(0px);transition-delay: 0.1s;transition-duration: 0.3s;}
header #menu > ul .acilir:hover > ul > li::before {counter-increment: say;content: calc(2 * counter(say));}
header #menu > ul .acilir:hover > ul > li:nth-child(2) {transition-delay: 0.2s;}
header #menu > ul .acilir:hover > ul > li:nth-child(3) {transition-delay: 0.3s;}
header #menu > ul .acilir:hover > ul > li:nth-child(4) {transition-delay: 0.4s;}
header #menu > ul .acilir:hover > ul > li:nth-child(5) {transition-delay: 0.5s;}
header #menu > ul .acilir:hover > ul > li:nth-child(6) {transition-delay: 0.6s;}
header #menu > ul .acilir:hover > ul > li:nth-child(7) {transition-delay: 0.7s;}
header #menu > ul .acilir:hover > ul > li:nth-child(8) {transition-delay: 0.8s;}
header #menu > ul .acilir:hover > ul > li:nth-child(9) {transition-delay: 0.9s;}
header #menu > ul .acilir:hover > ul > li:nth-child(10) {transition-delay: 1s;}

header.sticky #menu > ul .acilir > ul {background: var(--passive-color);}
header.sticky #menu > ul > li > a, header.sticky li a, header.sticky .con i{color: var(--dark-color);}
header.sticky #menu > ul > li > a::before {border-color: var(--primary-color);}


.offcanvas-top {height: fit-content;}
.offcanvas-header .btn-close {margin: 0 0 0 auto;}

.searchForm {display: flex;flex-wrap: wrap; width: 100%;max-width: 500px;margin: auto; align-items: center; padding:50px 0;justify-content: center;}
.searchForm.show {top: 0;opacity: 1;visibility: visible;transition: 0.3s ease all;}
.searchForm .box {max-width: 700px;width: 100%;position: relative;border-radius: 15px;padding: 30px;box-shadow: 0 0 30px -10px rgba(0, 0, 0, 0.1);background: #fff;}
.searchForm .box form {max-width: 600px;margin: auto;}
.searchForm .box .title {font-size: 30px;display: block; margin-bottom: 20px; color: var(--dark-color);text-align: center;}
.searchForm .box .close { color: var(--dark-color);font-size: 22px; position: absolute; right: 0; top: -40px; width: 30px; height: 30px;display: flex; align-items: center;justify-content: center; cursor: pointer; }
.searchForm form {width: 100%;}
.searchForm .form-group {position: relative;}
.searchForm .form-group .form-control {padding: 10px 40px;}
.searchForm .form-group .btn {position: absolute;right: 0;top: 0;background: var(--primary-color);color: #fff; height: 100%; padding: 0 15px; border-radius: 0 5px 5px 0;}
.searchForm .form-group::before {content: "\f52a"; display: flex;font-display: block; font-family: bootstrap-icons !important;font-style: normal;font-weight: normal !important; font-variant: normal;text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; left: 0;  top: 0;  height: 100%; z-index: 2; align-items: center; padding: 0 10px; color: gray;}

.slick-slider .slick-arrow {font-size: 0;padding: 0;border: unset;border-radius: 0; background: unset;transition: 0.3s ease all;}
.slick-arrow.slick-disabled {opacity: 0.1;}
.slick-slider .slick-arrow::before {display: inline-block;font-size: 16px; font-family: bootstrap-icons !important;font-style: normal;font-weight: normal !important;font-variant: normal;text-transform: none;line-height: 1;vertical-align: -.125em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.slick-slider .slick-arrow.slick-prev::before {content: "\f284";}
.slick-slider .slick-arrow.slick-next::before {content: "\f285";}
.slick-vertical .slick-slide {border: unset;}

.home-slider {height:100vh;}
.home-slider div:not(.desc) {height: 100%!important;}
.home-slider .slick-arrow { position: absolute; top: 50%;z-index: 3;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 50px;height: 50px;color: #fff;background: rgba(255, 255, 255, 0.2);border-radius: 50%; transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
.home-slider .slick-arrow::before {font-size: 30px;}
.home-slider .slick-arrow:hover {background: #fff; color: var(--primary-color);transition: 0.3s ease all;}
.home-slider .slick-next{right: 30px;}
.home-slider .slick-prev{left: 30px;}
.home-slider .slick-dots {position: absolute;left: 0;right: 0;bottom: 10px; margin: 0 auto; padding: 0; display: flex;flex-wrap: wrap;gap: 10px; width: max-content;}
.home-slider .slick-dots li {display: block; list-style: none;}
.home-slider .slick-dots li button{display: block;width: 12px;height: 12px;border-radius: 6px; font-size: 0; padding: 0; border: 2px solid; background: unset;color: #fff; transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
.home-slider .slick-dots li.slick-active button{width: 24px;color: var(--primary-color); transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}

.home-slider .item {position: relative;z-index: 1;}
.home-slider .item:nth-child(n+2) {display: none;}
.home-slider.slick-slider .item:nth-child(n+2) {display: block;}
.home-slider .item::before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1; background: rgba(0, 0, 0, 0.5);}
.home-slider .item::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;opacity: 0.5; background: linear-gradient(180deg, var(--primary-color) 0%, rgba(0,0,0,0) 50%);}
.home-slider .item img{width: 100%;height: 100%;transform: scale(1); transition: 8s ease all; object-fit: cover;}
.home-slider .item .desc{position: absolute;max-width: 750px;width: 100%;text-align: center;left: 50%;top: 50%;z-index: 2;transform: translate(-50% , -50%);}
.home-slider .item .desc span.b{opacity: 0;margin-bottom: 10px; color: #fff;transform: translateY(50px);max-width:100%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;width: 100%;font-size: 40px; font-weight: 500; line-height: 50px;}
.home-slider .item .desc p.b{opacity: 0; font-size: 18px; max-width:100%; padding: 0 ;  transform: translateY(100px);color: #fff; -webkit-opacity: 0;  overflow: hidden;text-overflow: ellipsis;  display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.home-slider .item .desc .btn {background: unset;opacity: 0;padding: 8px 30px;font-size: 18px; font-weight: 500; color: #fff;border-color: #fff; transform: translateY(50px);}

.home-slider .slick-active .desc span.b {opacity: 1;transition-delay: 0.6s;transition-duration: 0.5s; transform: translateY(0px);}
.home-slider .slick-active .desc .btn {opacity: 1;transition-delay: 1s;transition-duration: 1s; transform: translateY(0px);}
.home-slider .slick-active .desc p.b {opacity: 1;transition-delay: 0.8s;transition-duration: 0.7s; transform: translateY(0px);}

@keyframes zoom-in {0% { transform: scale(1, 1);}50% {transform: scale(1.2, 1.2); }100% {transform: scale(1, 1);} }
#fullScreen {position: fixed;z-index: 3; bottom: 15px;left: 15px;color: #fff;border: #fff;background: var(--primary-color); animation: zoom-in 3s ease infinite;}
#fullScreen:hover {animation-play-state: paused;}

.products {display: grid;grid-template-columns: repeat(2 , 1fr); gap: 20px;}
.products.grid-3 {grid-template-columns: repeat(3 , 1fr);}
.products .product .image {overflow: hidden;aspect-ratio: 5 / 4;}
.products .product .image img {width: 100%; height: 100%;  object-fit: cover;transform: scale(1); transition: 1s ease all;}
.products .product .image::before {content: "";position: absolute;top: 50%;left: 50%;border-radius: 5px; z-index: 1; transform: translate(-50% , -50%);-webkit-transform: translate(-50% , -50%);width: 0%;height: 0%;background: var(--primary-color);opacity: 0;transition: 0.3s ease all;}
.products .product .title {position: absolute;z-index: 3;text-align: center; padding: 15px;color: var(--dark-color);top: 50%;left: 0;transform: translate(0 , -50%);-webkit-transform: translate(0 , -50%);width: 100%;}
.products .product .title .b{display: block;position: relative;z-index: 2; font-size: 32px;width: fit-content;background: rgba(255, 255, 255, 0.5);margin: auto;line-height: 1;padding: 5px 10px;border-radius: 5px;transition: 0.3s ease all;}
.products .product .title .desc{font-size: 22px;position: relative;color: #fff; z-index: 2; font-weight: 300;margin: 0;opacity: 0;transform: translateY(-50px); }
.products .product .title .btn{opacity: 0; color: #fff;border-color: #fff;background: unset; margin-top: 10px;transform: translateY(-50px); }
.products .product a{display: block;width: 100%;height: 100%; position: relative;box-shadow: 0 0 15px -13px rgba(0, 0, 0, 0.5); border-radius: 4px;overflow: hidden;transition: 0.3s ease all;}
.products .product:hover a{box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.5); transition: 0.3s ease all;}
.products .product:hover .image img {transform: scale(1.05); transition: 1s ease all;}
.products .product:hover .image::before {width: 100%;height:100%; opacity: 0.8;transition: 0.3s ease all;}
.products .product:hover .title .b{background: unset;color: #fff; transition: 0.3s ease all;}
.products .product:hover .title .desc{opacity: 1;transform: translateY(0px); transition-delay: 0.3s;transition-duration: 1s;}
.products .product:hover .title .btn{opacity: 1;transform: translateY(0px); transition-delay: 0.6s;transition-duration: 1s;}

.home-product .container {max-width: 1900px;padding: 0 0 0 15px;width: 100%;}
.home-product .products {display: block;}
.home-product .products .slick-list{padding: 0 10% 0 0!important;}
.home-product .products .product{margin: 15px;}
.home-product .products .slick-arrow { position: absolute; top: 50%;z-index: 3;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 50px;height: 50px;color:#fff;background: var(--dark-color);opacity: 0.5; border-radius: 50%; transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
.home-product .products .slick-arrow::before {font-size: 30px;}
.home-product .products .slick-arrow:hover {background: #fff;color: var(--primary-color);transition: 0.3s ease all;}
.home-product .products:hover .slick-arrow{opacity: 1;}
.home-product .products .slick-next{right: 15px;}
.home-product .products .slick-prev{left: 0px;}

.home-gallery .gallery {display: grid; grid-template-columns: repeat(9 , 1fr);gap: 20px;max-height: 500px;}
.gallery .image{overflow: hidden;border-radius: 5px;position: relative;box-shadow: 0 0 10px -8px var(--dark-color);transition: 0.3s ease all;}
.home-gallery .gallery .image {grid-column: 2 span;grid-row: 3 span;}
.gallery .image a , .gallery .image {display: block;width: 100%;height: 100%;}
.gallery .image img{width: 100%;height: 100%;object-fit: cover;transform: scale(1);transition: 1s ease all;}
.gallery .image:not(.link) a::before{content: "";z-index: 2;position: absolute;left: 0%;bottom: 0%;width: 0;height: 100%;background: var(--secondary-color);transition: 0.3s ease all;opacity: 0.7;}
.gallery .image:not(.link) a::after{content: "\f14d";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color: #fff;z-index: 2;font-size: 26px;opacity: 0;visibility: hidden;margin-top:-15px; display: inline-block;font-family: bootstrap-icons !important;font-style: normal;font-weight: normal !important;font-variant: normal;text-transform: none;line-height: 1;vertical-align: -.125em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.gallery .image:hover {box-shadow:0 10px 20px -15px var(--dark-color);transition: 0.3s ease all;}
.gallery .image:hover a::before{width: 100%;transition: 0.3s ease all;}
.gallery .image:hover a::after{opacity: 1;visibility: visible;margin-top:0;transition-delay: 0.3s;transition-duration: 0.7s;}
.gallery .image:hover img{transform: scale(1.05); transition: 1s ease all;}

.home-gallery .gallery .image:nth-child(1) { grid-row: 6 span; }
.home-gallery .gallery .image:nth-child(2) { grid-column: 3 span;grid-row: 3 span; }
.home-gallery .gallery .image:nth-child(8) { grid-column: 1 span;grid-row: 2 span; }
.home-gallery .gallery .image.link { grid-column: 1 span;grid-row: 1 span; } 
.home-gallery .gallery .image.link a {background: var(--primary-color);display: flex;padding: 5px;color: #fff;justify-content: center;align-items: center;font-size: 20px; }
.home-gallery .gallery .image.link:hover a {background: var(--secondary-color);}

.home-blogs {margin: 0;padding: 50px 0;}
.home-blogs .btn{display: block;width: max-content;max-width: 100%;margin: 30px auto 0 auto;}

.blogs {display: grid; grid-template-columns: repeat(3 , 1fr) ;gap: var(--gap); justify-content: center;}
.blog-slider.slick-slider {display: block;width: 100%;}
.blogs .blog {overflow: hidden; border-radius: 5px;box-shadow: 0 0 5px -3px rgb(0,0,0,0.5);}
.home-blogs .blogs .blog:nth-child(n+4) {display: none;} 

.blogs .blog .image{overflow: hidden;position: relative; aspect-ratio: 5 / 4;}
.blogs .blog .image img {width: 100%;height: 100%;object-fit: cover;transform: scale(1);transition: 1s ease all;}
.blogs .blog .image small{display: block;position: absolute;z-index: 2;top: 10px;left: 10px;font-size: 14px;line-height: 16px; background: #fff;max-width: calc(100% - 20px);padding: 5px;border-radius: 5px;color: var(--dark-color);}
.blogs .blog .image .bi{color: var(--primary-color);}
.blogs .blog .title{padding:15px;}
.blogs .blog .title span{display: block;font-weight: 500;color: var(--dark-color);text-align: center;}
.blogs .blog:hover {box-shadow: 0 10px 15px -10px rgb(0,0,0,0.5);transition: 0.3s ease all;}
.blogs .blog:hover .image img{transform: scale(1.05);transition: 1s ease all;}

.home-blogs .blog-slider.slick-slider.blogs .blog {display: block;margin: 10px 10px 15px 10px;}
.blog-slider .slick-arrow { position: absolute; top: 50%;z-index: 3;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 50px;height: 50px;color: #fff;background: rgba(255, 255, 255, 0.2);border-radius: 50%; transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
.blog-slider .slick-arrow::before {font-size: 30px;}
.blog-slider .slick-arrow:hover {background: #fff; color: var(--primary-color);transition: 0.3s ease all;}
.blog-slider .slick-next{right: 30px;}
.blog-slider .slick-prev{left: 30px;}

footer {padding: 30px 0px; background: var(--dark-color); }
footer .footer-top {margin: 15px 0;}
footer .boxes {display: flex; flex-wrap: wrap;justify-content: space-around;gap: var(--gap);color: #fff;font-size: 15px;}
footer .boxes .box{flex: 1;font-weight: 300;}
footer .boxes .box span.b {display: block;font-weight: 600; font-size: 18px;margin-bottom: 20px;position: relative;width: max-content;}
footer .boxes .box span.b::before{content: ""; width: 25%; height: 0;border-bottom: 2px solid #fff; transition: 0.3s ease all;left: 0; bottom: -5px;display: block;position: absolute;}
footer .boxes .box.full { flex: unset;width: 100%; }
footer .boxes .box.full ul {display: flex;flex-wrap: wrap; justify-content: center;align-items: center; list-style: disc;gap: 0 30px;font-size: 14px; }
footer .boxes a{display: block;color: #fff;width: max-content;max-width: 100%;padding: 3px 0; transition: 0.3s ease all;}
footer .boxes a:hover{color: var(--primary-color); transition: 0.3s ease all;}
footer .boxes ul{margin: 0;padding: 0;list-style: none;}
footer .boxes .left .logo {width: auto; height: 100px;}
footer .boxes .sos {display: flex;flex-wrap: wrap;font-size: 24px;gap: 20px;margin-top: 20px;}
footer .boxes .con {display: block;}
footer .boxes .con li i{display: inline-block; width: 30px;}
footer .boxes .right li:not(:last-child) {margin-bottom: 10px;}
footer .boxes .right li i {padding-right: 10px;}

.footerBottom {background: #090422;color: #fff;}
.footerBottom .container{padding: 10px 0;display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;align-items: center;font-size: 12px;}


.home-contact {padding: 50px 0; background: linear-gradient(270deg, var(--passive-color) 0%, var(--passive-color) calc(40% - 100px), transparent calc(40% - 100px), transparent 100%); margin: 50px 0 0 0;}
.home-contact .container {display: flex;flex-wrap: wrap;gap: 50px;}
.home-contact .container .left {flex:4;}
.home-contact .container .left b.b{display: block;font-size: 24px;margin-bottom: 15px;}
.home-contact .container .left {font-size: 18px;font-weight: 300;text-align: justify;}


.home-contact .container .right {flex:3;}
#bize-yazin{background-color: var(--primary-color);color:  #fff; padding: 30px;border-radius: 10px;}
#bize-yazin .form-check-label ,#bize-yazin a{color: #fff;}
#bize-yazin form {display: grid;grid-template-columns: repeat(2 , 1fr); color: var(--dark-color);gap: 20px;color: var(--dark-color);}
#bize-yazin form .full , #bize-yazin form .form-check{grid-column: 2 span;}
#bize-yazin form .btn{display: block;color: #fff;border-color: #fff; width: 100%;max-width: 150px;margin: auto;}


.home-about {padding: 50px 0;background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) calc(50% - 100px), transparent calc(50% - 100px), transparent 100%);}
.home-about .container {gap: var(--gap);}
.home-about .left{flex:1;}
.home-about .left img {width: 100%;border-radius: 10px;box-shadow: 0 0 15px -13px;}
.home-about .right{flex:1; padding: 0 30px;}
.home-about .right .text{text-align: justify;font-size: 18px;font-weight: 300;color: var(--dark-color);}
.home-about .right .text .btn{display: block;width: max-content;max-width: 100%;margin: 10px 0 0 auto;}
.home-about .left .video:hover span{width: 100px;height: 100px;font-size: 50px;transition: 0.3s ease all;}
.home-about .left .video:hover span::before ,.home-about .left .video:hover span::after {animation: 0s;}


.page-top {position: relative;overflow: hidden;padding: 135px 0 90px 0;color: #fff;text-align: center;background: url('../img/page-bg.jpg') no-repeat;background-size: 100%;background-attachment: fixed;z-index: 1;}
.page-top::before {content: "";position: absolute; inset: 0; background: var(--dark-color); opacity: 0.8; z-index: -1;}
.page-top .big-title { display: block; font-weight: 600; font-size: 48px; color: var(--primary-color); margin-bottom: 20px;}
.page-top .desc { display: block; font-size: 20px; margin-bottom: 0px;}
.page-top .breadcrumb {justify-content: center; margin: 0;}
.page-top .breadcrumb .breadcrumb-item{color: #fff;}
.page-top .breadcrumb .breadcrumb-item a{color: #fff;}


.page-detail .content {position: relative;z-index: 1;max-width: 1200px;  margin: -60px auto 30px auto;background: #fff;padding: 30px;border-radius: 10px;box-shadow: 0 5px 30px -30px var(--dark-color);}

.page-detail .gallery {display: grid; grid-template-columns: repeat(5 , 1fr);gap: 10px;}
.page-detail .gallery .image:nth-child(1) {grid-column: 2 span;grid-row: 2 span;}

.page-detail .box {display: flex;flex-wrap: wrap;gap: var(--gap);}
.page-detail .box .left {flex: 1;min-width: 200px;}
.page-detail .box .left .image {position: relative;overflow: hidden;border-radius: 5px; margin-bottom: 15px;}
.page-detail .box .left .pageMenu {display: block;position: sticky;top: 10px;padding: 0;margin: 0;}
.page-detail .box .left .pageMenu li{display: block; list-style: none;font-weight: 500;margin-bottom: 3px;border-radius: 5px;overflow: hidden;}
.page-detail .box .left .pageMenu li.active{background: var(--primary-color);padding: 10px;color: #fff;}
.page-detail .box .left .pageMenu li a{display: block;color: var(--primary-color);background: #f8f8ff;padding: 10px;}
.page-detail .box .left .pageMenu li:hover a {background: var(--primary-color); color: #fff;}
.page-detail .box .right {flex: 4;}

.contactPage .container {padding: 0;}
.contactPage .maps {width: 100%;height: 300px;border-radius: 10px;overflow: hidden;}
.contactPage .maps iframe{width: 100%;height: 100%;}
.contactPage span.b {display: block;width: max-content; font-size: 22px;font-weight: 400;margin-bottom: 20px;position: relative;}
.contactPage .d-flex {padding: 50px 0;}
.contactPage .left ul { margin: 0 0 50px 0;padding: 0; list-style: none;}
.contactPage .left ul.il li {margin-bottom: 10px}
.contactPage .left ul.il li i{width: 26px;display: inline-block;font-size: 18px; color: var(--primary-color);}
.contact-page .sos {display: flex;flex-wrap: wrap;gap: 30px;}
.contact-page .sos a{display: block;color: var(--primary-color); font-size: 24px;}
.contact-page .sos li:hover a {color: var(--secondary-color);}
.contactPage .right { box-shadow: 0 0 30px -10px rgba(0, 0, 0, 0.1);padding: 30px;border-radius: 10px;}
.contactPage .right .form-floating {margin-bottom: 15px;}
.contactPage .right .btn {border-radius: 5px;padding: 10px;width: 100%;max-width: 150px;margin: 10px auto;display: block;}

.productDetails .box .left {flex: 3;}
.productImages {width: 100%;margin: 30px 0;}
.productImages span.b {display: block;font-size: 22px;margin-bottom: 10px;}


#faqTabs {display: grid;gap: 10px;}
#faqTabs .accordion-item {border-radius: 10px;border: 1px solid var(--passive-color);font-size: 16px;}
#faqTabs .accordion-item .accordion-header .accordion-button {border-radius: 10px;font-size: 18px;font-weight: 600;}
#faqTabs .accordion-item .accordion-body {}
#faqTabs .accordion-button:not(.collapsed) {background: var(--secondary-color);color: #fff;}

.help-items {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;max-width: 900px;margin: auto;}
.help-items .item {border: 1px solid;overflow: hidden;}
.help-items .item .image{padding: 10px 30px;position: relative;z-index: 1;}
.help-items .item .image::before {content: "";position: absolute;inset: 100% 0 0 0;z-index: -1;transition: 0.3s ease all;}
.help-items .item .image img{filter: unset; transition: 0.3s ease all;}
.help-items .item .text{padding: 15px 30px;color: #fff;font-weight: 600;font-size: 18px;text-align: center;}

.help-items .item:nth-child(2n) {border-radius: 0 60px 0 0;border-color: #077248;}
.help-items .item:nth-child(2n) .image::before {background: #80b241;}
.help-items .item:nth-child(2n) .text {background: #077248;}
.help-items .item:nth-child(2n + 1) {border-radius: 0 0 0 60px;border-color: #80b241;}
.help-items .item:nth-child(2n + 1) .image::before {background: #077248;}
.help-items .item:nth-child(2n + 1) .text {background: #80b241;}

.help-items .item:hover .image::before {inset: 0;}
.help-items .item:hover .image img {filter: brightness(0) invert(1);}


.pages {display: grid;gap: 50px;max-width: 1200px; margin: 0 auto;}
.pages.files {grid-template-columns: repeat(2 ,1fr);}
.pages .page .box {display: grid;grid-template-columns: repeat(2 , 1fr);gap: 50px;background: var(--bs-gray-100);color: var(--bs-gray-600);border-radius: 10px; transition: 0.3s ease all;}
.pages .page .box .image {padding: 15px;}
.pages .page .box .image img {display: block;border-radius: 10px; width: 100%;height: 100%;aspect-ratio: 4 / 3;object-fit: cover;}
.pages .page .box .text {padding: 50px;}
.pages .page .box .text .title {display: block;position: relative; color: var(--dark-color); margin-bottom: 15px;padding-bottom: 15px;font-size: 30px;}
.pages .page .box .text .desc {font-size: 18px;}
.pages .page .box .text .title::before {content: "";position: absolute;left: 0;display: block;width: 50px;height: 0;border-bottom: 1px solid var(--primary-color);bottom: 0px;}

.pages .page:nth-child(2n + 1) .box .image {order: 2;}
.pages .page:hover .box {background: var(--bs-gray-200);}

.product-detail {display: flex;flex-wrap: wrap;gap: 40px;}
.product-detail .text {flex: 2;}
.product-detail .image {flex: 1;}

.map-iframe iframe {width: 100%;height: 100%;aspect-ratio: 3 / 1;border-radius: 15px;}

.contact-page .title{display: block;margin-bottom: 5px;color: var(--dark-color);font-weight: 600;font-size: 30px;}
.contact-page .desc{}

.contact-page ul {margin: 0;padding: 0;list-style: none;}
.contact-page .sos {display: flex;flex-wrap: wrap;gap: 30px;}
.contact-page .sos a{display: block;color: var(--primary-color); font-size: 24px;}
.contact-page .sos li:hover a {color: var(--secondary-color);}

.contact-page .con {display: grid;gap: 5px;}
.contact-page .con span{display: flex;gap: 5px;color: var(--dark-color);}
.contact-page .con span i {width: 30px;color: var(--primary-color);flex-shrink: 0;}




@media (min-width:1500px) {
    .container{max-width: 1400px;}
    
}


@media (max-width: 1200px) {
    :root{ --gap:20px; }
    .container {max-width: calc(100% - 30px);}
    .btn {padding: 5px 15px;}
    
    header #menu, header .right {flex: unset;}
    header .logo img {height: 35px;}
    header ul {gap: 0 20px;}   
    header .right ul {gap: 0 20px;}
    header .right ul .catalog a {padding: 6px 12px;}   
    
    .home-slider .slick-arrow  ,.home-product .products .slick-arrow , .blog-slider .slick-arrow{width: 40px;height: 40px;}
    .home-slider .slick-arrow::before ,.home-product .products .slick-arrow::before  , .blog-slider .slick-arrow::before{font-size: 20px;}
    .home-slider .item .desc p.b {font-size: 20px;}
    .home-slider .item .desc span.b {font-size: 34px;line-height: 44px;}
    .home-slider .item .desc .btn {padding: 6px 20px;}
    
    .bigTitle {font-size: 26px;}
    section .head .p {font-size: 18px;}
    .products .product .title .b {font-size: 26px;}
    .products .product .title .desc {font-size: 18px;}
    
    .home-gallery .gallery {aspect-ratio:unset;}
    
    .home-contact .container .left,.home-about .right .text ,.home-gallery .gallery .image.link a {font-size: 16px;}
    
}

@media (max-width: 992px) {
    .container {max-width: 100%;}
    header .logo {margin: 0 auto 0 0; } 
    
    #menu .mobilMenu {display: flex;justify-content: flex-end;align-items: center; position: relative;width: 24px;height: 18px;}
    #menu .mobilMenu span {display: block; width: 75%;height:0;color: #fff;;border-bottom: 2px solid;transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
    #menu .mobilMenu span::before {content: "";position: absolute;left: 0; top: 0;width: 100%;height: 0;border-bottom: 2px solid;transform: translateY(0);-webkit-transform: translateY(0);transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
    #menu .mobilMenu span::after {content: "";position: absolute;left: 0; bottom: 0;width: 100%;height: 0;border-bottom: 2px solid;transform: translateY(0);-webkit-transform: translateY(0);transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
    
    #menu.show .mobilMenu span {width: 0; transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
    #menu.show .mobilMenu span::before {transform: rotate(-45deg) translate(-2px, 8px);-webkit-transform: rotate(-45deg) translate(-2px, 8px);}
    #menu.show .mobilMenu span::after {transform: rotate(45deg) translate(-2px, -8px);-webkit-transform: rotate(45deg) translate(-2px, -8px);}
    
    #menu.show .mobilMenu span {width: 0; transition: 0.3s ease all;-webkit-transition: 0.3s ease all;-moz-transition: 0.3s ease all;}
    #menu.show .mobilMenu span::before {transform: rotate(-45deg) translate(-2px, 8px);-webkit-transform: rotate(-45deg) translate(-2px, 8px);}
    #menu.show .mobilMenu span::after {transform: rotate(45deg) translate(-2px, -8px);-webkit-transform: rotate(45deg) translate(-2px, -8px);}
    
    #menu > ul {position: absolute;left: 0; background: #fff;top: 90px; width: 100%;visibility: hidden; height: 0; display: block; padding:20px 30px;overflow: auto;transition: 0.3s ease all; -webkit-transition: 0.3s ease all; -moz-transition: 0.3s ease all; }
    header.sticky #menu > ul {top: 60px;}
    #menu.show > ul {height: calc(100vh - 90px);visibility: visible;transition: 0.3s ease all; -webkit-transition: 0.3s ease all; -moz-transition: 0.3s ease all; }
    header.sticky #menu.show > ul {height: calc(100vh - 60px);}
    #menu > ul > li > a {font-size: 18px; color: #fff;padding: 10px 0;margin: auto;}
    header.sticky #menu .mobilMenu span{color: var(--dark-color);}
    
    header #menu > ul > li > a {color: var(--dark-color);}
    #menu > ul > li > a::before {display: none;}
    #menu > ul > li:hover > a {color: var(--secondary-color); }
    #menu ul li.acilir ul {display: none;background: unset;margin-bottom: 20px; position: relative;opacity: 1;visibility: visible; transition: unset; -webkit-transition: unset; -moz-transition: unset;transform: translateY(0px); -webkit-transform: translateY(0px); box-shadow: none; padding: 0;width: 100%!important; max-width: 100%;}
    #menu ul li.acilir ul a {color: #fff;border-bottom: 1px solid var(--bs-gray-200);}
    
    #menu > ul > li.acilir.show ul {display: block;margin-bottom: 10px;z-index: 1;}
    header #menu > ul .acilir > ul > li, header #menu > ul .acilir:hover > ul > li {opacity: 1;transform: unset;transition: unset;}
    #menu ul li.acilir:hover ul { transition: unset; -webkit-transition: unset; -moz-transition: unset;}
    #menu ul li.acilir > a::after {content: "\f282";display: inline-block;font-family: bootstrap-icons !important;position: absolute;right: 0;color: var(--dark-color); font-size: 16px;transform: rotate(-90deg); margin-top: 5px;transition: 0.3s ease all;}
    #menu ul li.acilir.show > a::after {transform: rotate(0deg);transition: 0.3s ease all;}
    
    header .container > .right {display: none;}

    .home-slider {height: 70vh;}
    .home-slider {height: 70vh;}

    footer .boxes .box {flex: unset;flex:1;}
    
}

@media (max-width: 768px) {
    section {margin: 30px 0;}
    section .bigTitle {font-size: 24px;}
    section .head .p {font-size: 16px;}

    .home-product .products .product {margin: 5px;}
    .products .product .title .b {font-size: 18px;}
    .products .product .title .desc ,.products .product .title .btn{display: none;}
    .products, .products.grid-3 , .blogs { grid-template-columns: repeat(2 , 1fr); gap: 10px; }
    .product-detail {gap: 20px;}
    .product-detail .text, .product-detail .image {flex: unset;width: 100%;}
    .product-detail .image {order: -1;}
    .products .product .title { padding: 5px;}

    .home-about {padding: 30px 0;background: var(--passive-color);}
    .home-about .left , .home-about .right{ flex: unset; padding: 0;}
    
    .help-items {gap: 5px;}
    .help-items .item .image {padding: 10px;}
    .help-items .item .text {padding: 15px 5px;font-size: 15px;}   

    .help-items .item:nth-child(2n) {border-radius: 0 15px 0 0;}
    .help-items .item:nth-child(2n+1) { border-radius: 0 0 0 15px; }    

    .home-gallery .gallery {max-height: unset;grid-template-columns: repeat(2 , 1fr);gap: 10px;}
    .home-gallery .gallery .image {grid-column: 1 span;grid-row: 1 span;}
    .home-gallery .gallery .image:nth-child(1) {grid-row: 2 span;}
    .home-gallery .gallery .image:nth-child(2) {grid-column: 1 span;grid-row: 1 span;}
    .home-gallery .gallery .image:nth-child(n+5):not(.link) {display: none;}

    .home-blogs {padding: 30px 0;}
    .home-blogs .blog-slider.slick-slider.blogs .blog {margin: 5px;}
    .blogs .blog .title {padding: 5px;}

    .home-contact {padding: 30px 0;background: var(--bs-success-bg-subtle);margin: 0;}

    #faqTabs .accordion-item .accordion-header .accordion-button {font-size: 16px;}
    .home-contact .container .left, .home-contact .container .right {flex: unset;}

    #bize-yazin {padding: 15px;}
    #bize-yazin form {gap: 10px;}

    footer .boxes {display: grid;grid-template-rows: repeat(1, 1fr);}
    
    .page-top { padding: 80px 0 40px 0;background-size: cover;background-attachment: unset;}
    .page-detail .content {margin: -30px auto 30px auto;padding: 10px;}
    .contact-page .title {font-size: 20px;}

    .pages .page .box {grid-template-columns: repeat(1 , 1fr);gap: 0px;}
    .pages .page .box .text {padding: 15px;}
    .pages .page .box .image {padding: 5px;}
    .pages .page:nth-child(2n+1) .box .image {order: 0;}
    .pages .page .box .text .title {margin-bottom: 5px;padding-bottom: 5px;font-size: 22px;}
    .pages .page .box .text .desc {font-size: 16px;}

    .page-detail .gallery {grid-template-columns: repeat(3 , 1fr);}
    
    .map-iframe iframe { aspect-ratio: 3 / 2; }
    .footerBottom .container {text-align: center;}
    .footerBottom .container span {display: block;width: 100%;}

    .sticky-wp { width: 40px; height: 40px; font-size: 40px; bottom: 70px; }

}

@media (max-width: 576px) {
    
    header .top-header ul {font-size: 20px;}
    header .top-header ul li span {display: none;}
    header .logo img {height: 30px;}
    header .right ul .catalog {display: none;}
    header .right ul .search a {font-size: 20px;}
    
    
    
}