.sliderMain {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.slider {

  position: relative;

  width: 100%;

  height: 60vh;

  overflow: hidden;

}



.slider-container {

  display: flex;

  height: 100%;

  transition: transform 2s ease-in-out;

}



.slide {

  min-width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

}



.slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* :before pseudo-element ile filtre ekliyoruz */

.slide::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  z-index: 1;

}



/* Slider butonları */

.slider button {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  color: var(--text-white);

  border: none;

  padding: 20px;

  cursor: pointer;

  height: 100%;

  font-size: 1.5rem;

  background-color: transparent;

  z-index: 2;

}



.slider button:hover {

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

  transition: 0.5s;

}



.prev {

  left: 0px;

}



.next {

  right: 0px;

}





/* Metin Overlay Stil */

.text-overlay {

  position: absolute;

  top: 40%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  color: white;

  z-index: 2;

  max-width: 80%;

}



.text-overlay span {

  display: block;

  font-size: 3.5rem;

  font-weight: bold;

  margin-bottom: 10px;

}



.text-overlay h1 {

  font-size: 2rem;

  font-weight: normal;

}



/* Butonlar */

.buttons {

  position: absolute;

  top: 70%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  justify-content: center;

  z-index: 3;

}



.buttons ul {

  position: relative;

  display: flex;

  gap: 2.5rem;

}



.buttons ul li {

  position: relative;

  list-style: none;

  width: 6rem;

  height: 6rem;

  background-color: #fff;

  box-shadow: 0 1.6rem 2.5rem rgba(0, 0, 0, 0.3);

  border-radius: 6rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.5s;

}



.buttons ul li:hover {

  width: 18rem;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0);

}



.buttons ul li::before {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 6rem;

  background: linear-gradient(45deg, var(--x), var(--j));

  opacity: 0;

  transition: 0.5s;

}



.buttons ul li:hover::before {

  opacity: 1;

}



.buttons ul li::after {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 6rem;

  background: linear-gradient(45deg, var(--x), var(--j));

  transition: 0.5s;

  filter: blur(15px);

  z-index: -1;

  opacity: 0;

}



.buttons ul li:hover::after {

  opacity: 0.5;

}



.buttons ul li i {

  color: #777;

  font-size: 2.5rem;

  transition: 0.5s;

  transition-delay: 0.25s;

}



.buttons ul li:hover i {

  transform: scale(0);

  color: #fff;

  transition-delay: 0s;

}



.buttons ul li span {

  position: absolute;

}



.buttons ul li .title {

  color: white;

  font-size: 1.5rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  transform: scale(0);

  transition: 0.5s;

  transition-delay: 0s;

  font-weight: 500;

}



.buttons ul li:hover .title {

  transform: scale(1);

  transition-delay: 0.25s;

}





.wrapper{

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  

}



.wrapper h2{

  font-size: 3rem;

  margin-top: 4rem;

  margin-bottom: 3rem;

}



.wrapper .content-box{
    /*
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 90%;
  margin: 3rem;
  */
    display: flex;
    justify-content: center;   /* 🔥 ortalar */
    align-items: stretch;
    gap: 20px;                 /* 🔥 kartlar arası mesafe */
    flex-wrap: wrap;           /* mobilde alt alta */
    font-size:medium;
}



.wrapper .content-box .card{

  min-height: 22rem;

  max-width: 32rem;

  padding: 3rem;

  border-radius: 5px;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  background-color: #fff;

  margin: 1rem 0.4rem;

  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);

}



.wrapper .content-box .card:hover{

  transition: 2s;

}



.wrapper .content-box .card i{

  margin: 2rem;

  color: var(--main-color);

  font-size: 4rem;

  font-weight: 500;

}



.wrapper .content-box .card h3{

  margin-bottom: 1.2rem;

  font-weight: 400;

  text-align: center;

}



.wrapper .content-box .card p{

  color: #6c757d;

  text-align: center;

}



