@charset "UTF-8";
/*




// Table of contents //

	01.	GOOGLE FONTS
	02.	BODY
	03.	CUSTOM CLASSES
	04. FORM ELEMENTS
	05.	SECTIONS
	06.	HTML TAGS
	07.	LINKS
	08.	MODAL
	09.	PAGINATION
	10. PRELOADER
	11.	TRANSITION OVERLAY
	12.	SANDWICH BUTTON
	13.	Aşağı Kaydır
	14.	NAVIGATION MENU
	15.	HEADER
	16.	SOCIAL MEDIA
	17.	NAVBAR
	18.	SLIDER
	19.	PAGE HEADER
	20.	VIDEO BG
	21.	WORKS
	22.	FEATURES CONTENT
	23.	LISTING CONTENT
	24.	FULL MEDIA CONTENT
	25.	INTRODUCTION
	26. OUR TEAM
	27.	NEWS
	28.	SAY HELLO
	29.	LOGOS
	30.	FOOTER
	31.	RESPONSIVE TABLET FIXES
	32. REPSONSIVE MOBILE FIXES



*/
@import url("https://fonts.googleapis.com/css?family=Dancing+Script|Fjalla+One|Poppins:400,600,800&subset=latin-ext");
/* Video Parallax */

.parent {
  position: relative;
}

#opacity_div {
  background: #fff;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 18px;
  left: 6px;
  opacity: 0.5
    /* manipulate to desired opacity */
}

video.half_fade {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
}

/*.map foooter */
.map iframe {
  max-height: 200px;
  width: 1080px;



}

/* BODY */
* {
  outline: none !important;
}

.basvur {
  font-size: 18px;
  padding: 1.4rem;
  border: 0.1rem solid red;
  border-radius: 0.2rem;
  background-color: #e8293b;
}


body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  color: #0e0e0e;
}

/* CUSTOM HTML ELEMENTS */
img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* CUSTOM ELEMENTS */
.overflow {
  overflow: hidden !important;
}

/* LINKS */
a {
  color: #0e0e0e;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

a:hover {
  color: #0e0e0e;
}

a:active {
  color: #0e0e0e;
}

/* SECTIONS */
section {
  overflow: hidden;
}

/* CUSTOM CONTAINER */
@media (min-width: 1280px) {
  .container {
    max-width: 1260px;
  }
}

@media (min-width: 1170px) {
  .container {
    max-width: 1100px;
  }
}

/* ODOMETER */
.odometer {
  line-height: 1;
}

.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-car .odometer-digit {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  left: 0;
}

/* PAGINATION */
.pagination {
  display: block;
  text-align: center;
  margin-top: 50px;
}

.pagination a {
  display: inline-block;
  font-weight: 600;
  color: #0e0e0e;
  margin: 0 10px;
  font-size: 14px;
  border-bottom: 2px solid #0e0e0e;
  padding-bottom: 2px;
}

.pagination a:hover {
  text-decoration: none;
  border-bottom: 2px solid #FF4545;
}

/* PAGE LOADED */
.page-loaded {
  overflow: inherit;
}

.page-loaded .preloader {
  bottom: -100%;
  transition-delay: 5s;
}

.page-loaded .preloader .layer {
  bottom: -100%;
}

.page-loaded .preloader .inner {
  transform: translateY(30px);
  opacity: 0;
}

.page-loaded header {
  transform: scale(1);
  transition-delay: 5s;
}

.page-loaded .navbar {
  transform: translateY(0);
  transition-delay: 5s;
}

/* PRELOADER */

.preloader .layer {
  width: 25%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background: #000;
  z-index: 2;

}

.preloader .layer:nth-child(1) {
  left: 0;
  transition-delay: 0.15s;
}

.preloader .layer:nth-child(2) {
  left: 25%;
  transition-delay: 0.2s;
}

.preloader .layer:nth-child(3) {
  left: 50%;
  transition-delay: 0.25s;
}

.preloader .layer:nth-child(4) {
  left: 75%;
  transition-delay: 0.3s;
}

.preloader .inner {
  margin: 0;
  position: relative;
  z-index: 3;

}

.preloader figure {
  display: block;
  margin: 0;
}

.preloader figure img {
  height: 80px;
}

.preloader .typewriter {
  height: 26px;
  line-height: 26px;
  display: inline-block;
  transform: translateY(10px);
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
}

.preloader .typewriter #typewriter-text {
  float: left;
  margin-left: 5px;
  margin-top: -2px;
  margin-right: 3px;
}

.preloader .typewriter #typewriter-suffix {
  width: 2px;
  height: 22px;
  display: inline-block;
  background: #FF4545;
  text-indent: -1000px;
  overflow: hidden;
}

/* TRANSITION OVERLAY */
.transition-overlay {
  width: 100%;
  height: 0;
  position: fixed;
  background: #FF4545;
  left: 0;
  bottom: 0;
  z-index: 15;

}

.transition-overlay .layer {
  width: 25%;
  height: 0;
  position: absolute;
  bottom: 0;
  background: #000;
  z-index: 2;

}

.transition-overlay .layer:nth-child(1) {
  left: 0;
  transition-delay: 0.25s;
}

.transition-overlay .layer:nth-child(2) {
  left: 25%;
  transition-delay: 0.3s;
}

.transition-overlay .layer:nth-child(3) {
  left: 50%;
  transition-delay: 0.35s;
}

.transition-overlay .layer:nth-child(4) {
  left: 75%;
  transition-delay: 0.4s;
}

.transition-overlay.active {
  height: 100%;
}

.transition-overlay.active .layer {
  height: 100%;
}

/* EQUALIZER */
.equalizer {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
}

.equalizer span {
  background: #FF4545;
  width: 1px;
  height: 1px;
  top: 50%;
  bottom: 0;
  left: 0%;
  transform: translateY(-50%);
  position: absolute;
  transition: height 0.2s linear;
}

.equalizer span:nth-child(1) {
  margin-left: 4px;
}

.equalizer span:nth-child(2) {
  margin-left: 8px;
}

.equalizer span:nth-child(4) {
  margin-left: 12px;
}

.equalizer span:nth-child(5) {
  margin-left: 16px;
}

.equalizer span:nth-child(6) {
  margin-left: 20px;
}

.equalizer.paused span {
  height: 1px !important;
}

/* NAVIGATION MENU */
.navigation-menu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  visibility: hidden
}

.navigation-menu .bg-layers {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 0;
  top: 0
}

.navigation-menu .bg-layers * {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(.86, 0, .07, 1);
  -webkit-transition-timing-function: cubic-bezier(.86, 0, .07, 1)
}

.navigation-menu .bg-layers span {
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  transform: skewX(0);
  background: #0e0e0e
}

