@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;0,800;0,900;1,200;1,400;1,600;1,800;1,900&display=swap");

  @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
  @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap");
  /* Bağlantılara hover efekti uygular, mevcut renk korunur */

  a:hover {
    color: currentColor;
  }

  body {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 15px;
    background-position: center;
    background-repeat: repeat;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: -4;
  }
@media (max-width: 768px) {
    #Only_T {
        display: none; /* Mobil cihazlarda resmi gizle */
    }

}
@media (max-width: 768px) { 

    .col-md-12 {
        text-align: center; /* Mobil cihazlarda içeriği ortala */
    }
  .mobile-spacing {
      margin-top: 100px;
  }
  .btn-custom {
    background-color: #333333; /* Button background color */
    color: #ffffff; /* Text color, assuming you want white text */
    border-color: #333333; /* Border color if needed */
}

}
/* Optional: Change color on hover */
.btn-custom:hover {
    background-color: #2a2a2a; /* Darker shade for hover effect */
    border-color: #2a2a2a;
    overflow-x: hidden;
    color: #ffffff; 
}

  /* HTML için temel font boyutunu ayarlar */
  html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    margin: 0 -14px 0 0 ;
    padding: 0;
    z-index: -4;

  }
  /* Bağlantılar için genel stil */
  a {
    text-decoration: none;
  }

  /* Altı çizili olmayan bağlantılar için stil */
  a.no-underline {
    text-decoration: none;
  }


  /* Üstte bulunan logo sınıfı */
  .logo-background {
    position: fixed;
    top: 40px;
    left: 50px;
    display: block;
    z-index: 10;
    transition: all 250ms linear;
  }

  .logo-background img {
    height: 50px;
    width: auto;
    display: block;
  }

  .logo {
    position: fixed;
    top: 40px;
    left: 50px;
    display: block;
    z-index: 11;
    transition: all 250ms linear;
  }

  .logo img {
    height: 50px;
    width: auto;
    display: block;
  }

  /* nav bar sınıfı */

  .section-center {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 6;
    text-align: center;
    transform: translateY(-50%);
  }

  [type="checkbox"]:checked,
  [type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
  }

  .menu-icon:checked+label,
  .menu-icon:not(:checked)+label {
    position: fixed;
    top: 63px;
    right: 75px;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 10;
  }

  .menu-icon:checked+label:before,
  .menu-icon:not(:checked)+label:before {
    position: absolute;
    content: "";
    display: block;
    width: 30px;
    height: 20px;
    z-index: 20;
    top: 0;
    left: 0;
    border-top: 3px solid white;
    border-bottom: 3px solid white;

  }

  .menu-icon:checked+label:after,
  .menu-icon:not(:checked)+label:after {
    position: absolute;
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    z-index: 20;
    top: 10px;
    right: 4px;
    background-color: white;
    margin-top: -1px;

  }

  .menu-icon:checked+label:before {
    top: 10px;
    transform: rotate(45deg);
    height: 2px;
    background-color: white;
    border-width: 0;
    transition: border-width 100ms 340ms ease,
      top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
      height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
      background-color 200ms 500ms ease,
      transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu-icon:checked+label:after {
    width: 30px;
    margin-top: 0;
    right: 0;
    transform: rotate(-45deg);
    transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease,
      transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .nav {
    position: fixed;
    top: 0;
    right: -100vw; /* Yarım ekran genişliğinde dışarıda başlar */
    width: 100vw; /* Yarım ekran genişliği */
    height: 100vh; /* Tam ekran yüksekliği */
    background-color: #333333; /* Arka plan rengi */
    transition: right 0.5s ease; /* Sağdan sola kayma animasyonu */
    z-index: 9;
    overflow: hidden;
  }

  .menu-icon:checked~.nav {
    right: 0; /* Menüyü ekrana getir */
  }

  .nav ul {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    z-index: 6;
    right: 10%;
    
    text-align: right;
    transform: translateY(-50%);
    list-style: none;
  }

  .nav ul li {
    position: relative;
    display: block;
    padding: 0;
    margin: 15px 20px;
    text-align: left;
    list-style: none;

    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all 250ms linear;
  }

  .nav ul li a {
    font-family: "Montserrat", sans-serif;
    font-size: 5vh;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 600;
    display: inline-block;
    position: relative;
    color: #ececee;

  }

  .nav ul li a:hover {
    text-decoration: none;
    color: white; /* Renk değişikliğini kaldır */
    font-weight: bold; /* Yazıyı kalın yap */
  }

  .nav ul li a:after {
    display: block;
    position: absolute;
    top: 50%;
    content: "";
    height: 2vh;
    margin-top: -1vh;
    width: 0;
    left: 0;
    background-color: #353746;
    opacity: 0.8;
    transition: width 250ms linear;
  }

  .nav ul li a:hover:after {
    width: 0; /* Genişliği sıfıra ayarla */
    background-color: transparent; /* Arka planı şeffaf yap */
  }
  .menu-icon:checked~.nav ul li {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: none; /* Animasyonları kaldır */
  }
  .navbar-top-stripe {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 130px; 
    background-color: #333333; /* Şeridin rengi */
    z-index: 8; /* Navbar altında olmasını sağla */
  }
  
  /* Diğer stiller aynı kalacak */

  /* Tablet için medya sorgusu (genellikle 768px'e kadar olan ekranlar için) */
  @media screen and (max-width: 768px) {
    .menu-icon:checked+label,
    .menu-icon:not(:checked)+label {
      top: 20px; /* Menü butonunun konumunu ayarla */
      right: 50px;

    }
    .nav ul li {
      margin: 2px 20px; /* 'margin' değerini artır */
      text-align: right; /* Tüm listeyi sağa hizala */
      right: 0; /* 'right' özelliğini güncelle */

    }
    .nav ul {
      text-align: right; /* Tüm listeyi sağa hizala */
      right: 0; /* 'right' özelliğini güncelle */
      }
    .nav {
      right: -100vw; /* Ekranın dışında */
      width: 100%; /* Tam ekran genişliği */
      height: 100vh; /* Tam ekran yüksekliği */
    }

    .nav ul li a {
      font-size: 5vh; /* Linklerin font boyutunu ayarla */
      line-height: 0.9;
    }
  }

  /* Mobil için medya sorgusu (genellikle 480px'e kadar olan ekranlar için) */
  /* Diğer stiller aynı kalacak */

  /* Mobil için medya sorgusu (genellikle 480px'e kadar olan ekranlar için) */
  @media screen and (max-width: 480px) {
    .menu-icon:checked+label,
    .menu-icon:not(:checked)+label {
      top: 40px; /* Menü butonunun konumunu ayarla */
      right: 35px;
    }
    .nav ul {
      right: 0; /* Sağdan boşluk bırakmaz */
      left: 0; /* Soldan boşluk bırakmaz */

      padding-right: 0; /* Sağ padding'i sıfırla */

      margin: 15px 20px; /* 'margin' değerini artır */
  }
    .nav {
      right: -100vw; /* Ekranın dışında başlar */
      width: 100vw; /* Tam ekran genişliği */
      height: 100vh; /* Tam ekran yüksekliği */
      transition: right 0.5s ease;
    }

    .menu-icon:checked~.nav {
      right: 0; /* Menüyü ekrana getir */
    }

    .nav ul li a {
      font-size: 4vh; /* Linklerin font boyutunu ayarla */
      text-align: center; /* Link metinlerini ortalar */
      width: 100%;
      margin: 15px 20px; /* 'margin' değerini artır */
    }
  }


  @keyframes textEnter {
    0% {
      transform: translateX(-100%); /* Sağdan sola kayma */
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes textExit {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(100%); /* Soldan sağa kayma */
      opacity: 0;
    }
  }
  
  .carousel-text-enter {
    animation: textEnter 0.5s ease forwards; /* Süreyi 0.5 saniyeye düşür */
  }
  
  .carousel-text-exit {
    animation: textExit 0.5s ease forwards; /* Süreyi 0.5 saniyeye düşür */
  }
  


  /* hem ana sayfadaki menü fotolar hemde galeri*/
  .highlighted-text {
    font-weight: bold; /* Yazıyı kalın yap */
    /* İsterseniz, bu yazı için diğer stil özelliklerini de burada tanımlayabilirsiniz */
}

.carousel-text {
    position: absolute;
    bottom: 9vw;
    left: 16vw;
    color: white;
    font-size: 3vw;
    font-weight: normal; /* Diğer metinler normal kalacak */
    line-height: 1.2;
    text-align: left;
    z-index: 6;
}



@keyframes slideFromLeft {
  from {
      transform: translateX(-100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

.carousel-text-fetured {
  position: absolute;
  bottom: 5vw;
  left: 60vw;
  color: white;
  font-size: 3vw;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
  z-index: 6;
  opacity: 0; /* Başlangıçta görünmez */
  /* Animasyon özellikleri burada başlatılmayacak, JavaScript ile kontrol edilecek */
}
.carousel-text-wwd {
  position: absolute;
  bottom: 5vw;
  left: 30vw;
  color: white;
  font-size: 3vw;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
  z-index: 6;
  opacity: 0; /* Başlangıçta görünmez */
  /* Animasyon özellikleri burada başlatılmayacak, JavaScript ile kontrol edilecek */
}


  .carousel-text-costum {
    position: absolute;
    bottom: 3vw;
    /* veya başka bir değer */
    left: 5vw;
    /* veya başka bir değer */
    color: white;
    font-size: 2vw;
    /* veya başka bir değer */
    font-weight: bold;
    /* animation: fadeInOut 5s ease-in-out infinite; */
    /* transition: transform 0.3s ease; */
    line-height: 1.2; /* Satır yüksekliği, metni daha da birbirine yaklaştırır */
    text-align: left; 
    /* Animasyon süresi ve tipi */
    z-index: 6;
  }
  .carousel-inner {
    position: relative;
    width: 100%;
    height: auto;
  }






  /* what we do kısmı*/

  .MainTitle_Dark {
    font-size: 30px;
    font-weight: bold;
    color: #464749;
    /* Koyu renk tema için yazı rengi */
    text-transform: uppercase;
    margin-top: 50px;
  
  }




  .MainTitle_Dark_index {
    font-size: 70px;
    font-weight: bold;
    color: #464749;

    text-transform: uppercase;
    margin-top: -10px;
    margin-left: -25px;
  
  }

  .img-hover-zoom {
    position: relative;

}
  
  .img-hover-zoom img {
    width: 100%;
    transition: transform 0.5s ease;
    /* Görüntüyü ölçeklendirme orijinal boyutunda başlar */
    transform: scale(1);
    transform-origin: center center;/* Başlangıçta resmi biraz küçült */
    overflow: hidden; 
  }
  
  .img-hover-zoom:hover img {
    transform: scale(1.03);
    overflow: hidden; 
    
  }


  .supply-container:hover .supply-title-line {
    width: 100%;
  }

  .supply-title-line-container {
    width: 100%;
    height: 4px;
    background: #fff;
    margin-top: 5px;
    position: relative;
  }

  .supply-title-line {
    display: block;
    width: 0;
    height: 100%;
    background: #333;
    position: absolute;
    top: 0;
    right: 0;
    transition: width 0.5s ease;
  }

  .supply-container:hover .supply-paragraph {

    transition: font-weight 0.3s ease;
  }

  .supply-paragraph {
    transition: font-weight 0.3s ease;
    font-weight: bold;
    text-align: left;

  }
/* 
  .design-container:hover .design-title-line,
  .design-container:hover .design-paragraph,
  .img-hover-zoom:hover~.design-container .design-title-line,
  .img-hover-zoom:hover~.design-container .design-paragraph,
  .build-container:hover .build-title-line,
  .build-container:hover .build-paragraph,
  .img-hover-zoom:hover~.build-container .build-title-line,
  .img-hover-zoom:hover~.build-container .build-paragraph {
    width: 100%;

  }

  .design-title-line,
  .build-title-line {
    width: 0;
    height: 4px;

    background: #333;

    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.5s ease;
  }

  .design-title-line-container,
  .build-title-line-container {
    width: 100%;

    height: 4px;

    background: #fff;

    margin-top: 5px;

    position: relative;
  }

  .design-paragraph,
  .build-paragraph {
    transition: font-weight 0.3s ease;

  } */

  .featured-projects-container {
    position: relative;
    /* Pozisyonlandırma için relative tanımlıyoruz */
    width: 100%;
    /* Konteynerin genişliğini tam ekran yap */
    height: auto;
    /* Konteynerin yüksekliğini otomatik ayarla */
    overflow: hidden;
    /* Taşan kısımları gizle */
  }

  .featured-projects-title {
    position: absolute;
    /* Başlığı pozisyonlamak için absolute kullanıyoruz */
    bottom: 10px;
    /* Alt kısımdan 10px yukarıda */
    right: 0%;
    /* Sağ kısımdan %0 içeride */
    color: white;
    /* Yazı rengi beyaz */
    font-size: 100THpx;
    /* Yazı boyutu */
    padding: 5px 10px;
    /* İç boşluk */
    background-color: transparent;
    /* Arka planı şeffaf */
    animation: fadeIn 2s ease;
    /* Fade-in animasyonu */
    white-space: nowrap;
    /* Yazının satır atlamaması için */
  }

  /* Animasyon için keyframes */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }



  .WhatWeDoAnimation div[name="zoomImage"] {
    overflow: hidden;
  }

  .WhatWeDoAnimation div[name="zoomImage"] img {
    transition: transform 0.5s ease;
  }

  .WhatWeDoAnimation:hover div[name="zoomImage"] img {
    transform: scale(1.2);
    /* Hover durumunda resmi büyütür */
  }

  .WhatWeDoAnimation:hover line[name="lineUnderText"] {
    opacity: 100;
    /* Metnin altındaki çizgiyi gösterir */
  }
  

  .SubTitle_Dark {
    font-size: 80px;
    font-weight: bold;
    color: #464749;
    text-transform: uppercase;
  }

  .SubTitle_White{
    font-size: 6vh;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
  }

  .Paragraph_Dark {
    color: #464749;

    
    /* Koyu renk tema için metin rengi */
  }


  .Paragraph_Dark_retail {
    color: #464749;
    margin-left: -25px;
    font-size: 15px;
  }
  .Paragraph_White {
    color: white;
    font-size: 14px;
    
    /* Koyu renk tema için metin rengi */
  }

  /*retail ve hospitality*/
  .rotate-icon {
    transition: transform 0.3s ease;
  }

  a:hover .rotate-icon {
    filter: brightness(80%);
  }
.logos{
  margin-left:-35px;
   margin-top: -25px;
}
.logos_hosp{

  margin-left:-35px;
  margin-top: 10px;
}
  /* retail ve hospitality yazısı için efekt   */
  /* Linklerin üzerine gelindiğinde içerdiği tüm metinleri ve başlıkları kalınlaştırıyoruz */

  a.myCustomLink:hover {
    color: currentColor;
  }

  /* featurd projects*/
  .MainTitle_Light {
    font-size: 70px;
    /* Font boyutu */
    font-weight: bold;
    /* Font kalınlığı */
    color: white;
    /* Yazı rengi */
    text-transform: uppercase;
    /* Tüm harfleri büyük yapar */
  }

  .full-width-image {
    position: relative;
    text-align: right;
  }

  .full-width-image .featured-text {
    position: absolute;
    bottom: 10px;
    /* Adjust as needed */
    right: 10px;
    /* Adjust as needed */
    color: white;
    /* Or any color you prefer */
    font-size: 24px;
    /* Adjust as needed */
    background-color: rgba(0, 0, 0, 0.5);
    /* Optional: for better readability */
    padding: 5px;
    /* Optional: for better readability */
  }

  .full-width-image img {
    width: 100%;
    height: auto;
  }



  /* galeride bulunan fotoğraflar için*/
  .carousel-indicators {
    list-style: none;
    filter: invert(100%);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Yuvarlak şekil */
    background-color: #fff;
    margin: 0 5px;
    border-radius: 50%;
    /* Make them circles */
    cursor: pointer;
  }

  .carousel-indicators li.active {
    background-color: #007bff;
    /* Aktif gösterge rengi */
  }

  /*Geneller*/
  .carousel-caption h5 {
    font-size: 1rem;
    color: white;
    transition: font-size 0.5s ease, color 0.5s ease;
  }

  .carousel-caption h5.scrolled {
    font-size: 10rem;
    color: black;
  }

  .col-4 h5 {
    margin-top: 20px;
    /* Yazıyı 10 piksel aşağıya kaydırır, istediğiniz değeri ayarlayabilirsiniz */
  }

  /* Webkit tarayıcılar için (Chrome, Safari, yeni Edge) */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox için */
  * {
    scrollbar-width: none;
    /* Firefox için scrollbar'ı gizler */
  }

  /* IE ve Edge için */
  * {
    -ms-overflow-style: none;
    /* Internet Explorer ve eski Edge sürümleri için */
  }


  /* Kaydırma animasyonu için keyframes */
  .DoSlid {
    animation-name: slide;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  @keyframes slide {
    from {
      left: 100vw;
    }

    to {
      left: 0vw;
    }
  }

  /* Fade out animasyonu için keyframes */
  .DoFade {
    animation-name: fadeOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }


  /* Mevcut stilleriniz burada yer alacak */

  @media screen and (max-width: 768px) {

    .logo-background,
    .logo {
      top: 40px;
      left: 30px;
    }

    .logo-background img,
    .logo img {
      height: 30px;
    }






  .nav ul {
    display: flex;
    flex-direction: column;
    align-items: center; /* Yatay olarak ortalar */
    justify-content: center; /* Dikey olarak ortalar */
    list-style-type: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    text-align: center;
  }

  /* ... Diğer CSS Kodlarınız ... */

    .carousel-text {
      font-size: 3vw; /* Yazı boyutu */
      bottom: 5vw; /* Alt boşluk */
      left: 5vw; /* Sol boşluk */
      line-height: 1.2; /* Satır yüksekliği, metni daha da birbirine yaklaştırır */
      text-align: left; /* Tüm metni sola hizalar */

    }

    .carousel-item {
      width: 100vw;
      /* Genişlik tam ekran genişliği */
      height: 100vh;
      /* Yükseklik tam ekran yüksekliği */
    }

    .carousel-item img {
      width: 100%;
      height: 100vh;
      /* Yükseklik tam ekran yüksekliği */
      object-fit: cover;
      /* Resmi orantılı olarak sığdır */
    }

    /* Mevcut stilleriniz burada yer alacak */

    /* Tüm container'lar için genel stil */
    .design-container,
    .supply-container,
    .build-container {
      width: 100%;
      /* Genişliği %100 yap */
      margin-bottom: 20px;
      /* Altta boşluk bırak */
      text-align: center;
      /* İçeriği ortala */
    }



    .design-container,
    .supply-container,
    .build-container {
      order: 2;
      /* Yazı ve logo sınıflarını resmin altına getir */
    }

    /* Çizgi stillerini ayarla */
    .design-title-line-container,
    .supply-title-line-container,
    .build-title-line-container {
      margin: 10px auto;
      /* Üst ve alt boşluk, otomatik yan boşluk */
      display: block;
      /* Blok seviyesinde gösterim */
      width: 50%;
      /* Çizgi genişliğini %50 yap */
    }

    /* Mobil cihazlarda yazı boyutunu ayarla */
    .design-paragraph,
    .supply-paragraph,
    .build-paragraph {
      font-size: 14px;
      /* Yazı boyutunu küçült */
    }

    /* Logo, çizgi ve yazı için ekstra stil ayarlamaları */
    .design-container img,
    .supply-container img,
    .build-container img,
    .design-title-line,
    .supply-title-line,
    .build-title-line,
    .design-paragraph,
    .supply-paragraph,
    .build-paragraph {
      margin-left: auto;
      /* Sol boşluğu otomatik yap */
      margin-right: auto;
      /* Sağ boşluğu otomatik yap */
      display: block;
      /* Blok seviyesinde gösterim */
    }

    .supply-container .col-md-12 {
      text-align: center;
      /* İçeriği ortala */
      display: flex;
      /* Flexbox kullan */
      flex-direction: column;
      /* Öğeleri dikey sırala */
      align-items: center;
      /* Yatayda ortala */
    }

    .supply-container img {
      width: 120px;
      /* Logonun genişliğini ayarla */
      margin-bottom: 10px;
      /* Logonun altında boşluk bırak */
    }

    .supply-container .SubTitle_Dark,
    .supply-container .Paragraph_Dark {
      margin: 0;
      /* Üst ve alt marjları sıfırla */
    }

    .supply-title-line-container {
      width: 50%;
      /* Çizgi genişliğini %50 yap */
      margin-top: 10px;
      /* Çizgi üstündeki boşluğu ayarla */
      margin-bottom: 10px;
      /* Çizgi altındaki boşluğu ayarla */
    }

    .col-md-6 {
      width: 100%;
      /* Genişliği %100 yap */
      margin-bottom: 20px;
      /* Altta boşluk bırak */
    }

    .col-md-3 {
      width: 100%;
      /* Logonun genişliğini %100 yap */
      margin-bottom: 5px;
      /* Logonun altında az boşluk bırak */
    }

    .col-md-9 {
      width: 100%;
      /* Metnin genişliğini %100 yap */
    }

    .rotate-icon {
      max-width: 50px;
      /* Logonun maksimum genişliğini küçült */
      margin: auto;
      /* Logoyu merkezle */
      display: block;
      /* Logoyu blok seviyesinde göster */
    }



    .MainTitle_Light {
      font-size: 10px;
      /* Örneğin 14px */
    }

  }

  /* Tablet cihazlar için medya sorgusu */
  @media screen and (min-width: 769px) and (max-width: 1024px) {

    .logo-background,
    .logo {
      top: 60px;
      left: 30px;
    }

    .logo-background img,
    .logo img {
      height: 40px;
    }


    .carousel-text {
      font-size: 4vw; /* Yazı boyutu */
      bottom: 5vw; /* Alt boşluk */
      left: 5vw; /* Sol boşluk */
      line-height: 1.2; /* Satır yüksekliği, metni daha da birbirine yaklaştırır */
      text-align: left; /* Tüm metni sola hizalar */
    }
  }

  .partner-logo {
    max-width: 100%;
    /* Bunu ekleyin */
    height: auto;
  }

  /* Mobil cihazlar için CSS medya sorgusu */
  @media (max-width: 768px) {
    .partner-logo {
      width: 50%;
      /* Mobil cihazlarda logo boyutunu ayarlayın */
    }
  }






  /*what we do css kısmı*/





  a:hover {
    color: currentColor;
  }

  body {
    font-family: 'Montserrat', sans-serif;
  }

  html {
    font-size: 14px;
  }

  @media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }

  .btn:focus,
  .btn:active:focus,
  .btn-link.nav-link:focus,
  .form-control:focus,
  .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
  }

  html {
    position: relative;
    min-height: 100%;
  }

  body {
    margin-bottom: 60px;
  }



  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .OverlayMenu {
    /* (A1) COVER ENTIRE SCREEN */
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 100vw;
    z-index: 999000000000000000000;
    background: #464749;
    ;
  }


  .DoSlid {
    animation-name: slide;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  @keyframes slide {
    from {
      left: 100vw;
    }

    to {
      left: 0vw;
    }
  }

  .DoFade {
    animation-name: fadeOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }


  a {
    text-decoration: none;
  }

  a.no-underline {
    text-decoration: none;
  }


  .MainTitle_Light {
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
  }



  .MainTitle_Mobile_Dark {
    font-size: 10vw;
    font-weight: bold;
    color: #464749;
    text-transform: uppercase;
  }

  .MainTitle_Mobile_Light {
    font-size: 10vw;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
  }

  .SubTitle_Ligth {
    font-size: 4vw;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
  }

  /* .SubTitle_Dark {
    font-size: 40px;
    font-weight: bold;
    color: #464749;
    text-transform: uppercase;
  } */



  .Paragraph_Light {
    color: white;
  }



  /*
      --------------------------------------------------------------------------
      round carasoul indicators
      --------------------------------------------------------------------------
  */


  .MIIII {
    opacity: 0;
    /* initial state */
    transition: opacity 2s ease-in-out;
    /* transition settings */
  }



  .carousel-indicators {
    list-style: none;
  }

  .carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
  }

  .carousel-indicators li.active {
    background-color: #007bff;
  }



  /*
      --------------------------------------------------------------------------
      --------------------------------------------------------------------------
  */

 



  /*
      --------------------------------------------------------------------------
      --------------------------------------------------------------------------
  */

  .Color-Dark {
    color: #464749;
  }

  .Color-Light {
    color: white;
  }

  /*
      --------------------------------------------------------------------------
      --------------------------------------------------------------------------
  */

  .WhatWeDoAnimation:hover text[name="svgNumver"] {
    fill: black;
  }

  .WhatWeDoAnimation div[name="zoomImage"] {
    overflow: hidden;
  }

  .WhatWeDoAnimation div[name="zoomImage"] img {
    transition: transform .5s ease;
  }

  .WhatWeDoAnimation:hover div[name="zoomImage"] img {
    transform: scale(1.2);
  }

  .WhatWeDoAnimation:hover line[name="lineUnderText"] {
    opacity: 100;
  }

  /*
      --------------------------------------------------------------------------
      --------------------------------------------------------------------------
  */




  .overlay-left, .overlay-right {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* İlk durumda saydam */
    transition: background-color 0.5s ease, left 0.5s ease, right 0.5s ease;
    display: flex;
    align-items: center; /* İçerikleri dikey olarak ortalar */
    justify-content: center; /* İçerikleri yatay olarak ortalar */
    z-index: 5;
    pointer-events: none; /* Etkileşim resme yönlendirilir */
}

.overlay-left {
    left: -100%; /* Sol overlay başlangıçta dışarıda */
}

.overlay-right {
    right: -100%; /* Sağ overlay başlangıçta dışarıda */
}

/* Yalnızca resim üzerine gelindiğinde overlay'leri göster */
.mmcontainer img:hover + .overlay-left {
    left: 0;
    background-color: rgba(33, 33, 33, 1); /* Siyah arka plana geçiş */
}

.mmcontainer img:hover + .overlay-right {
    right: 0;
    background-color: rgba(33, 33, 33, 1); /* Siyah arka plana geçiş */
}

.overlay-left ul, .overlay-right ul {
    color: white;
    list-style-type: none;
    margin: 80px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: x-large;
}

.overlay-left li, .overlay-right li {
    margin: 5px 0;
}

.NumberSvg {
    height: 30px;
    margin-right: 20px;
}


  /*------------------------------------------------------------------------------------*/

  /*button {
      font-style: normal;
      font-weight: normal;
  }*/

  /*hide checkbox */
  .toggle-checkbox {
    display: none;
  }

  /* Menu button */
  .toggle-label {
    cursor: pointer;
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 30px;
    right: 40px;
  }

  .bar {
    background-color: #f3f5ea;
    height: 2px;
    margin: 8px 0;
    transition: all 1s;
  }

  /* Hide menu */
  #menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: #333333;
    color: white;
    transition: right 0.5s ease-in-out;
    z-index: 1;
  }

  .phrase-container {
    position: absolute;
    width: 250px;
    height: 420px;
    top: 20%;
    right: 260px;
    overflow: hidden;
  }

  .phrase-container-Mobile {
    position: absolute;
    width: 250px;
    height: 420px;
    top: 20%;
    right: 60px;
    overflow: hidden;
  }

  /* Phrases displayed */
  .phrase {
    position: absolute;
    opacity: 0;
    transition: all 0.5s ease-in-out, opacity 1s ease-in;
    font-size: xx-large;
    font-weight: bold;

  }

  /* Menu and phrase animations */
  .toggle-checkbox:checked+.toggle-label+#menu {
    right: 0;
  }

  .toggle-checkbox:checked+.toggle-label .top,
  .toggle-checkbox:checked+.toggle-label .middle,
  .toggle-checkbox:checked+.toggle-label .bottom {
    transition-delay: 0.5s;
    /* Delay button transition until ... menu and phrases displayed */
  }

  .toggle-checkbox:checked+.toggle-label .top {
    transform: rotate(45deg);
    margin-top: 10px;
    margin-bottom: -10px;

  }

  .toggle-checkbox:checked+.toggle-label .middle {
    opacity: 0;
  }

  .toggle-checkbox:checked+.toggle-label .bottom {
    transform: rotate(-45deg);
    margin-top: -10px;
    margin-bottom: 10px;
  }







  /* Center category buttons */
  .categories {
    text-align: center;
    margin-top: 30px;
  }


  /* Style category*/
  .category {
    text-decoration: none;
    background: none;
    border: none;
    /*padding: 10px;*/
    cursor: pointer;
    /*font-size: 16px;*/
    color: #333333;
    position: relative;
    margin-bottom: 10px;
    margin-left: 10%;
    margin-right: 10%;
  }


  /* Style sub-category*/
  .sub-category {
    text-decoration: none;
    background: none;
    border: none;
    /*padding: 10px;*/
    padding-bottom: 10px;
    cursor: pointer;
    /*font-size: 16px;*/
    color: #333333;
    position: relative;
    margin-left: 2%;
    margin-right: 2%;
    display: inline-flex;

  }

  /* Hide sub-categories ((default)) */
  .sub-categories {
    display: none;
    margin-top: 30px;
  }

  /*selected category & sub-category */
  .category.selected::after,
  .sub-category.selected::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    /* Position line below text */
    width: 100%;
    height: 2px;
    /* Line thickness */
    background: #333333;
  }

  /* Initial state of hover animation line */
  .category::before,
  .sub-category::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: #333333;
    transition: all 0.8s ease-in-out;
  }

  /* Final state of hover animation line */
  .category:hover::before,
  .sub-category:hover::before {
    width: 100%;
    left: 0;
  }


  .carousel-control-next,
  .carousel-control-prev

  /*, .carousel-indicators */
    {
    filter: invert(100%);
  }

  .carousel-indicators {
    filter: invert(100%);
  }

  .full-screen-image {
    height: calc(100vh - 130px);
    width: 100vw;
    object-fit: cover; /*cover  */
    position: relative;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .content {
    margin-top: 100vh;
    /* Fotoğrafın altında içerik başlar */
  }



  .col-md-6 {
    font-weight: bold;
    /* Paragraf için kalın yazı */
  }

  .text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 30px;
    
    /* Veya istediğiniz piksel değerini kullanın */
  }

  @keyframes lineGrow {
    from {
      width: 0;
    }

    to {
      width: 160px;
      /* Çizginin tam uzunluğu */
    }
  }

  line[name="lineUnderText"] {
    width: 0;
    opacity: 1;
    transition: width 0.5s ease;
  }

  .WhatWeDoAnimation:hover line[name="lineUnderText"] {
    animation: lineGrow 0.5s forwards;
  }

  .WhatWeDoAnimation p {
    font-weight: normal;
    /* Normal font ağırlığı */
    transition: font-weight 0.3s ease;
    /* Yumuşak geçiş efekti */
  }

  .WhatWeDoAnimation:hover p {
    font-weight: bold;
    /* Fare üzerine gelindiğinde kalınlaşacak */
  }

  .WhatWeDoAnimation ul li {
    font-weight: normal;
    /* Normal font ağırlığı */
    transition: font-weight 0.3s ease;
    /* Yumuşak geçiş efekti */
  }

  .WhatWeDoAnimation:hover ul li {
    font-weight: bold;
    /* Fare üzerine gelindiğinde kalınlaşacak */
  }
  .build-icon {
    position: relative;
    top: -30px; /* İkonu yukarıya doğru ne kadar taşımak istediğinize bağlı */

  }
  .active-indicator {
    height: 3px; /* Çizginin kalınlığı */
    width: 80%; /* Çizginin genişliği, % olarak ayarlanabilir */
    background-color: #464749; /* Çizginin rengi */
    margin: 0 auto; /* Merkezde hizalamak için */
  }
  .Design-icon {
    position: relative;
    top: -20px; /* İkonu yukarıya doğru ne kadar taşımak istediğinize bağlı */
  }
  .Supply-icon {
    position: relative;
    top: -20px; /* İkonu yukarıya doğru ne kadar taşımak istediğinize bağlı */
  }




  .grey-container {
    background-color: #333333;
    padding: 20px;
    color: white; /* Metin rengi siyah */
    margin-right: -50px; /* Sağa doğru yanaşması için */
    margin-top: 50px; /* Üstten boşluk */
    margin-bottom: 50px; /* Altan boşluk */
    position: relative; /* Pozisyonu göreli yap */
    z-index: 6; /* Z-index ile üste çıkar */
    height: calc(100% - 100px); /* Toplam yükseklikten üst ve alt margınlar çıkarılır */
  }


  /* Fotoğrafı içeren div için ek stil */
  .image-container {
    position: relative; /* Pozisyon referansı */
  }

  /* img-fluid sınıfına z-index ve relative pozisyon ver */
  /* .img-fluid {
    position: relative;
    z-index: 1; 
  } */

  .section {
    margin-bottom: 50px; /* Her bölümün altında 50px boşluk */
  }
  .btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    border: 0;
    border-radius: 0.25rem;
    opacity: .5;
  }
  .img-hover-zoom h5 {
    margin-top: 50px; /* Yazıların üst boşluğunu ayarla */
    /* Diğer özellikler eğer varsa */
    overflow: hidden; 
  }
  .col-md-6 p{
    margin-top: 50px; /* Yazıların üst boşluğunu ayarla */
  }
  .col-md-4 h1{
    margin-top: 20px;

  }





  .img-fluid-costum {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Resmin boyutlarını koruyarak tamamen kaplamasını sağlar. */
  }



  /* for what we do  */
  .whatwedosize {
    font-size: 100px;
    font-weight: 100000;
    color: #464749;
    /* Koyu renk tema için yazı rengi */
    text-transform: uppercase;
    margin-top: 50px;
    line-height: 0.8;
  }
  .whatwedoparag {
    font-size: 18px;
    margin-top: 45px;
    margin-left: 100px;
  }
  /* Altı çizili olmayan bağlantılar için stil */
  .no-underline {
    text-decoration: none;
  }











  .container-costum {
    position: relative;
    height: calc(100vh - 130px);
    overflow: hidden;
    z-index: 2;
    
  }

  .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .floating-text {
    position: absolute;
    font-size: 4vw; /* Ekran genişliğine bağlı dinamik font boyutu */
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
  }

  .black-text {
    color: #464749;
    display: block; 
    z-index: -1;

    bottom: 100px;
    left: 810px; /* Soldan 40px */
    font-weight: bold; /* Metni kalın yap */
    text-transform: uppercase; /* Tüm harfleri büyük yap */

    font-size: 140px; /* Metin boyutunu ayarla */
  }

  .white-text {
    color: white;
    transition: visibility 0.1s linear;
    z-index: 0; 
    bottom: 100px;
    left: 810px; /* Soldan 40px */
    transform: translateY(-50%); /* Başlangıçta kaydırma olmadan */
    font-weight: bold; /* Metni kalın yap */
    text-transform: uppercase; /* Tüm harfleri büyük yap */
    font-size:140px; /* Metin boyutunu ayarla */
  }

  .carousel-control-next-icon {
    background-image: url('./icons/right-arrow.png'); /* Butonlar için özel ikon */
  }
  .carousel-control-prev-icon {
    background-image: url('./icons/left-arrow.png'); /* Butonlar için özel ikon */
  }

  .carousel-control-prev,
  .carousel-control-next {
    /* Buton stilleri */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    font-size: 24px;
  }
  .gray-background {
    background-color: #464749; /* Use the desired shade of gray */
    padding-right: 0; /* Remove right padding to extend to the edge */
    padding-left: 0; 

  }
  .gray-background-wrapper {
    background-color: #464749; /* Gri arka plan rengi */
    padding: 15px; /* Kutunun içeriğinden biraz boşluk bırak */
    display: flex; /* İçerikleri yatay olarak hizala */
}

