style.css

/*!
Theme Name: Blogfi
Theme URI: 
Author: jahidcse
Author URI: https://profiles.wordpress.org/jahidcse/
Description: Blogfi is a simle blog theme built with Bootstrap.This theme is fully responsive, and easy to Customize for your any kinds of Blog like travel, food, lifestyle, photography, personal, sports, news and many more. Theme is SEO friendly and suitable for all kinds of blogging websites.
Version: 1.0.3
Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blogfi
Tags: blog, news, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */


html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	font-size: 1rem;
	line-height: 1.5;
	font-family: 'Montserrat', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #212529;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}

.comment-list .comment img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    margin-right: 15px;
}

.comments-area li.comment {
    margin-top: 20px;
    border-bottom: 2px dashed #706fd3;;
    padding-bottom: 20px;
}

.comments-area li.comment .reply {
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
}

.comments-area li.comment .comment-metadata a {
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}
.widget h2 {
    padding: 10px;
    background: #2c3e50;
    color: #fff;
    font-size: 28px;
}
/* Captions
--------------------------------------------- */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*='wp-image-'] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex='-1']:focus {
    outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
    /*rtl:ignore*/
    float: left;

    /*rtl:ignore*/
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {
    /*rtl:ignore*/
    float: right;

    /*rtl:ignore*/
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

/* Comments */

.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}


/*header-top-area-css*/

.header-top-area{
	background-color: #706fd3;
	padding: 5px 0px;
}
.top-contact {
    padding: 2px 0px;
}
.top-contact ul,
.social-profile ul{
	margin: 0;
	padding: 0;
}
.top-contact ul li,
.social-profile ul li{
	display: inline-block;
	color: #fff;
	font-size: 12px;
	padding: 0px 5px 0px 0px;
}
.social-profile ul li a{
	color: #fff;
	text-decoration: none;
}
.top-contact ul li i{
	margin-right: 5px;
}


/*header-area-css*/

.header-area {
    background: #fff;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    border-bottom: 1px solid #ddd;
}
.header-area .navbar{
	padding: 0px !important;
}
a.logo{
	color: #706fd3 !important;
	font-weight: 700;
	letter-spacing: 2px;
	font-size: 36px;
}


.menu ul{
	margin: 0;
	padding: 0;
}

.menu ul li{
	display: inline-block;
	padding: 8px 10px;
	position: relative;
}
.menu ul li:last-child{
	padding-right: 0px;
}

.menu ul li a {
    text-decoration: none;
    padding: 10px 0px;
    text-transform: uppercase;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #706fd3;
    position: relative;
    overflow: hidden;
}
.menu ul li.nav-item.show a{
	background: transparent !important;
}

.menu ul li a span{
    color: #706fd3;
}
.menu ul li ul{
		box-shadow: 0 6px 25px rgb(0 0 0 / 7%);
	
}
.menu ul li ul li{
	display: block;
	padding: 0px;
}
.menu ul li ul li a{
	display: block;
	padding: 15px;
}


/*body css*/

body .entry-content a, 
body .post-standard__content a, 
body .comment-content a, 
.wp-block-latest-comments a, 
.widget_text a {
  text-decoration: underline !important;
}

.body-content{
	padding: 30px 0px;
}
.single-news{
	margin: 10px 0px;
}
.single-news > a{
	display: block;
}
.single-news img{
	width: 100%;
}
.single-news h4{
	color: #22416D;
	font-weight: 600;
	margin: 10px 0px;
	font-size: 18px;
}
.single-news ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.single-news ul li{
	display: inline-block;
	color: #706fd3;
	font-size: 14px;
	text-transform: capitalize;
	font-weight: 500;
	padding: 0px 3px 0px 0px;
}
.single-news ul li i{
	margin-right: 5px;
}
.single-news ul li a{
	text-decoration: none;
	color: #706fd3;
	font-size: 14px;
	text-transform: capitalize;
}

.single-news p{
	color: #212529;
	font-size: 14px;
	line-height: 24px;
	margin: 5px 0px;
}
.single-news p a{
	text-decoration: underline !important;
}
.single-news a.readme{
	text-decoration: none;
	background-color: #706fd3;
	color: #fff;
	text-transform: uppercase;
	display: inline-block;
	padding: 10px;
	font-size: 14px;
	transition: .3s;
	text-transform: capitalize;
}
.single-news > a.readme:hover{
	background-color: #000;
}
.wp-block-search__inside-wrapper input[type="search"]{
	border-radius: 0px;
}
.wp-block-search__button{
	margin-left: 0;
	border: 0px solid;
	background: #706FD3;
	color: #fff;
	border-radius: 0px;
	cursor: pointer;
}
.widget-area .widget:nth-child(1){
	margin-top: 10px;
}
.widget {
  background: #ffffff;
  box-shadow: 0 6px 25px rgb(0 0 0 / 7%);
  padding: 30px 20px 30px;
  border-radius: 3px;
  margin-bottom: 25px;
}
.widget h2 {
  padding: 10px;
  background: #706FD3;
  color: #fff;
  font-size: 20px;
}
.widget-area ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.widget-area ul li a {
  display: block;
  padding-bottom: 5px;
  border-bottom: 2px dotted #ddd;
  margin-bottom: 10px;
  text-decoration: none;
  transition: .3s all ease;
}
.widget-area ul li:hover a{
	color: #706FD3;
}
.wp-block-latest-comments,
.recentcomments{
	padding-left: 0;
}
.wp-block-latest-comments a,
.recentcomments a {
    color: #706fd3;
    transition: all 0.4s ease;
}

.wp-block-latest-comments a:hover,
.recentcomments a:hover {
    color: #121212;
    text-decoration: underline !important;
}

.comment-content ol li {
    list-style: disc;
    margin-left: 20px;
}

.comment-content ol {
    margin-bottom: 20px;
}

/*single page css*/

.page-header h1 {
  font-size: 32px;
  font-weight: 600;
}
.single-news.single img{
	height: auto !important;
}
.navigation.post-navigation .nav-links {
  display: flex;
  margin-bottom: 20px;
}
.navigation.post-navigation .nav-links .nav-previous a,
.navigation.post-navigation .nav-links .nav-next a{
	padding: 10px 15px;
	background: #706FD3;
	color: #fff;
	font-size: 16px;
	display: inline-block;
	text-decoration: none;
}
.navigation.post-navigation .nav-links .nav-next{
	margin-left: 15px;
}
#comments .comment-list{
	margin-left: 0px;
}
.comment-list .comment img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
}
.comment-content p a,
.comment-content a,
.widget.widget_text p a,
.widget.widget_text a{
	text-decoration: underline !important;
}
.comments-area li.comment {
    margin-top: 20px;
    border-bottom: 2px dotted #ddd;;
    padding-bottom: 20px;
}

