@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

html {

    overflow-x: hidden;
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;
}

html::-webkit-scrollbar {
    width: 0.3rem;
    background-color: #fff;
    z-index: 1;
}

html::-webkit-scrollbar-track {
    background-color: #e1e1e1;
}

html::-webkit-scrollbar-thumb {
    border-radius: 3rem;
    background-color: #061838;
}

html::-webkit-scrollbar-thumb:hover {
    border-radius: 3rem;
    background-color: #f07e19;
}

.bg-lacivert {
    background-color: #061838;
}


#footer a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}

#footer {
    background-image: url("../img/jcbenergy-footer-background.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

#footer #topFooterua h4 {
    font-size: 24px;
}

#kvkkBanner {
    background-image: url("../img/jcbenergy-kvkk-background.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

#header a:hover,
#footer a:hover {
    color: #d8d8d8;
}

#menu li {
    font-size: 18px;
}

/* #menufr li {
    font-size: 17px;
} */

#bannerNav .dropdown-menu .active,
#bannerNavAr .dropdown-menu .active,
#bannerNavEs .dropdown-menu .active,
#bannerNavAz .dropdown-menu .active,
#bannerNavUa .dropdown-menu .active {
    background-color: #f07e19 !important;
}

.bg-menu {
    background-color:#f5f5f5; 
    box-shadow: -1px 5px 8px -4px rgba(0, 0, 0, 0.75);
}

.btn-turuncu {
    background-color: #f07e1a;
}

.btn-turuncu:hover {
    background-color: #b75500;
}

.btn-lacivert {
    background-color: #002648;
}

.btn-lacivert:hover {
    background-color: #001324;
}

.my-6 {
    margin-top: 120px;
    margin-bottom: 90px;
}

.mb-6 {
    margin-bottom: 330px;
}

.mb-7 {
    margin-bottom: 390px;
}

.mb-8 {
    margin-bottom: 270px;
}

.turuncu {
    color: #f97e19 !important;
    font-size: calc(130%);
}

.bg-gray {
    background-color: #bdbebd;
}

#carouselMarkalarımız {
    border: 4px solid #002648;
}

#baslik a {
    text-decoration: none;
    color: #000000;
}

#urunlerimiz h2 {
    font-size: 20px;
    color: #f07e19;
}

#urunlerimiz h4 {
    font-size: calc(95%);
    margin-top: calc(2%);
}

#urunlerimiz img:hover {
    box-shadow: 5px 8px 13px 1px #000000;
    transition: all 0.8s;
}

#hizmetlerim .card:hover {
    box-shadow: 5px 8px 13px 1px #000000;
    transition: all 0.8s;
}

#hizmetlerim .card-body p {
    font-size: 12px !important;
    color: #343434;
}

#hizmetlerim .card-body h2 {
    font-size: 18px !important;
    color: #f07e19;
}

#hizmetlerim .card {
    border-radius: 3%;
}

#hizmetlerim .card-body p {
    height: 140px;
}

.kaliteBelgeleriDuvar {
    background-image: url("../img/kalite-belgeleri-duvar-1920x1080px.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#cta {
    background-image: url("../img/cta-deneme.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 210px;
    width: 100%;
    background-attachment: fixed;
}
/* #before{
    background-image: url("../img/6.png");
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
  
 
} */
#upsBanner {
    background-image: url("../img/ups-banner-1500x500px.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#galeriBanner{
    background-image: url("../img/galeri-banner-1200x628.webp");
    background-size:cover;
    background-repeat: no-repeat;
    margin-top: -8%;
    padding-bottom: 20%;
    
}
#ourQualityCertificatesBanner {
    background-image: url("../img/our-quality-certificates-banner-1500x500px.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#jngBanner {
    background-image: url("../img/gas-banner-1500x500px.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

#jncBanner {
    background-image: url("../img/jnc-series-banner-1500x700px.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

#kepenkGucKaynaklariBanner {
    background-image: url("../img/kepenk-guc-sistemleri-banner-1500-500.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#regulatorBanner {
    background-image: url("../img/regulator-banner-1500-500.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#donusturuculerBanner {
    background-image: url("../img/donusturuculer-banner-1500-500.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#tanitim h4 {
    font-size: 40px;
    color: #60b12e;
}

#footer i {
    font-size: 18px;
}

#footer h4 {
    color: #f07e1a;
    font-size: calc(150%);
}

#topFooter .bis {
    font-size: 25px;
}

.bottomFooter {
    background-color: #041531;
}

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding: 20px;
    margin-top: 20px;
}



.bg-turuncu {
    color: #f07e19;
}

.bg-turuncu:hover {
    color: #bc5d0a !important;
}

#kvkkList h2,
#kvkkListAr h2 {
    font-size: calc(160%);
    color: #f07e19;
}

#kvkkList h3,
#kvkkListAr h3 {
    font-size: calc(130%);
    color: #172945;
}

#kvkkList p,
#kvkkListAr p {
    font-size: calc(90%);
    color: #172945;
}

#kvkkBanner h1,
#alternatorBanner h1,
#upsBanner h1,
#galeriBanner h1,
#ourQualityCertificatesBanner h1,
#ourProjectsBanner h1,
#isOrtaklarimizBanner h1,
#jngBanner h1,
#jcpBanner h1,
#jcnBanner h1,
#jddBanner h1,
#jvpBanner h1,
#jydBanner h1,
#jccBanner h1,
#jcdBanner h1,
#regulatorBanner h1,
#donusturuculerBanner h1,
#dizelBanner h1,
#kaynakBanner h1,
#kaynakBenzinliBanner h1,
#kaynakDizelBanner h1,
#kepenkGucKaynaklariBanner h1,
#dizelPortatif h1,
#benzinliBanner,
#benzinliPortatif h1,
#portatifBanner h1,
#inverterPortatif h1,
#romorkBanner h1,
#donusturuculerBanner h1,
#kepenkGucKaynaklariBanner h1,
#urunlerBanner h1,
#supompasiBanner h1,
#supompasiDizelBanner h1,
#supompasiBenzinliBanner h1,
#jcfBanner h1,
#jcefBanner h1,
#forkliftsBanner h1,
#hakkimizdaBanner h1,
#blogBanner h1,
#isikKulesiBanner h1,
#urunlerBanner h1,
#iletisimBanner h1,
#topluKatalogBanner h1,
#inverterBanner h1,
#supompasiBenzinliBanner h1,
#jncBanner h1,
#dstrbtrBanner h1,
#officeBanner h1{
    font-size: calc(250%);
    margin-top: 70px;
}



#kvkkBanner small,
#ourQualityCertificatesBanner small,
#jngBanner small,
#kaynakBanner small,
#kaynakDizelBanner small,
#kaynakBenzinliBanner small,
#dizelPortatif small,
#benzinliPortatif small,
#romorkBanner small,
#donusturuculerBanner small,
#kepenkGucKaynaklariBanner small,
#urunlerBanner small,
#supompasiDizelBanner small,
#supompasiBenzinliBanner small,
#jcnBanner small,
#isOrtaklarimizBanner small,
#ourProjectsBanner small,
#regulatorBanner small,
#jcfBanner small,
#jcefBanner small,
#forkliftsBanner small, 
#galeriBanner small,
#hakkimizdaBanner small,
#blogBanner small,
#jcpBanner small,
#supompasiBenzinliBanner small,
#jncBanner small,
#dstrbtrBanner small,
#officeBanner small {
    font-size: calc(80%);
    margin-top: 70px;
}

.isOrtak {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.isOrtak:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: 1s;
}

#isOrtaklarimizBanner {
    background-image: url('../img/our-business-partners-1500x500px.webp');
    background-size: cover;
    background-repeat: no-repeat;
}

#ourProjectsBanner {
    background-image: url("../img/proj.png");
    background-size: cover;
    background-repeat: no-repeat;
}

#projects h1 {
    font-size: calc(110%);
}

/* Sosyal Medya İkon */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    width: 100%;
    margin: auto;
    padding: 0;
    font-family: "Poppins", sans-serif;
    background-color: #fff;
}

.icons {
    position: fixed;
    height: 155vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 99;
}

.icons .icon-box {
    position: relative;
    width: 100px;
    display: block;
    margin: 3px 0;
    padding: 3px 5px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    left: -50px;
    transition: all .4s;
}