.card {
  border: none; /* Kartın çerçevesini kaldır */
}

.card-body {
  display: flex; /* İçerikleri yan yana hizala */
}
  .yazi-rengi {
    color :#fff
  }

.white-fade {
  transition: opacity 4s ease-out; /* Smooth transition for fading */
}
#mainTitleBlack {
  z-index: 1; /* Lower z-index, appears below */
    font-size: 90px;
    color: #464749;
    margin-top: -150px;
    padding-right: 270px;


}

#mainTitleWhite {
  z-index: 3; /* Higher z-index, appears above */
    font-size: 90px;
    color: white;
    margin-top: -150px;
}


#whatWeDoSection .row {
  display: flex;
  align-items: center;
}
.lower-build-icon {
  margin-top: 60px; /* Üstten 20px boşluk */
}
.custom-container {
  max-width: 1400px; /* Varsayılan genişliğinden daha büyük bir genişlik */
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px; /* İçerik ve ekran kenarı arasındaki boşluğu ayarlar */
  padding-right: 0px; /* İçerik ve ekran kenarı arasındaki boşluğu ayarlar */
}

@media (max-width: 1400px) {
  .custom-container {
      max-width: 100%; /* Ekrandan daha küçükse, tam genişliğini kullan */
  }
}
.image-container-design {
  position: relative;
  width: 200px;
  height: 500px;
}

