.blogs-sec {
  background-image: url("../../../public/images/blogs-banner.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 245px 0px;
}

.blogs-content {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.blogs-content h2 {
  background: linear-gradient(180deg, #f8c18b 36.11%, #f6d7b8 71.43%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
  font-size: 60px;
  font-style: italic;
}

.blogs-content p {
  color: var(--white-color);
}

.blogs-content .tag-box {
  margin-bottom: 32px;
}

.big-blogs {
  background-image: url("../../../public/images/big-blog.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 674px;
  display: flex;
  align-items: flex-end;
  padding-left: 45px;
  padding-bottom: 45px;
  border-radius: 20px;
}

.small-blogs {
  background-image: url("../../../public/images/big-blog.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 328px;
  display: flex;
  align-items: flex-end;
  padding-left: 33px;
  padding-bottom: 22px;
  padding-right: 33px;
  border-radius: 20px;
  position: relative;
  z-index: 1;
}

.small-blogs::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: #00000057;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 20px;
}

.small-blogs2 {
  background-image: url("../../../public/images/small-blog2.jpg");
  margin-top: 18px;
}

.small-blogs3 {
  background-image: url("../../../public/images/blog3.jpg");
  background-position: 80% 25%;
}

.small-blogs4 {
  background-image: url("../../../public/images/blog2.jpg");
  background-position: 80% 3%;
}

.big-blogs-content span {
  color: #fff3f0;
  font-style: italic;
  font-size: 14px;
}

.big-blogs-content.big-blogs-content1 h2 {
  font-size: 45px;
}

.big-blogs-content h2 {
  font-size: 30px;
}

.blogs-btn {
  display: flex;
  justify-content: center;
  margin-top: 65px;
}

/* blog modal style css start */
.blog-box-modal .modal-dialog {
  max-width: 80%;
}

.blog-box-modal .modal-content {
  background: linear-gradient(180deg, #373737 0%, #000000 100%);
}

.blog-box-modal .modal-header h5 {
  color: var(--white-color);
}

.blog-details-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.blog-box-modal .modal-body p {
   color: var(--white-color);
}

.blog-box-modal .modal-header .btn-close {
  background-color: var(--white-color);
}

.blog-card {
  perspective: 1000px;
  width: 100%;
  height: 674px;
}

.blog-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 20px;
}

.blog-card:hover .blog-card-inner {
  transform: rotateY(180deg);
}

.blog-card-front,
.blog-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}

.blog-card-front {
  background-image: url("../../../public/images/blog-detail-box.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  padding-left: 45px;
  padding-bottom: 45px;
}

.blog-card-back {
  background: linear-gradient(135deg, #000000, #333333);
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
}

.back-content h3 {
  margin-bottom: 15px;
  font-size: 1.8rem;
}

.blog-card2 {
  perspective: 1000px;
  width: 100%;
  height: 328px;
}

.blog-card2-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 20px;
}

.blog-card2:hover .blog-card2-inner {
  transform: rotateY(180deg);
}

.blog-card2-front2,
.blog-card2-back {
  position: absolute;
  width: 100%;
  height: 328px;
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}

.blog-card2-front2 {
  background-image: url("../../../public/images/big-blog.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 45px;
  color: white;
}

.blog-card2-back {
  background: linear-gradient(135deg, #000000, #333333);
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
}

.blog-card3 {
  perspective: 1000px;
  width: 100%;
  height: 328px;
}

.blog-card3-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 20px;
}

.blog-card3:hover .blog-card3-inner {
  transform: rotateY(180deg);
}

.blog-card3-front2,
.blog-card3-back {
  position: absolute;
  width: 100%;
  height: 328px;
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}

.blog-card3-front2 {
  background-image: url("../../../public/images/small-blog2.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 45px;
  color: white;
}

.blog-card3-back {
  background: linear-gradient(135deg, #000000, #333333);
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
}

.flipper {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flipper:hover {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(180deg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background-image: linear-gradient(135deg, #000000, #333333);
  margin-top: 0 !important;
}

.back h3 {
  color: #8CD000;
  margin-bottom: 10px;
}

@media (max-width: 1440px) {
  .blogs-sec {
    padding: 140px 0px;
  }
}

@media (max-width: 1366px) {
  .big-blogs {
    height: 580px;
  }

  .small-blogs {
    height: 280px;
  }

  .blogs-sec {
    padding: 120px 0px 150px;
  }
}

@media (max-width: 768px) {
  .blog-card,
  .blog-card-inner,
  .blog-card-front,
  .blog-card-back {
    height: 480px !important;
  }

  .blog-card2,
  .blog-card2-inner,
  .blog-card2-front2,
  .blog-card2-back,
  .blog-card3,
  .blog-card3-inner,
  .blog-card3-front2,
  .blog-card3-back {
    height: 360px !important;
  }

  .blogs-content h2 {
    text-align: center;
  }

  .blogs-content p {
    text-align: center;
  }

  .big-blogs {
    padding-left: 15px;
    height: 548px;
    margin-bottom: 20px;
  }

  .small-blogs {
    height: 549px;
  }
}

@media (max-width: 428px) {
  .blog-card,
  .blog-card-inner,
  .blog-card-front,
  .blog-card-back {
    height: 340px !important;
  }

  .blog-card2,
  .blog-card2-inner,
  .blog-card2-front2,
  .blog-card2-back,
  .blog-card3,
  .blog-card3-inner,
  .blog-card3-front2,
  .blog-card3-back {
    height: 260px !important;
  }

  .blog-card-back {
    padding: 15px;
  }
.back-content p {
    font-size: 13px;
}

  .blogs-content h2 {
    font-size: 40px;
  }

  .big-blogs {
    height: 318px;
  }

  .big-blogs-content.big-blogs-content1 h2 {
    font-size: 30px;
  }

  .small-blogs {
    height: 318px;
  }

.blog-box-modal .modal-dialog {
  max-width: 100%;
}
    .blogs-sec {
        padding: 120px 0px 150px;
    }
}

@media (max-width: 390px) {
  .big-blogs {
    height: 288px;
  }

  .small-blogs {
    height: 289px;
  }

  .big-blogs-content h2 {
    font-size: 24px;
  }
}

@media (max-width: 375px) {
  .blog-card,
  .blog-card-inner,
  .blog-card-front,
  .blog-card-back {
    height: 280px !important;
  }

  .blog-card2,
  .blog-card2-inner,
  .blog-card2-front2,
  .blog-card2-back,
  .blog-card3,
  .blog-card3-inner,
  .blog-card3-front2,
  .blog-card3-back {
    height: 230px !important;
  }

  .big-blogs {
    height: 276px;
  }

  .big-blogs-content.big-blogs-content1 h2 {
    font-size: 24px;
    margin: 0;
  }

  .small-blogs {
    height: 277px;
  }

  .big-blogs-content h2 {
    font-size: 22px;
  }

  .blogs-content h2 {
    font-size: 30px;
  }

  .blogs-content p {
    font-size: 14px;
  }

  .blog-details-image img {
    height: 350px;
}

.blog-box-modal .modal-body p {
    font-size: 14px;
    margin-top: 10px;
}
}

@media (max-width: 360px) {
  .big-blogs {
    height: 264px;
  }

  .small-blogs {
    height: 265px;
  }
}


/* Mobile card height adjustments */