* body {margin:0; padding:0;}

.theme-color {color: var(--theme-color);}

.search-heading {font-weight: bold; font-size: larger;}

/* Loader */
.loader-bg {position: absolute; z-index: 1; top: 0; width:-webkit-fill-available; height:-webkit-fill-available;}

.loader-container {position: fixed; z-index: 2; left: 45%; top: 40%; width: 91px; height: 91px; display: inline-block; overflow: hidden; background: none;}

.loader {width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(0.91); backface-visibility: hidden; transform-origin: 0 0;}

.loader div {box-sizing: content-box;}

.loader div {position: absolute; border-width: 4px; border-style: solid; opacity: 1; border-radius: 50%; animation: loader 1s cubic-bezier(0,0.2,0.8,1) infinite;}

.loader div:nth-child(1) {border-color: var(--theme-color); animation-delay: 0s;}

.loader div:nth-child(2) {border-color: var(--theme-color); animation-delay: -0.5s;}

@keyframes loader {
  0% {top: 48px; left: 48px; width: 0; height: 0; opacity: 1;}
  100% {top: 9px; left: 9px; width: 78px; height: 78px; opacity: 0;}
}

/* Header & Navbar */
.header-container {background-size: cover;  background-repeat: no-repeat; background-color:var(--header-bg-color); color:var(--header-text-color); background-image: var(--header-img); height:150px; border-bottom: 2px solid var(--theme-color);}

.header-name {position: relative; top: 25%; text-align: center; font-size: 48px;}

.navbar-container {width: -webkit-fill-available; display:inline-flex; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);}

.navbar-toggle-mobile {display: none;}

.navbar-list {list-style: none; display:inline-flex; margin: auto;}

.navbar-list li {padding: 15px 10px 15px 10px;}

.navbar-list li:hover {background-color:#b3b3b3;}

.navbar-list a {padding: 15px 10px 15px 10px; text-decoration: none; color: black; font-weight: bold;}

.navbar-active {background-color: var(--theme-color);}

.navbar-active a {color: white;}

.navbar-searchbox {position: absolute; padding-top: 15px; right:10px;}

.navbar-searchbox input {height: 20px; width: 200px; margin-right:10px; outline:none; border-radius: 5px; border: 1px solid grey;}

/* Slideshow container */
.mySlides {display: none;}

.slideshow-container img {vertical-align: middle;}

.slideshow-container {max-width: 1000px; position: relative; margin: auto;}

.prev, .next {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}

.next {right: 0; border-radius: 3px 0 0 3px;}

.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}

.text {font-size: 20px; padding: 8px 12px; position: absolute; bottom: 10px; width: -webkit-fill-available; text-align: justify;}

.text a {color: white; text-decoration: none; text-shadow: 2px 1px black}

.fade {animation-name: fade; animation-duration: 1.5s;}

@keyframes fade {from {opacity: .4} to {opacity: 1}}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* Home main content area & pagination*/
.content-area {width: -webkit-fill-available; display:inline-flex; padding: 10px;}

.content-area-main {width: 70%; margin:0px 10px 0px 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}

.content-area-main img{max-width: -webkit-fill-available !important}

.post-container {display:inline-flex; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); margin: 20px 0px 20px 0px;}

.post-img-box {width: 20%;}

.post-img-box img {width: 100%; height: -webkit-fill-available; border-radius: 2%;}

.post-content-box {width: 90%; margin: 5px; padding-left: 10px;}

.post-content {text-align: justify;}

.post-heading {padding-bottom: 10px;}

.post-heading h3 {margin: 5px 0px 0px 0px;}

.post-heading h3 a {color: black; text-decoration: none;}

.post-heading span a {color: var(--theme-color); text-decoration: none;}

.post-sub-heading {font-size: small; color: grey;}

.post-content a {text-decoration: none;}

.post-content p {margin: 0px;}

.post-footer ul, .post-sub-heading ul {list-style: none; display:inline-flex; padding: 0px; margin: 10px 0px 10px 0px; text-decoration: none;}

.post-footer li, .post-sub-heading li {padding: 0px 5px 0px 5px;}

.post-footer a, .post-sub-heading a {text-decoration: none; color: black;}

.post-footer {padding: 10px 0px;}

.pagination-container {width: 100%; text-align: center;}

.pagination { display: inline-block;}

.pagination a {color: black; float: left; padding: 8px 16px; text-decoration: none;}