.outline-image, .fill-image {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease;
}

.fill-image {
  opacity: 0;
}


.hover-trigger:hover .fill-image {
  opacity: 1;
}
.container-costum-wwd {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.image {
  width: 49%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .container-costum-wwd {
      flex-direction: column;
  }
  .right {
      display: none;
  }
  .left {
      width: 100%;
      max-width: 100%;
  }
}

.carousel-costum {
  margin-left: 25%;
  margin-right: 25%;
}

ul.slides {
  display: block;
  position: relative;
  height: 600px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.slides * {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

ul.slides input {
  display: none; 
}


.slide-container { 
  display: block; 
}

.slide-image {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  transition: all .7s ease-in-out;
}   

.slide-image img {
  width: auto;
  min-width: 100%;
  height: 100%;
}

.carousel-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  font-size: 100px;
  line-height: 600px;
  color: #fff;
}

.carousel-controls label {
  display: none;
  position: absolute;
  padding: 0 20px;
  opacity: 0;
  transition: opacity .2s;
  cursor: pointer;
}

.slide-image:hover + .carousel-controls label{
  opacity: 0.5;
}

.carousel-controls label:hover {
  opacity: 1;
}

.carousel-controls .prev-slide {
  width: 10%;
  text-align: left;
  left: 0;
}

.carousel-controls .next-slide {
  width: 20%;
  text-align: right;
  right: 0;
}

.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 3;
  text-align: center;
}

.carousel-dots .carousel-dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
  margin: 10px;
}

