body { font-family: 'Poppins', sans-serif; font-size: 14px; }

#header-bg { background: url('../images/header.jpg') no-repeat; background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; width: 100%; height: 100%; opacity: 1; top: 0; left: 0; visibility: inherit; z-index: 20; min-height: 600px; }
#header-bg img { float: right; margin-right: 11%; margin-top: 60px;}
#carouselBanner .carousel-item.background { height: 65vh; min-height: 300px; background: no-repeat center center scroll; background-size: cover;}
#carouselBanner .carousel-item.background.background-sub { height: 45vh;}
#carouselBanner .carousel-indicators > li { background-color: rgba(0,0,0,.5); }
#carouselBanner .carousel-indicators > li.active{background-color: #000;}
#carouselBanner .carousel-caption { bottom: 13%; text-align: left; right: auto; left: 10%;}
#carouselBanner .carousel-caption h1 { font-size: 35px; color: #263045; font-weight: 600; margin-bottom: 25px;
-webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown;
-webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
-webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s; -o-animation-duration: 0.3s; animation-duration: 0.3s;
-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-duration:0.3s; animation-delay: 0.3s;}
#carouselBanner .carousel-caption p { font-size: 17px; color: #848484;
-webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown;
-webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
-webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s;
-webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-duration:0.5s; animation-delay: 0.5s;}
#carouselBanner .carousel-caption a { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown;
-webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
-webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; -o-animation-duration: 0.7s; animation-duration: 0.7s;
-webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-duration: 0.7s; animation-delay: 0.7s;}
#carouselBanner .carousel-caption .btn:hover { background: #263045; }
#carouselBanner .carousel-item.background-sub .scale-up-center { animation: none!important;}

#return-to-top { position: fixed; bottom: 20px; right: 20px; background: #d3202f; width: 40px; height: 40px; text-decoration: none; display: none; border-radius: 10px; z-index : 999; }
#return-to-top i { font-size: 25px; color: #fff; position: relative; margin: 0; left: 9px; top: 7px; }

