@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: #333;
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

a {
  color: #4b03f3;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #2c2c2c;
  text-decoration: none;
}



/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/


.header_menu {
  background: #f2f2f2;
  border-bottom: 1px solid #fff;
  padding: 5px 0;
  position: relative;
}

.header_menu a {
  color: #4b03f3;
  text-decoration: none;
  transition: 0.3s;
}


.header_menu a:hover {
  color: #2c2c2c;
  text-decoration: none;
}


.canvas-sidebar .fa{font-size: 25px; cursor: pointer; transition: 0.3s; line-height: 30px; padding-top:6px;}

.offcanvas_sidebar {    gap: 4rem;
  height: 100dvh;
  width: 100%;
  padding: 2rem 2rem 4.5rem;
  background: #f2f2f2;
  transition: all .3s ease;}

  .offcanvas_sidebar .offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal {
    background: rgba(0, 0, 0, 0.8)!important;
    --bs-modal-bg: #4a4a4a8c!important;
    
  }


  .search_modal .header-search { width: 100%; padding: 1rem 0;}    
  
 
 

  .modal-fullscreen .modal-body {
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @media (min-width: 1024px) {
    .header-search .search-input {
        font-size: 4rem;
        padding: 0 1rem 2rem 6rem;
    }
}

.header-search {
  position: relative;
}





.header-search input#js-search-input:focus {outline: none;}

.header-search .search-form::before {
  content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    z-index: 9999999;
    color: #e2e2e2;
    position: absolute;
    top: 25px;
    color: #e01a4f;
    top: 21px;
    /* left: 0; */
    font-size: 35px;
}


.header-search .search-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #e2e2e2;
  cursor: pointer;
  transition: 0.3s;
}

.header-search .search-icon:hover {
  color: #e01a4f;
}

.search_modal .btnclose {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: #ffffff;
  cursor: pointer;
  background: transparent;
}
.search_modal .btnclose:hover {
  color: #e01a4f;
}

.search_modal .modal-header {border:none}

.header-search .search-input::placeholder {
  color: #e2e2e2;
  font-weight: 400;
  font-size: 4rem;
}
.header-search .search-input {
  font-weight: 400;
  border-top:0px; 
  border-left:0px;
  border-right:0px;
  color: #e2e2e2;
  width: 100%;
  height: 100%;
  padding: 0 1rem 1.5rem 4rem;
  background: none;
  border-bottom: 2px solid #e01a4f;
}

/*  second menu  */

