/*!
Theme Name: App Finder Guru
Theme URI: http://appfinderguru.com/
Author: Visionet Systems Inc.
Author URI: https://visionet.com/
Description: Hi. I'm a starter theme called <code>App Finder Guru</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: App Finder Guru
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL..h1-sidebar-menu .sidebar-menu li a:hover, .hpt-footer-social-content ul li a:hover, .hpt-footer-widget .menu-widget li a:hover, .hpt-search-btn-1:hover, .hpt-testimonial-1-slider-1-content .left .parson-wrap .parson-content .name:hover
Use it to make something cool, have fun, and share what you've learned.
App Finder Guru is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* Common Section Title Styling */
/* banner */
/* Global */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  --primary-color: #0088ff;
  --secondary-color: #c9f31d;
  --ffMain: 'Roboto', sans-serif;
  font-family: var(--ffMain);

}

/* Global Styles */
body {
  font-family: var(--ffMain);
  color: #111;
  background-color: #f7f7f7;
  margin: 0;
  padding: 0;
	overflow-x: hidden;    max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

.pl-55 {
  padding-left: 55px;
}

/*======================
    Header / Navbar
========================*/

.header-inner{
  padding: 0px 5px;
}

.header-inner .logo {
  height: 60px;
  width: 160px;
}

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

nav {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 12px 0px;
  font-family: var(--ffMain);
}

nav ul {
  list-style: none;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  -webkit-transition: border-color 0.1s ease;
  transition: border-color 0.1s ease;
  gap:24px;
  margin-bottom: 2rem;
}

.navbar-nav li{
  align-self: center;
}

.navbar-nav li a {
  position: relative;
  color: rgb(68, 68, 68);
  text-decoration: none;
}

.navbar-nav li a::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 95%;
  height: 1px;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.navbar-nav li a:hover::after {
  opacity: 1;
}

.navbar-nav li:last-child a {
    color: #fff;
}

.navbar-nav li:last-child {
    margin-left: .5rem;
}

.navbar-nav li:last-child a:hover::after {
    opacity: 0;
}


.back-to-top {
  content: 'f062';
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  background-color: #000;
  color: #fff;
  font-size: 22px;
  text-align: center;
  line-height: 45px;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}

.sv-fixed-btn--scroll-top:after {
    content: '\E906';
    font-family: 'sv-icomoon';
    font-size: 22px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}


nav ul li a:hover {
  border-bottom-color: inherit;
}

.navbar-nav ul li a {
  margin-left: 25px;
}

nav a {
  font-size: 14px;
  color: #111;
}

nav .btn,
.contact-btn {
  padding: 9px 16px;
  background-color: var(--primary-color);
  border: none;
  color: white;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  line-height: 22px;
}

nav .btn:hover,
.contact-btn:hover {
  background-color: #1283c4;
}

.contact-btn {
    padding: 9px 16px;
    background-color: #f60;
}
.contact-btn:hover {
  background-color: #f60;
}

.app-header-bg {
  padding: 0 8px;
  background-color: (252, 252, 255);
  box-shadow: 0 2px 10px 12px rgba(0, 0, 0, 0.02);
}

/* .app-header-bg .navbar-brand img {
  width: 162px;
} */

.header-center {
  margin-left: auto;
}

/*======================
      Blog Section
========================*/

.blog-main {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  padding: 2rem;
}

/* Blog card styling */

.blog-header {
  padding: 60px;
}

.blog-header h1{
  font-size: 3.6rem;
  line-height: 3.3rem;
  padding-bottom: 28px;
}

.blog-header p {
     font-size: 17px;
  line-height: 26px;
  max-width: 640px; /* Adjust as needed */
  margin: 0 auto; /* Center the paragraph */
}


.blog-card {
  border: 1px solid #eee;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
}
.blog-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.blog-card .blog-image {
  position: relative;
}
.blog-card .blog-image img {
  width: 100%;
  height: 100%;
  display: block;
}
.blog-card .badge {
    position: absolute;
    top: 20px;
    right: 0px;
    background: #0088ff;
    border-left: 2px solid #0000ff;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    padding: 10px 20px;
    border-radius: 5px 0px 0px 5px;
    font-weight: 400;
}

.blog-card .card-body {
  padding: 2.2rem;
  min-height: 280px;
  max-height: 100%;
}
.blog-card .entry-meta span {
  font-size: 13px;
  margin-right: 10px;
  color: #666;
}

.blog-card .entry-meta span:hover {
  color: #2946f3;
}

.btn-link {
    padding: 0 0 2px;
    position: relative;
    border: 0;
    border-bottom: 2px solid;
    letter-spacing: 0;
    background-color: transparent;
}
.blog-card .blog-title {
  display: block;
  font-weight: 600;
  font-size: 18px;
  margin: 1rem 0 0.5rem;
  color: #222;
  text-decoration: none;
}
.blog-card .blog-title:hover {
  color: #0088ff;
}
.blog-card .blog-excerpt {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.read-more-btn {
  display: inline-block;
  margin-top: 1rem;
  font-size: 14px;
  font-weight: 600;
  color: #0088ff;
  text-decoration: none;
}

.post-meta li span:hover {
    color: #252c9c;
}

.post-meta li a:hover {
    color: #252c9c;
}

.single-page-content img{
	width: 100%;
}

/* Page Header Section */
.page-header-section {
  position: relative;
  padding: 8rem 0 8rem;
  overflow: hidden;
}

.page-header-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 3rem);
  background: radial-gradient(circle at bottom left, #007aee 0%, #012e59 30%);
  background-color: #012e59;
  z-index: 0;
}

.page-header-section .text-box {
  position: relative;
  z-index: 1;
}

.page-header-section .main-heading {
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 20px;
}

.breadcrumbs ul {
  list-style: none;
  display: flex;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  padding-left: 0rem !important;
}

.breadcrumbs li {
  color: #fff;
}

.breadcrumbs li a {
  color: #fff;
  text-decoration: none;
}

.breadcrumbs li:not(:last-child)::after {
  content: '›';
  margin-left: 10px;
  color: #fff;
}

/* Image Overlay Right Side */
.hero-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(50% - 10rem);
  height: 100%;
  overflow: hidden;
  clip-path: polygon(100% 0, 100% 100%, calc(1rem * 3) 100%, 0 calc(100% - calc(1rem * 3)), 0 0);
  z-index: 1;
}

