/**/
.box-icon img {
width: 100px; /* İstediğiniz genişlik */
height: 100px; /* İstediğiniz yükseklik */
background-color: #e0d9d9; /* Beyaz border rengi */
}
/**/
.br{border:1px solid red;}
.baslikyazi{color: #0d68e2;}
.yanip-sönme {animation: blink 2s ease-in-out infinite;}
.yesil { color: #22a022;}
.beyaz { color: #fff;}
.siyah { color: #000;}
.kirmizi { color: #ff0000;}
.koyukirmizi { color: #d50000;}
.br{border:1px solid red;}
.mt2{margin-top:2px;}
.mt4{margin-top:4px;}
.mt6{margin-top:6px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt14{margin-top:14px;}
.mt16{margin-top:16px;}
.mt18{margin-top:18px;}
.mt20{margin-top:20px;}
.mt25{margin-top:25px;}
.mt30{margin-top:30px;}
.mt36{margin-top:36px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt-10{margin-top:-10px;}
.mt-15{margin-top:-15px;}
.mt-20{margin-top:-20px;}
.mt-30{margin-top:-30px;}
.mt-40{margin-top:-40px;}
.mt-50{margin-top:-50px;}
.mt-60{margin-top:-60px;}
.mt-80{margin-top:-80px;}
.mt-100{margin-top:-100px;}
.mt-110{margin-top:-110px;}
.mb15{margin-bottom:15px;}
/*navbar*/

/*slayt altı animed*/
.hero .hero-waves {
  display: block;
  width: 100%;
  height: 60px;
  position: relative;
}

.hero .wave1 use {
  fill: #222222; /* Açık mavi */
  animation: move-forever1 10s linear infinite;
  animation-delay: -2s;
  opacity: 0.6;
}

.hero .wave2 use {
  fill: #b9ff73; /* Orta mavi */
  animation: move-forever2 8s linear infinite;
  animation-delay: -2s;
  opacity: 0.4;
}

.hero .wave3 use {
  fill: #b300b3; /* Koyu mavi */
  animation: move-forever3 6s linear infinite;
  animation-delay: -2s;
}


@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}
/**/
/*ana sayfa scroll*/
.scroll-descriptionn {
font-size: 20px;
max-height: 400px;
overflow-y: auto;
margin-top: 10px;
padding-right: 0px;
margin-right: -16px;
}
@media only screen and (max-width: 1199px) {.scroll-descriptionn{ max-height: 238px;}}
@media only screen and (max-width: 991px) {.scroll-descriptionn{ max-height: 166px;}}

@media only screen and (max-width: 776px) {.scroll-descriptionn{ max-height: 140px; font-size: 14px;}}
@media only screen and (max-width: 680px) {.scroll-descriptionn{ max-height: 100px; font-size: 14px;}}
@media only screen and (max-width: 350px) {.scroll-descriptionn{ max-height: 200px; font-size: 14px;}}
@media only screen and (max-width: 320px) {.scroll-descriptionn{ max-height: 100px; font-size: 14px;}}

 /* Kaydırma çubuğu genişliği */
.scroll-descriptionn::-webkit-scrollbar {width: 4px;}
 /* Kaydırma çubuğu rengi */
.scroll-descriptionn::-webkit-scrollbar-thumb {background-color:#2492ff; border-radius: 4px;}
 /* Kaydırma çubuğu üzerine gelindiğindeki renk */
.scroll-descriptionn::-webkit-scrollbar-thumb:hover {background-color:#2492ff;}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
  padding: 60px 30px 60px 70px;
  transition: all ease-in-out 0.3s;
  border-radius: 18px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.services .service-item .icon {
  position: absolute;
  left: -20px;
  top: calc(50% - 30px);
}

.services .service-item .icon i {
  font-size: 64px;
  line-height: 1;
  transition: 0.5s;
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

@media (min-width: 1365px) {
  .services .service-item:hover {
    transform: translateY(-10px);
  }

  .services .service-item:hover h3 {
    color:#000;
  }
}