.list-group {
  list-style-type: none;
  overflow: hidden;
}
.list-group .list-group-item i {
  color: cyan;
}
.slider {
  max-height: 740px; /* Slider yüksekliğinden 170px daha düşük */
  overflow: hidden; /* Resimleri yükseklik dışında kesmek için kullanılır */
  max-width: 100%;
  margin-bottom: 75px;
}

.carousel-inner img {
  object-fit: contain; /* Resimleri kırpmadan sığdırmak için kullanılır */
  width: 100%; /* Resimlerin yatayda tamamen sığmasını sağlar */
}
/* Ekstra küçük (mobil) ekranlar için ayarlar */
@media (max-width: 576px) {
  .slider {
    max-height: 500px; /* Mobil ekranlar için daha küçük bir yükseklik */
    margin-bottom: 0px;
  }
}

/* Küçük (tablet) ekranlar için ayarlar */
@media (min-width: 577px) and (max-width: 768px) {
  .slider {
    max-height: 600px; /* Tablet ekranlar için biraz daha yüksek bir yükseklik */
    margin-bottom: 0px;
  }
}

/* Büyük (desktop) ekranlar için ayarlar */
@media (min-width: 769px) {
  .slider {
    max-height: 740px; /* Büyük ekranlar için daha büyük bir yükseklik */
    margin-bottom: 0px;
  }
}

.card {
  border-radius: 15px;
  background-color: #185c99;
}
.card:hover {
  box-shadow: 0 5px 35px 0px rgba(0, 0, 0, 0.1);
}
.card:hover::before,
.card:hover::after {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: slateblue;
  border-radius: 75px;
  z-index: -1;
  animation: 1s clockwise infinite;
}

.card:hover:after {
  background: paleturquoise;
  animation: 2s counterclockwise infinite;
}

@keyframes clockwise {
  0% {
    top: -5px;
    left: 0;
  }
  12% {
    top: -2px;
    left: 2px;
  }
  25% {
    top: 0;
    left: 5px;
  }
  37% {
    top: 2px;
    left: 2px;
  }
  50% {
    top: 5px;
    left: 0;
  }
  62% {
    top: 2px;
    left: -2px;
  }
  75% {
    top: 0;
    left: -5px;
  }
  87% {
    top: -2px;
    left: -2px;
  }
  100% {
    top: -5px;
    left: 0;
  }
}

@keyframes counterclockwise {
  0% {
    top: -5px;
    right: 0;
  }
  12% {
    top: -2px;
    right: 2px;
  }
  25% {
    top: 0;
    right: 5px;
  }
  37% {
    top: 2px;
    right: 2px;
  }
  50% {
    top: 5px;
    right: 0;
  }
  62% {
    top: 2px;
    right: -2px;
  }
  75% {
    top: 0;
    right: -5px;
  }
  87% {
    top: -2px;
    right: -2px;
  }
  100% {
    top: -5px;
    right: 0;
  }
}

.wrap-image {
  position: relative;
  &::before,
  &::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    border: 2px solid #6ca4bc;
    transition: all 0.25s ease-out;
  }
  &::before {
    background-color: #6ca4bc;
    top: -10px;
    left: -10px;
  }
  &::after {
    bottom: -10px;
    right: -10px;
  }
  &:hover {
    &::before {
      top: 10px;
      left: 10px;
    }
    &::after {
      bottom: 10px;
      right: 10px;
    }
  }
}

a {
  text-decoration: none;
}
.custom-border {
  border: 3px solid purple;
}

.my-button:hover {
  background-color: rgb(14, 136, 106);
  color: white;
  width: 100%;
}
#yorumlar {
  max-height: 400px; /* Maksimum yükseklik ayarı */
  overflow-y: auto; /* Yatay kaydırma çubuğu ekle */
}
hr {
  color: cyan;
}
.liked,
.disliked {
  color: cyan; /* Beğenildiğinde rengi değiştir */
}

.team {
  text-align: center;
}

.profile {
  flex: 1;
  max-width: 600px;
  margin: 0 20px 20px 20px;
  text-align: center;
  padding: 20px;
  color: #fff;
  border-radius: 20px;
  display: inline-block;
  vertical-align: top;
}

