@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

#header{background:#FF5300 !important;}
#header .navbar-brand{padding-right:2rem; padding-top:20px; padding-bottom:20px;}
#header .navbar-toggler{border:0px; box-shadow: 0px 0px 0px;}
#header .nav-link{color:#fff; padding-top:17px; font-size:15px; padding-right:20px;}
#header .nav-link:hover{color:#f5f5f5;}

#header #menu_icon{background:url('../img/icon/menu_icon.svg') no-repeat; padding:10px 12px; margin:0px 20px; background-size:25px;}
#header #search_btn{background:url('../img/icon/search.png') no-repeat; padding:8px; margin:5px 0px;}
#header #socail_media_btn{background:url('../img/icon/social_icon.png') no-repeat; padding:8px 9px; margin:0px 15px;}
#header #lang_btn{width: 60px; background-image: url('../img/icon/world_icon.png'); background-repeat: no-repeat; background-color: #fff; color:#FF5300; background-position: 5px; background-size: 17px; font-size: 14px; padding: 2px 25px; border-radius: 15px;}

#header .nav-item.dropdown {position: static;}
#header .dropdown-menu {width: 100%; left: 0; right: 0; top: 100%; border-radius: 0; background-color: #fff; padding:0px 35px; border:0px; box-shadow: 0px 3px 6px rgb(0 0 0 / 8%);}
#header .dropdown-menu #line {border-left:1px solid #E0E0E0;}
#header .dropdown-menu .dropdown-item {color: #2A2421; padding: 5px 0; font-size:18px; padding-top:8px; padding-bottom:8px;}
#header .dropdown-menu .dropdown-item:hover {background-color: #fff; color:#FC5000;}
#header .dropdown-menu h5 {font-size: 40px; color:#FC5000;}

#header .navbar-brand img{width:138px;}

#header .social-wrapper {position: relative;}
#header .social-menu-vertical {display: none; position: absolute; top: calc(100% + -30px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: 50px; padding: 8px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); flex-direction: column; align-items: center; gap: 10px; z-index: 9999;}
#header .social-menu-vertical .socail_media_btn_active{background:url('../img/icon/social_icon_hv.png') no-repeat; padding:9px;}
#header .social-menu-vertical .facebook{background:url('../img/icon/facebook.svg') no-repeat; padding: 9px; background-size: 10px; background-position: 50%;}
#header .social-menu-vertical .instagram{background:url('../img/icon/instagram.svg') no-repeat; padding: 9px; background-size: 15px; background-position: 50%;}
#header .social-menu-vertical .linkedin{background:url('../img/icon/linkedin.svg') no-repeat; padding: 9px; background-size: 15px; background-position: 50%;}
#header .social-menu-vertical .youtube{background:url('../img/icon/youtube.svg') no-repeat; padding: 9px; background-size: 15px; background-position: 50%;}
#header .social-menu-vertical .xtwitter{background:url('../img/icon/x.svg') no-repeat; padding: 9px; background-size: 15px; background-position: 50%;}
#header .social-menu-vertical.show {display: flex;}
#header .social-menu-vertical a {font-size: 18px; color: #FF5300; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 20px;}

#header .lang-wrapper {position: relative;}
#header .lang-menu-vertical {display: none; position: absolute; top: calc(100% + -30px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: 17px; width:60px; padding: 8px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); flex-direction: column; align-items: center; gap: 10px; z-index: 9999;}
#header .lang-menu-vertical .lang_btn_active{background:url('../img/icon/world_icon.png') no-repeat; padding:10px 16px; background-size:17px;}
#header .lang-menu-vertical.show {display: flex;}
#header .lang-menu-vertical a {font-size: 14px; color: #FF5300; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 20px;}
#header .lang-menu-vertical a span{position: relative; top: -3px; left: -12px;}

