/* All news styles are scoped within .news */
    .news {
       color: #1d2145;
      padding-top: 6rem;
        padding-bottom:2rem;
    }
    .news .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    /* Categories Bar at the Top */
    .news .categories-bar {
      text-align: center;
      margin: 1.5rem 1rem;
      line-height: 2.5rem;
    }
    .news .categories-bar a {
      margin: 0 1rem;
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      position: relative;
    }
    .news .categories-bar a:hover::after {
      width: 100%;
    }
    /* Central Search Section */
    .news .search-section {
      text-align: center;
      margin-bottom: 2rem;
    }
    .news .search-section form, .articlepge .search-section form {
      display: inline-block;
      position: relative;
    }
    .news .search-section input[type="search"],.articlepge .search-section input[type="search"]{
      width: 100%;
      padding: 0.75rem 1rem;
      border: 2px solid #1d2145;
      border-radius: 30px;
      font-size: 1rem;
      outline: none;
    }
    .news .search-section button,.articlepge .search-section button {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #d62e49;
      border: none;
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 30px;
      cursor: pointer;
      font-size: 1rem;
    }
    #news-search-form{width:80%}
.articlepge #news-search-form{width:100%}
    /* Popular Tags Listed Under Search */
    .news .popular-tags {
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.75rem;
    }
  .news .popular-tags a.tag {
  background-color: #d62e49;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.9rem;
  /* Animate background, border and transform */
  transition: background-color 0.3s ease, border 0.3s ease, transform 0.3s ease;
}
    /* Articles Grid */
    .news .articles {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.5rem;
    }
    .news .article-card {
      border: 1px solid #ddd;
      border-radius: 4px;
      overflow: hidden;
      transition: transform 0.3s ease;
      background: #fff;
    }
    .news .article-card:hover {
      transform: translateY(-5px);
    }
    .news .article-card img {
      width: 100%;
      display: block;
    }
    .news .article-card .card-content {
      padding: 1rem;
    }
    .news .article-card h3 {
      margin: 0 0 0.5rem;
      font-size: 1.25rem;
    }
    .news .article-card p {
      font-size: 0.9rem;
    }
    .news .article-card a {
  
        color:inherit;
      text-decoration: none;
     
    }
    /* Footer Link Hover (provided) */
    .footer-row-bottom a::after {
      content: '';
      display: block;
      width: 0%;
      height: 2px;
      background-color: #d62e49;
      transition: width 0.3s ease-in-out;
    }
    a:hover::after {
      width: 100%;
    }
    /* Responsive */
    @media (max-width: 768px) {
        .categories-bar{line-height: 2rem;}
        #news-search-form{width:100%}
        .news .popular-tags {margin-top: 2rem;}
      
    }
    .news .popular-tags a.tag{border:2px solid #d62e49}
    .news .popular-tags a.tag:hover{
        background-color: #1d2145;
  border: 2px solid #d62e49;
  transform: scale(1.05);
    }
    
    
    
.news .articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.news .otherarticles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
    
/* Standard Card Style */
.news .article-card {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news .article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.news .article-card img {
  width: 100%;
  display: block;
        transition: transform 0.3s ease;
}

.news .card-content {
  padding: 1rem;
}

.news .card-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
    min-height: 95px;
}

.news .card-content p {
  font-size: 0.9rem;
  margin-bottom: 0;
    min-height: 80px;
}

.news .article-card a:hover img {
transform: scale(1.05);
  text-decoration: none;
}

    
    
/* Featured Article Style */
.news .featured {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.news .featured .featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.7);
  transition: transform 0.3s ease;
}

.news .featured:hover .featured-image {
  transform: scale(1.05);
}

