,html, body {
  overflow-x: hidden; /* Yatay kaydırmayı engeller */
  margin: 0px!important;
}


@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.home-page {
  font-family: 'Urbanist', sans-serif;
}
.hero-right-img-mobile{
  display: none!important;
}

/* Hero divinin arka plan animasyonu */
.home-page-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
 
  background: radial-gradient(circle, #d7543080, #9E468480, #389EBC80, #30764280);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@media (min-width: 600px){
	.home-page-hero{

	height: 100vh;
}


}

.hero-right-img{
  width: 50%;
}

.hero-page-title{
  font-size: 3.2em;
  color: #101010;
  width: 80%;
  padding-top: 3%;
  margin-left: 7%;
}


.hero-left-desciption{
  font-size: 1.25em;
  color: #6F6F6F;
  width: 80%;
  margin-left: 7%;
}

.hero-buttons{
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 60%;
  margin-left: 7%;
  
  gap: 10px;
}

.services-button{
  background-color: white;
  color: #101010;
  font-family: 'Urbanist', sans-serif;
  border-radius: 10px;
  border: none;
  height: 40px;
  width: 90%;

}

.appointment-button{
  background-color: #1D5680;
  color: white;
  border-radius: 10px;
  font-family: 'Urbanist', sans-serif;
  border: none;
  height: 40px;
  width: 90%;
}

.explore-our-works h3{
  font-size: 1.5em;
  padding-bottom: 20px;
  margin-left: 7%;
}

.explore-our-works{
  padding-top: 20px;
  padding-bottom: 20px;
}

.work-contents-slider{
display: flex;                 /* Flexbox kullan */
    overflow: hidden;
  font-family: 'Urbanist', sans-serif;
}

.works-content {
    display: flex;                 /* Flexbox kullan */
    flex-direction: column;       /* Dikey hizalama */
    justify-content: space-between; /* İç öğeleri dikeyde eşit aralıklı yerleştir */
    height: 100%;                 /* Kartın yüksekliğini ayarlamak için */
    padding: 20px;                /* İçerik için padding ekleyin (isteğe bağlı) */
    background-color: #fff;      /* Kart arka plan rengi (isteğe bağlı) */
    width: 70%!important;
    min-height: 300px;
}



.works-content h4{
  font-size: 1.2em;
}

.works-content button{
  background-color: transparent;
  border: none;
  font-family: 'Urbanist', sans-serif;
  padding-left: 0px;
  color: #389EBC;
  font-weight: bold;
  margin-top: auto!important;
}

.works-content button:hover{
  cursor: pointer;
}
.costumer-companies {
  position: relative;
  width: 100%;
  height: auto;
}

.background-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background-image-costumers {
  width: 100%;
  padding-top: 30px;
  height: auto;
  object-fit: cover; /* Görselin konteyneri tamamen kaplamasını sağlar */
}

.costumer-companies-title {
  position: absolute;
  top: 24%; /* Başlığın üstten mesafesini ayarlar */
  left: 50%;
  transform: translateX(-50%);
  color: white; /* Arka plandan ayırt etmek için renk belirle */
  z-index: 2; /* Başlığın logoların üzerinde görünmesini sağlar */
  text-align: center;
  width: 80%; /* Genişlik ayarı, ihtiyaç durumunda ayarlanabilir */
  font-size: 2vw; /* Başlık boyutu */
}

.logo-overlay {
  position: absolute;
  top: 60%; /* Logoları dikey olarak ortalar */
  left: 50%; /* Logoları yatay olarak ortalar */
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between; 
  align-items: center;
  width: 80%; /* İhtiyacınıza göre genişliği ayarlayabilirsiniz */
  margin: 0 auto;
}

.company-logo-home:hover {
  filter: grayscale(0);
}

.company-logo-home {
  max-height: 150px;
  max-width: 300px;
  filter: brightness(0) invert(1); 
}

.strategies-intro-header{
  text-align: center;
  font-size: 1.5em;
}

.strategies-intro-section{
  display: flex;
  flex-direction: row;
  
  padding: 10px 30px;
}

.strategy-intro-card{
  width: 30%;
  margin: 10px 35px;
	  
}

.strategy-intro-icon{
  margin-right: 42%;
  margin-left: 42%;
}

.strategy-intro-text{
  text-align: center;
  
}

.strategies-intro-slider{
  display: none;
}

.strategies-section {
  padding: 10px 20px;
  padding-bottom: 30px;
}

.strategy-card {
  margin-right: 20px; /* Kartlar arasında boşluk ekleyin */
  margin-left: 20px; /* Kartlar arasında boşluk ekleyin */
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30px 0;
  padding-bottom: 0px;

  width: 100%!important; /* Kart genişliğini tam genişlikte yapın */
  box-sizing: border-box; /* Padding ve border'ın genişlik hesaplamasına dahil edilmesini sağlar */
}

.strategy-card-home:nth-child(odd) {
  flex-direction: row; /* 1. ve 3. kartlar: resim solda, metin sağda */
}

.strategy-card-home:nth-child(even) {
  flex-direction: row-reverse; /* 2. ve 4. kartlar: resim sağda, metin solda */
}

.strategy-text {
  flex: 1;
  padding: 0 10px;
  max-width: 60%; /* Metin alanının maksimum genişliği */
}

.strategy-text h4 {
  font-size: 1.45em;
  margin-left: 9%;
}

.strategy-description {
  font-size: 1em!important;
  text-align: left;
}

.strategy-image {
  
  flex: 1;
  max-width: 40%;
}

.strategy-image img {
  width: 100%; /* Resmin genişliğini konteynerine göre ayarla */
  height: auto; /* Resmin yüksekliğini oranlı olarak ayarla */
}