#webmenu {display:none; width:100%; height:100vh; position:fixed; left:0; top:0; background:rgb(0 0 0 / 95%); z-index:9;}
#webmenu ul{padding-left:0px;}
#webmenu ul li{display:block; text-align:center; margin-top:25px;}
#webmenu ul li a{color:#fff; font-weight:bold; text-decoration:none; font-size:22px;}
#webmenu .dropdown-menu {width:100%; text-align:center;}
#webmenu .dropdown-item {color:#000; font-size:16px;}
#webmenu #bg {background:#FF5300; padding:15px; margin-bottom:90px;}
#webmenu #bg img {height:65px;}
#webmenu #bg .col-md-3 {display:flex; justify-content:flex-end; align-items:center;}
#webmenu #bg .col-md-3 a {text-decoration:none; color:#fff; font-weight:bold; font-size:25px;}
#webmenu #webmnu_social_media {text-align:center; margin-top:120px;}
#webmenu #webmnu_social_media a {margin-right:15px}


#search_field{display: none; flex: 1; margin: 0 10rem; transition: all 0.3s ease;}
#search_field.show{display: block;}
#header .navbar-nav, .d-flex[role="search"]{transition: all 0.3s ease;}
#header .search-active .navbar-nav{display: none !important;}
#header .search-active .d-flex[role="search"]{display: flex !important;}
#search_field .form-control{background-color: transparent; border:0px; box-shadow: 0px 0px 0px; color:#fff; background-image: url(../img/icon/search.png); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 45px;}
#search_field .form-control::placeholder {color: #fff; opacity: 1;}
#search_field .form-control::-ms-input-placeholder {color: #fff;}
#search_field .btn-outline-secondary {color: #fff; border:0px; font-size: 20px; padding-top: 3px;}
#search_field .btn-outline-secondary:hover {background:transparent;}

#HumanisSlider .carousel-item img {width: 100%; height: auto;}
#HumanisSlider .carousel-caption {position: absolute; top: 45%; left: 5%; transform: translateY(-50%); color: #000; text-shadow: none; max-width: 500px; z-index:2;}
#HumanisSlider .eyebrow {margin-bottom: 40px; color: #555; font-size:26px;}
#HumanisSlider .eyebrow .brand {color: #ff6a00;}
#HumanisSlider h1 {font-size: 53px; color:#FC5000; margin-bottom: 15px; line-height: 1.1;}
#HumanisSlider .lead-desc {color: #2A2421; margin-bottom: 40px; margin-top: 40px; font-size:16px;}
#HumanisSlider .btn-wrap .btn {border-radius: 17px; padding: 10px 18px;}
#HumanisSlider .btn-outline-orange {background: #fff; border: 1px solid #2A2421; margin-right:20px;}
#HumanisSlider .btn-outline-orange:hover {background: #FC5000; border: 1px solid #FC5000; color: #fff;}
#HumanisSlider .carousel-indicators.indicators-vertical {position: absolute; right: 0; top: 35%; transform: translateY(-50%); margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-right: 10px;}
#HumanisSlider .carousel-indicators.indicators-vertical [data-bs-target] {width: auto; height: auto; padding: 0; background: rgb(255 255 255 / 43%); border: 1px solid #2A2421; text-indent: 0;}
#HumanisSlider .carousel-indicators.indicators-vertical [data-bs-target] span {display: block; padding: 6px 12px; font-size: 12px; font-weight: 600; color: #777;}
#HumanisSlider .carousel-indicators.indicators-vertical .active span {color: #000;}

#hp_slider_btm .col-md-3{padding:68px 60px; border-right:1px solid #E1E1E1;}
#hp_slider_btm .col-md-3:hover{background:#F9F9F9;}
#hp_slider_btm img{height:100px;}
#hp_slider_btm .title{font-size:20px; color:#2A2421; margin-top:50px; margin-bottom:35px;}
#hp_slider_btm .desc{font-size:15px; color:#222222; min-height: 115px;}
#hp_slider_btm .arrow {width:30px; height:25px; margin-top:35px; transition: fill 0.3s ease;}
#hp_slider_btm .col-md-3:hover .arrow {fill: #FF5300; transform: rotate(-45deg); transition: transform 0.3s ease;}