.icons .icon-box span {
    font-size: 12px;
    float: left;
    font-weight: 450;
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.38);
    text-decoration: none;
    display: none;
}

.icons .icon-box i {
    font-size: 20px;
    float: right;
    padding-left: 5px;
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.38);
}

.icons .icon-box.instagram {
    background-color: #d80000;
}

.icons .icon-box.telegram {
    background-color: #445eff;
}

.icons .icon-box.twitter {
    background-color: #1DA1F2;
}

.icons .icon-box.facebook {
    background-color: #0030ce;
}

.icons .icon-box.whatsapp {
    background-color: #1DB954;
}

.icons .icon-box.youtube {
    background-color: #c20029;
}

.icons .icon-box.mail {
    background-color: #445eff;
}

.icons .icon-box.linkedin {
    background-color: #0030ce;
}

.icons .icon-box:hover {
    left: 0;
    text-decoration: none;
    
}
.icons .icon-box:hover span{
    
   display: flex;
   padding-top: 0.5rem;
    
}

#bannerNavEs .nav-item,
#bannerNavAz .nav-item {
    font-size: 95% !important;
}

#bannerNavAr .nav-item {
    font-size: 84% !important;
}

#bannerNavUa .nav-item {
    font-size: 86% !important;
}

/* Ürünler */

.bg-turuncu {
    background-color: #f7931e;
}

.card {
    border: none;
}

#progress small {
    color: #fff;
}

#ekip a {
    color: #fff;
}

.my-7 {
    margin-top: 30px;
    margin-bottom: 10px;
}

#info i {
    font-size: 85px;
    color: #f7931e;
}

#info i:hover {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.38);
}

#info strong {
    font-size: 30px;
}

.py-6 {
    margin-top: 100px;
    margin-bottom: 100px;
}

#info a {
    text-decoration: none;
    color: grey;
}

#info a:hover {
    color: #000;
}

#iletisimBanner {
    background-image: url('../img/jcb-enerji-iletisim-banner-1500x500px.webp');
    background-size: cover;
    background-repeat: no-repeat;
    
    
}
#officeBanner{
    background-image: url('../img/blge-ofis.webp');
    background-size: cover;
    background-repeat: no-repeat;
}

.py-7 {
    padding-top: 270px;
    padding-bottom: 210px;
}