.profile img {
  max-width: 50%;
  border-radius: 20%;
  border: 5px solid #f7f7f7;
  filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1));
  cursor: pointer;
}

.info {
  background-color: #185c99;
  color: #fff;
  padding: 15px 30px;
  border-radius: 20px;
  margin-top: 20px;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(20px);
  text-align: left;
  max-width: 100%;
}

.profile .info {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 10px 20px cyan;
}

.genelProje {
  margin: 5%;
  margin-bottom: 50px;
  background-color: #185c99;
  color: #fff;
  padding: 15px 30px;
  border-radius: 20px;
  margin-top: 20px;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(20px);
  text-align: left;
  max-width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: box-shadow 0.5s ease; /* Geçiş efekti ekleyin */
}
.genelProje hr {
  color: black;
}

/* Hover efekti ve rengi değiştirme */
.genelProje li:hover a {
  color: rgb(255, 152, 41); /* Hover olduğunda rengi turuncu yap */
}

/* Iconların rengini değiştirme */
.genelProje li:hover a i {
  color: rgb(255, 152, 41); /* Hover olduğunda icon rengini turuncu yap */
}
.genelProje:hover {
  box-shadow: 0 10px 20px cyan; /* Hover durumunda box-shadow özelliğini değiştirin */
}

.bizimProje {
  margin: 5%;
  margin-bottom: 50px;
  background-color: #131333;
  color: #fff;
  padding: 15px 30px;
  border-radius: 20px;
  margin-top: 20px;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(20px);
  text-align: left;
  max-width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: box-shadow 0.5s ease; /* Geçiş efekti ekleyin */
}
.bizimProje hr {
  color: cyan;
}
/* Hover efekti ve rengi değiştirme */
.bizimProje li:hover a {
  color: rgb(255, 152, 41); /* Hover olduğunda rengi turuncu yap */
}
/* Iconların rengini değiştirme */
.bizimProje li:hover a i {
  color: rgb(255, 152, 41); /* Hover olduğunda icon rengini turuncu yap */
}
.bizimProje:hover {
  box-shadow: 0 10px 20px rgb(138, 193, 255);
}
.hoverkonu1 {
  padding: 15px 30px;
  max-width: 100%;
  margin: 5%;
  margin-bottom: 50px;
  margin-top: 20px;
  text-align: left;
  border-radius: 0px;
  border: 3px solid #942b3b;
  color: rgb(147, 223, 255);
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: all 0.35s;
}
.hoverkonu1 hr {
  color: rgb(119, 189, 255);
}
.hoverkonu1:before,
.hoverkonu1:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: -100%;
  left: 0;
  background: #942b3b;
  z-index: -1;
  transition: all 0.35s;
}

.hoverkonu1:before {
  opacity: 0.5;
}

.hoverkonu1:after {
  transition-delay: 0.2s;
}

.hoverkonu1:hover {
  color: white;
}

.hoverkonu1:hover:before,
.hoverkonu1:hover:after {
  top: 0;
}
/* Iconların rengini değiştirme */
.hoverkonu1 li:hover a i {
  color: rgb(119, 189, 255);
}

.hoverkonu2 {
  padding: 15px 30px;
  max-width: 100%;
  margin: 5%;
  margin-bottom: 50px;
  margin-top: 20px;

  text-align: left;
  border-radius: 0px;
  border: 3px solid #ffb700;
  color: white;
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: all 0.35s;
}
.hoverkonu2 hr {
  color: black;
}

.hoverkonu2:before,
.hoverkonu2:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: -100%;
  left: 0;
  background: #ffb700;
  z-index: -1;
  transition: all 0.35s;
}

.hoverkonu2:before {
  opacity: 0.5;
}

.hoverkonu2:after {
  transition-delay: 0.2s;
}

.hoverkonu2:hover {
  color: black;
}

.hoverkonu2:hover:before,
.hoverkonu2:hover:after {
  top: 0;
}
.hoverkonu2 li:hover a i {
  color: black; /* Hover olduğunda icon rengini turuncu yap */
}
.hoverkonu3 {
  padding: 15px 30px;
  max-width: 100%;
  margin: 5%;
  margin-bottom: 50px;
  margin-top: 20px;
  text-align: left;
  border-radius: 0px;
  border: 3px solid #8900f2;
  color: #8900f2;
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: all 0.35s;
}
.hoverkonu3 hr {
  color: slateblue;
}