.news .featured .featured-content {
  position: relative;
  padding: 2rem;
  z-index: 2;
        background: linear-gradient(to top, rgb(30 33 69 / 0%) 0%, #1e2145cc 50%);
}

.news .featured h2 {
  margin: 0 0 1rem;
  font-size: 2rem;
}

.news .featured p {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.news .featured .read-more {
  background-color: #d62e49;
  color: #fff;
       border: 2px solid #d62e49;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s ease;
     
}

.news .featured .read-more:hover {
  background-color: #1d2145;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .featured .tags{padding-top:2rem;}
    
    .news .otherarticles{
        grid-template-columns: repeat(1, 1fr);

    }
  .news .featured {
    grid-column: span 1;
  }
}
    
  .news .article-card.text-focused {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  min-height: 250px;
  /* Optional: a subtle border if desired */
  border: 1px solid #ddd;
}

/* Background image is positioned absolutely to fill the card */
.news .article-card.text-focused .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.6) blur(1px);
  z-index: 1;
  transition: transform 0.3s ease;
}

/* Hover effect: slight scale for added dynamism */
.news .article-card.text-focused:hover .background-image {
  transform: scale(1.05);
}

/* Content overlay that brings the text forward */
.news .article-card.text-focused .content-overlay {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  background: linear-gradient(to top, rgb(30 33 69) 30%, #1e214585 100%);
}

/* Text styles */
.news .article-card.text-focused h3 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
min-height: 160px;
}