.wrapper .content-box .card:hover i,

.wrapper .content-box .card:hover p{

  color: #fff;

}



.wrapper .content-box .card:hover h3{

  font-weight: 600;

}



.wrapper .content-box .card:nth-child(1):hover{

  background: linear-gradient(45deg,

  rgba(88, 70, 159, 0.7) 0%,

  rgba(136,113,199,0.7)100%),

  url('../images/content1.jpg');

  background-size: cover;

  transition: 0.4s;

}



.wrapper .content-box .card:nth-child(2):hover{

  background: linear-gradient(45deg,

  rgba(88, 70, 159, 0.7) 0%,

  rgba(136,113,199,0.7)100%),

  url('../images/content2.jpg');

  background-size: cover;

  transition: 0.4s;

}



.wrapper .content-box .card:nth-child(3):hover{

  background: linear-gradient(45deg,

  rgba(88, 70, 159, 0.7) 0%,

  rgba(136,113,199,0.7)100%),

  url('../images/content3.jpg');

  background-size: cover;

  transition: 0.4s;

}



.wrapper .content-box .card:nth-child(4):hover{

  background: linear-gradient(45deg,

  rgba(88, 70, 159, 0.7) 0%,

  rgba(136,113,199,0.7)100%),

  url('../images/content4.jpg');

  background-size: cover;

  transition: 2s;

}

.wrapper .content-box .card:nth-child(5):hover{

  background: linear-gradient(45deg,

  rgba(88, 70, 159, 0.7) 0%,

  rgba(136,113,199,0.7)100%),

  url('../images/content5.jpg');

  background-size: cover;

  transition: 2s;

}



.whyContainer{

    width: 100%;

    height: 40vh;   /*height: 50vh;*/

    background-color: #ddd;

    padding: 4rem;

    margin-top: 10rem;

  }

  

  .whyContainer h2{

    text-align: center;

    font-size: 3rem;

    color: var(--second-color);

    

  }

  

  .why{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

    gap: 5rem;

    

  }

  

  .whyBox{

    height: 25rem;   /*width: 25rem;*/

    width: 30rem;   /*width: 25rem;*/

    background-color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 3rem 0;

    gap: 0.5rem;    /*gap: 1rem;*/

    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

  }

  

  .whyBox i{

    font-size: 5rem;

    color: var(--second-color);

  }

  

  .whyBox p{

    font-size: 2rem;

    color: var(--text-black);

    font-weight: 600;

    margin-top: 1.5rem;   /* margin-top: 2rem;*/

  }

  

  .whyBox h3{

    font-size: 2rem;

    color: var(--text-black);

    font-weight: 800;

  }

  

   .whyBox .decor{

    width: 6rem;

    height: 0.5rem;

    background-color: var(--second-color);

    border-radius: 1rem;

  }



  .hakkimizdaContainer{

    width: 75%;

    margin-left: 12.5%;

    display: flex;

    margin-top: 5rem;

    align-items: center;

  }

  

  .hakkimizdaGorsel img{

    height: 40rem;

    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

  -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

  box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

  }

  

  .hakkimizdaText{

    padding: 0rem 5rem;

  }

  

  .hakkimizdaText h2{

    font-size: 4rem;

    color: var(--text-black);

  }

  .hakkimizdaText h2 span{

    color: var(--second-color);

  }

  

  .hakkimizdaText ul p{

    margin-top: 3rem;

    font-size: 1.6rem;

    color: var(--text-black);

    text-transform: none;

  }

  

  .hakkimizdaText ul li{

    margin-top: 3rem;

    font-size: 1.6rem;

    list-style:none;

    color: var(--text-black);

    text-transform: none;

    

  }



  .faq-container {

    width: 100%;

    height: 60vh;

    display: flex;

    margin-top: 10rem;

    overflow: hidden;

    background-color: #fff;

  }

  

  .faq-image {

    margin: 3rem;

    flex: 1;

    background-image: url(../images/faq.jpeg);

    background-size: cover;

    background-position: center;

    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.3);

  }

  

  .faq-content {

    flex: 1;

    padding: 3rem 7rem;

    overflow: hidden;

  }

  

  .faq-content h2 {

    margin-bottom: 2rem;

    color: #333;

    font-size: 4rem;

  }

  

  .faq-content h2 span{

    color: var(--second-color);

  }

  

  .faq-item {

    margin-bottom: 1.5rem;

    border-bottom: 1px solid #ddd;

    padding-bottom: 2rem;

    padding-top: 1rem;

    

  }

  

  .faq-question {

    font-weight: bold;

    cursor: pointer;

    font-size: 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 3px 1rem;

    transition: 0.5s ease;

    color: var(--text-black);

    text-transform: none;

  }

  

  

  .faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

    color: var(--text-black);

    font-size: 1.6rem;

    padding-left: 1rem;

    text-transform: none;

  }

  

  .faq-item.open .faq-answer {

    max-height: 15rem; /* Uzun cevaplar için yeterince büyük bir değer */

    transition: 0.5s ease;

  }

  

  .faq-item.open .faq-question{

    color: var(--main-color);

    transition: 0.3s ease;

  }

  







  @media (max-width:1366px){

    .whyContainer{

      height: auto;

    }



    .whyBox{

      margin-top: 3rem;

    }



    .whyContainer .why .whyBox h3{

        text-align: center;

        font-size: 1.5rem;

      }



      .hakkimizdaContainer{

        width: 100%;

        margin-left: 0;

        display: flex;

        margin-top: 5rem;

        align-items: center;

      }

      

      .hakkimizdaGorsel img{

        height: 30rem;

      }

      

      .hakkimizdaText ul p{

        margin-top: 2rem;

        font-size: 1.7rem;

      }

      

      .hakkimizdaText ul li{

        margin-top: 2rem;

        font-size: 1.7rem;

      }



      .faq-image{

        display: none;

      }

    

      .faq-container{

        width: 90%;

        margin-left: 5%;

        height: auto;

      }

      

  }







