/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.6.10.1712223120
Updated: 2024-04-04 09:32:00

*/



 .card1 {
   overflow: hidden;
   box-shadow: 0px 2px 20px var(--clr-gray-light);
   background: white;
   border-radius: 0.5rem;
   position: relative;
   width: 100%;
   margin: 1rem;
   transition: 250ms all ease-in-out;
   cursor: pointer;
   }
   .card {
   overflow: hidden;
   box-shadow: 0px 2px 20px var(--clr-gray-light);
   background: white;
   border-radius: 0.5rem;
   position: relative;
   width: 100%;
   margin: 1rem;
   transition: 250ms all ease-in-out;
   cursor: pointer;
   }
   .card:hover {
   transform: scale(1.05);
   box-shadow: 0px 2px 40px var(--clr-gray-light);
   }
   .banner-img {
   position: absolute;
   object-fit: cover;
   height: 10rem;
   width: 100%;
   }
   .banner-img1 {
   position: absolute;
   object-fit: cover;
   height: 22rem;
   width: 100%;
   }
   .card-body1 {
   margin: 25rem 1rem 4rem 1rem;
   }
   .category-tag {
   font-size: 0.8rem;
   font-weight: bold;
   color: white;
   background: red;
   padding: 0.5rem 1.3rem 0.5rem 1rem;
   text-transform: uppercase;
   position: absolute;
   z-index: 1;
   top: 1rem;
   border-radius: 0 2rem 2rem 0;
   }
   .popular {
   background: #0f71dbe6;
   }
   .technology {
   background: var(--clr-technology);
   }
   .psychology {
   background: var(--clr-psychology);
   }
   .card-body {
   margin: 10.5rem 1rem 0.5rem 1rem;
   }
   .blog-title {
   font-weight: 600;
   font-size: 22px;
   line-height: 1.5rem;
   margin: 1rem 0 0.5rem;
   }
   .card-body {
   padding: 0.25rem;
   }
   .blog-hashtag {
   font-size: 0.9rem;
   font-weight: 500;
   color: var(--clr-link);
   }
   .blog-title {
   line-height: 1.5rem;
   margin: 1rem 0 0.5rem;
   }
   .blog-description {
   color: var(--clr-gray-med);
   font-size: 0.9rem;
   }
   .card-profile {
   display: flex;
   margin-top: 2rem;
   align-items: center;
   }
   .newsletter {
   max-width: 600px;
   margin: 0 auto;
   padding: 30px 20px;
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   .newsletter h2 {
   font-size: 24px;
   margin-bottom: 20px;
   text-align: center;
   }
   .newsletter form {
   display: flex;
   justify-content: center;
   align-items: center;
   }
   .newsletter input[type="email"] {
   flex: 1;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px 0 0 5px;
   font-size: 16px;
   }
   .newsletter button {
   padding: 10px 20px;
   background-color: #ff7070;
   color: #fff;
   border: none;
   border-radius: 0 5px 5px 0;
   cursor: pointer;
   font-size: 16px;
   }
   .newsletter button:hover {
   background-color: #0056b3;
   }
   .newssection {
   margin: 50px 0px;
   padding: 80px 0px;
   background: #d2e9fd;
   }
   button {
   padding: 10px 32px;
   font-size: 16px;
   border-radius: 14px;
   color: white;
   border-color: #35506c;
   background: #2b3948;
   }
   .buttonsection {
   text-align: center;
   }
   a.cat_title_a:hover {
   text-decoration: none !important;
   }
   h2.blog-title {
   color: #212529 !important;
   }

/* Custom CSS for post tag links */
.tag-link {
    color: #888; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 16px;
    font-weight: normal; /* Set font weight to normal by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.tag-link:hover {
    color: #555; /* Change font color to darker grey on hover */
    font-weight: medium; /* Make font medium on hover */
}

/* Styles for Related Articles Section */
.related-articles {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    justify-content: space-between;
}

.related-entry {
    flex-basis: calc(25% - 20px); /* Set each entry to take up 25% of the container width with spacing */
    margin: 7px; /* Add spacing between entries */
    box-sizing: border-box; /* Include padding and border in element's total width */
}

.related-post-thumbnail img {
    width: 100%; /* Ensure images fill their container */
    height: auto; /* Maintain aspect ratio */
}

.related-post-title {
    text-align: left; /* Align titles to the left */
	margin-top: 5px; /* Add spacing above titles */
}

.related-post-title a {
    display: block;
    color: #888; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 16px;
    font-weight: normal; /* Set font weight to normal by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.related-post-title a:hover {
    color: #555; /* Change font color to darker grey on hover */
    font-weight: medium; /* Make font medium on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .related-entry {
        flex-basis: calc(50% - 20px); /* Two columns on smaller screens */
    }
}