.hero-slider,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  height: 100%;
}

.hero-slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SVG Grid Icon */
.grid-icon {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  z-index: 2;
  width: 4rem;
  height: 4rem;
}

/* Blog card- design -2 */
.custom-blog-card {
  border-radius: 0;
  overflow: hidden;
  position: relative;
  color: white;
}

.custom-blog-image {
  height: 380px;
}

.custom-blog-image img{
  height: 380px;
  object-fit: cover;
  transition: transform 0.5s ease;
  will-change: transform;
}

.custom-blog-card:hover .custom-blog-image img {
  transform: scale(1.05); /* Zoom out effect (visually zoom-in) */
}

.custom-blog-card:hover .custom-blog-badge {
    background: transparent;
    border-radius: 0px;
    z-index: 2;
    border: 1px solid;
    color: #fff;
}

.custom-blog-overlay {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1;
}

.custom-blog-badge {
  background: white;
  color: #222;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 0px;
  z-index: 2;
}

.custom-blog-content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 2;
    font-family: 'Plus Jakarta Sans', sans-serif;
}


.custom-blog-date {
  font-size: 13px;
  text-transform: uppercase;
  opacity: 0.8;
}

.custom-blog-title {
  font-size: 18px;
  line-height: 1.4;
  display: block;
}



/*======================
      Sidebar Section
========================*/

.wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 25px;
  max-width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.wp-block-search__input {
  flex: 1;
  padding: 12px 15px;
  border: none;
  border-radius: 8px 0 0 8px;
  background-color: rgb(22 35 43 / .05);
  font-size: 16px;
  outline: none;
  height: 60px;
}

.wp-block-search__button {
  height: 62px;
  background-color: var(--primary-color);
  border: none;
  border-radius: 8px 8px 8px 8px;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-block-search__button svg.search-icon {
  fill: #fff;
  width: 16px;
  height: 16px;
}

.wp-block-search__button{
    margin-left: 0px;
}

.wp-block-search__label {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: 600;
    border: none;
    border-bottom: 1px solid #000000;
    padding-bottom: 16px;
}


.blog-sidebar h2 {
  font-size: 20px;
  margin-bottom: 0;
  font-weight: 600;
}

.blog-sidebar hr {
  border: none;
  border-top: 2px solid #000000;
  margin-bottom: 30px;
}

/* Popular Posts */
.popular-post {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
}

.category-list-sidebar {
  padding-left: 0 !important;
}

.popular-post-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 30px;
}