.pagination a.active {background-color: var(--theme-color); color: white; border-radius: 5px;}

.pagination a:hover:not(.active) {background-color: #cccccc; border-radius: 5px;}


/* Post Sharing area */
.share-post {display: flex; gap: 10px; flex-wrap: wrap; flex-direction: row; justify-content: left  ; align-items: center;}

.share-post a.share-btn {display: inline-flex; align-items: center; height: fit-content; gap: 5px; padding: 6px; border-radius: 4px; color: #fff; text-decoration: none; font-size: 14px; transition: 0.2s;}

.share-post a.fb-share { background: #3b5998;}

.share-post a.twitter-share { background: #1da1f2;}

.share-post a.linkedin-share { background: #0077b5;}

.share-post a.whatsapp-share { background: #25d366;}

.share-post a.share-btn:hover { opacity: 0.8;}


/* Right sidebar area */
.right-sidebar {width: 30%; margin-left: 10px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);}

.right-sidebar a {text-decoration: none; color: black;}

.widget-poular-post, .widget-featured-post, .widget-categories {border: 1px solid var(--theme-color); border-radius: 4px; margin-bottom: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);}

.right-sidebar-widget-head {padding:5px 0px 5px 0px; text-align: center; background-color: var(--theme-color); color: white; font-size: 24px; font-weight: bold;}

.widget-categories span {display: inline-flex; margin: 2px; padding: 2px; border-radius: 10%;}

.right-sidebar-ul {margin: 0px; padding-left: 10px; list-style: none;}

.right-sidebar-ul li {padding: 5px 0px 5px 0px; font-weight: bold; font-size: 15px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);}

.tags{padding:2px 5px 2px 5px; border-radius: 5px; background-color: var(--theme-color); color:white !important;}


/* Comment area */
.styled-hr {border: 0; height: 1px; background: linear-gradient(to right, rgba(255, 26, 26, 0), var(--theme-color), rgba(255, 26, 26, 0));}

.comment {margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;}

.comment p {margin: 5px;}

.comment_replies{margin-left: 10%; padding: 10px;}

.user-info {display: flex; align-items: center; margin-bottom: 10px;}

.user-info img {width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;}

.user-info div {width: 2%; text-align: center; margin-right: 5px; padding: 5px 5px; border: 0.2px solid var(--theme-color); border-radius: 50%; background-color: var(--theme-color); color: white;}

.user-info span {font-weight: bold; color: var(--theme-color);}

.date {font-size: 0.8em; color: #737373; margin-bottom: 10px;}

.reply-btn {color: var(--theme-color); border: none; border-radius: 5px; cursor: pointer;}

.comment-box {margin: 0 auto; padding: 5px 20px 10px 20px; border-radius: 5px;}

.comment-box label {font-weight: bold; display: block; margin-bottom: 5px;}

.comment-box input[type="text"], input[type="email"], .comment-box textarea {width: 100%; resize: none; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;}

.comment-box textarea {height: 150px;}

.comment-box input[type="submit"] {background-color: var(--theme-color); color: #fff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px;}

/* Footer area */
.footer {border-top: 2px solid var(--theme-color); min-height: 50px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); text-align: center;}

.footer div {position: relative; top: 15px;}


/* <<<<<<<<<<<<<<< CSS FOR PHONES & TABLETS STARTS FROM HERE >>>>>>>>>>>>>>> */
@media only screen and (max-width: 768px) {
  .loader-container{left: 40%;}

  .navbar-toggle-mobile {display: block;}

  .btn-toggle-mobile{padding: 15px; color: white; border-radius: 5px; border: 1px solid #d9d9d9; background-color: var(--theme-color);}

  .navbar-container{flex-wrap: wrap;}

  .navbar-list-container{margin: auto; width: 100%;}

  .navbar-list{display: none; padding: unset;}

  .content-area{display: inline;}

  .content-area-main{width: 95%;}

  .content-area-main center{width: 100%;}

  .slideshow-container{max-width: 100%;}

  .mySlides img{height: 250px;}

  .text{width: -webkit-fill-available;}

  .text a{font-size: 14px;}

  .post-container{display: block; font-size: small;}

  .post-img-box{padding-left: 10px;}

  .post-img-box, .post-content-box{width: 90%;}

  .post-heading, .post-content{text-align: justify;}

  .post-footer{text-align: center;}

  .right-sidebar{width: 90%; padding: 10px;}

  .user-info div{width: 5%;}
}


