@charset "UTF-8";
/*
Theme Name: PlutoEdu
Text Domain: plutoedu
Version: 2.0
Description: Pluto is a powerful and modern WordPress theme designed specifically for online education platforms, e-learning websites, schools, colleges, and training centers. With a clean, responsive, and fully customizable design, Pluto makes it easy to create engaging learning experiences. It features course management, instructor profiles, student dashboards, quizzes, certificates, and seamless integration with popular LMS plugins. Built with Elementor and Bootstrap 5, Pluto ensures fast performance, mobile-first design, and an intuitive user experience. Whether you're launching a small online academy or a large educational platform, Pluto has everything you need to succeed.
Author: Pluto Edu
Author URI: 
Theme URI: 
*/
body {
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.blog-article {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #d8d8dc;
  background-color: #fff;
}

.post-title {
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.post-title a {
  text-decoration: none;
  color: inherit;
}

.badge-pluto {
  text-decoration: none;
  display: inline-block;
  padding: 0.375rem 0.625rem !important;
  font-weight: 500 !important;
  color: #1f41af !important;
  border-radius: 0.5rem !important;
  background-color: #e9e9f1;
}

.author-info ul li {
  color: #949499;
  position: relative;
}


.author-info ul li:not(:last-of-type):after {
  content: "|";
  padding: 0.5rem;
  color: #bdbdbd;
}

.post-img {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* (9 / 16) * 100 = 56.25% */
}

.post-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media(min-width:768px) {
  .blog-list [class^="col-"]:first-of-type,
  .blog-list [class*="col-"]:first-of-type {
    width: 100%;
  }      
  .blog-list [class^="col-"]:first-of-type,
  .blog-list [class*="col-"]:first-of-type {
    width: 100%;
  }
  
  .blog-list [class^="col-"]:first-of-type .blog-article,
  .blog-list [class*="col-"]:first-of-type .blog-article {
    padding: 0;
    border: 0;
  }
  
  .blog-list [class^="col-"]:first-of-type .article-short-info,
  .blog-list [class*="col-"]:first-of-type .article-short-info {
    padding: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #fff !important;
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
  }
  
  .blog-list [class^="col-"]:first-of-type .post-img,
  .blog-list [class*="col-"]:first-of-type .post-img {
    height: 480px;
    overflow: hidden;
    padding-bottom:0
  }
  
  .blog-list [class^="col-"]:first-of-type .post-img img,
  .blog-list [class*="col-"]:first-of-type .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
  }
  
  .blog-list [class^="col-"]:first-of-type .badge-pluto,
  .blog-list [class*="col-"]:first-of-type .badge-pluto {
    color: #fff !important;
    background-color: #1f41af !important;
  }
  
  
  .blog-list [class^="col-"]:first-of-type .post-title,
  .blog-list [class*="col-"]:first-of-type .post-title {
    max-width: 640px;
    font-size: 2rem;
  }
  
  .blog-list [class^="col-"]:first-of-type .article-short-info .author-info ul li,
  .blog-list [class*="col-"]:first-of-type .article-short-info .author-info ul li {
    color: #fff;
  }
  
  .blog-list [class^="col-"]:first-of-type .article-short-info .author-info ul li:not(:last-of-type):after,
  .blog-list [class*="col-"]:first-of-type .article-short-info .author-info ul li:not(:last-of-type):after {
    color: #fff;
  }
}


.navbar-brand img {
    width: 180px;
    height: auto;
}


.widget_nav_menu ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.widget_nav_menu ul li {
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
}

.widget_nav_menu ul li a {
  padding-right: 1rem;
  padding-left: 1rem;
  text-decoration: none;
}

.widget_nav_menu ul li a:hover {
  color: var(--secondary-500) !important;
}