@import url("variable.css");


@media (max-width: 540px) {


   	.author-hero {
		padding-top: 32px;
	}
	.author-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 24px;
		padding-bottom: 32px;
	}
	.author-avatar {
		width: 120px;
		height: 120px;
	}
	.author-info {
		align-items: center;
		text-align: center;
	}
	.author-topics {
		align-items: center;
	}
	.author-chips,
	.author-socials {
		justify-content: center;
	}
	.author-stats {
		width: 100%;
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}
	.author-stat {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px;
	}
	.author-stat + .author-stat {
		border-inline-start: 0;
		border-top: 1px solid var(--color-border);
	}
	.author-stat-value {
		font-size: 20px;
		order: 2;
	}
	.slider-heading {
		margin-bottom: 20px;
	}
	.slider-wide .slider-arrow {
		padding: 2px;
	}
	.slider-wide .slider-arrow svg {
		width: 20px;
		height: 20px;
	}

	
    .live-search-results{
        height: fit-content;
          min-height: 200px;
          padding: 20px;
          margin: 20px;
          overflow-y: auto;
    }
    .cat-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 24px;
    }
	.data-table-head-bar {
		padding: 16px;
	}

	.data-table-th,
	.data-table-td {
		padding: 12px 16px;
	}
	.slider-cart a {
		max-width: 290px;
	}
	.blog-detail-btn-box {
		flex-direction: column;
		justify-content: start;
		align-items: start;

		:is(& > *) {
			&:last-child {
				margin-inline-start: 15px;
			}
		}
	}
	.vector-logo {
		width: 32px;
		height: 32px;
	}
	.blog-detail-features {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.breadcrumb-list {
		max-width: 90%;
	}
	.blog-detail-box-hero {
		display: none;
	}
	.blog-detail-herosection-inner {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 5px !important;
	}
	.title-section-font {
		font-size: 30px;
		line-height: 1.25;
	}

	.title-section-sm-font {
		font-size: 16px;
		line-height: 1.4;
	}

	.get-started-btn {
		font-size: 13px;
		line-height: 1.4;
	}

	.main-1-font {
		font-size: 20px;
		line-height: 1.35;
	}

	.main-2-font {
		font-size: 16px;
		line-height: 1.6;
	}

	.main-3-font {
		font-size: 14px;
		line-height: 1.6;
	}

	.footer-links-font {
		font-size: 11px;
		line-height: 1.6;
	}

	.caption-font,
	.caption-mute-font {
		font-size: 13px;
		line-height: 1.6;
	}

	.text-font {
		font-size: 13px;
		line-height: 1.6;
	}

	/* //////////////////////////////// */
	.subscribe-section {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.social-media-footer-moblie {
		width: 100%;
		justify-content: space-evenly !important;
		padding: 40px;
	}
	.popular-features-list-links {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.selection-layout {
		flex-direction: column;
	}

	.selection-options {
		flex: 0 0 auto;

		width: 100%;
	}

	.selection-options-grid {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 16px;
	}


	.selection-card {
		min-height: 200px;
	}

	.selection-form-wrapper {
		flex: 0 0 auto;

		width: 100%;
	}

	.selection-form {
		padding: 24px 0;
	}

	.respnsive-explore-img {
		width: fit-content !important;
		height: 80px;
		width: 100px !important;
	}

	.explore-item-context {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.explore-items {
		flex-direction: column;
	}
	.desktop-list {
		display: block;
	}

	.explore-item {
		display: flex;
	}

	.desktop-list-item {
		display: none;
	}

	.desktop-list-item:nth-child(2),
	.desktop-list-item:nth-child(3) {
		display: block;
	}

	.full-w-in-mobile {
		width: 100% !important;
	}

	.services-post-image-wrapper {
		min-width: 100px;
		max-width: 100px;
		overflow: hidden;
	}

	.blog-interrupter-card {
		max-height: fit-content;
		padding-left: 10px;
		gap: 40px;

		padding-top: 24px;
		padding-bottom: 24px;
		padding-right: 10px;
		:is(& > *) {
			max-height: fit-content;
			margin: 0 !important;
		}
	}

	.video-carousel-header {
		gap: 15px;
	}
	.video-carousel-section {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	.video-carousel-button {
		width: 36px;
		height: 36px;
	}

	.video-card {
		flex-basis: 100%;
		padding-inline: 0;
	}

	/* //////////////////////////////// */
	.hidden-l {
		display: block !important;
	}
	.hidden-mt {
		display: none;
	}
	.box-marketing {
		width: 100%;
	}
	.market-wrapper {
		flex-direction: column !important;
	}
	.featured-post-image-wrapper {
		display: block;
	}
	.featured-post-image-horizontal-card {
		width: 100px;
		max-width: 100px;
	}

	.horizontal-featured-post-context {
		min-height: 67px;
	}
	.horizontal-captiopn {
		display: none;
	}
	.horizontal-featured-post-title {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	section {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.featured-posts-container {
		width: 100% !important;
		flex-shrink: 1;
	}

	.featured-posts-wrapper.flex-justify-center-top {
		flex-direction: column;
	}

	.logo {
		height: 30px;
	}
	.search-form {
		padding: 10px 16px;
	}
	.top-bar {
		display: none;
	}

	/* =================================================
       DESKTOP NAVIGATION OFF
       ================================================= */

	.main-navigation,
	.mega-menu,
	.search-panel {
		display: none !important;
	}

	/* =================================================
       MOBILE HEADER
       ================================================= */

	.mobile-header {
		display: flex;

		min-height: 64px;
	}

	/* =================================================
       HAMBURGER BUTTON
       ================================================= */

	.mobile-menu-toggle {
		display: flex;

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 4px;

		width: 40px;

		height: 40px;

		padding: 0;

		border: 0;

		border-radius: 8px;

		background: transparent;

		cursor: pointer;
	}

	.mobile-menu-toggle:hover {
		background-color: var(--color-background-secondary);
	}

	.hamburger-line {
		display: block;

		width: 20px;

		height: 2px;

		border-radius: 999px;

		background-color: var(--color-text);

		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	/* =================================================
       HAMBURGER
       ================================================= */

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* =================================================
       MOBILE NAVIGATION CONTAINER
       ================================================= */

	.mobile-navigation {
		position: absolute;

		top: 100%;

		left: 0;

		width: 100%;

		display: none;

		background-color: var(--color-surface);

		border-top: 1px solid var(--color-border);

		border-bottom: 1px solid var(--color-border);

		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

		z-index: 1200;
	}

	.mobile-navigation.is-open {
		display: block;
	}

	/* =================================================
       MOBILE LEVEL
       ================================================= */

	.mobile-navigation-level {
		width: 100%;
	}

	.mobile-main-level {
		display: flex;

		flex-direction: column;

		padding: 8px 0;
	}

	/* =================================================
       MAIN MOBILE ITEMS
       ================================================= */

	.mobile-nav-item {
		display: flex;

		align-items: center;

		justify-content: space-between;

		width: 100%;

		min-height: 52px;

		padding: 12px 16px;

		border: 0;

		background: transparent;

		color: var(--color-text);

		text-align: left;

		cursor: pointer;
	}

	.mobile-nav-item:hover {
		background-color: var(--color-background-secondary);
	}

	.mobile-nav-chevron {
		line-height: 1;

		color: var(--color-text-muted);
	}

	/* =================================================
       MOBILE GET STARTED
       ================================================= */

	.mobile-get-started {
		display: flex;

		align-items: center;

		justify-content: center;

		min-height: 40px;

		margin: 8px 16px;

		padding: 10px 16px;

		border-radius: 99999px !important;

		background-color: var(--color-primary-button);

		color: #f1f1f1 !important;

		text-decoration: none;
	}

	.mobile-get-started:hover {
		opacity: 0.9;
	}

	/* =================================================
       SUB LEVEL
       ================================================= */

	.mobile-sub-level {
		display: none;

		flex-direction: column;
	}

	.mobile-sub-level.is-active {
		display: flex;
	}

	/* =================================================
       BACK BUTTON
       ================================================= */

	.mobile-back-button {
		display: flex;

		align-items: center;

		gap: 8px;

		width: 100%;

		min-height: 52px;

		padding: 12px 16px;

		border: 0;

		border-bottom: 1px solid var(--color-border);

		background-color: var(--color-background-secondary);

		color: var(--color-text);

		cursor: pointer;
	}

	.mobile-back-button:hover {
		background-color: var(--color-surface-secondary);
	}

	.mobile-back-button span:first-child {
		line-height: 1;
	}

	/* =================================================
       SUB ITEMS
       ================================================= */

	.mobile-sub-items {
		display: flex;

		flex-direction: column;

		padding: 8px 0;
	}

	.mobile-sub-item {
		display: flex;

		align-items: center;

		width: 100%;

		min-height: 50px;

		padding: 12px 16px;

		color: var(--color-text);

		text-decoration: none;

		line-height: 1.4;
	}

	.mobile-sub-item:hover {
		background-color: var(--color-background-secondary);

		color: var(--color-text);
	}

	/* =================================================
       MOBILE SEARCH
       ================================================= */

	.mobile-search-level {
		display: none;

		padding: 16px;
	}

	.mobile-search-level.is-active {
		display: block;
	}

	.mobile-search-form {
		width: 100%;
	}

	.mobile-search-input {
		width: 100%;

		min-height: 46px;

		padding: 10px 14px;

		border: 1px solid var(--color-border);

		border-radius: 8px;

		background: var(--color-background);

		color: var(--color-text);

		outline: none;
	}

	.mobile-search-input:focus {
		border-color: var(--color-primary);

		box-shadow: 0 0 0 3px rgba(37, 226, 164, 0.15);
	}

	/* =================================================
       CONTAINER
       ================================================= */

	.container-inner {
		padding-inline: 12px;
	}


	.featured-post.services-card {
		--img-cols: 4;
		--text-cols: 8;
		column-gap: 12px;
	}
}

@media (min-width: 540px) and (max-width: 768px) {
    .author-hero {
		padding-top: 40px;
	}
	.author-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 28px;
		padding-bottom: 36px;
	}
	.author-avatar {
		width: 140px;
		height: 140px;
	}
	.author-info {
		align-items: center;
		text-align: center;
	}
	.author-topics {
		align-items: center;
	}
	.author-chips,
	.author-socials {
		justify-content: center;
	}
	.author-stats {
		width: 100%;
	}
	.author-stat {
		padding: 16px 18px;
	}
	.author-stat-value {
		font-size: 22px;
	}
	.slider-wide .slider-arrow {
		padding: 3px;
	}
    .live-search-results{
        height: fit-content;
        min-height: 200px;
        padding: 20px;
        margin: 20px;
        overflow-y: auto;
    }

    .cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
	.data-table-head-bar {
		padding: 16px;
	}

	.data-table-th,
	.data-table-td {
		padding: 12px 16px;
	}
	.blog-detail-features {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.breadcrumb-list {
		max-width: 70%;
	}
	.blog-detail-box-hero {
		display: none;
	}
	.blog-detail-herosection-inner {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 5px !important;
	}
	.social-media-footer-moblie {
		width: 90%;
		margin: 0 auto;
		justify-content: space-evenly !important;
		padding: 40px;
	}

	.popular-features-list-links {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.selection-layout {
		flex-direction: column;
	}

	.selection-options {
		flex: 0 0 auto;

		width: 100%;
	}

	.selection-options-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.selection-card {
		min-height: 200px;
	}

	.selection-form-wrapper {
		flex: 0 0 auto;

		width: 100%;
	}

	.selection-form {
		padding: 24px;
	}
	.respnsive-explore-img {
		width: fit-content !important;
		height: 80px;
		width: 170px !important;
	}

	.explore-item-context {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.explore-items {
		flex-direction: column;
	}
	.desktop-list {
		display: block;
	}

	.explore-item {
		display: flex;
	}
	.desktop-list-item {
		display: none;
	}

	.desktop-list-item:nth-child(2),
	.desktop-list-item:nth-child(3) {
		display: block;
	}
	.blog-interrupter-card {
		max-height: fit-content;
		padding-left: 40px;
		padding-top: 24px;
		gap: 40px;
		padding-bottom: 24px;
		padding-right: 40px;
		:is(& > *) {
			max-height: fit-content;
			margin: 0 !important;
		}
	}
	.video-carousel-header {
		gap: 0;
	}

	.video-carousel-button {
		width: 36px;
		height: 36px;
	}

	.video-card {
		flex-basis: 100%;
		padding-inline: 0;
	}

	.hidden-l {
		display: block !important;
	}
	.hidden-mt {
		display: none;
	}
	.box-marketing {
		width: 100%;
	}
	.market-wrapper {
		flex-direction: column !important;
	}
	.featured-post-image-wrapper {
		display: block;
	}
	.horizontal-featured-post-title {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.horizontal-captiopn {
		display: none;
	}
	section {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.featured-posts-container {
		width: 100% !important;
		flex-shrink: 1;
	}
	.featured-posts-wrapper.flex-justify-center-top {
		flex-direction: column;
	}
	.search-form {
		padding: 10px 16px;
	}
	.top-bar {
		display: none;
	}

	/* =================================================
       DESKTOP NAVIGATION OFF
       ================================================= */

	.main-navigation,
	.mega-menu,
	.search-panel {
		display: none !important;
	}

	/* =================================================
       MOBILE HEADER
       ================================================= */

	.mobile-header {
		display: flex;

		min-height: 64px;
	}

	/* =================================================
       HAMBURGER BUTTON
       ================================================= */

	.mobile-menu-toggle {
		display: flex;

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 4px;

		width: 40px;

		height: 40px;

		padding: 0;

		border: 0;

		border-radius: 8px;

		background: transparent;

		cursor: pointer;
	}

	.mobile-menu-toggle:hover {
		background-color: var(--color-background-secondary);
	}

	.hamburger-line {
		display: block;

		width: 20px;

		height: 2px;

		border-radius: 999px;

		background-color: var(--color-text);

		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	/* =================================================
       HAMBURGER → X
       ================================================= */

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* =================================================
       MOBILE NAVIGATION CONTAINER
       ================================================= */

	.mobile-navigation {
		position: absolute;

		top: 100%;

		left: 0;

		width: 100%;

		display: none;

		background-color: var(--color-surface);

		border-top: 1px solid var(--color-border);

		border-bottom: 1px solid var(--color-border);

		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

		z-index: 1200;
	}

	.mobile-navigation.is-open {
		display: block;
	}

	/* =================================================
       MOBILE LEVEL
       ================================================= */

	.mobile-navigation-level {
		width: 100%;
	}

	.mobile-main-level {
		display: flex;

		flex-direction: column;

		padding: 8px 0;
	}

	/* =================================================
       MAIN MOBILE ITEMS
       ================================================= */

	.mobile-nav-item {
		display: flex;

		align-items: center;

		justify-content: space-between;

		width: 100%;

		min-height: 52px;

		padding: 12px 16px;

		border: 0;

		background: transparent;

		color: var(--color-text);

		text-align: left;

		cursor: pointer;
	}

	.mobile-nav-item:hover {
		background-color: var(--color-background-secondary);
	}

	.mobile-nav-chevron {
		line-height: 1;

		color: var(--color-text-muted);
	}

	/* =================================================
       MOBILE GET STARTED
       ================================================= */

	.mobile-get-started {
		display: flex;

		align-items: center;

		justify-content: center;

		min-height: 40px;

		margin: 8px 16px;

		padding: 10px 16px;

		border-radius: 9999999px !important;

		background-color: var(--color-primary-button);

		color: #f1f1f1 !important;

		text-decoration: none;
	}

	.mobile-get-started:hover {
		opacity: 0.9;
	}

	/* =================================================
       SUB LEVEL
       ================================================= */

	.mobile-sub-level {
		display: none;

		flex-direction: column;
	}

	.mobile-sub-level.is-active {
		display: flex;
	}

	/* =================================================
       BACK BUTTON
       ================================================= */

	.mobile-back-button {
		display: flex;

		align-items: center;

		gap: 8px;

		width: 100%;

		min-height: 52px;

		padding: 12px 16px;

		border: 0;

		border-bottom: 1px solid var(--color-border);

		background-color: var(--color-background-secondary);

		color: var(--color-text);

		cursor: pointer;
	}

	.mobile-back-button:hover {
		background-color: var(--color-surface-secondary);
	}

	.mobile-back-button span:first-child {
		line-height: 1;
	}

	/* =================================================
       SUB ITEMS
       ================================================= */

	.mobile-sub-items {
		display: flex;

		flex-direction: column;

		padding: 8px 0;
	}

	.mobile-sub-item {
		display: flex;

		align-items: center;

		width: 100%;

		min-height: 50px;

		padding: 12px 16px;

		color: var(--color-text);

		text-decoration: none;
		line-height: 1.4;
	}

	.mobile-sub-item:hover {
		background-color: var(--color-background-secondary);

		color: var(--color-text);
	}

	/* =================================================
       MOBILE SEARCH
       ================================================= */

	.mobile-search-level {
		display: none;

		padding: 16px;
	}

	.mobile-search-level.is-active {
		display: block;
	}

	.mobile-search-form {
		width: 100%;
	}

	.mobile-search-input {
		width: 100%;

		min-height: 46px;

		padding: 10px 14px;

		border: 1px solid var(--color-border);

		border-radius: 8px;

		background: var(--color-background);

		color: var(--color-text);
		outline: none;
	}

	.mobile-search-input:focus {
		border-color: var(--color-primary);

		box-shadow: 0 0 0 3px rgba(37, 226, 164, 0.15);
	}

	/* =================================================
       CONTAINER
       ================================================= */

	.container-inner {
		padding-inline: 12px;
	}
}

@media (min-width: 768px) and (max-width: 900px) {
    .live-search-results{
        height: fit-content;
          min-height: 200px;
          padding: 20px;
          margin: 20px;
          overflow-y: auto;
    }
    .cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
	.breadcrumb-list {
		max-width: 60%;
	}
	.blog-detail-herosection-inner {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.social-media-footer-moblie {
		width: 70%;
		margin: 0 auto;
		justify-content: space-evenly !important;
		padding: 40px;
	}
	.popular-features-list-links {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.selection-layout {
		flex-direction: column;
	}

	.selection-options {
		flex: 0 0 auto;

		width: 100%;
	}

	.selection-options-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.selection-card {
		min-height: 200px;
	}

	.selection-form-wrapper {
		flex: 0 0 auto;

		width: 100%;
	}

	.selection-form {
		padding: 24px;
	}
	.desktop-list {
		display: block;
	}

	.desktop-list-item {
		display: none;
	}

	.desktop-list-item:nth-child(2),
	.desktop-list-item:nth-child(3) {
		display: block;
	}
	.blog-interrupter-card {
		max-height: 368px;
		padding-left: 40px;
		padding-top: 24px;
		padding-bottom: 24px;
		padding-right: 40px;
		:is(& > *) {
			max-height: 245px;
			margin: 0 !important;
		}
	}
	.video-card {
		flex-basis: 50%;
	}

	.hidden-l {
		display: block !important;
	}
	.hidden-mt {
		display: none;
	}
	.box-marketing {
		width: 100%;
	}
	.market-wrapper {
		flex-direction: column !important;
	}
	.featured-post-image-wrapper {
		display: block;
	}
	.horizontal-featured-post-title {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.featured-posts-container {
		width: 100% !important;
		flex-shrink: 1;
	}
	.search-form {
		padding: 10px 16px;
	}
	.top-bar {
		display: none;
	}

	/* =================================================
       DESKTOP NAVIGATION OFF
       ================================================= */

	.main-navigation,
	.mega-menu,
	.search-panel {
		display: none !important;
	}

	/* =================================================
       MOBILE HEADER
       ================================================= */

	.mobile-header {
		display: flex;

		min-height: 64px;
	}

	/* =================================================
       HAMBURGER BUTTON
       ================================================= */

	.mobile-menu-toggle {
		display: flex;

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 4px;

		width: 40px;

		height: 40px;

		padding: 0;

		border: 0;

		border-radius: 8px;

		background: transparent;

		cursor: pointer;
	}

	.mobile-menu-toggle:hover {
		background-color: var(--color-background-secondary);
	}

	.hamburger-line {
		display: block;

		width: 20px;

		height: 2px;

		border-radius: 999px;

		background-color: var(--color-text);

		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	/* =================================================
       HAMBURGER → X
       ================================================= */

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* =================================================
       MOBILE NAVIGATION CONTAINER
       ================================================= */

	.mobile-navigation {
		position: absolute;

		top: 100%;

		left: 0;

		width: 100%;

		display: none;

		background-color: var(--color-surface);

		border-top: 1px solid var(--color-border);

		border-bottom: 1px solid var(--color-border);

		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

		z-index: 1200;
	}

	.mobile-navigation.is-open {
		display: block;
	}

	/* =================================================
       MOBILE LEVEL
       ================================================= */

	.mobile-navigation-level {
		width: 100%;
	}

	.mobile-main-level {
		display: flex;

		flex-direction: column;

		padding: 8px 0;
	}

	/* =================================================
       MAIN MOBILE ITEMS
       ================================================= */

	.mobile-nav-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
		padding: 12px 16px;
		border: 0;
		background: transparent;
		color: var(--color-text);
		text-align: left;
		cursor: pointer;
	}

	.mobile-nav-item:hover {
		background-color: var(--color-background-secondary);
	}

	.mobile-nav-chevron {
		line-height: 1;
		color: var(--color-text-muted);
	}

	/* =================================================
       MOBILE GET STARTED
       ================================================= */

	.mobile-get-started {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		margin: 8px 16px;
		padding: 10px 16px;
		border-radius: 99999px !important;
		background-color: var(--color-primary-button);
		color: #f1f1f1 !important;
		text-decoration: none;
	}

	.mobile-get-started:hover {
		opacity: 0.9;
	}

	/* =================================================
       SUB LEVEL
       ================================================= */

	.mobile-sub-level {
		display: none;

		flex-direction: column;
	}

	.mobile-sub-level.is-active {
		display: flex;
	}

	/* =================================================
       BACK BUTTON
       ================================================= */

	.mobile-back-button {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		min-height: 52px;
		padding: 12px 16px;
		border: 0;
		border-bottom: 1px solid var(--color-border);
		background-color: var(--color-background-secondary);
		color: var(--color-text);
		cursor: pointer;
	}

	.mobile-back-button:hover {
		background-color: var(--color-surface-secondary);
	}

	.mobile-back-button span:first-child {
		line-height: 1;
	}

	/* =================================================
       SUB ITEMS
       ================================================= */

	.mobile-sub-items {
		display: flex;

		flex-direction: column;

		padding: 8px 0;
	}

	.mobile-sub-item {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 50px;
		padding: 12px 16px;
		color: var(--color-text);
		text-decoration: none;
		line-height: 1.4;
	}

	.mobile-sub-item:hover {
		background-color: var(--color-background-secondary);

		color: var(--color-text);
	}

	/* =================================================
       MOBILE SEARCH
       ================================================= */

	.mobile-search-level {
		display: none;

		padding: 16px;
	}

	.mobile-search-level.is-active {
		display: block;
	}

	.mobile-search-form {
		width: 100%;
	}

	.mobile-search-input {
		width: 100%;
		min-height: 46px;
		padding: 10px 14px;
		border: 1px solid var(--color-border);
		border-radius: 8px;
		background: var(--color-background);
		color: var(--color-text);
		outline: none;
	}

	.mobile-search-input:focus {
		border-color: var(--color-primary);

		box-shadow: 0 0 0 3px rgba(37, 226, 164, 0.15);
	}

	/* =================================================
       CONTAINER
       ================================================= */

	.container-inner {
		padding-inline: 12px;
	}

	.featured-posts-wrapper.flex-justify-center-top {
		flex-direction: column;
	}
	section {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.horizontal-captiopn {
		display: none;
	}

	.featured-post.services-card {
		--img-cols: 5;
		--text-cols: 7;
		column-gap: 12px;
	}
}

@media (min-width: 900px) and (max-width: 1080px) {
    .live-search-results{
        height: fit-content;
          min-height: 200px;
          padding: 20px;
          margin: 20px;
          overflow-y: auto;
    }
    .cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
	.blog-detail-herosection-inner {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.social-media-footer-moblie {
		width: 70%;
		margin: 0 auto;
		justify-content: space-evenly !important;
		padding: 40px;
	}
	.blog-interrupter-card {
		max-height: 368px;
		padding-left: 106px;
		padding-top: 48px;
		padding-bottom: 48px;
		padding-right: 106px;
		:is(& > *) {
			max-height: 245px;
			margin: 0 !important;
		}
	}
	.hidden-l {
		display: block !important;
	}
	.hidden-mt {
		display: none;
	}
	.box-marketing {
		width: 100%;
	}
	.market-wrapper {
		flex-direction: column !important;
	}
	.featured-post-image-wrapper {
		display: block;
	}
	.horizontal-captiopn {
		display: none;
	}
	.search-form {
		padding: 10px 16px;
	}
	.top-bar {
		display: none;
	}

	/* =================================================
       DESKTOP NAVIGATION OFF
       ================================================= */

	.main-navigation,
	.mega-menu,
	.search-panel {
		display: none !important;
	}

	/* =================================================
       MOBILE HEADER
       ================================================= */

	.mobile-header {
		display: flex;

		min-height: 64px;
	}

	/* =================================================
       HAMBURGER BUTTON
       ================================================= */

	.mobile-menu-toggle {
		display: flex;

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 4px;

		width: 40px;

		height: 40px;

		padding: 0;

		border: 0;

		border-radius: 8px;

		background: transparent;

		cursor: pointer;
	}

	.mobile-menu-toggle:hover {
		background-color: var(--color-background-secondary);
	}

	.hamburger-line {
		display: block;

		width: 20px;

		height: 2px;

		border-radius: 999px;

		background-color: var(--color-text);

		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	/* =================================================
       HAMBURGER → X
       ================================================= */

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle.is-open .hamburger-line:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* =================================================
       MOBILE NAVIGATION CONTAINER
       ================================================= */

	.mobile-navigation {
		position: absolute;

		top: 100%;

		left: 0;

		width: 100%;

		display: none;

		background-color: var(--color-surface);

		border-top: 1px solid var(--color-border);

		border-bottom: 1px solid var(--color-border);

		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

		z-index: 1200;
	}

	.mobile-navigation.is-open {
		display: block;
	}

	/* =================================================
       MOBILE LEVEL
       ================================================= */

	.mobile-navigation-level {
		width: 100%;
	}

	.mobile-main-level {
		display: flex;

		flex-direction: column;

		padding: 8px 0;
	}

	/* =================================================
       MAIN MOBILE ITEMS
       ================================================= */

	.mobile-nav-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
		padding: 12px 16px;
		border: 0;
		background: transparent;
		color: var(--color-text);
		text-align: left;
		cursor: pointer;
	}

	.mobile-nav-item:hover {
		background-color: var(--color-background-secondary);
	}

	.mobile-nav-chevron {
		line-height: 1;

		color: var(--color-text-muted);
	}

	/* =================================================
       MOBILE GET STARTED
       ================================================= */

	.mobile-get-started {
		display: flex;

		align-items: center;

		justify-content: center;

		min-height: 40px;

		margin: 8px 16px;

		padding: 10px 16px;

		border-radius: 999999px !important;

		background-color: var(--color-primary-button);

		color: #f1f1f1 !important;

		text-decoration: none;
	}

	.mobile-get-started:hover {
		opacity: 0.9;
	}

	/* =================================================
       SUB LEVEL
       ================================================= */

	.mobile-sub-level {
		display: none;

		flex-direction: column;
	}

	.mobile-sub-level.is-active {
		display: flex;
	}

	/* =================================================
       BACK BUTTON
       ================================================= */

	.mobile-back-button {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		min-height: 52px;
		padding: 12px 16px;
		border: 0;
		border-bottom: 1px solid var(--color-border);
		background-color: var(--color-background-secondary);
		color: var(--color-text);
		cursor: pointer;
	}

	.mobile-back-button:hover {
		background-color: var(--color-surface-secondary);
	}

	.mobile-back-button span:first-child {
		line-height: 1;
	}

	/* =================================================
       SUB ITEMS
       ================================================= */

	.mobile-sub-items {
		display: flex;

		flex-direction: column;

		padding: 8px 0;
	}

	.mobile-sub-item {
		display: flex;

		align-items: center;

		width: 100%;

		min-height: 50px;

		padding: 12px 16px;

		color: var(--color-text);

		text-decoration: none;

		line-height: 1.4;
	}

	.mobile-sub-item:hover {
		background-color: var(--color-background-secondary);

		color: var(--color-text);
	}

	/* =================================================
       MOBILE SEARCH
       ================================================= */

	.mobile-search-level {
		display: none;

		padding: 16px;
	}

	.mobile-search-level.is-active {
		display: block;
	}

	.mobile-search-form {
		width: 100%;
	}

	.mobile-search-input {
		width: 100%;

		min-height: 46px;

		padding: 10px 14px;

		border: 1px solid var(--color-border);

		border-radius: 8px;

		background: var(--color-background);

		color: var(--color-text);

		outline: none;
	}

	.mobile-search-input:focus {
		border-color: var(--color-primary);

		box-shadow: 0 0 0 3px rgba(37, 226, 164, 0.15);
	}

	/* =================================================
       CONTAINER
       ================================================= */

	.container-inner {
		padding-inline: 12px;
	}
	.popular-features-list-links {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.featured-post.services-card {
		--img-cols: 4;
		--text-cols: 8;
	}
}

@media (min-width: 1080px) {
   	.featured-post.services-card {
		--img-cols: 6;
		--text-cols: 6;
	}
	.blog-interrupter-card {
		max-height: 368px;
		padding-left: 106px;
		padding-top: 48px;
		padding-bottom: 48px;
		padding-right: 106px;
		:is(& > *) {
			max-height: 245px;
			margin: 0 !important;
		}
	}
}