.secondmenu {background: #000; padding: 1rem 0; position: relative; z-index: 1;}
.secondmenu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.secondmenu a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
} 
.secondmenu a:hover {
  text-decoration: underline;
  transition: 0.3s;
  color: #e01a4f;
}
.secondmenu ul li.title{color:#e01a4f; font-size: 1rem; font-weight: 600; margin-right:0.5rem;} 

.secondmenu ul li:before{font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f111";
    font-size: 0.5em;
    margin-right: 0.5rem;
    color: #e01119;}

/* sidebar nav */




.offcanvas-body {
  overflow-y: auto;
  scrollbar-width: none; /* For Firefox */
  

}


.sidebarnav .navbar-nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-content: center;
  justify-content: flex-start;
}

.sidebarnav .nav-link {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: space-between;
      padding:0px;
      font-family: Titillium Web, sans-serif;
      font-size: 1.5rem;
      font-weight: 400;
      color: #20232b;
      text-transform: uppercase;
      transition: all .3s ease;
}

.sidebarnav  .dropdown-toggle::after {
  display: none;
}

.sidebarnav .nav-link:hover {
  transition:0.3s;
  color:#e20040
}

.sidebarnav .plus-icon {
  display: inline-block;
  margin-left: 5px;
  color:#e20040;
  font-size: 1.5rem;
font-size: 38px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  
  transform: rotate(0);
  transition: all .3s ease;
}

.sidebarnav .rotate {
  transform: rotate(45deg);
}

.sidebarnav .dropdown-menu .dropdown-item {padding: 5px 0px; font-size: 14px; color:#e20040; font-weight: 600; letter-spacing: 0.5px;}
.sidebarnav .dropdown-menu .dropdown-item:hover{background: transparent; color:#000; font-weight: 600; letter-spacing: 0.5px; transition:0.3s;}

.sidebarnav .dropdown-menu {
  display: none;
  width: 100%;
  display: none;
  padding:0px;
  flex-direction: column;
  gap: 1rem;
  background: transparent;
  margin-block-start: 1rem;
  transition: all .5s ease;
  border: none;
}

.sidebarnav .dropdown-menu.show {
  position: relative;
  display: block;
  animation: slideDown 0.3s ease forwards;
}


@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
      display: block!important;
      flex-basis: auto;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




/* main-section */


.news-card {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
    }

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

    .news-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 1rem;
      background: linear-gradient(to top, rgb(0 0 0), rgba(0, 0, 0, 0));
      color: #fff;
    }

    .news-card img:hover .news-overlay {
      background: linear-gradient(to top, rgb(61, 61, 61), rgba(0, 0, 0, 0));
    }
    .news-card:hover .news-overlay {
      background: linear-gradient(to top, rgb(61, 61, 61), rgba(0, 0, 0, 0));
    }

    .badge-custom {
      background-color: #4CAF50;
      font-size: 0.75rem;
      margin-bottom: 0.5rem;
      display: inline-block;
    }

    .news-title-big, .news-title {margin-bottom: 0px;}

    .news-title-big a{ font-size: 1.5rem !important;
      color:#fff;
      font-weight: bold;
      margin: 0;}

    .news-title a {
      font-size: 1rem !important;
      color:#fff;
      font-weight: bold;
      margin: 0;
    }

    @media (max-width: 767.98px) {
		.single-post .social-actions{    justify-content: flex-start!important;
    align-items: center!important;
    flex-wrap: inherit!important;}
		
		.single-post .social-actions button{padding:5px 9px!important;}
		.single-post .post-banner .single-overlay h1 a{font-size:1.4rem!important;}
		.single-post .post-banner .single-overlay h1{line-height:26px!important;}
		
      .news-title {
        font-size: 0.9rem;
      }
    }





    /* slider or category */

  

.video-carousel .item {
  position: relative;
}
.video-carousel .item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.video-carousel .item .video-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  z-index: 9;
}
.video-carousel .item .play-icon {
  position: absolute;
  top: 40%;
  left: 10%;
  font-size: 3rem;
  color: white;
  transform: translate(-50%, -50%);
}

.video-carousel .item span.badge:hover{
  background-color: #f2f2f2;
  color: #333;
  transition: 0.3s;
}



.video-carousel .item span.badge {
  background-color: transparent;
  font-size: 0.75rem;
  padding:6px 12px;
  color:#f2f2f2;
  border:1px solid #f2f2f2;
  border-radius: 5px;

  margin-top: 0.5rem;
  margin-bottom: 0.5rem;

  display: inline-block;
  
}
.video-carousel .item .caption h6 {
  color:#f2f2f2;
  font-size: 1.5rem;
  margin: 0;
}
.video-carousel .item .caption h6 a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}
.video-carousel .item .caption h6 a:hover {
  text-decoration: underline;
  transition: 0.3s;
  color: #e01a4f;
}

.video-carousel .item:hover::after{  background: linear-gradient(to top, rgba(56, 56, 56, 0), rgba(173, 173, 173, 0)) ;}


.video-carousel .item {position:relative; border-radius: 10px;}
.video-carousel .item:after {
  position: absolute;
  bottom: 0;
  height:100%;
  top:0px;
  left: 0;
border-radius: 10px;
  content: '';

  display: block;

  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.253), rgba(95, 95, 95, 0.13));
}

