/* for the news page  */

#news-section {
    width: 100%;
    background: var(--theme-color-light);
    padding: 60px 40px;
}

.news-title {
    text-align: left;
    font-size: 42px;
    margin-bottom: 25px;
    font-weight: 700;
}

.news-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 35px;
}

.filter-btn {
    padding: 10px 18px;
    background: var(--theme-color-black);
    color: var(--theme-color-light);
    border: none;
    cursor: pointer;
    border-radius: 6px;
}

.filter-btn.active {
    background: var(--ssc-orange);
}

#search-input {
    padding: 10px 16px;
    border: 1px solid #ccc;
    width: 240px;
    border-radius: 6px;
}

.news-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

.news-card {
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.news-card h3 {
    padding: 12px 0px 0px;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: -10px;
}

.news-card p {
    font-size: 16px;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}


/* another */


/* Filters */
.news-filters {
    width: 100%;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;

    background: var(--theme-color-light);
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
}

.news-filters input {
    padding: 10px 15px;
    font-size: 16px;
    width: 260px;
    min-width: 200px;

    border: 1px solid #ccc;
    border-radius: 6px;
}

.news-filters select {
    padding: 10px 15px;
    font-size: 16px;
    width: 200px;
    min-width: 160px;

    border: 1px solid #ccc;
    border-radius: 6px;
}

/* GRID */
.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    width: 100%;
    padding: 20px 40px;
    box-sizing: border-box;
}

/* CARD */
.news-card {
    position: relative;
    overflow: hidden;
    background: var(--theme-color-light);
    cursor: pointer;
    border-radius: 4px;
    height: 380px;
}

/* IMAGE */
.news-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

/* Hover zoom only on image */
.news-card:hover .news-img img {
    transform: scale(1.12);
}

/* CONTENT BOX */
.news-info {
    position: absolute;
    bottom: 0;
    width: 90%;
    background: var(--theme-color-light);
    padding: 20px;
}

.tag {
    font-size: 13px;
    font-weight: bold;
    color: var(--theme-color6);
}

.title {
    font-size: 24px;
    font-weight: 700;
    margin: 8px 0;
    color: var(--headings-color);
}

a:hover, a:focus {
    color: var(--headings-color);
}

.date {
    font-size: 14px;
    opacity: 0.6;
}


/* Button */
.news-filters button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
}

/* .news-filters button:hover {
    background: #0056c1;
} */
/* filter ,category, search  */

.news-filters {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    flex-wrap: wrap; 
}

.news-filters input,
.news-filters select {
    padding: 10px 15px;
    font-size: 15px;
    min-width: 220px;     
    flex: 1;              
    max-width: 300px;     
}

#filterBtn {
    padding: 10px 20px;
    font-size: 15px;
    /* background: #e70000; */
    border: none;
    color: var(--theme-color-light);
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}


.news-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 18px 52px;
  background: transparent; 
  border-bottom: 0; 
}

/* Category pills */
.category-pills {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.cat-pill {
  background: var(--theme-color-black);
  color: var(--theme-color-light);
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: all .18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.cat-pill:hover { transform: translateY(-2px); }

/* active pill style */
.cat-pill.active {
  background: var(--ssc-orange-color); /* orange active */
  color: var(--theme-color-light);
  box-shadow: 0 6px 18px rgba(244,129,32,0.18);
}

/* controls container */
.filters-controls {
  display: flex;
  gap: 12px;
  margin-left: auto; 
  align-items: center;
}

/* Search input */
#newsSearch {
  min-width: 320px;
  max-width: 520px;
  width: 36vw;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}

/* select */
#newsCategory {
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: var(--theme-color-light);
  font-size: 14px;
}
.apply-btn:hover { transform: translateY(-2px); }

/* Responsive: stack controls on small screens */
@media (max-width: 880px) {
  .filters-controls { width: 100%; margin-left: 0; justify-content: flex-start; }
  #newsSearch { width: 100%; min-width: 0; }
  #newsCategory { width: 160px; }
}


/* for title  */

.news-section-title {
    text-align: center;
    padding: 80px 0;
}

.news-section-title h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* for date and tag  */
.meta-row .date {
    font-size: 14px;
}

html body footer.main-footer.footer-style-three.pt-100 div.container div.widgets-section div.row.g-5.g-xl-0 div.col-lg-4.footer-column div.footer-widget.about-widget div.widget-content div.input-feild button i.fa-regular.fa-arrow-up-right,
html body footer.main-footer.footer-style-three.pt-100 div.container div.footer-bottom button.goTop-btn i.fa-solid.fa-angles-up{
    color: var(--theme-color-light);
}

.nice-select .current {
  font-size: 18px;
}

.nice-select .option {
    font-size: 17px;
}

.meta-row span.sub-title{
    font-size: 19px !important;
    color: var(--theme-color6) !important;
}