@import "navbarWhiteBackground.css";

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box; 

  -webkit-font-smoothing: antialiased;

}

body > div {

  overflow-x: hidden;

  overflow-y: hidden;

}

body > section {

  overflow-x: hidden;

  overflow-y: hidden;

}

.referans div ul li {

  list-style-type: "\f0da";.referans div

  font-family: "FontAwesome";

  padding-left: 10px;

}

a:link {

  text-decoration: none !important;

}

.margin-iki-bucuk {

  margin-top: 0rem !important;

}

.baslik-line-height {

  line-height: 1.5 !important;

}

body {

  max-width: 100%;

}

.carousel-5 {

  height: 100vh;

}



.arrow {

  position: absolute;

  left: 50%;

  bottom: 10%;

  background-color: rgba(0, 0, 0, 0);

}

.arrow i {

  -webkit-text-stroke: 9px;

  color: black;

  font-size: 70px;

  background-color: rgba(0, 0, 0, 0);

}



.navbar .current-link {

  border: 0 !important;

  background-color: black !important;

  color: white !important;

}



.carousel {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  margin-top: 1px;

}

.main {

  width: 93.5%;

  height: 26rem;

  background: url("images/bg-yellow-carouls.jpg") center center;

  background-size: cover;

  background-color: #000000;

  display: flex;

  justify-content: left;

  align-items: center;

}



.main-inner {

  height: 264.18px;

  width: 264.18px;

  border: 2px solid white;

  background: rgb(0, 0, 0, 0);

  margin-left: 3rem;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

}

.main-inner p {

  background: rgb(0, 0, 0, 0);

  color: white;

}

.text {

 

  font-size: 68px;

  line-height: 80.47px;

  letter-spacing: 2.72px;

  color: #ffffff;

  color: rgb(255, 255, 255);

}

.bg-clear {

  background-color: rgb(0, 0, 0, 0);

}

.gayrimenkul-text {

 

  font-size: 30px;

  letter-spacing: 2.72px;

  color: #ffffff;

  color: rgb(255, 255, 255);

}

.konsept-projeler-black-line {

  width: 93.5%;

  height: 103px;

  background-color: #000000;

  display: flex;

  justify-content: left;

  align-items: center;

}

.konsept-projeler-black-line p {

  background: rgb(0, 0, 0, 0);

  font-size: 45px;

  line-height: 44.34px;

  color: white;

  margin-left: 7rem;

  margin-top: 1rem;

}

.flex-text {

  display: flex;

  justify-content: center;

  align-items: start;

  flex-direction: row;

  gap: 2rem;

  margin-top: 5rem;

}

.flex-left {

  flex: 1;

  text-align: end;

}

.flex-right {

  flex: 1;

  text-align: start;

}

.bigger-text {

  font-size: 48px;

  color: black;

  font-weight: bold;

  background-color: rgba(0, 0, 0, 0);

}

.light-text {

  font-weight: 100;

  font-size: 48px;

  line-height: 67px;

  color: black;

  background-color: rgba(0, 0, 0, 0);

  margin-top: 2rem;

}

.small-text {

  font-size: 20px;

  line-height: 30px;

  color: #000000;

}

.list-item {

  margin-left: 0rem;

}



.list-item li {

  margin-left: 0rem;

  line-height: 0px !important;

  padding-top: 0px !important;

  padding-bottom: 0px !important;

  margin-top: 0px !important;

  margin-bottom: 0px !important;

}

.bg-y {

  background-color: #f3e431;

}

.yellow-part {

  flex: 1;

  background-color: #f3e431;

  display: flex;

  flex-direction: column;

  text-align: right;

  gap: 1rem;

  margin-top: 3.3rem;

}

.text-2 {

  font-size: 20px !important;

  line-height: 30px !important;

}

.text-part {

  flex: 1;

  background-color: rgba(0, 0, 0, 0);

  margin-top: 6rem;

}

.bold-text {

  font-size: 48px;

  color: black;

  font-weight: bold;

  background-color: rgba(0, 0, 0, 0);

  margin-right: 4rem;

}