#hp_humanis_hakkinda{background:#FF5300;}
#hp_humanis_hakkinda #left_image{display:flex; align-items: center;}
#hp_humanis_hakkinda #right{display: flex; flex-direction: column; justify-content: center; padding:40px;}
#hp_humanis_hakkinda .head_title{font-size:50px; color:#fff;}
#hp_humanis_hakkinda h1{font-size:70px; color:#fff; margin-bottom:30px; margin-top:30px;}
#hp_humanis_hakkinda .desc{font-size:18px; color:#fff;}
#hp_humanis_hakkinda #list {margin-top:80px;}
#hp_humanis_hakkinda #list .col-md-12{background:#fff; font-size:18px; border: 1px solid #E1E1E1; border-radius: 43px; padding:10px; margin-bottom:40px;}
#hp_humanis_hakkinda #list .col-md-12 .row{display: flex; align-items: center;}
#hp_humanis_hakkinda #list .col-md-12 #icon{background:#F0F0F0; border-radius:100%; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center;}
#hp_humanis_hakkinda #list .col-md-12:hover #icon{background:#FC5000; fill: #fff;}
#hp_humanis_hakkinda #list .col-md-12:hover #icon path{fill: #fff;}
#hp_humanis_hakkinda #list .col-md-12 #text{padding:19px 15px;}
#hp_humanis_hakkinda #list .col-md-12:hover #text{color:#FC5000;}

#urunler_tuketici_sagligi .image-container {position: relative; overflow: hidden;}
#urunler_tuketici_sagligi .overlay {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; z-index: 2;}
#urunler_tuketici_sagligi .default-text, #urunler_tuketici_sagligi h1 {color: white; transition: opacity 0.4s ease, transform 0.4s ease; text-align: center;}
#urunler_tuketici_sagligi .default-text {font-size: 20px; margin-bottom: 23px;}
#urunler_tuketici_sagligi h1 {font-size: 40px; margin: 0;}
#urunler_tuketici_sagligi .hover-text {font-size: 20px; color: #fff; white-space: nowrap; opacity: 0; transform: translateX(50%); transition: opacity 0.4s ease, transform 0.4s ease; margin-top:-30px;}
#urunler_tuketici_sagligi .image-container::after {content: ""; position: absolute; inset: 0; background-color: rgba(255, 165, 0, 0); transition: background-color 0.4s ease; z-index: 1;}
#urunler_tuketici_sagligi .image-container:hover::after {background-color: rgb(255 83 0 / 15%);}
#urunler_tuketici_sagligi .image-container:hover .default-text, #urunler_tuketici_sagligi .image-container:hover h1 {opacity: 0; transform: translateY(-10px);}
#urunler_tuketici_sagligi .image-container:hover .hover-text {opacity: 1; transform: translateX(0);}

#humanis_news{margin-top:40px;}
#humanis_news #news_list{margin-bottom:30px;}
#humanis_news #news_list img{border-radius:30px;}
#humanis_news #news_list #cerceve{border-bottom:11px solid #fc5000; border-right:10px solid #fc5000; height:335px; object-fit:cover;}
#humanis_news #news_list .date{background: rgb(255 255 255 / 68%); position: relative; top: -70px; width: 55px; text-align: center; float: right; right: 20px; border-radius: 13px; color:#2A2421; padding:6px 8px; display:none;}
#humanis_news #news_list .date .day{font-size:20px; margin-bottom:-7px;}
#humanis_news #news_list .date .month{font-size:11px;}
#humanis_news #news_list h1{font-size:20px; color:#2A2421; margin-top:40px; min-height:51px;}
#humanis_news #news_list .line{height:1px; width:100%; background:#E1E1E1; margin-bottom:30px; margin-top:28px;}
#humanis_news #news_list p{font-size:15px; color:#262626; margin-bottom:30px; min-height:65px;}
#humanis_news #news_list a{font-size:18px; color:#2A2421; text-decoration:none;}