.navigation-menu .bg-layers span:nth-child(1) {
  left: 0
}

.navigation-menu .bg-layers span:nth-child(1):before {
  content: "";
  width: 150%;
  height: 100%;
  background: #0e0e0e;
  position: absolute;
  left: -149%;
  top: 0
}

.navigation-menu .bg-layers span:nth-child(2) {
  left: 25%
}

.navigation-menu .bg-layers span:nth-child(3) {
  left: 50%
}

.navigation-menu .bg-layers span:nth-child(4) {
  left: 75%
}

.navigation-menu .bg-layers span:nth-child(4):before {
  content: "";
  width: 150%;
  height: 100%;
  background: #0e0e0e;
  position: absolute;
  right: -149%;
  top: 0
}

.navigation-menu .inner {
  position: relative;
  z-index: 3;
  color: #fff;
  text-align: center;
  padding-top: 96px
}

.navigation-menu .inner * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out
}

.navigation-menu .inner blockquote a {
  display: block;
  font-size: 2vw;
  font-family: "Fjalla One", sans-serif;
  text-transform: uppercase;
  color: #FF4545;
  transform: translateY(30px)
}

.navigation-menu .inner .menu {
  display: block;
  min-height: 130px;
  opacity: 0;
  transform: translateY(-30px)
}

.navigation-menu .inner .menu ul {
  display: block;
  margin-bottom: 50px;
  padding: 0;
  position: relative
}

.navigation-menu .inner .menu ul li {
  display: inline-block;
  margin: 0 20px;
  padding: 0;
  list-style: none
}

.navigation-menu .inner .menu ul li:hover ul {
  opacity: 1;
  visibility: visible
}

.navigation-menu .inner .menu ul li:hover ul li ul {
  opacity: 0;
  visibility: hidden
}

.navigation-menu .inner .menu ul li a {
  display: inline-block;
  line-height: 1;
  font-size: 3vw;
  font-weight: 800;
  color: #fff;
  padding-bottom: 8px;
  border-bottom: 5px solid transparent
}

.navigation-menu .inner .menu ul li a:hover {
  padding-bottom: 3px;
  border-bottom: 5px solid #FF4545;
  text-decoration: none
}

.navigation-menu .inner .menu ul li ul {
  width: 100%;
  min-height: inherit;
  position: absolute;
  left: 0;
  top: 70px;
  opacity: 0;
  visibility: hidden
}

.navigation-menu .inner .menu ul li ul li {
  margin: 0 15px
}

.navigation-menu .inner .menu ul li ul li a {
  font-size: 2vw;
  padding: 0;
  border-bottom: none
}

.navigation-menu .inner .menu ul li ul li a:hover {
  padding: 0;
  border-bottom: none;
  color: #FF4545
}

.navigation-menu .inner .menu ul li ul li:hover ul {
  opacity: 1;
  visibility: visible
}

.navigation-menu .inner .menu ul li ul li ul {
  top: 55px;
  opacity: 0;
  visibility: hidden
}

.navigation-menu .inner .menu ul li ul li ul li {
  margin: 0 20px
}

.navigation-menu .inner .menu ul li ul li ul li a {
  font-size: 20px;
  font-weight: 600
}

.navigation-menu .inner blockquote {
  display: block;
  font-size: 2vw;
  font-family: "Fjalla One", sans-serif;
  text-transform: uppercase;
  color: #FF4545;
  opacity: 0;
  transition-delay: 0.5s;
  transform: translateY(30px)
}

.navigation-menu.active .bg-layers {
  visibility: visible
}

.navigation-menu.active .bg-layers span {
  width: calc(25% + 1px);
  transform: skewX(45deg)
}

.navigation-menu.active .bg-layers span:nth-child(1) {
  width: calc(25% + 1px)
}

.navigation-menu.active .bg-layers span:nth-child(4) {
  width: calc(25% + 1px)
}

.navigation-menu.active .inner .menu {
  opacity: 1;
  transform: translateY(0)
}

.navigation-menu.active .inner blockquote {
  opacity: 1;
  transform: translateY(0)
}

.navigation-menu.active {
  visibility: visible
}

/* HAMBURGER */
.hamburger {
  float: left;
  width: 4rem;
  height: 2rem;
  position: relative;
  cursor: pointer;
}

.hamburger * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.hamburger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #FF4545;
  z-index: 0;
}

.hamburger span:nth-child(1) {
  top: 0px;
  width: 50%;
}

.hamburger span:nth-child(2) {
  top: 8px;
}

.hamburger span:nth-child(3) {
  width: 50%;
  top: 16px;
  right: 0;
  left: auto;
}

.hamburger span:before,
.hamburger span:after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  height: 100%;
  width: 0;
  right: 0;
  left: auto;
}

.hamburger span:before {
  z-index: 1;
  background: #fff;
  transition: all 0.15s linear 0s;
}

.hamburger span:after {
  z-index: 2;
  background: #FF4545;
  transition: all 0.15s linear 0.3s;
}

.hamburger span:nth-child(2):before {
  transition-delay: 0.05s;
}

.hamburger span:nth-child(3):before {
  transition-delay: 0.1s;
}

.hamburger span:nth-child(2):after {
  transition-delay: 0.15s;
}

.hamburger span:nth-child(3):after {
  transition-delay: 0.2s;
}

.hamburger:hover span {
  width: 100% !important;
}

.hamburger:hover span:after,
.hamburger:hover span:before {
  width: 100%;
  left: 0;
  right: auto;
}

.hamburger:hover span:after {
  z-index: 1;
  transition: all 0.15s linear 0s;
}

.hamburger:hover span:before {
  z-index: 2;
  transition: all 0.15s linear 0.3s;
}

.hamburger:hover span:nth-child(2):after {
  transition-delay: 0.05s;
}

.hamburger:hover span:nth-child(3):after {
  transition-delay: 0.1s;
}

.hamburger:hover span:nth-child(2):before {
  transition-delay: 0.15s;
}

.hamburger:hover span:nth-child(3):before {
  transition-delay: 0.2s;
}

.hamburger.open span:nth-child(1) {
  top: 9px;
  width: 100%;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  left: -15px;
}

.hamburger.open span:nth-child(3) {
  top: 9px;
  width: 100%;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* CUSTOM LINK */
.custom-link {
  display: block;
  transition: all 0.5s;
}

.custom-link * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.custom-link a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: #0e0e0e;
}

.custom-link a:hover {
  text-decoration: none;
}

.custom-link b {
  font-weight: 600;
  display: inline-block;
  margin-left: 20px;
}

.custom-link .lines {
  width: 42px;
  height: 1px;
  float: left;
  overflow: hidden;
}