.carousel-2 {

  display: flex;

  justify-content: center;

  align-items: start;

  flex-direction: row;

  gap: 2rem;

  margin-top: 1rem;

  height: 100vh !important;

  background-image: url("images/shutterstock_615576209-2.jpg");

  background-position: bottom 0%;

  background-repeat: no-repeat;

  background-size: cover;

  width: 100%;

}

.carousel-3 {

  background-image: url("images/shutterstock_1193697019-grey.jpg");

  width: 100%;

  height: 100vh;

  background-size: cover;

  position: relative;

}

.carousel-3 p {

  background-color: #f3e431;

  position: absolute;

  top: 0;

  right: 390px;

  margin: 0;

  padding: 10px;

}

.bg-gray {

  background-color: #e1e0e0;

}

.avantaj {

  width: 100%;

  height: 155px;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  background-color: #e1e0e0;

}

.avantaj-inner {

  height: 713px;

  width: 100%;

  background-color: #ececec;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 3rem;

  position: relative;

}

[data-aos] {

  pointer-events: none;

}

.aos-animate {

  pointer-events: auto;

}

.aos-init[data-aos][data-aos].aos-animate {

  transform: unset;

}

.avantaj-box {

  height: 403px;

  width: 464px;

  background-color: #e1e0e0;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: start;

  text-align: start;

}

.number {

  position: absolute;

  top: -125px;

  left: 50px;

  font-weight: 500;

  font-size: 167px;

  -webkit-text-stroke-width: 2px;

  -webkit-text-stroke-color: black;

  color: rgba(0, 0, 0, 0);

}

.box-text {

  font-size: 25px;

  line-height: 45px;

  margin-top: 8rem;

  z-index: 100 !important;

}

.yellow-bar {

  height: 90px;

  width: 100%;

  background-color: #f3e431;

  position: absolute;

  z-index: 1;

  margin-top: -14rem;

}

.yellow-bar-2 {

  height: 90px;

  width: 100%;

  background-color: #f3e431;

  position: absolute;

  z-index: 1;

  margin-top: -7rem;

}

.margin-eksi {

  margin-bottom: -2rem !important;

  margin-top: 6rem !important;

}

.bg-yellow {

  background-color: #f3e431;

  padding-left: 3rem;

  margin-left: -3rem;

  position: relative;

}

.mt-6 {

  margin-top: 6rem;

}

.bg-yellow-2 {

  background-color: #f3e431;

  padding-left: 1rem;

  margin-left: -1rem;

  position: relative;

}



.border {

  border: 2px solid rgb(95, 94, 94);

  margin-left: -1rem;

}

.margin-tt {

  margin-top: 9rem;

}

.guclendirme-yontem {

  background: #ececec;

  height: 800px;

  width: 100%;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: start;

  gap: 3rem;

}

.gap-35 {

  gap: 1.25rem;

}

.carousel-boxes {

  width: 205px;

  height: 91px;

  background-color: #000000;

}

.carousel-boxes:hover { 

  background-color: #f3e431; 

}

.carousel-boxes:hover p { 

  color: #000 !important; 

}

.w-165 {

  width: 165px !important;

}

.carousel-boxes p {

  font-weight: bold;

  font-size: 16px;

  color: #ffffff;

  padding-top: 9px;

  width: 158px;

}

.inner-guclendirme-yontem {

  display: flex;

  justify-content: center;

  align-items: start;

  text-align: start;

  flex-direction: column;

  background-color: #e1e0e0 !important;

  flex: 1;

  max-width: 465px;

}

.inner-guclendirme-yontem img {

  width: 100%;

  height: 449px;

}

.inner-guclendirme-yontem p {

  margin-left: 2rem;

}

.bg-ec {

  background-color: #ececec;

}

.yontem {

   

  text-align: center;

  position: relative;

}

.yellow-bar-yontem {

  height: 125px;

  width: 100%;

  background-color: #f3e431;

  position: absolute;

  z-index: 1;

  top: 200px;





}

.text-absolute {

  height: 60px;

  width: 100%;

  position: absolute;

  z-index: 1;

  top: 200px;

  display: flex;

  justify-content: center;

  text-align: center;

  align-items: center;

  flex-direction: row;

  gap: 15rem;

}

