header,
main,
nav ul {
    display: flex;
}

.list-articles,
article {
    padding: 1.5rem;
}

article p,
body {
    line-height: 1.5;
}

article,
aside {
    background-color: #fff;
    box-shadow: 0 2px 4px rgb(0 0 0 / .1);
}

aside ul,
nav ul {
    list-style: none;
}

aside,
footer,
header,
main {
    padding: 1rem;
}

footer,
footer p,
footer p a,
header {
    color: #fff;
}

.article-date,
.first-letter,
.latest-post-item span,
.section-title {
    font-weight: 700;
}

.grid-item,
.list-articles,
article,
aside {
    box-shadow: 0 2px 4px rgb(0 0 0 / .1);
}

.grid-item p,
article h1 {
    margin-top: .5rem;
}

#share-buttons,
hr {
    margin-bottom: 20px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

header {
    background: linear-gradient(to right, #fff 0, #fff 330px, #dc3545);
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    background: inherit;
    z-index: -1;
    filter: blur(10px);
    opacity: .7;
    transform: scale(.95);
}

.most-read .grid-item img {
    height: 150px;
    width: 150px;
    object-fit: cover;
}

.image-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.text-container,
article h2 {
    margin-top: 1rem;
}

.latest-post-item,
.section-title,
.text-container,
.text-container p,
article,
article h1,
article h2 {
    margin-bottom: 1rem;
}

nav ul li {
    margin-left: 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    flex-wrap: wrap;
}

/* Main content adjustment */
.main-content {
    flex: 2;
    margin-right: .5rem;
}

.list-articles {
    background-color: #f8f8f8;
}

article p {
    font-size: 1rem;
}

article h1 {
    font-size: 1.6rem;
    color: #000;
    line-height: 1.2;
}

article h2 {
    font-size: 1.4rem;
    color: #666;
}

.section-title {
    font-size: 1.2rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #1ab26a;
    display: inline-block;
    color: #333;
    text-transform: uppercase;
}

aside {
    flex: 1;
    align-self: flex-start; 
}

.article-details p,
.quick-links ul li,
aside ul li {
    margin-bottom: .5rem;
}

.breadcrumb a,
aside ul li a {
    color: #666;
    text-decoration: none;
}

.quick-links {
    display: flex; 
    justify-content: space-between; 
}

.quick-links ul {
    list-style-type: disc; 
    padding-left: 20px; 
}

.categories ul,
.latest-posts ul {
    padding: 0; 
    list-style-type: none; 
}

.breadcrumb {
    margin-bottom: 1rem; 
    background-color: #f7fde9; 
    padding: .7rem; 
    border-radius: 10px; 
}

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

.breadcrumb li {
    display: inline; 
}

.breadcrumb li + li::before {
    content: "/";
    padding: 0 8px; 
    color: #999; 
}

footer {
    background-color: #000; 
    text-align: center; 
}

.article-item:last-child::after,
.mobile-nav { 
    display:none; 
}

.editors-pick .grid-container,
.most-read .grid-container { 
   display:grid; 
   grid-template-columns:repeat(2,1fr); 
   grid-gap:1rem; 
   row-gap:1rem; 
}

.latest-post-item a { 
   display:flex; 
   align-items:center; 
   text-decoration:none; 
   color:#333; 
}

.latest-post-item img { 
   width:100px; 
   height:100px; 
   object-fit:cover; 
   margin-right:1rem; 
   border-radius:2px; 
   aspect-ratio:1/1; 
}

.editors-pick,.most-read,.you-may-also-like { 
   margin-top:2rem; 
   margin-bottom:.3rem; 
}

.social-share { 
   margin-top:.7rem; 
   display:flex; 
   align-items:center; 
   margin-bottom:1.2rem; 
}

.social-share a { 
   margin-right:1rem; 
}

.social-share img { 
   width:32px; 
   height:32px; 
}

.categories ul { 
   display:grid; 
   grid-template-columns:repeat(2,1fr); 
   grid-gap:.5rem; 
   margin-bottom:1rem; 
}

.category-item { 
   margin-bottom:0; 
}

/* Link styles */
.category-item a {
    display: block;
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover effect */
.category-item:hover {
    transform: translateX(5px);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* Base styles for all category items */
.category-item {
    margin: 5px 0;
    border-radius: 6px;
    overflow: hidden;
}

/* Individual background colors for each item */
.category-item:nth-child(1) { background-color: #f1f8ff; }
.category-item:nth-child(2) { background-color: #fff3cd; }
.category-item:nth-child(3) { background-color: #e2f0d9; }
.category-item:nth-child(4) { background-color: #ffe6e6; }
.category-item:nth-child(5) { background-color: #e6f7ff; }
.category-item:nth-child(6) { background-color: #f0e6ff; }
.category-item:nth-child(7) { background-color: #fff0f5; }
.category-item:nth-child(8) { background-color: #e6ffe6; }
.category-item:nth-child(9) { background-color: #fff5e6; }
.category-item:nth-child(10) { background-color: #e6e6ff; }
.category-item:nth-child(11) { background-color: #fce4ec; }
.category-item:nth-child(12) { background-color: #d1c4e9; }
.category-item:nth-child(13) { background-color: #c8e6c9; }
.category-item:nth-child(14) { background-color: #bbdefb; }
.category-item:nth-child(15) { background-color: #fffde7; }
.category-item:nth-child(16) { background-color: #ffccbc; }
.category-item:nth-child(17) { background-color: #ffe0b2; }
.category-item:nth-child(18) { background-color: #d7ccc8; }
.category-item:nth-child(19) { background-color: #f0f4c3; }
.category-item:nth-child(20) { background-color: #b2ebf2; }
.category-item:nth-child(21) { background-color: #c5cae9; }
.category-item:nth-child(22) { background-color: #e1bee7; }
.category-item:nth-child(23) { background-color: #ffe57f; }
.category-item:nth-child(24) { background-color: #dcedc8; }
.category-item:nth-child(25) { background-color: #ffab91; }
.category-item:nth-child(26) { background-color: #ffcc80; }
.category-item:nth-child(27) { background-color: #f8bbd0; }
.category-item:nth-child(28) { background-color: #d1c4e9; }
.category-item:nth-child(29) { background-color: #b3e5fc; }
.category-item:nth-child(30) { background-color: #c8e6c9; }
.category-item:nth-child(31) { background-color: #e8f5e9; }
.category-item:nth-child(32) { background-color: #fafafa; }
.category-item:nth-child(33) { background-color: #f3e5f5; }
.category-item:nth-child(34) { background-color: #e1f5fe; }
.category-item:nth-child(35) { background-color: #fff8e1; }
.category-item:nth-child(36) { background-color: #f9fbe7; }
.category-item:nth-child(37) { background-color: #e0f2f1; }
.category-item:nth-child(38) { background-color: #f3e5f5; }
.category-item:nth-child(39) { background-color: #e8eaf6; }
.category-item:nth-child(40) { background-color: #fff3e0; }
.category-item:nth-child(41) { background-color: #e0f7fa; }
.category-item:nth-child(42) { background-color: #f1f8e9; }
.category-item:nth-child(43) { background-color: #ffebee; }
.category-item:nth-child(44) { background-color: #e3f2fd; }
.category-item:nth-child(45) { background-color: #f5f5f5; }


.article-navigation {  
   display:flex;  
   justify-content:space-between;  
   align-items:center;  
   position:relative;  
} 

.article-details, .next-article, .prev-article {  
   flex:1;   
} 

.prev-article {  
   text-align:left;  
   padding-right:20px;  
} 

.article-source, .next-article {  
   text-align:right;  
} 

.next-article {  
   padding-left:20px;  
} 

.vertical-line {  
   margin :0 20px ;  
   position:absolute ;  
   top :50% ;  
   left :50% ;  
   transform :translate(-50%,-50%) ;  
   height :80% ;  
   width :1px ;  
   background-color :#b2beb5 ;  
} 

.article-meta {  
   display:flex ;   
   justify-content :space-between ;   
   align-items:flex-start ;   
   margin-bottom :1rem ;   
} 

.first-letter {  
   font-size :300% ;   
   float:left ;   
   line-height :1 ;   
   margin-right :.1em ;   
} 

.no-bullets {  
   list-style-type:none ;   
   padding :0 ;   
   margin :0 ;   
} 

.responsive-image {  
   max-width :100% ;   
   height:auto ;   
} 

hr {  
   margin-top :20px ;   
   border:none ;   
   border-top :2px solid #ccc ;   
} 

.article-item img, .grid-item img {  
   width :150px ;   
   height :150px ;   
   object-fit :cover ;   
   border-radius :2px ;   
} 

.grid-container {  
   display:grid ;   
   grid-template-columns :repeat(4,1fr) ;   
   grid-gap :1rem ;   
} 

.grid-item {  
   text-align:center ;   
   margin-bottom :1rem ;   
   background-color :#f7fde9 ;   
   padding :.7rem ;   
   border-radius :10px ;   
} 

#share-buttons a, .read-more {  
   display:inline-block ;   
   text-decoration:none ;   
   border-radius :4px ;   
   color:#fff ;   
} 

.grid-item img {  
   aspect-ratio :1/1 ;   
} 

.most-read .grid-container {  
   display:grid ;   
   grid-template-columns :repeat(3,1fr) ;   
   grid-gap :1rem ;   
} 

.article-list {  
   list-style-type:none ;   
   padding :0 ;   
   margin-top :1rem ;   
} 

.article-item {  
   margin-bottom :2rem ;     
} 

.article-item::after {    
   content:"";    
   position:absolute;    
   bottom:-1rem;    
   left :0;    
   width :100%;    
   height :1px;    
   background-color :#ccc;    
} 

.article-item a {    
     display:flex ;    
     text-decoration:none ;    
     color:#333 ;    
} 

.article-item img {    
     padding :7px ;    
} 

.article-details h2 {    
     font-size :1.5rem ;    
     margin-bottom :.5rem ;    
} 

.read-more {    
     background-color :#1ab26a ;    
     padding :.5rem 1rem ;
} 

@media screen and (max-width :1200px) {    
     .grid-container {      
         grid-template-columns :repeat(2,1fr) ;
     }     
} 

@media screen and (max-width :900px) {    
     main {      
         display:flex ;
         flex-wrap:wrap ;
         flex-direction :column ;
         padding :1rem ;
     }     
     article {      
         background-color :#fff ;
         padding :.5rem ;
         box-shadow :0 2px 4px rgb(0 0 0 / .1) ;
         margin-right :0 ;
         margin-bottom :1rem ;
     }     
     nav {
         display:none ;
     }     
     .main-content {
         flex :2 ;
         margin-right :0 ;
     }     
     aside {
         width :100% ;
         margin-top :1rem ;
     }     
     .mobile-nav {      
         display:block ;
         margin-top :1rem ;
     }     
     .mobile-nav ul {      
         list-style:none ;
     }     
     .mobile-nav ul li {      
         margin-bottom :.5rem ;
     }     
     .mobile-nav ul li a {      
         color:#666 ;
         text-decoration:none ;
     }     
     .most-read .grid-container {      
         grid-template-columns :repeat(1,1fr) ;
     }     
     .article-item a {
         display:block ;
     }     
     .article-item img {
         float:left ;
         width :100px ;
         height :75px ;
         margin-right :1rem ;
         margin-bottom :.5rem ;
     }     
     .article-details h2 {
         margin-top :0 ;
     }     
} 

#share-buttons {
    text-align: center;
    margin-top: 5px;
}

#share-buttons a {
    padding: 10px 20px;
    margin: 0 10px;
    transition: background-color 0.3s;
    color: #ffffff; /* Set text color to white for better contrast */
}

#share-buttons a:hover {
    opacity: 0.8;
}

/* Facebook */
#share-buttons a:first-child {
    background-color: #3b5998; /* Facebook blue */
}

/* Twitter */
#share-buttons a:nth-child(2) {
    background-color: #1da1f2; /* Twitter blue */
}

/* LinkedIn */
#share-buttons a:nth-child(3) {
    background-color: #0077b5; /* LinkedIn blue */
    margin-top: 5px;
}

/* Add hover effects with higher contrast */
#share-buttons a:first-child:hover {
    background-color: #2d4373; /* Darker Facebook blue on hover */
}

#share-buttons a:nth-child(2):hover {
    background-color: #0e7ac4; /* Darker Twitter blue on hover */
}

#share-buttons a:nth-child(3):hover {
    background-color: #005582; /* Darker LinkedIn blue on hover */
}
 

.box-carousel {
     display:flex ;
     flex-wrap :wrap ;
     justify-content :space-between ;
     margin-bottom :5px ;
} 

.box-carousel .row {
     display:flex ;
     flex-wrap :wrap ;
     justify-content :space-between ;
     width :100% ;
     margin-bottom :5px ;
} 

.box-carousel .column {
     flex-basis :calc(25% - 10px) ;
     margin-bottom :5px ;
     text-align:center ;
} 

.box-carousel img {
     width :100% ;
     height:auto ;
     margin-bottom :5px ;
} 

.box-carousel h4 {
     margin :0 ;
     font-size :16px ;
} 

@media screen and (max-width :768px) {
     .box-carousel .column {
          flex-basis :calc(50% - 10px) ;
     }
}
@media screen and (max-width :480px) {    
      .box-carousel .column {        
          flex-basis :100% ;        
      }     
}
.row {
      display:flex ;
      flex-wrap:wrap ;
}
.column {
      flex:1;padding:10px ;
}
.home-bg {
      font-size:1.2rem;background-color:red;color:#fff;padding:3px;margin:3px 0;display:inline-block
}
@media screen and (max-width :600px) {
      .breadcrumb {
          display:block;padding:.5rem
      }
      .breadcrumb li {
          display:inline-block;margin-right:5px
      }
      .breadcrumb li + li::before {
          content:"/";padding:0 5px
      }
      .grid-container,.most-read .grid-container {
          grid-template-columns:auto
      }
      header {
           display:flex;justify-content:center;background-color:white;color:#000;padding:.5rem
      }
      #share-buttons a{display:block;width:auto;margin-top:.5rem}
      .logo{margin-bottom:.5rem}
      .column{flex-basis:auto}
      .article-navigation{flex-direction:block}
      .next-article,.prev-article{text-align:center;padding:.15em}
      .vertical-line{display:none
 }     
}
@media screen and (min-width :992px) {

       body, main, header, aside {
            max-width:90%;
            margin-left:auto;
            margin-right:auto;
        }
}

.article-image {
    width: 100%;
    margin: 0;
    padding: 0;
}

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

@media screen and (max-width: 600px) {
    .article-image img {
        width: 100%;
        height: auto;
    }
}

/* Hide breadcrumb on small screens and show the message */
@media screen and (max-width :600px) {
    .breadcrumb {
        display: none;
    }
    .breadcrumb-message {
        display: block; /* Show the message where breadcrumb was */
        color: #666; /* Example text color */
        text-align: center; /* Center the message */
        padding: .5rem; /* Padding for spacing */
    }
}

/* Hide the message on larger screens where breadcrumb is visible */
.breadcrumb-message {
    display: none; /* Hide the message by default on larger screens */
}

/* nk-style.css */
.adsbygoogle {
    display: block;
}

/* Additional styles can be added here */
img {
    max-width: 100%;
    height: auto;
}


.quote-card {
    background: linear-gradient(135deg, #ffafbd, #ffc3a0);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 90%; /* Use a percentage for responsive width */
    max-width: 400px; /* Set the maximum width */
    text-align: center;
    margin: 0 auto; /* Center the card */
}

.quote-text {
    font-size: 1.5em;
    color: #333;
    margin: 0;
    position: relative;
}

.quote-text:before {
    content: open-quote;
    font-size: 3em;
    color: #ff6f61;
    position: absolute;
    left: -20px;
    top: -10px;
}

.quote-text:after {
    content: close-quote;
    font-size: 3em;
    color: #ff6f61;
    position: absolute;
    right: -20px;
    bottom: -10px;
}

.quote-author {
    font-size: 1.2em;
    color: #555;
    margin-top: 10px;
}


.points-card {
    background: linear-gradient(135deg, #a2c2e9, #f9d9b1);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 90%; /* Responsive width */
    max-width: 600px; /* Set the maximum width */
    text-align: left; /* Align text to the left */
    margin: 20px auto; /* Center the card and add spacing */
}

.points-card h2 {
    color: #333;
    text-align: center; /* Center the title */
    margin-bottom: 15px;
}

.points-list {
    list-style-type: decimal; /* Use decimal numbers for list */
    padding-left: 20px; /* Indent the list */
}

.points-list li {
    margin-bottom: 10px; /* Space between list items */
    line-height: 1.6; /* Improve readability */
    color: #555; /* Text color for list items */
}