.border-color-dark-gray {
    border-color: #232323 !important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

.popular-post img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.popular-post .title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  line-height: 25px;
}

.popular-post .title:hover{
    color: blue;
}

.popular-post .date {
  font-size: 15px;
  color: #666;
  margin-top: 4px;
}
.popular-post .date:hover{
    color: blue;
}

/* Categories */

.category-item {
  height: 80px;
  padding-left: 35px;
  padding-right: 35px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.category-item .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
  z-index: 1;
}

/* Ensure content stays on top of gradient */
.category-item a {
  position: relative;
  z-index: 2;
}

.category-item .btn {
  right: 0;
  display: none;
}

.category-item .heading {
  font-size: 20px;
  font-weight: 500;
}


.category-item:hover .btn {
  display: block;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-list li {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.category-list li img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.category-list li:hover img {
  transform: scale(1.05);
}

.category-list li span {
  position: absolute;
  bottom: 8px;
  left: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}


/* Stay Connected */
.social-icons h4 {
    font-size: 20px;
    font-weight: 500;
}

.social-icons .fw-500 {
    font-weight: 500;
}
.social-icons a:hover {
    color: #3b5998;
}

/* Tag Cloud */
.tag-cloud {
  display: flex;
  flex-direction: column;
}

.tag-cloud h4 {
  font-weight: 700;
  font-size: 1.1rem;
  color: #222;
}

.tags {
 margin: 0 128px 10px 0;
}

.tag {
  background-color: transparent;
  border-radius: 0 !important;
  padding: 15px 15px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #444;
  margin: 5px;
  transition: background-color 0.3s ease;
  border: 1px solid #e4e4e4;
}

.tag:hover {
  background-color: #fff;
  color: #111;
}

.pagination .paginations {
  display: flex;
  gap: 10px;
  padding: 0;
}

.pagination .page-item {
  list-style: none;
}

.pagination .page-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  font-weight: 500;
  color: #6c757d;
  transition: all 0.3s ease;
  font-size: 16px;
}

.pagination .page-item.active .page-link {
  background-color: #111; /* Black circle */
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.pagination .page-link:hover {
  background-color: #f0f0f0;
  color: #000;
  text-decoration: none;
}

.pagination .page-item.arrow .page-link {
  background-color: transparent;
  font-size: 18px;
  width: auto;
  height: auto;
  border-radius: 0;
}

.page-link i {
  padding-top: 6px;
}

/* blog detail */

.section-blog-detail {
        padding-top: 90px;
        padding-bottom: 90px;
        font-family: inter, sans-serif;
    }

.section-blog-detail h4 {
        font-size: 2.375rem;
        line-height: 2.7rem;
        font-weight: 600;
        width: 90%;
        letter-spacing: -1px !important;
        color: #313e3b;
    }
.section-blog-detail p {
  font-size: 17px;
  color: #828c8a;
}
.section-blog-detail strong {
  color:#313e3b;
}
.text-decoration-line-bottom {
    border-bottom: 1px solid;
}

.section-blog-detail h5 {
  font-size: 2rem;
  line-height: 2.2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600 !important;
  width: 95% !important;
  letter-spacing: -1px !important;
}

/* Tag buttons */
.btn-outline-secondary {
  border-radius: 6px;
  font-size: 14px;
  text-transform: capitalize;
  padding: 6px 16px;
  font-weight: 500;
  color: #444;
  border-color: #ddd;
  background-color: #fff;
  transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
  background-color: #f5f5f5;
  color: #000;
  border-color: #ccc;
}

/* Likes count */
.custom-blog-badge a.text-decoration-none {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  background-color: #fff;
  transition: all 0.3s ease;
}

a.text-decoration-none:hover {
  color: #000;
  text-decoration: none;
}

a.text-decoration-none i {
  font-size: 14px;
  color: #e74c3c;
}

/* Author Box */
.shadow-sm {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05) !important;
}

.rounded-circle {
  border-radius: 50%;
  border: 3px solid #eee;
  object-fit: cover;
}

.text-dark {
  color: #222 !important;
}

.text-muted {
  color: #888 !important;
}

.btn-link.text-dark {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.btn-link.text-dark:hover {
  color: #0088ff;
}

/* Social Icons */
ul.list-inline {
  margin-top: 30px;
  padding-left: 0;
}

.list-inline-item a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: #f1f1f1;
  transition: background-color 0.3s, transform 0.3s;
}

.list-inline-item a:hover {
  background-color: #0088ff;
  color: #fff !important;
  transform: translateY(-3px);
}

.related-posts {
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #fff;
}

.related-posts h2 {
  font-size: 3.438rem;
  line-height: 3.2rem;
}

.related-posts span {
  font-size: 19px;
}

.category-list-sidebar li {
    list-style-type: none;
}

.category-list-sidebar li a {
    border-radius: 14px;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    background: rgba(255, 255, 255, 0.8);
    letter-spacing: -0.01em;
    color: #1a1b1e;
}

.category-list-sidebar li a:hover {
    color: #0a58ca;
}


/* Image Zoom on Hover */
.card img {
  transition: transform 0.4s ease;
}

/* .card:hover img {
  transform: scale(1.05);
} */

/* Card shadow on hover (no lift) */
.card {
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Like icon hover effect */
.card .fa-heart {
  transition: color 0.3s ease, transform 0.3s ease;
}

.card a:hover .fa-heart {
  transform: scale(1.2);
  color: #c0392b !important;
}
/* blog detail 2 */

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px;
}

/* Optional custom section wrapper */

.bi-portfolio-details-img {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 40px;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #fff;
}
.banner-section {
  background: var(--primary-color); /* Light gray background */
  color: #fff;
  animation: fadeInUp 0.8s ease-in-out;
  visibility: visible;
}

.banner-section nav ol {
  padding: 10px 0px !important;
}

.banner-section nav a {
  color: #fff;
}

.banner-section nav .breadcrumb-item.active {
  color: #fff;
}

.post-title {
    font-size: 3.2rem;
    line-height: 58px;
    width: 70%;
}

.post-social-icon {
    height: 95%;
    left: 2rem;
    position: absolute;
    z-index: 9999;
}

.post-social {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 10%;
}

.post-social a:hover {
    background-color: #252c9c;
    text-decoration: none;
    color: #fff;
}

.post-social a {
    align-items: center;
    background-color: #e6dee466;
    border-radius: .75rem;
    display: flex;
    justify-content: center;
    margin-bottom: .5rem;
    padding: .5625rem;
    transition: all .25s ease-in-out;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: none;
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* blog detail 2 */


/*======================
        Footer
========================*/

.footer-bg {
  background-color: #f9f9fb;
  padding: 60px 0 30px;
  font-size: 15px;
  color: #4b4b4b;
  border-top: 1px solid #e9e9e9;
}

.footer-logo img {
  width: 200px;
  margin-bottom: 70px;
}

.footer-bg p {
  margin: 6px 0;
}

.footer-bg a {
  color: #4b4b4b;
  text-decoration: underline;
}

.footer-bg a:hover {
  text-decoration: none;
}

/*======================
      Responsive
========================*/

@media screen and (max-width: 768px) {
  .blog-main {
    flex-direction: column;
  }
}


/* category page */
/* Blog grid container */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

/* Blog card */
/* .blog-card {
  position: relative;
  background: #fff;
  padding: 2rem 1.5rem;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
} */

.category-heading {
  padding-top: 80px;
  padding-bottom: 80px;
}

.category-heading h1 {
  font-size: 3.6rem;
  line-height: 3.3rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.category-heading h2 {
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  width: 80%;
  margin-bottom: 30px;
}

/* Category badge */
/* .blog-card .category {
  display: inline-block;
  background-color: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 0;
  margin-bottom: 4.5rem;
} */

/* Author name */
/* .blog-card .author {
  font-size: 13px;
  color: #7c8295;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
} */

/* Title */
/* .blog-card .title {
  font-size: 20px;
  font-weight: 500;
  color: #1e1e1e;
  line-height: 1.5;
} */

/* Serial number in background */
/* .blog-card::after {
  content: attr(data-index);
  position: absolute;
  top: 10px;
  right: -12px;
  font-size: 60px;
  font-weight: 600;
  color: #f0f0f0;
  z-index: 0;
  pointer-events: none;
} */

/* Background image layer */
/* .blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://craftohtml.themezaa.com/images/blog-images-78.jpg') center center / cover no-repeat;
  opacity: 0;
  transform: scale(1.1);
  transition: all 0.4s ease-in-out;
  z-index: 0;
} */

/* On hover: background appears and zooms out */
/* .blog-card:hover::before {
  opacity: 0.5;
  transform: scale(1);
} */

/* 404 styling */

.error-number {
    font-family: 'AdamantXBold', sans-serif;
    font-size: 144px;
    line-height: 144px;
    color: #ececec;
}
.custom-404-wrapper {
    text-align: center;
    padding: 100px 20px;
    background-color: #f9f9fb;
    color: #555b71;
}

.custom-404-wrapper img {
    max-width: 300px;
    width: 100%;
    margin-bottom: 20px;
    opacity: 0.9;
}

.custom-404-wrapper h1 {
    font-size: 55px;
    font-family: 'AdamantXBold', sans-serif;
    font-weight: 700;
    line-height: 65px;
    margin-bottom: 10px;
}

.custom-404-wrapper p {
    font-size: 16px;
    color: #95a5b9;
}

.hpt-btn-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    background-color: #555b71;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.hpt-btn-3 .icon {
    margin-left: 10px;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.hpt-btn-3:hover {
    background-color: #384057;
    color: #ffffff;
}

.hpt-btn-3:hover .icon {
    transform: translateX(4px);
}

/* block quote */

blockquote {
  position: relative;
    padding: 40px 30px;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    gap: 35px;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    border-top: 3px solid var(--primary-color);
    box-shadow: 0 10px 80px rgb(0 0 0 / 4%);
}

blockquote::before {
  content: "\f10d";
    font-size: 70px;
    color: #000;
    position: absolute;
    top: 15px;
    left: 40px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

blockquote p {
  padding-left: 90px;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
}

blockquote p strong {
  display: block;      /* Forces it onto a new line */
  margin-top: 10px;    /* Adds space above the name */
}

blockquote span {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    color: #111;
}


blockquote footer {
  font-weight: 600;
  color: #000;
  padding-left: 30px;
}

.no-results.not-found {
  max-width: 700px;
  margin: 80px auto;
  padding: 100px 20px;
  text-align: center;
  font-family: 'AdamantXBold', sans-serif;
  color: #555b71;
}

.page-header .page-title {
  font-size: 55px;
  font-weight: 700;
  line-height: 65px;
  margin-bottom: 20px;
  color: #555b71;
  text-align: center;
}

.page-content p {
  font-size: 16px;
  color: #95a5b9;
  margin-bottom: 30px;
}

/* Search Form Styling */
.searchform {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.searchform input[type="text"] {
  padding: 10px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 250px;
  background-color: #fff;
  color: #555b71;
  transition: border-color 0.3s ease;
  font-family: 'Segoe UI', sans-serif;
}

.searchform input[type="text"]:focus {
  border-color: var(--primary-color);
  outline: none;
}

.searchform input[type="submit"] {
  padding: 10px 20px;
  font-size: 16px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: 'Segoe UI', sans-serif;
}

.searchform input[type="submit"]:hover {
  background-color: #c4001d;
}

/** search pagw css **/

.banner-section {
  position: relative;
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
}

.banner-overlay {
  background: linear-gradient(to right, rgba(0, 44, 64, 0.7) 0%, rgba(0, 44, 64, 0.4) 60%, transparent 100%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.auto-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.banner-content {
  z-index: 2;
}

.page-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: 'Segoe UI', sans-serif;
  text-align: left;
}

.breadcrumb-nav {
  display: flex;
  justify-content: start;
  padding: 0 0;
  font-family: var(--ffMain);
}

.breadcrumb-nav .breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
}

.breadcrumbs li:not(:last-child) a {
  font-weight: 700; /* bold */
}

.breadcrumbs li {
  position: relative;
}

.breadcrumbs li::after {
  content: "›";
  margin-left: 10px;
  color: #fff;
}

.breadcrumbs li:last-child::after {
  content: "";
  margin: 0;
}

.breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.breadcrumbs a:hover {
  border-bottom-color: inherit;
}

.breadcrumbs a:hover::after {
    opacity: 1;
}
.breadcrumbs a::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 35%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background-color: #fff;
    opacity: 0;
    transition: opacity 0.1s ease;
}

/* Grid Overlay */
.grid-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  /* background-image: 
    linear-gradient(to right, transparent 60%, rgba(0, 0, 0, 0.04) 60%),
    linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.04) 60%);
  background-size: 130px 130px; */
  background-image: url('https://blog.appfinderguru.com/wp-content/themes/appfinderguru/assets/images/page-title-pattern.png')
}

/** blog -banner gradient */

.page-header-section-gradient {
  position: relative;
  padding: 8rem 0 8rem;
  overflow: hidden;
}

.page-header-section-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 0rem);
  background: radial-gradient(circle at bottom left, #007aee 0%, #012e59 30%);
  background-color: #012e59;
  z-index: 0;
}

/*======================
      Responsive
========================*/

@media screen and (max-width: 767px) {
  .blog-main {
    flex-direction: row;
    padding: 0rem;
  }
  .pl-55 {
    padding-left: 15px;
  }
  .popular-post {
    flex-direction: row !important;
    padding: 0rem;
  }
  .navbar-toggler {
    margin-left: auto;
}
.navbar-brand {
  margin-bottom: auto;
}
.navbar-nav li {
    align-self: self-start;
}
/*
nav ul {
    position: relative;
    right: 100%;
    margin-top: 40px;
} */
 .navbar-nav li:last-child {
    margin-left: 0;
}
.navbar-nav {
  margin-top: 20px;
}
.blog-header h1 {
    font-size: 2.6rem;
    line-height: 2.3rem;
    padding-bottom: 0px;
}
.banner-section {
    height: 280px;
}
.post-title {
    font-size: 2rem;
}
.related-posts h2 {
    font-size: 2.438rem;
    line-height: 3.2rem;
}
blockquote::before {
    font-size: 50px;
}
blockquote p {
    font-size: 15px;
    line-height: 22px;
}
.text-box p {
  width: 100% !important;
}
.hero-img-overlay {
    display: inline-table;
}
.grid-icon {
    width: 3rem;
    height: 6rem;
}
.page-title {
    font-size: 22px;
    margin-bottom: 0px;
}
.footer-bg {
    padding: 30px 0 30px;
}

.page-header-section {
  padding: 8rem 2rem 8rem;
}

}

@media screen and (min-width: 768px) and (max-width: 850px) {
  .blog-header h1 {
    font-size: 2.6rem;
    line-height: 2.3rem;
    padding-bottom: 0px;
}
.blog-main {
    padding: 0rem;
  }
    .popular-post {
      gap: 30px;
      flex-direction: column;
  }
  .popular-post-content {
    padding-left: 0;
}
.category-item:hover .btn {
    display: none;
}
.category-item {
    padding-left: 20px;
}
.blog-card .card-body {
    padding: 1.2rem;
    height: 100%;
}
.blog-header {
        padding: 40px 30px 40px;
    }
  .header-center {
    margin-top: 20px;
}
.category-item:hover .btn {
    display: none;
}
.hero-img-overlay {
    width: calc(50% - 4rem);
}

.page-header-section {
  padding: 4rem 0 6rem;
}

.page-header-section::before {
    width: 60%;
}
.navbar-nav li{
  align-self: start;
  padding-left: 20px;
}

}

@media screen and (max-width: 950px) {

.popular-post {
    gap: 30px;
    flex-direction: column;
}

.popular-post-content {
    padding-left: 0;
}
.category-item:hover .btn {
    display: none;
}
.post-social-icon{
  display: none;
}
}

@media screen and (min-width: 950px) and (max-width: 1300px) {
  .blog-card .card-body {
    padding: 1.2rem;
    height: 100%;
  }  
  .border-end {
    border-right: 0 !important;
}
.popular-post {
    gap: 30px;
    flex-direction: column;
}
.popular-post-content {
    padding-left: 0px;
}
.category-item:hover .btn {
    display: none;
}
.post-social-icon{
  display: none;
}
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

table th, table td {
    color: #000;
    line-height: 20px;
	background-color: #32368033;
    border: 1px solid #323680 !important;
	padding: 10px;
}

table thead tr th {
    background-color: #323680;
    color: #fff;
    font-weight: 600;
    text-align: left;
}