.news .article-card.text-focused p {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

/* Read more button */
.news .article-card.text-focused a.read-more {
  align-self: flex-end;
  background-color: #d62e49;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 30px;
       border: 2px solid #d62e49;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.news .article-card.text-focused a.read-more:hover {
     background-color: #1d2145;
    border: 2px solid #d62e49;
}

    .news .text-focused h3{    text-shadow: 2px 2px 4px rgb(0 0 0 / 100%);}

    
    .news .news-30{font-size: calc(30px + 1.4vw);
    line-height: 1;
    color: white;
    margin: 0;
    padding-top: 2rem;
        text-align: left;}
    
    
/* Metadata container styles */
.news .article-meta {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
    .news .article-meta .date-stamp {
            position: absolute;
    bottom: 5px;
        right:5px;
      font-size: 0.75rem;
      color: #ccc;
      margin-right: 0.5rem;
    }
    .news .article-footer { margin-bottom: 0.5rem; margin-top: 2rem;}

/* Category label style: prominent and highlighted */
.news .category-label {
    border: 1px solid white;
  display: inline-block;
  background-color: #1d2145;
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-right: 0.5rem;
  text-transform: uppercase;
}

/* Tags container: inline with spacing */
.news .article-meta .tags {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
    justify-content: center;
}
    
    .otherdt{bottom:55px!important;}

/* Tag badge style */
.news .article-meta .tags a.tag {
  border: 1px solid #fff;
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
    
.news .article-meta .tagstd a.tag {
   background-color: #1d2145;     
}
    
    .stdcol{
        color: #1d2145!important;
    }

.news .article-meta .tags a.tag:hover {
  background-color: #d62e49;
  transform: scale(1.05);
}



.background-image.webp,.featured-image.webp {
  background-image: var(--bg-image-webp);
}
.background-image.jpg,.featured-image.jpg {
  background-image: var(--bg-image-jpg);
}    



/* Header with title and search */
 .articlepge header {
      background: #1d2145;
      color: #fff;
      padding: 2rem 1rem;
      text-align: center;
    }
    .articlepge header h1 {
      font-size: 3.5rem;
    color: white;
    margin: 2rem 1rem;
    }
    /* The search box is less prominent – a light box below the title */
    .articlepge .search-box {
      margin-top: 1rem;
      background: rgba(255, 255, 255, 0.9);
      padding: 0.5rem;
      border-radius: 5px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
   .articlepge .search-box input[type="search"] {
      width: 100%;
      padding: 0.5rem;
      border: none;
      font-size: 1rem;
    }
    /* Categories and Popular Tags */
   .articlepge nav.categories {
      margin: 1.5rem 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.75rem;
    }
    .articlepge nav.categories a {
      background: #d62e49;
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 20px;
      transition: background 0.3s ease;
    }
    .articlepge nav.categories a:hover {
      background: #1d2145;
    }
    .articlepge .tags {
      margin-bottom: 1rem;
      text-align: center;
    }
    .articlepge .tags a {
      display: inline-block;
      background: #d62e49;
      color: #fff;
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
      margin: 0 0.5rem;
      transition: transform 0.3s ease;
    }
    .articlepge .tags a:hover {
      transform: scale(1.05);
    }
    /* Content layout: article content and sidebar */
    .articlepge .content-wrapper {
      display: flex;
      justify-content: center;
    }
    .articlepge .article-content {
      flex: 1;
          padding-right: 2rem;  
    }
    .articlepge .article-content h2 {
      font-size: 2rem;
      margin-top: 2rem;
    }
    .articlepge .article-content p {
      margin: 1rem 0;
    }
    /* Quick Links Sidebar – visible on desktop */
    .articlepge .quick-links {
      width: 250px;
      position: sticky;
      top: 70px;
      background: #f4f4f4;
      padding: 1rem;
      border-radius: 5px;
      height: fit-content;
    }
    .articlepge .quick-links h3 {
      margin-top: 0;
      font-size: 1.5rem;
      margin-bottom: 1rem;
            color: #1d2145;
    }

.accordion-toggle h3 {
      margin-top: 0;
      font-size: 1.5rem;
      margin-bottom: 0;
            color: #1d2145;
    text-decoration: none;
    }

    .articlepge .quick-links ul {
      list-style: none;
      padding: 0;
    }
    .articlepge .quick-links li {
      margin: 0.5rem 0;
    }
    .articlepge .quick-links a {
      color: #1d2145;
      transition: color 0.3s ease;
    }
    .articlepge .quick-links a.active {
      color: #d62e49;
      font-weight: bold;
    }
.mobile-quick-links a.active {
      color: #d62e49;
      font-weight: bold;
    }
    /* Mobile Quick Links: a toggle button that shows/hides a horizontal quick links bar */
    @media (max-width: 768px) {
        
.articlepge {    padding-left: 1em;
    padding-right: 1em;}
        .articlepge .menu-area .menu-head {
            width: auto!important;
        }
        .articlepge .article-content {
            padding-right:0;
        }
      .articlepge .content-wrapper {
        flex-direction: column;
      }
      .articlepge .quick-links {
        display: none;
      }
      .articlepge .mobile-quick-links {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 0.5rem;
        border-top: 1px solid #ccc;
        z-index: 1000;
      }
      .articlepge .mobile-quick-links ul {
        display: flex;
        overflow-x: auto;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .articlepge .mobile-quick-links li {
        margin-right: 1rem;
        white-space: nowrap;
      }
      .articlepge .mobile-quick-links a {
        color: #1d2145;
      }
      .articlepge .mobile-quick-links a.active {
        color: #d62e49;
        font-weight: bold;
      }
      /* Optional: a toggle button to show/hide the mobile links */
      .articlepge .quick-links-toggle {
        display: block;
        text-align: center;
        background: #d62e49;
        color: #fff;
        padding: 0.5rem;
        border: none;
        width: 100%;
      }
      .articlepge .mobile-quick-links ul {
        display: none; /* initially hidden */
      }
    }

.articlepge .quick-links a,.articlepge .article-content a {text-decoration: none}
.articlepge .quick-links a::after {
  content: '';
  display: block;
  width: 0%;
  height: 2px;
  background-color: #d62e49;
  transition: width 0.3s ease-in-out;
}

.articlepge .article-content a{color: #d62e49;
    text-decoration: none;
    position: relative;
    display: inline-flex
;
    padding-bottom: 3px;}
.articlepge .article-content a::after {
 content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #d62e49;
    transition: width 0.3s ease-in-out;
}
.articlepge .quick-links a.active::after  {
width:100%;
}

.articlepge .article-content a:hover::after   {
width:100%;
}




    /* Menu area styling (from your provided snippet) */
 .articlepge .menu-area.toogle-sidebar-sections {
      width: 100%;
      background:  #ffffff;
      color: #fff;
      margin-bottom: 1rem;
      border-radius: 4px;
      overflow: hidden;
    }
    .articlepge .menu-area .menu-head {
          padding: 5px 15px;
      position: relative;
        width:250px;
    }
    .articlepge .accordion-toggle {
      
    background: #ffffff;
    color: #ffffff;
    display: flex
;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    }
    .articlepge .accordion-toggle .toggle-icon {
      width:30px;    
      float: right;
      /* The rotate class (from your CSS) rotates the icon */
      transform: rotate(90deg);
      transition: transform 0.3s ease;
    }
    .articlepge .accordion-content {
      overflow: hidden;
      display: none; /* Initially hidden */
    }
    .articlepge .menu-body {
      padding: 10px 0;
    }
    .articlepge .menu-body ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .articlepge .menu-body li {
      margin: 5px 0;
    }
    .articlepge .menu-body a {
      
      transition: color 0.3s ease;
    }
    .articlepge .menu-body a:hover {
      color: #d62e49;
    }

.articlepge .tags-list .tag,.articlepge .categories-list .category {display: inline-block;
    background-color: #1d2145;
    border: 1px solid #1d2145;
    padding: 2px 10px;
 
    text-align: center;
    border-radius: 20px;

    transition: transform 0.3s ease;}

.articlepge .tags-list .tag:hover,.articlepge .categories-list .category:hover{background-color: #fff;
    border: 1px solid #1d2145;}

.articlepge .tags-list,.categories-list{display: flex
;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;}

.articlepge .tags-list .tag a,.articlepge .categories-list .category a{ color: #fff;text-decoration: none;font-size:14px;}
.articlepge .tags-list .tag a:hover,.articlepge .categories-list .category a:hover{color:#1d2145}



 .articlepge p {
      margin-bottom: 1em;
      text-align: justify;
    }
    .articlepge hr {
      border: none;
      border-top: 2px solid #d62e49;
      margin: 2em 0;
    }
    /* Divider style */
    .articlepge .divider {
      border-bottom: 1px solid #ccc;
      margin: 2em 0;
    }
    /* Code block styling */
    .articlepge pre {
      background: #272822;
      color: #f8f8f2;
      padding: 1em;
      overflow-x: auto;
      border-radius: 4px;
      position: relative;
    }
    .articlepge code {
      font-family: "Courier New", Courier, monospace;
      font-size: 0.9em;
        font-weight: 600;
    }
    /* Copy button styling */
    .articlepge .copy-btn {
      position: absolute;
      right: 10px;
      top: 10px;
      background: #d62e49;
      border: none;
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.8em;
    }
    .articlepge .copy-btn:hover {
      background: #b0233e;
    }
    /* Section headings for “Les points à retenir” */
    .articlepge .points-a-retenir {
        background: #eef7f917;
    border-left: 5px solid #d62e49;
    padding: 1em;
    border-radius: 5px;
    margin: 2em 0;
    }
 /* Table styling */
  .articlepge table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
  }
  .articlepge table th,
  .articlepge table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
  }
.articlepge table td {
color:white;
}
  .articlepge table th {
      color:#1e2145;
    background-color: #f4f4f4;
  }
  /* Inline images styling */
  .articlepge img {
max-width: 90%;
    height: auto;
    display: block;
    margin: 2em auto;
    transform-origin: left;
    object-fit: cover;
    border-radius: 5%;
    border: 4px solid #d62e49;
  }

.news .news-h1{    font-size: 5.333rem;
    color: white;
    margin: 2rem 0;}
.articlepge .article-content h3 {
    font-size: 1.5rem;
   
}
.articlepge{padding-top:70px;}

.articlepge .article-footer{ margin: 3em 0; font-size: 0.9em; }



/* Hero header styling */

 .articlepge .hero-header.webp {background: linear-gradient(rgb(0 0 0 / 0%), rgb(29 33 69 / 0%)), var(--bg-image-webp) no-repeat center center / cover;}

 .articlepge .hero-header.jpg {background: linear-gradient(rgb(0 0 0 / 0%), rgb(29 33 69 / 0%)), var(--bg-image-jpg) no-repeat center center / cover;}

.articlepge .hero-header {
    margin-bottom:0.5rem;
  position: relative;
  height: 400px;  /* Adjust height as needed */
   
border-radius: 20px;
  /* Blend the two layers */
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* ensure clipped content isn’t visible */
  /* Use the SVG clip-path to create a wavy bottom edge */
  clip-path: url(#waveClip);
}

/* Semi-transparent overlay for better text contrast */
.articlepge .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);  /* Adjust overlay color/opacity as needed */
  z-index: 1;
}

/* Content container with fade-in effect */
.articlepge .hero-content {
  position: relative;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
  animation-delay: 0.5s;
}

/* Keyframes for fadeInUp animation */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments (optional) */
@media (max-width: 768px) {
    .news .news-h1 {font-size: 2.333rem;}
  .articlepge .hero-header {
    height: 300px;
  }
  .articlepge .hero-content h1 {
    font-size: 1.8em;
  }
}


@media (max-width: 767px) {
    .mobh3link{    margin: 0.5rem 0;}
  .mobile-quick-links {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff1a;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: transform 0.3s ease;
    font-family: sans-serif;
  }
  
  /* Header part */
  .mobile-quick-links .quick-links-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    cursor: pointer;
  }
  
  /* Toggle button (arrow) */
 .mobile-quick-links .toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  /* Rotate arrow when expanded */
  .mobile-quick-links.expanded .toggle-btn {
    transform: rotate(180deg);
  }
  
  /* Collapsed state: hide the content area */
 .mobile-quick-links.collapsed .quick-links-content {
    display: none;
  }
  
  /* Expanded state: show content area with a simple slide-up animation */
  .mobile-quick-links.expanded .quick-links-content {
    display: block;
    max-height: 300px;  /* Adjust as needed */
    overflow-y: auto;
    animation: slideUp 0.3s ease forwards;
  }
  
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* Hide the mobile quick links bar on desktop */
@media (min-width: 768px) {
  .mobile-quick-links {
    display: none;
  }
}

/* Optional: style the list of quick links */
.mobile-quick-links ul {
  list-style: none;
  margin: 0;
  padding: 0 15px 10px;
}
.mobile-quick-links li {
  margin: 5px 0;
}
.mobile-quick-links a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}
.mobile-quick-links a:hover {
  color: #d62e49;
}
.expanded {background-color:#1d2145eb;color:white}

/* Image Preview Modal */
#image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#image-preview-modal.active {
  display: flex;
}

.image-preview-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.image-preview-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview-container img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

/* Close Button */
#close-preview {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#close-preview:hover {
  background: rgba(255, 255, 255, 1);
}


/* Overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  z-index: 1000;
    
  opacity: 0; /* For GSAP animation */
}

/* Extra top padding on mobile so the cross is visible */
.mobile-overlay {
  padding-top: 60px;
}

/* Close Button */
.search-close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
  z-index: 1010;
}

/* Adjust close button position on mobile if needed */
@media (max-width: 768px) {
  .search-close-button {
    top: 0px;
  }
    .search-overlay {
        align-content: flex-start;
    }
    .search-result-content h3{text-align: center}
}

/* Search Result Card */
.search-result-card {
  width: 300px;
  height: 300px;
  margin: 10px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}

.search-result-card:hover {
  transform: scale(1.03);
}

/* Mobile adjustments for the card */
.mobile-card {
  width: 90%;
  height: 200px;
}

/* Thumbnail Image */
.search-result-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .search-result-img {
    height: 100px;
  }
}

/* Content container for the article title */
.search-result-content {
  padding: 10px;
  height: calc(100% - 200px);
}

@media (max-width: 768px) {
  .search-result-content {
    height: calc(100% - 100px);
  }
}

/* Error / No Result message */
.search-error {
  color: #fff;
  font-size: 1.2rem;
}

.no_article{color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
    font-style: italic;}

.news-section hr {
    border: none;
    border-top: 2px solid #d62e49;
    margin: 2em 0;
}

.news-section div {
    margin: 1rem 0;
        text-align: justify;
        color: #eeeef2;
}

.news-section a {
    color: #d62e49;
    text-decoration: none;
    position: relative;
    display: inline-flex
;
    padding-bottom: 3px;
}

.news-section a::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #d62e49;
    transition: width .3s ease-in-out;
}

.news-section a:hover::after {
      width: 100%;
    }

.news-title{padding-top:2rem}

@media (max-width: 768px) {
 .news-title{padding-top:0rem}
}