#hakkimizdaBanner {
    background-image: url('../img/jcb-enerji-hakkimizda-banner-1500x500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

.hakkımdaAnimation {
    animation: fadeIn;
    animation-duration: 6s;
}

#hakkimdaContentBack {
    background-image: url('../img/about-us-content-background-1920-700px.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding-top: 20%;
    padding-bottom: 18%;
    position: relative;
    z-index: 1;
}

#hakkimdaContentBack1 {
    background-image: url('../img/about-us-content-background1-1920-700px.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top: -34%;
    margin-bottom: 5%;
    padding-bottom: 30%;
    position: relative;
    z-index: 2;
}

#dizelBanner {
    background-image: url('../img/dizel-jeneratorler-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#topluKatalogBanner {
    background-image: url('../img/toplu-katalog-banner-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}


#inverterBanner {
    background-image: url('../img/inverter-jeneratorler-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#benzinliBanner {
    background-image: url('../img/portable-jeneratorler-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jcnBanner {
    background-image: url('../img/jcn-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jcpBanner {
    background-image: url('../img/jcp-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jcdBanner {
    background-image: url('../img/jcd-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jddBanner {
    background-image: url('../img/jdd-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#romorkBanner {
    background-image: url('../img/romorklu-banner-ackground-1500x500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#cimbicmeBanner {
    background: linear-gradient(90deg, rgba(208, 247, 255, 1) 0%, rgba(194, 194, 214, 1) 50%, rgba(210, 247, 255, 1) 100%);
}

#supompasiBanner {
    background: linear-gradient(90deg, rgba(208, 247, 255, 1) 0%, rgba(194, 194, 214, 1) 50%, rgba(210, 247, 255, 1) 100%);
}

#urunlerBanner {
    background-image: url('../img/toplu-katalog-banner-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#dizelPortatif {
    background-image: url('../img/dizel-portatif-banner-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#benzinliPortatif {
    background-image: url('../img/benzinli-portatif-banner-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
 
}

#inverterPortatif {
    background-image: url('../img/inverter-portatif-banner-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#portatifBanner {
    background-image: url('../img/portatif-banner-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#blogBanner {
    background-image: url('../img/blog-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#supompasiBanner {
    background-image: url('../img/su-pompası-1500-688px.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#kaynakBanner {
    background-image: url('../img/kaynak-jeneratorleri-1500x500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#kaynakDizelBanner {
    background-image: url('../img/dizel-kaynak-jeneratr-1700x811.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#kaynakBenzinliBanner {
    background-image: url('../img/benzinli-kaynak-jeneratr-1500x900.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jccBanner {
    background-image: url('../img/jcc-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jcfBanner {
    background-image: url('../img/jcf-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#forkliftsBanner {
    background-image: url('../img/forklifts-series-background-1500x500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jcefBanner {
    background-image: url('../img/jcef-series-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jvmBanner {
    background-image: url('../img/jvm-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jvpBanner {
    background-image: url('../img/jvp-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#jydBanner {
    background-image: url('../img/jyd-serisi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#supompasiDizelBanner {
    background-image: url('../img/su-pompasi-dizel-banner-1500x700.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#supompasiBenzinliBanner {
    background-image: url('../img/su-pompasi-benzinli-banner-1500x701.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
   
}

#isikKulesiBanner {
    background-image: url('../img/isik-kulesi-banner-background-1500-500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#alternatorBanner {
    background-image: url('../img/alternatorler-1500x500px.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#kvkkBanner, 
#ourQualityCertificatesBanner, 
#jngBanner, 
#portatifBanner, 
#kaynakBanner, 
#kaynakDizelBanner, 
#kaynakBenzinliBanner, 
#dizelPortatif, 
#benzinliPortatif, 
#romorkBanner, 
#donusturuculerBanner, 
#kepenkGucKaynaklariBanner, 
#urunlerBanner,
#supompasiDizelBanner, 
#supompasiBenzinliBanner, 
#jcnBanner, 
#isOrtaklarimizBanner, 
#ourProjectsBanner, 
#regulatorBanner, 
#jcfBanner, 
#jcefBanner, 
#forkliftsBanner,
#yazılarBanner,
#urunlerBanner,
#dizelBanner,
#inverterBanner,
#benzinliBanner,
#supompasiBanner,
#iletisimBanner,
#hakkimizdaBanner,
#blogBanner,
#jcdBanner,
#jccBanner,
#jvmBanner,
#jvpBanner,
#jydBanner,
#supompasiDizelBanner,
#supompasiBenzinliBanner,
#isikKulesiBanner,
#topluKatalogBanner,
#portatifBanner,
#dizelPortatif,
#inverterPortatif,
#jddBanner,
#romorkBanner,
#kaynakBanner,
#kaynakBenzinliBanner,
#kaynakDizelBanner,
#alternatorBanner,
#jcfBanner,
#jcefBanner,
#kepenkGucKaynaklariBanner,
#donusturuculerBanner,
#upsBanner,
#jngBanner,
#regulatorBanner,
#ourQualityCertificatesBanner,
#kvkkBanner,
#jcpBanner,
#isOrtaklarimizBanner,
#ourProjectsBanner,
#forkliftsBanner,
#jncBanner,
#dstrbtrBanner,
#officeBanner,
#iletisimBanner
{
margin-top: -8%;
background-position: center center;
padding-bottom: 20%;
}

#yazılarBanner a,
#urunlerBanner a,
#dizelBanner a,
#inverterBanner a,
#benzinliBanner a,
#supompasiBanner a,
#iletisimBanner a,
#hakkimizdaBanner a,
#jcnBanner a,
#blogBanner a,
#jcdBanner a,
#jccBanner a,
#jvmBanner a,
#jvpBanner a,
#jydBanner a,
#supompasiDizelBanner a,
#supompasiBenzinliBanner a,
#isikKulesiBanner a,
#topluKatalogBanner a,
#portatifBanner a,
#dizelPortatif a,
#benzinliPortatif a,
#inverterPortatif a,
#jddBanner a,
#romorkBanner a,
#kaynakBanner a,
#kaynakBenzinliBanner a,
#kaynakDizelBanner a,
#alternatorBanner a,
#jcfBanner a,
#jcefBanner a,
#kepenkGucKaynaklariBanner a,
#donusturuculerBanner a,
#upsBanner a,
#jngBanner a,
#regulatorBanner a,
#ourQualityCertificatesBanner a,
#kvkkBanner a,
#jcpBanner a,
#isOrtaklarimizBanner a,
#ourProjectsBanner a,
#forkliftsBanner a,
#galeriBanner a,
#jcpBanner a,
#jncBanner a,
#dstrbtrBanner a,
#officeBanner a{
    color: rgb(214, 214, 214);
    text-decoration: none;
}

#jcpBanner a:hover {
    color: #000;
    text-decoration: none;
}

#yazılarBanner a:hover,
#urunlerBanner a:hover,
#dizelBanner a:hover,
#inverterBanner a:hover,
#benzinliBanner a:hover,
#supompasiBanner a:hover,
#blogBanner a:hover,
#jvmBanner a:hover,
#supompasiDizelBanner a:hover,
#supompasiBenzinliBanner a:hover,
#isikKulesiBanner a:hover,
#topluKatalogBanner a:hover,
#portatifBanner a:hover,
#dizelPortatif a:hover,
#benzinliPortatif a:hover,
#inverterPortatif a:hover,
#romorkBanner a:hover,
#kaynakBanner a:hover,
#kaynakBenzinliBanner a:hover,
#kaynakDizelBanner a:hover,
#alternatorBanner a:hover,
#jcfBanner a:hover,
#ourQualityCertificatesBanner a:hover {
    color: #252525;
}

#iletisimBanner a:hover,
#hakkimizdaBanner a:hover,
#upsBanner a:hover,
#regulatorBanner a:hover,
#kvkkBanner a:hover,
#jccBanner a:hover,
#jydBanner a:hover,
#jvpBanner a:hover,
#jddBanner a:hover,
#jcnBanner a:hover,
#jcpBanner a:hover,
#jcdBanner a:hover,
#isOrtaklarimizBanner a:hover,
#ourProjectsBanner a:hover,
#jngBanner a:hover,
#jcefBanner a:hover,
#forkliftsBanner a:hover,
#jncBanner a:hover,
#dstrbtrBanner a:hover,
#officeBanner a:hover {
    color: white;
    text-decoration: none;
}

#dizelList a,
#benzinliList a,
#inverterList a,
#supompasiList a,
#cimbicmeMakinasi a {
    text-decoration: none;
    color: #f7931e;
}

#dizelList a:hover,
#benzinliList a:hover,
#inverterList a:hover,
#supompasiList a:hover,
#cimbicmeMakinasi a:hover {
    color: #d97400;
}

#dizelList h2,
#benzinliList h2,
#inverterList h2,
#supompasiList h2,
#cimbicmeMakinasi h2 {
    font-size: 130% !important;
}

#dizelList .card:hover,
#benzinliList .card:hover,
#inverterList .card:hover,
#supompasiList .card:hover,
#cimbicmeMakinasi .card:hover {
    box-shadow: -1px 2px 10px 0px rgba(0, 0, 0, 0.54);
    transition: all 0.8s;
}

#yazılar a,
#dizelBread a,
#benzinliBread a,
#inverterBread a,
#benzinliBread a,
#supompasiBread a,
#blog1Bread a,
#blog1Icerik a,
#blog2Bread a,
#blog2Icerik a,
#blog2BreadAr a,
#blog3Bread a,
#blog3Icerik a,
#blog4Bread a,
#blog4Icerik a,
#inverterBreadAr a,
#blog1BreadAr a,
#blog4BreadAr a,
#blog3BreadAr a {
    text-decoration: none;
    color: gray;
}

#dizelBread a:hover,
#inverterBread a:hover,
#benzinliBread a:hover,
#yazılar a:hover,
#supompasiBread a:hover,
#dizelIcerik a:hover,
#benzinliIcerik a:hover,
#inverterIcerik a:hover,
#supompasiIcerik a:hover,
#blog1Bread a:hover,
#blog1Icerik a:hover,
#blog2Bread a:hover,
#blog2BreadAr a:hover,
#blog2Icerik a:hover,
#blog3Bread a:hover,
#blog3BreadAr a:hover,
#blog3Icerik a:hover,
#blog4Bread a:hover,
#blog4BreadAr a:hover,
#blog4Icerik a:hover,
#inverterBreadAr a:hover,
#blog1BreadAr a:hover,
#projects a:hover {
    color: black;
}

#dizelIcerik a,
#benzinliIcerik a,
#inverterIcerik a,
#supompasiIcerik a,
#jcnIcerik a,
#blog3Icerik a,
#projects a,
#blog4Icerik a {
    font-size: 14px;
    text-decoration: none;
    color: gray;
}

#jcnIcerik table td {
    font-size: 80% !important;
}

#jcnIcerik .row .col-md-3 a:hover,
#blog3Icerik .row .col-md-3 a:hover,
#blog4Icerik .row .col-md-3 a:hover {
    color: #000 !important;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8);
}

#jcnIcerik .row .col-md-3 a, 
#blog4Icerik .row .col-md-3 a {
    font-size: calc(80%) !important;
}

#jcnIcerik h1 {
    font-size: calc(220%) !important;
}

#yazılar .row .col-md-3 a {
    font-size: calc(80%) !important;
}

#yazılar .row .col-md-9 h2 {
    font-size: calc(140%) !important;
}

#yazılar .row .col-md-9 p {
    font-size: calc(85%) !important;
}

.ıpucu {
    color: #feaa4a !important;
}

.ıpucu:hover {
    color: #ff8b07 !important;
    box-shadow: -1px 1px 6px 0px rgba(0, 0, 0, 0.41);

}

#dizelIcerik table,
#benzinliIcerik table,
#inverterIcerik table,
#supompasiIcerik table {
    border-collapse: collapse;
    width: 90%;
    font-size: 12px;
}

#dizelIcerik table:hover,
#benzinliIcerik table:hover,
#inverterIcerik table:hover,
#supompasiIcerik table:hover {
    box-shadow: -1px 1px 6px 0px rgba(0, 0, 0, 0.41);
}

#dizelIcerik table th,
td,
#benzinliIcerik table th,
td,
#inverterIcerik table th,
td,
#supompasiIcerik table th,
td {
    border: 1px solid #c5c5c5;
    text-align: center;
    padding: 5px;
}

#dizelIcerik th,
#benzinliIcerik th,
#inverterIcerik th,
#supompasiIcerik th {
    background-color: #d3d3d3;
}

#yazılarBanner {
    background: linear-gradient(90deg, rgba(208, 247, 255, 1) 0%, rgba(194, 194, 214, 1) 50%, rgba(210, 247, 255, 1) 100%);
}

#yazılar h2 {
    font-size: 28px;
}

#yazılar h2:hover {
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
}

.ayrıntı img:hover {
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.86);
}

#urunlerTablo a {
    text-decoration: none;
    color: #a0a0a0;
}

#urunlerTablo h2,
#topluKatalog h2 {
    font-size: 140%;
    color: #000;
}

#urunlerTablo h2:hover {
    color: rgb(73, 73, 73);
}

.list {
    height: 65px;
    height: 109px;
    border: 1px solid #a0a0a0;
    border-radius: 4px;
}

.list ul {
    list-style-type: none;
}

.list li {
    padding-left: 5px;
    padding: 5px;
    border-bottom: 1px solid #e9e9e9;
    color: rgb(158, 158, 158);
}

.list li:hover {
    background-color: #f7931e;
    color: rgb(255, 255, 255);
}

#topluKatalog a {
    text-decoration: none;
    color: #a0a0a0;
}

#topluKatalog h2 {
    color: #000;
}

#topluKatalog h2:hover {
    color: rgb(73, 73, 73);
}

#kvkkList ul,
#kvkkListAr ul {
    list-style: none;
}

#kvkkList li,
#kvkkListAr li {
    position: relative;
    margin-left: 1rem;
    font-size: 14.4px;
}

