         /* blog page */

         .blog-card {
             background: #fff;
             border-radius: 18px;
             overflow: hidden;
             box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
             transition: all 0.35s ease;
             /* height: 100%; */
         }

         .blog-card:hover {
             transform: translateY(-8px);
             box-shadow: 0 35px 70px rgba(0, 0, 0, 0.12);
         }

         .blog-image {
             display: block;
             height: 240px;
             background-size: cover;
             background-position: center;
             position: relative;
         }

         .blog-image::after {
             content: "";
             position: absolute;
             inset: 0;
             background: linear-gradient(to bottom,
                     rgba(0, 0, 0, 0.1),
                     rgba(0, 0, 0, 0.45));
         }

         .blog-date {
             position: absolute;
             bottom: 16px;
             left: 16px;
             background: rgba(0, 0, 0, 0.75);
             color: #fff;
             padding: 6px 12px;
             font-size: 13px;
             border-radius: 20px;
             z-index: 2;
         }

         .blog-content {
             padding: 26px 26px 30px;
         }

         .blog-title {
             font-size: 24px;
             font-weight: 700;
             line-height: 1.4;
             margin-bottom: 12px;
         }

         .blog-title a {
             color: #111;
             text-decoration: none;
         }

         .blog-title a:hover {
             color: #c89b63;
         }



         .blog-footer {
             display: flex;
             justify-content: space-between;
             align-items: center;
             font-size: 14px;
         }

         .blog-footer .author {
             color: #999;
         }

         .blog-footer .read-more {
             font-weight: 500;
             color: #111;
             text-decoration: none;
         }

         .blog-footer .read-more:hover {
             color: #c89b63;
         }


         /* {{-- ellipsis title --}} */
         .blog-title {
             margin-bottom: 12px;
         }

         .blog-title-link {
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;

             overflow: hidden;
             text-overflow: ellipsis;

             font-size: 20px;
             font-weight: 600;
             line-height: 1.4;

             min-height: calc(1.4em * 2);

             color: #111;
             text-decoration: none;
         }

         /* ellipsis desc */

         /* .blog-excerpt {
                font-size: 15px;
                line-height: 1.7;
                color: #666;
                margin-bottom: 22px;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;

                overflow: hidden;
                text-overflow: ellipsis;

                min-height: calc(1.7em * 3);
            } */

         /* .blog-excerpt {
             font-size: 15px !important;
             line-height: 1.7;
             color: #666;
             margin-bottom: 22px;
             min-height: calc(1.7em * 3);
         }

         .blog-excerpt p {
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 3;
             overflow: hidden;
             margin: 0;
             word-break: break-word;
         } */

         .blog-excerpt {
             font-size: 15px;
             line-height: 1.7;
             color: #666;
             margin-bottom: 22px;

             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 3;
             overflow: hidden;

             height: calc(1.7em * 3);

             overflow-wrap: break-word;
             word-break: normal;
         }


         /* footer */

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

         .blog-footer {
             display: flex;
             justify-content: space-between;
             align-items: center;

             font-size: 14px;
         }

         .blog-footer .author {
             color: #999;
         }

         .blog-footer .read-more {
             font-weight: 500;
             color: #111;
             text-decoration: none;
         }

         .blog-footer .read-more:hover {
             color: #c89b63;
         }

         @media (max-width: 768px) {


             .blog-content h2 {
                 font-size: 21px !important;
             }

             .blog-main-title {
                 font-size: 24px !important;
             }

             .blog-details {
                 padding-top: 25px !important;
             }

         }


         /* screen-size */

         @media (min-width: 1200px) {
             .xl-mt-100 {
                 margin-top: 75px !important;
             }
         }

         @media (min-width: 1200px) and (max-width: 1299px) {
             .container {
                 max-width: 1020px !important;
             }
         }

         @media (min-width: 1400px) {
             .container {
                 max-width: 1200px !important;
             }
         }