.text-absolute p {

  font-weight: bold;

  font-size: 25px;

  line-height: 45px;

  z-index: 3;

  background-color: rgba(0, 0, 0, 0);

  text-align: center;
 
  
}

.yp-1 {

  position: relative;

 
/*  left: 100px;*/

  top: 40px;

  margin-left: 50px;
}

.yp-2 {

  position: relative;

  /*left: 550px;*/

  top: 40px;
  margin-left: 50px;


}

.yp-3 {

  position: relative;
  margin-top: 40px;
 

/*  left: 1050px;*/

  top: 20px;
  margin-left: 50px;
margin-right: 50px;
}

.gerceklesen-proje {

  width: 100%;

  height: 745px;

  background: url("images/Kendo20.jpg") center;

  background-size: cover;

  position: relative;

}

.gerceklesen-proje div {

  position: absolute;

  left: 0;

  top: 0;

  width: auto;

  height: 175px;


  display: flex;

  justify-content: start;

  align-items: center;

}

.gerceklesen-proje div p {

 
  padding: 20px 40px;
  font-size: 48px;

  color: #f3e431;
  background-color: #000000d4;

  text-align: end;

  margin-right: 5rem; 

}

.referans {

  display: flex;

  justify-content: center;

  align-items: start;

  flex-direction: row;

  text-align: left;

  gap: 3rem;

  background-color: white; 

  width: 100%;

}



.referans div {

  max-width: 713px;

 /* height: 730px;*/
height: 460px;
  flex: 1;

  background-color: #e1e0e0;

}

.referans div li {

  background-color: rgba(0, 0, 0, 0);

}

.referans div li p {

  background-color: rgba(0, 0, 0, 0);

  font-size: 20px;

}

.referans div li p b {

  background-color: rgba(0, 0, 0, 0);

  font-size: 22px;

}

.referans div ul {

  margin-top: 2rem;

  margin-left: 2rem;

  background-color: rgba(0, 0, 0, 0);

}

.w-642 {

  width: 642.7px;

  height: 100%;

}

.w-600 {

  width: 600px;

  height: 100%;

}

.w-750 {

  width: 750px !important;

  height: 100%;

}



.w-569 {

  width: 610px;

}

.w-516 {

  width: 516.7px;

  height: 100%;

}

.w-431 {

  width: 431.3px;

  height: 100%;

}

.w-567 {

  width: 567px;

  height: 100%;

}

.w-426 {

  width: 426px;

  height: 100%;

}

.w-647 {

  width: 647.5px;

  height: 100%;

}

.w-624 {

  width: 624px;

  height: 100%;

}

.w-651 {

  width: 651px;

  height: 100%;

}

.w-688 {

  width: 688px;

  height: 100%;

}

.w-330 {

  width: 330px;

  height: 100%;

}

.w-712 {

  width: 712px;

  height: 100%;

}

.w-319 {

  width: 319px;

  height: 100%;

}

.w-373 {

  width: 373px;

  height: 100%;

}

.w-358 {

  width: 358px;

  height: 100%;

}

.w-704 {

  width: 704px;

  height: 100%;

}

.w-476 {

  width: 476.3px;

  height: 100%;

}

.w-658 {

  width: 658px;

  height: 100%;

}

.w-498 {

  width: 498px;

  height: 100%;

}

.w-360 {

  width: 360px;

  height: 100%;

}

.w-229 {

  width: 229px;

  height: 100%;

}

.w-354 {

  width: 354px;

  height: 100%;

}



.w-665 {

  width: 665px;

  height: 100%;

}

