* { margin: 0;padding: 0; outline: none; box-sizing: border-box;}
html { font-size: 16px; overflow-x: hidden ;}
body { font-family: 'Raleway', sans-serif; font-weight: 400; overflow-x: hidden ;font-size: 1rem;  line-height: 1.7rem; display: flex; flex-direction: column; min-height: 100vh;  color: #333;}
footer {margin-top: auto;}
header{font-family: 'Be Vietnam Pro', sans-serif !important;}
main {flex-grow: 1; flex-shrink: 0; flex-basis: auto;}
a { text-decoration: none; border: solid 0px; -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; transition: .3s; }
a:focus, a:focus-visible, .nav-link:focus, .nav-link:focus-visible, .dropdown-item:focus, .dropdown-item:focus-visible, #topBtn:focus, #topBtn:focus-visible { outline: 0 !important; box-shadow: none !important; }




.fw-small{font-size: .8rem; }
header ul a{color: #222334 !important;}
header .nav-item{margin-right: .5rem !important;}
.menu-top{background-color: #00175e; color: #fff;}
.menu-top a{color:#fff };  
.menu-bottom{background:#fff ;}
header.fixed { position: fixed; width: 100%; top: 0; padding: 0 !important; z-index: 999;  box-shadow: rgba(44, 44, 46, 0.1) 0px 10px 28px, rgba(0, 0, 0, 0.1) 0px 1px 10px;}
header:not(.fixed)  img { width: 100%; transition: width .5s ease; }
.fixed  img { width: 80% !important; transition: width .5s ease; height:auto !important}
#navigationtoptitlesmain { max-height: 100px; opacity: 1; transition: max-height .5s ease, opacity 0.5s ease;}
header.fixed #navigationtoptitlesmain { transition: max-height .5s ease, opacity 0.5s ease; max-height: 0; opacity: 0;}
header:not(.fixed) #navigationtoptitlesmain { display: block; opacity: 1;}





.navbar-brand{z-index:999 !important}
.navbar-toggler:focus { box-shadow: none !important;}
.navbar-toggler span { display: block; background-color: #000; height: 3px; width: 20px; margin-top: 3px; margin-bottom: 3px; position: relative; left: 0; opacity: 1; transition: all 0.2s ease-out; transform-origin: center left; z-index: 999;}
.navbar-toggler span:nth-child(1) { margin-top: 0.3em;}
.navbar-toggler:not(.collapsed) span:nth-child(1) { transform: translate(15%, -33%) rotate(45deg);}
.navbar-toggler:not(.collapsed) span:nth-child(2) {opacity: 0;}
.navbar-toggler:not(.collapsed) span:nth-child(3) {transform: translate(15%, 33%) rotate(-45deg) ;}
.navbar-toggler span:nth-child(1) {transform: translate(0%, 0%) rotate(0deg) ;}
.navbar-toggler span:nth-child(2) { opacity: 1;}
.navbar-toggler span:nth-child(3) { transform: translate(0%, 0%) rotate(0deg) ;}

.dropdown-item > li:hover> .dropdown-menu{display: block;}
footer{background-color:#0a0b14 ; color: #fff;}
footer a {color: #f0e6e6; transition: color .5s;}
footer li{ list-style-type: square;color: #616379;  transition: color .5s;}
footer li:hover ,footer a:hover { text-decoration:underline}
@keyframes hoverEffect { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }}
footer .fa-brands {background-color: #02010100; border-style: solid; border-width: 1px; padding: .5rem;border-radius: 1rem; color: white;}
footer .fa-brands:hover {background-color: #00175e;animation: hoverEffect 0.5s 1; }
footer .container{border-bottom: 1px solid #a593932b;}
footer b{font-size:1.5rem; font-weight:normal}

#topBtn {   display: none; position: fixed; bottom: 90px; right: 1%; background-color: #00175e; color: #fff; width: 3rem;height: 3rem;    border-radius: 50%; align-items: center;   justify-content: center;   cursor: pointer; font-size: 1rem;  transition: background-color 0.3s ease-in-out;   border: 1px solid #ccc;  z-index: 9;}

.slideshow-container {width: 100%;height: 65vh; position: relative; margin: auto; }
.slideshow-container::before { content: "";position: absolute; top: 0;  left: 0; width: 100%; height: 100%;  background-color: black;    opacity: 0.3;    z-index: 1; }
 .slideshow-container .mySlides { display: none;   } 
 .slideshow-container .mySlides.is-lcp-slide { display: block; }
.slideshow-container .mySlides img {width: 100%;height: auto;  }
.slideshow-container .text {color: #f2f2f2;position: absolute;top: 30%;left: 20%; width: 40%;; text-align: left; z-index: 2;}
.slideshow-container .text-button { background-color: orange; padding: 1rem; width: max-content;  font-size: .8rem; color: white;  transition: background-color 0.3s ease, transform 0.3s ease;}
.slideshow-container .text-button:hover { background-color: #0a0b14;}
.slideshow-container .fade {animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
.slideshow-container .fadein {animation-name: fadein; animation-duration: 10s; transition: transform 0.75s, opacity 0.3s; }
.slideshow-container .mySlides.is-lcp-slide .fade, .slideshow-container .mySlides.is-lcp-slide .fadein {animation: none; opacity: 1;}

@keyframes fade { 0% {
  opacity: 0;
  transform: scale(1); 
}
25% {
  opacity: 1;
  transform: scale(1..75); 
}
75% {
  opacity: 1;
  transform: scale(1.15); 
}
100% {
  opacity: 0;
  transform: scale(1.175);
}} 
@keyframes fadein { 0% {
  opacity: 0;
}
25% {
  opacity: 1;
}
75% {
  opacity: 1;
}
100% {
  opacity: 0;
}} 

.slideshow-container .animationDot{opacity: 0;transform: translateY(50%);transition: opacity 0.8s ease, transform 0.8s ease;}
#MainBannerContent a{transition:all .5s ease}
#MainBannerContent{z-index: 2;}
#MainBannerContent i{  padding: 1.75rem; border: 1px solid #00175e; border-radius: 50%;margin-right: 1rem; font-size: 1.5rem; color: #00175e;display: inline-flex; align-items: center; justify-content: center;  width: 3%;  height: 3rem;}
#MainBannerContent .animationDot{opacity: 0;transform: translateY(20px);transition: opacity 0.8s ease, transform 0.8s ease; }
#MainBannerContent .mdColmn { background:#00175e; background-size: cover;box-shadow:0px 15px 29px rgba(0, 0, 0, 0.22) }
#MainBannerContent  a:hover{background:#fff; color:#00175e !important; border-color: #fff;}
#MainBannerContent .box{position:absolute;transform:translate(-50%, -50%);left:50%;top:2rem; } 


#WhoWeAre{margin-top: 6rem;}
#WhoWeAre .title{color:#00175e ; font-size: .875rem;}
#WhoWeAre .text-button { background-color: #00175e; padding: 1rem; font-size: .8rem; color: white; display: inline-block; transition: background-color 0.3s ease, transform 0.3s ease;}
 #WhoWeAre .text-button:hover {
 background-color: #0a0b14;}

#AboutUs{margin-top: 5rem;}
#AboutUs .title{color:#00175e ; font-size: .875rem;}
#AboutUs .text-button { background-color: #00175e; padding: 1rem; font-size: .8rem; color: white; display: inline-block; transition: background-color 0.3s ease, transform 0.3s ease;}
#AboutUs .text-button:hover  { background-color: #0a0b14;}


#CounterNumber { position: relative; overflow: hidden;  margin-top: 2rem; margin-bottom: 5rem; padding: 2rem;}
#CounterNumber::before { content: ''; position: absolute;top: 0; left: 0;width: 100%;height: 100%;background-image: url('/images/anasayfa/Global-Map.png');background-position: center center;background-repeat: no-repeat;opacity: 0.1;z-index: -1; background-size: cover;}
#CounterNumber .content { position: relative; z-index: 1;}
#CounterNumber .number { font-size: 3rem;font-weight: bold;display: inline-block;color: #00175e;}
#CounterNumber .number span { margin-right: .3rem;}
#CounterNumber h2{color:#222334}

#WhyChooseUs  { position: relative; overflow: hidden;   background-color: #222334; }
#WhyChooseUs::before { content: '';position: absolute;top: 0;left: 0; width: 100%;height: 100%;background-image: url('/images/anasayfa/Pattern_img.png'); background-position: center center;background-repeat: no-repeat;opacity: 0.2; z-index: 1;}
#WhyChooseUs i {padding: 1.75rem; border: 1px solid #ffffff; border-radius: 50%; font-size: 1.5rem; color: #ffffff;display: inline-flex;align-items: center;  justify-content: center;  width: 3%;  height: 3rem;}
#WhyChooseUs .Content {opacity: 0;transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease;}

#Blog { position: relative;}
#Blog::before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: url('/images/anasayfa/automotive-mechanical-assembly-engine-transmission-suspension-and-breaking-system-automotive.jpg'); background-position: center center;background-repeat: no-repeat; background-size: 100%; opacity: 0.1; z-index: -1;}
#Blog .text-button { background-color: #00175e; padding: .5rem 2rem; width: max-content; font-size: 0.8rem; color: white; position: absolute ; z-index: 2; transition: background-color 0.3s ease, transform 0.3s ease;}
#Blog .col a:hover .text-button { background-color: #0a0b14;}
#Blog .card { z-index: 2; display: flex; flex-direction: column; height: 100%; }
#Blog .card-body {flex-grow: 1; }
#Blog .card img { max-width: 100%;height: auto;margin-bottom: .8rem;}
#Blog i {padding: 1.75rem;  font-size: 2rem; color: #00175e;display: inline-flex;align-items: center;  justify-content: center;  width: 25%;  height: 3rem;}
#Blog a {border-bottom: 5px solid #c0bfbf6c; transition: border-bottom-color .7s; }
#Blog a:hover { border-bottom-color: #00175e; }


#MiddleBanner { margin-top: 5rem; height: 70vh; overflow: hidden; display: flex; align-items: center; position: relative;}
#MiddleBanner::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);  z-index: 1;}
#MiddleBanner .image-container { position: relative; width: 100%; height: 100%;}
#MiddleBanner img { width: auto; height: 100%; object-fit: cover; margin: 0 auto; z-index: 0; }
#MiddleBanner .overlay-text {position: absolute;top: 20%;left: 20%;width: 35%;color: #fff;font-weight: 800;z-index: 2;}
#MiddleBanner .text-button { background-color: #00175e; padding: .5rem 2rem; width: max-content; font-size: 0.8rem; color: white; position: absolute; z-index: 2; transition: background-color 0.3s ease, transform 0.3s ease;}
#MiddleBanner .text-button:hover { background-color: #0a0b14;}

#HowItWorks{background-color: #f5f4f5;}
#HowItWorks  .title{color:#00175e !important ; font-size: .875rem;}
#HowItWorks h2{color:#222334;}
#HowItWorks .text-button { background-color: #00175e;padding: .5rem 2rem;font-size: 0.8rem;color: white; transition: background-color 0.3s ease, transform 0.3s ease;}
#HowItWorks .text-button:hover { background-color: #0a0b14; }
#HowItWorks .col{ margin-left: 2rem; background: #fff; }
#HowItWorks h5{color:#222334; font-weight: 800;}
#HowItWorks .SmColmn{opacity: 0;transform: translateY(20px);transition: opacity 0.8s ease, transform 0.8s ease;}

#Organizations .line { width: 5%;height: .1rem;background-color: #0a0b14;}
#Organizations .Kutu {height: 10rem; padding: 2rem; display: flex; align-items: center; justify-content:center;}
#Organizations img {max-width: 100%; max-height: 100%; margin: 0 auto;}

#ContactUs {background-color: #222334;color: #fff; height: 13vh;}
#ContactUs .text-button {border: 1px solid #FFF; padding: .75rem 2.5rem; color: #FFF; transition: background-color 0.3s ease, transform 0.3s ease;}
#ContactUs .text-button:hover { background-color: #0a0b14;}

#PageHeader {position: relative;text-align: center;height: 35vh; overflow: hidden;  display: flex;  align-items: center; justify-content: center; overflow: hidden;}
#PageHeader::before {  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(180deg, #0A0B1480 50%, #FFFFFFCC 100%); opacity: 1;}
#PageHeader img { width: 100%;}
#PageHeader .overlay-text { position: absolute;  top: 50%;   left: 50%;  transform: translate(-50%, -50%);  color: #fff;  z-index: 2; width: 40%;}
.PageHeaderAnimation{  animation-name: slideInFromTop;  animation-duration: 1s;  animation-delay: 0.5s;   animation-fill-mode: backwards; }
 @keyframes slideInFromTop {  0% {    transform: translateY(100%);    opacity: 0;  }  100% {    transform: translateY(0);    opacity: 1;  }}

#Team{background-color: #f5f4f5;}
#Team .custom-card{padding: 1rem; }
#Team .title{ color: #00175e;}
#Team .social-icons i { margin: auto .5rem; padding: .8rem; border: 1px solid #00175ea1; border-radius: 50%; font-size: .9rem; color: #00175e;display: inline-flex;align-items: center;  justify-content: center; }
#Team .social-icons i:hover {background-color: #0a0b14;animation: hoverEffect 0.5s 1; color: #fff; }

#Documents a .documentcard { border: solid 1px #E0E0E0; border-radius: 0.3rem;  transition: 0.5s all;}
#Documents a .documentcard:hover {   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
#Documents a .documentcard img{border-radius: 0.3rem;}
#Documents a{color: #393D47;}
#Documents a:hover{color: #00175ea1;transition: color 0.3s ease;}
#Documents a { transition: color 0.3s ease 0.3s; }
#Documents a:hover .pricecard{ -webkit-box-shadow: 0px 0px 20px 0px rgba(140,140,140,0.5); -moz-box-shadow: 0px 0px 20px 0px rgba(140,140,140,0.5);box-shadow: 0px 0px 20px 0px rgba(140,140,140,0.5);}
#Documents .Right{  animation-name: slideInFromRight;  animation-duration: 1s;  animation-delay: 0.5s;   animation-fill-mode: backwards; }
 @keyframes slideInFromRight {  0% {    transform: translateX(-100%);    opacity: 0;  }  100% {    transform: translateX(0);    opacity: 1;  }}


#Portfolio .text-button { background-color: #00175e; padding: .5rem 2rem; width: max-content; font-size: 0.8rem; color: white;  transition: background-color 0.3s ease, transform 0.3s ease;}
#Portfolio .col a:hover .text-button { background-color: #0a0b14;}
#Portfolio .card { z-index: 2; display: flex; flex-direction: column; height: 100%; }
#Portfolio h4 ,#Portfolio .h4{color: #00175e; font-weight: bold;}
#Portfolio a {border-bottom: 5px solid #c0bfbf6c; transition: border-bottom-color .7s, box-shadow .7s; border-radius: .5rem;  }
#Portfolio a:hover { border-bottom-color: #00175e;   box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 24px;  }
.homePortfolio{margin-top:4rem}
.homePortfolio h3{color: #00175e; font-weight: bold; font-size:1.5rem !important;}

#IndustrieDetails a .Icon {background-color: #EEEEEE; padding: 0.5rem; height: 100%;}
#IndustrieDetails .card-container {  background-color: #f8f9faa2;    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);}
#IndustrieDetails .card-container .col span {  transition: background-color 0.5s ease, color 0.5s ease;}
#IndustrieDetails .card-container a:hover{  background-color: #00175e;}
#IndustrieDetails .card-container .col:hover span {   color: white;}

#kategoriMenu .dropdown-item {height: 3rem; }

#ProductsForm .card-title { transition: color 0.3s ease-in-out;}
#ProductsForm .card:hover .card-title {  color: #00175e;}
#ProductsForm .card img {  overflow: hidden;  transition: transform 0.3s ease-in-out;}
#ProductsForm .card:hover img {  transform: scale(1.1); /}

#ProductsDetail .accordion-body a { color: initial; text-decoration: none; transition: all 0.3s ease;}
#ProductsDetail .accordion-body a:hover, #ProductsDetail .accordion-body a.active-product {color: #00175e; text-decoration: underline; font-weight: bold;}
#ProductsDetail .accordion-button.active-category {background-color: #00175e; color: #fff;}
#ProductsDetail .accordion-button.active-category::after {filter: brightness(0) invert(1);}
#ProductsDetail .table-card{ padding: 1rem;  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;; border-radius: .5rem; margin-bottom:2rem}
#ProductsDetail h4 , #ProductsDetail h2 , #ProductsDetail b{ color: #00175e; font-weight: bold; margin-bottom:0.2rem !important}
#ProductsDetail  .Details:nth-child(even) {background: #cccccc48}
#ProductsDetail .Details{padding: 1rem; margin: 1rem;}
#ProductsDetail b{font-size:1.1rem !important; color: #00175e; font-weight: bold; margin-bottom:0.2rem !important}
#ProductsDetail .flex-column{margin-bottom:1rem !important}

#ContacUsPage  i{ border: 1px solid #00175e ; padding: 1rem; color: #00175e; border-radius: 50%;}
#ContacUsPage a {  color: #000;  transition: color 0.5s ease-in-out; }
#ContacUsPage .card:hover {color: #00175e;}
#ContacUsPage .fw-small{font-size: .85rem;}
#ContacUsPage .custom-label { font-weight: bold;}
#ContacUsPage .custom-input {  background-color: #f5f4f5;  border-radius: 0; border: none; padding: .7rem;}
#ContacUsPage img{  object-fit: cover;  object-position: center center;   height: 100%;}
#ContacUsPage .btn { background-color: #00175e;  border: none;  transition: background-color 0.3s ease; }
#ContacUsPage .btn:hover {  background-color: #00227a; }
#ContacUsPage h2{color: #222334;}

iframe{height: 40vh;}

#ContacUsPage .contactbox{margin-bottom: 6rem;}

@keyframes slideInRight {from { transform: translateX(100%);}to {transform: translateX(0);}}
@keyframes slideInLeft {from { transform: translateX(-100%);}to { transform: translateX(0);}}
@keyframes slideInTop {from { transform: translateY(-100%);}to { transform: translateY(0);}}
.animated {animation: slideInRight 2s ease;transition: transform 1s ease; } 
.animate { animation: slideInLeft 2s ease;transition: transform 1s ease;}
.animatedTop { animation: slideInTop 2s ease;transition: transform 1s ease;}


#ProductPage {margin-bottom: 5rem;}
#ProductPage div .card {border-radius: 1rem; text-align: center; padding: 2rem;border: solid 1px #E0E0E0; background-color: #F4F4F4; margin-bottom: 1rem; transition: background-color 0.5s, color 0.5s; /* Add transition */}
#ProductPage div .card:hover { background-color: #00227a;color: white; /* Change text color on hover */}

#CorparatePage {margin-bottom: 5rem;}
#CorparatePage div .card {border-radius: 1rem; text-align: center; padding: 2rem;border: solid 1px #E0E0E0; background-color: #F4F4F4; margin-bottom: 1rem; transition: background-color 0.5s, color 0.5s; /* Add transition */}
#CorparatePage div .card:hover { background-color: #00227a;color: white; /* Change text color on hover */}

#SelectOptions{border: 1px solid rgba(0, 0, 0, 0.459);}


#ContacUsPage .btn:hover { background-color: #00227a; color: white;transition: background-color 0.5s, color 0.5s; }
.TeklifAl{background-color:#00175e !important; color: #FFF; font-size:2rem}
.TeklifAl a{background-color:#5ad7e4; color:#FFF; padding:1rem; margin:1.5rem}
.TeklifAl a:hover{background-color:#2d8d97}
.TeklifAl span {padding:2.2rem 1.5rem; display:inline-block}

.Button-Send{background-color:#5ad7e4; color:#FFF; padding:1rem}
.Button-Send:hover{background-color:#2d8d97; color:#FFF}


#OnlineCatalog { z-index: 999; position: fixed; top: 40%; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform-origin: top right; right: 1.5% }
#OnlineCatalog a:hover { background-color: #2A2D36; }
#OnlineCatalog a { font-size: 1.15rem; background-color: #00175e; border: none; padding: 0.5rem 1.5rem; color: #FFF;  font-weight: 600; }

#Category { position: relative;  overflow: hidden; }
#Category::before { content: "";position: absolute;inset: 0; background-color: #00175e;opacity: 0.9;z-index: 1;}
#Category swiper-container { width: 100%;height: 100%;--swiper-navigation-color: #ffffff;--swiper-navigation-size: 1.3rem;  --swiper-navigation-top-offset: 50%;--swiper-navigation-sides-offset: 0;}
#Category swiper-slide {text-align: center;display: flex;padding: 1rem;justify-content: center;align-items: center;height:auto}
#Category .box{border: 1px solid #FFF;border-radius: 1rem; width:12rem; height:6rem; font-weight:600;display:flex;align-items:center;justify-content:center;padding:1rem }
#Category swiper-slide a:hover{color:#C7A25C !important}
.nav-link:hover, .dropdown-item:hover{color:#C7A25C !important}
.navbar-brand h1{text-indent:-9999px; display:block; font-size:1px; line-height:0px; padding:0; margin:0}