#kvkkList li:before,
#kvkkListAr li:before {
    content: "•";
    position: absolute;
    left: -1em;
    color: #f07e1a;
}

#kvkkListAr li {
    text-align: right !important;
}

#ourProjects img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
    transition: 0.5s;
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

#ourProjects img {
    opacity: 0.6;
    filter: alpha(opacity=50);
}

#ourProjects a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    padding-top: 10px;
}

#ourProjects a:hover {
    color: rgb(255, 0, 0);
}

#ourProjects {
    padding-top: calc(5%);
    padding-bottom: calc(5%);
}

#urunlerimiz .container {
    text-align: center !important;
}

#urunlerimiz .foto {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

#urunlerimiz .foto:hover .overlay {
    top: 60%;
}

#urunlerimiz .foto img:hover {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

#urunlerimiz .overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(5, 20, 50, 0.9);
    color: #fff;
    transition: top 0.5s;
}

#urunlerimiz .overlay {
    top: calc(90%);
}

#urunlerimiz .overlay p {
    font-size: calc(70%);
    margin-top: calc(6%);
}

#urunlerimiz a {
    text-decoration: none;
    color: #f07e19;
}

#urunlerimiz a:hover {
    text-decoration: none;
    color: #d76400;
}
.navbar-toggler{
    color: #fff;
}
/* header start */

.header {
    background-color:transparent;
    display: relative;
    align-items: center;
    padding: 0 6%;
    box-shadow: 0px 0px 17px -2px rgb(0, 0, 0, 0.75);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(5px);
    font-size: 17px;
  
  }
  .header nav{
    margin: 0 -1.5rem !important;
  }
  .header .dropdown{
      color: #fff;
      text-align: right;
  }
  
  
  
  .header .navbar  a{
      margin: 0 1rem;
  }
  .header .navbar  .dropdown-menu a{
      margin: 0;
      border-bottom: 0.1rem ;
      color: #000;
      filter:none !important;
      
  }
  
  
  .header .navbar .nav-item, .nav-link{
      color: #fff !important;
      font-size: 17px;
   
  }
  .header .col-md-6 span{
     color: #fff;
     font-size: 0.9rem;
    
  }
  .header .navbar .dropdown-menu a .active,
  .header .navbar .dropdown-menu a:hover{
  color: #f07e1a;
  background-color: transparent;
  border: none;   
 
  
  }
  
  .header .navbar .active,
  .header .navbar  a:hover{
  border-color:#f07e1a;
  top: 0%;
  }
  .header button, .dropdown{
      cursor: pointer; 
      border-color: #f07e1a;
  }
  #fotoGaleri{
    position: static;
    z-index: 1000;  
}
#fotoGaleri #fancy img:hover{
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
     transform: scale(1.05); 
     transition: 0.5s;
}

#fotoGaleri #fancy{
    text-align: center;
    padding: 0 7%;
    
}
#fotoGaleri #fancy img{
    padding-top: 2px;
    padding-bottom: 2px;
}
#navbarNavDropdown a,span{
    filter: drop-shadow(1px -1px 1px rgb(17, 16, 16));
}
nav span{
    filter: drop-shadow(1px -1px 1px rgb(17, 16, 16));
}
nav .col-md-6 {
    text-shadow: (1px -1px 1px  rgb(17, 16, 16));
}
nav .col-md-12 img{
    filter: drop-shadow(1px -1px 1px rgb(17, 16, 16));
}

.affix {

    background-color: #172945;
    transition: 0.9s;
   
}
 .header .dropdown-menu .li a{
    font-size: 10px !important;
   
}
#isOrtaklarimiz #hyundai img{
    text-align: center;
    padding-top: 10px;
    padding-left: 30px;

    height: 75px;

}
#urunBg{
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(23,41,69,1) 52%, rgba(255,255,255,1) 100%);
   margin-top: -7%;
   width: 1531px;
   height: 107px;
}
.dropdown-menu #itemAr{
    text-align: right;
}
#info .icon a{
    color: #000;
}

#kapa{
    background-image: url('../img/background-dstrbtrler-1.webp');
    background-size: cover;
    background-position: top;
    }
#seffaf{
    margin: auto;
    max-width: 85vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
 #kapa #seffaf .card{
    margin-top: 5rem;
    margin-bottom: 5rem;
    width: 100%;
    border-radius: 10px;
    background-color: transparent;
    backdrop-filter: blur(20px) !important;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
    border: solid 2px rgba(255, 255, 255, 0.13);
    color: #fff;
    padding: 1.3rem;
}
#kapa #seffaf .card a{
    color: #fff;
}
#kapa .card svg{
    width: 24px;
    height: 24px;
    fill: #fff;
}


#kapa .card:hover{
    filter: drop-shadow(1px 3px 4px rgb(107, 173, 211));
    cursor: pointer;
}
#kapa .card svg:hover{
    fill: #f07e1a;
}
#seffaf .card i,a,p{
    text-decoration: none !important;
    /* color: #fff !important; */
}
#seffaf .card  a:hover{
    color: #f07e1a !important;
}
#seffaf .card p{
    margin-top: 1rem;
    line-height: 2rem;
    letter-spacing: 2px;  
    text-shadow: 5px 5px 10px rgba(0,0,0,0.8);  
}
#seffaf .card h3{
    font-size: 2rem;
    margin-top: 1rem;
    line-height: 2.3rem;
    letter-spacing: 2px;  
    text-shadow: 5px 5px 10px rgba(0,0,0,0.8);  
}
/* seffaff */
#seffaff #buton{
    margin: auto;
    max-width: 85vw;
    display: flex;
   
    
}
 #kapa #seffaff .card{
    margin-top: 5rem;
    margin-bottom: 5rem;
    width: 100%;
    border-radius: 10px;
    background-color: transparent;
    backdrop-filter: blur(20px) !important;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
    border: solid 2px rgba(255, 255, 255, 0.13);
    color: #fff;
    padding: 1.3rem;
    margin-left: 2rem;
    margin-right: 2rem;
}
#kapa #seffaff .card a{
    color: #fff;
}
#seffaff .card i,a,p{
    text-decoration: none !important;
    /* color: #fff !important; */
}
#seffaff .card  a:hover{
    color: #f07e1a !important;
}
#seffaff .card p{
    margin-top: 1rem;
    line-height: 2rem;
    letter-spacing: 2px;  
    text-shadow: 5px 5px 10px rgba(0,0,0,0.8);  
}
#seffaff .card h3{
    font-size: 2rem;
    margin-top: 1rem;
    line-height: 2.3rem;
    letter-spacing: 2px;  
    text-shadow: 5px 5px 10px rgba(0,0,0,0.8);  
}

#dstrbtrBanner {
    background-image: url('../img/background-dstrbtrler3.webp');
    background-size: cover;
    background-repeat: no-repeat;
}
#maps{
   
    z-index: 0;
}
#map .description {
    max-width: 600px;
    margin: 0 auto;
    color: rgba(229, 229, 229, 0.7);
  }

#map div, img, footer {
    position: relative;
    box-sizing: border-box;
}

#map a {
    -webkit-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #dff3fd;
  }
 #map a:visited {
    color: #dff3fd;
  } 
#map li.active a, a:hover, a:active {
    color: #e5e5e5;
  }
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .centered-y {
    position: absolute;
    width: 100%;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  .distribution-map {
    position: relative;
    width: 100%;
    /* padding: 20px; */
    box-sizing: border-box;
    margin: 0 auto;
  }
  .distribution-map > img {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
  }
  .distribution-map .map-point {
    cursor: pointer;
    outline: none;
    z-index: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
    -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
            transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    background: rgba(26, 26, 26, 0.85);
    border: 5px solid #f07e1a;
  }
  .distribution-map .map-point .content {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
    width: 100%;
    height: 100%;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    overflow: overlay;
  }
  .distribution-map .map-point:active, .distribution-map .map-point:focus {
    margin: 0;
    padding: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    width: 300px;
    height: 220px;
    color: #ffffff;
    z-index: 1;
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
  }
  .distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
    -webkit-transition-delay: 0.25s, 0s, 0s;
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
            transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
    overflow: hidden;
  }
  .distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
    color: #fc2a88;
  }