input:checked + .slide-container .slide-image {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .carousel-controls label {
   display: block; 
}

input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
opacity: 1;
}
@media (max-width: 768px) {
    .carousel-costum {
        width: 100vw; /* Ekranın tam genişliği */
        margin-left: calc(-50vw + 50%); /* Merkeze yerleştir */
        overflow-x: hidden; /* Yatay taşmayı engelle */
    }

    .carousel-costum .slides {
        width: 100%; /* Slide'ların genişliğini ayarla */
    }

    .carousel-costum .slide-image img {
        width: 100%; /* Resimlerin genişliğini sınırla */
        height: auto; /* Resimlerin orijinal yüksekliğini koru */
    }

    /* Diğer gerekli mobil stil ayarlamalarınız */
}


input:checked + .slide-container .nav label { display: block; }
.custom-gallery-img {
  width: 150px;
  cursor: pointer;
  margin: 10px;
}

.custom-carousel {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}

.custom-carousel-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.custom-carousel-content img {
    max-height: 100vh;
    min-height: 100vh;  /* Maksimum yükseklik olarak ekranın %80'ini kullan */
 /* Resmi orantılı bir şekilde sığdır */
    width: auto; /* Genişliği otomatik ayarla */
    max-width: 100%; /* Maksimum genişlik olarak ekranın tamamını kullan */
}
.custom-carousel-thumbnails {
  position: absolute;
  bottom: 10px;
  
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 1000;
}