#genel_baslik{margin-bottom:70px; text-align:center;}
#genel_baslik h1{font-size:40px; color:#2A2421; margin-bottom:30px;}
#genel_baslik h1 span{color:#FC5000;}
#genel_baslik p{font-size:15px; color:#262626;}

#detail_banner{background:url('../img/detail_banner.png') no-repeat 50%; min-height:300px; padding:0px; text-align:center; display: flex; flex-direction: column; justify-content: center; align-items: center; display:none;}
#detail_banner .title{font-size:20px; color:#fff; margin-bottom:15px;}
#detail_banner #breadcrumb{border: 1px solid #FFFFFF; border-radius: 17px; padding:2px 15px; color:#fff;}
#detail_banner #breadcrumb span{margin-left:5px; margin-right:5px;}
#detail_banner #breadcrumb a{font-size:14px; color:#fff; text-decoration:none;}
#detail_banner #breadcrumb a:hover{color:#ede5e1;}

#detail_page #text{display:flex; flex-direction: column; justify-content: center;}
#detail_page h1{color:#FC5000; font-size:40px; margin-bottom:20px;}
#detail_page h2{color:#2A2421; font-size:20px; margin-bottom:30px;}
#detail_page h3{color:#FC5000; font-size:20px; margin-bottom:20px;}
#detail_page h4{color:#FC5000; font-size:18px; margin-bottom:20px;}
#detail_page h5{color:#FC5000; font-size:16px; margin-bottom:20px;}
#detail_page p{color:#262626; font-size:15px; margin-bottom:30px;}
#detail_page #middle_detail{background:#F7F7F7;}
#detail_page #middle_detail #list{background:#fff; border-radius: 35px; padding:25px 10px; position: relative; right: -85px;}
#detail_page #middle_detail #list:hover{background: transparent linear-gradient(180deg, #FF6822 0%, #E94A00 100%) 0% 0% no-repeat padding-box;}
#detail_page #middle_detail #list .title{color:#2A2421; font-size:20px; margin-bottom:20px;}
#detail_page #middle_detail #list:hover .title{color:#fff;}
#detail_page #middle_detail #list p{margin-bottom:0px;}
#detail_page #middle_detail #list:hover p{color:#fff;}
#detail_page #middle_detail #imagem{display:flex; flex-direction: row; align-items: center;}
#detail_page #middle_detail #list:hover path{fill:#fff;}

#product_alphabet a{color:#2A2421; text-decoration:none; font-size:20px; margin-right:15px;}
#product_alphabet .active{color:#FC5000; text-decoration:none; font-size:20px;}

#category_search{margin-top:40px; margin-bottom:40px;}
#category_search .form-select{border: 1px solid #2A2421; border-radius: 17px; font-size:18px; padding:10px 20px;}
#category_search .form-control{border: 1px solid #2A2421; border-radius: 17px; font-size:18px; padding:10px 20px;}
#category_search .btn-outline-orange {background: #fff; border: 1px solid #2A2421; margin-right:20px;}
#category_search .btn-outline-orange:hover {background: #FC5000; border: 1px solid #FC5000; color: #fff;}

#products{margin-bottom:180px;}
#product_list{border: 1px solid #E1E1E1; border-radius: 35px; font-size:15px;}
#product_list .col-md-9{display:flex; flex-direction: column; justify-content: center; padding:55px;}
#product_list #image{display:flex; flex-direction: row; align-items: center;}
#product_list h2{font-size:20px; color:#2A2421;}
#product_list h5{font-size:15px; color:#FC5000; margin-top:15px; margin-bottom:25px;}
#product_list span{margin-right:25px;}
#product_list .download{display:flex; margin-top:40px;}
#product_list a{color:#2A2421; text-decoration:none; border: 1px solid #2A2421; border-radius: 17px; padding: 3px 20px; margin-right:10px;}
#product_list a:hover{color:#fff; background:#FC5000; border:1px solid #FC5000;}
#product_list a svg{margin-left:10px; font-size:17px;}
#product_list a:hover svg{fill:#fff;}

