@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply font-sans;
    margin: 0;
}
p:empty{display: none;}
.custom-container {
    @apply container mx-auto max-w-6xl px-6 py-10;
}
.custom-container.with-sidebar {
    @apply grid grid-cols-3 gap-6;
}
.container-not-found {
    @apply custom-container h-full px-6 py-20 flex items-center justify-center
}
h3 {
    @apply text-xl text-grey font-bold my-5;
}
.textarea,
input[type="text"],
input[type="email"],
input[type="url"] {
    @apply w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-pink;
}
.textarea {
    @apply resize-none h-32;
}
.button {
    @apply inline-block px-6 py-3 bg-grey hover:bg-pink cursor-pointer text-white rounded-full hover:bg-opacity-90 transition-all duration-300 ease-in-out mt-4;
}
#backToTop {
    @apply cursor-pointer size-10 hidden items-center justify-center border border-gray-300 rounded-full px-4 py-2 text-sm text-gray-500 hover:bg-gray-100 fixed bottom-4 right-4;
}
/****************************************************************************************/

/* Social Icons */
.social-icons {
    @apply list-none flex mb-0 flex-wrap gap-4;
}
.social-icons li a {@apply text-grey hover:text-pink transition-all duration-300 ease-in-out;}
.social-icons .social-icons-title {
    @apply text-gray-500 hover:text-pink;
}
.image-scale {
    @apply w-full h-full object-cover object-center group-hover:scale-110 transition-all duration-300 ease-in-out;
}
.floating-icon {
    @apply absolute right-4 w-10 h-10 flex items-center justify-center rounded-full bg-pink text-white shadow-lg;
}
.floating-icon-top {
    @apply -top-5;
}
.floating-icon-bottom {
    @apply bottom-4;
}
/****************************************************************************************/

/* Header Css */
header {
    @apply py-10 bg-white relative w-full !border-t-0 !border-l-0 !border-r-0 !px-0;
}

.header-inner {@apply flex flex-col xxs:flex-row gap-4 justify-between lg:justify-normal xxs:items-center;}
#menu-header-menu,
.menu-header-menu-container {
    @apply h-full lg:h-auto;
}
#menu-header-menu {
    @apply flex-col lg:flex-row m-0 lg:ml-12;
}
.navbar-wrap {
    @apply shadow-lg lg:shadow-none fixed lg:relative -translate-x-full lg:translate-x-0 w-64 lg:w-auto h-screen lg:h-auto transition-all duration-300 ease-in-out bg-white top-0 left-0 lg:flex flex-1 items-center basis-0 p-5 lg:p-0 z-50;
}
.navbar-wrap.active {
    @apply translate-x-0;
}
.mobile-menu-overlay {
    @apply fixed inset-x-0 inset-y-0 bg-grey/40 w-full h-full opacity-0 invisible flex justify-end p-5 transition-all duration-300 ease-in-out z-50;
}
.mobile-menu-overlay.active {
    @apply visible opacity-100;
}
.mobile-menu-overlay i {@apply text-grey bg-white rounded-full size-8 flex items-center justify-center text-sm;}
.navbar-wrap .menu {
    @apply flex flex-wrap ms-12;
}
.navbar-wrap .menu li.current-menu-item a {
    @apply text-pink;
}
.navbar-wrap .menu li a {
    @apply block lg:inline-block px-0 lg:px-5 py-2 text-gray-500 text-sm no-underline transition-all duration-300 ease-in-out hover:text-grey;
}
.header-right {
    @apply flex flex-wrap gap-4 sm:gap-6 items-center w-full justify-between xxs:w-auto;
}
.header-buttons {
    @apply flex lg:hidden flex-wrap items-center gap-4;
}
/* #open-menu {
    @apply flex lg:hidden;
} */
/****************************************************************************************/

/* Main Post */
.main-post {
    @apply bottom-12 inset-x-12 absolute z-10;
}
.main-post-wrapper {
    @apply grid grid-cols-1 sm:grid-cols-2 gap-6;
}
.post-shadow {
    @apply bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden;
}
.main-post-image-wrapper {
    @apply relative max-h-72 h-72 overflow-hidden;
}
.post-title {
    @apply text-xl font-bold text-grey lowercase first-letter:capitalize mb-2 leading-snug group-hover:text-pink transition-all duration-300 ease-in-out;
}
.main-post-category {
    @apply flex flex-wrap gap-2 mb-1;
}
.main-post-category .post-text {
    @apply text-sm text-grey font-medium;
}
.main-post-category .post-link {
    @apply text-gray-500 text-sm hover:text-pink transition-all;
}
.main-post-excerpt {
    @apply text-gray-500 text-sm leading-relaxed mt-3;
}
.wrap {
    @apply relative rounded-xl overflow-hidden;
    box-shadow: 0 8px 20px rgb(32 54 86 / .3);
}
.author-wrapper {
    @apply flex items-center text-sm text-gray-400 mb-4 space-x-3;
}
.author-wrapper .author-name {
    @apply block capitalize text-grey text-sm font-medium;
}
.author-link {
    @apply hover:text-pink transition;
}
.author-date {
    @apply text-tiny text-gray-500;
}
.single-post-image-wrapper {
    @apply relative rounded-lg overflow-hidden w-full;
}
.author-details-wrapper {
    @apply p-6 bg-author rounded-lg flex flex-col sm:flex-row gap-2 sm:gap-5 items-start;
}
.author-details-wrapper .author-image-link {
    @apply inline-block w-16 h-16 md:w-24 md:h-24 rounded-full overflow-hidden;
}
.author-details-wrapper .author-info {
    @apply text-xl font-bold text-grey capitalize;
}
.author-details-wrapper .author-text-link {
    @apply font-bold hover:text-pink transition;
}
.author-details-wrapper .author-bio {
    @apply text-gray-500 text-sm mt-2;
}
.author-meta-wrapper {
    /* @apply */
}
/****************************************************************************************/