.w-496 {

  width: 496px;

  height: 100%;

}



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

  .yellow-bar-2 {
      display: none;
  }

  .avantaj-box:nth-child(3)
  {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  
  .w-688{width: auto;}

  .carousel {

    justify-content: center;

    width: 100%;

  }

  .main {

    justify-content: center;

    align-items: center;

    width: 100%;

  }

  .kendo-main {

    justify-content: center;

    margin: 0;

    margin-left: 0;

    position: relative;

  }

  .main-inner {

    margin-left: 0rem;

  }



  .konsept-projeler-black-line {

    width: 100%;

  }

  .konsept-projeler-black-line p {

    font-size: 30px;margin-left:3rem

  }

  .flex-text {

    flex-direction: column;

    align-items: start;

    justify-content: start;

    text-align: start;

    width: 100%;

    gap: 0;

  }

  .flex-left {

    width: 100%;

    text-align: start;

    margin-left: 0rem;

  }

  .flex-right {

    width: 100%;

    margin-top: 0rem;

  }

  .bigger-text {

    margin-left: 5%;

    margin-right: 5%;

    width: 90%;

  }

  .small-text {

    margin-left: 5%;

    margin-right: 5%;

    width: 90%;

    margin-top: 0rem;

  }

  .carousel-2 {
    flex-direction: column;
    background-position: bottom;
    background-size: 100% auto;
    height: auto !important;
    min-height: 100vh;
    width: 100%;
    padding-bottom: 60%; /* Resim için alan bırak */
    position: relative;
    gap: 0;
}

.carousel-2>.yellow-part>.text-part>.small-text {
  margin-top: 10px;
}

  .yellow-part {

    width: 100%;

    text-align: start;

  }

  .text-part {

    width: 100%;

  }

  .carousel-3 {
    flex-direction: column;
    background-position: bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: auto !important;
    min-height: 60vh;
    width: 100%;
    padding-bottom: 70%; 
    position: relative;
}

.carousel-3 .small-text {
    color: #000;
    background: none;
    padding: 1rem;
    margin: 0;
}
  .carousel-3 p {

    background-color: #f3e431;

    position: relative;

    top: 0;

    right: 0;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 10px;

  }

  .avantaj {

    width: 100%;

    height: 100%;

  }

  .avantaj-inner {

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding-top: 5rem;

    padding-bottom: 5rem;

    height: 100%;

    width: 100%;

    gap: 2rem;

  }

  .avantaj-inner .yellow-bar {

    display: none;

  }

  .avantaj-box {

    width: 100%;

    height: 100%;

  }

  .avantaj-inner .avantaj-box p {

    width: 90%;

    margin-left: 5%;

    margin-right: 5%;

  }

  .yontem {

    width: 100%;

    height: 100%;

    flex-direction: column;

  }

  .yellow-bar-yontem {

    display: none;

  }

  

  .guclendirme-yontem {

    width: 100%;

    justify-content: center;

    align-items: center;

    height: 100%;

    flex-direction: column;

  }

  .yontem .bigger-text {

    width: 100%;

    height: 100%;

  }

  .gerceklesen-proje {

    width: 100%;

    height: 100%;

  }

  .gerceklesen-proje div {

    position: relative;

    width: 100%;

    height: 100%;

    justify-content: start;

    align-items: center;

  }

  .gerceklesen-proje div p {

    font-weight: bold;

    font-size: 48px;

    color: #f3e431;

    text-align: start; 

  }

  .inner-guclendirme-yontem img {

    width: 100%;

    height: 100%;

  }

  .referans {

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 3rem;

    height: 100%;

    width: 100%;

  }

  .referans div {

    max-width: 100%;
    width: 80%;
    height: 100%;

  }

 
  .referans div li {

    background-color: rgba(0, 0, 0, 0);

  }

  .referans div li p {

    background-color: rgba(0, 0, 0, 0);

    font-size: 22px;

  }

  .referans div li p b {

    background-color: rgba(0, 0, 0, 0);

    font-size: 25px;

  }

  .referans div ul {

    margin-top: 2rem;

    margin-left: 2rem;

    background-color: rgba(0, 0, 0, 0);

  }

  .light-text {

    width: 90%;

    margin-left: 5%;

    margin-right: 5%;

    margin-top: 0rem;

  }

  .bold-text {

    width: 90%;

    margin-left: 5%;

    margin-right: 5%;

  }

  .gerceklesen-proje p {

    width: 90%;

    margin-left: 5%;

    margin-right: 5%;

  }

  .flex-text {

    gap: 0rem;

    margin-top: 2rem;

  }

  .text-part {

    margin-top: 0rem;

  }

  .yellow-part {

    gap: 1rem;

    margin-top: 2rem;

  }

  .bg-yellow {

    padding-left: 0rem;

    margin-left: 0rem;

  }

  .small-text {

    width: 90%;

    margin-left: 5%;

    margin-right: 5%;

  }

  .referans {

    gap: 2rem;

  }

  .referans div ul {

    margin-top: 2rem;

    margin-left: 0rem;

    background-color: rgba(0, 0, 0, 0);

  }

  .margin-tt {

    margin-top: 0;

  }

  .margin-iki-bucuk {

    margin-top: 0 !important;

    /* margin-bottom: 8rem; */

    height: 100% !important;

  }

  .margin-eksi {

    margin-bottom: 0rem !important;

    margin-top: 0rem !important;

  }



  .w-750 {

    width: 90% !important;

    margin: auto;

  }

  .border {

    padding: 10px;

    margin-bottom: 2rem;

  }

  p {

    line-height: 1.5 !important;

  }



  .text-part {

    height: 100%;

    position: relative;

    width: 100%;

  }

  .small-text {

    height: 100%;

  }

  .w-431 {

    height: 100%;

    position: relative;

    margin-top: 1rem;

  }

  .flex-left {

    height: 100%;

  }



  .yellow-bar-2 {
    display: none;
}

.avantaj-box:nth-child(3) {
    margin-top: 50px;
    margin-bottom: 50px;
}


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

.text-absolute {
  position: fixed; /* fixed pozisyonlama kullanalım */
  pointer-events: none; /* altındaki elementlere tıklamaya izin ver */
}

.yp-1 {
  top: 40vh; /* viewport height kullanarak konumlandırma */
}

.yp-2 {
  top: 70vh;
}

.yp-3 {
  top: 100vh;
  text-align: center;
}

.yp-1, .yp-2, .yp-3 {
  position: absolute;
  pointer-events: auto; /* başlıklara tıklamaya izin ver */
}

.text-absolute {
  display: none; /* Orijinal başlıkları gizle */
}

.guclendirme-yontem {
  flex-direction: column;
}

.inner-guclendirme-yontem {
  position: relative;
  margin-bottom: 3rem;
  font-size: 1.5rem;
}

/* Her bir inner-guclendirme-yontem için başlık ekle */
.inner-guclendirme-yontem:nth-child(1)::before {
  content: "Betonarme güçlendirme";
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(243, 228, 49, 0.95);
  padding: 10px 20px;
  z-index: 10;
  font-weight: bold;
}

.inner-guclendirme-yontem:nth-child(2)::before {
  content: "Çelik güçlendirme";
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(243, 228, 49, 0.95);
  padding: 10px 20px;
  z-index: 10;
  font-weight: bold;
}

.inner-guclendirme-yontem:nth-child(3)::before {
  content: "FRP güçlendirme";
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(243, 228, 49, 0.95);
  padding: 10px 20px;
  z-index: 10;
  font-weight: bold;
}

.inner-guclendirme-yontem img {
  width: 100%;
  height: auto;
}


.gerceklesen-proje {
  width: 100%;
  height: 50vh;
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
}

.gerceklesen-proje div {
  position: relative;
  width: 100%; /* Tam genişlik */
  height: auto; /* Otomatik yükseklik */
  min-height: 175px; /* Minimum yükseklik */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.gerceklesen-proje div p {
  font-size: 38px;
  color: #f3e431;
  text-align: center;
  margin: 0;
  padding: 1rem;
  width: 100%; /* Tam genişlik */
}


}

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



  .carousel-boxes {

    width: 185px; 

  }

  .carousel-2{height:148vh !important;}

  .bigger-text{line-height:1 !important;}

  .light-text{margin-top: 1rem;}

#guvenli-adim{padding-top: 30px;}

  .yellow-part {

    height: 100%;

    position: relative;

    width: 100%;

    margin-top: 5rem;

    padding-top:30px ;

  }

  .referans div li p b{font-size: 20px;}

  .referans div li p{font-size: 20px;}


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

}



  @media screen and (max-width: 400px) {
    .carousel-boxes {
        width: 160px;
    }
}

@media screen and (max-width: 320px) {
  .carousel-boxes {
      width: 148px;
  }
}