.custom-link .lines span:nth-child(1) {
  width: 100%;
  height: 1px;
  float: right;
  background: #0e0e0e;
}

.custom-link .lines span:nth-child(2) {
  width: 0;
  height: 1px;
  float: left;
  background: #0e0e0e;
}

.custom-link:hover .lines {
  width: 62px;
  margin-left: 20px;
}

.custom-link:hover .lines span:nth-child(1) {
  width: 0;
}

.custom-link:hover .lines span:nth-child(2) {
  width: 100%;
  transition-delay: 0.2s;
}

/* HEADER */
.header {
  width: 100%;
  height: 100vh;
  min-height: 660px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background: #0e0e0e;
}

.header .container {
  position: relative;
  z-index: 2;
}

.header .container .tagline {
  display: block;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.header .container .tagline span {
  color: #e8293b;
  float: left;
  font-weight: 600;
  color: #fff;
}

.header .container .tagline span:after {
  content: "";
  width: 22px;
  height: 1px;
  float: right;
  margin: 10px;
  background: #e8293b;
}

.header .container .tagline h6 {
  float: left;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  margin-top: 2px;
  margin-bottom: 0;
}

.header .container h1 {
  width: 100%;
  float: left;
  font-weight: 800;
  color: #e8293b;
  font-size: 10vw;
  line-height: 1;
}

.header .container h1 span {
  -webkit-text-stroke-width: 4px;
  transform: translateY(-35%);
  margin-left: 4%;
  display: flex;
  -webkit-text-stroke-color: #fff;
  color: transparent;
}

.header .container .slide-btn {
  float: left;
  z-index: 9999;
}

.header .perspective {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
}

.header .perspective canvas {
  min-height: 100%;
  width: auto !important;
  position: absolute;
  left: 0;
  top: 0;
}

.header .particles-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
}

.header .particles-wrap .particles {
  width: 100%;
  height: calc(100% - 50px);
  position: absolute;
  left: 0;
  bottom: 0;
}

.header .video-bg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
}

.header .video-bg:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/bg-lines.png) center;
  z-index: 2;
}

.header .video-bg video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  opacity: 0.8;
}

.page-header {
  width: 100%;
  height: 100%;
  min-height: 660px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: #0e0e0e;
}

.page-header .hero-banner img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}


.page-header .video-bg:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/bg-lines.png) center;
  z-index: 2;
}

.page-header .video-bg video {
  min-width: 100%;
  min-height: 100%;
  float: left;
  opacity: 0.2;
}

.page-header .container {
  position: fixed;
  z-index: 3;
  padding: 0 10%;
}

.page-header .container h1 {
  font-weight: 800;
  font-size: 8vw;
  color: #fff;
  line-height: 1;
  text-indent: -5px;
  padding-bottom: 1rem;
}

.page-header .container p {
  margin-bottom: 0;
  font-family: "Fjalla One", sans-serif;
  color: #FF4545;
}



header .left-side-index {
  width: 50%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  margin-left: 30px;
  z-index: 3;
}

header .left-side-index ul {
  margin: 0 auto;
  padding: 0;
}

header .left-side-index ul li {
  display: inline-block;
  margin: 0 10px;
  padding: 0;
  list-style: none;
}

header .left-side-index ul li a {
  font-size: 14px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}

header .left-side-index ul li a:hover {
  padding-bottom: 1px;
  border-bottom: 2px solid #fff;
  text-decoration: none;
}


header .left-side {
  width: 50%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  margin-left: 30px;
  z-index: 3;
}

header .left-side ul {
  margin: 0 auto;
  padding: 0;
}

header .left-side ul li {
  display: inline-block;
  margin: 0 10px;
  padding: 0;
  list-style: none;
}

header .left-side ul li a {
  font-size: 14px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}

header .left-side ul li a:hover {
  padding-bottom: 1px;
  border-bottom: 2px solid #fff;
  text-decoration: none;
}

header .scroll-down {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}

header .scroll-down small {
  width: 98px;
  display: inline-block;
  transform: rotate(-90deg);
  margin-bottom: 50px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
}

header .scroll-down span {
  display: block;
  height: 50px;
  position: relative;
  transform: translateX(-1px);
}

header .scroll-down span::before {
  -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
}

header .scroll-down span::before {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -0.5px;
  width: 1px;
  height: 70px;
  background: #fff;
  content: "";
}

header .sound {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 3;
}

header .sound span {
  float: left;
  color: #fff;
  font-size: 14px;
  margin-right: 10px;
  font-family: "Fjalla One", sans-serif;
}

header .sound .equalizer {
  float: left;
}

header .sound .equalizer .holder {
  width: 23px;
  height: 20px;
  position: relative;
}

/* NAVBAR */
.navbar {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px 40px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
  z-index: 10;

}

.navbar a {
  color: #fff;
}

.navbar .left {
  width: 30%;
  margin-left: 0;
}

.navbar .left a {
  position: relative;
  font-size: 20px;
  padding-bottom: 6px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  border-bottom: 2px solid transparent;
}

.navbar .left a:hover {
  padding-bottom: 1px;
  border-bottom: 2px solid #fff;
  text-decoration: none;
}

.navbar .logo {
  margin: 0 auto;
}

.navbar .logo a {
  float: left;
}

.navbar .logo a img {
  height: 56px;
}

.navbar .right {
  width: 30%;
  margin-right: 0;
  display: flex;
}

.navbar .right ul {
  margin-left: auto;
  margin-bottom: 0;
  padding: 0;
}

.navbar .right ul li {
  display: inline-block;
  margin-left: 15px;
  padding: 0;
}

.navbar .right ul li a {
  position: relative;
  padding-bottom: 6px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  border-bottom: 2px solid transparent;
}

.navbar .right ul li a:hover {
  padding-bottom: 1px;
  border-bottom: 2px solid #fff;
  text-decoration: none;
}

.navbar .right .hamburger-menu {
  margin-right: 0;
  margin-left: 60px;
}

.navbar .right .hamburger-menu .hamburger {
  float: right;
  margin-top: 1px;
}

.navbar .right .hamburger-menu b {
  display: inline-block;
  font-weight: 400;
  font-size: 1.2rem;
  margin-right: 15px;
}

/* SLIDE BTN */
.slide-btn {
  display: block;
  transition: all 0.5s;
  padding-left: 30px;
  z-index: 10;
}

.slide-btn a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: #fff;
}

.slide-btn a:hover {
  text-decoration: none;
}

.slide-btn b {
  font-weight: 600;
}

