* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      
      .section1-article-title a:-webkit-any-link {
    color:white;
    cursor: pointer;
    text-decoration: none;
}
.section2-article-title a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section3-sidebar-title  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section3-top-column-title  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section3-article-title  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section4-main-title  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section5-top-column-title  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section5-article-title-side  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section5-article-title a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section5-sidebar-title  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section6-sidebar-title  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section5-article-title-side  a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.section4-main-title  a:-webkit-any-link {
    color:white;
    cursor: pointer;
    text-decoration: none;
}
.post-boxleft p a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.post-boxright p a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}
.related-title a:-webkit-any-link {
    color:black;
    cursor: pointer;
    text-decoration: none;
}

      input{
        border-color: light-dark(rgb(255, 255, 255));
      }
      .category1-search input[type="text"]{
        border-color: rgb(234, 233, 233);
        border: 0.1px solid rgb(202, 201, 201);
      }

      body .dark-mode .header-right-social .header-social-icon{
          filter: brightness(0) invert(1);
         
      }

      body {

          background-color: white;
      }

      .roboto {
         font-family:Arial, Helvetica, sans-serif;

      }

      .icon-btn {
          background: none;
          border: none;
          padding: 0;
          cursor: pointer;
         
      }

      .icon-img {
          width: 20px;
          height: 20px;
          display: block;
          mix-blend-mode: difference;
         
          
      }
      .menu{
        width: 30px;
        height: 40px;
        object-fit: contain;
       
       
      }


      .header-container {
          width: 1240px;
          margin: 0 auto;
          background-color: white;

      }

      /* First row with icons */
      .header-top-row {
          padding: 12px 0px;
          display: flex;
          justify-content: space-between;
          align-items: center;


      }

      .header-left-icons {
          display: flex;
          gap: 15px;
          align-items: center;
      }

      .menuside-s-toggle-btn {
          background-color: transparent;
          border: none;
      }

      /* sidebar */
      .menuside-s-toggle-btn {

          top: 0px;

          background-color: transparent;
          border: none;

          cursor: pointer;

          color: #333;


      }



      .menuside-sidebar {
          position: fixed;
          top: 0;
          left: -450px;
          width: 389px;
          height: 100vh;
          background-color: #ffffff;
          border-right: 2px solid #000;
          padding: 10px 40px;
          transition: left 0.3s ease;
          z-index: 1000;
          overflow-y: auto;

        font-family:Arial, Helvetica, sans-serif;
      }

      .menuside-sidebar.active {
          left: 0;
      }

      .menuside-sidebar-header {
          text-align: left;

          padding-bottom: 30px;
          position: relative;
      }

      .menuside-sidebar-title {
          font-size: 32px;
          font-weight: bold;
          font-family:Arial, Helvetica, sans-serif;
          letter-spacing: 2px;
          margin-bottom: 10px;
      }

      .menuside-sidebar-title img {
          width: 250px;
          height: 100%;
      }


      .menuside-close-btn {
          position: absolute;
          top: 10px;
          right: -40px;
          background-color: #000;
          color: #fff;
          border: none;
          width: 40px;
          height: 35px;
          border-radius: 0;
          font-size: 20px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color 0.3s ease;
          font-weight: normal;
      }

      .menuside-close-btn:hover {
          background-color: #333;
      }

      .menuside-sidebar-section {
          margin-bottom: 30px;
      }

      .menuside-section-title {
          font-size: 20px;
          font-weight: 600;
          text-transform: uppercase;

          margin-bottom: 15px;
         font-family:Arial, Helvetica, sans-serif;
          padding-bottom: 5px;
      }

      .menuside-about-text {
          font-size: 14px;
          line-height: 1.4;
         font-family:Arial, Helvetica, sans-serif;
          margin-bottom: 15px;
      }

      .menuside-news-item {
          display: flex;
          flex-direction: row;
          gap: 20px;
          margin-bottom: 20px;
          padding-bottom: 15px;
          border-bottom: 1px solid #d4d4d4;
      }



      .menuside-news-meta {
          font-size: 15px;
          color: black;
         font-family:Arial, Helvetica, sans-serif;
          margin-bottom: 8px;
      }

      .menuside-news-title {
          font-size: 16px;
          font-weight: bold;
          line-height: 1.4;
          margin-bottom: 5px;
      }

      .menuside-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 999;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s ease, visibility 0.3s ease;
      }

      .menuside-overlay.active {
          opacity: 1;
          visibility: visible;
      }

      /*  */

      .header-menu-icon,
      .header-settings-icon,
      .header-moon-icon {
          width: 16px;
          height: 16px;

          cursor: pointer;
          transition: background-color 0.3s;
      }

      .header-menu-icon {
          background-image: url('data:image/webp+xml,<webp xmlns="http://www.w3.org/2000/webp" viewBox="0 0 24 24" fill="%23666"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></webp>');
          background-size: contain;
      }

      .header-settings-icon {
          background-image: url('../images/settings.webp');
          background-size: contain;
      }

      .header-moon-icon {
          background-image: url('../images/moon.webp');
          background-size: contain;
      }

      .header-right-social {
          display: flex;
          gap: 20px;
          align-items: center;
      }

      .header-social-icon {
          width: 15px;
          height: 15px;
          color: #484646;
          cursor: pointer;
          transition: background-color 0.3s;
      }
      .icon-img1 {
    width: 20px;
    height: 20px;
    display: block;
    
}

      .header-social-facebook {
          background-image: url('../images/facebook.webp');
          background-size: contain;
      }
        .header-social-youtube {
          background-image: url('../images/youtube.png');
          background-size: contain;
      }
           .header-social-instagram {
          background-image: url('../images/instagram.png');
          background-size: contain;
      }
               .header-social-twitter {
          background-image: url('../images/twitter.webp');
          background-size: contain;
      }

      /* .header-social-world {
          background-image: url('../images/earth-globe.webp');
          background-size: contain;
      }

    

      .header-social-whatsapp {
          background-image: url('../images/whatsapp.webp');

          background-size: contain;
      } */

      .header-left-icons>*,
      .header-right-social>* {
          transition: opacity 0.3s;
      }


      /* Second row with divider and date */
      .header-divider-row {
          position: relative;
          padding: 0px 0;
          background-color: white;
      }

      .header-divider-line {
          height: 0.1px;
          background-color: #ddd;
          width: 100%;

      }

      .header-date-circle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 50px;
          height: 50px;
          background-color: white;
         font-family:Arial, Helvetica, sans-serif;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          font-weight: bold;
          color: black;
      }

      .header-date-circle span {
          position: absolute;
          top: 50%;
          left: -45%;
          transform: translate(-50%, -50%) rotate(-90deg);
          width: 50px;
          height: 50px;
          background-color: white;
         font-family:Arial, Helvetica, sans-serif;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 500;
          color: #868585;
      }

      /* Third row with quotes and title */
      .header-main-content {
          padding-top: 30px;
          background-color: white;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
         font-family:Arial, Helvetica, sans-serif;
      }

      .header-quote-left {
          padding: 10px 0px 30px 0px;
          color: #666;
          font-size: 14px;
          width: 334px;
          line-height: 1.5;
          word-wrap: break-word;
      }

      .header-quote-right {
          padding: 10px 0px 30px 0px;
          color: #666;
          font-size: 14px;
          width: 334px;
          line-height: 1.5;
          word-wrap: break-word;
          text-align: right;
      }

      .header-quote-author {
          margin-top: 8px;
          font-size: 14px;
          color: #686868;
          font-weight: 700;
          padding-top: 10px;
      }

      .header-center-content {
          text-align: center;
          flex: 1;
          margin: 0 40px;
          padding-bottom: 35px;
      }

      .header-title {
        font-family:Arial, Helvetica, sans-serif;
          font-size: 2rem;
          font-weight: bold;
          color: #000;
          text-decoration: none;
          display: block;
          margin-bottom: 15px;
          line-height: 1;
      }

      .header-title img {
          width: 480px;
          height: 85px;
          object-fit: cover;
      }


      .header-subtitle {
          font-size: 12px;
          color: #1b1a1a;
          text-transform: uppercase;
          font-weight: normal;
          font-weight: 500;
      }

      /* Navigation */
      .header-nav {
          background-color: white;
          padding: 0;
         font-family:Arial, Helvetica, sans-serif;
          border-top: 1px solid rgb(194, 193, 193);
          border-bottom: 1px solid rgb(194, 193, 193);
      }

      .header-nav-list {
          list-style: none;
          display: flex;
          margin: 0;
          padding: 0;
      }

      .header-nav-item {
          position: relative;
      }

      .header-nav-link {
          display: flex;
          padding: 14px 18px;
          color: rgb(49, 49, 49);
          text-decoration: none;
          font-size: 12px;
          text-transform: uppercase;
          align-items: center;
          font-weight: 500;
          transition: background-color 0.3s;
          cursor: pointer;
          border-bottom: 3pxpx solid black;

      }

      .header-nav-link:hover,
      .header-nav-link.header-nav-active {
          background-color: black;
          color: white;

      }

      .header-nav-link.header-nav-has-dropdown::after {
          content: '▼';
          font-size: 7px;
          margin-left: 8px;


      }




      /* section1 */
      .section1-container {
          width: 1240px;
          margin: 0 auto;
          display: flex;
          gap: 30px;
          padding-top: 30px;
          

      }

      .section1-left-panel {
          background-color: black;
          color: white;
          color: #dbdbdb;
          width: 40%;
          padding: 5px 15px 20px 15px;
          display: flex;
          flex-direction: column;
      }

      .section1-editor-info {
          margin-bottom: 20px;
          border-bottom: 1px solid rgb(32, 32, 32);



      }

      .section1-editor-label {
          color: rgb(169, 169, 169);
          font-size: 11px;
         font-family:Arial, Helvetica, sans-serif;
          text-transform: uppercase;
          margin-bottom: 2px;
          padding-top: 10px;
      }

      .section1-editor-profile {
          display: flex;
          align-items: center;
          margin-bottom: 20px;


      }

      .section1-editor-image {
          width: 250px;
          height: 120px;
          background-color: #333;
          margin-right: 20px;
          border-radius: 4px;
      }

      .section1-editor-name {
          font-size: 17px;
          font-weight: bold;
          color: #fff;
          text-transform: uppercase;

          padding-top: 10px;
          padding-bottom: 15px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section1-editor-name:hover {
          text-decoration: underline;
          color: white;
      }

      .section1-editor-description {
          color: #ccc;
          line-height: 18px;
          margin-bottom: 20px;
          font-size: 12px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section1-social-icons {
          display: flex;
          gap: 0px;
          background-color: transparent;
          padding-top: 5px;
      }

      .section1-social-icon {
          width: 23px;
          height: 30px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: left;
          color: #fff;
          text-decoration: none;
          font-size: 14px;
          background-color: black;
      }


      .section1-articles {
          flex: 1;
          display: flex;
          flex-direction: row;
          gap: 30px;
      }

      .section1-article {
          display: flex;
          align-items: flex-start;
          gap: 20px;
      }

      .section1-article-image {
          width: 42px;
          height: 75px;
          background-color: #333;
          flex-shrink: 0;
          border-radius: 4px;
      }

      .section1-article-image img {
          width: 100%;
          height: 75px;
          object-fit: cover;
      }

      .section1-article-content {
          flex: 1;
      }

      .section1-article-title {
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          line-height: 1.4;
          margin-bottom: 10px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section1-article-title:hover {
          text-decoration: underline;
          color: white;
      }

      .section1-article-date {
          color: #e3e3e3;
          font-size: 10px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section1-right-panel {
          width: 60%;
          position: relative;
          background-color: #000;
      }

    .section1-main-image {
    width: 100%;
    height: 370px;
    position: relative;        /* allows caption to sit on top */
    overflow: hidden;
}

.section1-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* same as background-size: cover */
    object-position: center;   /* same as background-position: center */
    display: block;
}

.section1-main-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    color: black;
    padding: 3px 10px 3px 0px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

      .section1-main-caption div {
          display: flex;
      }

      .section1-editor-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }


      /* section2 */
      .section2-container {
          max-width: 1240px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 0.7fr 0.7fr 2.2fr;

      }

      .section2-column {
          background: white;
          padding: 15px 10px 0px 0px;
          border-radius: 8px;

      }

      .section2-category-header {
          font-size: 11px;
          font-weight: bold;
          color: black;
          text-transform: uppercase;

          padding-top: 10px;
          padding-bottom: 10px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section2-category-header:hover {
          text-decoration: underline;
          color: black;
      }

      .section2-article {
          margin-bottom: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #cccccc;
      }

      .section2-article:last-child {
          border-bottom: none;
          margin-bottom: 0;
      }

      .section2-article-title {
          font-size: 22px;
          font-weight: 600;
          color: black;
          margin-bottom: 10px;
          line-height: 1.3;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section2-article-title:hover {
          text-decoration: underline;
          color: black;
      }

      .section2-article-excerpt {
          color: #666;
          font-size: 14px;
          line-height: 1.5;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section2-main-article {
          background: white;
          padding: 30px;
          border-radius: 8px;

      }

      .section2-main-title {
          font-size: 38px;
          font-weight: bold;
          color: black;
          margin-bottom: 20px;
          line-height: 1.2;
          text-decoration: none;
      }

      .section2-main-title  a:-webkit-any-link:hover {
          text-decoration: underline;
          color: black;
      }
 .section2-main-title  a:-webkit-any-link {
          text-decoration: none;
          color: black;
}
      .section2-article-meta {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          font-size: 12px;
          color: #666;
      }



      .section2-category-tag {

          color: #ff6b35;
          padding: 4px 0px;
          border-radius: 4px;
          font-weight: 600;
          text-transform: uppercase;
          font-size: 11px;

         font-family:Arial, Helvetica, sans-serif;
      }

      .section2-category-tag:hover {
          text-decoration: underline;
          color: #ff6b35;
      }

      .section2-date {

          font-size: 11px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section2-views {
         font-family:Arial, Helvetica, sans-serif;
          margin-left: auto;
          padding-left: 10px;
          border-left: 1px solid rgb(159, 158, 158);
      }

      .section2-main-content {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 30px;
          margin-bottom: 30px;
      }

      .section2-content-column {
          font-size: 13px;
          color: #7a7a7a;
          line-height: 1.5;
      }

      .section2-content-column em {
          color: #000;
          font-size: 14px;
          line-height: 1.4;
      }

      .section2-content-column p {
          margin-bottom: 15px;

         font-family:Arial, Helvetica, sans-serif;
      }

      .section2-dropcap {
          float: left;
          font-size: 30px;

          padding-right: 8px;
          font-weight: bold;
          color: black;
      }

      .section2-author-section {
          display: flex;
          align-items: center;
          margin-top: 30px;
          padding-top: 15px;
          padding-bottom: 15px;
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
      }

      .section2-author-avatar:after {
          position: absolute;
          content: "";
          height: 0.1px;
          width: 20px;
          right: 265px;
          margin-top: 25px;
          background: #adacac;
          z-index: 2;
          transform: translateY(-50%);
      }

      .section2-author-avatar {
          width: 70px;
          height: 50px;

          border-right: 1px solid #e2dfdf;
          margin-right: 15px;
          background-size: 30px;
          padding-right: 20px;
          background-repeat: no-repeat;
          background-position: center;
      }

      .section2-author-avatar img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
      }

      .section2-author-info {
          flex: 1;
      }

      .section2-author-label {
          font-size: 14px;
          color: #6b6a6a;
          margin-bottom: 2px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section2-author-name {
          font-size: 12px;
          font-weight: 400;
          color: #000000;
         font-family:Arial, Helvetica, sans-serif;
          padding-top: 10px;

      }

      .section2-author-name:hover {
          text-decoration: underline;
          color: black;
      }

      .section2-sidebar {
          position: fixed;
          right: 20px;
          bottom: 20px;
          background: rgba(0, 0, 0, 0.8);
          color: white;
          padding: 15px;
          border-radius: 8px;
          font-size: 18px;
          font-weight: bold;
      }


      /* section3 */

      .section3-container {
          max-width: 1240px;
          margin: 0 auto;
          background: white;
          border-top: 1px solid #ddd;
          padding: 0px 0px;
      }

      .section3-sidebar {
          float: left;
          width: 250px;
          padding-top: 20px;
          padding-right: 20px;



      }

      .section3-sidebar-item {
          margin-bottom: 10px;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
      }

      .section3-sidebar-title:hover {
          text-decoration: underline;
          color: black;
      }

      .section3-sidebar-item:last-child {
          border-bottom: none;
          margin-bottom: 0;
      }

      .section3-top-column-title:hover {
          text-decoration: underline;
          color: black;
      }

      .section3-sidebar-title {
          font-size: 20px;
          font-weight: 700;
          color: black;
          margin-bottom: 8px;
          line-height: 1.3;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section3-article-title:hover {
          text-decoration: underline;
          color: black;
      }

      .section3-sidebar-meta {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
      }

      .section3-sidebar-image {
          width: 180px;
          height: 70px;
          background: #ddd;
          margin-right: 10px;
          border: 1px solid #ccc;
      }

      .section3-sidebar-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .section3-sidebar-text {
          font-size: 13px;
          color: #666;
          line-height: 1.4;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section3-main-content {
          margin-left: 235px;
          border-left: 1px solid #ccc;
          padding: 20px 0px 0px;
      }

      /* Top 4 Columns Section */
      .section3-top-columns {
          display: flex;
          gap: 15px;
          padding-bottom: 20px;
          border-bottom: 1px solid rgb(214, 212, 212);

      }

      .section3-top-column {
          flex: 1;
          display: flex;
          flex-direction: row;


      }

      .section3-top-column-image {
          width: 70%;
          height: 80px;
          background: #ddd;
          margin-bottom: 8px;
          border: 1px solid #ccc;
      }

      .section3-top-column-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .section3-top-column-title {
          font-size: 18px;
          font-weight: 600;
          color: black;
          margin-bottom: 10px;
          padding-left: 15px;
         font-family:Arial, Helvetica, sans-serif;

      }

      .section3-top-column-text {
          font-size: 13px;
          color: #666;
          padding-left: 15px;

         font-family:Arial, Helvetica, sans-serif;
      }

      /* Category Labels */
      .section3-category-label {

          color: #ff6b35;
          padding: 5px 0px;
          font-size: 16px;
          margin-bottom: 20px;
          display: inline-block;
        font-family:Arial, Helvetica, sans-serif;


      }

      .section3-category-label span {

          color: #686766;
          padding: 0px 0px;
          font-size: 16px;
          display: inline-block;
        font-family:Arial, Helvetica, sans-serif;

      }



      /* Featured Articles */
      .section3-featured-articles {
          display: flex;
          gap: 0px;

      }

      .section3-large-article {
          flex: 1;

          padding: 15px;
      }

      .section3-small-article {
          flex: 1;
          padding: 15px;
      }

      .section3-article-image {
          width: 100%;
          height: 300px;
          background: #ddd;
          margin-bottom: 15px;
          border: 1px solid #ccc;
      }

      .section3-article-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .section3-small-article .section3-article-image {
          height: 250px;
          object-fit: cover;
      }

      .section3-article-title {
          font-size: 24px;
          font-weight: 600;
          color: black;
          margin-bottom: 10px;
          line-height: 1.3;
         font-family:Arial, Helvetica, sans-serif;

      }

      .section3-small-article .section3-article-title {
          font-size: 24px;
          font-weight: 600;
          color: black;
          margin-bottom: 10px;
          line-height: 1.3;

      }

      .section3-article-meta {
          font-size: 11px;
          color: #666;
          margin-bottom: 10px;
         font-family:Arial, Helvetica, sans-serif;
          margin-top: 20px;
          margin-bottom: 20px;

      }

      .section3-article-text {
          font-size: 13px;
          color: #7a7a7a;
          line-height: 1.5;
         font-family:Arial, Helvetica, sans-serif;
          columns: 2;
          column-gap: 20px;
      }

      .section3-article-text-p {
          font-size: 14px;
          color: black;
          font-style: italic;
         font-family:Arial, Helvetica, sans-serif;
          padding: 10px 0px 20px;
          line-height: 20px;


      }

      .section3-small-article .section3-article-text {
          font-size: 13px;
          color: #7a7a7a;
          line-height: 1.5;
         font-family:Arial, Helvetica, sans-serif;
          columns: 2;
          column-gap: 20px;

      }

      /* Drop Cap */
      .section3-dropcap {
          float: left;
          font-size: 20px;

          padding-right: 8px;

          font-weight: bold;
          color: #333;
      }

      /* Bottom Articles */
      /* Top border with gap from right */
      .section3-bottom-article::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 15px;
          /* Creates gap from right edge */
          height: 0.1px;
          background-color: #d0cece;
      }

      /* Right border with gap from top */
      .section3-bottom-article::after {
          content: '';
          position: absolute;
          top: 0px;
          /* Creates gap from top */
          right: 0;
          bottom: 0;
          width: 0.1px;
          background-color: rgb(209, 207, 207);
      }

      /*  */
      .no-right-line.section3-bottom-article::after {
          content: '';
          position: absolute;
          top: 0px;
          /* Creates gap from top */
          right: 0;
          bottom: 0;
          width: 0px;
          background-color: rgb(209, 207, 207);
      }

      /*  */


      .section3-bottom-article {
          flex: 1;
          padding: 20px 0px 0px;

          position: relative;
      }

      .section3-bottom-articles {
          display: flex;
          gap: 20px;
          margin-right: 20px;
          padding-top: 20px;
      }



      .section3-bottom-article .section3-article-image {
          height: 120px;

      }

      .section3-bottom-article .section3-article-title {
          font-size: 22px;
         font-family:Arial, Helvetica, sans-serif;
          font-weight: 700;
      }

      .section3-bottom-article .section3-article-text {
          columns: 1;
          font-size: 12px;
      }


      .section3-author {
          font-size: 11px;
          color: #ff4900;
          font-weight: 500;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section3-article-meta strong {
          font-size: 12px;
          color: #ff4900;
          font-weight: 500;
         font-family:Arial, Helvetica, sans-serif;

      }

      .section3-article-meta strong:hover {
          text-decoration: underline;
          color: #ff4900;
      }

      .section3-author:hover {
          text-decoration: underline;
          color: #ff4900;
      }


      .section3-clearfix::after {
          content: "";
          display: table;
          clear: both;
         font-family:Arial, Helvetica, sans-serif;
      }

      /* section4 */
      .section4-main-container {
          display: flex;
          height: 250px;
          max-width: 1240px;
          margin: 0 auto;
      }

      .section4-main-title:hover {
          text-decoration: underline;
          color: white;
      }

      .section4-column {
          flex: 1;
          height: 100%;
      }

      .section4-image-column {
          background-size: cover;
          background-position: center;
          position: relative;
      }

      .section4-content-column {
          background-color: black;
          padding: 50px 30px;
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

   .section4-image-column {
    position: relative;
    width: 100%;
    height: 100%;       /* or your fixed height */
    overflow: hidden;
}

.section4-image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* acts like background-size: cover */
    object-position: center;/* acts like background-position: center */
    display: block;
}
      .section4-sport-label {
          color: #ff6600;
          font-size: 11px;
          font-weight: bold;
          text-transform: uppercase;
          padding-bottom: 10px;
         font-family:Arial, Helvetica, sans-serif;

      }

      .section4-sport-label:hover {
          text-decoration: underline;
          color: #ff6600;
      }

      .section4-main-title {
          font-size: 22px;
          font-weight: bold;
          line-height: 1.2;
          padding-bottom: 30px;
          color: white;
      }

      .section4-description-text {
          font-size: 13px;
          line-height: 1.4;
          font-weight: 300;
          opacity: 0.9;
          color: #ffffff;
         font-family:Arial, Helvetica, sans-serif;
      }


      /* section5 */
      .section5-container {
          max-width: 1240px;
          margin: 0 auto;
          background: white;
          border-top: 1px solid #ddd;
          padding: 0px 0px;
          margin-top: 0px;

      }

      .section5-header {

          color: red;
          padding: 0px 0px;
          font-size: 14px;
          font-weight: bold;

          max-width: 1240px;
          margin: 0 auto;
          margin-top: 40px;
      }

      .section5-sidebar {
          float: right;
          width: 220px;
          padding-top: 10px;
          padding-left: 0px;



      }

      .section5-article-text-side {
          font-size: 13px;
          color: #7a7a7a;
          line-height: 1.5;
         font-family:Arial, Helvetica, sans-serif;

      }

      .section5-large-article-side {
          flex: 1;
          border-bottom: 1px solid rgb(227, 225, 225);
          padding: 15px 0px 20px 0px;
          margin-bottom: 15px;

      }

      .section5-article-title-side {
          font-size: 24px;
          font-weight: 600;
          color: black;
          margin-bottom: 10px;

         font-family:Arial, Helvetica, sans-serif;

      }

      .section5-sidebar-item {
          margin-bottom: 10px;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
      }



      .section5-sidebar-item:last-child {
          border-bottom: none;
          margin-bottom: 0;
      }

      .section5-sidebar-title {
          font-size: 22px;
          font-weight: 700;
          color: black;
          margin-bottom: 8px;
          line-height: 1.1;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section5-sidebar-title:hover {
          text-decoration: underline;
          color: black;
      }

      .section5-sidebar-meta {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
      }

      .section5-sidebar-image {
          width: 200px;
          height: 70px;
          background: #ddd;
          margin-right: 10px;
          border: 1px solid #ccc;
      }

      .section5-sidebar-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .section5-sidebar-text {
          font-size: 13px;
          color: #666;
          line-height: 1.4;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section5-main-content {
          margin-right: 235px;
          border-right: 1px solid #ccc;
          padding: 20px 0px 0px 0px;

      }


      /* Top 4 Columns Section */
      .section5-top-columns {
          display: flex;
          flex-direction: row;
          gap: 15px;
          padding-bottom: 20px;
          border-bottom: 1px solid rgb(214, 212, 212);
          margin-right: 10px;

      }

      .section5-top-column {
          flex: 1;
          display: flex;
          flex-direction: column;


      }

      .section5-top-meta {
          display: flex;
          align-items: start;
          margin-bottom: 0px;
      }

      .section5-top-column-image {
          width: 150px;
          height: 70px;
          background: #ddd;
          margin-bottom: 8px;
          border: 1px solid #ccc;
      }

      .section5-top-column-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .section5-top-column-title {
          font-size: 20px;
          font-weight: 600;
          color: black;
          margin-bottom: 10px;
          padding-left: 0px;
         font-family:Arial, Helvetica, sans-serif;

      }

      .section5-top-column-text {
          font-size: 14px;
          color: #666;
          padding-left: 15px;

         font-family:Arial, Helvetica, sans-serif;
      }

      /* Category Labels */


      .section5-category-label {

          color: #ff6b35;
          padding: 5px 0px;
          font-size: 16px;
          margin-bottom: 10px;
          display: inline-block;
          font-weight: 400;
        font-family:Arial, Helvetica, sans-serif;
      }

      .section5-category-label span {

          color: #686766;
          padding: 0px 0px;
          font-size: 16px;
          display: inline-block;
        font-family:Arial, Helvetica, sans-serif;
          border: none;
      }

      /* Featured Articles */
      .section5-featured-articles {
          display: flex;
          gap: 0px;
          padding-top: 10px;
      }

      .section5-large-article {
          flex: 2;

          padding: 15px 0px;
      }

      .section5-small-article {
          flex: 1.2;
          padding: 15px;
      }

      .section5-article-image {
          width: 100%;
          height: 300px;
          background: #ddd;
          margin-bottom: 15px;
          border: 1px solid #ccc;
      }

      .section5-article-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .section5-small-article .section5-article-image {
          height: 100%;
          object-fit: cover;
      }

      .section5-article-title {
          font-size: 40px;
          font-weight: 700;
          color: black;
          margin-bottom: 10px;
          line-height: 1.1;
         font-family:Arial, Helvetica, sans-serif;

      }

      .section5-article-title:hover {
          text-decoration: underline;
          color: black;
      }

      .section5-small-article .section5-article-title {
          font-size: 22px;
          font-weight: 600;
          color: black;
          margin-bottom: 10px;
          line-height: 1.3;

      }

      .section5-top-column-title:hover {
          text-decoration: underline;
          color: black;
      }

      .section5-article-meta {
          font-size: 11px;
          color: #666;
          margin-bottom: 10px;
         font-family:Arial, Helvetica, sans-serif;
          margin-top: 10px;
          margin-bottom: 20px;

      }

      .section5-article-title-side:hover {
          text-decoration: underline;
          color: black;
      }

      .section5-article-text {
          font-size: 14px;
          color: #7a7a7a;
          line-height: 1.3;
         font-family:Arial, Helvetica, sans-serif;
          columns: 2;
          column-gap: 20px;
          padding-bottom: 10px;
      }

      .section5-article-text-p {
          font-size: 15.5px;
          color: black;
          font-style: italic;
         font-family:Arial, Helvetica, sans-serif;
          padding: 10px 0px 10px;
          font-weight: 400;
          line-height: 20px;


      }

      .section5-small-article .section5-article-text {
          font-size: 14px;
          color: #7a7a7a;
          line-height: 1.3;
         font-family:Arial, Helvetica, sans-serif;
          columns: 2;
          column-gap: 20px;

      }

      /* Drop Cap */
      .section5-dropcap {
          float: left;
          font-size: 20px;

          padding-right: 8px;

          font-weight: bold;
          color: #333;
      }

      /*  */
      .section5-bottom-article::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 15px;
          /* Creates gap from right edge */
          height: 0.1px;
          background-color: #d0cece;
      }

      /* Right border with gap from top */
      .section5-bottom-article::after {
          content: '';
          position: absolute;
          top: 0px;
          /* Creates gap from top */
          right: 0;
          bottom: 0;
          width: 0.1px;
          background-color: rgb(209, 207, 207);
      }


      .section5-bottom-article {
          flex: 1;
          padding: 20px 0px 0px;

          position: relative;
      }

      /* Bottom Articles */
      .section5-bottom-articles {
          display: flex;
          gap: 20px;
          margin-right: 0px;
          padding-top: 0px;
      }


      .section5-bottom-article:last-of-type {

          border-right: none;
      }

      .section5-bottom-article .section5-article-image {
          height: 120px;

      }

      .section5-bottom-article .section5-article-title {
          font-size: 22px;
         font-family:Arial, Helvetica, sans-serif;
          font-weight: 700;
      }

      .section5-bottom-article .section5-article-text {
          columns: 1;
          font-size: 12px;
      }


      .section5-author {
          font-size: 11px;
          color: #ff4900;
          line-height: 20px;
          font-weight: 500;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section5-article-meta strong {
          font-size: 11px;
          color: #ff4900;
          font-weight: 500;
         font-family:Arial, Helvetica, sans-serif;

      }

      .section5-author:hover {
          text-decoration: underline;
          color: #ff4900;
      }

      .section5-article-meta strong:hover {
          text-decoration: underline;
          color: #ff4900;
      }

      .no-right-line.section5-bottom-article::after {
          content: '';
          position: absolute;
          top: 0px;
          /* Creates gap from top */
          right: 0;
          bottom: 0;
          width: 0px;
          background-color: rgb(209, 207, 207);
      }

      .section5-clearfix::after {
          content: "";
          display: table;
          clear: both;
         font-family:Arial, Helvetica, sans-serif;
      }

      /*  */
      .section6-container {
          max-width: 1240px;
          margin: 0 auto;
          background-color: white;
          display: flex;
          border-top: 1px solid rgb(205, 205, 205);

      }

      .section6-sidebar-left {
          width: 250px;
          background-color: #ffffff;
          border-right: 1px solid #e0e0e0;
          padding: 25px 0px;
      }

      .section6-main-content {
          flex: 1;
          padding: 30px 20px;
          background-color: #ffffff;
      }

      .section6-sidebar-right {
          width: 230.5px;
          background-color: #ffffff;
          border-left: 1px solid #e0e0e0;
          padding-left: 10px;
          padding-top: 20px;
      }

      .section6-hero-article {
          margin-bottom: 30px;
          border-bottom: 1px solid #e0e0e0;
          padding-bottom: 20px;
      }

      .section6-hero-image {
          width: 100%;
          height: 400px;
          background: linear-gradient(45deg, #8B4513, #D2691E);
          border-radius: 8px;
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 14px;
      }

      .section6-hero-image img {
          width: 100%;
          height: 100%;
      }

      .section6-hero-title {
          font-size: 28px;
          font-weight: bold;
          color: #333;
          margin-bottom: 10px;
          line-height: 1.3;
      }

      .section6-hero-meta {
          font-size: 12px;
          color: #666;
          margin-bottom: 15px;
      }

      .section6-hero-content {
          font-size: 14px;
          color: #555;
          line-height: 1.6;
      }

      .section6-articles-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          margin-bottom: 30px;
      }

      .section6-article-card {

          overflow: hidden;

      }

      .section6-articles-grid-author {
          width: 100%;
          height: 250px;
          object-fit: cover;
          padding-bottom: 15px;
      }

      .section6-article-image {
          width: 100%;
          height: 120px;
          background: linear-gradient(45deg, #4169E1, #87CEEB);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 12px;
      }

      .section6-article-content {
          padding: 15px;
      }

      .section6-article-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
          line-height: 1.3;
      }

      .section6-article-meta {
          font-size: 11px;
          color: #666;
          margin-bottom: 10px;
      }

      .section6-article-excerpt {
          font-size: 13px;
          color: #555;
          line-height: 1.5;
      }

      /*  */
      .section6-sidebar {
          float: left;
          width: 250px;
          padding-top: 0px;
          padding-right: 20px;



      }

      .section6-sidebar-item {
          margin-bottom: 10px;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
      }

      .section6-sidebar-item:last-child {
          border-bottom: none;
          margin-bottom: 0;
      }

      .section6-sidebar-title {
          font-size: 20px;
          font-weight: 700;
          color: black;
          margin-bottom: 8px;
          line-height: 1.3;
         font-family:Arial, Helvetica, sans-serif;
      }

      .section6-sidebar-title:hover {
          text-decoration: underline;
          color: black;
      }

      .section6-sidebar-meta {
          display: flex;
          align-items: flex-start;
          margin-bottom: 8px;
      }

      .section6-sidebar-image {
          width: 150px;
          height: 70px;
          background: #ddd;
          margin-right: 10px;
          border: 1px solid #ccc;
      }

      .section6-sidebar-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .section6-sidebar-text {
          font-size: 13px;
          color: #666;
          line-height: 1.4;
         font-family:Arial, Helvetica, sans-serif;
      }

      /*  */




      .section6-sidebar-item:last-child {
          border-bottom: none;
          margin-bottom: 0;
          padding-bottom: 0;
      }

      .section6-column {
          background: white;
          padding: 0px;
          border-radius: 8px;

      }

      .section6-column img {
          width: 100%;
          height: 180px;
          object-fit: cover;
      }

      .section6-article {
          margin-bottom: 10px;
          padding-bottom: 10px;

      }



      .section6-widget {
          background-color: #f8f8f8;
          border-radius: 8px;
          padding: 15px;
          margin-bottom: 20px;
      }

      .section6-widget-title {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          margin-bottom: 10px;
      }

      .section6-widget-image {
          width: 100%;
          height: 120px;
          background: linear-gradient(45deg, #DC143C, #FFB6C1);
          border-radius: 4px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 12px;
      }

      .section6-category-label {
          display: inline-block;
          background-color: #d32f2f;
          color: white;
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 3px;
          margin-right: 5px;
      }

      .section6-read-more {
          color: #d32f2f;
          font-size: 12px;
          text-decoration: none;
      }

      .section6-read-more:hover {
          text-decoration: underline;
      }

      /* section7 */
      .section7-container {
          background-color: #1a1a1a;
          min-height: 55vh;
          display: flex;
          align-items: center;
          justify-content: center;
          background-image:
              url('../images/bg2-1.webp'),
              radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          position: relative;
          overflow: hidden;

      }

      .section7-background-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
          z-index: 1;
      }

      .section7-content-wrapper {
          position: relative;
          z-index: 2;
          text-align: center;
          max-width: 1000px;
          width: 100%;
          padding: 10px 0px;
      }

      .section7-title {
         font-family:Arial, Helvetica, sans-serif;
          font-size: 50px;
          font-weight: bold;
          color: #ffffff;

          margin-bottom: 1rem;
          text-transform: uppercase;
      }

      .section7-subtitle {
         font-family:Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #787878;
          margin-bottom: 2rem;
          font-weight: 400;
      }

      .section7-form-container {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0;
          max-width: 950px;
          margin: 0 auto;
          background-color: #151515;

          padding: 40px 100px;
          backdrop-filter: blur(10px);

      }

      .section7-email-input {
          flex: 1;
          padding: 10px 230px;
          font-size: 1rem;
          background-color: rgba(45, 45, 45, 0.95);
          color: #ffffff;
          outline: none;
          border: none;

      }

      .section7-email-input::placeholder {
          color: rgba(255, 255, 255, 0.6);
      }

      .section7-submit-button {
          padding: 10px 100px;
          background-color: rgba(30, 30, 30, 0.95);
          color: #ffffff;
          border: none;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;


      }

      .section7-submit-button:hover {
          background-color: rgba(100, 100, 100, 0.95);
          transform: translateY(-2px);
      }

      .section7-disclaimer {
          font-family: 'Arial', sans-serif;
          font-size: 0.9rem;
          color: #999999;
          margin-top: 2rem;
          font-weight: 300;
      }

      .section7-decorative-elements {
          position: absolute;
          top: 20%;
          right: 10%;
          width: 300px;
          height: 400px;
          background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
          border-radius: 20px;
          transform: rotate(15deg);
          z-index: 1;
      }

      .section7-decorative-elements::before {
          content: '';
          position: absolute;
          top: -50px;
          left: -50px;
          width: 200px;
          height: 200px;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
          border-radius: 50%;
      }

      .section7-decorative-elements::after {
          content: '';
          position: absolute;
          bottom: -30px;
          right: -30px;
          width: 150px;
          height: 150px;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
          border-radius: 50%;
      }


      /*  */
      .footer-container {
          max-width: 1300px;
          margin: 0 auto;
          padding: 30px 20px 40px;
          background-color: white;
          z-index: 100;
      }

      .footer-header {
          text-align: center;
          margin-top: -5px;
          z-index: 100;
          background-color: white;
          /*  */
          display: block;
          margin: -26px auto 1.5rem auto;
          font-size: 38px;
          font-weight: normal;
         font-family:Arial, Helvetica, sans-serif;
          background-color: white;
          width: fit-content;
          padding: 0.2rem 1.5rem 0 1.5rem;
          z-index: 1;
          position: relative;

      }

      .footer-logo {
          font-size: 32px;
          font-weight: bold;
          color: #000;
          text-decoration: none;
          font-family:Arial, Helvetica, sans-serif;

          padding: 0px 0px;

          background-color: white;
      }

      .footer-logo img {
          width: 200px;
          height: 30px;
          object-fit: cover;
      }

      .footer-content {
          display: grid;
          grid-template-columns: 1fr 2fr 1fr;
          gap: 40px;
      }

      .footer-column h3 {
          padding-top: 0px;
          font-size: 20px;
          font-weight: 700;
          color: #000;
          text-transform: uppercase;
         font-family:Arial, Helvetica, sans-serif;
          padding-bottom: 40px;
      }

      .footer-column p {
          font-size: 14px;
          color: #777;
          margin-bottom: 15px;
          font-weight: 400;
          text-align: left;
font-family:Arial, Helvetica, sans-serif;
      }

      .footer-center-content {
          text-align: center;
          padding-bottom: 70px;
      }

      .footer-main-title {
          font-size: 48px;
          font-weight: 700;
          text-align: center;
          margin: 0px 0 30px 0;
          color: #000;
         font-family:Arial, Helvetica, sans-serif;
      }

      .footer-center-content p {
          text-align: center;
          margin-bottom: 10px;
          padding-top: 0px;
      }

      .footer-navigation {
          text-align: center;
          margin-bottom: 15px;
      }

      .footer-nav-links {
          display: flex;
          justify-content: center;
          gap: 10px;
          flex-wrap: wrap;
         font-family:Arial, Helvetica, sans-serif;
      }

      .footer-nav-link {
          color: #3d3c3c;
          text-decoration: none;
          font-size: 12px;
          font-weight: bold;
          text-transform: uppercase;
          transition: color 0.3s ease;
          border-right: 1px solid rgb(205, 204, 204);
          padding-right: 10px;
      }

      .footer-nav-link:last-child {
          border-right: none;
      }

      .footer-nav-link:hover {
          color: white;
          background-color: black;
          padding: 0px 3px;

      }

      .footer-copyright {
          text-align: center;
          font-size: 12px;
          color: #999;
          border-top: 1px solid #d1cfcf;
          padding-top: 20px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .footer-activate-section {
          position: fixed;
          bottom: 20px;
          right: 20px;
          background-color: rgba(255, 255, 255, 0.9);
          padding: 15px;
          border-radius: 5px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .footer-activate-text {
          font-size: 12px;
          color: #ccc;
          margin-bottom: 5px;
      }

      .footer-settings-link {
          font-size: 12px;
          color: #ccc;
          text-decoration: none;
      }

      /*  */
      .section5-category-label {
          background: linear-gradient(to right, #000 0%, #000 60%, transparent 60%);
          background-position: 0 100%;
          background-size: 100% 1px;
          background-repeat: no-repeat;
      }

      .section3-category-label {
          background: linear-gradient(to right, #000 0%, #000 60%, transparent 60%);
          background-position: 0 100%;
          background-size: 100% 1px;
          background-repeat: no-repeat;
      }

      /* category */
      .cat-dropcap {
          float: left;
          font-size: 40px;
         font-family:Arial, Helvetica, sans-serif;
          padding-right: 25px;
          font-weight: bold;
          color: black;
      }

      .category1-header {
          border-bottom: 1px solid #ddd;
          padding-bottom: 30px;
          margin-bottom: 30px;
          display: flex;
          padding-top: 20px;
          max-width: 1240px;
          margin: 30px auto 0px;
      }

      .category1-header-row {
          width: 600px;
      }

      .category1-container {
          display: flex;
          padding-bottom: 30px;
          max-width: 1240px;
          margin: 0px auto;

      }

      .category1-main-content {
          flex: 3;
          margin-bottom: 30px;
          margin-top: 20px;
      }

      .category1-sidebar {

          flex: 1;
          margin-left: 50px;
          margin-top: 30px;
      }

      .cat-sticky {
          position: sticky;
          top: 0;
          z-index: 10;
      }



      .category1-header-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
          flex-wrap: wrap;
          word-wrap: break-word;
      }

      div .category1-header-row {
          display: flex;
          unicode-bidi: isolate;
      }

      .category1-header h2 {
          font-size: 60px;
          font-weight: bold;

          text-transform: uppercase;
          color: #000;
          letter-spacing: 1px;
          margin: 0;
          flex: 0 0 auto;
      }

      .category1-header p {
          font-size: 14px;
         font-family:Arial, Helvetica, sans-serif;
          color: #777;
          margin: 0;
          flex: 1;
          text-align: left;
          line-height: 1.4;
          word-wrap: break-word;
      }

      .category1-article {
          display: flex;

          margin-top: 10px;
          padding-bottom: 50px;
          border-bottom: 1px solid rgb(212, 212, 212);
      }

      .category1-article-img {
          width: 250px;
          height: 300px;

          margin-left: 20px;
      }

      .category1-article-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .category1-article-content {
          flex: 1;
      }

      .category1-article-title {
          font-size: 20px;
          font-weight: bold;
          margin: 0 0 10px;
          color: #000;
      }

      .category1-article-meta {
          font-size: 12px;
          color: #888;
          margin-bottom: 10px;
      }

      .category1-article-text {
          font-size: 14px;
          color: #444;
      }

      .category1-sidebar h3 {
          font-size: 20px;
          margin-top: 0;
          margin-bottom: 15px;
          padding-bottom: 5px;
          font-weight: 600;
          color: black;
          text-transform: uppercase;
         font-family:Arial, Helvetica, sans-serif;

      }

      .category1-search {
          margin-bottom: 20px;
          display: flex;
      }

      .category1-search input[type="text"] {
          width: calc(100% - 50px);
          padding: 0px;
          font-size: 14px;
      }

      .category1-search a input[type="submit"] {
          padding: 4px 10px;
          font-size: 14px;
          background-color: #000;
          color: white;
          border: none;
          cursor: pointer;
      }
        .category1-search a{
          padding: 3px 10px;
          font-size: 14px;
          background-color: #000;
          color: white;
          border: none;
          cursor: pointer;
      }

      .category1-sidebar-list {
          list-style: none;
          padding: 0;

      }

      .category1-sidebar-list li {
          margin-bottom: 20px;
          display: flex;
          gap: 10px;
          align-items: flex-start;
          padding-bottom: 15px;
          border-bottom: 1px solid #ccc;
      }

      .category1-sidebar-image {
          width: 80px;
          height: 70px;
          background-color: #ddd;
          flex-shrink: 0;
      }

      .category1-sidebar-list a {
          text-decoration: none;
          color: #000;
          font-size: 18px;
          font-weight: 600;
         font-family:Arial, Helvetica, sans-serif;
          display: block;
          line-height: 1.4;
      }

      .category1-sidebar-list span {
          display: block;
          font-size: 14px;
          color: #888;
          padding-top: 15px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .category1-sidebar-list-content {
          flex: 1;
      }

      .category1-sidebar-list-content:hover {
          text-decoration: underline;
          color: black;
      }

      /*  */
      /* Special style for first hot item */
      .category1-sidebar-featured {
          height: 210px;
          margin-bottom: 0px;
      }


      .category1-sidebar-featured .category1-sidebar-image {
          width: 100%;
          height: 170px;
          margin-bottom: 0px;
      }

      .category1-sidebar-featured .category1-sidebar-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }


      .category1-sidebar-featured a {

          font-weight: bold;
          font-size: 18px;
          text-decoration: none;
          color: #333333;
          display: flex;
          position: relative;
          top: -70px;
          background-color: white;
          margin-right: 60px;
          padding: 15px 15px 10px 5px;
      }

      .category1-sidebar-featured a:hover {
          text-decoration: underline;
          color: black;
      }

      .category1-sidebar-list .category1-sidebar-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      /* detail */
      .detail-container {
          display: flex;
          padding-bottom: 30px;
          max-width: 1240px;
          margin: 0px auto;

      }

      .detail-main-content {
          flex: 3;
          margin-bottom: 30px;
          margin-top: 0px;
      }

      .deta-container {
          max-width: 100%;
          margin: 0px 0rem;
          padding: 0;
      }

      .deta-breadcrumb-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 11px;
          color: #666;
          padding: 0 0rem;
          margin-bottom: 20px;
          padding-top: 30px;
          font-weight: 500;

      }

      .deta-inline-meta {
         font-family:Arial, Helvetica, sans-serif;
          font-size: 12px;
          font-weight: 400;
      }

      .deta-breadcrumb a {
          color: #666;
          text-decoration: none;
      }

      .home {
          color: #121111;
          font-weight: 600;
         font-family:Arial, Helvetica, sans-serif;
      }

      .deta-breadcrumb a {
          color: #666;
          text-decoration: none;
         font-family:Arial, Helvetica, sans-serif;
      }

      .deta-inline-meta span {
          margin-left: 10px;
          color: #666;

      }

      .deta-title {
          /* font-size: 38px; */
          /* line-height: 1.3; */
          /* font-weight: 500; */

          text-transform: capitalize;
          line-height: 62px;
          font-weight: 500;
          font-style: normal;
          font-size: 50px;
          padding: 0 10rem;
          /* margin: 0 0 10px 0; */
      }

      .deta-inline-meta strong {
          color: #111;
      }

      .deta-title {
          /* font-size: 38px; */
          /* line-height: 1.3; */
          /* font-weight: 500; */
         font-family:Arial, Helvetica, sans-serif;
          text-transform: capitalize;
          line-height: 50px;
          font-weight: 600;
          font-style: normal;
          font-size: 50px;
          padding: 0 0rem;
          /* margin: 0 0 10px 0; */
      }

      .deta-meta-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          color: #999;
          padding-bottom: 10px;
          padding: 20px 0rem 0rem;
          margin-bottom: 20px;
      }

      .deta-meta-left {
          display: flex;
          gap: 10px;
          font-size: 11px;
      }

      .deta-meta-left .deta-date {
          text-transform: uppercase;
         font-family:Arial, Helvetica, sans-serif;
          color: #999;
      }

      .deta-meta-left .deta-category {
          color: #ff4900;
          font-weight: bold;
         font-family:Arial, Helvetica, sans-serif;
      }

      .deta-meta-left .deta-category:hover {
          text-decoration: underline;
          color: #ff4900;
      }

      .detail-icons {
          display: flex;
          gap: 20px;
          align-items: center;
          justify-content: flex-start;
          padding: 0px;
      }

      .detail-icons i {
          font-size: 17px;
          color: #000;
          transition: transform 0.2s ease;
      }

      .deta-article-image {
          width: 100%;
          margin-top: 0px;
      }

      .deta-article-image img {
          width: 100%;
          height: auto;
          display: block;
          margin: 0 auto;
      }

      .deta-container {
          max-width: 100%;
          margin: 30px 0rem;
          padding: 0;
      }

      .deta-content-container {
          /* max-width: 900px; */
          margin: 0 auto;
          padding: 0 0rem;
      }

      .deta-lead {
          /* font-style: italic; */
          /* float: left; */
          position: relative;
          width: 100%;
          font-style: italic;
          font-size: 16px;
          color: #111;
          line-height: 24px;
          margin-bottom: 20px;
         font-family:Arial, Helvetica, sans-serif;
          /* margin-bottom: 25px; */
      }

      .deta-dropcap-block {
          display: flex;
          align-items: flex-start;

      }

      .deta-dropcap {
          /* font-size: 60px; */
          /* font-weight: bold; */
          /* float: left; */
          /* line-height: 1; */
          /* margin-right: 10px; */
          /* font-family: serif; */
          /* color: #b10000; */
          font-size: 5rem;
          float: left;
          font-weight: bold;
       font-family:Arial, Helvetica, sans-serif;
          color: #000000;
          padding-right: 20px;
          line-height: 1;
          text-shadow: 3px -1px 0 #f6bcbc;
      }

      .deta-paragraph {
          margin-bottom: 0px;
          font-size: 14px;
          line-height: 26px;
          color: #666666;
          margin-top: 0;
      }

      .deta-dropcap-block {
          display: flex;
          align-items: flex-start;

      }

      .float-container2 {
          max-width: 100%;
          /* background: #f4f4f4; */
          /* padding: 18px; */
          color: #666666;
      }

      .float-container2 img {
          float: left;
          margin-right: 12px;
          /* margin-bottom: 2px; */
          width: 300px;
          height: auto;
      }

      .float-container2 p {
          line-height: 1.6;
          font-size: 14px;
          /* padding: 10px; */
         font-family:Arial, Helvetica, sans-serif;
      }

      .deta-paragraph {
          margin-bottom: 0px;
          font-size: 13px;
          line-height: 24px;
          color: #666666;
          margin-top: 0;
         font-family:Arial, Helvetica, sans-serif;
      }

      .deta-quote-box {
          border-left: 3px solid #e0e0e0;
          /* background: #f5f5f5; */
          padding: 15px 20px;
          margin: 10px 0;
          /* font-weight: bold; */
          letter-spacing: 0.5px;
          font-size: 17px;
          word-spacing: 3px;
          line-height: 24px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .float-container3 {
          font-family: Arial, sans-serif;
          font-size: 16px;
          line-height: 1.6;
          color: #555;
      }

      .float-container3 img {
          float: right;
          margin-left: 20px;
          margin-bottom: 10px;
          width: 300px;
          height: auto;
      }

      .float-container3 p {
          line-height: 1.6;
          font-size: 14px;
          /* padding: 10px; */
      }

      .float-container3::after {
          content: "";
          display: block;
          clear: both;
      }

      .deta-tags {
          margin-top: 30px;
          font-size: 14px;
          color: #161616;
         font-family:Arial, Helvetica, sans-serif;
      }

      .deta-tags span {
          color: #636161;
      }

      .post-navigation {
          display: flex;
          justify-content: space-between;
          align-items: stretch;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          margin: 40px 0rem;
          /* max-width: 1000px; */
      }

      .post-boxleft {
          text-align: left;
      }

      .post-boxleft,
      .post-boxright {
          width: 50%;
          padding: 20px 10px;
          box-sizing: border-box;
      }

      .divider {
          width: 0.1px;
          background-color: #ccc;
      }

      .post-boxleft h4,
      .post-boxright h4 {
          /* font-family: Georgia, serif; */
          /* font-size: 20px; */
          color: #666;
         font-family:Arial, Helvetica, sans-serif;
          text-transform: capitalize;
          line-height: 28px;
          font-weight: 500;
          font-style: normal;
          font-size: 24px;
          margin: 0 0 20px 0;
          /* margin: 0 0 10px; */
      }

      .post-boxleft p,
      .post-boxright p {
          font-family: Arial, sans-serif;
          font-weight: bold;
          font-size: 14px;
          color: #333;
          text-transform: uppercase;
          margin: 0;
          line-height: 1.4;
      }

      .post-boxright {
          text-align: right;
      }

      .post-boxleft h4,
      .post-boxright h4 {

          color: #666;
         font-family:Arial, Helvetica, sans-serif;
          text-transform: capitalize;
          line-height: 28px;
          font-weight: 500;
          font-style: normal;
          font-size: 24px;
          margin: 0 0 20px 0;

      }

      .post-boxleft p,
      .post-boxright p {
          font-family: Arial, sans-serif;
          font-weight: bold;
          font-size: 14px;
          color: #333;
          text-transform: uppercase;
          margin: 0;
          line-height: 1.4;
      }

      .author-box {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ccc;
          padding-bottom: 30px;
          /* max-width: 900px; */
          margin: 0 0rem;
      }

      .author-avatar {
          float: left;
          width: 17%;
          position: relative;
      }

      .author-avatar:before {
          position: absolute;
          content: "";
          height: 100%;
          width: 0.1px;
          top: 0;
          right: -20px;
          background: #ccc;
          z-index: 1;
      }

      .author-avatar img {
          width: 100%;
          height: auto;
          border-radius: 50% !important;
          display: block;
      }

      .author-avatar:after {
          position: absolute;
          content: "";
          height: 1px;
          width: 20px;
          top: 50%;
          right: -20px;
          background: #ccc;
          z-index: 2;
          transform: translateY(-50%);
      }

      .author-avatar {
          float: left;
          width: 15%;
          position: relative;
      }

      .author-info {
          flex: 1;
          padding-left: 45px;
      }

      .author-meta {
          font-size: 14px;
          color: #666;
          margin-bottom: 5px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .author-name {
          font-size: 27px;
          font-weight: bold;
          margin-bottom: 10px;
          outline: none;
          color: #111;
          text-decoration: none;
          -webkit-transition: all 500ms ease;
          -moz-transition: all 500ms ease;
          transition: all 500ms ease;
         font-family:Arial, Helvetica, sans-serif;
          text-decoration: none;
      }
      .author-name a:-webkit-any-link {
        color: black;
         text-decoration: none;

      }
       .author-name a:-webkit-any-link:hover {
        color: black;
         text-decoration:underline ;

      }

      .author-desc {
          font-size: 14px;
          color: #8b8989;
          line-height: 1.6;
          margin-bottom: 15px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .author-social {
          display: flex;
          gap: 15px;
      }

      .author-social i {
          color: #222;
          font-size: 15px;
          cursor: pointer;
          transition: color 0.3s;
      }

      .related-container {
          /* max-width: 1200px; */
          margin: 40px 0rem;
          padding-bottom: 40px;
          border-bottom: 1px solid #ccc;
      }

      .related-heading {
          text-align: center;
          font-size: 20px;
          /* font-weight: 600; */
          margin-bottom: 30px;
          position: relative;
         font-family:Arial, Helvetica, sans-serif;
      }

      .related-heading::after {
          content: '';
          display: block;
          width: 60px;
          height: 0.5px;
          background: #000;
          margin: 10px auto 0;
      }

      .related-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
          gap: 40px;
      }

      .related-card {
          display: flex;
          flex-direction: column;
      }

      .related-card img {
          width: 100%;
          height: 96px;
          display: block;
          object-fit: cover;
      }

      .related-date {
          font-size: 12px;
          color: #888;
          margin-top: 15px;
          margin-bottom: 5px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .related-title {
          font-size: 15px;
          font-weight: 600;
          color: #000;
          margin-top: 10px;
          line-height: 1.4;
         font-family:Arial, Helvetica, sans-serif;
      }

      .related-title:hover {
          text-decoration: underline;
          color: black;
      }


      .comment-section {
          max-width: 900px;
          margin: 0 auto;
      }

      .comment-title {
          text-align: center;
          font-size: 20px;
          /* font-weight: bold; */
          text-transform: uppercase;
          margin-bottom: 40px;
          position: relative;
         font-family:Arial, Helvetica, sans-serif;
      }

      .comment-title::after {
          content: "";
          display: block;
          width: 60px;
          height: 1px;
          background: #000;
          margin: 10px auto 0;
      }

      .comment-box.bg-light {
          background: #f9f9f9;
          display: flex;
          padding: 20px 10px;
      }

      .comment-box.move-right {
          margin-left: 40px;
          background: #fff;
      }

      .comment-avatar {
          width: 100px;
          height: 100px;
          margin-right: 20px;
          flex-shrink: 0;
      }

      .comment-avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .comment-content {
          flex: 1;
      }

      .comment-author {
          font-weight: bold;
          font-size: 18px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .comment-date {
          font-size: 13px;
          color: #666;
          margin: 4px 0 8px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .comment-text {
          padding-top: 10px;
          font-size: 13px;
          color: #666;
          margin-bottom: 10px;
          line-height: 1.6;
         font-family:Arial, Helvetica, sans-serif;

      }

      .comment-reply {
          font-size: 12px;
          /* font-weight: bold; */
          color: #000;
          text-transform: uppercase;
          cursor: pointer;
          color: #0b0b0b;
          /* text-decoration: underline !important; */
          -webkit-transition: all 500ms ease;
          -moz-transition: all 500ms ease;
          transition: all 500ms ease;
         font-family:Arial, Helvetica, sans-serif;
      }

      .comment-reply:hover {
          text-decoration: underline;
          color: black;
      }

      .leave-reply-section {
          max-width: 900px;
          margin: 0 auto;
      }

      .leave-reply-title {
          text-align: center;
          font-size: 18px;
          text-transform: uppercase;
          /* font-weight: bold; */
          margin-bottom: 30px;
          margin-top: 30px;
          position: relative;
         font-family:Arial, Helvetica, sans-serif;
      }

      .leave-reply-title::after {
          content: "";
          display: block;
          width: 50px;
          height: 1px;
          background: #000;
          margin: 10px auto 0;
      }

      .leave-reply-box {
          border: 1px solid #ccc;
          /* border-radius: 5px; */
          padding: 50px 20px 15px;
          font-size: 14px;
          color: #333;
          margin-bottom: 50px;
         font-family:Arial, Helvetica, sans-serif;
      }

      /* author page in erli */
      .author-page-line {
          border-top: 1px solid rgb(224, 224, 224);
          padding-top: 25px;
          margin-top: 30px;
          margin-bottom: 60px;
      }

      .detail-container .detail-main-content .section6-articles-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 30px;
          margin-bottom: 50px;
      }

      .detail-container .detail-main-content .section6-articles-grid:last-child {

          border-bottom: 1px solid rgb(226, 224, 224);
          padding-bottom: 60px;
      }

      /* search page */
      /* Container for the whole results section */
      .search-container {

          color: #333;

          margin: 30px auto;
      }

      /* Search results header */
      .search-header {
          border: 1px solid #d7d5d5;
          padding: 25px;
          margin-bottom: 50px;
          font-size: 13px;
          color: gray;
          font-weight: 400;
         font-family:Arial, Helvetica, sans-serif;

      }

      /* Single result item */
      .search-item {
          margin-bottom: 30px;
          border-bottom: 1px solid #ccc;
          padding-bottom: 20px;

      }

      /* Title of the result */
      .search-title {
          font-size: 26px;
          font-weight: 700;
          margin-bottom: 5px;
          margin-top: 0px;
         font-family:Arial, Helvetica, sans-serif;
          color: black;
      }

      /* Author and meta info */
      .search-meta {
          font-size: 12px;
          color: #dcd9d9;
          margin-bottom: 5px;
          margin-top: 20px;
      }

      .search-meta-author {
          font-weight: bold;
          color: #ff4900;
          text-transform: uppercase;
          font-size: 10px;
         font-family:Arial, Helvetica, sans-serif;
      }

      .search-meta-role {
          color: #666;
         font-family:Arial, Helvetica, sans-serif;
      }

      .search-meta-date {
          color: #666;
         font-family:Arial, Helvetica, sans-serif;
      }

      /* Result description */
      .search-description {
          font-size: 14px;
          line-height: 1.8;
          padding-top: 20px;
         font-family:Arial, Helvetica, sans-serif;
          font-weight: 400;
          color: #676666;
      }

      /* author page */
      /* detail page  */
      .pageContainer {


          margin-top: 50px;

      }

      .pageHeader {
          color: white;
          padding: 250px 0px 240px 0px;
          text-align: center;
          position: relative;
          overflow: hidden;
          /* Keep the background contained */
      }

      .backgroundImageContainer {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          /* height: 190%; */
          z-index: -1;
      }

      .backgroundImage {
          width: 100%;
          /* height: 100%; */
          height: 200%;
          object-fit: cover;
      }

      .overlay1 {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(rgba(121, 122, 122, 0.5), rgba(30, 2, 61, 0.5));
      }

      .pageheader1 {
          position: relative;
      }

      .pageNavBar {
          font-size: 16px;
          display: flex;
          color: white;
          position: absolute;
          top: -180px;
          /* Adjust this negative value to move it higher */
          width: 100%;
          left: 0;
          text-transform: uppercase;

      }

      .pageNavBar a {
          color: white;
          text-decoration: none;
          margin: 0 5px;
          text-transform: uppercase;
      }

      .pageNavBar a:hover {
          text-decoration: underline;
      }

      .pageNavDivider {
          margin: 0 5px;
      }

      .pageName {
          font-size: 45px;
          font-weight: 100;
          letter-spacing: 2px;
          margin-bottom: 15px;
          font-family:Arial, Helvetica, sans-serif;
      }

      .pageRole {
          border: 2px solid #38b6ff;
          display: inline-block;
          padding: 10px 25px;
          color: white;
          font-size: 16px;
          letter-spacing: 1px;
          text-transform: uppercase;
          font-family:Arial, Helvetica, sans-serif;
      }

      .pageContent {
          display: flex;
          gap: 30px;
          padding: 50px 0px;
      }

      .pageLeft {
          width: 70%;
      }

      .line {
          border-left: 6px solid #082a4d;
          padding-left: 20px;
          flex: 2;
      }

      .pageRight {
          width: 30%;
          height: 100%;
          border: 2px solid #ddd;
          padding: 40px 20px;


      }

      .pageTitle {
          font-size: 30px;
          color: black;
          margin-bottom: 10px;
          font-weight: 400;
          font-family:Arial, Helvetica, sans-serif;

      }

      .pageSubtitle {
          color: #666;
          font-size: 12px;
         font-family:Arial, Helvetica, sans-serif;
          margin-bottom: 20px;
          text-transform: uppercase;
      }

      .pageBio {
          margin-bottom: 30px;
          line-height: 1.8;
          margin-top: 90px;
      }

      .pageBio p {

          margin-bottom: 15px;
          font-family:Arial, Helvetica, sans-serif;
          color: #5c5c5c;
      }

      .pageBio a {
          color: #5c5c5c;
          text-decoration: none;
      }

      .pageBio a:hover {
          text-decoration: underline;
      }

      .pageCreditsTitle {
          font-size: 23px;
          font-weight: 600;
          margin-bottom: 30px;
          font-family:Arial, Helvetica, sans-serif;
      }

      .pageCredits a {
          color: black;
          text-decoration: none;
          font-family:Arial, Helvetica, sans-serif;
          font-size: 18px;
          line-height: 28px;
      }


      .pageCredits a:hover {
          text-decoration: underline;
      }

      .pageEvent {
          margin-top: 30px;
      }

      .pageVideoContainer {
          position: relative;
          padding-bottom: 56.25%;
          /* 16:9 aspect ratio */
          height: 0;
          overflow: hidden;
          background: #000;
          margin-bottom: 10px;
      }

      .pageVideoOverlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .pagePlayButton {
          width: 60px;
          height: 60px;
          background-color: rgba(255, 255, 255, 0.3);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
      }

      .pagePlayArrow {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;
          border-left: 20px solid white;
          margin-left: 5px;
      }

      .pageEventLabel {
          background-color: #222;
          color: white;
          display: inline-block;
          padding: 8px 15px;
          font-size: 14px;
      }

      /*  */
      /* box */
      .infobox {
          float: right;
          clear: right;
          font-size: 14px;
          line-height: 1.5;
          padding: 2px;
      }

      .infobox-title {
          font-weight: bold;
          font-size: 16px;
          text-align: center;
          padding: 5px 10px 0px 10px;
          background-color: #f8f9fa;
          font-family:Arial, Helvetica, sans-serif;
      }

      .infobox-image {
          text-align: center;
          padding: 0px 25px;
      }

      .infobox-image img {
          width: 220px;
          height: 147px;
          border: 1px solid #c8ccd1;
      }

      .infobox-caption {
          font-size: 12px;
          text-align: center;
          padding: 0px;
          font-family:Arial, Helvetica, sans-serif;

      }

      .infobox-data {
          display: grid;
          grid-template-columns: 130px 1fr;
          font-family:Arial, Helvetica, sans-serif;

      }

      .infobox-label {
          font-weight: bold;
          padding: 3px 8px;
          vertical-align: top;
          font-family:Arial, Helvetica, sans-serif;
          color: #242323;
      }

      .infobox-value {
          padding: 3px 0px;
          vertical-align: top;
          color: #5c5c5c;
          font-family:Arial, Helvetica, sans-serif;


      }

      /*  */

      /* Responsive adjustments */
      @media (max-width: 768px) {
          .pageContainer {
              margin-top: 50px;
          }

          .pageNavBar {
              font-size: 8px;
              display: flex;
              color: white;
              position: absolute;
              top: -120px;
              width: 100%;
              left: 0;
              text-transform: uppercase;


          }

          .pageName {
              font-size: 30px;
              font-weight: 100;
              letter-spacing: 2px;
              margin-bottom: 10px;
font-family:Arial, Helvetica, sans-serif;
          }

          .pageRole {
              border: 2px solid #38b6ff;
              display: inline-block;
              padding: 4px 3px;
              color: white;
              font-size: 7px;
              letter-spacing: 1px;
              font-family:Arial, Helvetica, sans-serif;
          }

          .pageContent {
              flex-direction: column;
          }

          .pageContent {
              display: flex;
              gap: 0px;
              padding: 40px 25px;
          }

          .pageRight {
              margin-top: 0px;
          }

          .pageLeft {
              width: 100%;
          }

          .pageTitle {
              font-size: 25px;
              color: black;
              margin-bottom: 5px;
              font-weight: 400;
font-family:Arial, Helvetica, sans-serif;
          }

          .pageSubtitle {
              color: #666;
              font-size: 10px;
              text-transform: uppercase;
          }

          .pageBio {
              margin-bottom: 30px;
              line-height: 1.8;
              margin-top: 40px;
          }

          .pageBio p {
              margin-bottom: 10px;
font-family:Arial, Helvetica, sans-serif;
              color: #5c5c5c;
          }

          .pageRight {
              width: 100%;
              height: 100%;
              border: 2px solid #ddd;
              padding: 20px;
          }

          .infobox {
              float: right;
              clear: right;
              font-size: 12px;
              line-height: 1.5;
              padding: 2px;
          }

      }
      /* load more */
      /* Loader grid styling */
.loader {
  display: none; /* hidden by default */
  grid-template-columns: repeat(3, 20px);
  grid-template-rows: repeat(3, 20px);
  gap: 5px;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  width: 10px;
  height: 10px;
}

.loader div {
  width: 20px;
  height: 20px;
  background-color: black;
  opacity: 0.3;
  animation: rotateHighlight 1.2s linear infinite;
}

/* Rotation order delays */
.loader div:nth-child(1) { animation-delay: 0s; }
.loader div:nth-child(2) { animation-delay: 0.15s; }
.loader div:nth-child(3) { animation-delay: 0.3s; }
.loader div:nth-child(6) { animation-delay: 0.45s; }
.loader div:nth-child(9) { animation-delay: 0.6s; }
.loader div:nth-child(8) { animation-delay: 0.75s; }
.loader div:nth-child(7) { animation-delay: 0.9s; }
.loader div:nth-child(4) { animation-delay: 1.05s; }

/* Middle square stays empty */
.loader div:nth-child(5) {
  background-color: transparent;
  animation: none;
}

@keyframes rotateHighlight {
  0%, 20% { opacity: 1; }
  80%, 100% { opacity: 0.3; }
}

/* Hidden items initially */
.extra-items {
  display: none;
}

/* Button styling */
.load-btn {
  display: block;
 margin: 0 auto;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
}