@media (max-width:800px) {



  .slider {

    height: 70vh;

  }



  .slider button:hover {

    background-color: transparent;

    transition: 0s;

  }



  .text-overlay {

    top: 50%;

  }



  .text-overlay span {

    font-size: 2rem;

  }



  .text-overlay h1 {

    font-size: 1.6rem;

  }



  .buttons {

    top: 85%;

    width: 100%;

    display: flex;

    justify-content: center;

  }



    .buttons ul{

        gap: 1.5rem;

    }



    .buttons ul li{

        width: 5rem;

        height: 5rem;

    }

    

    .buttons ul li:hover{

        width: 10rem;

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0);

    }

 

    .buttons ul li .title{

        font-size: 1.1rem;

    }

    

    .wrapper{

      padding: 0 2.5rem;

    }



    .wrapper h2{

      font-size: 2.5rem;

      font-weight: 600;

    }



    .wrapper .content-box{

      flex-direction: column;

      width: 100%;

    }

    .wrapper .content-box .card{

      min-width: 25rem;

      margin: 1rem auto;

    }



    .whyContainer{

        height: auto;

      }

      

      

      .why{

       flex-direction: column;

       margin-top: 5rem;

      }





      .hakkimizdaContainer{

        width: 100%;

        margin-left: 0;

        display: flex;

        margin-top: 5rem;

        align-items: center;

        flex-direction: column;

        gap: 5rem;

      }

      

      .hakkimizdaGorsel img{

        height: 25rem;

        width: 30rem;

      }

      

      .hakkimizdaContainer .hakkimizdaText h1{

        text-align: center;

      }



      .faq-container {

        height: auto;

      }

      

      

      .faq-content {

        padding: 3rem 0rem;

      }

      

      .faq-content h2 {

        text-align: center;

      }

      

      .faq-question {

        font-size: 1.6rem;

      }

      

}