/* Sidebar About Content Css */
.sidebar-area {
    @apply w-full col-span-3 lg:col-span-1 order-1 lg:order-2;
}
.sidebar .sidebar-wrapper {
    @apply py-8 px-6 border border-gray-200 rounded-xl mb-5;
}
.sidebar .sidebar_about_logo {
    @apply flex flex-col text-center gap-6 relative overflow-hidden;
}
.sidebar .sidebar_about_logo ul {@apply justify-center;}
.sidebar .sidebar_about_logo img {
    @apply mx-auto;
}
.sidebar-tags-wrapper ul li.active-tag a,
.sidebar-categories-wrapper ul li.active-category a {
    @apply text-pink;
}
.sidebar-tags-wrapper ul li.active-tag a {@apply border-pink;}
.sidebar-title {
    @apply text-center mb-4 mt-0;
}
.sidebar-title-border {
    @apply flex justify-center mb-2;
}
.sidebar-about-map {
    @apply w-11/12 absolute inset-x-0 -z-10;
}
.topics-wrapper {
    @apply flex items-center justify-between py-3 last:pb-0 relative after:content-[''] after:block after:h-[1px] after:w-full after:bg-fade-right after:top-0 after:absolute;
}
.topics-wrapper .topics {
    @apply text-grey text-sm font-semibold hover:text-pink relative pl-9;
}
.topics-wrapper .topics-icon {
    @apply absolute left-0 top-1 text-xs text-pink;
}
.topics-wrapper .topics-count {
    @apply text-tiny text-gray-500;
}
.sidebar-about-content {
    @apply text-sm text-gray-500;
}
/****************************************************************************************/

/* Post Pagination */
.nav-links {@apply flex justify-center gap-2.5 mt-16 mb-6 w-full;}
.nav-links .page-numbers {
    @apply bg-white border border-gray-200 rounded-full size-10 flex items-center justify-center text-gray-500 hover:bg-pink hover:border-pink hover:text-white transition-all duration-300 ease-in-out;
}
.nav-links .page-numbers.next,
.nav-links .page-numbers.prev {
    @apply w-auto h-auto;
}
.nav-links .page-numbers.current {
    @apply bg-pink border-pink text-white;
}

/* Single Page */
.single-post p {
    @apply mb-4 last:mb-0
}
.post-description {
    @apply text-gray-500 text-sm py-6;
}
.single-post-category {
    @apply flex flex-wrap gap-2 pb-6;
}
.single-post-category-title {
    @apply bg-pink text-white text-sm px-4 py-1 rounded-full;
}
.single-post-share-icons {
    @apply grid grid-cols-2 items-start py-10 mt-4 border-t border-gray-200;
}
.single-post-share-icons-inner {
    @apply flex gap-2 flex-col;
}
.single-post-share-icons-inner .share-text {
    @apply block text-sm text-gray-500 font-semibold;
}
.post-description ul, .post-description ol {
    @apply list-disc list-inside mb-4 last:mb-0;
}
.post-description a {@apply text-grey hover:text-pink transition-all duration-300 ease-in-out;}
.single-post-title {
    @apply text-4xl font-bold text-grey mb-3 leading-snug lowercase first-letter:capitalize;
}

/****************************************************************************************/