.slide-btn .lines {
  width: 42px;
  height: 1px;
  float: left;
  overflow: hidden;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.slide-btn .lines span:nth-child(1) {
  width: 100%;
  height: 1px;
  float: right;
  background: #fff;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.slide-btn .lines span:nth-child(2) {
  width: 0;
  height: 1px;
  float: left;
  background: #fff;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.slide-btn:hover .lines {
  width: 62px;
  margin-left: 20px;
}

.slide-btn:hover .lines span:nth-child(1) {
  width: 0;
}

.slide-btn:hover .lines span:nth-child(2) {
  width: 100%;
  transition-delay: 0.2s;
}

.slide-btn .video-play-circle {
  stroke-dasharray: 315;
  stroke-dashoffset: 315;
  transition: stroke-dashoffset 0.5s;
}

.slide-btn svg {
  width: 50px;
  height: 50px;
  transition: transform 0.3s;
  margin-left: -25px;
  margin-right: 15px;
}

.slide-btn:hover .video-play-circle {
  stroke-dashoffset: 0;
}

/* SWIPER SLIDER */
.swiper-slider {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  overflow: hidden;
}

.swiper-slider .swiper-slide {
  display: block;
  overflow: hidden;
}

.swiper-slider .swiper-slide.swiper-slide-active .slide-inner {
  transform: scale(1);
}

.swiper-slider .swiper-slide.swiper-slide-active .slide-inner .container {
  transform: translateY(0);

  opacity: 1;
}

.swiper-slider .swiper-slide .slide-inner {
  width: 100%;
  height: 100%;
  transform: scale(0.8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;

  background-size: cover;
  background-position: center;
  position: relative;
}

.swiper-slider .swiper-slide .slide-inner:after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/bg-noise.gif);
  opacity: 0.04;
  position: absolute;
  left: 0;
  top: 0;
}

.swiper-slider .swiper-slide .slide-inner:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/bg-lines.png) center;
  z-index: 1;
}

.swiper-slider .swiper-slide .slide-inner .container {
  transform: translateY(50px);
  opacity: 0;
  transition-delay: 0.15s !important;
  position: relative;
  z-index: 2;
}

.swiper-slider .swiper-slide .slide-inner .container .tagline {
  display: block;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.swiper-slider .swiper-slide .slide-inner .container .tagline span {
  color: #e8293b;
  float: left;
  font-weight: 600;
  color: #fff;
}

.swiper-slider .swiper-slide .slide-inner .container .tagline span:after {
  content: "";
  width: 22px;
  height: 1px;
  float: right;
  margin: 10px;
  background: #e8293b;
}

.swiper-slider .swiper-slide .slide-inner .container .tagline h6 {
  float: left;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  margin-top: 2px;
  margin-bottom: 0;
}

.swiper-slider .swiper-slide .slide-inner .container h1 {
  width: 100%;
  float: left;
  font-weight: 800;
  color: #e8293b;
  font-size: 6vw;
  line-height: 1;
  margin-top: 3rem;
}

.swiper-slider .swiper-slide .slide-inner .container h1 span {
  -webkit-text-stroke-width: 3px;
  transform: translateY(-35%);
  margin-left: 4%;
  display: flex;
  -webkit-text-stroke-color: #fff;
  color: #fff;
}

.swiper-slider .swiper-slide .slide-inner .container .slide-btn {
  float: left;
}

.swiper-slider .swiper-pagination-bullets {
  width: 50px;
  left: auto;
  right: 40px;
  bottom: 50%;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  z-index: 2 !important;
}

.swiper-slider .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 100%;
  height: auto;
  float: left;
  margin: 5px 0;
  background: none;
  position: relative;
  text-indent: 9999px;
  padding-right: 36px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.swiper-slider .swiper-pagination-bullets .swiper-pagination-bullet:hover {
  opacity: 1;
}

.swiper-slider .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  text-indent: 0;
}

.swiper-slider .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  width: 67px;
  right: -45px;
}

.swiper-slider .swiper-pagination-bullets .swiper-pagination-bullet:after {
  content: "";
  width: 22px;
  height: 1px;
  background: #FF4545;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

/* 
.video-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh; 
}

.swiper-container {
  width: 100vw; 
  height: auto;
}

.swiper-wrapper {
  display: flex;
  justify-content: center; 
  align-items: center;
}

.video-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; 
  height: 100%; 
}

iframe {
  width: 80vw; 
  height: calc(80vw * 9 / 16);
  max-width: 1200px; 
  max-height: 675px; 
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4); 
}

.glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  z-index: 2;
}


@media (max-width: 1200px) {
  iframe {
    width: 90vw;
    height: calc(90vw * 9 / 16);
  }
}

@media (max-width: 768px) {
  iframe {
    width: 100vw;
    height: calc(100vw * 9 / 16);
  }
} */

.video-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
  overflow-x: unset;
  white-space: nowrap;
}

.video-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 100%;
}

.video-item {
  position: relative;
  display: inline-block;
  text-align: center;
}

.video-item iframe {
  width: 90%;
  height: auto;
  max-width: 100%;
  border-radius: 1rem;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.span-down b {
  margin: 4rem 0 0 0;
}

/* Mobil için */
@media (max-width: 768px) {
  .video-wrapper {
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .video-item {
    min-width: 90vw;
    /* Her video ekranın tamamını kaplar */
    max-width: 90vw;
    /* Videolar genişlik olarak ekrana sığar */
    display: inline-block;
    margin-right: 0;
  }

  .video-item iframe {
    width: 90vw;
    /* Ekran genişliğini kaplayacak şekilde */
    height: calc(90vw * 9 / 16);
    /* 16:9 oranını korumak için */
  }

  .v2,
  .v3,
  .v4,
  .v5 {
    display: none;
  }

  .span-down b {
    margin: 0;
  }

}



/* INTRO */
.intro {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}

.intro h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  font-size: 14px;
}

.intro h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
  padding-right: 35%;
}

.intro h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  z-index: -1;
  position: absolute;
  left: 0;
  top: -20%;
}

.intro h4 {
  margin-top: 5px;
  font-family: "Fjalla One", sans-serif;
  font-size: 25px;
  line-height: 40px;
  text-transform: uppercase;
  padding-right: 20%;
}

.intro p {
  margin-bottom: 30px;
  font-size: 20px;
  line-height: 37px;
}

.intro u {
  text-decoration: none;
  border-bottom: 3px dotted #e8293b;
  font-weight: 600;
}

.intro strong {
  font-weight: 600;
}

.intro .custom-link {
  transform: translateY(30px);
}

/* PROCESS */
.process {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  position: relative;
  text-align: center;
}

.process h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  font-size: 14px;
  position: relative;
}

.process h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
}

.process h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  z-index: -1;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: -50%;
}

