#blog {}







#blog .sect20 {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 1;
  /*192 / 95*/
  margin: 0 0 50px 0;
  transition: transform 0.2s ease-out;
  transform-origin: top;
}

#blog .sect20 img.back1 {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#blog .sect20:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(32 173 221 / 50%);
}

#blog .sect20 .content {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 10%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 16%;
  text-align: center;
  transform: translate(-50%, 0);
}

#blog .sect20 .content .text1 {
  margin: 20px 0 0 0;
  font-size: 3vw;
  color: #fff;
  font-family: 'poppins_bold', Arial, sans-serif;
}

#blog .sect20 .content .text2 {
  font-size: 2vw;
  color: #fff;
}

#blog .sect20 .content .buton {
  margin: 25px 0 0 0;
}

#blog .sect20 .content .buton a {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 12px 30px;
  color: #000;
  border-radius: 30px;
  overflow: hidden;
  border: 2px solid #fff;
}

#blog .sect20 .content .buton a:before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #20addd;
  color: #000;
}

#blog .sect20 .content .buton a:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 30px;
  transform: translate(-100%, 0);
  transition: transform 1s ease;
}

#blog .sect20 .content .buton a:hover:after {
  transform: translate(100%, 0);
}

#blog .sect20 .content .buton a .grid {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 10px;
}

#blog .sect20 .content .buton a .grid .s {}

#blog .sect20 .content .buton a .grid .s.s1 {}

#blog .sect20 .content .buton a .grid .s.s2 {
  display: flex;
  align-items: center;
}

#blog .sect20 .content .buton a .grid .s.s2 svg {
  width: 15px;
  height: 15px;
  fill: #000;
  object-fit: contain;
}

@media only screen and (max-width:1100px) {
  #blog .sect20 {
    aspect-ratio: 5 / 3;
  }

  #blog .sect20 .content .text1 {
    font-size: 4.1vw;
  }

  #blog .sect20 .content .text2 {
    margin: 8px 0 0 0;
    font-size: 3.8vw;
  }

  #blog .sect20 .content .buton {
    margin: 10px 0 0 0;
  }
}

@media only screen and (max-width:900px) {
  #blog .sect20 .content .buton a {
    padding: 5px 20px;
  }
}

@media only screen and (max-width:400px) {
  #blog .sect20 {
    /*aspect-ratio:4 / 5;*/
    aspect-ratio: 5 / 5;
  }
}







#blog .pagegrid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;

}

#blog .pagegrids {}

#blog .pagegrids.s1 {}

#blog .pagegrids.s1 .list {
  margin: 30px 0 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

#blog .pagegrids.s1 .list .item {
  position: relative;
  z-index: 1;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
}

#blog .pagegrids.s1 .list .item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.3;
  box-shadow: 0 0 20px 1px #444;
  border-radius: 15px;
  transition: all 1s;
}

#blog .pagegrids.s1 .list .item:hover:before {
  opacity: 1;
}

#blog .pagegrids.s1 .list .item a.img {
  position: relative;
  z-index: 1;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  overflow: hidden;
}

#blog .pagegrids.s1 .list .item a.img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s;
}

#blog .pagegrids.s1 .list .item:hover a.img img {
  transform: scale(1.15);
}

#blog .pagegrids.s1 .list .item a.name {
  display: block;
  padding: 15px 0 0 0;
  font-size: 1.2rem;
}

#blog .pagegrids.s1 .list .item .info {
  display: block;
  margin: 10px 0 0 0;
  font-size: 1rem;
}

#blog .pagegrids.s1 .list .item .button {
  display: block;
  text-align: right;
}

#blog .pagegrids.s1 .list .item .button a {
  display: inline-block;
  padding: 5px 15px;
  background: #0B2545;
  color: #fff;
  border-radius: 30px;
}

#blog .pagegrids.s2 {}

#blog .pagegrids.s2 .kategoriler {
  padding: 15px;
  margin: 0 0 25px 0;
  background: #20addd;
  color: #bde9ef;
  border-radius: 15px;
}

#blog .pagegrids.s2 .kategoriler a {
  color: #bde9ef;
}

#blog .pagegrids.s2 .kategoriler .title {
  font-family: 'poppins_semibold';
  font-size: 1.1rem;
}

#blog .pagegrids.s2 .kategoriler .list {
  margin: 20px 0 0 0;
}

#blog .pagegrids.s2 .kategoriler .list .item {
  margin: 0 0 4px 0;
}

#blog .pagegrids.s2 .kategoriler .list .item a {}

#blog .pagegrids.s2 .kategoriler .list .item a i {
  color: #fff;
}

#blog .pagegrids.s2 .kategoriler .list .item a:hover {
  color: #fff;
}

#blog .pagegrids.s2 .kategoriler .list .item a:hover i {
  color: #000;
}

@media only screen and (max-width:1050px) {
  #blog .pagegrid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  #blog .pagegrids.s1 .list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
  }

  #blog .pagegrids.s1 .list .item {
    padding: 10px;
  }
}

@media only screen and (max-width:650px) {
  #blog .pagegrids.s1 .list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}