/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

	/* font-family: "greycliff-cf",sans-serif;  300,400,500,700 */
	

	@font-face {
	  font-family: 'icomoon';
	  src:  url('fonts/icomoon.eot?h29pn2');
	  src:  url('fonts/icomoon.eot?h29pn2#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?h29pn2') format('truetype'),
		url('fonts/icomoon.woff?h29pn2') format('woff'),
		url('fonts/icomoon.svg?h29pn2#icomoon') format('svg');
	  font-weight: normal;
	  font-style: normal;
	  font-display: block;
	}

	[class^="icon-"], [class*=" icon-"] {
	  /* use !important to prevent issues with browser extensions that change fonts */
	  font-family: 'icomoon' !important;
	  speak: never;
	  font-style: normal;
	  font-weight: normal;
	  font-variant: normal;
	  text-transform: none;
	  line-height: 1;

	  /* Better Font Rendering =========== */
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}



	/* Product Usage Icons */

	.parquet-usage-icon{color: #00654e;}

	.icon-parquet:before {content: "\e900";font-size: 38px;}
	.icon-office:before {font-size: 30px;content: "\e91b"}
	.icon-catalog:before {content: "\e901";font-size: 40px}
	.icon-certificate:before {content: "\e902";font-size: 45px}
	.icon-room:before { font-size: 35px;content: "\e903"}
	.icon-bedroom:before { font-size: 30px;content: "\e904"}
	.icon-kitchen:before { font-size: 30px;content: "\e905"}
	.icon-restaurant:before { font-size: 35px;content: "\e906"}

	/* Product Icons */

	.product-icon-size{font-size:50px;color: #444}
	
	.icon-5yil-garanti:before {content: "\e907";}
	.icon-10yil-garanti1:before {content: "\e908";}
	.icon-alttan-isitmaya-uygun:before {content: "\e909";}
	.icon-asinma-direncli:before {content: "\e90a";}
	.icon-boyutsal-kalinklik:before {content: "\e90b";}
	.icon-cizilmeye-karsi-dayanikli:before {content: "\e90c";}
	.icon-cocuk-odalari:before {content: "\e90d";}
	.icon-ekolojik:before {content: "\e90e";}
	.icon-hizli-kolay-montaj:before {content: "\e90f";}
	.icon-kolay-temizlenir:before {content: "\e910";}
	.icon-koltuk-tekerlegine-direncli:before {content: "\e911";}
	.icon-lekelenmeye-direncli:before {content: "\e912";}
	.icon-noktosal-darbe-direnci:before {content: "\e913";}
	.icon-ofis-isyerleri:before {content: "\e914";}
	.icon-panel-kalinligi:before {content: "\e915";}
	.icon-sigara-yanmasina-direncli:before {content: "\e916";}
	.icon-uretici-garantili:before {content: "\e917";}
	.icon-uv-isik-dayanikli:before {content: "\e918";}
	.icon-yanmaya-direncli:before {content: "\e919";}
	.icon-yuksek-yogunlukta:before {content: "\e91a";}
	.icon-8mm:before {content: "\e91c";}
	.icon-10mm:before {content: "\e91d";}
	.icon-12mm:before {content: "\e91e";}

	body{font-family: "greycliff-cf",sans-serif !important; font-weight: 300 !important }
	b, strong{font-family: "greycliff-cf",sans-serif !important; font-weight: 500 !important }

	.clear{clear: both}
	.header-wrapper.stuck{background-color:rgba(255, 255, 255, 0.8) !important}
	.footer-wrapper{height: 100% !important;background-size: 100% 100%;background: url() no-repeat top center}
	.footer{padding: 40px 0 0 0}


	/*************** Ürünler Sayfası Genel   ***************/

	h1.product-page-title a{color: #000;font-size: 34px; font-family: "greycliff-cf",sans-serif !important;font-weight: 700 !important ;
	text-transform: uppercase}
	.product-page-description p{font-family: 'VW Text Regular', sans-serif !important; font-weight: normal ; color: #333}

	/* 2 column main container */

	.product-page-container{display: flex;height: auto;gap:30px;margin: 50px 30px 0 30px;padding-top:20px}
	.product-page-container-left {flex: 2; display: flex;flex-direction: column}
	.product-page-container-right {flex: 1; display: flex;flex-direction: column; gap:30px}	

	/* Gallery **************  */

	.product-gallery-container {display: flex;gap:30px;margin-left: 30px; margin-right: 30px;height: calc(100vh - 11rem) !important}
	.product-gallery-left {flex: 2; display: flex;align-items:flex-start;justify-content:flex-start;}
	.product-gallery-right {flex: 1; display: flex;flex-direction: column; }
	.product-gallery-right-top, .product-gallery-right-bottom { height: 50% }
	.product-gallery-right-top {padding-bottom: 15px}
	.product-gallery-right-bottom {padding-top: 15px}
	.product-gallery-right-bottom {border-bottom: none;}
	.product-gallery-image-container {width: 100%;height: 100%;}
	.product-gallery-image {border-radius: 20px;object-fit: cover; width: 100%;height: 100% }

	.product-gallery-image:hover{   opacity: .5;transition: opacity .5s ease-out;-moz-transition: opacity .5s ease-out;-webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;}

	/* RESPONSIVE ************************************************************************************* */

	@media (max-width: 768px) {
	.product-page-container{margin: 0 10px 0 10px}	
		
    .product-gallery-container, .product-page-container {flex-direction: column;}
	.product-gallery-container {height: 100% !important}

	.product-gallery-right-top, .product-gallery-right-bottom {height: auto;padding: 0}
    .product-gallery-left, .product-gallery-right, .product-page-container-left, .product-page-container-right {flex: none; width: 100%; }
    .product-gallery-right {display: flex;flex-direction: row;}
    .product-gallery-right-top, .product-gallery-right-bottom {flex: 1; /* Sağ kutuları eşit genişlikte yapar */}
	.product-gallery-image {border-radius: 10px }
	.product-gallery-container {gap:10px;margin-left: 10px; margin-right: 10px;}
	.product-gallery-right {gap:10px}

	.responsive-three-columns  {flex-direction: column;} 
		
	.parquet-icons ul li  {width: 20% !important}
	.parquet-icons li .icon_description {font-size: 13px !important;}
	.product-icon-size{font-size: 35px}
		
	.footer-wrapper{background-color:#000000 !important}
	.footer{padding:50px 0 0 0}
	.banner h2 {font-size: 1.8em !important;padding:10px 10px 10px 10px !important}	
	

	/* 3 column left files container */

	.icon-parquet:before {font-size: 30px;}
	.icon-catalog:before {font-size: 30px}
	.icon-certificate:before {font-size: 30px}	
	.box1-text, .box2-text, .box3-text {font-size: 15px !important;padding-top: 5px}	
	.boxx{align-items: center}

	
		
	}/* responsive  */


	/* 3 column left files container */

	.responsive-three-columns {display: flex; width: 100%; gap: 10px;align-items: stretch;margin-top:20px}
	.responsive-three-columns div {flex: 1; display: flex;flex-direction: column;align-items: center; }
	.boxx {width: 100%; max-height: 100px;flex-grow: 1; background-color: #ffffff; border-radius: 8px; box-shadow: 0px 6px 61px 6px rgb(0 0 0 / 10%); transition: transform ease 300ms; display: flex; flex-direction: row; justify-content: flex-start; position: relative;padding: 10px;align-items: center}
	.boxx:hover {transform: translate(0, -10px); background: #8dc8b8; box-shadow: 0px 25px 48px 6px rgb(113 184 165 / 30%); }
	.box1-text, .box2-text, .box3-text {font-size: 20px;padding-left: 20px}
	.box1-icon, .box2-icon, .box3-icon { color: #007555;font-size: 40px !important}
	.boxx:hover > .box1-icon, .boxx:hover > .box2-icon, .boxx:hover > .box3-icon {color: #fff;}



	/* Teknik Özellikler */
	h2.tech-title,h3.usage-title {font-size: 18px; text-transform: uppercase; color:#00654e;font-family: "greycliff-cf",sans-serif !important;font-weight: 500 !important;border-bottom: 1px solid #00654e; width: 100%;display: block}
	.product-page-table tr {text-align: left;}
	.product-page-table td , th{text-transform: none;text-align: left;border-bottom: solid rgba(71,71,71,.15) .1rem; width: auto;
	padding: 10px !important}
	.product-page-table th{font-family: "greycliff-cf",sans-serif !important;font-weight: 500 !important;color: #333}
	.product-page-table td{font-family: "greycliff-cf",sans-serif !important;font-weight: 400 !important;text-align: right;color: #666}
	.product-page-table tr:hover {background-color: #f2f2f2;-webkit-transition: background-color 40ms linear;-ms-transition: background-color 40ms linear;transition: background-color 40ms linear;}



	/* Parke Özellik İkonları */
	.parquet-icons ul{display: flex; flex-wrap: wrap ; gap: 20px; justify-content: flex-start;padding-top: 30px;align-items: flex-start}
	.parquet-icons ul li {display: flex;align-items: center;flex-direction: column; text-align: center;  width: 12%; /* Her satırda 5 öğe olacak şekilde */}
	.parquet-icons ul li .icon_description {display: block; width: 100%; text-align: center; margin: 0 auto;font-size: 15px;text-transform: uppercase;
	color: #666; padding-top: 10px}

	/* 6 Column Flex */
	.wrap6 {max-width: 1344px;margin: 0 auto;padding-top: 24px;}	
	.row6 {display: flex;flex: 0 1 auto;flex-direction: column;flex-wrap: wrap;}
	@media only screen and (min-width: 640px) {
	.row6 {flex-direction: row;}
	}
	.col6 {flex: 0 0 auto;padding: 0 12px;flex-basis: 100%;max-width: 100%;}
	.col--1of1,.col--2of2,.col--3of3,.col--6of6 {flex-basis: 100%;max-width: 100%;}
	@media only screen and (min-width: 640px) {.col--1of2, .col--3of6 {flex-basis: 50%;max-width: 50%;}}
	@media only screen and (min-width: 640px) {.col--1of3,.col--2of6 {flex-basis: 33.3333333%;max-width: 33.3333333%;}}
	@media only screen and (min-width: 640px) {.col--1of6 {flex-basis: 16.6666667%;max-width: 16.6666667%;}}
	@media only screen and (min-width: 640px) {.col--2of3,.col--4of6 {flex-basis: 66.6666667%;max-width: 66.6666667%;}}
	@media only screen and (min-width: 640px) {.col--5of6 {flex-basis: 83.3333333%;max-width: 83.3333333%;}}
	.col--group {padding: 0;}

	/* En Sık Kullanılan Alanlar */

	.row5 {display: flex;flex-wrap: wrap;}
	.col5 {flex: 1 0 18%;display: flex;align-items: center;justify-content:center;align-content: center;flex-direction: column}
	.col5-text{color: #333;padding: 10px 0 0 0;font-size: 15px }


	/* Anamenü Renkler */
	.nav > li > a {color:#000000 !important;font-size: 14px}
	.nav > li > a:hover {color: #dd3333!important}

	/* Footer  */
	.footer-1{background:none !important}
	.footer-2{background:none !important}
	.copyright-footer{height:40px;margin-bottom:10px}

a:where(:not(.wp-element-button)) {
    text-decoration: none!important;
}
.splide {
  width: 100%;
  margin: 0 auto;
}

.splide__slide {
  position: relative;
}

.carousel-item {
  position: relative;
  overflow: hidden;
  height: 565px;
}

.carousel-item img {
  width: 100%;
  height: 565px;
  object-fit: cover;
  border-radius: 8px; /* Normalde 8px border-radius olacak */
  transition: transform 0.5s ease-in-out, border-radius 0.3s ease-in-out; /* border-radius için transition ekledim */
}

.carousel-item:hover img {
  transform: scale(1.05);
  border-radius: 16px; /* Hover durumunda border-radius 16px olacak */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  transition: all 0.3s ease-in-out;
}

.caption {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: all 0.3s ease-in-out;
}

.carousel-item:hover .caption {
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
}

.btn {
  color: white;
  background: transparent;
  border: 2px solid white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.carousel-item:hover .btn {
  opacity: 1;
  transform: translateY(-10px);
}

/* Explore butonuna z-index ekleyin */
.btn.explore {
  position: relative;
  z-index: 10; /* Yüksek bir z-index değeri */
}

/* Buton üzerine gelindiğinde yazı rengi beyaz olacak */
.btn.explore {
  color: white;  /* Normalde beyaz */
}

/* Hover durumunda butonun metni beyaz olacak */
.btn.explore:hover {
  color: white;  /* Üzerine gelindiğinde beyaz */
  background: transparent; /* Arkaplanı şeffaf tut */
  border-color: white; /* Kenarlık beyaz kalacak */
}

.primary, input[type=submit], input[type=submit].button {
    background-color: #000000;
}

body {
    font-family: 'barlow';
}