.process span {
  width: 80px;
  height: 80px;
  line-height: 62px;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  border-radius: 50%;
  background: #FF4545;
  position: relative;
  border: 10px solid #e2fdf1;
  margin-top: 50px;
}

s .process span:before {
  content: "";
  width: 30vw;
  height: 2px;
  background: #e2fdf1;
  position: absolute;
  left: -30px;
  top: 30px;
  z-index: -1;
}

.process .col-md-3:last-child span:before {
  display: none;
}

.process figure {
  width: 100%;
  display: block;
  margin: 20px 0;
  background: #fff;
}

.process figure img {
  height: 90px;
}

.process h5 {
  font-weight: 600;
  font-size: 13px;
  margin-top: 20px;
  margin-bottom: 0;
}

/* SERVICES CONTENT BLOCK */
.services-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #000;
  color: #fff;
  position: relative;
}

.services-content-block .video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 0.2;
}

.services-content-block .video-bg video {
  min-width: 100%;
  min-height: 100%;
  float: left;
}

.services-content-block h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
}

.services-content-block h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
  padding-right: 35%;
  padding-top: 4rem;
}

.services-content-block .left {
  width: 100px;
  float: left;
  margin-top: -2px;
}

.services-content-block .right {
  width: calc(100% - 100px);
  float: left;
}

.services-content-block small {
  display: inline-block;
  font-family: "Fjalla One", sans-serif;
  color: #FF4545;
}

.services-content-block span {
  width: 50px;
  height: 1px;
  background: #FF4545;
  display: inline-block;
  margin: 5px 15px;
}

.services-content-block h4 {
  font-family: "Fjalla One", sans-serif;
  font-size: 17px;
  margin-bottom: 30px;
}

.services-content-block ul {
  padding-left: 20px;
  margin-bottom: 0;
}

.services-content-block ul li {
  line-height: 1.8;
}


.contents {
  margin-bottom: 7rem;
}

/* General Section Styles */
.section-padding {
  width: 100%;
  padding: 150px 0;
  display: flex;
  flex-wrap: wrap;
  transition: background 0.4s ease;
}

/* WORKS SECTION */
.works {
  padding: 150px 0;
  width: 100%;
  background-color: #f7f7f7;
}

.works h6,
.works-single h6 {
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 20px;
  opacity: 0.5;
}

.works h2 {
  margin-bottom: 60px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.2;
  padding-right: 35%;
  position: relative;
}

.works h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  position: absolute;
  left: 0;
  top: -20%;
  z-index: -1;
}

.works h6,
.works h2,
.works h3 {
  color: #000
}

.project-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 75px 0;
  transition: 0.25s ease-in-out;
}

.project-box:hover figure {
  transform: scale(0.95);
}

.project-box:hover figure img {
  transform: scale(1.15);
}

.project-box figure {
  width: 55%;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.project-box figure img {
  width: 100%;
}

.project-box .content-box {
  width: 45%;
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.project-box .content-box .inner {
  margin: 0;
}

.project-box .content-box small {
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.project-box .content-box h3 {
  font-size: 5vw;
  font-weight: 800;
  margin-bottom: 5vh;
  line-height: 1;
}

.project-box .content-box h3 span {
  display: block;
  font-size: 8vw;
  color: #FF4545;
  margin-left: -7vw;
}


.project-box .custom-link a {
  float: right;
}

.project-box:last-child {
  padding-bottom: 0;
}

/* WORKS SINGLE SECTION */
.works-single {
  padding: 150px 0;
}

.works-single h2,
.works-single h3 {
  font-weight: 800;
  font-family: "Fjalla One", sans-serif;
}

.works-single h2 {
  font-size: 60px;
  line-height: 1.2;
  padding-right: 35%;
  margin-bottom: 50px;
}

.works-single h3 {
  font-size: 60px;
  margin-top: 80px;
  color: #FF4545;
  text-align: center;
  text-transform: uppercase;
}

.works-single h4 {
  font-size: 25px;
  line-height: 40px;
  text-transform: uppercase;
  padding-right: 20%;
  margin-top: 5px;
}

.works-single h5 {
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.works-single p {
  font-size: 20px;
  line-height: 37px;
  margin-bottom: 30px;
}

.works-single iframe,
.works-single figure {
  margin-bottom: 30px;
}

.works-single iframe {
  float: left;
  background: #0e0e0e;
}

.works-single figure img {
  width: 100%;
}

.project-box {
  width: 100%;
  display: flex;
  padding: 75px 0;
}

.project-box figure {
  width: 40%;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.project-box figure img {
  width: 100%;
  height: auto;
}

.project-box .content-box {
  width: 60%;
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-box .content-box .inner {
  text-align: right;
}

.project-box .custom-link {
  text-align: right;
}

@media only screen and (max-width: 767px) {

  .project-box {
    flex-direction: column;
    padding: 1.4rem 0;
  }

  .project-box figure {
    width: 100%;
    margin-bottom: 20px;
  }

  .project-box .content-box {
    width: 100%;
    padding-left: 0;
    display: grid;
    justify-content: center;
  }

  .project-box .content-box .inner {
    text-align: center;
  }

  .project-box .custom-link {
    text-align: center;
  }

  .content-box h3 {
    margin: 10px 0 0 0;
    /* h3'e üstten biraz boşluk ekledim */
  }

  .content-box h3 span {
    display: block;
    /* span'i bir blok haline getirdim */
    margin-top: 5px;
    /* span ile h3 arasına boşluk ekledim */
  }
}


/* TEAM */
.team {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #FF4545;
  position: relative;
}

.team h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  font-size: 14px;
}

.team h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
}

.team h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  position: absolute;
  left: 0;
  top: -20%;
}

.team figure {
  width: 100%;
  display: block;
  margin-bottom: 0;
}

.team figure img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}

.team figure figcaption {
  width: 100%;
  display: block;
}

.team figure figcaption small {
  opacity: 0.6;
  font-size: 11px;
  display: block;
  margin-bottom: 5px;
}

.team figure figcaption h4 {
  font-family: "Fjalla One", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* showroom */
.showroom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #f5f5f5;
  position: relative;
}

.showroom h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  font-size: 14px;
}

.showroom h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
}

.showroom h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  position: absolute;
  left: 0;
  top: -20%;
}

.showroom figure {
  width: 100%;
  display: block;
  margin-bottom: 0;
}

.showroom figure img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}

.showroom figure figcaption {
  width: 100%;
  display: block;
}

.showroom figure figcaption small {
  opacity: 0.6;
  font-size: 11px;
  display: block;
  margin-bottom: 5px;
}

.showroom figure figcaption h4 {
  font-family: "Fjalla One", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 0;
}



/* WORK WITH US */
.work-with-us {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #FF4545;
  position: relative;
}