#office {
  position: relative;
}
#office .list-group{
  border-style: none;
}
#office .list-group-item-action{
  color: #f07e1a;
  border: none;
}
#office .list-group-item-action:hover{
  background-color: #172945;
  color: #fff;
}
#office .list-group-item-action.active{
  background-color: #ffffff;
  color: #172945;
}
#nav-tabContent .tab-pane a{
  text-decoration: none;
  color: #212529;
}
#nav-tabContent .tab-pane a:hover{
  color: #f07e1a;
}
#office .harita{
  padding-right: 3rem;
}
#maps{
    height: 55vh;
}
.turkey{
    height: 9.9vh;
}
.form-container {
            background: white;
           
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
            border-radius: 5px;
            width: 100%;
        }
        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 10px;
        }
        .form-group {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
       .form-group label {
          
            font-weight: bold;
        }
       .form-group input, textarea {
         
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
       .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }
       .form-group button:hover {
            background-color: #218838;
        }
        .form-group{
            color: #ff0000;
        }

    #success{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
            text-align: center;
            animation: fadeOut 3s forwards;
            background: #172945;

    }
     #basarili {
            
            padding: 20px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
            border-radius: 5px;
        }

        #basarili h2 {
            color: #28a745;
            font-size: 24px;
            margin-bottom: 10px;
        }

        #basarili p {
            font-size: 16px;
            color: #ff0000;
        }

        @keyframes fadeOut {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }
   
      


@media (max-width: 992px){
    #seffaff #buton{
        margin: auto;
       
        display:inline;     
    }
   
    #kapa .card svg{
        width: 14px;
        height: 14px;
        fill: #fff;
    }
#kapa #seffaff .card{
margin-top: 0.5rem;
margin-bottom: 1rem;
width: 80%;
border-radius: 10px;
background-color: transparent;
backdrop-filter: blur(20px) !important;
box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
border: solid 2px rgba(255, 255, 255, 0.13);
color: #fff;
padding: 1.3rem;
        /* margin-left: 2rem;
        margin-right: 2rem; */
}
#kapa #seffaf .card{
    margin-top: 1.3rem;
    margin-bottom: 1.3rem;
}

#seffaf .card h3{
    font-size:1rem !important;
}
#seffaff h3{
    font-size:1.5rem;
    margin-top: 1rem;
}
#map .description {
    max-width: 600px;
     margin: 0 auto;
    color: rgba(229, 229, 229, 0.7);
    }
  
  #map div, img, footer {
      position: relative;
      box-sizing: border-box;
  }
  
  #map a {
      -webkit-transition: color 0.25s ease-in-out;
      transition: color 0.25s ease-in-out;
      font-family: "Roboto Condensed", Helvetica, sans-serif;
      text-transform: uppercase;
      text-decoration: none;
      color: #dff3fd;
    }
   #map a:visited {
      color: #dff3fd;
    } 
  #map li.active a, a:hover, a:active {
      color: #e5e5e5;
    }

    #maps{
        height: 35vh;
    }
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    
    .centered-y {
      position: absolute;
      width: 100%;
      top: 50%;
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      
    }
    .centered-y h3,p{
      font-size: 10px;
    }
    .distribution-map {
      position: relative;
      width: 100%;
      /* padding: 20px; */
      box-sizing: border-box;
      margin: 0 auto;
    }
    .distribution-map > img {
      width: 100%;
      position: relative;
      margin: 0;
      padding: 0;
    }
    .distribution-map .map-point {
      cursor: pointer;
      outline: none;
      z-index: 0;
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8;
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
      -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
      -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
      -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
      -webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
              transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
      background: rgba(26, 26, 26, 0.85);
      border: 5px solid #f07e1a;
    }
    .distribution-map .map-point .content {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -webkit-transition: opacity 0.25s ease-in-out;
      transition: opacity 0.25s ease-in-out;
      width: 100%;
      height: 100%;
      left: 50%;
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      overflow: overlay;
    }
    .distribution-map .map-point:active, .distribution-map .map-point:focus {
      margin: 0;
      padding: 0;
      filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      width: 150px;
      height: 120px;
      color: #ffffff;
      z-index: 1;
      -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
      transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
    }
    .distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
      filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1;
      -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
      -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
      -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
      -webkit-transition-delay: 0.25s, 0s, 0s;
      -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
              transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
      overflow: hidden;
    }
    .distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
      color: #fc2a88;
    }
    
  }
/* fancy deki imgler için  */
@media (min-width: 1246px) and (max-width: 1420px){
    #fotoGaleri #fancy{
        text-align: center;
        padding: 0 1%;
        
    }
}
@media (min-width: 991px) and (max-width: 1245px){
    #fotoGaleri #fancy{
        text-align: center;
        padding: 0 20%;
        
    }
}
@media (min-width: 768px) and (max-width: 990px){
    #fotoGaleri #fancy{
        text-align: center;
        padding: 0 10%;
        
    }
}
/* fancydeki img ler için bitiş */
@media (min-width: 991px) and (max-width: 1410px){
    
    .navbar-brand {
        width: 250px;
        padding:0%;
        margin: 0%;
        text-align: left;
    }
    .header .navbar  a{
        margin: 0 16px;
    }
   
.header{
    padding: 0 1%;
}
.header nav{
    font-size: 16px;
}


.header .nav-link{
    font-size: 80%;
    margin: 0;
    }
    .dropdown-item{
        font-size: 80%;
    }
.dropdown-menu{
    text-align: left;
}
.nav-link{
    text-align: left;
}
#topFooterua, #topFooter{
    padding-left: 0 !important;
    padding-right: 0rem !important;
}
#kvkkBanner, 
#ourQualityCertificatesBanner, 
#jngBanner, 
#portatifBanner, 
#kaynakBanner, 
#kaynakDizelBanner, 
#kaynakBenzinliBanner, 
#dizelPortatif, 
#benzinliPortatif, 
#romorkBanner, 
#donusturuculerBanner, 
#kepenkGucKaynaklariBanner, 
#urunlerBanner,
#supompasiDizelBanner, 
#supompasiBenzinliBanner, 
#jcnBanner, 
#isOrtaklarimizBanner, 
#ourProjectsBanner, 
#regulatorBanner, 
#jcfBanner, 
#jcefBanner, 
#forkliftsBanner,
#yazılarBanner,
#urunlerBanner,
#dizelBanner,
#inverterBanner,
#benzinliBanner,
#supompasiBanner,
#iletisimBanner,
#hakkimizdaBanner,
#blogBanner,
#jcdBanner,
#jccBanner,
#jvmBanner,
#jvpBanner,
#jydBanner,
#supompasiDizelBanner,
#supompasiBenzinliBanner,
#isikKulesiBanner,
#topluKatalogBanner,
#portatifBanner,
#dizelPortatif,
#inverterPortatif,
#jddBanner,
#romorkBanner,
#kaynakBanner,
#kaynakBenzinliBanner,
#kaynakDizelBanner,
#alternatorBanner,
#jcfBanner,
#jcefBanner,
#kepenkGucKaynaklariBanner,
#donusturuculerBanner,
#upsBanner,
#jngBanner,
#regulatorBanner,
#ourQualityCertificatesBanner,
#kvkkBanner,
#jcpBanner,
#isOrtaklarimizBanner,
#ourProjectsBanner,
#forkliftsBanner,
#galeriBanner,
#dstrbtrBanner,
#officeBanner{
    margin-top: -17%;
}
#urunBg{
    display: none;
}
}
@media (min-width: 991px) and (max-width: 1257px){
    .navbar-brand {
        width: 280px;
        padding:0%;
        margin: 0%;
        text-align: left;
    }
    .header nav{
        font-size: 16px;
    }
     .header{
        padding: 0 1%;
     }
     .header .navbar  a{
        margin: 0 10px;
    }
    #urunBg{
        display: none;
    }
 
}

