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

Template Name: Hayper - Onepage Creative Multipurpose Template
Author: validtheme
Version: 1.0

-------------------------------------

Table of contents
        
    01. Google font
    02. Reset
    03. Typography
    04. Background color
    05. Custom
    06. Button
    07. Border
    08. Aside style
    09. Video
    10. Background image
    11. Icon
    12. Magnific popup
    13. Header
    14. Page title
    15. Swiper carousel
    16. Slider and parallax typography
    17. Portfolio
    18. Elements
    19. Blog
    20. Footer
    21. Home Page
    22. Services Page
    23. About Page
    24. Projects Page
    25. Pricing Page
    26. PHP Contact Form
    27. Others

*/


/*
** General Styles for HTML tags
*/

* {
  padding: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  overflow-x: hidden;
  background-color: #ffffff;
}

html, body, .wrapper {
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: #232323;
  font-weight: normal;
  line-height: 1.2;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0;
  margin: 0;
}

h1,h2,h3,h4 {
  margin-bottom: 15px;
}

h5,h5 {
  margin-bottom: 10px;
}

img {
  border: none;
  outline: none;
  max-width: 100%;
}

label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 5px;
  max-width: 100%;
}

a, .btn, button {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  outline: medium none;
}

a img, iframe {
  border: none;
}

p {
  color: #232323;
  line-height: 26px;
  margin: 0 0 15px;
  text-transform: none;
  font-weight: 400;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid #eee;
}

pre {
  display: block;
  margin: 0 0 30px;
  padding: 9.5px;
  word-wrap: break-word;
  word-break: break-all;
  color: #333;
  border: 1px solid #ededed;
  border-radius: inherit;
  background-color: #f9f9f9;
  font-size: 13px;
  line-height: 1.42857143;
}

input:focus, textarea:focus, 
 select:focus {
  outline: none;
  box-shadow: inherit;
}

ul {
  margin: 0;
  list-style-type: none;
}

a, a:active, a:focus, a:hover {
  outline: none;
  text-decoration: none;
  color: #232323;
}

a:hover {
  color: #232323;
}

