/* Light Mode Color Scheme */
:root {
  --mobile-color-bg: #fff;
  --mobile-color-bg2: #f4f4f4;
  --mobile-color-toggle-accent: #ff7900;
  --mobile-color-text: #333333;
}

/* Dark Mode Color Scheme */
html.dark {
  --mobile-color-bg: #000000;
  --mobile-color-bg2: #0b0b0b;
  --mobile-color-text: #fafafa;
  --mobile-color-toggle-accent: #a076ce;
}

/* Apply colors */
html {
  background-color: var(--mobile-color-bg);
  color: var(--mobile-color-text);
}

/* Color Toggle Switch with animation */
#mobile-color-mode-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 0px;
}

#mobile-color-mode-switch > span {
  font-size: 30px;
  display: inline-block;
  margin-right: 8px;
}

#mobile-color-mode-switch svg {
  width: 24px;
  height: 24px;
  margin: 0 4px;
}

#mobile-color-mode-switch input[type=checkbox] {
  height: 0;
  width: 0;
  margin: 0;
  visibility: hidden;
}

#mobile-color-mode-switch label {
  cursor: pointer;
  text-indent: -9999px;
  width: 42px;
  height: 21px;
  border-radius: 30px;
  background: var(--mobile-color-toggle-accent);
  display: block;
  position: relative;
  margin: 0;
}

#mobile-color-mode-switch label:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

#mobile-color-mode-switch input:checked + label:after {
  left: calc(100% - 3px);
  transform: translateX(-100%);
}

#mobile-color-mode-switch label:active:after {
  width: 30px;
}

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
}

/* Header */
.mobile-header {
  background-color: var(--mobile-color-bg);
  border-bottom: 2px solid var(--mobile-color-bg2);
  position: fixed;
  width: 100%;
  z-index: 3;
  padding: 10px 0px;
  top: 0;
}
@media(max-width: 991px) {
  .mobile-logo img{
    width: 150px;
    height: auto;
  }
}
#home-revslider{
  margin-top: 114px !important;
}
.mobile-header a {
  color: var(--mobile-color-text);
}

.mobile-header .mobile-logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 0px;
  text-decoration: none;
}

.mobile-header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* overflow: hidden; */
  background-color: var(--mobile-color-bg);
}
@media(max-width: 991px) {
 .mobile-header ul {
  overflow: hidden;  
 }
 #home-revslider{
  margin-top: 85px !important
 }
}
 .dropdown-menu li{
  width: 100%;
 }
.mobile-header li a {
  display: block;
  padding: 20px 20px;
  /* border-right: 2px solid var(--mobile-color-bg2); */
  text-decoration: none;
}

.mobile-header li:first-child {
  /* border-left: 2px solid var(--mobile-color-bg2) */
}

.mobile-header li a:hover,
.mobile-header .mobile-menu-btn:hover {
  /* background-color: var(--mobile-color-bg2); */
}

/* Nav Menu */
.mobile-header .mobile-menu {
  clear: both;
  max-height: 0;
  margin-top: 17px;
  transition: max-height .2s ease-out;
}

/* Menu Icon */
.mobile-header .mobile-menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.mobile-header .mobile-menu-icon .mobile-navicon {
  background: var(--mobile-color-text);
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;

}

.mobile-header .mobile-menu-icon .mobile-navicon:before,
.mobile-header .mobile-menu-icon .mobile-navicon:after {
  background: var(--mobile-color-text);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.mobile-header .mobile-menu-icon .mobile-navicon:before {
  top: 5px;
}

.mobile-header .mobile-menu-icon .mobile-navicon:after {
  top: -5px;
}

/* Menu Button */
.mobile-header .mobile-menu-btn {
  display: none;
}

.mobile-header .mobile-menu-btn:checked ~ .mobile-menu {
  max-height: max-content;
}

.mobile-header .mobile-menu-btn:checked ~ .mobile-menu-icon .mobile-navicon {
  background: transparent;
}

.mobile-header .mobile-menu-btn:checked ~ .mobile-menu-icon .mobile-navicon:before {
  transform: rotate(-45deg);
}

.mobile-header .mobile-menu-btn:checked ~ .mobile-menu-icon .mobile-navicon:after {
  transform: rotate(45deg);
}

.mobile-header .mobile-menu-btn:checked ~ .mobile-menu-icon:not(.steps) .mobile-navicon:before,
.mobile-header .mobile-menu-btn:checked ~ .mobile-menu-icon:not(.steps) .mobile-navicon:after {
  top: 0;
}

/* 48em = 768px */
@media (min-width: 48em) {
  .mobile-header li {
    float: left;
  }
  .mobile-header li a {
    padding: 20px 20px;
  }
  .mobile-header .mobile-menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .mobile-header .mobile-menu-icon {
    display: none;
  }
}

section {
  padding-top: 60px;
}







/* Dropdown kapsayıcı */
.mobile-menu .dropdown {
  position: relative;
}

/* Alt menü gizli */
.mobile-menu .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #f9f9f9;
  min-width: 180px;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  z-index: 1000;
}

/* Hover ile göster */
.mobile-menu .dropdown:hover .dropdown-menu {
  display: block;
}

/* Alt menü linkleri */
.mobile-menu .dropdown-menu li a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
}

/* Hover efekti */
.mobile-menu .dropdown-menu li a:hover {
  background: #eee;
}