body{
    font-family: 'Titillium Web' !important;
}
/* *********************************************** */
/*! Base Css Start */
:root {
    --mavi: #101076; 
    --mavi-hover: #fff; 
    --sari:#FFA500  ;
    --text: #fff;
    
  }
  .active {
    color: var(--mavi) !important; 
}
.mt-5{
    margin-top: 50px !important;
}
.btn-outline-primary {
    --bs-btn-color: var(--mavi) !important; 
    --bs-btn-border-color:var(--mavi) !important; 
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mavi) !important; 
    --bs-btn-hover-border-color:var(--mavi) !important; 
}
.pagination{
    --bs-pagination-active-bg: var(--mavi) !important; 
    --bs-pagination-active-border-color:var(--mavi) !important; 
    --bs-pagination-color: var(--mavi) !important; 
}

.footer-hover {
    transition: 0.4s;
}

.footer-hover:hover {
    font-weight: 700;
    color: var(--mavi) !important;
}

/* *********************************************** */
/*! Slider Css Start */
/* Navbar Css Start */

@media (max-width: 730px) {
  .carousel-caption-left > p {
    width: 80% !important;
    font-weight: 600;
  }
  .carousel-caption h1 {
    font-size: 25px;
   }
   .carousel-caption p {
    font-weight: 600 !important;
    font-size: 15px !important;
   }
   
   .carousel-caption  {
    margin: 0 !important;
    padding: 0 !important;
    top: 20px !important;
   }
   .carousel-caption a {
    margin-bottom: 10px !important;
    
  }
 
}


.carousel-caption p {
  font-size: 30px ;
}
.carousel-caption a {
  background-color: #ec7834 !important; 
}
#slider-hover:hover {
  background-color: #161c43 !important; 
}
#slider-hover  {
  color: white !important;
}
.carousel-caption {
  position: absolute;
  top: 30%;

  
  text-align: left !important;
  color: black !important; 
  padding-left: 20px; 
}
.carousel-caption h1 {
  box-shadow: #e9ecef;
  font-size: bolder;
  
  font-weight: 600;
  color: #161c43 !important; 
}
.carousel-caption a {
  background-color: black !important; 
}







/*! Slider Css End */
/* *********************************************** */
/*! Navbar Start */

    /* Başlangıçta navbar'ın stilini ayarla */
    #navbar {
        transition: all 0.3s ease-in-out;
        /* Geçiş efekti */
    }

    /* Scroll yapıldığında stil değişikliği */
    #navbar.navbar-scroll {
        background-color: rgba(255, 255, 255, 0.9);
        /* Açık renk arka plan */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        /* Hafif gölge */
    }

    #navbar.navbar-scroll .nav-link {
        color: black !important;
        /* Scroll yapıldığında link renkleri */
    }

/*! Navbar End */




/* *********************************************** */
/*! Ekip Card Start */
.card-img-top {
  transition: transform 0.3s ease-in-out;
}

.card-img-top-custom:hover {
  transform: scale(1.1);
  /* Resmi 1.1 kat büyüt */
}

.overlay-box {
  background-color: rgba(0, 0, 255, 0.7);
  /* Yarı saydam mavi renk */
  color: white;
  /* Metin rengi beyaz */
  width: 100%;
  /* Genişlik %100 */
  min-height: 2rem;
  /* Yükseklik içeriğe göre ayarlanır */
  top: 320px;
  /* Üst kenara yapışık */
  left: 0;
  /* Sol kenara yapışık */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.9rem;
  /* İç boşluk */
  opacity: 0;
  /* Başlangıçta görünmez */
  transition: opacity 0.3s ease-in-out;
}

.position-relative:hover .overlay-box {
  opacity: 1;
  /* Hover olduğunda görünür yap */
}

/*! Ekip Card End */
/* *********************************************** */
/*! Ekip Detay Start */
.card-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--sari);
}

.card-subtitle:hover {
  text-decoration: underline;
  text-decoration-color: var(--sari);
}
/*! Ekip Detay End */
/* *********************************************** */

/*! Contact Api Start */
 /*  Social Menü Buttons CSS Start  */
 .api{
    position: fixed;
    bottom: 70px;
    right: 55px;
    z-index: 99999;
  }
  .whatsapp {
    position:relative;
      transition: all .5s ease-in-out;
      z-index: 999;
    margin-top:10px;
  }
  
  .whatsapp a {
      height: 50px;
      width: 50px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
      font-size: 28px;
      display: block;
      text-align: center;
      line-height: 50px;
      color: white;
      background: #4dc247;
  }
  
  .whatsapp .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      line-height: normal;
      font-size: 15px;
      top: 13px;
      right: 105%;
      height: auto;
  }
  
  .whatsapp:hover a {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
  }
  
  .whatsapp:hover .tooltiptext {
      visibility: visible;
  }
  
  
  
  
  .telefon {
    position:relative;
    margin-top:10px;
      transition: all .5s ease-in-out;
      z-index: 999;
  }
  
  .telefon a {
      height: 50px;
      width: 50px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
      font-size: 28px;
      display: block;
      text-align: center;
      line-height: 50px;
      color: white;
      background: #337ab7;
  }
  
  .telefon .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      line-height: normal;
      font-size: 15px;
      top: 13px;
      right: 105%;
      height: auto;
  }
  
  .telefon:hover a {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
  }
  
  .telefon:hover .tooltiptext {
      visibility: visible;
  }
  @media (max-width: 768px) {
    .animated {
      animation: none;
    }
  }
  
  
  @media only screen and (max-width: 767px) {
   .all-product-card{
    width: 100% !important;
   }
   .card-product img {
   
    height: auto !important;
  }
    .api {
      position: fixed;
      bottom: 2px !important;
      left: 0 !important;
      z-index: 9999 !important;
      width: 100% !important;
      display: flex;
    }
    .api div{
      flex: 1 0 0%;
    }
    .api a{
      border-radius:0 !important;
      width: 100% !important;
    }
    .api:hover a {
      transform: rotate(0deg) !important;
      -webkit-transform: rotate(0deg) !important;
    }
    footer {
      padding-bottom: 50px;
    }
    a.navbar-brand {
      left: 48%;
    }
    .mobil_right{
      position: absolute;
      top: 10px;
      right: 10px;
      height: 88px;
      display: flex;
    }
  }
  /*  Social Menü Buttons CSS End  */








