* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: "Segoe UI", sans-serif;
           background: #eeeeee;
           transition: background 0.4s ease-in-out;
           line-height: 1.85;
           overflow-x: hidden;
           color: #000;
       }

       body.bg-cover {
           background: #ffffff;
           /* looks like you want white */
       }

       header {
           width: 100%;
           padding: 10px 106px;
           background: #000;
           display: flex;
           justify-content: space-between;
           align-items: center;
           position: fixed;
           top: 0;
           left: 0;
           z-index: 1;
           transition: z-index 0.3s ease;
       }


       header img {
           height: 45px;
       }

       nav ul {
           display: flex;
           list-style: none;
           gap: 30px;
           align-items: center;
       }

       nav a {
           text-decoration: none;
           color: #fff;
           font-size: 11px;
           letter-spacing: 1.8px;
       }

       .hero {
           width: 100%;
           height: 200px;
           background: #000;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .hero-text {
           color: #000;
           font-size: 11px;
           font-weight: 600;
           letter-spacing: .5px;
       }

       .content-wrapper {
           width: 85%;
           max-width: 1240px;
           background: #fff;
           margin: -100px auto 80px;
           padding: 130px 130px 90px;
           box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
           position: relative;
           overflow: hidden;
           z-index: 10;
       }

       .story-block {
           position: relative;
           margin-bottom: 160px;
       }

       .title-wrapper {
           position: relative;
           padding-left: 80px;
           margin-bottom: 40px;
           z-index: 5;
       }

       .title-wrapper a {
           text-decoration: none;
           color: inherit;
       }

       .title-wrapper a:hover h1 {
           color: #C62641;
       }


       .decorative-letter {
           position: absolute;
           top: -70px;
           left: 0;
           font-size: 260px;
           font-weight: 800;
           color: #efefef;
           opacity: 0.9;
           line-height: 0.7;
           pointer-events: none;
           user-select: none;
           z-index: 0;
       }

       .title-wrapper h1,
       .title-wrapper .meta {
           position: relative;
           z-index: 3;
       }


       .category {
           text-align: center;
           font-size: 12px;
           letter-spacing: 2px;
           color: #777;
           position: relative;
           z-index: 1;
       }

       .category-line {
           width: 50%;
           margin: 10px auto 60px;
           height: 1px;
           background: #e5e5e5;
           z-index: 1;
           position: relative;
       }

       h1 {
           color: #333333;
           font-size: 48px;
           font-weight: 700;
           margin-top: 50px;
           margin-bottom: 15px;
           text-align: left;
           position: relative;
           z-index: 2;
       }

       .meta {
           display: flex;
           align-items: center;
           gap: 6px;
           font-size: 13px;
           color: #888888;
           margin-top: 10px;
           margin-bottom: 40px;
           position: relative;
           z-index: 5;
       }

       .meta p {
           margin: 0;
           color: #888888;
           font-weight: 400;
       }

       .meta span {
           color: #888888;
           font-weight: 400;
       }

       .meta a {
           text-decoration: none;
           color: #888888;
           font-weight: 400;
           transition: 0.3s ease;
       }

       .meta a:hover {
           color: #888888;
           text-decoration: underline;
       }


       .image-box {
           width: 45%;
           margin-top: 30px;
           padding-left: 80px;
           z-index: 1;
       }

       .entry-content img {
           max-width: 100%;
           height: auto;
           display: block;
           margin: 20px auto;
       }


       .story {
           padding-left: 80px;
           margin-top: 10px;
           font-size: 16px;
           color: #444;
       }


       .video-box {
           width: 85%;
           margin: 30px auto 40px;
           /* TOP | LEFT-RIGHT | BOTTOM */
           text-align: center;
       }


       .video-box video {
           width: 100%;
           max-height: 500px;
       }

       .copyright-block {
           padding-left: 70px;
           padding-right: 30px;
           margin-top: 20px;
       }

       .copyright-block b {
           font-weight: 600;
       }

       .share-buttons {
           width: 85%;
           max-width: 1240px;
           margin: 30px auto;
           display: flex;
           justify-content: space-between;
           gap: 10px;
       }

       .share-buttons a {
           flex: 1;
           height: 42px;
           display: flex;
           justify-content: center;
           align-items: center;
           color: white;
           text-decoration: none;
           font-size: 16px;
           border-radius: 3px;
       }


       .fb {
           background: #3b5998;
       }

       .x {
           background: #222;
       }

       .wa {
           background: #25D366;
       }

       /* AUTHOR BOX SECTION */
       .author-box {
           width: 85%;
           max-width: 1240px;
           margin: 140px auto;
           text-align: center;
       }

       .author-heading {
           font-size: 14px;
           letter-spacing: 2px;
           color: #444;
           margin-bottom: 10px;
       }

       .author-line {
           width: 40px;
           height: 2px;
           background: #c5c5c5;
           margin: 0 auto 40px;
       }

       .author-content {
           display: flex;
           align-items: flex-start;
           gap: 30px;
           justify-content: center;
           text-align: left;
       }

       .author-img {
           width: 120px;
           height: 120px;
           border-radius: 50%;
           object-fit: cover;
       }

       .author-text h4 {
           font-size: 18px;
           margin-bottom: 10px;
           color: #111;
       }

       .hi-text {
           font-size: 15px;
           color: #444;
           margin-bottom: 20px;
       }

       .en-text {
           font-size: 15px;
           color: #666;
           font-style: italic;
           margin-bottom: 25px;
       }

       /* BUTTONS */
       .author-buttons {
           display: flex;
           gap: 10px;
           margin-top: 10px;
       }

       .view-posts {
           padding: 12px 28px;
           background: #C62641;
           color: white;
           text-decoration: none;
           font-size: 12px;
           letter-spacing: 1px;
       }

       .author-icon {
           padding: 12px 18px;
           border: 1px solid #ccc;
           color: #444;
           text-decoration: none;
           font-size: 14px;
       }

       /* COMMENT SECTION */
       .comment-section {
           width: 85%;
           max-width: 1240px;
           margin: 80px auto;
       }

       .comment-heading {
           text-align: center;
           font-size: 14px;
           letter-spacing: 2px;
           font-weight: 600;
           color: #444;
       }

       .comment-line {
           width: 40px;
           height: 2px;
           background: #c5c5c5;
           margin: 10px auto 40px;
       }

       .comment-form label {
           display: block;
           font-size: 14px;
           margin-bottom: 6px;
           color: #555;
       }

       .comment-textarea {
           width: 100%;
           border: 1px solid #ddd;
           padding: 12px;
           margin-bottom: 25px;
           font-size: 15px;
           outline: none;
       }

       .comment-row {
           display: flex;
           gap: 20px;
           margin-bottom: 20px;
       }

       .comment-row div {
           flex: 1;
       }

       .comment-row input {
           width: 100%;
           padding: 10px;
           border: 1px solid #ddd;
           outline: none;
       }

       .comment-save {
           margin-bottom: 20px;
       }

       .comment-save label {
           font-size: 13px;
           color: #666;
       }

       .comment-submit {
           background: #C62641;
           color: white;
           padding: 12px 25px;
           border: none;
           font-size: 12px;
           letter-spacing: 1px;
           cursor: pointer;
       }

       .latest-stories {
           background: #fff;
           width: 85%;
           max-width: 1200px;
           margin: 80px auto;
           padding: 80px 165px;
           box-shadow: 0 75px 150px rgba(0, 0, 0, .12);
           text-align: center;
       }

       .story-grid {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           gap: 110px;
           width: 90%;
           margin: 70px auto 0;
           /* 👈 30px from top */
       }


       .story-card img {
           width: 100%;
           display: block;
       }

       .story-title {
           margin-top: 14px;
           font-size: 18px;
           font-weight: 600;
           text-align: center;
           color: #000;
           text-decoration: none;
       }

       .story-meta {
           margin-top: 8px;
           font-size: 14px;
           color: #888;
           display: flex;
           justify-content: center;
           gap: 6px;
       }

       footer {
           text-align: center;
           padding: 40px 0;
           background: linear-gradient(#ffffff, #f4f4f4);
           color: gray;
           font-size: 14px;
       }

       /* ===========================
   PHONES ONLY (max-width: 600px)
   =========================== */
       @media (max-width: 600px) {

           /* HEADER */
           header {
               padding: 14px 18px;
           }

           header img {
               height: 34px;
           }

           nav ul li:not(:last-child) {
               display: none;
           }

           /* HERO */
           .hero {
               height: 180px;
           }

           .hero-text {
               font-size: 22px;
               color: #000;
           }

           /* CONTENT BOX */
           .content-wrapper {
               width: 92%;
               padding: 45px 30px;
               margin-top: -112px;
           }

           /* Decorative letter hidden */
           .decorative-letter {
               display: none;
           }

           .title-wrapper {
               padding-left: 10px;
           }

           h1 {
               font-size: 26px;
               margin-top: 20px;
           }

           .meta {
               margin-bottom: 10px;
               font-size: 12px;
               flex-wrap: wrap;
           }

           .story {
               padding-left: 10px;
               font-size: 15px;
           }

           /* VIDEO */
           .video-box {
               width: 100% !important;
               margin: 40px auto;
           }

           .video-box video {
               max-height: 260px;
           }

           .image-box {
               padding-left: 10px;
           }

           .copyright-block {
               width: 100% !important;
               padding-left: 0 !important;
               padding-right: 0 !important;
               margin-left: 0 !important;
               margin-right: 0 !important;
           }

           /* SMALL SHARE BUTTONS IN ONE ROW */
           .share-buttons {
               width: 100%;
               margin: 20px auto;
               display: flex;
               justify-content: space-between;
               gap: 8px;
           }

           .share-buttons a {
               flex: 1;
               height: 38px;
               font-size: 15px;
           }

           /* AUTHOR BOX */
           .author-box {
               width: 92%;
               margin-top: 70px;
           }

           .author-content {
               flex-direction: column;
               text-align: center;
           }

           .author-img {
               width: 95px;
               height: 95px;
           }

           .author-text {
               text-align: left;
           }

           .author-buttons {
               gap: 10px;
               align-items: center;
           }

           /* COMMENT SECTION */
           .comment-section {
               width: 92%;
           }

           .comment-row {
               flex-direction: column;
               gap: 12px;
           }

           .comment-submit {
               width: 100%;
           }

           /* READ MORE SECTION */
           .latest-stories {
               width: 92%;
               padding: 40px 45px;
               margin-top: 0 !important;
           }

           .story-grid {
               grid-template-columns: 1fr;
               gap: 45px;
               width: 100%;
           }
       }