#webhide li{display:none;}

#footer{margin-top:20px; background:#FC5000; color:#fff;}
#footer #right_logo{text-align:right; position:relative; top:-72px;}
#footer #footer_links{display: flex; flex-wrap: wrap; gap: 10px; flex-direction: row; align-content: center; justify-content: center; align-items: center;}
#footer #footer_links a{text-decoration:none; color:#fff; border:1px solid #fff; padding:7px; margin-right:10px; display:flex; justify-content:center;}
#footer h1{font-size:20px; margin-bottom:25px;}
#footer ul{padding-left:0px;}
#footer ul li{display:block;}
#footer ul li a{text-decoration:none; color:#fff; font-size:15px;}
#footer ul li a:hover{color:#efefef;}
#footer #contact_us_footer a{color:#fff; text-decoration:none;}

#copyright_section{border-top:1px solid #FF7534; background:#FC5000; color:#fff; font-size:15px;}
#copyright_section a{color:#fff; font-size:15px; color:#fff; text-decoration:none;}
#copyright_section a:hover{color:#efefef;}
#copyright_section #saya_holding{text-align:right;}
#copyright_section #footer_social_media{padding-bottom:15px;}
#copyright_section #footer_social_media a{text-decoration:none; margin-right:15px;}

@media (max-width: 1400px){
	#copyright_section #footer_social_media{padding-top:0px;}
}

@media (max-width: 1300px){
	#header .nav-link{padding-right:10px;}
	#hp_humanis_hakkinda #list .col-md-12 .row{justify-content: center;}
	#hp_humanis_hakkinda #list .col-md-12 #text{text-align:center;}
}

@media (max-width: 992px){
	#header #humanis_right_btn{justify-content: center; padding-top:15px; padding-bottom:15px;}
	#header .nav-link{text-align:center; padding-right: 0px;}
    #header .search-active .navbar-nav{display: block !important; margin-bottom: 1rem;}
	#header .dropdown-menu .dropdown-item {font-size:15px;}
	#header .dropdown-menu h5 {display:none;}
	#header .dropdown-menu .col-lg-1 {display:none;}
	#header .dropdown-menu .col-lg-3 {padding:0px !important; text-align:center;}
	#header #menu_icon{display:none;}
	
	#search_field{margin: 1rem 0; order: 3; flex-basis: 100%;}
	
	#HumanisSlider .carousel-caption {top: 35%;}
	
	#hp_slider_btm .col-md-3{padding:28px 20px;}
	
	#detail_page #middle_detail #list .title{margin-top:20px;}
	#product_list span{margin-right:0px;}
	#product_list .download {justify-content: center;}
	#detail_page #middle_detail #list{background:#fff; border-radius: 35px; padding:25px 10px; position: relative; right: 0px; text-align:center;}
	
	#product_list .col-md-9{text-align:center;}
	#product_list .col-md-9 strong{display:flex; flex-direction: column;}
	#product_list #image{justify-content: center;}
	
	#webhide li{display:block;}
	
	#footer{text-align:center;}
	#footer #right_logo{text-align:center; position:relative; top:20px; margin-bottom:35px;}
	
	#copyright_section #links{text-align:center; margin-bottom:25px;}
	#copyright_section #saya_holding{text-align:center; margin-top:25px;}
}

@media (max-width: 768px){
	#HumanisSlider .carousel-indicators.indicators-vertical {top: 50%;}
	#HumanisSlider .eyebrow {margin-bottom: 10px; color: #555; font-size:15px;}
	#HumanisSlider h1 {font-size: 18px;}
	#HumanisSlider .lead-desc {margin-top: 10px; font-size:16px;}
	#HumanisSlider .btn-wrap .btn {display:none;}
}