.work-with-us:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/bg-noise.gif);
  opacity: 0.04;
  position: absolute;
  left: 0;
  top: 0;
}

.work-with-us:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/bg-lines.png) center;
  z-index: 1;
}

.work-with-us .container {
  position: relative;
  z-index: 2;
}

.work-with-us h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
}

.work-with-us h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
  padding-right: 35%;
}

.work-with-us h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  z-index: -1;
  position: absolute;
  left: 0;
  top: -20%;
}

.work-with-us h4 {
  margin-top: 5px;
  font-family: "Fjalla One", sans-serif;
  font-size: 25px;
  line-height: 40px;
  text-transform: uppercase;
  padding-right: 20%;
  margin-bottom: 40px;
}

/* AWARDS  */
.awards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.awards figure {
  display: block;
  margin: 0;
}

.awards figure img {
  height: 60px;
}

.awards h5 {
  font-weight: 600;
  font-size: 15px;
}

.awards .odometer {
  font-family: "Fjalla One", sans-serif;
  font-size: 40px;
}

/* CLIENTS */
.clients {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background-color: #f3f3f3;
}

.clients h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  font-size: 14px;
}

.clients h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
}

.clients h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  position: absolute;
  left: 0;
  top: -20%;
}

.clients h4 {
  margin-top: 5px;
  font-family: "Fjalla One", sans-serif;
  font-size: 25px;
  line-height: 40px;
  text-transform: uppercase;
  padding-right: 20%;
}

.clients ul {
  width: 100%;
  float: left;
  margin: 0;
  margin-bottom: 4rem;
  padding: 0;
}

.clients ul * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.clients ul li {
  width: 25%;
  float: left;
  margin: 0;
  padding: 10px;
  list-style: none;
  position: relative;
}

.clients ul li img {
  opacity: 1;
  background: #fff;
  border: 1px solid #eee;
  padding: 15px;
}

.clients ul li:hover small {
  margin-top: -25px;
  opacity: 1;
}

.clients ul li:hover img {
  opacity: 0.5;
}

/* NEWS */
.news {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}

.news .post {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
}

.news .post.single-post {
  padding-left: 10%;
  padding-right: 10%;
  flex-direction: column;
}

.news .post.single-post .post-content .inner .post-title {
  font-size: 66px;
}

.news .post.single-post .post-image {
  margin-bottom: 30px;
  display: block;
}

.news .post:nth-child(2n+2) .post-image {
  order: 2;
}

.news .post:nth-child(2n+2) .post-content {
  padding-left: 0;
}

.news .post .post-image {
  flex: 1;
  margin: 0;
}

.news .post .post-image img {
  width: 100%;
}

.news .post .post-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
}

.news .post .post-content .inner {
  width: 100%;
}

.news .post .post-content .inner .social-share {
  width: 100%;
  float: left;
  padding: 0 !important;
  margin-bottom: 40px;
}

.news .post .post-content .inner .social-share li {
  float: left;
  margin-right: 5px;
  padding: 0;
  list-style: none;
  text-align: center;
}

.news .post .post-content .inner .social-share li.facebook a {
  background: #475993;
}

.news .post .post-content .inner .social-share li.twitter a {
  background: #76a9ea;
}

.news .post .post-content .inner .social-share li.google-plus a {
  background: #f34a38;
}

.news .post .post-content .inner .social-share li.linkedin a {
  background: #0077b7;
}

.news .post .post-content .inner .social-share li.youtube a {
  background: #f61c0d;
}

.news .post .post-content .inner .social-share li a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  float: left;
  background: #e8293b;
  color: #fff;
  border: none;
  border-radius: 0;
}

.news .post .post-content .inner .post-date {
  display: block;
  font-size: 14px;
  opacity: 0.5;
  font-family: "Fjalla One", sans-serif;
}

.news .post .post-content .inner .post-title {
  display: block;
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 30px;
}

.news .post .post-content .inner .post-title a {
  display: block;
  color: #0e0e0e;
}

.news .post .post-content .inner .post-title a:hover {
  color: #FF4545;
  text-decoration: none;
}

.news .post .post-content .inner .post-author {
  display: block;
  font-family: "Fjalla One", sans-serif;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.news .post .post-content .inner .post-author img {
  width: 50px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 10px;
}

.news .post .post-content .inner .post-text {
  display: block;
  line-height: 30px;
  margin-bottom: 0;
}

.news .post .post-content .inner h6 {
  font-size: 23px;
  margin-bottom: 30px;
  line-height: 1.5;
}

.news .post .post-content .inner blockquote {
  display: block;
  padding: 40px;
  margin-bottom: 40px;
  background: #FF4545;
  font-family: "Fjalla One", sans-serif;
  position: relative;
}

.news .post .post-content .inner blockquote:before {
  content: "";
  font-family: fontawesome;
  font-size: 90px;
  position: absolute;
  left: 40px;
  top: 0;
  opacity: 0.1;
}

.news .post .post-content .inner blockquote h5 {
  font-weight: 800;
  font-family: Poppins;
  margin: 0;
}

.news .post .post-content .inner ul {
  padding-left: 20px;
}

.news .post .post-content .inner ul li {
  line-height: 1.9;
}

.news .post .post-content .inner p {
  display: block;
  line-height: 30px;
}

.news .post .post-content .inner p:last-child {
  margin-bottom: 0;
}

/* HELLO */
.hello {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}

.hello h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  font-size: 14px;
}

.hello h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
  padding-right: 35%;
}

.hello h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  z-index: -1;
  position: absolute;
  left: 0;
  top: -20%;
}

.hello address {
  display: block;
  margin-bottom: 100px;
}

.hello address b {
  display: block;
  margin-bottom: 10px;
}

.hello #success,
.hello #error {
  display: none;
  float: left;
}

.hello #contact {
  width: 100%;
  display: flex;
  margin-left: -100px;
  padding: 40px 20px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.hello #contact .form-group:last-child {
  margin-bottom: 0;
}

.hello #contact label {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.hello #contact label.error {
  color: #e8293b;
  margin-top: 7px;
  margin-bottom: 0;
}

.hello #contact div.error {
  background: #e8293b;
  color: #fff;
  border-radius: 0;
  border: none;
}

.hello #contact input[type=text] {
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #adadad;
  border-radius: 1rem;
  padding: 0 20px;
}

.hello #contact textarea {
  width: 100%;
  height: 150px;
  background: #fff;
  border: 1px solid #adadad;
  border-radius: 1rem;
  padding: 20px;
}

.hello #contact button[type=submit] {
  height: 50px;
  padding: 0 40px;
  font-size: 14px;
  font-weight: 600;
  color: #0e0e0e;
  background: #FF4545;
  border: none;
}