/*! Contact Api End */
/* *********************************************** */
/*! ScroolToUp Button Start */
#scrollTopButton {
    position: fixed;
    bottom: 16px;
    right: 62px;
    display: none; 
    background-color: #161c43; 
    color: #FFFFFF;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 999999999;
  }
  @media (max-width: 768px) {
    #scrollTopButton {
      position: fixed;
      bottom: 80px;
      right: 20px;
      display: none; 
      background-color: #161c43; 
      color: #FFFFFF;
      padding: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  }
  
  /* ScroolToUp Button End */


  /*! Base Css End */

/* *********************************************** */
/*! Navbar Css Start */
.navbar-nav li {
    margin-right: 10px;
    /* Sağ taraftan boşluk ekleyin */
}

.navbar {
    font-size: 19px;
}
.navbar-button{
    transition: 0.4s;
}
.navbar-button:hover{
    background-color: var(--sari) !important;
    color: var(--text) !important;
    font-weight: 500;
}
.custom-button{
    background-color: var(--mavi) !important;
    
    transition: 0.4s;
}
.custom-button:hover{
    background-color: var(--sari) !important;
    color: var(--text) !important;
    font-weight: 500;
}

/* Navbar Ul Hover */
.nav-link {
    transition: 0.4s;
}
.nav-link:hover {
    color: var(--mavi);
}
.dropdown-item{
    border-color: transparent;
    border: none !important;
    margin: 0;
    background-color: var(--mavi);
    color: var(--text);
}



/*! Navbar Css End */

/* *********************************************** */
/*! Slider Css Start */


.carousel-control-prev-icon {
    background-color: #007bff; /* Arka planı mavi yapar */
    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23ff7f00"%3e%3cpath d="M11.354 1.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708l6 6a.5.5 0 0 0 .708-.708L5.707 8l5.647-5.646a.5.5 0 0 0 0-.708z"/%3e%3c/svg%3e');
    background-size: 90%; /* İkonun boyutunu ayarlar */
    background-repeat: no-repeat; /* Tekrar etmeyi önler */
    background-position: center; /* İkonu merkeze yerleştirir */
    border-radius: 50%; /* Yuvarlak yapar */
    width: 40px; /* İkonun genişliği */
    height: 40px; /* İkonun yüksekliği */
}


  
  .carousel-control-next-icon {
    background-color: #007bff; /* Arka planı mavi yapar */
    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23ff7f00"%3e%3cpath d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/%3e%3c/svg%3e');
    background-size: 90%; /* İkonun boyutunu ayarlar */
    background-repeat: no-repeat; /* Tekrar etmeyi önler */
    background-position: center; /* İkonu merkeze yerleştirir */
    border-radius: 50%; /* Yuvarlak yapar */
    width: 40px; /* İkonun genişliği */
    height: 40px; 
  
  }
  @media (max-width: 768px) {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 30px; /* Daha küçük genişlik */
        height: 30px; /* Daha küçük yükseklik */
    }
}

@media (max-width: 576px) {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 30px; /* Daha küçük genişlik */
        height: 30px; /* Daha küçük yükseklik */
    }
}
/*! Slider Css End */
/* *********************************************** */

/*! Background Text Css Start */
    .background-text {
        color: rgb(110, 110, 110);
        font-size: 3em;

        z-index: -1;
        /* Arka planda olması için */
        opacity: 0.2;
        /* İsteğe bağlı: saydamlık ayarı */
    }

    @media (max-width: 576px) {
        .background-text {
            color: rgb(110, 110, 110);
            font-size: 1.5em;
    
            z-index: -1;
            /* Arka planda olması için */
            opacity: 0.2;
            /* İsteğe bağlı: saydamlık ayarı */
        }
    }

/*! Background Text Css End */

/* *********************************************** */
/*! Güncel Section Start  */

.güncel-img {
    width: 100%;
    /* Resmin kartın genişliği kadar genişlemesini sağlar */
    height: 300px;
    /* Belirli bir yükseklik ayarlayın */
    object-fit: cover;
    /* Resmin kesilmeden düzgün görünmesini sağlar */
}

/*! Güncel Section End  */



/* *********************************************** */
/*! Footer Css Start */
.footer-title{
    font-weight: 800;
    color: var(--mavi);
}
#footer .footer-bottom {

padding-top: 30px;
padding-bottom: 30px;
color: #fff;
}
.clearfix{
    background-color: var(--mavi)!important;
}

#footer .copyright {
float: left;
}

#footer .credits {
float: right;
font-size: 13px;
}

#footer .credits a {
transition: 0.3s;
}
.credits-link{
    transition: 0.3s;
}
.credits-link:hover{
    color: var(--sari) !important;
}

@media (max-width: 768px) {
#footer .footer-bottom {
  padding-top: 20px;
  padding-bottom: 20px;
}


#footer .copyright,
#footer .credits {
  text-align: center;
  float: none;
}

#footer .credits {
  padding-top: 4px;
}
}
/*! Footer Css End */
/* *********************************************** */