.comments-area li.comment .reply {
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
}

.comments-area li.comment .comment-metadata a {
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}
.navigation.posts-navigation {
  display: block;
  width: 100%;
  padding-left: 15px;
  margin-top: 20px;
}
.navigation.posts-navigation .nav-links .nav-previous{
	float: left;
}
.navigation.posts-navigation .nav-links .nav-next{
	float: right;
}
.navigation.posts-navigation .nav-links a {
  background: #706fd3;
  border: 1px solid #706fd3;
  border-radius: 0px;
  font-size: 15px;
  color: #fff;
}

/*404 page*/

.error-404{
	padding: 150px 0px;
}
.error-404 .search-form {
  display: flex;
  justify-content: center;
}
.error-404 input[type="search"]{
	height: 45px;
	border-radius: 0px;
} 
.error-404 input[type="submit"],
#commentform input[type="submit"] {
  margin-left: 0;
  border: 0px solid;
  background: #706FD3;
  height: 45px;
  color: #fff;
  border-radius: 0px;
  cursor: pointer;
}


/* footer-area-css */
/* footer-area-css */

.footer-area{
	background-color: #706fd3;
	padding: 30px 0px;
}
.footer p{
	color: #fff;
	margin-bottom: 0px;
	text-transform: capitalize;
	font-weight: 500;
}
.footer p a{
	text-decoration: underline !important;
}