/* DIRECTION */
.direction {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}

.direction h6 {
  display: block;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.5;
  font-size: 14px;
}

.direction h2 {
  margin-bottom: 60px;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.2;
  padding-right: 35%;
}

.direction h2:before {
  content: attr(data-text);
  font-size: 20vw;
  opacity: 0.05;
  z-index: -1;
  position: absolute;
  left: 0;
  top: -20%;
}

.direction figure {
  width: 100%;
  display: block;
  margin: 0;
  position: relative;
}

.direction figure img {
  width: 100%;
}

.direction figure figcaption {
  width: 40%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
}

.direction figure figcaption .inner {
  width: 100%;
  padding: 40px;
  color: #fff;
}

.direction figure figcaption .inner .custom-link {
  margin-top: 40px;
}

.direction figure figcaption .inner .custom-link a {
  color: #fff;
}

.direction figure figcaption .inner .custom-link .lines span {
  background: #fff;
}

.direction figure figcaption .inner h5 {
  font-family: "Fjalla One", sans-serif;
  font-size: 26px;
  margin-bottom: 20px;
}

.direction figure figcaption .inner b {
  font-weight: 600;
}

.direction figure figcaption .inner p {
  font-size: 14px;
}

.direction figure figcaption .inner ul {
  display: block;
  margin: 0;
  padding: 0;
}

.direction figure figcaption .inner ul li {
  display: block;
  margin: 15px 0;
  padding: 0;
  list-style: none;
}

/* FOOTER */
.footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 100px 0;
  background: #0e0e0e;
  color: #fff;
}