.custom-carousel-thumbnail {
  margin: 0 5px;
  cursor: pointer;
  border: 2px solid transparent;
  
}

.custom-carousel-thumbnail.selected {
  border-color: #ff0000;
}

.custom-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: black;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
}

.custom-close:hover, .custom-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.custom-prev, .custom-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  user-select: none;
  background-color: transparent;
  z-index: 1000;
}

.custom-prev:hover, .custom-next:hover {
  color: #555;
}

.custom-prev {
  left: 10px;
}

.custom-next {
  right: 10px;
}

.custom-carousel-description {
  position: absolute;
  bottom: 10px;
  left: 100px;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  color: black;
  font-weight: bold;
  font-size: 30px;
  z-index: 1000;
}

@media (max-width: 768px) {
  .custom-carousel-thumbnails {
      display: none; /* Küçük ekranlarda thumbnail'ları gizle */
  }
  
  .custom-carousel-description {
    position: absolute;
    bottom: 10px; /* Açıklamanın alttan uzaklığını ayarlayın */
    left: 0; /* Açıklamayı yatay olarak ortalamak için */
    transform: translateX(-50%); /* Açıklamayı tam ortaya almak için */
    color: black;
    font-size: 20px;
    z-index: 1000;
    transform: rotate(0deg); /* Dikey döndürmeyi kaldır */
    transform-origin: initial; /* Döndürme orijinini sıfırla */
}


.custom-prev, .custom-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  user-select: none;
  background-color: transparent;
  z-index: 1000;
}