/* Mobil Css */
@media (max-width: 992px){

.header {
    background-color:#172945 !important;
    position:sticky !important;
    align-items: center;
    box-shadow: 0px 0px 17px -2px rgb(0, 0, 0, 0.75);
    top: 0;
    padding:3 1%;
    
}  


.header .nav-link{
font-size: 80%;
margin: 0;
}
.dropdown-item{
    font-size: 80%;
}
.dropdown-menu{
    text-align: left;
}
.nav-link{
    text-align: left;
}
.header .dropdown{
    color: #fff;
    text-align: right;
}
.header .col-md-6{
    padding: 0%;
    margin: 0%;
    
}
.header .col-md-6 .dropdown{
    text-align: right !important;
    margin: 0%;
    padding: 0%;
}
#kvkkBanner, 
#ourQualityCertificatesBanner, 
#jngBanner, 
#portatifBanner, 
#kaynakBanner, 
#kaynakDizelBanner, 
#kaynakBenzinliBanner, 
#dizelPortatif, 
#benzinliPortatif, 
#romorkBanner, 
#donusturuculerBanner, 
#kepenkGucKaynaklariBanner, 
#urunlerBanner,
#supompasiDizelBanner, 
#supompasiBenzinliBanner, 
#jcnBanner, 
#isOrtaklarimizBanner, 
#ourProjectsBanner, 
#regulatorBanner, 
#jcfBanner, 
#jcefBanner, 
#forkliftsBanner,
#yazılarBanner,
#urunlerBanner,
#dizelBanner,
#inverterBanner,
#benzinliBanner,
#supompasiBanner,
#iletisimBanner,
#hakkimizdaBanner,
#blogBanner,
#jcdBanner,
#jccBanner,
#jvmBanner,
#jvpBanner,
#jydBanner,
#supompasiDizelBanner,
#supompasiBenzinliBanner,
#isikKulesiBanner,
#topluKatalogBanner,
#portatifBanner,
#dizelPortatif,
#inverterPortatif,
#jddBanner,
#romorkBanner,
#kaynakBanner,
#kaynakBenzinliBanner,
#kaynakDizelBanner,
#alternatorBanner,
#jcfBanner,
#jcefBanner,
#kepenkGucKaynaklariBanner,
#donusturuculerBanner,
#upsBanner,
#jngBanner,
#regulatorBanner,
#ourQualityCertificatesBanner,
#kvkkBanner,
#jcpBanner,
#isOrtaklarimizBanner,
#ourProjectsBanner,
#forkliftsBanner,
#galeriBanner ,
#supompasiBenzinliBanner,
#dstrbtrBanner,
#officeBanner{
    margin-top: 0%;
}
.navbar-brand {
    width: 280px;
    padding:0%;
    margin: 0%;
    text-align: left;
}
.header .col-md-6 .dropdown{
    text-align: center;
}
#urunBg{
    display: none;
}
#footer .qr{
    height: auto;
}

}

@media (max-width:768px) {
    .navbar-toggler-icon{
        color: #fff;
    }
    .header {
        background-color:#172945 !important;
       position:sticky !important;
        align-items: center;
        box-shadow: 0px 0px 17px -2px rgb(0, 0, 0, 0.75);
        top: 0;
    }
    .header .Ru{
        margin: 0 1 !important;
    }
    .header .dropdown{
        color: #fff;
    }
    .header .col-md-6 .dropdown{
        text-align: center !important;
        margin: 0%;
        padding: 0%;
    }
    .header .col-md-6{
        padding: 0%;
        margin: 0%;
        text-align: center;
    }
    .header .navbar  a{
        margin: 0 1rem;
    }
    .header .navbar  .dropdown-menu a{
        margin: 0;
        border-bottom: 0.1rem ;
        color: #000;  
      }
    .dropdown-menu{
        text-align: left;
    }
   
    .nav-link{
        text-align: left;
    }
    .header .navbar .nav-item, .nav-link{
          color: #fff !important;
    }
    .header .col-md-6 span{
         color: #fff;
    }
    .header .navbar .dropdown-menu a .active,
    .header .navbar .dropdown-menu a:hover{
      color: #f07e1a;
      background-color: transparent;
      border: none;   
      
      }
      
      .header .navbar .active,
      .header .navbar  a:hover{
      border-color:#f07e1a;
      top: 0%;

      }
    
      .header button, .dropdown{
          cursor: pointer;
          border-color: #f07e1a;
      }
      #carouselMarkalarımız #madeIn img{
        width: 75%;
       
      }
      #topFooterua,#topFooter{
        padding-left: 0rem;
        padding-right: 0rem;
    }
      #fotoGaleri #fancy img{
        padding-top: 2px;
        padding-bottom: 2px;
    }
      .navbar-toggler{
        top: -10px;
      }
      .carousel1{
        height: 75px;
        width: 75%;
        overflow: hidden;
        position: relative;
        top: -50px;
    }
    #footer .qr{
        height: auto;
    }
    .affix {
    
        background-color: #172945;
       
    }
    #isOrtaklarimiz #hyundai img{
        text-align: center;
        padding-top:0px;
        margin: auto;
        padding: auto;
        height: auto;
        padding-left: 35px;
    }
    
    #fotoGaleri h2{
        font-size: 33px !important;
    }
    

    #isOrtaklarimiz img{
        text-align: center;
        padding-top: 4px;
       margin-left:20px;
    }
    #urunBg{
        display: none;
    }
    
    #kvkkBanner h1,
    #ourQualityCertificatesBanner h1,
    #jngBanner h1,
    #portatifBanner h1,
    #kaynakBanner h1,
    #kaynakDizelBanner h1,
    #kaynakBenzinliBanner h1,
    #dizelPortatif h1,
    #benzinliPortatif h1,
    #romorkBanner h1,
    #donusturuculerBanner h1,
    #kepenkGucKaynaklariBanner h1,
    #urunlerBanner h1,
    #supompasiDizelBanner h1,
    #supompasiBenzinliBanner h1,
    #jcnBanner h1,
    #isOrtaklarimizBanner h1,
    #ourProjectsBanner h1,
    #regulatorBanner h1,
    #jcfBanner h1,
    #jcefBanner h1,
    #forkliftsBanner h1, 
    #galeriBanner h1,
    #hakkimizdaBanner h1,
    #blogBanner h1,
    #jcpBanner h1,
    #inverterPortatif h1,
    #dstrbtrBanner h1,
    #officeBanner h1,
    #iletisimBanner h1{
        font-size: calc(150%) !important;
        margin-top: 40px !important;
      
    }
    
    
    
    #kvkkBanner small,
    #ourQualityCertificatesBanner small,
    #jngBanner small,
    #kaynakBanner small,
    #kaynakDizelBanner small,
    #kaynakBenzinliBanner small,
    #dizelPortatif small,
    #benzinliPortatif small,
    #romorkBanner small,
    #donusturuculerBanner small,
    #kepenkGucKaynaklariBanner small,
    #urunlerBanner small,
    #supompasiDizelBanner small,
    #supompasiBenzinliBanner small,
    #jcnBanner small,
    #isOrtaklarimizBanner small,
    #ourProjectsBanner small,
    #regulatorBanner small,
    #jcfBanner small,
    #jcefBanner small,
    #forkliftsBanner small, 
    #galeriBanner small,
    #hakkimizdaBanner small,
    #blogBanner small,
    #jcpBanner small,
    #dstrbtrBanner small,
    #officeBanner small,
    #iletisimBanner small{
        font-size: calc(80%) !important;
        margin-top: 40px !important;
    }

    #carouselExampleCaptions img {
        width: 210% !important;
        height: 100% !important;
    }

    #footer {
        text-align: center !important;
    }

    #footer .col-md-5 .row .col-md-12 {
        margin-left: calc(-6%) !important;
    }

    #footer .col-md-2,
    #footer .col-md-6,
    #footer .col-md-3 {
        width: calc(130%) !important;
        text-align: left;
        margin-left: calc(20%);
        margin-right: calc(22%);
    }

    #footer .col-md-5 .row h4 {
        margin-left: calc(6%);
    }

    #footer #topFooter .social,
    #footer #topFooterua .social {
        margin-bottom: calc(10%) !important;
    }

    #footer .col-md-5 .row .col-md-6 img {
        font-size: 20% !important;
    }

    .py-10 {
        padding-top: 10px;
        padding-bottom: 3px;
    }

    .my-8 {
        margin-top: 35px !important;
        margin-bottom: 35px !important;
    }

    .py-8 {
        padding-bottom: 20px !important;
        padding-top: 20px !important;
    }

    #tanitim h4 {
        font-size: 38px;
    }

    #tanitim p {
        font-size: 14px !important;
    }

    .icons .icon-box {
        margin: 3px 0 !important;
        padding: 9px 10px !important;
        left: -5px !important;
        width: 40px !important;
    }

    .icons {
        height: 120vh;
    }

    .icons .icon-box i {
        font-size: 15px !important;
    }

    #ekip h2 {
        font-size: calc(190%) !important;
    }

    .mt-6 {
        margin-top: 55px !important;
    }

    #ekip {
        text-align: center !important;
    }

    .mb-9 {
        margin-bottom: 15px !important;
    }

    #hakkimdaContent p {
        font-size: calc(90%) !important;
    }

    #hakkimdaContent h2 {
        font-size: calc(138%) !important;
    }

    #hakkimdaContentBack {
        padding-top: 50%;
        padding-bottom: 18%;
    }

    #hakkimdaContentBack1 {
        margin-top: -65%;
        margin-bottom: 5%;
        padding-bottom: 70%;
        position: relative;
        z-index: 2;
        background-size: calc(130%);
    }

    .py-9 {
        padding-top: 80px !important;
        padding-bottom: 110px !important;
    }

    #hakkimizdaBanner h1,
    #iletisimBanner h1,
    #dstrbtrBanner h1,
    #officeBanner h1{
        font-size: 40px;
    }

    .mx-6 {
        margin-left: 15px;
        margin-right: 15px;
    }

    #header .col-md-6 span{
        text-align: center !important;
    }

    #benzinliBread,
    #inverterBread,
    #blog1Bread,
    #blog2Bread,
    #blog2BreadAr,
    #blog3Bread,
    #blog3BreadAr,
    #blog4Bread,
    #blog4BreadAr {
        font-size: 10px;
    }

    #inverterBreadAr,
    #blog1BreadAr,
    #blog4BreadAr,
    #blog3BreadAr,
    #blog2BreadAr {
        font-size: 10px;
        text-align: right;
    }

    #benzinliIcerik h1,
    #inverterIcerik h1,
    #jcnIcerik h1 {
        font-size: calc(90%) !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    #blog1Icerik h1,
    #blog2Icerik h1,
    #blog3Icerik h1,
    #blog4Icerik h1{
        font-size: calc(130%);
    }

    #blog1Icerik,
    #blog2Icerik,
    #blog3Icerik,
    #blog4Icerik {
        text-align: center;
        margin-left: calc(5%);
        margin-right: calc(4%);
    }

    #inverterIcerik table,
    #benzinliIcerik table {
        width: calc(100%) !important;
        text-align: center !important;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .my-9 {
        margin-top: calc(10%) !important;
        margin-bottom: calc(10%) !important;
    }

    #jcnIcerik .col-md-12 {
        text-align: center !important;
    }

    #dizelBanner h1,
    #benzinliBanner h1,
    #inverterBanner h1,
    #supompasiBanner h1,
    #topluKatalogBanner h1,
    #forkliftsBanner h1  {
        font-size: calc(200%);
    }

    #dizelBanner,
    #benzinliBanner,
    #inverterBanner,
    #supompasiBanner,
    #topluKatalogBanner {
        font-size: calc(90%);
    }

    #yazılar {
        text-align: center !important;
    }

    #yazılar h2 {
        font-size: calc(110%);
    }

    #yazılar p {
        margin-left: calc(8%);
        margin-right: calc(8%);
    }

    

    #jcnIcerik .row table {
        margin-left: auto;
        margin-right: auto;
    }

    #jcnIcerik .row table td {
        font-size: 10px;
    }

    #jcnIcerik table td {
        font-size: 40% !important;
    }

    #isOrtaklarimiz img {
        width: calc(90%) !important;
        text-align: center;
    }

    #isOrtaklarimiz .col-md-4 {
        margin-bottom: calc(10%);
    }

    #ourProjects a {
        font-size: 12px;
        color: rgb(255, 0, 0);
    }

    #ourProjects .col-md-4 {
        padding-top: calc(10%);
        padding-bottom: calc(15%);
        padding-left: calc(10%);
        padding-right: calc(10%);
    }

    .greyback {
        background-color: rgb(246, 246, 246);
    }

    #ourProjects img {
        opacity: 10;
        filter: alpha(opacity=100);
    }

    #jcefBanner {
        background-image: url('../img/jcef-series-mobile-background-500x350px.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
       
    }

    #forkliftsBanner {
        background-image: url('../img/forklifts-series-mobile-background-400x350px.webp');
        background-repeat: no-repeat;
        background-size: cover;
      
    }
    .navbar-brand {
        width: 250px;
        padding:0%;
        margin: 0%;
        text-align: left;
    }
    #urunBg{
        display: none;
    }

}
 
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #172945;
    z-index: 9999;
}