.footer .footer-quote {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.footer .footer-quote img {
  height: 60px;
  display: block;
  margin-bottom: 20px;
}

.footer .footer-quote h2 {
  font-size: 3vw;
  font-weight: 800;
  margin-bottom: 0;
  color: #FF4545;
}

.footer .footer-contact {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.footer .footer-contact address {
  margin-bottom: 0;
}

.footer .footer-contact address a {
  color: #fff;
  text-decoration: underline;
}

.footer .footer-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.footer .footer-bottom h5 {
  margin-bottom: 10px;
  font-family: "Fjalla One", sans-serif;
  text-transform: uppercase;
  color: #FF4545;
}

.footer .footer-bottom ul {
  display: block;
  margin: 0;
  padding: 0;
}

.footer .footer-bottom ul li {
  display: inline-block;
  margin: 0;
  margin-right: 20px;
  padding: 0;
  list-style: none;
}

.footer .footer-bottom ul li:last-child {
  margin-right: 0;
}

.footer .footer-bottom ul li a {
  position: relative;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 6px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  border-bottom: 2px solid transparent;
}

.footer .footer-bottom ul li a:hover {
  padding-bottom: 1px;
  border-bottom: 2px solid #fff;
  text-decoration: none;
}


/* Whatsapp chat başl. */

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@import url('http://fonts.googleapis.com/css?family=Lato:100,300,400|Raleway:100,300,400,500,600,700|Open+Sans:100,300,400,500,600');

.trwpwhatsappballon {
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid #fff;
  max-width: 250px;
}

.trwpwhatsapptitle {
  background-color: #22c15e;
  color: white;
  padding: 14px;
  border-radius: 12px 12px 0px 0px;
  text-align: center;
}

.trwpwhatsappmessage {
  padding: 16px 12px;
  background-color: white;
}

.trwpwhatsappinput {
  background-color: white;
  border-radius: 0px 0px 12px 12px;
}

.trwpwhatsappinput input {
  width: 206px;
  border-radius: 10px;
  margin: 1px 1px 0px 10px;
  padding: 10px;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 300;
  font-size: 13px;
  background-color: #efefef;
  border: 1px solid #d4d4d4;
}

.trwpwhatsappbutton {
  background-color: #22c15e;
  border-radius: 20px;
  padding: 8px 15px;
  cursor: pointer;
  color: #fff;
  max-width: 220px;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.trwpwhatsappall {
  position: fixed;
  z-index: 9999999999999999999;
  bottom: 0;
  right: 10px;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
}

.trwpwhatsappsendbutton {
  color: #22c15e;
  cursor: pointer;
}

button {
  border: none;
}

button i {
  float: right;
  position: absolute;
  z-index: 999999999999;
  right: 23px;
  top: 11;
  bottom: 81px;
  font-size: 18px !important;
}

.kapat {
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 13px;
  border: 1px solid #fff;
  border-radius: 99px;
  padding: 2px 5px 2px 5px;
  color: white;
  font-size: 10px;
  cursor: pointer;
}



/* Form container */
.form-container {
  background-color: #fff;
  width: 60vw;
  margin: auto;
  padding: 6rem;
}

/* Form styles */
.form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
  background: url(../images/pattern-bg.svg);
}

/* Wrapper styles */
.formbold-main-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.formbold-form-wrapper {
  margin: 0 auto;
  max-width: 550px;
  width: 100%;
  background: white;
}

/* Input and textarea styles */
.formbold-input-flex {
  display: flex;
  gap: 20px;
  margin-bottom: 22px;
}

.formbold-input-flex>div {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.formbold-textarea {
  display: flex;
  flex-direction: column;
}

.formbold-form-input {
  width: 100%;
  padding: 13px 22px;
  border-radius: 5px;
  border: 1px solid #cacaca;
  background: #ffffff;
  font-weight: 500;
  font-size: 16px;
  color: #536387;
  outline: none;
  resize: none;
}

.formbold-form-input::placeholder {
  color: #536387;
}

.formbold-form-input:focus {
  border-color: #6A64F1;
}

/* Label styles */
.formbold-form-label {
  color: #07074D;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  display: block;
  margin-bottom: 18px;
}

.formbold-form-input:focus+.formbold-form-label {
  color: #6A64F1;
}

/* File input styles */
.formbold-filename-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}

.formbold-filename {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  line-height: 24px;
  color: #536387;
}

.formbold-filename svg {
  cursor: pointer;
}

/* Button styles */
.formbold-btn {
  font-size: 16px;
  border-radius: 5px;
  padding: 12px 25px;
  border: none;
  font-weight: 500;
  background-color: #6A64F1;
  color: white;
  cursor: pointer;
  margin-top: 25px;
}

.formbold-btn:hover {
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}

/* Title styles */
.formbold-form-title h2 {
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  color: #07074d;
}

.formbold-form-title p {
  font-size: 16px;
  line-height: 24px;
  color: #536387;
  margin-top: 12px;
}

/* Media Queries for Responsive Design */

/* For desktops (widths above 1024px) */
@media (min-width: 1024px) {
  .form-container {
    width: 50vw;
    padding: 8rem;
  }

  .formbold-form-wrapper {
    max-width: 70%;
  }

  .formbold-input-flex {
    gap: 30px;
  }

  .formbold-form-title h2 {
    font-size: 32px;
  }

  .formbold-form-title p {
    font-size: 18px;
  }
}

/* For tablets (widths from 600px to 1024px) */
@media (max-width: 1024px) {
  .clients ul li {
    width: 50%;
  }

  .swiper-pagination {
    display: none;
  }

  .awards-text {
    padding: 1rem;
  }

  .form-container {
    width: 80vw;
    padding: 4rem;
  }

  .page-header .form-hero .img {
    height: 40%;
  }

  .formbold-main-wrapper {
    padding: 24px;
  }

  .formbold-form-wrapper {
    max-width: 80%;
  }

  .formbold-input-flex {
    flex-direction: column;
    gap: 15px;
  }

  .formbold-input-flex>div {
    width: 100%;
  }

  .formbold-form-title h2 {
    font-size: 24px;
  }

  .formbold-form-title p {
    font-size: 14px;
  }
}

/* For mobile devices (widths from 320px to 600px) */
@media (max-width: 600px) {
  .form-container {
    width: 90vw;
    padding: 2rem;
  }

  .form-header {
    min-height: 300px
  }

  .slide-btn {
    display: inline-block;
    /* Tıklanabilirliği artırmak için block ya da inline-block kullanıyoruz */
    position: relative;
    z-index: 9999;
    cursor: pointer;
    text-decoration: none;
    transform: scale(0.8);
  }

  .lines {
    /* Varsayılan satır stilleri */
  }

  .basvur {
    color: #fff;
    font-size: 16px;
  }

  @media (max-width: 768px) {
    .slide-btn {
      width: 100%;
      /* Mobilde tam genişlik sağlar */
      text-align: center;
    }
  }


  .formbold-main-wrapper {
    padding: 16px;
  }

  .formbold-form-wrapper {
    max-width: 100%;
    padding: 1rem;
  }

  .formbold-input-flex {
    flex-direction: column;
    gap: 10px;
  }

  .formbold-input-flex>div {
    width: 100%;
  }

  .formbold-form-input {
    padding: 10px 15px;
    font-size: 14px;
  }

  .formbold-form-title h2 {
    font-size: 20px;
  }

  .formbold-form-title p {
    font-size: 12px;
  }

  .formbold-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* Base styling for the hero banner */
.hero-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Full viewport height */
  overflow: hidden;
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image covers the entire div without stretching */
  object-position: left !important;
}


/* RESPONSIVE MOBILE FIXES - 767px ve altı */
@media only screen and (max-width: 900px) {
  .hero-banner .form-hero img {
    width: 100% !important;
    height: 50vh !important;
    /* Full viewport height */
    overflow: hidden !important;
  }


  .hero-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Resmin tam ekranı kaplamasını sağlar, bozulmayı önler */
    min-height: 300px !important;

  }

  .page-header .form-header {
    height: 50vh !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 300px !important;
  }

  .form-hero {
    height: 50vh !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 300px !important;
    object-fit: center;
  }

  .form-hero img {
    object-fit: cover !important;
    object-position: center !important;
  }


  /* Diğer elementler */
  .header .container h1 {
    font-size: 20vw !important;
  }

  .swiper-slider .swiper-slide .slide-inner {
    padding: 0 !important;
  }

  .swiper-slider .swiper-slide .slide-inner .container h1 {
    font-size: 20vw !important;
  }

  .awards {
    padding: 40px 0 !important;
  }

  .works-single h2,
  .hello h2,
  .team h2,
  .intro h2,
  .services-content-block h2,
  .direction h2,
  .works h2,
  .work-with-us h2,
  .clients h2 {
    font-size: 32px !important;
  }

  .hello iframe {
    height: 400px !important;
  }
}

@media only screen and (max-width: 900px) {
  .navigation-menu.active .bg-layers span {
    width: 100%;
    /* Tam genişlik */
    height: 100%;
    /* Tam yükseklik */
    transform: none;
    /* Skew etkisini kaldırıyoruz */
    background: #0e0e0e;
    /* Siyah arka plan */
  }

  .navigation-menu.active {
    visibility: visible;
    background-color: #0e0e0e;
    /* Arka planı tamamen siyah yap */
  }

  .navigation-menu .inner .menu ul {
    display: flex;
    flex-direction: column;
    /* Dikey sırala */
    align-items: center;
    /* Ortalar */
  }

  .navigation-menu .inner .menu ul li {
    margin: 10px 0;
    /* Alt alta sıralama için boşluk */
  }

  .navigation-menu .inner .menu ul li a {
    font-size: 6vw;
    /* Büyük ve kalın yazılar */
    font-weight: bold;
    color: #fff;
    /* Beyaz renkte */
  }

  .navigation-menu .inner blockquote a {
    font-size: 5vw;
    /* Blockquote öğesinin de büyüklüğünü ayarladık */
    font-weight: bold;
    color: #fff
  }

  /* 1000px ve altı için yazı boyutlarını küçült */
  @media (max-width: 1000px) {
    header .left-side ul li a {
      font-size: 12px;
      /* Yazı fontunu küçült */
    }

    header .left-side ul li {
      margin: 0 5px;
      /* Aralığı daralt */
    }

    header .left-side-index {
      width: 100%;
      height: 10rem;
      transform: none;
      position: relative;
      margin-left: 0;
      top: 40rem;
    }


    header .left-side {
      width: 100%;
      /* Genişliği artır */
      height: auto;
      /* Yüksekliği otomatik ayarla */
      transform: none;
      /* Rotasyonu kaldır */
      position: relative;
      /* Pozisyonu sabit yap */
      margin-left: 0;
      /* Margin'i sıfırla */
      top: 0;
      /* Üstten boşluğu sıfırla */
    }

    header .left-side ul {
      display: flex;
      /* Flex düzeni kullan */
      justify-content: center;
      /* Ortala */
    }
  }

  .right-align {
    text-align: right;
  }

  .justify-align {
    text-align: justify;
  }


  .video-wrapper {
    position: relative;
    width: 100vw;
    /* Tam genişlik */
    height: 40vh;
    /* Tam yükseklik */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .video-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: calc(80vw * 9 / 16);
    max-width: 1200px;
    max-height: 675px;
    border: none;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
  }

  /* Mobil uyumluluk */
  @media (max-width: 1200px) {
    .video-wrapper iframe {
      width: 90vw;
      height: calc(90vw * 9 / 16);
    }

    @media (max-width: 768px) {
      .video-wrapper iframe {
        width: 100vw;
        height: calc(100vw * 9 / 16);
      }
    }
  }
}