/* Comment Form */
.children {
    @apply ml-2.5 md:ml-10 mt-4 pl-5 border-l border-gray-200 space-y-4;
}
.comment-reply-link {
    @apply hover:text-pink transition;
}
.comment-reply-title {
    @apply mb-0;
}
.comment-notes,
.logged-in-as {
    @apply text-grey text-sm;
}
.logged-in-as a {@apply text-grey  font-semibold hover:text-pink transition-all duration-300 ease-in-out;}
.logged-in-as .required-field-message {
    @apply hidden;
}
.required-field-message {@apply block;}
.required-field-message .required {@apply text-red-400;}
#commentform label {
    @apply text-sm font-bold text-grey;
}
#commentform .comment-form-cookies-consent label {
    @apply font-normal;
}
.comment-wrapper {
    @apply bg-gray-100 hover:!bg-gray-300 transition rounded-md px-3 py-2;
}
.comment-text {
    @apply text-sm text-gray-700 leading-relaxed;
}
.author-badge {
    @apply text-[10px] bg-pink text-white px-1.5 py-0.5 leading-3 rounded-full font-medium;
}
.author-username {
    @apply font-semibold text-sm text-[#283656] capitalize;
}
.comment-meta-wrapper {
    @apply flex items-center gap-4 mt-1 text-xs text-gray-500;
}
.comment-respond {@apply mt-12;}
/****************************************************************************************/

/* Single Page Pagination */
.single-post .nav-links {@apply flex-col sm:flex-row justify-between gap-6 mt-0 mb-0;}
.single-post .nav-links .nav-previous,
.single-post .nav-links .nav-next { @apply rounded-lg border border-gray-200 p-8 text-lg leading-6 text-grey font-bold hover:text-pink transition-all duration-300 ease-in-out w-full sm:max-w-96;}
.single-post .nav-links .nav-next {@apply text-end;}
.single-post-pagination {
    @apply flex justify-between items-center mt-10 border-t pt-10;
}
.single-post-pagination .pagination-text {
    @apply text-gray-500 text-sm font-normal inline-block mb-2;
}
.single-post-pagination .pagination-link {
    @apply block font-bold;
}
.post-media {@apply mt-10;}
.post-media img {@apply w-full rounded-lg;}
.post-media iframe {@apply w-full h-[500px] rounded-lg;}
.swiper-button-next:after, .swiper-button-prev:after {
    @apply text-2xl text-gray-500 hover:text-pink;
}
/****************************************************************************************/

/* Content Area */
.content-area {
    @apply w-full col-span-3 lg:col-span-2 order-2 lg:order-1;
}

/* Breadcrumbs */
.breadcrumbs {
    @apply text-sm text-gray-500 mb-4;
}
.archive-main-wrap {@apply pt-10 pb-0 px-6;}
.archive-main-wrap p {@apply text-sm text-gray-500 mt-2;}
.archive-wrapper {
    @apply text-xl font-bold text-gray-800 leading-snug flex gap-2 items-center flex-wrap;
}
.archive-wrapper .archive-selected-category {
    @apply inline-block px-3 py-1.5 rounded-full border border-gray-200 text-gray-500 text-sm font-normal;
}
.archive-wrapper-wtih-filter {
    @apply justify-between;
}
.tags-wrapper {
    @apply mt-10 flex flex-wrap gap-x-2 gap-y-2;
}
.category-wrapper {
    @apply mt-10;
}

.tags {
    @apply inline-block px-3 py-1.5 rounded-full border border-gray-200 text-gray-500 text-sm font-normal hover:border-pink hover:text-pink transition-all duration-300 ease-in-out;
}
.clear-all {
    @apply flex items-center gap-1 no-underline text-sm text-grey hover:text-pink transition-all;
}

/******************************************************************************************************/
/* Author Page */
.author-post-wrapper {
    @apply flex flex-col lg:flex-row flex-wrap lg:py-6 lg:px-6 lg:gap-6;
}
.author-post-image {
    @apply relative max-h-72 h-72 lg:w-72 lg:rounded-lg overflow-hidden;
}
.author-post-content {
    @apply relative p-6 lg:p-0 w-full lg:w-[calc(100%-312px)];
}
/********************************************************************************************************/
/* 404 Page */
.not-found-title {
    @apply text-5xl text-grey font-bold mb-0 mt-0 capitalize;
}
.not-found-sub-title {
    @apply text-xl font-semibold text-grey mb-4 mt-2;
}
.not-found-description {
    @apply text-gray-500 text-sm leading-relaxed my-3;
}
.read-more {
    @apply text-grey font-medium inline-block;
}
.popular-post-wrapper {
    @apply relative flex gap-4 xl:gap-6 py-6 last:pb-0 after:content-[''] after:block after:h-[1px] after:w-full after:bg-fade-left after:bottom-0 after:absolute last:after:hidden;
}
.popular-post-image {
    @apply w-12 h-12 xl:w-16 xl:h-16 rounded-full overflow-hidden shrink-0;
}
.popular-post-content-wrapper {
    @apply text-sm text-grey;
}
.popular-post-title {
    @apply block lowercase first-letter:capitalize font-semibold leading-5 group-hover:text-pink transition-all duration-300 ease-in-out;
}
/**********************************************************************************************************************************************/
.search-form {
    @apply relative flex-1;
}
.search-form input[type="search"] {
    @apply border border-gray-200 rounded-lg overflow-hidden ps-3 pe-10 py-2 focus:outline-none focus:ring-0 w-full text-sm text-gray-400 placeholder:text-gray-500;
}
.search-form button {
    @apply absolute right-3 top-1/2 -translate-y-1/2 text-gray-200;
}