.partners-section h2{
  text-align: center;
  font-size: 1.5em;
  margin-bottom: auto;
}

.partners-section{
  padding-top: 20px;
  padding-bottom: 0px!important;
  margin-bottom: 0px!important;
}

.partners-section img{
  width: 60%;
  margin-left: 17%;
  margin-right: 17%; 
}

.scroll-to-top-btn{
  background-color: transparent;
  border: none;
  margin-left: 90%;
  margin-top: -100px;
  width: 10px!important;
  height: auto;

}

.scroll-to-top-btn:hover{
  cursor: pointer;
  
}

.work-contents-slider{
margin-left: 7%;
}


@media (max-width: 600px) {
  .home-page-hero {
    display: flex;
    flex-direction: column; /* Dikey düzenleme */
    align-items: center; /* Merkezi hizalama */
    text-align: center; /* Yazıları ortalar */
    padding: 20px;
    height: 50vh;
    background: none;
  }
  
  .hero-left {
    display: flex;
    flex-direction: column; /* Dikey düzenleme */
    align-items: center; /* Merkezi hizalama */
    margin-bottom: 20px; /* Diğer öğelerle araya boşluk bırakır */
  }
 

  .hero-left {
    margin-bottom: 0; /* Küçük ekranlarda margin-bottom değerini sıfırlar */
  }

  .hero-right-img{
    display: none!important;
  }

  .hero-right-img-mobile{
    margin: 20px;
    display: flex!important;
    width: 80%;
  }
  
  .hero-left-title {
    margin: 0px!important;
    font-size: 1.5em; /* Küçük ekranlarda başlık boyutunu küçültür */
  }
  
  .hero-left-description {
    font-size: 1em; /* Küçük ekranlarda açıklama metni boyutunu küçültür */
  }
  
  .hero-buttons {
    margin: 0px!important;
    flex-direction: row; /* Butonları dikey olarak yerleştirir */
    gap: 10px; /* Butonlar arasına boşluk bırakır */
    padding-bottom: 20px;
  }

  .home-hero-description{
    display: none!important;
  }
  
  .services-button {
    background-color: #389EBC;
    color: white;
  }

  .explore-our-works h3{
    display: none;
  }

  .explore-our-works{
    padding-top: 70px!important;
    margin-right: 0px!important;
    padding-right: 0px!important;
    margin-left: 0px!important;
    padding-left: 0px!important;
  }


  .partners-section img{
    margin: 0px!important;
    padding: 0px!important;
    align-items: center!important;
    width : 100%;
  }
  .works-content{
    margin-right: 0px!important;
    padding-right: 0px!important;
    margin-left: 0px!important;
    padding-left: 0px!important;
    
  }
  .work-contents-slider{
    margin-right: 0px!important;
    padding-right: 0px!important;
    margin-left: 0px!important;
   justify-content: space-between;
flex-direction: column;   
 padding-left: 0px!important;
    font-size: 1em;
    text-align: center;
    width: 100%;
    
  }

  .work-contents-slider img{
    
    margin-left: 40%;
  }

  .background-image-costumers{
    display: none;
  }

  .logo-overlay{
    
    display:contents;
  }

  .costumer-companies{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .company-logo-home
  {
    margin-right:2%;
    margin-left: 2%;
    max-width: 23%;
    max-height: 60px;
  }

  .strategies-intro-slider{
    display: contents;
  }

  .strategies-intro-section{
    display: none;
  }

  .strategy-intro-slider-card{
    font-size: 1em;
    width: 90%;
  }

  .strategies-section{
    padding: 0px!important;
    margin: 0px!important;
    display: flex;
    flex-direction: column;
    width: 100%!important; /* Resmin kartın tamamını kaplamasını sağlar */

  }

  .strategy-card {
    padding: 0px!important;
    margin: 0px!important;
    height: auto;
    display: flex;
    flex-direction: column!important; /* Kart içindeki elemanları dikey olarak düzenler */
    align-items: center!important; /* Merkezi hizalama */
    width: 100%!important; /* Kartın genişliğini tam yapar */
  }

  .strategy-image {
    padding: 0px!important;
    margin: 0px!important;
    width: 100%!important; /* Resmin kartın tamamını kaplamasını sağlar */
    display: flex;
    justify-content: center; /* Resmi yatayda ortalar */
    margin-bottom: 15px; /* Resim ile başlık arasında boşluk bırakır */
  }

  .strategy-image img {
    margin: 0px!important;
    
    margin-left: 10%!important;
    padding: 0px!important;
    width: 130%!important; /* Resmin genişliğini kart genişliğine göre ayarlar */
    height: auto; /* Yüksekliği orantılı yapar */
  }

  .strategy-text {
    margin-bottom: 0px!important; /* Metin ile alt kısım arasında boşluk bırakır */
    padding-bottom: 0px!important;
    margin-left: -20%!important;
    width: 100%!important; /* Metin alanını kartın tamamını kaplayacak şekilde ayarlar */
    text-align: center; /* Başlık ve açıklamayı ortalar */
    /* margin: 0px!important; */
    padding: 0px!important;
    
  }

  .strategy-text h4 {
    padding: 0px!important;
    margin-left: 22%!important;
    text-align: center!important;
    align-items: center!important;
    align-self: center!important;
    width: 100%!important;
    font-size: 1.25em; /* Başlık boyutu */
    margin-bottom: 20px!important; /* Başlık ile açıklama arasında boşluk bırakır */
  }

  .strategy-description {
    
    font-size: 1em; /* Açıklama metni boyutu */
    margin: 0px!important;
    width: 150%!important;
    margin-top: 30px!important;
    padding: 0px!important;
    text-align: center;
    padding-bottom: 20px!important;
  }

  .scroll-to-top-btn img{
    width: 40px;
    height: 40px;
    
    
  }
}