.custom-carousel-content img {
 /* Maksimum yükseklik olarak ekranın %80'ini kullan */
  object-fit: contain;
 /* Maksimum genişlik olarak ekranın tamamını kullan */
}
}









.text-box {
  position: absolute;
  top: 50%;
  left: 100%; /* Sağda, dışarıda başlar */
  transform: translate(-50%, -50%);
  width:465px;
  height: 535px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  background-color: #73cac1;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none; /* .text-box üzerindeki fare etkileşimini devre dışı bırakır */
  z-index: -9;
}

/* .text-box hover durumu */
.img-hover-zoom:hover .text-box {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto; /* .text-box üzerindeki fare etkileşimini etkinleştirir */
}

/* .img-hover-zoom üzerine gelindiğinde .text-box gösterimi */
.img-hover-zoom:hover .text-box {
  right: 0; /* .img-hover-zoom'un içine girer */
}

.text-box-build {
  position: absolute;
  top: 50%;
  left: 101.5%; /* Sağda, dışarıda başlar */
  transform: translate(-50%, -50%);
  width:460px;
  height: 540px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  background-color: #f15f5e;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  z-index: -9;
  pointer-events: none; /* .text-box üzerindeki fare etkileşimini devre dışı bırakır */
}

/* .text-box hover durumu */
.img-hover-zoom:hover .text-box-build {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto; /* .text-box üzerindeki fare etkileşimini etkinleştirir */
}

