@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
html,body{height: 100%;}
body{min-height: 100%; font-family: "Poppins", sans-serif!important; font-weight: 400; font-size: 16px; line-height: 1.7!important; font-style: normal; color:#505050;}
.wrapper{ min-height: 100%;  position: relative; overflow: hidden;}
section{padding: 0 50px;}
.menuMobile{display: none;}
.mobilMenuAc{display: none; width: 40px; height:40px; text-align:center; line-height:42px;}
.mobilMenuAc i{ color:#008883; font-size: 24px;}
.menuMobil{display: block; color:#fff; line-height:45px; border-bottom:1px solid #ffffff33;}
.mobile_menu a {display: block; color:#fff; line-height:45px; border-bottom:1px solid #ffffff33;}
.menuMobile #offcanvasTop{height:100%; background: #005855;}
.menuMobil:hover{color:#fff;}
.offcanvas-body{position: relative;}
.ImgAbsolute{position: absolute; left:0; bottom:0; right:0; display: block; max-width: 300px; margin:auto;}
.SlideContainer{padding:50px;}
.bodyMain{background:#EBEBEB;}
body a{text-decoration: none;}
body input{ border-radius: 0; outline: 0; border:1px solid #ccc;}
.bodyBg{position: relative; overflow: hidden;}
.bodyBg:before{content:""; position: absolute; right:-15%; top:12%; width:1200px; height:1200px; background: url(../img/amblem.svg) no-repeat center; background-size: contain; z-index: -1;}

.brand_short_text p { font-size:15px; }

.slideLogo{position:absolute; right:60px; bottom:60px; z-index:4; display:block; width:180px;}

header{ position: absolute; left:50px; top:70px; right:50px ; z-index: 5; padding:20px 0;}
.changeHeaderColor{background: rgba(0, 0, 0, 0.6);top:0; }
.headerContainer{padding:0 66px;}
.menus{display: flex; justify-content: end;}
header nav .menu{ color:#fff; margin:0 25px; line-height: 35px;  position: relative;} 
header nav .menu:before, header nav .menuActive:before {content:""; width: 0%; margin:auto; position: absolute; left:0; bottom:0; right:0; height: 1px;transition: all ease 300ms; background: #fff; } 
header nav .menu:hover:before{ width: 100% } 
header nav .menuActive{position: relative;}
header nav .menuActive:before{width: 100%; }
.Logo{display: block; width: 230px;}
.Logo img{display: block; width:100%;}
.LogoIcon{display: none; width:40px; height:40px;}
.LogoIcon img{display: block; width: 100%;}
.searchContainer i{color:#008883; font-size:24px; width: 35px; height: 35px; text-align: center; vertical-align: sub;}
.searchContainer .search{ line-height:35px ; width:0px; transition: width 0.3s ease; font-size: 12px; color: #fff; padding-left:10px; background: transparent; border:1px solid transparent; border-radius:25px;}
.search::placeholder { color: #fff; opacity: 1;}
.btn_search{border:none; background: none;}

#carouselYildizDesign{position: relative;}
.sloganContainer{position: absolute; left:65px; top:50%; color:#fff; transform: translateY(-50%); max-width: 440px; z-index: 2;}
.sloganXl{font-size: 100px; font-weight: 700; line-height: 100px;}
.sloganL{font-size:42px; font-weight:600; line-height: 50px;}
.sloganM{font-size:22px; font-weight:400;line-height: normal;}
#carouselYildizDesign .carousel-indicators {display: block; left:unset; right:65px; bottom:unset; top:50%; margin:auto; transform: translateY(-50%);}
#carouselYildizDesign .carousel-indicators button{ display: block; width: 36px; height: 36px;}

#carouselYildizDesign .carousel-indicators button.sayac{background:url(../img/sayacPassive.svg) no-repeat center; background-size:contain ;}
#carouselYildizDesign .carousel-indicators button.active.sayac{background:url(../img/sayacActive.svg) no-repeat center; background-size:contain ;}

#carouselYildizDesign:before{content:""; position: absolute; inset:0; background: url(../img/slide_filter_top.png) no-repeat center center; background-size:cover; z-index: 1; mix-blend-mode: multiply;}
#carouselYildizDesign:after{content:""; position: absolute; inset:0; background: url(../img/slide_filter_bottom.png) no-repeat center center; background-size:cover; z-index: 1; mix-blend-mode: multiply;}

.wrapper .btn{border-radius: 0; border:none;}
.wrapper .btn-secondary{background: #fff; color:#008883;}
.wrapper .btn-secondary:hover{background: #008883; color:#fff;}
.wrapper .btn-primary{background: #008883; color:#fff; border:1px solid transparent;}
.wrapper .btn-primary:hover{background: #fff; color:#008883; border:1px solid #008883 }
.btnContainer{text-align: center; margin:100px auto;}

.aboutText{padding-left:40px;}
.aboutImg, .aboutImg img{display: block; width: 100%; margin:auto;}
.titleContainer{margin:110px auto; text-align: center;}
.titleSup{font-size:24px; font-weight: 700; color: #008883;}
.titleMain{font-size:40px; font-weight: 700;}
p{font-size:20px;}

.aProduct{display: block; line-height:normal ;}
.aProduct .ImgProduct,.aProduct .ImgProduct img {display: block; width: 100%; height:100%; object-fit:cover; margin:auto;}
.aProduct .ImgProduct{display: block; width: 100%; height:313px; margin:auto; position: relative;}
.aProduct .ImgProduct:before{content:""; position: absolute; inset:0; background: #008883; mix-blend-mode: multiply; z-index: 1; opacity: 0; transition: all ease 300ms;}
.aProduct:hover .ImgProduct:before{opacity: 1;}
.categoryTitle,.footerTitle{font-weight: 700; color:#505050;}
.footerTitle{color:#fff;}
.productTitle{font-size: 20px; font-weight: 700; color:#008883;}
.infoShort{ font-weight:400; color:#505050;}
.collectionTitle{position: absolute; left:20px; bottom:20px; color:#fff; font-weight: 700; font-size: 30px; z-index: 2;}
section.brands{background: #fff; padding:50px;}
.aBrand{display: block; width:240px; margin:auto;}
.aBrand .imgBrand,.aBrand .imgBrand img{display: block; width: 100%; margin:auto;}
.brandContainer{display: flex; justify-content: center;}
.brandContainer .brandBox{ margin:0 20px;}

.banner{display: block;  padding:50px;}
.bannerHk{ width: 100%; position: relative; height: 400px; background: url(../img/bannerHk.jpg) no-repeat center center; background-size: cover;}
.bannerHk:before{content:""; position: absolute; inset:0; background: url(../img/slide_filter_top.png) no-repeat top; background-size:cover ; z-index: 1;}
.bannerProducts{background: url(../img/bannerProducts.jpg) no-repeat center center; background-size: cover;}
 .bannerDetails{background: url(../img/bannerDetails.jpg) no-repeat center center; background-size: cover;}
.bannerContact{background: url(../img/bannerContact.jpg) no-repeat center center; background-size: cover;}
 .pageTextMp{padding-bottom:50px;}
.pageTextMp p{font-size: 16px;}
.aboutUs{position: relative;}
.aboutUs:before{content:""; position: absolute; right:-10%; top:-10%; width:800px; height:800px; background: url(../img/amblem.svg) no-repeat center; background-size: contain; z-index: 1;}

.nav-pills{justify-content: center; margin-bottom:50px !important;}
.nav-pills .nav-link.active{background: #008883!important;}
.nav-pills .nav-link{color: #008883;}
.nav-pills .nav-link:hover{color: #008883;}

.productDetails{position: relative;}
.productDetails:before{content:""; position: absolute; right:-10%; top:-10%; width:800px; height:800px; background: url(../img/amblem.svg) no-repeat center; background-size: contain; z-index: 1;}


.productDetails #carouselProductDetails .carousel-item{ overflow: hidden; height:400px; }
.productDetails #carouselProductDetails .carousel-indicators{position: relative; margin:10px 0 0 0; background:#dbdbdb; padding:3px 1px;}
.productDetails #carouselProductDetails .carousel-indicators [data-bs-target]{box-sizing:inherit;}
 .productDetails #carouselProductDetails .carousel-indicators button{width:100%; height:150px; overflow: hidden; border:none; padding:5px; background: none;}
.productDetails #carouselProductDetails .carousel-indicators button img{ width: 100%; height: 100%; object-fit: cover; }
.productDetails p {font-size: 16px;}
.productDetails .articles li{margin-bottom:5px;}
.productDetails .articles li::marker{color:#008883;}
.productDetails h1.productTitle{font-size:35px;}
.pCode strong{display: inline-block; margin-right:5px; color: #008883;}


section.contact{position: relative;}
section.contact:before{content:""; position: absolute; right:-10%; top:10%; width:800px; height:800px; background: url(../img/amblem.svg) no-repeat center; background-size: contain; z-index: -1;}


.contactInfo{background:url(../img/contactInfo.jpg) no-repeat center ; background-size: cover; padding:50px 100px; height: 100%; position: relative; z-index:1; color:#fff;}
.contactInfo:before{content:""; background: #008883; mix-blend-mode: multiply; position: absolute; inset:0; z-index:-1;}
.contact .titleMain{font-size: 30px; color:#fff;}
.contactInfo p{font-size: 16px; margin:20px auto;}
.contactInfo .tel,.contactInfo .mail {font-size: 16px;}
.contactForm{background: #008883; padding:50px;}
.contactForm hr{background: #fff;}
.contactForm .btn-primary{border:1px solid #fff; color:#fff; transform: all ease 300ms;}
.contactForm .btn-primary:hover{border:1px solid #fff; color:#008883; background: #fff;}
.cForm input,.cForm textarea{border-radius: 0!important; padding:10px!important; border: none !important;;}

.footerTop{padding:50px; background: #008883; color:#fff; display: flex; align-items: flex-start;}
.footerTop .footerBox{width:20%; padding-right:50px;}
.footerLogo{display: block; width: 230px;}
.footerLogo img{display: block; width: 100%;}
footer p{font-weight:400; font-size: 14px;}
.footerMenu{display: block; color:#fff; font-size: 14px; line-height: 30px; transition: all ease 300ms;}
.footerMenu:hover{opacity: 0.5; color:#fff; }
.socials{display: flex; align-items: start;}
.socials .social{width:40px; height:40px; text-align: center; margin-right:8px;}
.socials .social i{font-size:24px; line-height:38px; color:#fff;}
.footerBottom{padding:10px 50px;}
.right{text-align: right;}
a.koda-icon-link p { white-space: pre; color: transparent!important; text-align: center; font-weight: 500; margin: 0; }
a.koda-icon-link, a.koda-icon-link p { transition: .5s all ease; }
.koda-icon-links { width: 5.75rem; position: relative; display: inline-flex; flex-direction: row; justify-content: start; align-items: center; top: -6px; }
a.koda-icon-link:hover { position: absolute; left: 0; width: 5.75rem; margin-left: 0; padding-left: .45rem; padding-right: .45rem; z-index: 999; }
.koda-icon-link.ikona { background-color: #ffce03; }
.koda-icon-link.kenobi { background-color: #2cb5bf; }
.koda-icon-link.karanlik_oda { background-color: #8ab93f; }
a.koda-icon-link { text-decoration: none; position: absolute; left: 0; transform: translateX(0); overflow: hidden; height: 1.75rem; width: 1.75rem; border-radius: .875rem; padding-right: 0; padding-left: 0; z-index: 3; display: inline-flex; align-items: center; justify-content: center; }
a.koda-icon-link:nth-child(2) { left: 2rem; z-index: 2; }
a.koda-icon-link:nth-child(3) { left: 4rem; z-index: 3; }
a.koda-icon-link:hover { position: absolute; left: 0; width: 5.75rem; margin-left: 0; padding-left: .45rem; padding-right: .45rem; z-index: 999; }
a.koda-icon-link:hover p { color: #fff!important; padding-top: 0px; }


@media screen and (max-width: 1440px) {
	.slideLogo{right:30px; bottom:30px;  width:150px;}

 .sloganContainer{ top:55%; left:40px; }
.sloganXl{font-size:60px; line-height:60px;}
.sloganL{font-size:26px; line-height:normal;}
.sloganM{font-size:16px; line-height: normal;}
.headerContainer{padding:0 40px;}
#carouselYildizDesign .carousel-indicators {right:40px; }
.titleSup{font-size: 20px;}
.titleMain{font-size: 30px;}
p{font-size:16px;}
.productTitle{font-size: 16px;}
.collectionTitle{font-size:20px;}
.footerTop .footerBox{width:20%; padding-right:20px;}
.productDetails h1.productTitle{font-size:24px;}
.bodyBg:before{width:800px; height:800px; }
.aboutUs:before{right:-20%; top:20%; width:600px; height:600px;}
.lapTopKapat{display: none;}
  }
  @media screen and (max-width:1368px){
 header nav .menu{font-size: 15px; margin:auto 15px;}
 .Logo{display: block; width: 200px;}
  }

  @media screen and (max-width:1200px){
    .mobilMenuAc{display: block;}
    .menuMobile{display: block;}
    .SlideContainer{padding:10px;}
 header nav .menu{display: none;}
 .headerContainer{padding:0;}
header{top:10px;}
.mobilKapat{display: none;}
section{padding:10px;}
.aboutText{padding:0; text-align: center;}
.titleContainer{margin:70px auto;}
section.about{margin-bottom:0 !important;}
.btnContainer{margin:50px auto;}
.footerTop{flex-direction: column; text-align: center;}
.footerTop .footerBox{ width: 100%;}
.footerTitle{ margin-top:20px;}
.footerTitle.mb-3{margin-bottom:10px !important;}
.footerLogo{margin:auto;}
.socials{justify-content: center;}
.bodyBg:before{display: none;}
.banner{padding:10px;}
.aboutUs:before{display: none;}
.mobilMarginTop{margin-top:20px;}
.productDetails:before{display: none;}

     }
     @media screen and (max-width:960px){
#carouselYildizDesign .carousel-item .imgSlide{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}

        .sloganContainer{left:20px;}
        .sloganContainer .mb-3, .sloganContainer .mt-3{ margin-top:0!important;  margin-bottom: 5px !important;;}
        .sloganXl{font-size:40px; line-height:40px; }
        .sloganL{font-size:20px;}
        #carouselYildizDesign .carousel-indicators {display: block; left:unset; right:65px; bottom:unset; top:50%; margin:auto; transform: translateY(-50%);}
       #carouselYildizDesign .carousel-indicators button{ display: block; width: 26px; height: 26px;}
        
 #carouselYildizDesign, #carouselYildizDesign .carousel-inner ,#carouselYildizDesign .carousel-item, #carouselYildizDesign .carousel-item .imgSlide{min-height: 400px;}
        #carouselYildizDesign .carousel-item img{display: block; max-height: 400px; width: auto!important; margin:auto;}
        header{left:10px; right:10px;}
        #carouselYildizDesign .carousel-indicators{right:10px;}
        .about.mt-5{margin-top:10px!important;}
        .titleContainer{margin:30px auto 50px auto;}
        .brandContainer .brandBox{margin:auto;}
        .brandContainer .brandBox .aBrand{width:140px;}
        .register{text-align:center;}
        .registerBottom{padding-bottom:10px;}
        .Logo{padding-left:15px; width:180px;}
     }
     @media screen and (max-width:660px){
		 .slideLogo{right:10px; bottom:10px;  width:100px;}

.Logo{display: none;}
.LogoIcon{display: block; margin-left:10px;}
.searchContainer .search{ max-width: 130px;}
.sloganXl{font-size:30px; line-height:30px;}
.sloganL{font-size:18px;}
.sloganM{font-size:14px;}
.sloganContainer .btn-secondary{font-size: 14px; margin-top:10px!important;}
#pills-tab{padding:0 10px;}
.nav-pills{flex-direction: column; align-items: center; }
.nav-pills .nav-item{width: 100%; }
.nav-pills .nav-link.active{background: #008883!important;}
.nav-pills .nav-link{ width:100%; color: #008883; border:1px solid #008883!important; margin-bottom:10px;}
.productDetails #carouselProductDetails .carousel-item{height: auto;}  
.productDetails #carouselProductDetails .carousel-indicators button  {width: 50%; height:25%;}
.contactInfo{padding:20px;}
}