.video-carousel .owl-nav {    position: absolute;
  z-index: 3;
  bottom: .5rem;
  right: .5rem;
  display: flex;
  gap: .2rem;
  flex-flow: row nowrap;}

  .video-carousel .owl-nav .owl-prev, .video-carousel .owl-nav .owl-next {
    background: #f1f1f1!important;
    color: #333333!important;
    width: 40px;
    height: 40px;
    font-size:25px;
    font-size: 20px;
    transition: all .3s ease;
  
  }
  .video-carousel .owl-nav .owl-prev fa, .video-carousel .owl-nav .owl-next fa {
    font-size: 25px;
  }
  .video-carousel .owl-nav .owl-prev:hover, .video-carousel .owl-nav .owl-next:hover {
    background: #020202!important;
    color: #fff!important;
    transition: all .3s ease;
  }


  /* thread */


  .threads-section {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
  }

  .threads-section h5 {
    font-weight: bold;
  }

  .tab-content .thread-item:nth-child(odd) {
    background: #f2f2f2;
  }
 
  .thread-item:hover {
    background: #f2f2f2;
    transition: all .3s ease;
  }
  .thread-item:hover {
    background: #f2f2f2;
    transition: all .3s ease;
  }

  .thread-item {
    border-bottom: 1px solid #f2f2f2;
    padding: .5rem;
  }

  .thread-item p {    -webkit-line-clamp: 1;
    -moz-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
  }

  .thread-item:last-child {
    border-bottom: none;
  }

  .thread-item .avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
  }

  .news-section .tab-content{border:1px solid #f2f2f2; border-radius:5px;}
  .topic-box {
position:relative;
    border-radius: 10px;
    color: white;
    font-weight: bold;
  }

  .homepage-threads-list .display-card.article-thread:nth-child(odd) {
    background: #f2f2f2;}


  .topic-box .topic_text h5{margin-bottom: 0px;}
  .topic-box .topic_text p{margin-bottom: 0px;}
  .topic-box .topic_text h5 a {    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    font-family: Titillium Web, sans-serif;
    text-transform: uppercase;}

  .topic-box .topic_text {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #fff;
    padding: 0.7rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 70%, transparent);
    z-index: 9;

  }

  .topic-box img {
    width: 100%;
    border-radius: 10px;
  }

  .stat-box {
    font-size: 0.9rem;
  }

  .stat-box i {
    color: #333;
    font-size: 0.7rem;
  }

  .thread-meta {
    font-size: 0.8rem;
    color: gray;
  }

  .badge-custom {
    background-color: #eaeaea;
    color: #333;
    font-size: 0.7rem;
  }

  .nav-tabs .nav-link:hover{border:none;}
  .nav-tabs .nav-link {color:#777; padding:0px; }




  .nav-tabs .nav-link.active {
    font-weight: bold;
    border:none;
    color: #dc3545;
  }

  .nav-tabs .nav-link {
    font-size: 1.125rem;
    font-weight: 700;
    color: #777;
    font-family: Titillium Web, sans-serif;
    text-transform: uppercase;
    margin-bottom: .25rem;
    padding:0px 10px;
  }

  #threadTabs #popular-tab {
    margin-bottom: 10px; border-radius: 0px; border-right:2px solid #777;}



  .news-section .head_threads{ padding: .5rem 1rem;
    background-color: #f2f2f2;
    border-radius: 8px;
    gap: 1rem;
    height: -moz-fit-content;
    height: fit-content;}

    .section-header {
      position: relative;
      margin-bottom: 1rem;
      border-bottom: 2px solid #e9e9e9;
      padding-bottom: .25rem;
      border-radius: 4px;
      display: flex
;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%;
    margin-bottom: 20px;
  }

  .section-view-all-link {
    position: relative;
    display: inline-flex
;
    align-items: center;
    font-size: .75rem;
    font-weight: 700;
    color: #777;
    font-family: Titillium Web, sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    background: #f2f2f2;
    padding: 2px .75rem;
    border-radius: 15px;
}

.news-post .card-body{    padding: .75rem;}

.news-post .card-body .card-title a {font-size: 1rem !important; color:#000; line-height: 1.2; margin-bottom: .75rem; overflow: hidden;
  display: -webkit-box; font-weight: 600;}

.news-post .card{    overflow: hidden;
  background: #f2f2f2;
  padding: 0;
  border-radius: 8px;
  border: none;}


  .news-post .card-body .meta-detail {
    display: flex;
    align-items: end;
    margin-bottom: 1rem;
  }
  .news-post .card-body .meta-detail ul{
    width: 100%;
    overflow: hidden;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  
  
  .news-post .col-md-3 {
    display: flex;
  }



/* latest news */


.latest-news .section-header {display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      position: relative;
      margin-bottom: 1rem;
      border-bottom: 2px solid #e9e9e9;
      padding-bottom: .25rem;
      border-radius: 4px;
      justify-content: space-between;
    align-items: center;
    width: 100%;
      border-top: 0 solid #e9e9e9;}

  .latest-news .section-header .listing-tabs {display: flex; justify-content: flex-end; }

  .latest-news .section-header .listing-tabs .nav.nav-tabs {border-bottom: 0px;}

  .latest-news .section-header .listing-tabs .nav.nav-tabs .nav-link {   
    padding: .5rem .35rem .25rem;
    text-decoration: none;
    cursor: pointer;
    margin-right: 8px;
    position: relative;
    background-color: #fff;
    text-align: center;
    text-wrap: nowrap;
    border-radius: 8px;
    border: 1px solid #d3d3d3;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    font-family: Titillium Web, sans-serif;
    text-transform: uppercase;}

    .latest-news .section-header .listing-tabs .nav.nav-tabs .nav-link.active {background-color: #d3d3d3;
      color: #181818;}


      .latest-news .section-header h2.section-title {border-bottom: 0 solid #181818;
        border-top: 0 solid #181818;
        padding-top: .5rem;
        font-style: italic;
        display: inline-block;
        font-size: 1.5rem;
        font-weight: 700;
        color: #333;
        font-family: Titillium Web, sans-serif;
        text-transform: uppercase;}

        .latest-news .post-card {background: #fff;
          padding: 1rem;
          border-radius: 8px;
          border: 1px solid #e2e2e2;
          margin: 0;}

          .latest-news .post-card .post-img {    position: relative;}

          .latest-news .post-card .post-img:before{    position: absolute;
            left: 0;
            bottom: 0;
            z-index: 2;
            width: 100%;
            height: 50%;
            display: block;
            content: "";
            background-color: #181818;
            border-radius: 0 0 4px 4px;
            background: linear-gradient(0deg, #181818, #181818 10%, rgba(24, 24, 24, 0) 90%);}


            .latest-news .post-card .post-img img {    aspect-ratio: 360 / 240;}
         .latest-news .post-card .post-img .category-badge {position: absolute;
          bottom: 1.5rem;
          top: auto;
          left: 1rem;
          z-index: 3;}   

          .latest-news .post-card .post-img .category-badge a{    color: #fff;
            border-color: #fff;
            opacity: .8;                      
            padding: 6px 12px;
            background: rgba(0, 0, 0, .3);
            border: 1px solid #b6b4b5;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            transition: all .3s ease;
            font-family: Titillium Web, sans-serif;
            font-size: .75rem;
            font-weight: 700;}

            .latest-news .post-card .post-heading h2 a:hover{text-decoration: underline;}
            .latest-news .post-card .post-heading h2 a{color:#181818;}
            .latest-news .post-card .post-heading h2{font-size: 28px;
              -webkit-line-clamp: 3;
              -moz-line-clamp: 3;
              overflow: hidden;
              font-family: Titillium Web, sans-serif;
              
              font-weight: 700;
              color: #181818;
              margin: 0 0 .75rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              line-height: 1.2;
          }

          .latest-news .post-card .descroption p{margin-bottom: 0px;}
          .latest-news .post-card .descroption:before{display: block;
            vertical-align: middle;
            width: 2rem;
            height: .25rem;
            content: "";
            margin-bottom: .25rem;
            background: #157bda;}

            .latest-news .post-card .post-meta {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              font-size: 0.875rem;
              color: #777;
              font-family: Titillium Web, sans-serif;
            }

            .latest-news .post-card .post-meta ul {
              display: inline-flex;
              padding-left: 0px;
              margin-bottom: 0px;
              list-style: none;
              align-items: center;
              gap: 0.75rem;
            }

            .latest-news .post-card .post-meta li  {
              
              color: #777;
            }

            .latest-news .post-card .post-meta li a {
              
              color: #181818;
            } 
            .latest-news .post-card .post-meta li a:hover {
              color: #e01a4f;
              transition: 0.3s;
            }
            



        
          .latest-news .post-card .row {
            display: flex;
            flex-wrap: wrap;
          }
          
          .latest-news .post-card .col-md-8 {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          
          .latest-news .latest-news .post-card {    margin-bottom: 1rem;}
       
          
         
          
          .latest-news .post-card .category {
            margin-top: auto;
          }


          .see-more-btn {        margin: 0 auto 3rem;}
       .see-more-btn .cta-btn{    display: flex;
            align-items: center;
            justify-content: center;
            margin: 1rem auto;
            border-radius: 8px;
            font-family: Titillium Web, sans-serif;
            font-size: 1.2rem;
            line-height: 1.3em;
            font-weight: 700;
            
            color: #333;
            text-transform: uppercase;
            background: #fff !important;
            width: 50% !important;
            border: 1px solid #777;
            line-height: 1em;
            padding: 1rem 0;}
            

            /* latest news sidebar */


            
            .tab-section {
             
              border-radius: 8px;
            }
        
            .tab-buttons {
              display: flex;
              background: #f2f2f2;
              
              border-bottom: 3px solid #ccc;
            }
        
            .tab-buttons button {
              flex: 1;
              border: none;
              background: transparent;
              border-top: 6px solid #d61d59;
              font-weight: bold;
              padding: .5rem 1rem;
              color: #555;
              transition: all 0.3s ease;
            }
        
            .tab-buttons button.active {
              color: #000;
              width: 100%;
              text-align: center;
              font-weight: bold;
              padding: .5rem 1rem;
              background-color: #d3d3d3;
              border-top: 6px solid #777;             
              color: #000;
            }
        
            .tab-content-custom {
              display: none;
              padding-top: 1rem;
              background-color: #f2f2f2;
              padding: 1rem;
            }
        
            .tab-content-custom.active {
              display: block;
              background-color: #f2f2f2;
    padding: 1rem;
            }
        
            .review-item {
              display: flex;
              margin-bottom: 1rem;
            }
        
            .review-item img {
              width: auto;
              height: 60px;
              object-fit: cover;
              border-radius: 5px;
              margin-right: 10px;
            }
        
            .review-item h6 {margin: 0px;}
            .review-item h6 a{
              font-size: 0.9rem;
              font-weight: 700;
              margin: 0;
              color: #181818;
            }
        
            .review-item small {
              font-size: 0.75rem;
              color: #666;
            }
        
            .see-more {
              display: block;
              width: 100%;
              background-color: #d61d59;
              color: #fff;
              border: none;
              padding: 8px;
              font-weight: bold;
              border-radius: 6px;
              text-align: center;
              margin-top: 10px;
              text-decoration: none;
            }
        
            .trending-title {
              font-style: italic;
              font-weight: bold;
              margin: 2rem 0 1rem;
              border-bottom: 1px solid #ccc;
            }
        
            .trending-item a{margin:0px; color:#181818; font-weight: 700;}
            .trending-item {
              display: flex;
              margin-bottom: 1rem;
            }
        
            .trending-item img {
              width: auto;
              height: 60px;
              object-fit: cover;
              border-radius: 5px;
              margin-right: 10px;
            }
        
            .trending-item p {
              font-size: 0.9rem;
              font-weight: 600;
              margin: 0;
              color: #000;
            }
          
            .sidebar .trending-post{position: sticky; top:50px;}
         
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.site-footer {
  background-color: #111;
  color: #fff;
  padding: 30px 20px 20px;
  font-size: 14px;
}

.site-footer a {
  color: #ccc;
  margin: 0 5px;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
}

.social-icons {
  display: flex;
    align-items: center;
  margin-top: 10px;
}

.social-icons i {
  font-size: 18px;
  margin-right: 12px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.social-icons i:hover {
  color: #d61d59;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid #333;
  padding-top: 15px;
  font-size: 13px;
}

@media screen and (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }
}

/* .footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}


.footer .footer-top {
  padding-top: 50px;
}


.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid rgba(51, 51, 51, 0.1); 
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
} 



.footer .credits a {
  color: var(--accent-color);
  font-weight: 500;
} 


*/

@media (min-width: 1024px) {
  .latest-news, .news-post, .news-section, .hero-section, .category {
      padding: 0 3rem;
  }
}

@media (min-width: 992px) {
  .header_menu .navbar-expand-lg .navbar-nav {
      flex-direction: row;
      justify-content: flex-end!important;
  }


  
}

@media (max-width:991px){
  .secondmenu{display: none;}

}


.category {padding-top: 3rem;
  padding-bottom: 1rem;}

  .category .main-title h1{font-size: 2.7rem; 
    display: flex;
        align-items: center;
        justify-content: left;
        gap: 1rem;
        font-weight: 700;
        color: #343434;
        font-family: Titillium Web, sans-serif;
        line-height: 1;
        text-transform: none;}

.category .main-title .listing-title-rss-link{font-size: 1.3rem;
  color: #e01a4f;
  font-weight: 900;}        
  .category .main-title {    display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 2rem;}

.category .main-title .follow-btn  a{color:#181818;}
.category .main-title .follow-btn {    display: flex;
  font-size: 1rem;
  font-weight: 700;
  color: #181818;
      position: relative;
      align-items: center;}        



      .category .listing-description {    border-bottom: 4px solid #e8e8e8; padding-bottom: 1.5rem;}
      .category .listing-description p  {
        overflow: hidden;
        -webkit-box-orient: vertical;
        width: 100%;
        max-width: 960px;
        margin: 1rem 0 0;
        font-size: 1.2rem;
        font-weight: 400;
        color: #343434;
        font-family: Titillium Web, sans-serif;
        line-height: 1.3em;
        text-align: left;}

        .category .listing-description .description{font-family: Titillium Web, sans-serif;
          font-size: .85rem;
          line-height: 1.5em;
          font-weight: 400;
          display: block;
          opacity: .75;
          text-align: left;
          font-style: italic;}



          /* single post */


          .single-post .post-banner .single-overlay h1 a{color:#fff; font-weight: 700; font-size: 3.125rem;}
          .single-post .post-banner .single-overlay{ 
            position: absolute;
            background: linear-gradient(0deg, #181818, rgba(24, 24, 24, 0));
            bottom: 0px;
            left: 0px;
            padding: 4rem 1rem 1rem;
            right: 0px;}
.single-post .post-content a {border-bottom: 2px solid #ccc; color:#333; font-weight: 500;}
.single-post .post-content a:hover{transition: 0.3s; background: #ccc; color:#fff;}

            .single-post .post-info{    display: flex;
                  justify-content: space-between;
                  padding-bottom: 25px;
                  flex-wrap: wrap;}


            .single-post .post-info .singl-epost-heading {
              display: flex;
              gap: 15px;
              flex-wrap: wrap;
              margin-top:15px;
              justify-content: start;
              align-items: center;
      
            }
        
            .single-post .post-info .btn-fab {
              display: flex;
              background: transparent;
              border:0;
              align-items: center;
              gap: 6px;        
              font-size: 14px;
              transition: 0.2s ease;
            }
        
            .single-post .post-info .btn-fab i {
              font-size: 16px;
            }
        
          
            .single-post .post-info  .badge.ms-2 {
              font-size: 12px;
              padding: 4px 8px;
              background-color: #333;
            }

          

            .single-post .post-info .post-meta {
              margin-top: 20px;
              font-size: 14px;
              color: #555;
            }

            .single-post .post-info .post-meta ul {
              list-style: none;
              padding: 0;
              margin: 0;
              display: flex;
              gap: 15px;
              align-items: center;
            }

            .single-post .post-info .post-meta ul li {
              display: flex;
              align-items: center;
            }

            .single-post .post-info .post-meta ul li img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              margin-right: 8px;
            }

            .single-post .post-info .post-meta ul li a {
              color: #181818;
              font-size: 0.75rem;
              font-weight: 700;
              text-decoration: none;
            }

            .single-post .post-info .post-meta ul li a:hover {
              text-decoration: underline;
            }



            .single-post .post-content p, .single-post .post-content {
              margin-bottom: 0.5rem; 
              font-family: calibri;
              font-size: 18px;
              line-height: 1.6em;
              text-align: left;
              font-weight: 400;
              color: #333;}
.single-post .post-content ol, ul {
    padding-left: 1rem!important;
}

.single-post .post-content ul li, .single-post .post-content ol li{    margin-bottom: 0.5rem;
    font-family: calibri;
    font-size: 18px;
    line-height: 1.6em;
    text-align: left;
    font-weight: 400;
    color: #333;}



              .single-post .post-content h2{font-size: 2rem;}
              .single-post .post-content h3{font-size: 1.5rem;}

              .single-post .post-content h2, .single-post .post-content h3 {    line-height:auto;
                font-weight: 800;
                margin-bottom: 0.5rem;
                color: #333;}


                .single-post .article-tags .article-tags-list {
                  display: flex;
                  flex-flow: row wrap;
                  list-style: none;
                  padding-left:0px;
                  gap: .5rem;
                  justify-content: center;
              }

              .single-post .article-tags .article-tags-list .tags-link {
                display: grid;
                grid-template-columns: auto 1fr;
                grid-template-areas: "tag-image tag-name";
                gap: .5rem;
                align-items: center;
                width: -moz-fit-content;
                width: fit-content;
                background: #f2f2f2;
                border-radius: 4px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                overflow: hidden;
                transition: all .3s ease;
            }

            .single-post .article-tags .article-tags-list .tags-link .article-tags-img {
              grid-area: tag-image;
              width: 32px;
              height: 32px;
          }

          .single-post .article-tags .article-tags-list .tags-link .article-tags-name {
            grid-area: tag-name;
            font-family: Titillium Web, sans-serif;
            font-size: .75rem;
            font-weight: 700;
            color: #777;
            -webkit-line-clamp: 1;
            -moz-line-clamp: 1;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            max-width: 15ch;
            padding-right: .5rem;
        }

        .single-post .article-tags .article-tags-list .tags-link:hover {
          opacity: .75;
      }


      /* thread and share */


      .single-post .social-actions {
        padding-top:20px;
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
      }
      
      .single-post .social-actions button {
        padding: 5px 25px;
        border-radius: 0px;
        border-right: 1px solid #777!important;
        border:0;
        font-weight: 700;
        background: transparent;
        font-size: 14px;
        
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      
      .single-post .btn-like {
        background-color: #f0f2f5;
        color: #65676b;
      }
      
      .single-post .btn-like:hover {
        color: #d61d59;
      }
      
      .single-post .btn-follow {
        background-color: #f0f2f5;
        color: #65676b;
      }
      
      .single-post .btn-follow:hover {
        color: #d61d59;
      }
      
      .single-post .btn-share {
        background-color: #f0f2f5;
        color: #65676b;
      }
      
      .single-post .btn-share:hover {
        color: #d61d59;
      }
      
      .single-post .share-dropdown {
        position: relative;
        display: inline-block;
      }
      
      .single-post .share-menu {
        position: absolute;
        bottom: 100%;
        left: 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 8px 0;
        min-width: 180px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.2s ease;
      }
      
      .single-post .share-dropdown:hover .share-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      
      .single-post  .share-option {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        color: #050505;
        text-decoration: none;
        transition: all 0.2s ease;
      }
      
      .single-post .share-option:hover {
        background-color: #f2f3f5;
      }
      
      .single-post .share-option i {
        width: 20px;
        text-align: center;
        margin-right: 12px;
        font-size: 16px;
      }
      
      .single-post .facebook i { color: #1877f2; }
      .single-post .twitter i { color: #1da1f2; }
      .single-post .linkedin i { color: #0a66c2; }
      .single-post .email i { color: #65676b; }
      .single-post .link i { color: #65676b; }
      
      .single-post .divider {
        height: 1px;
        background-color: #ddd;
        margin: 8px 0;
      }

      .single-post .affilate p  a{color:#414141; text-decoration: underline;}
      .single-post .affilate p {    font-family: Titillium Web, sans-serif;
        font-size: .85rem;
        line-height: 1.5em;
        color:#000;
        padding:20px 0px;
        letter-spacing: 0.5px;
        margin-bottom: 0px;
        font-weight: 400;
        display: block;
        opacity: .75;
        text-align: left;
        font-style: italic;}

        /* recent post */

        
        .recent-post h2.title{    position: relative;
          display: flex;
          gap: .5rem;
          align-items: baseline;
          margin-bottom: 1rem;
          font-size: 1.5rem;
          font-weight: 700;
          color: #333;
          font-family: Titillium Web, sans-serif;
          text-transform: uppercase;}


        .recent-post .card{padding: 1rem;
          background: #f2f2f2;
          border: transparent;
          border-radius: 8px;          
          margin: 0;}  

        .recent-post .card-img-overlay {
          background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
          padding: 0.5rem;
        }
        .recent-post .badge-custom {
         border:1px solid #fff;
          color: #fff;
          font-size: 0.75rem;
          background: transparent;
          padding: 0.25em 0.5em;
          border-radius: 4px;
        }
        .recent-post .card-body .card-title a:hover{text-decoration: underline; transition: all ease-in-out 0.3s;}
        .recent-post .card-body .card-title a{color: #181818;}
        .recent-post .card-body .card-title {
          font-family: Titillium Web, sans-serif;
          font-size: 1.25rem;
          
          margin-bottom: 20px;
          font-weight: 700;
          color: #181818;
          
        }
        .recent-post .card-body .card-subtitle {
          font-size: .875rem;
          margin-bottom: 1rem;
          font-family: Roboto, sans-serif;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }


        .recent-post .card-body .card-subtitle:before {display: block;
          vertical-align: middle;
          width: 2rem;
          height: .25rem;
          content: "";
          margin-bottom: .25rem;
          background: #157bda;}


        .meta-info {
          font-size: 0.75rem;
          color: #6c757d;
        }


        .page-content h1{font-family: Roboto, sans-serif; font-size: 2.5rem; margin-top: 2rem; margin-bottom: 2rem; font-weight: 700; color:#101010;}
        .page-content .post-content p{    font-family: Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #333;
    line-height: 1;
    line-height: 1.5em;
    margin-bottom: 1rem;
    text-align: justify;}
    .page-content .post-content a:hover{transition: 0.3s; background: #e56c2c; color:#fff;}
    .page-content .post-content a{font-weight: 700;
    color: #333;
    font-weight: 600;
    border-bottom: 2px solid #e56c2c;
    text-decoration: none;}




    /* contact */

    /* Gradient heading */
.text-gradient {
  background: linear-gradient(45deg, #d61d59, #ff6f91);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glass effect cards - 3D look */
.glass-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1),
              0 15px 35px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(214, 29, 89, 0.1);
}

.glass-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 40px rgba(214, 29, 89, 0.25),
              0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Inputs */
.custom-input {
  border-radius: 12px;
  border: 1px solid #ddd;
  padding: 10px 13px;
  transition: all 0.3s ease;
  background: #fff;
}

.contact-info p i{color:#d61d59; margin-right: 8px;}
.contact-info p{    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 13px 12px;
    margin-bottom: 0px;
    border-radius: 10px;
    border: 1px solid #d61d59;}
.custom-input:focus {
  border-color: #d61d59;
  box-shadow: 0 0 10px rgba(214, 29, 89, 0.4);
  outline: none;
}

/* Gradient button */
.btn-gradient {
  background: linear-gradient(45deg, #d61d59, #ff6f91);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 15px rgba(214, 29, 89, 0.25);
  transition: all 0.35s ease;
}

.btn-gradient:hover {
  background: linear-gradient(45deg, #ff6f91, #d61d59);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(214, 29, 89, 0.35);
}

/* Social Icons */
.contact-info .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  margin-right: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.contact-info .social-icons a i {
  font-size: 18px;
  margin-right:0px;
  color: #d61d59;
  transition: all 0.3s ease;
}

.contact-info .social-icons a:hover {
  background: #d61d59;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 18px rgba(214, 29, 89, 0.3);
}

.contact-info .social-icons a:hover i {
  color: #fff;
}