/* .img-hover-zoom üzerine gelindiğinde .text-box gösterimi */
.img-hover-zoom:hover .text-box-build {
  right: 0; /* .img-hover-zoom'un içine girer */
}



.text-box-supply {
  position: absolute;
  top: -1.5%;
  right: 100%; /* Sağda, dışarıda başlar */
  transform: translateX(100%); /* Sağdan başlar ve dışarıda kalır */
  width: 465px;
  height: 535px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  background-color: #f7c973;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none; /* .text-box üzerindeki fare etkileşimini devre dışı bırakır */
}

.img-hover-zoom:hover .text-box-supply {
  transform: translateX(0); /* Sağdan sola doğru hareket eder ve ortalanır */
  opacity: 1;
  pointer-events: auto; /* .text-box üzerindeki fare etkileşimini etkinleştirir */
}

.img-hover-zoom:hover .text-box-supply {
  left: 50; /* .img-hover-zoom'un içine girer */
}
.main-content { 
  padding-top: 90;
}
.container-fluid {
  padding-top: 130px; 
}

.animated {
  opacity: 0; 
  transform: translateY(-20px); 
}


@keyframes slideIn {
  from {
      transform: translateY(-20px);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}
.text-box-supply-wwd {
  position: absolute;
  top: 50%;
  right: -45%; /* Sağda, dışarıda başlar */
  transform: translate(-50%, -50%);
  width:400px;
  height: 520px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  background-color: #f7c973;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  opacity: 1;
  pointer-events: none; /* .text-box üzerindeki fare etkileşimini devre dışı bırakır */
}

.text-box-wwd {
  position: absolute;
  top: 50%;
  left: 38%; /* Sağda, dışarıda başlar */
  transform: translate(-50%, -50%);
  width:400px;
  height: 520px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  background-color: #73cac1;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  opacity: 1;
  pointer-events: none; /* .text-box üzerindeki fare etkileşimini devre dışı bırakır */
}
.text-box-build-wwd {
  position: absolute;
  margin-bottom: auto;
  left: 239%; /* Sağda, dışarıda başlar */
  transform: translate(-50%, -50%);
  width:400px;
  height: 512px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  background-color: #f15f5e;;
  color: white;
  padding: 50px;
  box-sizing: border-box;
  opacity: 1;
  pointer-events: none; /* .text-box üzerindeki fare etkileşimini devre dışı bırakır */
}

.wwd-index{
  font-size: 100px; 
  margin-top: -30px;
}


.paragraph-style {
  margin-top: 80px;
  margin-left: 80px;
  font-size: 18px;
}
.design_icon_design{
  width: 200px;
}




.icon-design {
  width: 150px;
  background-color: #73cac1;
}

.icon-supply {
  width: 150px;
  background-color: #f7c973;
}

.icon-build {
  width: 150px;
  background-color: #f15f5e;
}


.build-icon-son{
  position: relative;
  top: -30px; 

}


.design-icon-son{
  position: relative;
  top: -30px; 

}



.supply-icon-son{
  position: relative;
  top: -30px; 

}
.d_icon_wwd{
width:300px ; 
padding-left: 40px;
}

.s_icon_wwd{
  width:300px ;
  padding-right: 38px;
  }
  
  









/* Masaüstü görünüm için */
.desktop-view { 
  display: block; 
}
.mobile-view { 
  display: none; 
}

@media only screen and (max-width: 768px) {
    .desktop-view { 
        display: none !important; /* "!important" ekleyerek bu kuralın önceliğini artırın */
    }
    .mobile-view { 
        display: block !important; /* Burada da aynısını yapın */
    }

    /* Mobil görünüm için ek stil kuralları */
    .text-box, .text-box-build, .text-box-supply {
        position: static;
        width: 100%;
        height: 320px;
        opacity: 0; /* Başlangıçta görünmez */
        transform: translateY(20px); /* Aşağıdan yukarıya hareket */
        transition: opacity 0.9s ease, transform 0.9s ease;
    }

}



@media only screen and (max-width: 768px) {

     /* Supply bölümünü düzenleme */
     .img-hover-zoom .text-box-supply {
      order: 1; /* Metni resmin üzerine taşı */
  }

  .img-hover-zoom img {
      order: 2; /* Resmi metnin altına taşı */
  }
.wwd-index{
  font-size: 50px; 
  margin-top: -30px;
}
.logos, .logos_hosp {
  margin: 5x auto; /* Üst ve alt marjin 10px, sağ ve sol otomatik (orta) */
  display: block; /* Elementi blok seviyesinde yapar */

}

.MainTitle_Dark_index, .Paragraph_Dark_retail, .col-md-6 a, .col-md-9, .col-md-3 {
  text-align: center; /* Metinleri ortalar */
  margin-left: auto;
  margin-right: auto;
  margin: 5x auto; 
}

.MainTitle_Dark_index {
  font-size: 50px; /* Mobil cihazlar için başlık boyutu */
  margin-top: 10px;
}

.Paragraph_Dark_retail {
  font-size: 14px; /* Mobil cihazlar için paragraf boyutu */
  margin: 10px 0;
}
.MainTitle_Dark {
  font-size: 60px; /* Mobil cihazlar için başlık boyutu */
  margin-top: 30px;
}

#mainTitleBlack, #mainTitleWhite {
  font-size: 50px; /* Mobil cihazlar için büyük başlık boyutu */
  margin-top: -220px;
}

.custom-container .row .col-md-6 {
  margin-top: 20px;
}

.custom-container .row .col-md-6 p {
  font-size: 14px; /* Mobil cihazlar için paragraf boyutu */
  margin-top: 0;
}

.paragraph-style {
  margin-top: 80px;
  margin-left: 0px;
  font-size: 18px;
}
.design_icon_design {
  width: 130px; /* Logo boyutunu 100px olarak ayarla */
  float: right; /* Logoyu sağa yasla */
}
.image-container-design {
  display: none; /* Mobil cihazlarda bu div'i gizle */
}
.icon-design, .icon-supply, .icon-build {
  width: 100px; /* Mobil cihazlarda ikon genişliğini küçült */
  margin: 0 auto; /* Merkezleme */
}

.row.justify-content-center > div {
  flex: 0 0 auto; /* Yan yana dizilme için */
}
.ozel-sayfa #mainTitleWhite {
  display: none; /* Bu ID'ye sahip h1'i sadece özel sayfada ve mobil cihazlarda gizle */
}
.text-box-wwd, .text-box-supply-wwd, .text-box-build-wwd {
  position: static; /* Mobil cihazlarda kutuları normal akışa alır */
  width: 100%; /* Genişliği ebeveynine göre ayarlar */
  height: 320px; /* Yüksekliği içeriğe göre ayarlar */
  margin-top: 20px; /* Fotoğraftan sonra bir boşluk bırakır */
  padding: 15px; /* İç padding'i ayarlar */
  box-sizing: border-box;
  opacity: 1;
  pointer-events: auto; /* Etkileşime izin verir */
  transform: none; /* Transformasyonları sıfırlar */

}
.whatwedoparag {
  padding-left: 0; /* Sol padding'i sıfırla */
  margin-left: 0; /* Sol margin'i sıfırla */
  text-align: left; /* Metni sola hizala */
}
.carousel-text {
  font-size: 25px;
}
}