@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

 :root {
     --body-bg-color: #e5f4f9;
     --body-color-light: #8b939c;
     --body-font: "Roboto", sans-serif;
     --page-bg-color: #f2f5f7;
     --body-color: #3d4954;
     --border-color: #b8bec3;
     --placeholder: #ccd0d2;
 }

 * {
     outline: none;
     box-sizing: border-box;
 }

 img {
     max-width: 100%;
 }

 html {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
 }

 body {
     background-color: #fff;
     background-attachment: fixed;
     font-family: var(--body-font);
     color: var(--body-color);
     font-weight: 400;
     margin: 0;
 }

 .likes,
 .year-book,
 .author,
 .main-menu,
 .profile-menu,
 .profile,
 .browse-category,
 .browse,
 .header {
     display: flex;
     align-items: center;
 }

 .book-store {
     display: flex;
     flex-direction: column;
     max-width: 1400px;
     /*   height: 100vh; */
     background-color: var(--page-bg-color);
     margin: 0 auto;
     overflow: hidden;
     box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.21);
 }

 .header {
     height: 70px;
     width: 100%;
     background-color: #ffffff;
     padding: 0 30px;
     font-size: 14px;
     font-weight: 500;
     color: var(--body-color-light);
     justify-content: space-between;
     flex-shrink: 0;
 }

 .search-bar {
     position: relative;
 }

 .search-bar input {
     height: 100%;
     width: 100%;
     display: block;
     background-color: transparent;
     border: none;
     font-weight: 600;
     padding: 0 10px 0 40px;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238b939c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='M21 21l-4.35-4.35'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-size: 15px;
     background-position: 15px 50%;
     color: var(--body-color);
     font-family: var(--body-font);
 }

 .search-bar input::placeholder {
     color: var(--placeholder);
 }

 .browse-category {
     border-right: 1px solid var(--border-color);
     white-space: nowrap;
 }

 .browse-category svg {
     width: 16px;
     margin: 2px 10px 0 8px;
 }

 .header-title {
     font-size: 16px;
     font-weight: 400;
     margin-right: 120px;
 }

 .header-title span {
     font-weight: 500;
     color: var(--body-color);
 }

 .user-img {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     margin-right: 15px;
 }

 .user-profile {
     position: relative;
     cursor: pointer;
     flex-shrink: 0;
 }

 .user-profile:before {
     content: "";
     position: absolute;
     background-color: #f86d72;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     border: 2px solid var(--theme-bg-color);
     right: 12px;
     top: -3px;
     border: 2px solid #fff;
 }

 .profile {
     flex-shrink: 0;
 }

 .profile-menu {
     border-left: 1px solid var(--border-color);
 }

 .profile svg {
     width: 16px;
     margin: 0 8px 0 15px;
     flex-shrink: 0;
 }

 .book-slide {
     width: 100%;
 }

 .book {
     background: #fff;
 }

 .book-cell {
     position: relative;
     display: flex;
     padding: 25px;
     width: 40%;
     height: 250px;
     margin-right: 1px;
     margin: 5px;
     border-radius: 5px;
     background-color: #acacaa;
 }

 .flickity-page-dots {
     display: none;
 }

 .flickity-prev-next-button .arrow {
     fill: #d6d6d6;
 }

 .flickity-prev-next-button svg {
     left: 25%;
     top: 25%;
     width: 50%;
     height: 50%;
 }

 .flickity-prev-next-button.previous {
     left: 15px;
 }

 .flickity-prev-next-button.next {
     right: 15px;
 }

 .flickity-viewport {
     overflow: visible;
 }

 .book-photo {
     width: 180px;
     flex-shrink: 0;
     bottom: -35px;
     left: 35px;
     border-radius: 2px;
     box-shadow: -2px 6px 19px 0px #7f818e;
     transition: 0.3s ease;
 }

 .book-photo:hover {
     transform: scale(1.03);
 }

 .book-img {
     flex-shrink: 0;
 }

 .book-title {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
 }

 .book-title {
     color: #ffffff;
     font-weight: 600;
 }

 .book-author {
     margin-top: 3px;
     font-size: 14px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
 }

 .book-content {
     padding: 0 20px;
     color: #ffffff;
     overflow: hidden;
 }

 fieldset,
 label {
     margin: 0;
     padding: 0;
     display: inline-block;
     vertical-align: middle;
 }

 /* h1 {
     font-size: 0.5em;
     margin: 10px;
 } */

 .rating {
     border: none;
 }

 .rating>input {
     display: none;
 }

 .rating>label:before {
     margin-right: 5px;
     margin-top: 10px;
     font-size: 0.9em;
     font-family: FontAwesome;
     display: inline-block;
     content: "";
 }

 .rating>label {
     color: #fff;
     float: right;
 }

 .rating>input:checked~label,
 .rating:not(:checked)>label:hover,
 .rating:not(:checked)>label:hover~label {
     color: #d85d61;
 }

 .rating>input:checked+label:hover,
 .rating>input:checked~label:hover,
 .rating>label:hover~input:checked~label,
 .rating>input:checked~label:hover~label {
     color: #d85d61;
 }

 .blue>input:checked~label,
 .blue:not(:checked)>label:hover,
 .blue:not(:checked)>label:hover~label {
     color: black;
 }

 .blue>input:checked+label:hover,
 .blue>input:checked~label:hover,
 .blue>label:hover~input:checked~label,
 .blue>input:checked~label:hover~label {
     color: black;
 }

 .purple>input:checked~label,
 .purple:not(:checked)>label:hover,
 .purple:not(:checked)>label:hover~label {
     color: #a76287;
 }

 .purple>input:checked+label:hover,
 .purple>input:checked~label:hover,
 .purple>label:hover~input:checked~label,
 .purple>input:checked~label:hover~label {
     color: #a76287;
 }

 .yellow>input:checked~label,
 .yellow:not(:checked)>label:hover,
 .yellow:not(:checked)>label:hover~label {
     color: #ffad58;
 }

 .yellow>input:checked+label:hover,
 .yellow>input:checked~label:hover,
 .yellow>label:hover~input:checked~label,
 .yellow>input:checked~label:hover~label {
     color: #ffad58;
 }

 .dark-purp>input:checked~label,
 .dark-purp:not(:checked)>label:hover,
 .dark-purp:not(:checked)>label:hover~label {
     color: #905587;
 }

 .dark-purp>input:checked+label:hover,
 .dark-purp>input:checked~label:hover,
 .dark-purp>label:hover~input:checked~label,
 .dark-purp>input:checked~label:hover~label {
     color: #905587;
 }

 .book-voters {
     color: #fff;
     vertical-align: sub;
     font-size: 13px;
     margin-left: 7px;
     white-space: nowrap;
     margin-top: 7px;
 }

 .book-sum {
     margin-top: 20px;
     font-size: 14px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
 }

 .book-see {
     margin-top: 15px;
     left: 5px;
     text-align: center;
     background-color: #fff;
     color: red;
     font-weight: 600;
     padding: 6px;
     font-size: 12px;
     width: 50px;
     border-radius: 35px;
 }


 .book-fav {
     bottom: 205px;
     left: 15px;
     background-color: #fff;
     color: #fbadaf;
     font-weight: 600;
     padding: 8px;
     font-size: 10px;
     width: 35px;
     height: 35px;
     border-radius: 18px;
     position: absolute;
 }

 .book-see:hover {
     color: #ff6e72;
 }

 .book-see.book-blue {
     color: black;
 }

 .book-see.book-blue:hover {
     color: black;
 }

 .book-see.book-pink {
     color: #fb9124;
 }

 .book-see.book-pink:hover {
     color: #9a5611;
 }

 .book-see.book-yellow {
     color: #fdca95;
 }

 .book-see.book-yellow:hover {
     color: #fb9124;
 }

 .book-see.book-purple {
     color: #cbb5e2;
 }

 .book-see.book-purple:hover {
     color: #a764ec;
 }

 .main-wrapper {
     width: 100%;
     display: flex;
     flex-grow: 1;
     margin-top: 100px;
     overflow: hidden;
 }

 .books-of {
     width: 320px;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
     overflow-x: hidden;
     flex-shrink: 0;
 }

 .popular-books {
     flex-grow: 1;
     padding: 0 30px 50px;
     overflow-y: auto;
 }

 .genre {
     font-weight: 500;
     font-size: 15px;
 }

 .main-menu {
     white-space: nowrap;
     padding-bottom: 15px;
     border-bottom: 1px solid #dcddde;
     position: sticky;
     top: 0;
     right: 0;
     background-color: var(--page-bg-color);
     z-index: 2;
 }

 .book-types {
     margin-left: auto;
 }

 .book-types a {
     text-decoration: none;
     color: var(--body-color);
     font-size: 14px;
 }

 .book-type+.book-type {
     margin-left: 20px;
 }

 .book-type {
     position: relative;
     transition: 0.2s;
 }

 .book-type.active,
 .book-type:hover {
     -webkit-text-stroke: 0.3px;
 }

 .book-type.active:before,
 .book-type:hover:before {
     content: "";
     position: absolute;
     width: 28px;
     height: 2px;
     bottom: -17px;
     right: 15px;
     background-color: #67d4ea;
     box-shadow: 0px -1px 5px 0px #67d4ea;
 }

 .book-type:nth-child(2):before {
     right: 12px;
 }

 .book-type:nth-child(3):before {
     right: 8px;
 }

 .book-type:nth-child(4):before {
     right: 6px;
 }

 .book-type:nth-child(5):before {
     right: 20px;
 }

 .week {
     padding: 0 30px;
 }

 .author+.author {
     margin-top: 20px;
 }

 .author-name {
     font-size: 14px;
 }

 .author:last-child {
     margin-bottom: 40px;
 }

 .author-title {
     padding: 0 0 20px;
     font-weight: 500;
     font-size: 15px;
 }

 .author-img {
     border-radius: 50%;
     width: 30px;
     height: 30px;
     margin-right: 16px;
     object-fit: cover;
     object-position: center;
 }

 .year-book-img {
     width: 45px;
     margin-right: 16px;
 }

 .year-book-name {
     margin-bottom: 15px;
     font-weight: 500;
 }

 .year-book-author {
     font-size: 13px;
 }

 .year-book+.year-book {
     margin-top: 20px;
 }

 .year-book-content {
     display: flex;
     flex-direction: column;
     font-size: 14px;
 }

 .overlay {
     position: sticky;
     bottom: 0;
     left: 0;
     width: 340px;
     flex-shrink: 0;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f2f5f7 65%, #f2f5f7 100%);
     height: 60px;
     margin-left: -35px;
 }

 .book-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-column-gap: 40px;
     grid-row-gap: 40px;
     padding-top: 40px;
     position: relative;
 }

 .book-card {
     margin-top: 20px;
     background-color: #fff;
     height: 270px;
     box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     display: flex;
     flex-direction: column;
     cursor: pointer;
     padding: 0 0 10px 10px;
     color: var(--body-color-light);
 }

 .book-card-img {
      width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
     margin-top: -35px;
     border-radius: 2px;
     box-shadow: 0px 1px 7px 2px #c7c9d3;
     border-bottom: 1px solid #dcddde;
     margin-bottom: 20px;
     transition: 0.3s ease;
 }

 .book-card-img:hover {
     transform: scale(1.04);
 }

 .card-content {
     color: var(--body-color);
     padding: 30px;
     overflow: hidden;
     position: relative;
 }

 .book-name {
     font-weight: 500;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }

 .book-by {
     font-size: 13px;
     color: var(--body-color-light);
     margin-top: 4px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }

 .book-rate>label {
     color: #cccccc;
 }

 .rate {
     display: inline-block;
     white-space: nowrap;
 }

 .book-rate>input:checked~label,
 .book-rate:not(:checked)>label:hover,
 .book-rate:not(:checked)>label:hover~label {
     color: #ff9700;
 }

 .book-rate>input:checked+label:hover,
 .book-rate>input:checked~label:hover,
 .book-rate>label:hover~input:checked~label,
 .book-rate>input:checked~label:hover~label {
     color: #ff9700;
 }

 .card-vote {
     color: var(--body-color-light);
 }

 .card-sum {
     color: var(--body-color-light);
     font-size: 13px;
     line-height: 1.6em;
     -webkit-line-clamp: 4;
     margin-top: 15px;
 }

 .content-wrapper {
     display: flex;
     border-bottom: 1px solid #ebedef;
     position: relative;
 }

 .content-wrapper:before {
     content: "";
     position: absolute;
     background-color: #8f98a9;
     background-color: #aaaebc;
     box-shadow: 0 -6px 0 0 #aaaebc, 0 6px 0 0 #aaaebc;
     width: 4px;
     height: 4px;
     border: 0;
     padding: 0;
     right: 12px;
     top: 17px;
     border-radius: 50%;
     margin-left: auto;
 }

 .like-profile {
     margin-top: 8px;
 }

 .like-profile+.like-profile {
     margin-left: -5px;
 }

 .like-img {
     border-radius: 50%;
     width: 28px;
     object-fit: cover;
     border: 2px solid #fff;
 }

 .like-name {
     font-size: 13px;
     margin-left: 15px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }

 .like-name span {
     font-weight: 600;
 }

 @media (max-width: 1103px) {
     .book-cell {
         width: 60%;
     }
 }

 @media (max-width: 765px) {
     .book-cell {
         width: 80%;
     }
 }

 @media (max-width: 575px) {
     .book-cell {
         width: 100%;
     }
 }

 @media (max-width: 458px) {
     .book-photo {
         width: 180px;
     }

     .book-voters {
         display: none;
     }
 }

 @media (max-width: 420px) {
     .book-see {
         width: 120px;
         font-size: 13px;
     }

     .book-photo {
         width: 130px;
     }

     .main-wrapper {
         margin-top: 50px;
     }
 }

 @media (max-width: 360px) {
     .rating>label:before {
         font-size: 0.8em;
     }
 }

 @media (max-width: 1220px) {
     .card-vote {
         display: none;
     }
 }

 @media (max-width: 1085px) {
     .book-rate>label {
         font-size: 0.7em;
     }
 }

 @media (max-width: 1045px) {
     .books-of {
         display: none;
     }
 }

 @media (max-width: 725px) {

     .browse-category,
     .search-bar {
         display: none;
     }

     .header-title {
         margin-right: auto;
     }

     .book-cards {
         grid-template-columns: 1fr;
     }

     .book-types {
         display: none;
     }
 }

 @media (max-width: 372px) {
     .card-content {
         padding: 20px;
     }
 }

 .style-1 del {
     color: rgba(255, 0, 0, 0.5);
     text-decoration: none;
     position: relative;
 }

 .style-1 del:before {
     content: " ";
     display: block;
     width: 100%;
     border-top: 2px solid rgba(255, 0, 0, 0.8);
     height: 12px;
     position: absolute;
     bottom: 0;
     left: 0;
     transform: rotate(-7deg);
 }

 .style-1 ins {
     color: green;
     font-size: 32px;
     text-decoration: none;
     padding: 1em 1em 1em 0.5em;
 }

 .style-2 del {
     color: rgba(128, 128, 128, 0.5);
     text-decoration: none;
     position: relative;
     font-size: 40px;
     font-weight: 100;
 }

 .style-2 del:before {
     content: " ";
     display: block;
     width: 100%;
     border-top: 2px solid rgba(128, 128, 128, 0.8);
     border-bottom: 2px solid rgba(128, 128, 128, 0.8);
     height: 4px;
     position: absolute;
     bottom: 22px;
     left: 0;
     transform: rotate(-11deg);
 }

 .style-2 ins {
     font-size: 80px;
     font-weight: 100;
     text-decoration: none;
     padding: 1em 1em 1em 0.5em;
 }

 .style-3 {
     position: absolute;
     top: 200px;
     right: -15px;
 }

 .style-3 del {
     color: rgba(255, 165, 0, 0.5);
     text-decoration: none;
     position: relative;
     bottom: 35px;
     right: -115px;
     font-size: 30px;
     font-weight: 100;
     text-shadow: 1px 1px 2px white;
 }

 .style-3 del:before {
     content: " ";
     display: block;
     width: 100%;
     border-top: 8px double rgba(255, 165, 0, 0.8);
     height: 4px;
     position: absolute;
     bottom: 20px;
     left: 0;
     transform: rotate(-11deg);
 }

 .style-3 ins {
     font-size: 40px;
     font-weight: 800;
     text-decoration: none;
     padding: 1em 1em 1em 0.5em;
 }

 .style-4 del {
     color: rgba(169, 169, 169, 0.5);
     text-decoration: none;
     position: relative;
     font-size: 40px;
     font-weight: 100;
 }

 .style-4 del:before {
     content: " ";
     display: block;
     width: 100%;
     border-top: 3px solid rgba(169, 169, 169, 0.8);
     height: 4px;
     position: absolute;
     bottom: 20px;
     left: 0;
     transform: rotate(-11deg);
 }

 .style-4 del:after {
     content: " ";
     display: block;
     width: 100%;
     border-top: 3px solid rgba(169, 169, 169, 0.8);
     height: 4px;
     position: absolute;
     bottom: 20px;
     left: 0;
     transform: rotate(11deg);
 }

 .style-4 ins {
     font-size: 60px;
     font-weight: 500;
     text-decoration: none;
     padding: 1em 1em 1em 0.5em;
 }

 .swiper-container {
     width: 100%;
     height: 100%;
     overflow: hidden;
     /* Ekstra kaymaları engelle */
 }

 .swiper-slide {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .logo {
     font-size: 44px;
     font-weight: 800;
 }

 body {
     background-image: url('static/webp/arkaplan.webp');
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-color: rgba(255, 255, 255, 0.7);
     background-blend-mode: lighten;
 }

 .badge {
     padding: 1px 9px 2px;
     font-size: 12.025px;
     font-weight: bold;
     white-space: nowrap;
     color: #ffffff;
     background-color: #999999;
     -webkit-border-radius: 9px;
     -moz-border-radius: 9px;
     border-radius: 9px;
 }

 .badge:hover {
     color: #ffffff;
     text-decoration: none;
     cursor: pointer;
 }

 .badge-error {
     background-color: #b94a48;
 }

 .badge-error:hover {
     background-color: #953b39;
 }

 .badge-warning {
     background-color: #f89406;
 }

 .badge-warning:hover {
     background-color: #c67605;
 }

 .badge-success {
     background-color: #468847;
 }

 .badge-success:hover {
     background-color: #356635;
 }

 .badge-info {
     background-color: #3a87ad;
 }

 .badge-info:hover {
     background-color: #2d6987;
 }

 .badge-inverse {
     background-color: #333333;
 }

 .badge-inverse:hover {
     background-color: #1a1a1a;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 16px;
 }

 @media (min-width: 576px) {
     .products-grid {
         grid-template-columns: repeat(2, 1fr);
         /* Mobilde yan yana 2 ürün */
     }
 }

 @media (min-width: 992px) {
     .products-grid {
         grid-template-columns: repeat(4, 1fr);
         /* Web üzerinden 4 ürün */
     }
 }

 .product-card {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 8px;
     overflow: hidden;
     padding: 16px;
     /* transition: transform 0.3s ease-in-out; */
 }

 .product-card:hover {
     transform: scale(1.05);
 }



 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
 @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

 .snip1493 {
     font-family: 'Open Sans', Arial, sans-serif;
     position: relative;
     overflow: hidden;
     margin: 10px;
     min-width: 250px;
     max-width: 310px;
     width: 100%;
     background-color: #ffffff;
     color: #000000;
     text-align: left;
     font-size: 16px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 }

 .snip1493 * {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }

 .snip1493:after {
     position: absolute;
     top: 12px;
     left: 0;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 25px 0 25px 25px;
     border-color: transparent transparent transparent #d2652d;
     content: '';
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .snip1493 img {
     max-width: 100%;
     /* height: 260px; */
     position: relative;
 }

 .snip1493 figcaption {
     padding: 20px 20px 30px;
     background-color: #ffffff;
 }

 .snip1493 .date {
     background-color: #d2652d;
     top: 15px;
     color: #fff;
     right: 15px;
     min-height: 48px;
     min-width: 48px;
     position: absolute;
     text-align: center;
     font-size: 18px;
     font-weight: 700;
     text-transform: uppercase;
     border-radius: 50%;
     padding: 10px 0;
 }

 .snip1493 .date span {
     display: block;
     line-height: 14px;
 }

 .snip1493 .date .month {
     font-size: 11px;
 }

 .snip1493 h3,
 .snip1493 p {
     margin: 0;
     padding: 0;
 }

 .snip1493 h3 {
     margin-bottom: 10px;
     display: inline-block;
     font-weight: 700;
 }

 .snip1493 p {
     font-size: 0.8em;
     margin-bottom: 20px;
     line-height: 1.6em;
 }

 .snip1493 footer {
     padding: 0 25px;
     color: #999999;
     font-size: 0.8em;
     line-height: 50px;
     text-align: left;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
 }

 .snip1493 footer>div {
     display: inline-block;
     margin-right: 15px;
 }

 .snip1493 footer i {
     margin-right: 5px;
     font-size: 1.2em;
 }

 .snip1493 a {
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     z-index: 1;
 }

 .snip1493:hover:after,
 .snip1493.hover:after {
     -webkit-transform: translateX(0%);
     transform: translateX(0%);
 }

 @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&display=swap");

 body {
     font-family: "Heebo", sans-serif;
 }

 .ultimate-post-kit-container {
     display: flow-root;
     box-sizing: content-box;
     max-width: 1200px;
     margin-left: auto;
     margin-right: auto;
     padding-left: 14px;
     padding-right: 14px;
     margin-top: 50px;
 }

 .upk-maple-grid .upk-post-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-gap: 20px;
 }

 .upk-maple-grid .upk-post-grid-item {
     position: relative;
     overflow: hidden;
     display: flex;
     transition: all 0.3s ease;
 }

 .upk-maple-grid .upk-post-grid-item:hover .upk-blog-image {
     transform: scale(1.1);
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box {
     position: relative;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-image-wrapper {
     position: relative;
     display: flex;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-image-wrapper .upk-main-image {
     position: relative;
     overflow: hidden;
     border-radius: 5px;
     width: 100%;
     height: 160px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-image-wrapper .upk-main-image .upk-blog-image {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     transition: all 0.3s ease-in-out;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-badge {
     position: absolute;
     top: 0;
     left: 0;
     margin: 25px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-badge a {
     background-color: #7e7778;
     text-decoration: none;
     padding: 5px 12px;
     border-radius: 3px;
     font-size: 12px;
     color: #ffffff;
     letter-spacing: 1.5px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-badge * {
     color: #ffffff;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-badge-icon {
     position: absolute;
     bottom: 0;
     top: 30px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-badge-icon a {
     color: #fff;
     background-color: #FDE917;
     display: flex;
     position: absolute;
     padding: 5px 15px;
     border: 6px solid #eee7e7;
     height: 50px;
     width: 50px;
     border-radius: 40px;
     cursor: pointer;

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

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-badge-icon a i {
     display: flex;

 }


 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-badge-icon .sayiyla {
     margin-top: -10px;
     font-weight: 900;
     text-shadow: 1px 1px 2px rgb(12, 12, 12);
     display: block;
     height: 70px;
     width: 70px;
 }



 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content {
     padding-top: 20px;
     display: flex;
     align-items: center;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-author {
     display: flex;
     align-items: center;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-author img {
     border-radius: 80px;
     margin-right: 10px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .author-name {
     color: #8D99AE;
     font-weight: 600;
     margin-right: 10px;
     text-transform: capitalize;
     text-decoration: none;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 20px;
     position: relative;
     display: flex;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date .date {
     color: #8D99AE;
     text-transform: capitalize;
     text-decoration: none;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date::before {
     content: "";
     position: absolute;
     height: 1px;
     width: 15px;
     background: #8D99AE;
     left: 0;
     top: 53%;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin: 0 5px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-post-time {
     margin-left: 5px;
     color: #8D99AE;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-post-time i {
     margin-right: 2px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     width: 100%;
     font-size: 18px;
     font-weight: 600;
     line-height: 1.4;
     margin-top: 0;
     margin-bottom: 15px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title {
     color: #2B2D42;
     background-image: linear-gradient(currentColor, currentColor);
     background-position: 0% 100%;
     background-repeat: no-repeat;
     background-size: 0% 2px;
     transition: background-size 0.3s;
     text-decoration: none;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title:hover {
     color: #EF233C;
     background-size: 100% 2px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title:focus {
     background-size: 100% 2px;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-desc {
     color: #8D99AE;
     font-size: 14px;
     line-height: 1.6;
 }

 .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-desc P {
     margin: 0;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+1) {
     grid-column: span 6/auto;
     grid-row: span 4/auto;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-post-grid-item-box {
     display: block;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-post-grid-item-box .upk-main-image {
     width: 100%;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-post-grid-item-box .upk-blog-box-content {
     padding-top: 30px;
     padding-left: 0px;
     padding-right: 0px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 18px;
 }

 .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+3) {
     grid-column: span 6/auto;
     grid-row: span 3/auto;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) {
     grid-column: span 6/auto;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box {
     display: flex;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-box-content {
     padding: 15px;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
     font-size: 16px;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-box-content .upk-box-content-inner {
     display: flex;
     flex-direction: row-reverse;
     flex-flow: wrap-reverse;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
     font-size: 13px;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date {
     padding-left: 0px;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta .upk-blog-date i {
     margin-left: 0;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-badge {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-badge-icon {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-author {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-date::before {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-desc {
     display: none;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-main-image {
     width: 150px;
 }

 .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-post-meta {
     margin-bottom: 0;
 }

 .upk-maple-grid .upk-post-layout-4 .upk-post-grid-item:nth-child(n+1) {
     grid-column: span 6/auto;

 }

 .upk-global-link-yes .upk-maple-grid .upk-post-grid-item:hover {
     cursor: pointer;
 }

 @media (min-width: 768px) {
     .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 24px;
     }

     .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-desc {
         font-size: 16px;
         margin-bottom: 20px;
     }

     .upk-maple-grid .upk-post-grid-item .upk-post-grid-item-box .upk-blog-box-content .upk-blog-post-meta {
         font-size: 14px;
     }

     .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(6n+6) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-1 .upk-post-grid-item:nth-child(n+1) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+3) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-2 .upk-post-grid-item:nth-child(5n+1) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+2) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+4) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+5) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-blog-image-wrapper {
         width: 50%;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-blog-box-content {
         width: 50%;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-post-grid-item-box {
         display: flex;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-post-grid-item-box .upk-blog-badge-icon {
         bottom: 50px;
         right: 0px;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-post-grid-item-box .upk-blog-box-content {
         padding: 0 30px;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+1) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 24px;
     }

     .upk-maple-grid .upk-post-layout-5 .upk-post-grid-item:nth-child(5n+3) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) {
         grid-column: span 3/auto;
     }

     .upk-maple-grid .upk-post-layout-3 .upk-post-grid-item:nth-child(n+1) .upk-post-grid-item-box .upk-blog-box-content .upk-blog-title-wrap {
         font-size: 18px;
     }

     .upk-maple-grid .upk-post-layout-4 .upk-post-grid-item:nth-child(n+1) {
         grid-column: span 3/auto;
     }
 }

 .button {
     text-align: center;
     margin-top: 50px;
     margin-bottom: 50px;
 }

 .button a {
     text-decoration: none;
     background: #e20000;
     padding: 10px 20px;
     color: #fff;
     text-transform: capitalize;
     font-weight: 600;
     border-radius: 3px;
     transition: all 0.3s ease;
 }

 .button a:hover {
     background: #f00;
 }

 h2.purpose-title {
     font-size: 20px;
     line-height: 1.4;
     margin-bottom: 40px;
 }

 :root {
     --desktop-font-multiplier: 1;
     --mobile-font-multiplier: 0.7;
 }

 .hero-banner {
     position: relative;
     height: 80vh;
     width: 100%;
 }

 .hero-swiper {
     height: 100%;
     width: 100%;
 }

 .swiper-slide {
     position: relative;
     background-size: cover !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
     display: flex;
     align-items: center;
 }

 .swiper-slide::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1;
 }

 .slide-content {
     position: relative;
     z-index: 2;
     color: white;
     width: 100%;
 }

 .responsive-text {
     font-size: calc(var(--base-size, 16px) * var(--desktop-font-multiplier));
 }

 @media (max-width: 768px) {
     .hero-banner {
         height: auto;
         min-height: 70vh;
     }

     .swiper-slide {
         background-size: cover !important;
         background-position: center !important;
         height: 70vh;
     }

     .responsive-text {
         font-size: calc(var(--base-size, 16px) * var(--mobile-font-multiplier));
     }

     .title {
         font-size: calc(2rem * var(--mobile-font-multiplier));
     }

     .btn-block .cus-btn {
         font-size: calc(1rem * var(--mobile-font-multiplier)) !important;
         padding: 10px 15px;
     }
 }

 /* Responsive text sizing */
 .title {
     --base-size: 3rem;
 }

 .btn-block .cus-btn {
     --base-size: 1.5rem;
 }

 p {
     --base-size: 1rem;
 }

 .swiper-button-next,
 .swiper-button-prev {
     top: 70% !important;
     /* İsterseniz yüzde değerini ayarlayabilirsiniz */
 }

 @media (max-width: 768px) {

     .swiper-button-next,
     .swiper-button-prev {
         top: 80% !important;
         /* Mobilde farklı bir konumlandırma */
     }
 }



 /* Genel Sıfırlamalar ve Fontlar */
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: 'Open Sans', sans-serif;
 }

 :root {
     /* Renk Değişkenleri */
     --primary-color: #55b275;
     /* Goodreads'e yakın yeşil */
     --background-teal: #4cbfb7;
     /* Dış arka plan rengi */
     --text-dark: #333;
     --text-medium: #666;
     --text-light: #999;
     --star-gold: #f5c016;
     --button-teal: #6adbe6;
 }



 .outer-background {
     display: flex;
     justify-content: center;
     padding: 20px;
 }

 .page-container {
     width: 100%;
     max-width: 900px;
     /* Sayfa genişliği */
     background-color: #fff;
     border-radius: 5px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 }

 /* 1. Navigasyon Çubuğu */
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 25px;
     border-bottom: 1px solid #eee;
 }

 .navbar-left {
     display: flex;
     align-items: center;
 }

 .menu-icon {
     font-size: 1.2em;
     color: var(--text-dark);
     cursor: pointer;
     margin-right: 15px;
 }

 .logo {
     font-size: 1.5em;
     font-weight: 600;
     color: var(--primary-color);
 }

 .navbar-right .icon {
     font-size: 1.1em;
     color: var(--text-medium);
     margin-left: 20px;
     cursor: pointer;
 }

 .user-avatar {
     font-size: 1.8em;
     color: var(--text-medium);
     margin-left: 20px;
 }

 /* 2. Ana İçerik Alanı */
 .book-details-content {
     display: flex;
     padding: 40px 25px;
 }

 /* 2.1. Kapak Alanı */
 .cover-section {
     flex: 0 0 200px;
     /* Sabit genişlik */
     margin-right: 30px;
 }

 .book-cover {
     width: 100%;
     height: auto;
     display: block;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 /* 2.2. Detaylar Alanı */
 .info-section {
     flex: 1;
 }

 .book-title {
     font-size: 1.5em;
     font-weight: 700;
     color: var(--text-dark);
     line-height: 1.2;
     margin-bottom: 10px;
 }

 .author-info {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
     color: var(--text-medium);
 }

 .author-avatar {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     margin-right: 5px;
     background-color: #eee;
     /* Avatar yoksa yer tutucu */
 }

 .author-name {
     font-weight: 600;
     margin-right: 5px;
 }

 .verified-badge i {
     color: var(--primary-color);
     font-size: 0.9em;
     margin-right: 15px;
 }

 /* Puanlama */
 .rating-bar {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }

 .stars .filled {
     color: var(--star-gold);
     font-size: 1em;
 }

 .rating-count {
     color: var(--text-dark);
     font-weight: 700;
     margin-left: 5px;
 }

 .separator {
     color: var(--text-light);
     margin: 0 8px;
 }

 .review-count {
     color: var(--text-light);
     font-size: 0.9em;
 }

 /* Açıklama */
 .description {
     font-size: 0.95em;
     color: var(--text-dark);
     line-height: 1.6;
     margin-bottom: 20px;
     border-bottom: 1px solid #eee;
     padding-bottom: 20px;
 }

 .more-link {
     color: var(--primary-color);
     font-weight: 600;
     cursor: pointer;
 }

 /* Detay Tablosu */
 .details-table {
     margin-bottom: 30px;
 }

 .detail-row {
     display: flex;
     margin-bottom: 5px;
     font-size: 0.9em;
 }

 .detail-row .label {
     flex: 0 0 100px;
     color: var(--text-light);
     text-transform: uppercase;
 }

 .detail-row .value {
     color: var(--text-dark);
 }

 .edition-link {
     display: inline-block;
     padding: 3px 8px;
     margin-right: 8px;
     border: 1px solid var(--text-light);
     border-radius: 3px;
     color: var(--text-light);
     cursor: pointer;
 }

 .edition-link.active {
     background-color: var(--text-medium);
     color: #fff;
     border-color: var(--text-medium);
 }

 /* Aksiyon Butonları */
 .action-buttons {
     display: flex;
     gap: 15px;
 }

 .btn {
     padding: 10px 20px;
     border: 1px solid var(--button-teal);
     border-radius: 3px;
     font-size: 1em;
     font-weight: 700;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
 }

 .add-to-read {
     background-color: var(--button-teal);
     color: #fff;
 }

 .add-to-read:hover {
     background-color: #49c4cf;
 }

 .preview-btn {
     background-color: #fff;
     color: var(--button-teal);
 }

 .preview-btn:hover {
     background-color: #f0f0f0;
 }

 /* 3. Alt Kısımdaki Bağlantılar */
 .footer-links {
     display: flex;
     justify-content: space-between;
     padding: 15px 25px;
     border-top: 1px solid #eee;
 }

 .footer-link {
     text-decoration: none;
     font-weight: 700;
     color: var(--text-medium);
     font-size: 0.9em;
     transition: color 0.3s;
 }

 .footer-link:hover {
     color: var(--primary-color);
 }

 /* ================================================= */
 /* MOBİL UYUMLULUK (Media Query)         */
 /* ================================================= */

 @media (max-width: 650px) {
     .navbar {
         padding: 10px 15px;
     }

     .navbar-right .icon {
         margin-left: 10px;
     }

     .book-details-content {
         flex-direction: column;
         /* Mobil görünümde dikey hizala */
         padding: 20px 15px;
     }

     .cover-section {
         flex: 0 0 auto;
         width: 150px;
         /* Kapak genişliğini küçült */
         margin: 0 auto 20px auto;
         /* Ortala */
     }

     .book-title {
         font-size: 1.3em;
         text-align: center;
     }

     .author-info {
         justify-content: center;
     }

     .rating-bar {
         justify-content: center;
         margin-bottom: 15px;
     }

     .description {
         padding-bottom: 15px;
         text-align: justify;
     }

     .details-table {
         margin-bottom: 20px;
     }

     .detail-row {
         flex-direction: column;
         /* Detay satırlarını dikey yığı */
         margin-bottom: 10px;
     }

     .detail-row .label {
         flex: auto;
         margin-bottom: 2px;
     }

     .action-buttons {
         flex-direction: column;
         /* Butonları alt alta yığ */
         gap: 10px;
     }

     .btn {
         width: 100%;
         padding: 12px 20px;
     }

     .footer-links {
         padding: 15px 15px;
     }
 }



 /* Genel Sıfırlamalar ve Font Tanımları */
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     /* Eğer Google Font kullanılıyorsa, burada tanımlayın */
     font-family: 'Montserrat', sans-serif;
 }



 /* Ana Kapsayıcı */
 .banner-container {
     display: flex;
     width: 100%;
     /* Görseldeki genişlik baz alınarak */
     max-width: 100%;
     min-height: 250px;
     /* Görseldeki yükseklik baz alınarak */
     background-color: #fff;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
 }

 /* 1. Sol Kısım: Dergi ve İndirim */
 .magazine-offer-section {
     flex: 0 0 35%;
     /* Yaklaşık görseldeki oran */
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     /* Derginin diğer elemanların üzerine çıkması için */
 }

 /* Dergi Görseli */
 .magazine-image-wrapper {
     position: absolute;
     left: 50px;
     bottom: 31px;
     /* Hafifçe aşağı taşma */
     transform: rotate(-5deg);
     /* Hafif eğiklik */
     width: 60%;
     /* Oranlamaya dikkat edin */
     max-height: 100%;
 }

 .magazine-cover {
     width: 100%;
     height: auto;
     display: block;
     box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
 }

 /* İndirim Rozeti */
 .discount-badge-wrapper {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translate(50%, -50%);
     width: 100px;
     /* Rozet boyutu */
     height: 100px;
     z-index: 3;
 }

 .discount-badge {
     background-color: #000;
     color: #fff;
     border-radius: 50%;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 5px;
 }

 .discount-text {
     font-size: 0.8em;
     font-weight: 400;
 }

 .discount-percentage {
     font-size: 2em;
     font-weight: 900;
     line-height: 1;
 }

 /* 2. Sağ Kısım: İçerik ve Buton */
 .content-section {
     flex: 1;
     display: flex;
     flex-direction: column;
     position: relative;
 }

 /* Üst Başlık Alanı ve Sarı Zemin */
 .top-content-area {
     flex: 1;
     position: relative;
     z-index: 1;
     padding: 20px;
     display: flex;
     align-items: center;
 }

 .top-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #ffe87c;
     /* Açık Sarı */
     /* Beyaz bölgeyi oluşturan eğik çizgiyi yapmak için: */
     clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 100%);
     z-index: -1;
 }

 .main-title {
     color: #000;
     font-size: 1.8em;
     font-weight: 900;
     line-height: 1.2;
     margin-left: 50px;
     /* Başlığın içeri kayması */
     padding-top: 10px;
 }

 /* Alt CTA Alanı */
 .bottom-cta-area {
     flex: 0 0 40%;
     /* Yaklaşık yükseklik */
     display: flex;
     align-items: center;
     justify-content: space-around;
     padding: 0 20px;
 }

 .cta-text-wrapper {
     display: flex;
     align-items: center;
 }

 .gift-icon-placeholder {
     font-size: 2.5em;
     /* Büyük hediye kutusu simgesi */
     color: #666;
     margin-right: 15px;
 }

 .cta-text {
     color: #666;
     font-size: 1.1em;
     font-weight: 700;
     line-height: 1.4;
 }

 /* Abone Butonu */
 .subscribe-button {
     background-color: #ffe87c;
     /* Buton için sarı renk */
     color: #000;
     border: none;
     font-size: 1.5em;
     font-weight: 900;
     padding: 15px 30px;
     cursor: pointer;
     text-transform: uppercase;
     transition: background-color 0.3s;
 }

 .subscribe-button:hover {
     background-color: #ffd633;
 }

 /* ================================================= */
 /* MOBİL UYUMLULUK (Media Query)         */
 /* ================================================= */

 @media (max-width: 768px) {
     .banner-container {
         flex-direction: column;
         /* Mobil görünümde dikey hizala */
         min-height: auto;
         width: 100%;
     }

     /* Sol Kısım: Dergi ve İndirim */
     .magazine-offer-section {
         flex: 0 0 auto;
         height: 150px;
         /* Yüksekliği küçült */
         padding: 10px 0;
     }

     .magazine-image-wrapper {
         position: static;
         /* Pozisyonu sabitten çıkar */
         transform: none;
         /* Eğikliği kaldır */
         width: 100px;
         bottom: 0;
         margin-left: 20px;
     }

     .discount-badge-wrapper {
         position: static;
         transform: none;
         margin-right: 20px;
         margin-left: auto;
     }

     .discount-badge {
         width: 80px;
         height: 80px;
     }

     .discount-percentage {
         font-size: 1.8em;
     }

     /* Sağ Kısım: İçerik */
     .content-section {
         flex: 1;
     }

     .top-content-area {
         padding: 15px;
     }

     .top-background {
         /* Mobil görünümde eğik çizgiyi kaldır veya değiştir */
         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
         /* Düz dikdörtgen */
     }

     .main-title {
         font-size: 1.4em;
         margin-left: 0;
         text-align: center;
         width: 100%;
         padding-top: 0;
     }

     /* Alt CTA Alanı */
     .bottom-cta-area {
         flex-direction: column;
         /* Dikey hizala */
         padding: 20px;
     }

     .cta-text-wrapper {
         margin-bottom: 15px;
     }

     .subscribe-button {
         width: 100%;
         /* Tam genişlikte buton */
         font-size: 1.3em;
     }
 }

 .plans {
     width: 100%;
     margin: 20px auto;
     overflow: hidden;
     padding: 15px;
 }

 .plan {
     float: left;
     width: 440px;
     margin: 20px 2px;
     padding: 15px 25px;
     text-align: center;
     background: white;
     background-clip: padding-box;
     border: 2px solid #e5ded6;
     border-color: rgba(black, .1);
     border-radius: 5px;
 }

 .plan-title {
     margin-bottom: 12px;
     font-size: 24px;
     color: #090909;
 }

 .plan-price {
     margin-bottom: 20px;
     line-height: 1;
     font-size: 28px;
     font-weight: bold;
     color: #9a8c84;
 }

 .plan-unit {
     display: block;
     margin-top: 5px;
     font-size: 13px;
     font-weight: normal;
     color: #aaa;
 }

 .plan-features {
     width: 380px;
     margin: 20px auto 15px;
     padding: 15px 0 0 15px;
     border-top: 1px solid #e5ded6;
     text-align: left;
 }

 .plan-feature {
     line-height: 20px;
     font-size: 24px;
     font-weight: 500;
     color: #333;

     &+& {
         margin-top: 5px;
     }
 }

 .plan-feature-unit {
     margin-left: 2px;
     font-size: 16px;
 }

 .plan-feature-name {
     font-size: 13px;
     font-weight: normal;
     color: #aaa;
 }

 .plan-button {
     position: relative;
     display: block;
     line-height: 40px;
     font-size: 16px;
     font-weight: 500;
     color: white;
     text-align: center;
     text-decoration: none;
     text-shadow: 0 1px rgba(black, .1);
     background: #9a8c84;
     border-bottom: 2px solid #9a8c84;
     border-color: rgba(black, .15);
     border-radius: 4px;

     &:active {
         top: 2px;
         margin-bottom: 2px;
         border-bottom: 0;
     }
 }

 .plan-highlight {
     margin-top: 0;
     margin-bottom: 0;
     padding-left: 15px;
     padding-right: 15px;
     width: 370px;
     border: 4px solid #9a8c84;

     .plan-button {
         font-size: 18px;
         line-height: 49px;
         background: #9a8c84;
         border-color: #9a8c84;
         border-color: rgba(black, .15);
     }
 }

 .plan-recommended {
     width: 160px;
     margin: -15px auto 15px;
     padding-bottom: 2px;
     line-height: 22px;
     font-size: 14px;
     font-weight: bold;
     color: white;
     text-shadow: 0 1px rgba(black, .05);
     background: #9a8c84;
     border-radius: 0 0 4px 4px;
 }

 .footer-main {
     position: relative;
     z-index: 1;
     color: white;
     /* Footer içeriğinin görünürlüğünü artırmak için metin rengini beyaz yapalım */
 }

 .footer-main::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('static/slider/3.webp') no-repeat center center;
     background-size: cover;
     opacity: 0.3;
     /* Görselin opaklığını ayarlar */
     z-index: -1;
 }

 /* ================================== */
 /* MOBİL ODAKLI STİLLER (767px ve altı temel alınmıştır) */
 /* ================================== */

 /* Üst Başlık Alanı */
 .magazine-mobile-header {
     background-color: #f8f9fa;
     /* Açık arka plan rengi */
     padding-bottom: 30px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }

 /* Dergi Kapağı Kapsayıcısı */
 .magazine-cover-wrapper-mobile {
     position: relative;
     max-width: 200px;
     /* Mobil cihazlar için ideal genişlik */

     /* Masaüstünde daha büyük görünmesi için */
     @media (min-width: 768px) {
         max-width: 250px;
     }
 }

 .magazine-cover-img-mobile {
     width: 100%;
     height: auto;
     border-radius: 8px;
     display: block;
 }

 /* Fiyat Rozeti (Görseldeki gibi sağ üstte) */
 .price-badge {
     position: absolute;
     top: -10px;
     right: -10px;
     padding: 5px 10px;
     border-radius: 50%;
     /* Daire şeklinde rozet */
     font-size: 1rem;
     font-weight: 700;
     line-height: 1;
     min-width: 65px;
     height: 65px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 3px solid white;
     /* Beyaz çerçeve */
 }

 /* Başlık Stili */
 .magazine-title-mobile {
     font-size: 1.6rem;
     font-weight: 600;
     color: #343a40;
     line-height: 1.2;
 }

 /* CTA Butonları Alanı */
 .cta-buttons-mobile {
     max-width: 350px;
     /* Butonların çok geniş olmasını engellemek için */
     margin: 0 auto;
 }

 /* Genel Kapsayıcılar */
 .magazine-detail-page .container {
     padding-left: 15px;
     padding-right: 15px;
 }

 /* ================================== */
 /* GÖRSEL ODAKLI HERO BANNER STİLLERİ */
 /* ================================== */


 /* Arkaplan üzerindeki metnin okunurluğunu artırmak için hafif koyu katman */
 .magazine-hero-banner::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.2);
     /* Yarı şeffaf siyah katman */
     z-index: 1;
 }

 .magazine-hero-banner .container,
 .magazine-hero-banner .row,
 .magazine-hero-banner .col-md-5,
 .magazine-hero-banner .col-md-7 {
     position: relative;
     z-index: 2;
     /* Metin ve kapak arkaplanın önünde olmalı */
 }

 /* Kapak Görselinin Konumlandırması */
 .magazine-cover-focus-wrapper {
     position: relative;
     max-width: 300px;
     /* Web'de hizalama: text-md-start ile yapılır */
 }

 .magazine-cover-focus-img {
     width: 100%;
     height: 100%;
     border-radius: 8px;
     transition: transform 0.3s ease;
 }

 /* Fiyat Rozeti */
 .price-badge-focus {
     position: absolute;
     top: -10px;
     right: -120px;
     padding: 10px 15px;
     border-radius: 100%;
     font-size: 1.1rem;
     font-weight: 700;
     line-height: 1.1;
     min-width: 80px;
     width: 80px;
     height: 80px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border: 4px solid white;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 /* ================================== */
 /* MOBİL UYUMLULUK (Mobil Öncelikli) */
 /* ================================== */
 @media (max-width: 767.98px) {
     .magazine-hero-banner {
         /* Mobil için dikeyde daha az boşluk */
         padding-top: 30px;
         padding-bottom: 30px;
         text-align: center;
     }

     .magazine-hero-banner h1 {
         font-size: 2rem;
     }

     .magazine-cover-focus-wrapper {
         max-width: 180px;
         /* Mobil için kapağı biraz küçült */
         margin-bottom: 30px !important;
     }

     .cta-buttons-hero {
         /* Mobil butonları ortalar */
         max-width: 90%;
     }
 }