.progressLoad {
    background: rgba(231, 230, 230, 0.1);
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 40px;
    width: 500px;
}

.progressLoad .progress-value {
    animation: load 3s normal forwards;
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 30px;
    width: 0;
}

@keyframes load {
    0% {
        width: 0;
    }

    100% {
        width: 68%;
    }
}


/* Menü */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.sliderdeneme{
    margin: 0;
    background-color: #000;
    color: #eee;
    font-family: Poppins;
    font-size: 12px;
    z-index: 1000;
}
.sliderdeneme a{
    text-decoration: none;
}

#menu{
    width: 100%;
    max-width: 100%;
    margin: auto;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 200;
}


.carousel1{
    height: 100vh;
    margin-top: -100px !important;
    width: 100vw;
    overflow: hidden;
    position: relative;
}
.carousel1 .list .item{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0 0 0 0;
}
.carousel1 .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.desktop-image{
    display: block;
}

.carousel1 .list .item .content{
    position: absolute;
    top: 20%;
    width: 1140px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 5px 10px #0004;
}
.carousel1 .list .item .author{
    font-weight: bold;
    letter-spacing: 10px;
    
}
.carousel1 .list .item .title,
.carousel1 .list .item .topic{
    font-size: 5em;
    font-weight: bold;
    line-height: 1.3em;
 
}
.carousel1 .list .item .topic {
    color: #f07E19;
    text-shadow: 1px 0px 3px #F5F5F5;
}
.carousel1 .list .item .buttons{
    display: grid;
    grid-template-columns: repeat(2, 130px);
    grid-template-rows: 40px;
    gap: 5px;
    margin-top: 40px;
}

.carousel1 .list .item .buttons button a{
    text-decoration: none;
    color: #f07e19;
}

.carousel1 .list .item .buttons button{
    border: none;
    background-color: #eee;
    letter-spacing: 2px;
    font-family: Poppins;
    font-weight: 500;
}
.carousel1 .list .item .buttons button:nth-child(2){
    background-color: transparent;
    border: 1px solid #fff;
    color: #eee;
}
.thumbnail{
    display: none;
}
/* thumbail */
/* .thumbnail{
    position: absolute;
    bottom: 50px;
    left: 90%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
}

.thumbnail .item{
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.thumbnail .item .content{
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}
.thumbnail .item .content .title{
    font-weight: 500;
}
.thumbnail .item .content .description{
    font-weight: 300;
} */
/* arrows */
.arrows{
    position: absolute;
    top: 80%;
    right: 52%;
    z-index: 100;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}
.arrows button{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee4;
    border: none;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    transition: .5s;
}
.arrows button:hover{
    background-color: #fff;
    color: #000;
}

/* animation */
.carousel1 .list .item:nth-child(1){
    z-index: 1;
}

/* animation text in first item */