/* Dropdown Submenu */
.dropdown-submenu { position: relative;}
.dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0 6px 6px 6px; }
.dropdown-submenu:hover>.dropdown-menu { display: block;}
.dropdown-submenu>a:after { display: block; content: ''; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #444; margin-top: 7px; margin-right: -10px; }
.dropdown-submenu.pull-left { float: none; }
.dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; border-radius: 6px 0 6px 6px; }
.dropdown-toggle::after { color: #aaa;}
.bg-dark:focus, .bg-dark:hover{ background-color: none!important; box-shadow: none!important;}

/* Custom CSS */
.navbar-nav > .nav-item .nav-link { font-size: 15px; color: #3f3f3f!important; font-weight: 500; text-transform: uppercase; padding: 1rem 1.25rem;}
.navbar-nav > .nav-item:last-child a { font-weight: 400; font-size: 12px; border-radius: 30px; background: #d3202f; color: #fff!important; margin: 10px 0 0 20px; padding: 8px 30px; text-transform: capitalize;}
.navbar-nav > .nav-item:last-child a:hover { background: #000; color: #fff;}
nav.border-bottom, nav .border-left, nav .border-right, nav .border-bottom{ border-color: #d4d7dd!important;}
.navbar-scroll { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; -webkit-box-shadow: 0px 13px 25px -12px rgba(0,0,0,0.25); -moz-box-shadow: 0px 13px 25px -12px rgba(0,0,0,0.25); box-shadow: 0px 13px 25px -12px rgba(0,0,0,0.25);}
.navbar-scroll #header-top { display: none!important;}
.navbar-anasayfa{ background: transparent!important;}
.navbar-scroll.navbar-anasayfa { background: #fff!important; position: fixed; top: 0; right: 0; left: 0; z-index: 1030;}
#header-top { font-size: 12px; color: #3f3f3f;}

.breadcrumb-item a { color: #d3202f;}

.page-title { position: relative; font-size: 30px; font-weight: bold; color: #000; background: url('../images/page-title-bg.png') no-repeat; background-position: left bottom; font-family: 'Source Serif Pro', serif; }
.center.page-title { text-align: center; background-position: center bottom;}
.font-source { font-family: 'Source Serif Pro', serif; }

.satin-baslik { background: url('../images/page-title-bg.png') no-repeat; background-position: right bottom; background-size: contain; color: #5d5d5d; font-size: 15px;}

#cozumler { font-family: 'Source Serif Pro', serif; }
#cozumler h2 { font-size: 20px; font-weight: bold; color: #000;}
#cozumler p { font-size: 14px; color: #000; font-weight: 600;}

.otomotiv-baslik { font-size: 42px; color: #d93f44; font-weight: bold;}
.otomotiv-full-bg { background-color: #f0f0f0; height: 180px; margin: 80px 0; width: 100vw; margin-left: calc(-50vw + 50% - 24px); position: relative;}
#hizmetler li::before { content: "•"; color: #d93f44; display: inline-block; width: 1em; font-size: 20px;}

.kalibrasyon-baslik { font-size: 42px; color: #fe766a; font-weight: bold;}

#referans-bg { background: url('../images/referans-bg.png') no-repeat; background-size: cover; padding: 120px 0 80px 0;}

#iletisim p { font-size: 13px; color: #8e8e8e;}
#iletisim h5 { font-size: 16px; color: #000;}
#iletisim .sosyal_medya li:first-child { padding-left: 0!important;}
#iletisim .sosyal_medya a { color: #989898}
#iletisim .sosyal_medya a:hover { color: #d3202f;}

.form-control { border-radius: 0; border: 0; background: #f5f5f5; font-size: 14px; height: 40px;}
::placeholder { color: #b2b2b2!important;}
:-ms-input-placeholder { color: #b2b2b2!important;}
::-ms-input-placeholder { color: #b2b2b2!important;}

footer { font-size: 13px; color: #8e8e8e; background: #131313;}
footer h6 { font-size: 18px;}
footer a { color: #8e8e8e!important}
#footer-cozum { column-count: 2; padding-left: 0;}
#footer-cozum .list-group-item { background-color: transparent; border: 0; list-style-type: none; padding: 3px 0;}

/* Sosyal Medya Sayfası */
.sosyal_medya{ display:-ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: row; margin-bottom: 0; padding-left: 0; list-style: none;}
.sosyal_medya li{ padding-left: 25px!important;}
.sosyal_medya a { color: #d3202f; display: inline-block; text-align: center;}

/* 404 Sayfa Bulunamadı Sayfası*/
#nopage {background-color: #342643; min-height: 80vh;}
.text-wrapper { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.title {font-size: 6em; font-weight: 700; color: #EE4B5E;}
.subtitle { font-size: 40px; font-weight: 700; color: #1FA9D6;}
.buttons { margin: 30px;}
.buttons a.button { font-weight: 700; border: 2px solid #EE4B5E; text-decoration: none; padding: 15px; text-transform: uppercase; color: #EE4B5E; border-radius: 26px; transition: all 0.2s ease-in-out; }
.buttons a.button:hover { background-color: #EE4B5E; color: white; transition: all 0.2s ease-in-out;}


/*Renkler*/
.bg-red { background: #d3202f;}
.bg-black { background: #000;}
.bg-gray { background: #f0f0f0;}
.text-black { color: #000;}
.text-gray { color: #848484;}
.text-red { color: #d93f44;}

/* ----------------------------------------------
 * Generated by Animista on 2021-9-19 18:24:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */

 /*Animation*/
@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}


@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* --------------------------*/
/* RESPONSIVE UP (min-width) */
/* --------------------------*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  	.dropdown-submenu>.dropdown-menu { margin-top: 5px; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/*-----------------------------*/
/* RESPONSIVE DOWN (max-width) */
/*-----------------------------*/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.navbar-nav { margin-top: 100px!important;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	#carouselBanner .carousel-item.background { height: 35vh !important; }
	footer { font-size: 14px; }
	#header-bg img { height: 270px!important; margin-right: 10%; margin-top: 140px!important;}
	#carouselBanner .carousel-caption { bottom: 63%!important;}
	.carousel-caption p, .carousel-caption a { display: none;}
	.navbar-nav { margin-top: 30px;}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	nav .col-lg-10 { margin-top: -40px;}
	nav.border-bottom { border: none!important;}
	nav .border-left { border: none!important;}
	.navbar-nav { text-align: center; margin-top: 100px;}
	.navbar-nav > .nav-item:last-child a { display: inline-block;}
	.navbar-toggler.animate { position: relative; z-index: 100; border: 0; padding: 0; width: 35px; }
	.navbar-toggler.animate:after, .navbar-toggler.animate:before, .navbar-toggler.animate > span { content: ''; display: block; background-color: #0f1c26; height: 3px; margin: 5px 0; border-radius: .25rem; transition: all .2s ease-in-out;}
	.navbar-toggler.animate.active:before { transform: translateY(5px) rotate(135deg); }
	.navbar-toggler.animate.active:after { transform: translateY(-10px) rotate(-135deg); }
	.navbar-toggler.animate.active > span {transform: scale(0); }
	.navbar-collapse { background: #F8F9FA; position: fixed; z-index:99; top: 0; left: 0; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; width: 100%; height: 100%;}
  .navbar-collapse.collapsing { left: -75%; transition: height 0s ease; }
  .navbar-collapse.show { left: 0; transition: left 300ms ease-in-out;}
  .navbar-toggler.collapsed ~ .navbar-collapse { transition: left 500ms ease-in-out;}
	#header-top { font-size: 11px; border: 0!important;}
	#header-bg { min-height: 450px;}
	#header-bg img { height: 270px!important; margin-right: 10%; margin-top: 140px;}
	.sosyal_medya li { padding-left: 10px!important;}
	#carouselBanner .carousel-caption h1 { font-size: 25px;}
	#referans-bg { padding: 80px 0 50px 0;}
	.otomotiv-full-bg { width: 100%; height: auto; margin-left: 0; margin: 50px 0;}
	.otomotiv-baslik { font-size: 30px;}
  footer .sosyal_medya { float: none!important; justify-content: center;}
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
	#carouselBanner .carousel-caption { bottom: 13%; text-align: left; right: auto; left: 5%; width: 350px;}
}

@media (max-width: 1440px) {
	#header-bg img { height: 460px; margin-right: 5%; margin-top: 60px;}
}