@media (max-width: 480px) {
    .related-entry {
        flex-basis: calc(100% - 20px); /* Single column on smaller screens */
    }
}

/* table of content style */
.toc {
    margin: 0px;
    padding: 0px;
    background-color: #ffffff; /* White background */
    border: 0px solid #ffffff; /* White border */
}

.toc_title {
    font-weight: bold;
    color: #777;
	margin-bottom: 6px;
}

.toc ul {
    list-style: none;
    padding: 0;
}

.toc li {
	margin-top: 0px;
    margin-bottom: 4px;
}

.toc_h2 {
    margin-left: 0; /* Adjust indentation based on heading level */
}

.toc_h3 {
    margin-left: 8px; /* Indent h3 headings */
}

.toc_h4 {
    margin-left: 18px; /* Indent h4 headings */
}

.toc li a {
    color: #888; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 16px;
    font-weight: normal; /* Set font weight to normal by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.toc li a:hover {
    color: #555; /* Change font color to darker grey on hover */
    font-weight: medium; /* Make font medium on hover */
}

/* Styles for the trending posts section */
.trending-posts-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	padding-left: 10px;
}

.trending-posts-left {
    flex: 1;
    min-width: 50%;
}

.trending-post-large {
    position: relative;
	margin-top: 10px;
}

.trending-post-large img {
    width: 1024px;
    height: auto;
}

.trending-post-large h2 a {
    color: #111;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.trending-post-large h2 a:hover {
    color: #111;
    font-weight: bold; /* Make font bold on hover */
	text-decoration: underline;
}

.trending-post-large p a {
    color: #444; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 15px;
    font-weight: normal; /* Set font weight to normal by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}
.trending-post-large p a:hover {
    color: #444; /* Change font color to darker grey on hover */
    font-weight: normal; /* Make font medium on hover */
	text-decoration: underline;
}

.trending-posts-right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trending-post-small {
    width: 48%;
    position: relative;
    margin-top: 10px;
}

.trending-post-small img {
    width: 300px;
    height: auto;
}

.trending-post-small h3 a {
    color: #111;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.trending-post-small h3 a:hover {
    color: #111;
    font-weight: bold; /* Make font bold on hover */
	text-decoration: underline;
}

.trending-post-small p a {
    color: #444; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 15px;
    font-weight: normal; /* Set font weight to normal by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}
.trending-post-small p a:hover {
    color: #444; /* Change font color to darker grey on hover */
    font-weight: normal; /* Make font medium on hover */
	text-decoration: underline;
}

@media (max-width: 768px) {
    .trending-posts-wrapper {
        flex-direction: column;
    }

    .trending-posts-left,
    .trending-posts-right {
        min-width: 100%;
    }

    .trending-post-small {
        width: 100%;
    }
}


/* LATEST ARTICLES HOME PAGE SECTION STYLE */
.latest-articles-container {
    display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
	align-items: stretch; /* Makes all columns of equal height */
    width: 100%;
	padding-left: 10px;
}

.latest-column {
    width: 48%;
    margin: 0;
	flex-direction: column;
}

@media (max-width: 1024px) { /* For tablets and smaller devices */
    .latest-article-container {
        flex-direction: column;
        align-items: center;
    }
    .latest-column {
        margin: 10px 0;
        width: 90%; /* Adjust width to suit mobile layout */
        flex: none; /* Overrides the flex-grow setting */
    }
}