.carousel1 .list .item:nth-child(1) .content .author,
.carousel1 .list .item:nth-child(1) .content .title,
.carousel1 .list .item:nth-child(1) .content .topic,
.carousel1 .list .item:nth-child(1) .content .des,
.carousel1 .list .item:nth-child(1) .content .buttons
{
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s 1s linear 1 forwards;
}
@keyframes showContent{
    to{
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
.carousel1 .list .item:nth-child(1) .content .title{
    animation-delay: 1.2s!important;
}
.carousel1 .list .item:nth-child(1) .content .topic{
    animation-delay: 1.4s!important;
}
.carousel1 .list .item:nth-child(1) .content .des{
    animation-delay: 1.6s!important;
}
.carousel1 .list .item:nth-child(1) .content .buttons{
    animation-delay: 1.8s!important;
}
/* create animation when next click */
.carousel1.next .list .item:nth-child(1) img{
    width: 150px;
    height: 220px;
    position: absolute;
    bottom: 50px;
    left: 80%;
    border-radius: 30px;
    animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
    to{
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}
.carousel1.next .thumbnail .item:nth-last-child(1){
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}
.carousel1.prev .list .item img{
    z-index: 100;
}
@keyframes showThumbnail{
    from{
        width: 0;
        opacity: 0;
    }
}
.carousel1.next .thumbnail{
    animation: effectNext .5s linear 1 forwards;
}

@keyframes effectNext{
    from{
        transform: translateX(150px);
    }
    
}


/* running time */

.carousel1 .time{
    position: absolute;
    z-index: 10;
    width: 0%;
    height: 3px;
    background-color: #f1683a;
    left: 0;
    top: 0;
}

.carousel1.next .time,
.carousel1.prev .time{
    animation: runningTime 3s linear 1 forwards;
}
@keyframes runningTime{
    from{ width: 100%}
    to{width: 0}
}


/* prev click */

.carousel1.prev .list .item:nth-child(2){
    z-index: 2;
}

.carousel1.prev .list .item:nth-child(2) img{
    animation: outFrame 0.5s linear 1 forwards;
    position: absolute;
    bottom: 0;
    left: 0;
}
@keyframes outFrame{
    to{
        width: 150px;
        height: 220px;
        bottom: 50px;
        left: 83%;
        border-radius: 20px;
    }
}

.carousel1.prev .thumbnail .item:nth-child(1){
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail .5s linear 1 forwards;
}
.carousel1.next .arrows button,
.carousel1.prev .arrows button{
    pointer-events: none;
}
.carousel1.prev .list .item:nth-child(2) .content .author,
.carousel1.prev .list .item:nth-child(2) .content .title,
.carousel1.prev .list .item:nth-child(2) .content .topic,
.carousel1.prev .list .item:nth-child(2) .content .des,
.carousel1.prev .list .item:nth-child(2) .content .buttons
{
    animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut{
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
        
    }
}
@media (max-width: 768px) {
    .carousel1{
        height: 85px;
        width: 100%;
        overflow: hidden;
        position: relative;
        top: -50px; 
    }
  
   
    .carousel1 .list .item .content{
        padding-right: 0;
    }
    .carousel1 .list .item .content .topic{
        font-size: 30px;
    }
    /* .carousel1 .list .item .content{
        
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        padding-right: 30%;
        box-sizing: border-box;
        color: #fff;
        text-shadow: 0 5px 10px #0004;
         
    } */
    .carousel1 .list .item .author{
        font-weight: bold;
        letter-spacing: 10px;
        
    }
    .carousel1 .list .item .title,
    .carousel1 .list .item .topic{
        font-size: 3em;
        font-weight: bold;
        line-height: 1.1em;
     
    }
    .carousel1 .list .item .topic {
        color: #f07E19;
    }
    .carousel1 .list .item .buttons{
        display: grid;
        grid-template-columns: repeat(2, 130px);
        grid-template-rows: 40px;
        gap: 5px;
        margin-top: 20px;
    }
    .sliderdeneme .content .des{
        display: none;
    }
   
    .thumbnail{
        display: none;
    }
  .form-container {
            background: white;
           
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
            border-radius: 5px;
            width: 100%;
        }
        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
            font-size: medium;
        }
        .form-group {
            display: flex;
            gap: 5px;
            margin-bottom: 10px;
        }
      
       .form-group input {
         
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 8px;
        }
       .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            border: none;
            color: white;
            font-size: 12px;
            border-radius: 2px;
            cursor: pointer;
        }
       .form-group button:hover {
            background-color: #218838;
        }
        .form-group{
            color: #ff0000;
        }
}
@media (min-width: 320px) and (max-width: 480px){
    .header {
        align-items: center;
        top: 0px;
      }
     .header .navbar .dropdown-menu{
       
        background: rgb(245,245,245);
        min-width: 100%;
        /* margin-right: -200%; */
        font-size: 11px;
        
     }
   
    .header .col-md-12{
        float: left;
        display: block;
    }
    
  
    .header .col-md-6 span{
        text-align: center;
        font-size: 11px;
    }
   
  
    .navbar-brand {
        width: 200px;
        padding:0%;
        margin: 0%;
        text-align: left;
    }
  
    nav button{
        border-color: #f07e1a;
        text-align: right;
  
    }
   
    #navbarDropdownMenuLink{
      
      z-index: 1;
      text-align: left;
      background-color: transparent;
      
    }

    #navbarNavDropdown{
        text-align: left;
        color: #fff;
    }
    .sliderdeneme .content .des{
        display: none;
    }
   .nav-link{
    line-height: 13px;
    padding-left: 5px;
    color: #fff;
   }
    
      .header .navbar a{
        margin: 0;
        color: #fff;
        font-size: 12px;
      }
   
      .header span{
        font-size: 13px;
        text-align: center !important;
        margin:auto;
        padding:auto;
        text-align: center;
      }
      .header .dropdown{
        text-align: center !important;
        
      }
      #topFooterua, #topFooter{
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
      .header .navbar .nav-item, .nav-link{
        color: #fff !important;
        font-size: 12px !important;
        
      }
      .header .col-md-6 span{
       color: #fff;
       text-align: center;
      }
      
      #header #button{
          cursor: pointer;
          background-color: #fff;
      }

    
      #fotoGaleri #fancy img{
        padding-top: 2px;
        padding-bottom: 2px;
    }
    #jddBanner,
    #jvpBanner,
    #jydBanner,
    #jccBanner,
    #jcdBanner,
    #regulatorBanner,
    #donusturuculerBanner,
    #dizelBanner,
    #kaynakBanner,
    #kaynakBenzinliBanner,
    #kaynakDizelBanner,
    #kepenkGucKaynaklariBanner,
    #dizelPortatif,
    #benzinliBanner
    #benzinliPortatif,
    #portatifBanner,
    #inverterPortatif,
    #romorkBanner,
    #donusturuculerBanner,
    #kepenkGucKaynaklariBanner,
    #urunlerBanner,
    #supompasiBanner,
    #supompasiDizelBanner,
    #supompasiBenzinliBanner,
    #jcfBanner,
    #jcefBanner,
    #forkliftsBanner,
    #hakkimizdaBanner,
    #blogBanner,
    #isikKulesiBanner,
    #urunlerBanner,
    #iletisimBanner 
    #topluKatalogBanner,
    #inverterBanner,
    #supompasiBenzinliBanner,
    #officeBanner{
        background-position: center center;
    }
    
    .carousel1{
        height: 91vh;
        top:5px !important;
        width: 100vw;
        overflow: hidden;
        position: relative;
       
    }

 
    .navbar-brand {
        width: 200px;
        padding:0%;
        margin: 0%;
        text-align: left;
    }
.header .dropdown-menu strong{
    font-size: 12px;
}
nav button{
    border-radius: #f07e1a;
    z-index: 1;
    color: #f07e1a;
}
    #carouselExampleCaptions img {
        width: 210% !important;
        height: 100% !important;
    }
.thumbnail{
  display: none;
}
.arrows{
    top:80%;
    left: 40%;
}
.thumbnail .item{
    width: 150px;
    height: 200px;
    flex-shrink: 0;
    position: relative;
}
.thumbnail .item img{
    width: 80%;
    height: 80%;
    object-fit: cover;
    border-radius: 20px;
    
}

#urunBg{
    display: none;
}
.carousel1 .list .item .content{
    padding-right: 0;
}

.carousel1 .list .item .content .title{
    font-size: 30px;
}

.carousel1 .list .item .author{
    font-weight: bold;
    letter-spacing: 10px;
    
}
.carousel1 .list .item .title,
.carousel1 .list .item .topic{
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.1em;
    
    
 
}
.carousel1 .list .item .topic {
    color: #f07E19;
}
.carousel1 .list .item .buttons{
    display: grid;
    grid-template-columns: repeat(2, 130px);
    grid-template-rows: 40px;
    gap: 5px;
    margin-top: 20px;
}

}