a {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

b, strong {
  font-weight: 900;
}

.btn.active, .btn:active {
  background-image: inherit !important;
}

.btn.focus, 
 .btn:active:focus, 
 .btn:active:hover, 
 .btn:focus, 
 .btn:hover {
  outline: 0;
}

.btn.circle {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.btn.active, .btn:active {
  outline: 0;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}

input {
  border: 1px solid #e7e7e7;
  border-radius: inherit;
  box-shadow: inherit;
  min-height: 50px;
}
/* BNANO Dark Theme Variables */
:root {
  --bnano-primary: #012941;
  --bnano-secondary: #0A4F6B;
  --bnano-accent: #20A6D6;
  --bnano-light: #B8E1F2;
  --bnano-text-light: #F5F9FC;
  --bnano-text-muted: #A8CDE0;
  --bnano-success: #28a745;
  --bnano-warning: #ffc107;
  --bnano-danger: #dc3545;
}

/* Dark Theme Global Overrides */
body {
  background-color: var(--bnano-primary);
  color: var(--bnano-text-light);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bnano-text-light);
}

p {
  color: var(--bnano-text-light);
}

a, a:active, a:focus, a:hover {
  color: var(--bnano-text-light);
}

a:hover {
  color: var(--bnano-accent);
}

/* Language Switcher Styles */
.language-switcher {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin-left: 20px;
}

.lang-btn {
  background: transparent;
  border: 1px solid var(--bnano-accent);
  color: var(--bnano-accent);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lang-btn:hover,
.lang-btn.active {
  background: var(--bnano-accent);
  color: var(--bnano-primary);
}

/* RTL Support */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .navbar-nav {
  float: left;
}

[dir="rtl"] .navbar-brand {
  float: right;
}

/* Default CSS */
.container-half {
  margin: 0 auto;
  width: 60%;
  padding: 0 15px;
}

.bg-cover {
  background-position: center center;
  background-size: cover;
}

.bg-fixed {
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
}

.bg-gray {
  background-color: var(--bnano-secondary);
}

.bg-light {
  background-color: var(--bnano-primary);
}

.bg-theme {
  background-color: var(--bnano-accent);
}

.bg-dark {
  background: var(--bnano-primary);
}

.text-light h1, 
 .text-light h2, 
 .text-light h3, 
 .text-light h4, 
 .text-light h5, 
 .text-light h6, 
 .text-light p, 
 .text-light a {
  color: var(--bnano-text-light);
}

.shadow {
  position: relative;
  z-index: 1;
}

.shadow.dark::after {
  background: var(--bnano-primary) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.dark-hard::after {
  background: #232323 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.75;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.light::after {
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.theme::after {
  background: var(--bnano-accent) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.theme-hard::after {
  background: var(--bnano-accent) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.default-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

.default-padding-top {
  padding-top: 80px;
}

.default-padding-bottom {
  padding-bottom: 80px;
}

.default-padding.bottom-less {
  padding-top: 80px;
  padding-bottom: 50px;
}

.default-padding.bottom-30 {
  padding-top: 80px;
  padding-bottom: 30px;
}

.default-padding.bottom-20 {
  padding-top: 80px;
  padding-bottom: 20px;
}

.padding-xl {
  padding-top: 180px;
  padding-bottom: 180px;
}

.carousel-shadow {
  padding-bottom: 65px;
}

.btn {
  display: inline-block;
  font-family: "Poppins",sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 25px;
  text-transform: uppercase;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: inherit;
  overflow: hidden;
}

.btn-md {
  padding: 10px 40px 10px;
}

.btn-sm {
  padding: 8px 35px;
  font-size: 12px;
}

.btn.btn-sm-pro {
  font-size: 10px;
  font-weight: 600;
  margin-top: 5px;
  padding: 4px 35px;
  display: inline-block;
}

.btn-border-light {
  border: 2px solid #ffffff;
}

.btn.btn-sm-pro.btn-border-light:hover, 
 .btn.btn-sm-pro.btn-border-light:focus {
  background-color: #ffffff;
  color: #232323;
  border: 2px solid #ffffff;
}

.btn-dark {
  background-color: var(--bnano-secondary);
  color: var(--bnano-text-light);
  border: 2px solid var(--bnano-secondary);
}

.btn-dark.border {
  background-color: transparent;
  color: var(--bnano-text-light);
  border: 2px solid var(--bnano-text-light);
}

.btn-dark.border:hover {
  background-color: var(--bnano-text-light);
  color: var(--bnano-primary) !important;
  border: 2px solid var(--bnano-text-light);
}

.btn.btn-light {
  background: var(--bnano-text-light) none repeat scroll 0 0;
  border: 2px solid var(--bnano-text-light);
  color: var(--bnano-primary) !important;
}

/* Slider butonları için özel stil - yazı daha koyu */
.banner-area .btn.btn-light {
  background: rgba(255, 255, 255, 0.95) none repeat scroll 0 0;
  border: 2px solid #ffffff;
  color: #222222 !important;
  font-weight: 700;
}

.banner-area .btn.btn-light:hover {
  background: #ffffff;
  color: #000000 !important;
}

.btn.btn-light:hover, 
 .btn.btn-light:focus {
  background: transparent none repeat scroll 0 0;
  border: 2px solid var(--bnano-text-light);
  color: var(--bnano-text-light);
}

.btn.btn-light.effect:hover, 
 .btn.btn-light.effect:focus {
  background-color: var(--bnano-accent);
  color: var(--bnano-text-light) !important;
  border: 2px solid var(--bnano-accent);
}

.btn.btn-light.border {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.btn.btn-light.border:hover {
  background: #ffffff none repeat scroll 0 0 !important;
  border: 2px solid #ffffff !important;
  color: #232323 !important;
}

.btn-dark:hover, 
 .btn-dark:focus {
  color: #232323 !important;
  background: transparent;
}

.bg-dark {
  background: #1d2024 none repeat scroll 0 0;
}

.btn-theme {
  background-color: var(--bnano-accent);
  color: var(--bnano-text-light) !important;
  border: 2px solid var(--bnano-accent);
}

.btn-theme.border {
  background-color: transparent;
  color: var(--bnano-accent) !important;
  border: 2px solid var(--bnano-accent);
}

.btn-theme.border:hover {
  background-color: var(--bnano-accent);
  color: var(--bnano-text-light) !important;
  border: 2px solid var(--bnano-accent);
}

.btn-theme.effect:hover, 
 .btn-theme.effect:focus {
  background: var(--bnano-accent) none repeat scroll 0 0;
  border: 2px solid var(--bnano-accent);
  color: var(--bnano-text-light);
}

.btn.btn-sm-lm {
  font-size: 12px;
  padding: 4px 35px;
}

.btn.border.btn-light.standard {
  padding-left: 20px;
  padding-right: 50px;
  position: relative;
  z-index: 1;
}

.btn.border.btn-light.standard::after {
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 53px;
  position: absolute;
  right: -18px;
  top: -10px;
  transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  width: 50px;
  z-index: -1;
}

.btn.border.btn-light.standard::before {
  color: #fd0060;
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  height: 100%;
  position: absolute;
  right: 0;
  width: 25px;
}

.bg-fixed {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

.bg-cover {
  background-position: center center;
  background-size: cover;
}

.container-full {
  padding: 0 15px;
  width: 100%;
}

.oh {
  overflow: hidden;
}

.less-margin {
  margin: 0;
}

header {
  position: relative;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a {
  position: relative;
  z-index: 1;
  margin-left: 3px;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a {
  border: medium none;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a::after {
  background: #ffffff none repeat scroll 0 0;
  bottom: -2px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a:hover::after {
  width: 100%;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a:hover::after {
  width: 0;
}

.attr-nav .social.right li {
  margin-left: 20px;
}

.attr-nav .social li a {
  font-size: 16px;
}

/* Navbar */
nav.bootsnav.navbar-default.info-topbar .navbar-header {
  display: none;
}

nav.bootsnav.navbar-default.info-topbar ul li a {
  margin-right: 30px;
  padding: 35px 0;
}

nav.bootsnav.navbar-default.info-topbar.active-full ul li a {
  margin-right: 0;
  padding: 35px 20px;
}

.attr-nav > a.btn-theme.effect:hover, 
.attr-nav > a.btn-theme.effect, 
.attr-nav > a.btn-theme.effect:focus {
  background: #fd0060 none repeat scroll 0 0;
  border: 2px solid #fd0060;
  color: #ffffff !important;
}

nav.bootsnav.navbar-default.info-topbar.sticked ul li a {
  margin-right: 30px;
  padding: 35px 0;
}

.attr-nav.social li {
  display: inline-block;
  padding: 25px 0 !important;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.attr-nav.social li a {
  border: 1px solid #f4f4f4;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #fd0060;
  display: inline-block;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
  padding: 0 !important;
  text-align: center;
  width: 40px;
}

nav.navbar.bootsnav.sticked .attr-nav.social li {
  display: inline-block;
  padding: 20px 0 !important;
}

.site-heading h2 {
  color: var(--bnano-text-light);
  display: inline-block;
  font-weight: 700;
  padding-bottom: 20px;
  position: relative;
  text-transform: uppercase;
}

.site-heading.clean h2 {
  padding-bottom: 0;
}

.site-heading.clean h2 span {
  color: var(--bnano-accent);
}

.site-heading h2 span {
  color: var(--bnano-accent);
}

.site-heading.barber h2 span {
  color: #bc9355;
}

.site-heading p {
  margin: 0;
}

.site-heading.clean h2::after,
.site-heading.clean h2::before {
  display: none;
}

.site-heading h2::before {
  background: var(--bnano-accent) none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 30px;
  position: absolute;
  width: 50px;
}

.site-heading h2::after {
  background: var(--bnano-text-light) none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 25px;
}

.site-heading h2 span {
  color: #fd0060;
}

.site-heading {
  margin-bottom: 60px;
  overflow: hidden;
  margin-top: -5px;
}

.carousel-shadow .site-heading {
  margin-bottom: 35px;
}

/* ============================================================== 
     # Bradcrumb 
=================================================================== */
.breadcrumb-area {
  padding: 270px 0 180px;
}

.breadcrumb-area .breadcrumb {
  background: transparent none repeat scroll 0 0;
  display: inline-block;
  margin: 0;
  padding: 10px 20px;
  position: relative;
  z-index: 1;
}

.breadcrumb-area .breadcrumb::after {
  background: #232323 none repeat scroll 0 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.breadcrumb-area h1 {
  display: block;
  font-weight: 600;
  text-transform: capitalize;
  font-size: 60px;
}

.breadcrumb > li + li::before {
  color: #ffffff;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  padding: 0 5px;
}

.breadcrumb-area .breadcrumb a, 
 .breadcrumb-area .breadcrumb li {
  font-weight: 600;
  text-transform: uppercase;
}

.breadcrumb-area .breadcrumb li.active {
  color: #fd0060;
}


/* ============================================================== 
     # Banner 
=================================================================== */
body, 
.banner-area, 
.banner-area div {
  height: 100%;
}

.banner-area .box-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.banner-area .box-table {
  display: table;
  width: 100%;
}

.banner-area .box-cell, 
 .banner-area .box-cell div {
  height: auto;
}

.banner-area {
  position: relative;
  overflow: hidden;
}

.banner-area .content {
  overflow: hidden;
}

.banner-area.shadow-inner .content {
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.banner-area.shadow-inner .content::after {
  background: #1c1c1c none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.banner-area.inc-dots .carousel-indicators {
  bottom: inherit;
  display: inline-block;
  left: auto;
  margin: -40px 0 0;
  position: absolute;
  right: 20px;
  top: 50%;
  width: auto;
}

.banner-area.inc-dots .carousel-indicators li {
  border: 3px solid #ffffff;
  display: block;
  height: 20px;
  margin: 10px 0;
  width: 20px;
}

.banner-area.inc-dots .carousel-indicators li.active,
.banner-area.inc-dots .carousel-indicators li:hover {
  background: #fd0060 none repeat scroll 0 0;
}

.banner-area.large-font .content h1 {
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.banner-area.text-center p {
  padding: 0 10%;
}

.banner-area .content span {
  color: #fd0060;
}

.banner-area.large-font h4 {
  line-height: 1.4;
  margin-bottom: 30px;
}

.banner-area.middle-text.heading-uppercase .content h1 {
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.banner-area.small-text .content h1 {
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.banner-area.small-text .content p {
  margin-bottom: 30px;
}

.banner-area.middle-text .content h4 {
  line-height: 30px;
}

.banner-area.middle-text .content h2 {
  color: #fd0060;
  font-weight: 500;
  text-transform: capitalize;
}

.banner-area.middle-text .content h1 {
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 25px;
  text-transform: capitalize;
}

.banner-area.middle-text .content a {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 10px;
}

.banner-area .content a {
  margin: 0 3px;
}

.banner-area.version-3 .content h1 {
  font-size: 80px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.banner-area.version-3 .content h3 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 30px;
}

.banner-area .carousel-control {
  font-size: 40px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
  margin-top: -25px;
  background: transparent;
  opacity: 1;
  z-index: 1;
}

.banner-area .carousel-control.shadow {
  background: transparent none repeat scroll 0 0;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  margin-top: -25px;
  opacity: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
  z-index: 1;
  color: #ffffff;
  text-shadow: inherit;
}

.banner-area .carousel-control.shadow::after {
  background: #232323 none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.banner-area .carousel-control.left {
  left: -50px;
}

.banner-area:hover .carousel-control.left {
  left: 0;
}

.banner-area.typed-text.small-text .content h2 {
  display: block;
  margin-bottom: 30px;
}

.banner-area:hover .carousel-control.shadow.left {
  left: 20px;
}

.banner-area .carousel-control.right {
  right: -50px;
}

.banner-area:hover .carousel-control.right {
  right: 0;
}

.banner-area:hover .carousel-control.shadow.right {
  right: 20px;
}

/* Animation delays */
.banner-area .item h1:first-child, 
 .banner-area .item h2:first-child, 
 .banner-area .item h3:first-child, 
 .banner-area .item h4:first-child, 
 .banner-area .item h5:first-child, 
 .banner-area .item h6:first-child {
  animation-delay: .5s;
}

.banner-area .item h1:nth-child(2), 
 .banner-area .item h2:nth-child(2), 
 .banner-area .item h3:nth-child(2), 
 .banner-area .item h4:nth-child(2), 
 .banner-area .item h5:nth-child(2), 
 .banner-area .item h6:nth-child(2) {
  animation-delay: .7s;
}

.carousel-caption h1:nth-child(3), 
 .carousel-caption h2:nth-child(3), 
 .carousel-caption h3:nth-child(3), 
 .carousel-caption h4:nth-child(3), 
 .carousel-caption h5:nth-child(3), 
 .carousel-caption h6:nth-child(3) {
  animation-delay: .9s;
}

.banner-area .item p {
  animation-delay: .5s;
}

.banner-area .item a, 
 .banner-area .item button {
  animation-delay: .7s;
}
/* Carousel Fade Effect */
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  position: relative;
}

.carousel-fade .carousel-inner .item, 
 .carousel-fade .carousel-inner .active.left, 
 .carousel-fade .carousel-inner .active.right {
  opacity: 0;
}

.carousel-fade .carousel-inner .active, 
 .carousel-fade .carousel-inner .next.left, 
 .carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-inner .next, 
 .carousel-fade .carousel-inner .prev, 
 .carousel-fade .carousel-inner .active.left, 
 .carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
  z-index: 2;
}
/* Slider Zoom Effect */
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }

  to {
    -webkit-transform: scale(1.2, 1.2);
  }
}

@-moz-keyframes zoom {
  from {
    -moz-transform: scale(1, 1);
  }

  to {
    -moz-transform: scale(1.2, 1.2);
  }
}

@-o-keyframes zoom {
  from {
    -o-transform: scale(1, 1);
  }

  to {
    -o-transform: scale(1.2, 1.2);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(1.2, 1.2);
  }
}

.carousel-inner .item {
  position: relative;
}

.carousel-inner .item > .slider-thumb {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

.banner-area .carousel-zoom .slider-thumb {
  height: 100%;
  position: absolute;
  width: 100%;
}

#particles-js,
#ripple {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* ============================================================== 
     # About 
=================================================================== */
.about-area .services-info .equal-height .item a {
  background: rgba(35, 35, 35, 0.3) none repeat scroll 0 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  padding: 50px 30px;
}

.about-area .services-info .item {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.about-area .services-info .equal-height {
  margin-top: 30px;
}

.about-area .services-info {
  margin-top: -30px;
}

.about-area .services-info .equal-height i {
  background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #fd0060;
  display: inline-block;
  font-size: 35px;
  height: 80px;
  line-height: 80px;
  position: relative;
  text-align: center;
  width: 80px;
  z-index: 1;
}

.about-area .services-info .item h4 {
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 15px;
  text-transform: capitalize;
  color: #ffffff;
}

.about-area .info h2 {
  font-weight: 600;
  margin-bottom: 25px;
}

.about-area .info h3,
.about-area .info h4 {
  font-weight: 600;
  margin: 20px 0;
  text-transform: capitalize;
}

.about-area .info ul li {
  display: block;
  font-family: "Poppins",sans-serif;
  font-size: 16px;
  margin-bottom: 10px;
}

.about-area .info ul li:last-child {
  margin-bottom: 0;
}

.about-area .info a {
  margin-top: 25px;
}

.about-area .info ul li i {
  color: #fd0060;
  margin-right: 10px;
}

/* ============================================================== 
     # Our services
=================================================================== */

.our-services .item {
  -moz-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  -o-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #ffffff;
}

.our-services .item .info {
  padding: 50px 30px;
}

.our-services .services-items .owl-stage-outer {
  margin: 0 -15px;
  padding: 15px;
}

.our-services .item .icon i {
  background: #fd0060 none repeat scroll 0 0;
  color: #ffffff;
  display: inline-block;
  font-size: 50px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  width: 100%;
}

.our-services .item h4 {
  font-weight: 600;
  text-transform: capitalize;
}

.our-services .item a {
  color: #fd0060;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.our-services .item a:hover {
  color: #232323;
}

.our-services .services-items .owl-dots {
  margin-top: 30px !important;
  margin-bottom: -10px;
}

.our-services .services-items .owl-dots .owl-dot span {
  background: #ffffff none repeat scroll 0 0;
  border: 3px solid #232323;
  height: 15px;
  margin: 0 5px;
  padding: 0;
  width: 15px;
}

.our-services .services-items .owl-dots .owl-dot.active span,
.our-services .services-items .owl-dots .owl-dot:hover span {
  border-color: #fd0060;
}


/* ============================================================== 
     # Portfolio 
=================================================================== */

.portfolio-area.default-padding {
  padding-bottom: 65px;
}

.hover-effect .pf-item {
  margin-bottom: 0;
}

.portfolio-area .mix-item-menu button {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  box-shadow: inherit;
  color: #232323;
  display: inline-block;
  float: left;
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
  margin: 0 5px;
  position: relative;
  text-transform: capitalize;
}

.portfolio-area .mix-item-menu button.active::after {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fd0060;
  bottom: -10px;
  content: "";
  height: 10px;
  left: 50%;
  margin-left: -15px;
  position: absolute;
  width: 2px;
}

.portfolio-items-area.inner-title .item-inner .view-list {
  margin-top: -40px;
}

.portfolio-items-area.inner-title .item-inner .view-list h4 {
  font-weight: 500;
}

.portfolio-area .mix-item-menu {
  display: inline-block;
  float: none;
  margin-bottom: 30px;
}

.portfolio-area .mix-item-menu.item-space {
  margin-bottom: 35px;
}

.portfolio-area .mix-item-menu.active-theme button.active, 
.portfolio-area .mix-item-menu.active-theme button:hover {
  background: #fd0060 none repeat scroll 0 0;
  border: 1px solid transparent;
  color: #ffffff;
}

.portfolio-area .mix-item-menu.active-theme button,
.portfolio-area .mix-item-menu.active-dark button {
  padding: 10px 30px;
}

.portfolio-area .mix-item-menu.active-theme button.active, 
.portfolio-area .mix-item-menu.active-theme button:hover {
  background: #fd0060 none repeat scroll 0 0;
  color: #ffffff;
}

.portfolio-area .mix-item-menu.active-dark  button.active, 
 .portfolio-area .mix-item-menu.active-dark  button:hover {
  background: #232323;
  color: #fd0060;
}

.portfolio-area .portfolio-items .pf-item {
  float: left;
  margin-bottom: 0;
  padding: 0;
  width: 25%;
}

.portfolio-area .portfolio-items.col-3 .pf-item {
  float: left;
  margin-bottom: 0;
  padding: 15px;
  width: 33.333%;
}

.effect-item {
  background: #232323 none repeat scroll 0 0;
  color: #fff;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}

.effect-item *,
.effect-item:before,
.effect-item:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.effect-item:before,
.effect-item:after {
  position: absolute;
  top: 20px;
  right: 20px;
  content: '';
  background-color: #fff;
  z-index: 1;
  opacity: 0;
}

.effect-item:before {
  width: 0;
  height: 1px;
}

.effect-item:after {
  height: 0;
  width: 1px;
}

.effect-item .overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 15px 20px;
}

.effect-item h3, 
.effect-item h4, 
.effect-item a {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 10px;
  opacity: 0;
}

.effect-item h4,
.effect-item a {
  font-size: .8em;
  text-transform: uppercase;
}

.portfolio-area .effect-item .overlay a {
  background: #fd0060 none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-right: 5px;
  text-align: center;
  width: 40px;
}

.effect-item:hover img,
.effect-item.hover img {
  zoom: 1;
  filter: alpha(opacity=20);
  -webkit-opacity: 0.2;
  opacity: 0.2;
}

.effect-item:hover:before,
.effect-item.hover:before,
.effect-item:hover:after,
.effect-item.hover:after {
  opacity: 1;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.effect-item:hover:before,
.effect-item.hover:before {
  width: 40px;
}

.effect-item:hover:after,
.effect-item.hover:after {
  height: 40px;
}

.effect-item:hover h3,
.effect-item.hover h3,
.effect-item:hover h4,
.effect-item.hover h4,
.effect-item:hover a,
.effect-item.hover a {
  opacity: 1;
}

.effect-item:hover h3,
.effect-item.hover h3 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.effect-item:hover h4,
.effect-item.hover h4 {
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.effect-item:hover a,
.effect-item.hover a {
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

/* ============================================================== 
     # Video Button Play
=================================================================== */
.video-area {
  position: relative;
}

.video-play-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-sizing: content-box;
  color: #ffffff;
  display: inline-block;
  font-size: 40px;
  margin-top: 50px;
  position: relative;
  width: 32px;
  z-index: 10;
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #fd0060 repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #fd0060 repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  transition: all 200ms;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -ms-transition: all 200ms;
  -o-transition: all 200ms;
}

.video-play-button:hover,
.video-play-button:focus {
  color: #ffffff;
}

.video-play-button:hover:after {
  background-color: #fd0060;
}

@-webkit-keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

.video-play-button i {
  display: block;
  position: relative;
  z-index: 3;
  margin-left: 3px;
}

.video-heading h2 {
  color: #ffffff;
  display: inline-block;
  font-weight: 700;
  padding-bottom: 20px;
  position: relative;
  text-transform: uppercase;
}

.video-heading h2 span {
  color: #fd0060;
}

.video-heading h2::before {
  background: #fd0060 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  width: 50px;
}

.video-heading h2::after {
  background: #ffffff none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -30px;
  position: absolute;
  width: 25px;
}


/* ============================================================== 
     # Team  
=================================================================== */
.team-area .info {
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  padding: 60px 30px 30px;
}

.team-area .owl-stage-outer {
  margin: 0 -15px;
  padding: 15px;
}

.team-area .thumb {
  position: relative;
}

.team-area .thumb .bio-title {
  background: #ffffff none repeat scroll 0 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  bottom: -35px;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  left: 5%;
  padding: 15px 10px;
  position: absolute;
  text-align: center;
  width: 90%;
  z-index: 1;
}

.team-area .thumb .bio-title h4 {
  color: #232323;
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: capitalize;
}

.team-area .thumb .bio-title span {
  color: #fd0060;
  font-family: "Poppins",sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

.team-area .info li {
  display: inline-block;
}

.team-area .info li a {
  -webkit-border-radius: 0 5px;
  -moz-border-radius: 0 5px;
  border-radius: 0 5px;
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  margin: 0 2px;
  text-align: center;
  width: 45px;
}

.team-area .info ul {
  border-top: 1px solid #e7e7e7;
  padding-top: 20px;
}

.team-area .team-carousel .owl-dots {
  margin-top: 30px !important;
  margin-bottom: -10px;
}

.team-area .team-carousel .owl-dots .owl-dot span {
  background: #ffffff none repeat scroll 0 0;
  border: 3px solid #232323;
  height: 15px;
  margin: 0 5px;
  padding: 0;
  width: 15px;
}

.team-area .team-carousel .owl-dots .owl-dot.active span,
.team-area .team-carousel .owl-dots .owl-dot:hover span {
  border-color: #fd0060;
}

.team-area .info li.twitter a {
  background-color: #00b6f1;
}

.team-area .info li.pinterest a {
  background-color: #bd081c;
}

.team-area .info li.facebook a {
  background-color: #3b5998;
}

.team-area .info li.g-plus a {
  background-color: #df4a32;
}

.team-area .info li.vimeo a {
  background-color: #1ab7ea;
}

.team-area .info li.instagram a {
  background-color: #cd486b;
}


/* ============================================================== 
     # Fun Factor   
=================================================================== */

.fun-factor-area .item {
  margin-bottom: 30px;
}

.fun-fact i {
  color: #ffffff;
  display: inline-block;
  font-size: 80px;
  margin-bottom: 60px;
  position: relative;
}

.fun-fact i::after {
  background: #ffffff none repeat scroll 0 0;
  bottom: -40px;
  content: "";
  height: 20px;
  left: 50%;
  position: absolute;
  width: 2px;
}

.fun-fact .timer {
  color: #ffffff;
  font-family: "Poppins",sans-serif;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}

.fun-fact .medium {
  color: #ffffff;
  font-family: "Poppins",sans-serif;
  font-size: 20px;
}



/* ============================================================== 
     # Pricing Table 
=================================================================== */
.pricing-item {
  background: #ffffff none repeat scroll 0 0;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
}

.pricing-simple.spicy li.pricing-header span.badge {
  background: #906f40 none repeat scroll 0 0;
  color: #ffffff;
}

.pricing-simple li.pricing-header span.badge {
  background: #fd0060 none repeat scroll 0 0;
  border-radius: inherit;
  color: #ffffff;
  font-family: "Montserrat",sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 0;
  position: absolute;
  right: -60px;
  text-transform: uppercase;
  top: 25px;
  transform: rotate(45deg);
  width: 200px;
}

.pricing-header h4 {
  font-weight: 600;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.pricing-header h2 {
  color: #fd0060;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0;
}

.pricing-item .pricing-header span {
  font-family: "Poppins",sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

.pricing-header {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 35px;
  padding: 30px !important;
}

.pricing-item .footer {
  padding: 30px;
}

.pricing-item li {
  line-height: 40px;
  padding: 0 30px;
  text-transform: capitalize;
}

.pricing-area .pricing-item.active .pricing-header {
  background: #fd0060 none repeat scroll 0 0;
}

.pricing-area .pricing-item.active .pricing-header h2,
.pricing-area .pricing-item.active .pricing-header h4,
.pricing-area .pricing-item.active .pricing-header span {
  color: #ffffff;
}

.pricing-area .pricing-item.active .pricing-header span.badge {
  background: #ffffff none repeat scroll 0 0;
  color: #232323;
}


/* ============================================================== 
     # Skill Area  
=================================================================== */
.skill-area .thumb, .skill-area .info {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

.skill-area .info {
  padding: 80px;
}

.skill-area .site-heading {
  margin: 0;
}

.skill-area .skills-section {
  margin-top: 30px;
}

.skill-area .skills-section .progress-box:last-child .progress {
  margin: 0;
}

.skill-area .progress-box .progress .progress-bar {
  background: #fd0060 none repeat scroll 0 0;
}

.skill-area .skills-section .progress {
  background: #ffffff none repeat scroll 0 0;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  height: 10px;
  margin-bottom: 40px;
}

.skill-area .progress-box h5 {
  font-weight: 600;
  text-transform: uppercase;
}

.skill-area .progress-box span {
  background: #fd0060 none repeat scroll 0 0;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  bottom: 20px;
  color: #ffffff;
  font-size: 12px;
  height: 35px;
  line-height: 38px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 50px;
}

.skill-area .progress-box {
  position: relative;
}

.skill-area .progress-box span::after {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fd0060;
  bottom: -4px;
  content: "";
  left: 50%;
  margin-left: -10px;
  position: absolute;
}

/* ============================================================== 
     # Testimonials  
=================================================================== */
.testimonials-area .thumb, .testimonials-area .info {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

.testimonials-area .info {
  padding-left: 35px;
}

.testimonials-area .info h4 {
  text-transform: capitalize;
  margin: 0;
}

.testimonials-area .info span {
  color: #fd0060;
  display: inline-block;
  font-family: "Poppins",sans-serif;
  text-transform: capitalize;
  font-weight: 600;
}

.testimonials-area .thumb {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.testimonials-area .info i {
  background: #f4f4f4 none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #fd0060;
  height: 50px;
  line-height: 50px;
  margin-bottom: 15px;
  text-align: center;
  width: 50px;
}

.testimonials-area .owl-dots {
  margin-top: 30px !important;
  margin-bottom: -10px;
}

.testimonials-area .owl-dots .owl-dot span {
  background: #ffffff none repeat scroll 0 0 !important;
  border: 3px solid #232323;
  height: 15px;
  margin: 0 5px;
  padding: 0;
  width: 15px;
}

.testimonials-area .owl-dots .owl-dot.active span,
.testimonials-area .owl-dots .owl-dot:hover span {
  border-color: #fd0060;
}


/* ============================================================== 
     # Blog  
=================================================================== */
.blog-area .blog-items .item .col-md-6 {
  display: table-cell;
  float: none;
  padding: 0;
  vertical-align: middle;
}

.blog-area .blog-items .equal-height {
  margin-bottom: 30px;
}

.blog-area .blog-items .equal-height .info {
  background: #ffffff none repeat scroll 0 0;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  padding: 30px;
}

.blog-area .blog-items .equal-height .info h2,
.blog-area .blog-items .equal-height .info h3,
.blog-area .blog-items .equal-height .info h4 {
  font-weight: 600;
  line-height: 1.4;
  text-transform: capitalize;
}

.blog-area .blog-items .thumb {
  position: relative;
  padding: 0;
}

.blog-area .blog-items .thumb .date {
  left: 20px;
  padding: 15px;
  position: absolute;
  text-align: center;
  top: 20px;
  z-index: 1;
}

.blog-area .blog-items .thumb .date::after {
  background: #fd0060 none repeat scroll 0 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.blog-area .blog-items .thumb .date h4 {
  color: #ffffff;
  font-weight: 600;
  margin: 0;
}

.blog-area .blog-items .thumb .date h4 span {
  display: block;
}

.blog-area .blog-items .equal-height .info > a {
  color: #fd0060;
  display: inline-block;
  font-weight: 600;
  text-transform: uppercase;
}

.blog-area.single.full-width .blog-items .equal-height .info {
  box-shadow: inherit;
  padding: 30px 0 0;
}

.blog-area .blog-items .equal-height .info a:hover {
  color: #fd0060;
}

.blog-area .blog-items .equal-height .info > a:hover {
  color: #232323;
}

.blog-area .meta li {
  color: #999999;
  display: inline-block;
  margin-right: 15px;
}

.blog-area .meta li:last-child {
}

.blog-area .meta {
  margin-bottom: 15px;
  text-transform: capitalize;
}

.blog-area .meta li i {
  margin-right: 5px;
}

.blog-area .meta li a {
  color: #999999;
  display: inline-block;
}

.blog-area .meta li a:hover {
  color: #fd0060;
}

.blog-area .pagi-area {
  margin-top: 20px;
}

.blog-area .pagi-area .pagination {
  margin: 0;
}

.blog-area .pagi-area .pagination li a {
  color: #232323;
  font-weight: 600;
  padding: 15px 20px;
}

.blog-area .pagi-area .pagination li.active a {
  background: #fd0060 none repeat scroll 0 0;
  border: 1px solid #fd0060;
  color: #ffffff;
}

.blog-area .pagi-area .pagination li.active a:hover {
  color: #232323;
}

.blog-area .pagi-area .pagination li a:hover {
  color: #fd0060;
}

.blog-area .item blockquote {
  background: #f6f6f6 none repeat scroll 0 0;
  border-left: 5px solid #fd0060;
  color: #414141;
  font-size: 15px;
  padding: 30px 50px;
  position: relative;
  z-index: 1;
}

.blog-area .item blockquote::after {
  content: ",,";
  font-family: "Times New Roman";
  font-size: 70px;
  left: 20px;
  letter-spacing: -5px;
  opacity: 0.5;
  position: absolute;
  top: 50px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

.post-tags {
  display: block;
  padding-top: 30px;
  width: 100%;
}

.post-tags span {
  display: inline-block;
  font-family: "Montserrat",sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-right: 15px;
  text-transform: capitalize;
}

.blog-area.full-blog.single-blog .blog-items .info {
  margin: 0;
  padding: 30px 0 0;
}

.blog-area.single .post-pagi-area {
  border-bottom: 1px solid #e7e7e7;
  border-top: 1px solid #e7e7e7;
  margin-top: 50px;
  overflow: hidden;
  padding: 15px 0;
}

.blog-area.single .post-pagi-area a {
  display: inline-block;
  font-weight: 600;
  text-transform: uppercase;
}

.blog-area.single .post-pagi-area a:hover {
  color: #fd0060;
}

.blog-area.single .post-pagi-area a:last-child {
  float: right;
}

.blog-area.single .post-pagi-area a:first-child i {
  margin-right: 3px;
}

.blog-area.single .post-pagi-area a:last-child i {
  margin-left: 3px;
}

.blog-area.single .blog-items .equal-height {
  margin: 0;
}

.blog-area.single .contact-comments .form-group.submit {
  margin-bottom: 0;
}

.post-tags a {
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  color: #232323;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  margin-right: 5px;
  padding: 3px 25px;
  text-transform: capitalize;
  margin-bottom: 8px;
}

.post-tags a:hover {
  color: #fd0060;
}

.blog-area.full-blog.left-sidebar .blog-content {
  float: right;
}

.blog-area.full-blog.left-sidebar .sidebar {
  float: left;
  padding-left: 15px;
  padding-right: 30px;
}

.author-bio {
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  display: block;
  margin-top: 45px;
  padding: 30px;
  width: 100%;
}

.author-bio .avatar {
  display: table-cell;
  vertical-align: top;
  width: 200px;
}

.author-bio .content {
  display: table-cell;
  padding: 0 0 0 30px;
  vertical-align: middle;
}

.author-bio .content p {
  font-style: italic;
  margin: 0;
  padding-left: 20px;
  position: relative;
  z-index: 1;
}

.author-bio .content p::after {
  content: ",,";
  font-family: "Times New Roman";
  font-size: 50px;
  left: -5px;
  letter-spacing: -5px;
  opacity: 0.5;
  position: absolute;
  top: 18px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

.author-bio .content h4 {
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 15px;
  padding-left: 20px;
  text-transform: capitalize;
}

.blog-area.single .blog-content .item-box {
  margin-bottom: 0;
}

.blog-area.single .blog-content .item-box .form-group.submit {
  margin-bottom: 0;
}

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
 /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.comments-list .commen-item .avatar {
  float: left;
  height: 100px;
  width: 100px;
}

.comments-list .commen-item .content {
  display: table-cell;
  vertical-align: top;
}

.comments-list .commen-item .avatar img {
  height: 80px;
  width: 80px;
}

.comments-list .commen-item {
  margin-bottom: 30px;
}

.comments-list .commen-item.reply {
  padding-left: 80px;
}

.comments-area {
  margin-top: 50px;
}

.comments-area .comments-title h2,
.comments-area .comments-title h3,
.comments-area .comments-title h4 {
  border-bottom: 1px solid #e2e2e2;
  font-weight: 600;
  margin-bottom: 30px;
  padding-bottom: 15px;
  text-transform: capitalize;
}

.comments-list .commen-item .content h3, 
.comments-list .commen-item .content h4, 
.comments-list .commen-item .content h5 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.comments-info a {
  background: #e7e7e7 none repeat scroll 0 0;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  color: #232323;
  display: inline-block;
  font-size: 12px;
  margin-left: 14px;
  padding: 1px 10px;
  text-transform: uppercase;
}

.comments-info a:hover {
  color: #ffffff;
}

.comments-info a i {
  margin-right: 10px;
}

.comments-form input, .comments-form textarea {
  border: 1px solid #e2e2e2;
  border-radius: inherit;
  box-shadow: inherit;
}

.comments-form textarea {
  min-height: 150px;
}

.comments-form button {
  background-color: #fd0060;
  border: 1px solid #fd0060;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  color: #ffffff;
  display: inline-block;
  font-family: "Montserrat",sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 25px;
  margin-top: 20px;
  padding: 9px 35px;
  text-transform: uppercase;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.comments-form button:hover {
  color: #ffffff;
  background-color: #232323;
  border: 1px solid #232323;
}

.comments-area .commen-item .comments-info {
  margin-bottom: 15px;
}

.comments-form .title h2, 
.comments-form .title h3, 
.comments-form .title h4 {
  border-bottom: 1px solid #e7e7e7;
  font-weight: 600;
  margin-bottom: 30px;
  padding-bottom: 15px;
  text-transform: capitalize;
}

.blog-area .contact-comments .comments {
  margin-top: 20px;
}

.blog-area.single .blog-items .item .contact-comments .col-md-6 {
  float: left;
  padding: 0 15px;
}

/* ============================================================== 
     # Contact 
=================================================================== */
.contact-form-area .heading h2 {
  color: #232323;
  display: inline-block;
  font-weight: 700;
  padding-bottom: 20px;
  position: relative;
  text-transform: uppercase;
}

.contact-form-area .heading h2,
.contact-form-area .heading h3,
.contact-form-area .heading h4,
.contact-form-area .heading h5 {
  display: inline-block;
  font-weight: 600;
  position: relative;
  text-transform: capitalize;
  margin-bottom: 20px;
}

.contact-form-area .heading h2::after {
  background: #fd0060 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 50px;
}

.google-maps iframe {
  display: block;
  height: 100%;
  min-height: 450px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.contact-form-area .contact-form input, 
.contact-form-area .contact-form textarea {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: transparent none repeat scroll 0 0;
  border-color: #e7e7e7;
  border-image: none;
  border-radius: inherit;
  border-style: none none solid;
  border-width: medium medium 1px;
  box-shadow: inherit;
  padding: 0;
}

.contact-form-area .contact-form textarea {
  line-height: 40px;
  min-height: 180px;
}

.contact-form-area .contact-form button {
  background-color: #fd0060;
  border: 1px solid transparent;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  color: #ffffff;
  display: inline-block;
  font-family: "Montserrat",sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 25px;
  margin-top: 20px;
  padding: 12px 40px;
  text-transform: uppercase;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.contact-form-area .contact-form button i {
  margin-left: 5px;
}

.contact-form-area .contact-form button:hover {
  background-color: #fd0060;
  border: 1px solid #fd0060;
  color: #ffffff;
}

.contact-form-area .address-info li {
  -moz-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  -o-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
  padding: 30px;
}

.contact-form-area .address-info li:last-child {
  margin-bottom: 0;
}

.contact-form-area .address-info li i {
  background: #fd0060 none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #ffffff;
  font-size: 30px;
  height: 80px;
  line-height: 80px;
  margin-bottom: 20px;
  text-align: center;
  width: 80px;
}

.contact-form-area .address-info li p {
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
  margin: 0;
}

.contact-form-area .address-info li p span {
  display: block;
}

.contact-form-area .address-info {
  padding-left: 35px;
}

.contact-form-area .site-heading {
  margin-bottom: 30px;
}

/* contact form alert */
.contact-form .loader {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  position: absolute;
  top: 50%;
}

.alert {
  border: 1px solid transparent;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: red;
  font-weight: 400;
  margin-bottom: 0 !important;
  padding: 0;
  text-align: center;
}

.alert-msg {
  background: #ffffff none repeat scroll 0 0;
  color: #685654;
  display: none;
  font-size: 12px;
  font-weight: 600;
  padding: 10px;
  text-align: left;
  margin-top: 20px;
}

#message b {
  color: red;
}

.alert.alert-success {
  background: transparent none repeat scroll 0 0;
}

.alert.alert-success > h3 {
  color: green;
  margin-bottom: 5px;
}

.alert.alert-success > p {
  color: #232323;
}

.alert-notification {
  padding: 0;
}


/* Error Page */

.error-page-area h1 {
  font-size: 120px;
  font-weight: 900;
  line-height: 100px;
}

.error-page-area h2 {
  color: #fd0060;
}


/* ============================================================== 
     # Footer  
=================================================================== */

footer .social li {
  display: inline-block;
}

footer .social li a {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #fd0060;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #fd0060;
  display: inline-block;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  margin: 0 3px;
  width: 45px;
}

footer .social li a:hover {
  background: #fd0060 none repeat scroll 0 0;
  border: 1px solid transparent;
  color: #ffffff;
}

footer .footer-social li {
  display: inline-block;
}

footer .footer-social li a {
  color: #ffffff;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

footer .footer-social li a::before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 4px;
  left: 0;
  margin-top: -2px;
  opacity: 1;
  position: absolute;
  top: 50%;
  width: 4px;
  z-index: 10;
}

footer .footer-social li.twitter a::before {
  background-color: #00b6f1;
}

footer .footer-social li.facebook a::before {
  background-color: #3b5998;
}

footer .footer-social li.google a::before {
  background-color: #df4a32;
}

footer .footer-social li.vimeo a::before {
  background-color: #1ab7ea;
}

footer .footer-social li.twitter a {
  color: #00b6f1;
}

footer .footer-social li.facebook a {
  color: #3b5998;
}

footer .footer-social li.google a {
  color: #df4a32;
}

footer .footer-social li.vimeo a {
  color: #1ab7ea;
}

footer .subscribe form {
  margin: 20px auto auto;
  width: 350px;
}

footer .subscribe form input {
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  box-shadow: inherit;
}

footer .subscribe form span {
  background: transparent none repeat scroll 0 0;
  border: inherit !important;
  padding: 0;
}

footer .subscribe form span button {
  background: #fd0060 none repeat scroll 0 0;
  border: 1px solid #fd0060;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  box-shadow: inherit;
  color: #ffffff;
  font-family: "Poppins",sans-serif;
  font-weight: 600;
  min-height: 50px;
  padding: 0 10px;
}

footer .logo {
  margin-bottom: 20px;
}

footer .copyright p {
  color: #ffffff;
  margin: 20px 0 0;
}

.footer-bottom {
  background: #ffffff none repeat scroll 0 0;
  padding: 30px 0;
  margin-top: 50px;
}

footer .copyright p a {
  color: #fd0060;
  font-weight: 600;
  text-transform: capitalize;
}

footer {
  background: #f4f4f4 none repeat scroll 0 0;
}

/* ============================================================== 
     # Preloader 
=================================================================== */
.no-js #loader {
  display: none;
}

.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
}

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: url(assets/img/preloader.gif) center no-repeat var(--bnano-primary);
  text-align: center;
}

/* Additional BNANO Specific Styles */
/* NAVBAR & HEADER FIXES */

/* SABİT BEYAZ HEADER - Logo hep normal renkte */
nav.navbar.bootsnav.white-header {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Logo hep normal renkte (filter yok) */
nav.navbar.bootsnav .navbar-brand img {
  filter: none !important;
  transition: all 0.3s ease;
}

/* Sticked durum kaldırıldı - hep beyaz */
nav.navbar.bootsnav.sticked {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Beyaz header - tüm yazılar siyah */
nav.navbar.bootsnav.white-header .navbar-nav > li > a {
  color: var(--bnano-primary) !important;
}

nav.navbar.bootsnav.white-header .navbar-nav > li > a:hover,
nav.navbar.bootsnav.white-header .navbar-nav > li > a:focus {
  color: var(--bnano-secondary) !important;
}

/* Language dropdown current text siyah */
nav.navbar.bootsnav.white-header .lang-current {
  color: var(--bnano-primary) !important;
}

nav.navbar.bootsnav.white-header .lang-current:hover {
  color: var(--bnano-secondary) !important;
}

nav.navbar.bootsnav.white-header .lang-current .caret {
  border-top-color: var(--bnano-text-dark) !important;
}

nav.navbar.bootsnav.white-header .lang-current:hover .caret {
  border-top-color: var(--bnano-secondary) !important;
}

/* Sticked navbar yazı renkleri - siyah */
nav.navbar.bootsnav.sticked .navbar-nav > li > a {
  color: var(--bnano-text-dark) !important;
}

nav.navbar.bootsnav.sticked .navbar-nav > li > a:hover,
nav.navbar.bootsnav.sticked .navbar-nav > li > a:focus {
  color: var(--bnano-secondary) !important;
}

/* LANGUAGE DROPDOWN STYLES */
.language-dropdown {
  position: relative;
}

.lang-current {
  display: inline-block;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  padding: 25px 15px !important;
  text-decoration: none;
  transition: all 0.3s ease;
  color: var(--bnano-primary) !important;
  cursor: pointer;
}

.lang-current:hover,
.lang-current:focus {
  color: var(--bnano-secondary) !important;
  text-decoration: none;
}

.current-flag {
  margin-right: 5px;
}

.current-lang {
  margin-right: 5px;
}

.caret {
  border-top: 4px solid var(--bnano-text-dark);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  margin-left: 5px;
  transition: all 0.3s ease;
}

.lang-current:hover .caret {
  border-top-color: var(--bnano-secondary);
}

/* Dropdown menu styling - compact width */
.language-menu {
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  min-width: 90px !important;
  width: 90px !important;
  padding: 5px 0;
  margin-top: 5px;
  left: auto !important;
  right: 0 !important;
}

.language-menu li {
  list-style: none;
  margin: 0;
}

.language-menu li a {
  display: block;
  padding: 8px 15px;
  color: var(--bnano-primary) !important;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
  background: none;
}

.language-menu li a:hover {
  background-color: var(--bnano-secondary) !important;
  color: white !important;
}

.language-menu li a.active {
  background-color: rgba(32, 166, 214, 0.1);
  color: var(--bnano-primary) !important;
}

/* Remove old lang-btn styles for dropdown */
.lang-btn {
  display: block;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

/* RTL support için language dropdown */
.lang-btn[data-lang="ar"] {
  direction: rtl;
}

/* Responsive dropdown behavior */
@media (max-width: 991px) {
  .language-dropdown .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: var(--bnano-primary);
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  
  .language-dropdown .dropdown-menu li a {
    color: var(--bnano-primary) !important;
    padding: 10px 20px;
  }
  
  .language-dropdown .dropdown-menu li a:hover {
    background-color: rgba(32, 166, 214, 0.2) !important;
  }
  
  .lang-current {
    color: var(--bnano-primary) !important;
  }
  
  .lang-current .caret {
    border-top-color: var(--bnano-text-light);
  }
}

/* Extra small mobile düzenlemesi */
@media (max-width: 480px) {
  .navbar-brand img {
    max-height: 40px !important;
  }
  
  .lang-current {
    padding: 6px 10px !important;
    font-size: 12px;
  }
  
  .lang-current .current-flag {
    margin-right: 2px;
  }
  
  .lang-current .current-lang {
    margin-right: 2px;
  }
}

/* Mobile responsive language buttons */
@media (max-width: 768px) {
  .lang-btn {
    padding: 10px 12px !important;
    font-size: 13px;
  }
  
  /* Mobile navbar language switcher */
  .navbar-collapse .navbar-nav {
    background-color: var(--bnano-primary);
    border-radius: 5px;
    margin-top: 10px;
  }
  
  .navbar-collapse .lang-btn {
    color: var(--bnano-text-light) !important;
    background-color: rgba(32, 166, 214, 0.1) !important;
    margin: 5px 0;
    border-radius: 3px;
  }
  
  .navbar-collapse .lang-btn.active {
    background-color: var(--bnano-secondary) !important;
    color: white !important;
  }
  
  .navbar-collapse .lang-btn:hover {
    background-color: rgba(32, 166, 214, 0.2) !important;
  }
}

/* Default (transparent) state yazı renkleri - beyaz */
nav.navbar.bootsnav.no-background .navbar-nav > li > a {
  color: var(--bnano-text-light) !important;
}

nav.navbar.bootsnav.no-background .navbar-nav > li > a:hover,
nav.navbar.bootsnav.no-background .navbar-nav > li > a:focus {
  color: var(--bnano-accent) !important;
}

/* Navbar underline effect for regular menu items */
nav.navbar.bootsnav .navbar-nav > li > a:not(.lang-btn)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--bnano-secondary);
  transition: all 0.3s ease;
}

nav.navbar.bootsnav .navbar-nav > li > a:not(.lang-btn):hover::after {
  width: 100%;
}

/* Default navbar styles - redundant, handled above */
.navbar-default .navbar-nav > li > a {
  color: var(--bnano-text-light) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--bnano-accent) !important;
}

/* BEYAZ ARKA PLAN ÜZERİNDEKİ GRİ YAZILARI DÜZELT */
/* Dark background sections - text should be white */
.text-light, .text-light * {
  color: var(--bnano-text-light) !important;
}

/* Beyaz header üzerindeki yazılar siyah olmalı */
nav.navbar.bootsnav.white-header .text-light,
nav.navbar.bootsnav.white-header .text-light * {
  color: var(--bnano-text-dark) !important;
}

/* Products section text colors fix - daha koyu */
.our-services h4,
.our-services p,
.our-services li,
.services-content h4,
.services-content p,
.services-content li,
.overlay-content h4,
.overlay-content p,
.overlay-content li,
.product-features li,
.services-item h4,
.services-item p,
.services-item ul li {
  color: #222222 !important;
  font-weight: 500;
}

/* Gallery overlay texts */
.overlay h3,
.portfolio-item .overlay h3 {
  color: var(--bnano-text-light) !important;
}

/* About section content */
.about-area .info h2,
.about-area .info p,
.about-area .info li {
  color: var(--bnano-text-light) !important;
}

/* Services list items */
.services-info ul li {
  color: var(--bnano-text-light) !important;
}

/* Portfolio filter buttons */
.portfolio-filter button {
  color: var(--bnano-text-light) !important;
  border-color: var(--bnano-text-light) !important;
}

.portfolio-filter button.active,
.portfolio-filter button:hover {
  background-color: var(--bnano-secondary) !important;
  color: var(--bnano-text-light) !important;
}

/* Dark theme input styles */
input, textarea, select {
  background-color: var(--bnano-secondary) !important;
  color: var(--bnano-text-light) !important;
  border-color: var(--bnano-accent) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--bnano-text-muted) !important;
}

/* Product features styling */
.product-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-features li {
  color: var(--bnano-text-light);
  margin-bottom: 8px;
  font-size: 14px;
}

/* Statistics section styling */
.fun-factor-area {
  background-color: var(--bnano-primary) !important;
}

/* Gallery improvements */
.portfolio-area {
  background-color: var(--bnano-primary);
}

/* Contact form improvements */
.contact-form-area {
  background-color: var(--bnano-primary);
}

.contact-form-area .address-info li {
  background-color: var(--bnano-secondary);
  color: var(--bnano-text-light);
  padding: 15px !important; /* Küçültüldü (önceden 30px) */
  margin-bottom: 15px !important; /* Küçültüldü */
}

.contact-form-area .address-info li i {
  font-size: 14px !important; /* Icon boyutu daha da küçültüldü */
  margin-bottom: 6px !important;
  color: var(--bnano-text-light);
}

/* Footer icon boyutları küçültüldü */
footer .social li a i,
footer .footer-social li a i,
.contact-form-area .address-info li i {
  font-size: 25px !important;
}

/* Footer address info kutucukları daha kompakt */
.contact-form-area .address-info li {
  padding: 12px !important; /* Daha da küçültüldü */
  margin-bottom: 12px !important;
}

.contact-form-area .address-info li h4 {
  font-size: 14px !important; /* Başlık boyutu küçültüldü */
  margin-bottom: 4px !important;
}

.contact-form-area .address-info li p {
  font-size: 12px !important; /* Text boyutu küçültüldü */
  margin-bottom: 0 !important;
  line-height: 1.4;
}

.contact-form-area .address-info li h4 {
  font-size: 16px !important; /* Başlık boyutu küçültüldü */
  margin-bottom: 5px !important;
}

.contact-form-area .address-info li p {
  font-size: 13px !important; /* Text boyutu küçültüldü */
  margin-bottom: 0 !important;
}

/* Footer improvements */
footer {
  background: var(--bnano-primary) !important;
}

/* WCAG AA Compliance - High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --bnano-primary: #000000;
    --bnano-secondary: #1a1a1a;
    --bnano-accent: #40a8ff;
    --bnano-text-light: #ffffff;
    --bnano-text-muted: #cccccc;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus indicators for accessibility */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--bnano-accent);
  outline-offset: 2px;
}

/* Ensure good contrast for links */
a {
  color: var(--bnano-accent);
}

a:hover, a:focus {
  color: var(--bnano-light);
}

/* Responsive Image Optimizations */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero carousel background gradients */
.banner-area .slider-thumb {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  position: relative;
}

/* Animated gradient backgrounds */
.banner-area .slider-thumb {
  background-attachment: fixed;
  animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Dealer Login Button */
.dealer-login-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  margin-top: 90px; /* Push button below header */
  background-color: #dc3545;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  z-index: 10004;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.dealer-login-btn:hover {
  background-color: #c82333;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.dealer-login-btn:focus {
  color: white;
  text-decoration: none;
  outline: none;
}

/* Full width/height backgrounds */
.video-area, .fun-factor-area {
  background-size: 100% 100% !important;
  background-attachment: fixed;
  position: relative;
}

/* About section image fix */
.about-area img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Gallery images optimization */
.portfolio-area .effect-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.portfolio-area .effect-item:hover img {
  transform: scale(1.05);
}

/* Logo optimizations */
/* Logo büyütme ve dikey ortalama */
.navbar-brand {
  padding: 10px 15px !important;
  height: auto !important;
  display: flex;
  align-items: center;
}

.navbar-brand img {
  max-height: 75px !important;
  width: auto !important;
  transition: all 0.3s ease;
  display: block;
}

/* Navbar yüksekliği ayarlaması ve dikey ortalama */
nav.navbar.bootsnav {
  min-height: 90px !important;
  display: flex !important;
  align-items: center !important;
}

nav.navbar.bootsnav .container {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

nav.navbar.bootsnav .navbar-nav {
  display: flex;
  align-items: center;
  margin: 0;
}

nav.navbar.bootsnav .navbar-nav > li > a {
  padding: 25px 15px !important;
  display: flex;
  align-items: center;
}

/* ===================== MOBİL OFF-CANVAS MENÜ ===================== */
.mobile-offcanvas-menu {
  position: fixed !important;
  top: 0 !important;
  left: -100% !important; /* Başlangıçta gizli */
  width: 300px !important;
  height: 100vh !important;
  background: var(--bnano-primary) !important;
  z-index: 9999 !important;
  transition: left 0.3s ease-in-out !important;
  overflow-y: auto !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
}

.mobile-offcanvas-menu.in {
  left: 0 !important; /* Açıldığında görünür */
}

.offcanvas-header {
  padding: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.offcanvas-header h3 {
  color: var(--bnano-text-light) !important;
  margin: 0 !important;
  font-size: 24px !important;
}

.menu-close {
  background: none !important;
  border: none !important;
  color: var(--bnano-text-light) !important;
  font-size: 24px !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.menu-close:hover {
  color: var(--bnano-accent) !important;
}

.mobile-offcanvas-menu .navbar-nav {
  padding: 20px !important;
  margin: 0 !important;
}

.mobile-offcanvas-menu .navbar-nav li {
  margin: 10px 0 !important;
}

.mobile-offcanvas-menu .navbar-nav a {
  color: var(--bnano-text-light) !important;
  font-size: 16px !important;
  padding: 12px 15px !important;
  display: block !important;
  border-radius: 5px !important;
  transition: all 0.3s ease !important;
}

.mobile-offcanvas-menu .navbar-nav a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--bnano-accent) !important;
}

/* Mobil dil dropdown (header'da) */
.mobile-language-dropdown {
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-language-dropdown.open .mobile-language-menu {
  display: block !important;
}

.mobile-lang-toggle {
  background: none !important;
  border: none !important;
  color: var(--bnano-text-dark) !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.mobile-current-flag {
  font-size: 18px !important;
}

.mobile-current-lang {
  font-weight: 600 !important;
  color: var(--bnano-text-dark) !important;
}

.mobile-language-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  background: white !important;
  border-radius: 5px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
  padding: 10px 0 !important;
  min-width: 120px !important;
  z-index: 1000 !important;
  display: none !important;
  margin-top: 5px !important;
}

.mobile-language-menu li {
  list-style: none !important;
  margin: 0 !important;
}

.mobile-language-menu a {
  display: block !important;
  padding: 8px 15px !important;
  color: var(--bnano-primary) !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}

.mobile-language-menu a:hover {
  background: rgba(32, 166, 214, 0.1) !important;
}

/* Mobil menü içindeki dil butonları */
.mobile-menu-language {
  padding: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mobile-menu-language h4 {
  color: var(--bnano-text-light) !important;
  margin-bottom: 15px !important;
  font-size: 18px !important;
}

.mobile-lang-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.mobile-lang-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--bnano-text-light) !important;
  padding: 12px 15px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: left !important;
  font-size: 14px !important;
}

.mobile-lang-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--bnano-accent) !important;
}

/* Overlay backdrop */
.offcanvas-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
}

.offcanvas-backdrop.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile layout düzenlemesi - TAMAMEN YENİ */
@media (max-width: 768px) {
  /* Reset all bootsnav conflicts */
  nav.navbar.bootsnav {
    min-height: 100px !important;
  }
  
  /* Desktop elements hide */
  .hidden-xs.hidden-sm {
    display: none !important;
  }
  
  /* Mobile header layout */
  nav.navbar.bootsnav .navbar-header.visible-xs.visible-sm {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }
  
  /* Container reset */
  nav.navbar.bootsnav .container {
    padding: 0 15px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Hamburger menu - SOLDA */
  .navbar-toggle {
    order: 1 !important;
    float: left !important;
    display: block !important;
    margin: 0 !important;
    padding: 8px !important;
    border: none !important;
    background: transparent !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 1001 !important;
    position: relative !important;
  }
  
  .navbar-toggle .icon-bar {
    background-color: #000000 !important;
    height: 3px !important;
    width: 25px !important;
    margin: 4px 0 !important;
    border-radius: 2px !important;
    display: block !important;
    transition: all 0.3s ease !important;
  }
  
  /* Logo - ORTADA */
  .navbar-brand.mobile-brand {
    order: 2 !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    float: none !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 8px 15px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
    max-width: 180px !important;
  }
  
  .navbar-brand.mobile-brand img {
    max-height: 70px !important;
    width: auto !important;
    display: block !important;
  }
  
  /* Mobile language dropdown - SAĞDA */
  .mobile-language-dropdown {
    order: 3 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Force visibility */
  .navbar-header.visible-xs.visible-sm,
  .navbar-toggle,
  .navbar-brand.mobile-brand,
  .mobile-language-dropdown {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }
  
  /* Override any remaining bootsnav conflicts */
  nav.bootsnav .navbar-header.visible-xs.visible-sm,
  nav.bootsnav .navbar-toggle,
  nav.bootsnav .navbar-brand.mobile-brand {
    position: static !important;
  }
  
  /* Mobile off-canvas menu positioning */
  .mobile-offcanvas-menu {
    top: 100px !important; /* Adjusted for header height */
  }
}

@media (max-width: 480px) {
  /* Small screen adjustments */
  .navbar-brand {
    max-width: 150px !important;
    padding: 5px 10px !important;
  }
  
  .navbar-brand img {
    max-height: 60px !important;
  }
  
  .navbar-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 6px !important;
  }
  
  .navbar-toggle .icon-bar {
    width: 22px !important;
    height: 2px !important;
  }
  
  .lang-current {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  
  .lang-current .current-flag {
    font-size: 12px !important;
  }
  
  nav.navbar.bootsnav {
    min-height: 90px !important;
  }
  
  nav.navbar.bootsnav .container {
    padding: 0 10px !important;
  }
}

@media (min-width: 1200px) {
  /* Large screens optimization */
  .banner-area .slider-thumb {
    height: 100vh;
    min-height: 600px;
  }
  
  .portfolio-area .effect-item img {
    height: 300px;
  }
}

/* Print styles */
@media print {
  .language-switcher,
  .navbar-toggle,
  .carousel-control,
  .video-area {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  h1, h2, h3, h4, h5, h6, p {
    color: black !important;
  }
}

/* Footer logo büyütme ve ince beyaz alan */
footer {
  background: var(--bnano-primary);
  border-top: 3px solid rgba(255, 255, 255, 0.1);
}

footer .logo {
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 30px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

footer .logo img {
  max-height: 80px;
  width: auto;
  filter: none;
}

/* Video container responsive */
.video-area video {
  max-width: 100%;
  height: auto;
  max-height: 400px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Statistics section background optimization */
.fun-factor-area {
  background-size: 100% 100%;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}

.fun-factor-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(1, 41, 65, 0.1) 0%, 
    rgba(32, 166, 214, 0.1) 50%, 
    rgba(1, 41, 65, 0.1) 100%);
  animation: gradientMove 8s ease-in-out infinite;
  z-index: 1;
}

@keyframes gradientMove {
  0%, 100% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
}

.fun-factor-area .container {
  position: relative;
  z-index: 2;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .language-switcher {
    flex-direction: column;
    gap: 8px;
    margin-left: 10px;
  }
  
  .lang-btn {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .navbar-nav {
    background-color: var(--bnano-primary);
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
  }
  
  /* Mobile hero adjustments */
  .banner-area .slider-thumb {
    height: 60vh;
    min-height: 400px;
    background-attachment: scroll;
  }
  
  .banner-area .content h1 {
    font-size: 28px;
    line-height: 1.2;
  }
  
  .banner-area .content h2 {
    font-size: 16px;
  }
  
  /* Mobile gallery grid */
  .portfolio-area .portfolio-items.col-3 .pf-item {
    width: 100%;
    margin-bottom: 20px;
  }
  
  /* Mobile video */
  .video-area video {
    max-height: 250px;
  }
  
  /* Mobile about section */
  .about-area .col-md-6 {
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .banner-area .slider-thumb {
    height: 50vh;
    min-height: 350px;
  }
  
  .banner-area .content h1 {
    font-size: 24px;
  }
  
  .portfolio-area .effect-item img {
    height: 200px;
  }
  
  .video-area video {
    max-height: 200px;
  }
  
  /* Mobile navigation fix - KÜÇÜK EKRANLAR İÇİN */
  .navbar-brand img {
    max-height: 70px !important;
  }
  
  .navbar-toggle .icon-bar {
    width: 25px !important;
    height: 3px !important;
  }
  
  .lang-current {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  .lang-current .current-flag {
    font-size: 14px !important;
  }
  
  /* Header yüksekliği çok küçük ekranlarda */
  nav.navbar.bootsnav {
    min-height: 90px !important;
  }
  
  /* Logo padding küçült */
  .navbar-brand {
    padding: 3px 10px !important;
    max-width: 150px !important;
  }
  
  /* Container padding küçült */
  nav.navbar.bootsnav .container {
    padding: 0 10px !important;
  }
  
  /* Hamburger menu boyutu küçült */
  .navbar-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
  }
  
  /* Language dropdown boyutu küçült */
  .language-dropdown {
    margin-right: 5px !important;
  }
}

@media (min-width: 1200px) {
  /* Large screens optimization */
  .banner-area .slider-thumb {
    height: 100vh;
    min-height: 600px;
  }
  
  .portfolio-area .effect-item img {
    height: 300px;
  }
}

/* Print styles */
@media print {
  .language-switcher,
  .navbar-toggle,
  .carousel-control,
  .video-area {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  h1, h2, h3, h4, h5, h6, p {
    color: black;
  }
}/* --- Mobil header düzeni: hamburger sol, logo orta, dil sağ --- */
@media (max-width:768px){
  nav.navbar.bootsnav .container > .navbar-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100%;
    float:none !important;
  }
  nav.navbar.bootsnav .navbar-toggle,
  nav.navbar.bootsnav .navbar-brand{ float:none !important; }

  nav.navbar.bootsnav .navbar-toggle{
    order:1; margin:0; padding:10px 12px; z-index:10002;
  }

  nav.navbar.bootsnav .navbar-brand{
    order:2; margin:0 auto !important; padding:0 !important;
  }
  nav.navbar.bootsnav .navbar-brand img{ height:28px; width:auto; }

  .mobile-lang-toggle{
    order:3; background:transparent; border:0; font-size:18px; color:#012941!important; padding:8px 10px;
  }

  /* Masaüstü dil dropdown'unu mobilde gizle */
  nav.navbar.bootsnav .language-dropdown{ display:none !important; }

  /* --- Off-canvas soldan kayan menü --- */
  nav.navbar.bootsnav #navbar-menu.navbar-collapse{
    position:fixed !important;
    top:56px; left:0; bottom:0;
    width:78%; max-width:320px;
    background:#012941;
    padding:12px 0 24px;
    transform:translateX(-105%) !important;
    transition:transform .28s ease;
    z-index:10001; display:block !important; border:0;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  nav.navbar.bootsnav #navbar-menu.navbar-collapse.in{
    transform:translateX(0) !important;
  }

  /* Menü item'ları dikey */
  #navbar-menu .navbar-nav{ float:none !important; margin:0 !important; }
  #navbar-menu .navbar-nav>li{ float:none !important; }
  #navbar-menu .navbar-nav>li>a{
    color:#F5F9FC !important; padding:12px 20px; display:block; font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  #navbar-menu .navbar-nav>li>a:hover{ background:rgba(255,255,255,.08); }

  /* X butonu */
  #navbar-menu .menu-close{
    background:transparent; border:0; color:#F5F9FC; font-size:22px;
    line-height:1; padding:10px 16px; margin-left:auto; display:block;
  }

  /* Dışarı tıklama overlay + scroll kilidi */
  body.offcanvas-open{ overflow:hidden; }
  .offcanvas-backdrop{
    position:fixed; left:0; right:0; bottom:0; top:56px; /* header altından */
    background:rgba(0,0,0,.35); z-index:10000; display:none;
  }
  .offcanvas-backdrop.show{ display:block; }
}

/* Baskıda gereksizleri gizle */
@media print{
  .language-switcher, .navbar-toggle, .carousel-control, .video-area{ display:none; }
  body{ background:#fff; color:#000; }
  h1,h2,h3,h4,h5,h6,p{ color:#000; }
}
/* Katman sırası */
nav.navbar.bootsnav { z-index: 10001; }
#navbar-menu.navbar-collapse { z-index: 10001; }
.offcanvas-backdrop { z-index: 10000; }

/* Güvenlik: mobilde arka plan sabitlemeyi kapat (performans) */
@media (max-width: 991px){
  .banner-area .slider-thumb,
  .fun-factor-area,
  .video-area{
    background-attachment: scroll !important;
  }
  .banner-area .slider-thumb{ animation: none !important; }
}
@media (max-width:768px){
  /* Header her zaman üstte */
  nav.navbar.bootsnav{
    position: sticky;
    top: 0;
    z-index: 10002; /* toggle ve logo için */
  }

  /* Off-canvas menü */
  nav.navbar.bootsnav #navbar-menu.navbar-collapse{
    position: fixed !important;
    left: 0; bottom: 0;
    /* JS buraya --nav-top değişkenini basacak */
    top: var(--nav-top,56px);
    height: calc(100vh - var(--nav-top,56px));
    width: 78%; max-width: 320px;
    background:#012941;
    padding:12px 0 24px;
    overflow-y: auto;           /* içerik taşarsa scroll */
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%) !important;
    transition: transform .28s ease;
    z-index: 10001;
    display:block !important;   /* bootstrap/collapse'ı by-pass */
    border:0;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  nav.navbar.bootsnav #navbar-menu.navbar-collapse.in{
    transform: translateX(0) !important;
  }

  /* X butonu */
  #navbar-menu .menu-close{
    background:transparent; border:0; color:#F5F9FC; font-size:22px;
    line-height:1; padding:10px 16px; margin-left:auto; display:block;
  }

  /* Linkler */
  #navbar-menu .navbar-nav{ float:none !important; margin:0 !important; }
  #navbar-menu .navbar-nav>li{ float:none !important; }
  #navbar-menu .navbar-nav>li>a{
    color:#F5F9FC !important; padding:12px 20px; display:block; font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  #navbar-menu .navbar-nav>li>a:hover{ background:rgba(255,255,255,.08); }

  /* Dışarı tıklama alanı */
  .offcanvas-backdrop{
    position:fixed; left:0; right:0; bottom:0;
    top: var(--nav-top,56px);
    background:rgba(0,0,0,.35);
    z-index:10000; display:none;
  }
  .offcanvas-backdrop.show{ display:block; }

  /* Toggle ve logo katmanı */
  .navbar-toggle{ z-index: 10003 !important; }
  .navbar-brand{ z-index: 10002 !important; }
}

/* ===================== İLETİŞİM FORMU ===================== */
.alert-notification {
  margin-top: 20px;
}

#message-alert {
  padding: 12px 15px;
  border-radius: 5px;
  margin-bottom: 15px;
  display: none;
}

.alert-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.alert-error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
/* =============================================
   YENİ MOBİL MENÜ STİLLERİ
============================================= */

/* Mobil Header Düzeni (Sol-Orta-Sağ) */
@media (max-width: 768px) {
  .navbar-header-mobile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      position: relative;
      height: 70px; /* Sabit yükseklik */
  }

  /* Sol: Hamburger Butonu */
  .navbar-header-mobile .navbar-toggle {
      order: 1;
      float: none;
      margin: 0;
      border: none;
      background: transparent !important;
  }
  .navbar-header-mobile .navbar-toggle .icon-bar {
      background-color: #333;
  }

  /* Orta: Logo */
  .navbar-header-mobile .navbar-brand-mobile {
      order: 2;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      padding: 0;
      background: transparent !important; /* Dış katmanları kaldır */
      border: none !important;
      box-shadow: none !important;
  }
  .navbar-header-mobile .navbar-brand-mobile img {
      height: 45px; /* Logo boyutu */
      width: auto;
  }

  /* Sağ: Dil Seçeneği */
  .navbar-header-mobile .mobile-language-dropdown {
      order: 3;
      position: relative;
  }
  .navbar-header-mobile .mobile-language-dropdown .lang-current {
      color: #333 !important;
      padding: 8px 10px;
  }
  .navbar-header-mobile .mobile-language-dropdown .caret {
      border-top-color: #333;
  }
}

/* Soldan Açılan Menü Paneli */
.mobile-offcanvas-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px; /* Menü genişliği */
  height: 100%;
  background-color: #012941; /* Koyu tema rengi */
  z-index: 1040;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  overflow-y: auto;
  display: block !important; /* Bootsnav'ı ezmek için */
}

.mobile-offcanvas-menu.open {
  transform: translateX(0);
  box-shadow: 5px 0 15px rgba(0,0,0,0.2);
}

.offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-header h3 {
  color: #fff;
  margin: 0;
}

.offcanvas-header .menu-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  opacity: 0.8;
  cursor: pointer;
}

.mobile-offcanvas-menu .nav {
  padding: 15px 0;
}

.mobile-offcanvas-menu .nav li a {
  color: #f5f9fc;
  padding: 12px 20px;
  display: block;
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-offcanvas-menu .nav li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Arka Plan Karartma (Backdrop) */
.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1030;
  display: none; /* JS ile kontrol edilecek */
}

/* Body scroll engelleme */
body.mobile-menu-open {
  overflow: hidden;
}

/* Responsive styles for dealer login button */
@media (max-width: 768px) {
  .dealer-login-btn {
    top: 15px;
    right: 15px;
    margin-top: 100px; /* Increased margin for mobile */
    padding: 8px 16px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .dealer-login-btn {
    top: 10px;
    right: 10px;
    margin-top: 90px; /* Increased margin for small mobile */
    padding: 6px 12px;
    font-size: 11px;
  }
}

.mobile-offcanvas-menu .nav li a {
  color: #f5f9fc !important; /* Beyaz rengi zorla uygula */
  padding: 12px 20px;
  display: block;
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Equalize heights for services items */
.services-items .item {
  height: 400px; /* Fixed height for all items */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.services-items .item .icon {
  flex-shrink: 0;
  margin-bottom: 15px;
}

.services-items .item .info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-items .item .info img {
  width: 100%;
  max-height: 200px; /* Maximum height to prevent overflow */
  height: auto;
  object-fit: contain; /* Changed to contain to show full image */
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Responsive adjustments for services items */
@media (max-width: 768px) {
  .services-items .item {
    height: 350px;
  }
  
  .services-items .item .info img {
    max-height: 160px;
  }
}

@media (max-width: 480px) {
  .services-items .item {
    height: 300px;
  }
  
  .services-items .item .info img {
    max-height: 140px;
  }
}