@media (max-width: 600px) { /* For mobile devices */
    .latest-column {
        width: 100%; /* Full width for better readability on small screens */
        margin: 5px 0; /* Reduced margin for compact layout */
    }
}

.latest-article {
    width: 100%; /* Adjust width for 2 columns */
    margin-bottom: 2px;
    box-sizing: border-box;
}

.latest-article a {
	color: #111;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.latest-article a:hover {
	color: #111;
    font-weight: bold; /* Make font bold on hover */
	text-decoration: underline;
}

.latest-article-thumbnail {
	width: 100%;
	height: auto;
    margin-bottom: 0px;
}

.post-details {
    margin: 0px 0;
}

.post-details a {
   	color: #444; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 15px;
    font-weight: normal; /* Set font weight to normal by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.post-details a:hover {
    color: #444; /* Change font color to darker grey on hover */
    font-weight: normal; /* Make font medium on hover */
	text-decoration: underline;
}

#load-more-articles {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    cursor: pointer;
}

#load-more-articles:hover {
    background-color: #005177;
}

/* Editors picks style */
.editors-picks-container {
    display: flex;
    flex-direction: column;
	padding: 10px;
}

.editors-pick {
    display: flex;
    align-items: flex-start;
    margin: 0px;
    box-sizing: border-box;
}

.editors-pick-thumbnail-link {
    flex: 0 0 auto;
    margin-right: 5px;
	padding-top: 5px;
}

.editors-pick-thumbnail {
    width: 150px; /* Adjust width as needed */
    height: auto; /* Adjust height as needed */
}

.editors-pick-content {
	color: #444; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 15px;
    font-weight: medium; /* Set font weight to normal by default */
    flex: 1;
	padding-top: -10px;
	align-content: top;
}

.editors-pick-content h3 {
    margin: none;
}

.editors-pick-content h3 a {
   	color: #111;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.editors-pick-content h3 a:hover {
	color: #111;
    font-weight: 500; /* Make font bold on hover */
	text-decoration: underline;
}

.editors-pick-content p {
    margin: none;
	font-size: 15px;
	padding-top: -5px;
}

.editors-pick-content p a {
   	color: #444; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 15px;
    font-weight: normal; /* Set font weight to normal by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.editors-pick-content p a:hover {
	color: #444; /* Change font color to darker grey on hover */
    font-weight: normal; /* Make font medium on hover */
	text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .editors-pick {
        align-items: left;
        text-align: left;
		flex: nowrap
    }

    .editors-pick-thumbnail-link {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .editors-pick-content {
        width: 100%;
    }
}

/* Archive page popular articles */
.archive-popular-articles-section {
    display: flex;
    flex-direction: column;
    width: 100%;
	padding: 10px;
    box-sizing: border-box;
}

.archive-popular-article {
    display: flex;
    align-items: flex-start;
	margin: 0;
    box-sizing: border-box;
}

.archive-popular-article img {
    margin-right: 5px;
	padding-top: 5px;
    width: 150px;
    height: auto;
}

.archive-article-content {
    flex: 1;
}

.archive-article-content h3 {
    margin-bottom: -5px;
}

.archive-article-content h3 a {
   	color: #111;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.archive-article-content h3 a:hover {
	color: #111;
    font-weight: 500; /* Make font bold on hover */
	text-decoration: underline;
}

.archive-article-content p {
    margin-bottom: -5px;
	font-size: 15px;
}

.archive-article-content p a {
   	color: #444; /* Set the default font color to light grey */
    text-decoration: none; /* Remove underline by default */
	font-size: 15px;
    font-weight: normal; /* Set font weight to normal by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for color and font weight on hover */
}

.archive-article-content p a:hover {
	color: #444; /* Change font color to darker grey on hover */
    font-weight: normal; /* Make font medium on hover */
	text-decoration: underline;
}

@media (max-width: 768px) {
    .archive-popular-articles-section {
        width: 100%;
    }

    .archive-popular-article {
        flex-direction: column;
        align-items: center;
    }

    .archive-popular-article img {
        margin-bottom: 10px;
        width: 100%;
        height: auto;
    }
}