.hoverkonu3:before,
.hoverkonu3:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: -100%;
  left: 0;
  background: #8900f2;
  z-index: -1;
  transition: all 0.35s;
}

.hoverkonu3:before {
  opacity: 0.5;
}

.hoverkonu3:after {
  transition-delay: 0.2s;
}

.hoverkonu3:hover {
  color: white;
}

.hoverkonu3:hover:before,
.hoverkonu3:hover:after {
  top: 0;
}
.hoverkonu3 li:hover a i {
  color: rgb(100, 73, 255); /* Hover olduğunda icon rengini turuncu yap */
}

.hoverornek1 {
  --g: 4px; /* the gap */
  --b: 14px; /* border thickness*/
  --c: #942b3b; /* the color */

  max-width: 100%;
  margin: 5%;
  margin-bottom: 50px;
  margin-top: 20px;
  text-align: left;
  color: white;
  position: relative;
  overflow: hidden;
  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg, var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg, var(--_c)) repeat-y;
  background: var(--_g1) var(--_p, 25%) 0, var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  cursor: pointer;
  filter: grayscale(50%);
  transition: 0.3s;
}
.hoverornek1:hover {
  --_p: 75%;
  filter: grayscale(0%);
  color: rgb(147, 223, 255);
}
.hoverornek1 hr {
  color: rgb(48, 126, 211);
}
.hoverornek1 li:hover a i {
  color: rgb(119, 189, 255); /* Hover olduğunda icon rengini turuncu yap */
}

.hoverornek2 {
  --g: 4px; /* the gap */
  --b: 14px; /* border thickness*/
  --c: #ffb700; /* the color */
  max-width: 100%;
  margin: 5%;
  margin-bottom: 50px;
  margin-top: 20px;
  text-align: left;
  color: white;
  position: relative;
  overflow: hidden;
  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg, var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg, var(--_c)) repeat-y;
  background: var(--_g1) var(--_p, 25%) 0, var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  cursor: pointer;
  filter: grayscale(50%);
  transition: 0.3s;
}
.hoverornek2:hover {
  --_p: 75%;
  filter: grayscale(0%);
  color: black;
}
.hoverornek2 hr {
  color: yellow;
}
.hoverornek2 li:hover a i {
  color: black; /* Hover olduğunda icon rengini turuncu yap */
}

.hoverornek3 {
  --g: 4px; /* the gap */
  --b: 14px; /* border thickness*/
  --c: #8900f2; /* the color */

  max-width: 100%;
  margin: 5%;
  margin-bottom: 50px;
  margin-top: 20px;
  text-align: left;
  color: white;
  position: relative;
  overflow: hidden;
  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg, var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg, var(--_c)) repeat-y;
  background: var(--_g1) var(--_p, 25%) 0, var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  cursor: pointer;
  filter: grayscale(50%);
  transition: 0.3s;
}
.hoverornek3:hover {
  --_p: 75%;
  filter: grayscale(0%);
  color: #8900f2;
}
.hoverornek3 hr {
  color: slateblue;
}
.hoverornek3 li:hover a i {
  color: #8900f2;
}

.my-box-header {
  border: 3px solid cyan;
  padding: 10px;
  text-align: center;
  border-radius: 0px;
}

.my-box {
  padding: 20px;
  background-color: transparent;
  box-shadow: 0 2px 4px cyan;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 3px solid cyan;
  position: relative;
  overflow: hidden; /* İçeriği sığdırmak için taşma gizlemesi ekleyin */
}

.my-box ul {
  list-style-type: none;
  padding: 0;
}

.my-box h4 {
  color: cyan;
  font-weight: bold;
}

.my-box p {
  font-size: 20px;
  color: white;
}

.my-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    80deg,
    transparent 70%,
    cyan 50%
  ); /* Üçgen şekli oluşturmak için linear-gradient kullanın */
  transform: scaleX(0); /* Başlangıçta üçgeni gizleyin */
  transform-origin: right; /* Üçgenin sağdan başlamasını sağlayın */
  transition: transform 0.3s ease; /* Geçiş efekti ekleyin */
}

.my-box:hover::before {
  transform: scaleX(1); /* Hover durumunda üçgeni gösterin */
}