html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #fff;
      font-family: "DM Sans", sans-serif;
      font-size: 14px;
      color: #111;
      margin: 0;
      padding: 0;
    }
    h1,h2,h3,h4,h5,h6{
      font-family: "Kalnia", serif;
    }
    h1{
      font-size: 50px;
    } 
    .navbar-nav .nav-link {
      font-size: 16px;
       font-weight: 500;
    }
.page-content{
  padding-top: 150px !important;
}
.top-menu{
  position: absolute;
}
.navbar .navbar-nav .nav-item {
  position: relative;
}
.navbar .navbar-nav .nav-item::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  content: "";
  background-color: red;
  width: 0%;
  height: 3px;
  transition: all 0.5s;
}
.navbar .navbar-nav .nav-item:hover::after {
  width: 100%;
}
.navbar .navbar-nav .nav-item.active::after {
  width: 100%;
}

.nav-link:focus, .nav-link:hover {
  color: red;
}
.nav-item.active .nav-link {
  color: red;
}

    .swiper {
      width: 100%;
      height: auto;
    }

    .mySwiper .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mySwiper .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .swiper-button-next, .swiper-button-prev{
      color: #111;
    }

    .swiper2 {
      width: 100%;
      height: auto;
    }
    .mySwiper2 .swiper-wrapper{
    }
    .mySwiper2 .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mySwiper2 .swiper-slide img {
      display: block;
      border-radius: 50%;
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 1 / 1;
    }

.swiper-button-next-2, .swiper-button-prev-2{
  color: #111;
}
.swiper-slide a{
  text-decoration: none;
  color: #111;
  font-family: "Kalnia", serif;
}
.swiper-slide a img{
  transition: all 300ms;
}
.swiper-slide a:hover img{scale: 0.95; opacity: .8}


.equal-height {
  height: 100%;
  object-fit: cover;
  transition: all 300ms;
}

.column-full-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.column-full-height .card {
  flex: 1;
}


.equal .card:hover .card-img{
  scale: 1.05;
}
.product-title{
  font-size: 21px;
}

.green-labs{
  background-image: url('../images/bg-image-1.jpeg');
  background-position: center;
  background-size: cover;
}
.bg-1{
  background-color: #fcc0e9 !important;
  color: #122 !important;
}
.bg-2{
  background-color: #b2dea3 !important;
  color: #122 !important;
}
.bg-3{
  background-color: #fde69a !important;
  color: #122 !important;
}
.bg-4{
  background-color: #afd6f1 !important;
  color: #122 !important;
}
.bg-5{
  background-color: #feb761 !important;
  color: #122 !important;
}
.bg-6{
  background-color: #c3b8ff !important;
  color: #122 !important;
}

.my-links .nav .nav-item .nav-link{
  color: #fff;
  padding: 3px 0;
}
.my-links .nav .nav-item .nav-link:hover{
  opacity: .5;
}

.max-h-508{
  max-height: 508px;
}


/* Varsayılan: Mobil (<= 575px)  */
:root {
  --container-padding: 16px;
}

/* Mobil (>= 576px) */
@media (max-width: 575px) {
  /* tablet stilleri */
  .page-content{
    padding-top: 10px !important;
  }
  .top-menu{
    position: relative;
  }
  .navbar-brand img{
    height: 30px;
  }
  .navbar-collapse{
    background-color: #fff;
    padding: 30px;
  }
  h1 {
    font-size: 30px;
  }
}

/* Tablet (>= 576px) */
@media (min-width: 576px) {
  /* tablet stilleri */

}

/* Orta Tablet / Küçük Laptop (>= 768px) */
@media (min-width: 768px) {
  /* 768+ */
}

/* Masaüstü (>= 992px) */
@media (min-width: 992px) {
  /* 992+ */
  .navbar {
    padding: 0;
  }
  .navbar .navbar-nav .nav-link {
    padding: 1em 0;
  }
  .navbar .navbar-nav .nav-item {
    margin: 0.9em 1.5em;
  }
  .navbar-brand img{
    height: 90px;
  }
}

/* Büyük Masaüstü (>= 1200px) */
@media (min-width: 1200px) {
  /* 1200+ */
}

@media (min-width: 1366px) {
  .row.same-height > [class*="col-"] {
    display: flex;
    flex-direction: column;
  }

  .row.same-height > [class*="col-"] .card {
    flex: 1;
  }
}

/* Extra Büyük Masaüstü (>= 1400px) */
@media (min-width: 1400px) {
  /* 1400+ */
}