/* Docs Page Section - Mobile */
@media screen and (max-width: 1368px) {
	.docs-page-section {
		padding: 24px 0 40px 0;
	}

	.docs-container {
		padding: 0 16px;
	}

	.docs-header {
		margin-bottom: 32px;
	}

	.docs-title {
		font-size: 32px;
		margin-bottom: 12px;
	}

	.docs-description {
		font-size: 16px;
	}

	.docs-search-wrapper {
		margin-bottom: 10px;
	}

	.docs-search-bar {
		padding: 12px;
		gap: 12px;
	}

	.docs-search-input {
		width: 200px;
		padding: 12px;
		font-size: 14px;
	}

	.docs-search-btn {
		width: 100%;
		margin-left: 0;
		padding: 14px 24px;
	}

	.docs-content-wrapper {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 12px;
		margin-bottom: 30px;
	}

	.docs-sidebar {
		position: static;
		max-height: none;
		overflow-y: visible;
	}

	.docs-section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 24px;
	}

	.docs-section-title {
		font-size: 20px;
	}

	.docs-article-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.docs-article-card {
		padding: 20px;
	}

	.docs-article-card-title {
		font-size: 16px;
	}

	.docs-article-card-description {
		font-size: 13px;
	}
}

/* Detail Page - Mobile */
@media screen and (max-width: 1368px) {
	.banner-section {
		padding-top: 100px;
	}

	.docs-detail-container {
		padding: 0;
	}

	.docs-breadcrumb {
		font-size: 12px;
		top: 60px;
		margin-bottom: 24px;
		flex-wrap: wrap;
	}

	.docs-detail-content-wrapper {
		width: 100%;
		display: flex;
		flex-flow: column-reverse;
		margin-top: 12px;
		gap: 12px;
	}

	.docs-detail-sidebar {
		position: static;
		max-height: none;
		overflow-y: visible;
		order: 2;
	}

	.docs-detail-main {
		width: 100vw;
		order: 1;
		padding: 0 16px;
	}

	.docs-detail-title {
		font-size: 24px;
		margin-bottom: 24px;
	}

	.docs-detail-intro {
		margin-bottom: 32px;
	}

	.docs-detail-intro p {
		font-size: 15px;
	}

	.docs-detail-content {
		gap: 32px;
	}

	.docs-detail-section-title {
		font-size: 20px;
		margin-bottom: 12px;
	}

	.docs-detail-section > p {
		font-size: 15px;
		margin-bottom: 20px;
	}

	.docs-detail-steps {
		gap: 20px;
	}

	.docs-detail-step {
		padding-left: 36px;
	}

	.docs-detail-step::before {
		width: 24px;
		height: 24px;
		font-size: 12px;
	}

	.docs-detail-step-title {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.docs-detail-step-list {
		font-size: 14px;
		padding-left: 20px;
	}

	.docs-detail-step-list code {
		font-size: 13px;
	}

	.docs-detail-code {
		padding: 12px;
		margin: 12px 0;
	}

	.docs-detail-code code {
		font-size: 12px;
	}

	.docs-trial-box {
		padding: 20px;
		margin: 0 16px;
	}

	.docs-trial-box-title {
		font-size: 16px;
	}

	.docs-trial-box-description {
		font-size: 13px;
		margin-bottom: 16px;
	}

	.docs-guide-nav {
		display: flex;
		margin-bottom: 12px;
	}

	.docs-guide-nav-title,
	.docs-guide-nav-list::before {
		display: none;
	}

	.docs-guide-nav-list {
		padding-left: 20px;
		overflow-x: scroll;
		width: 100vw;
	}

	.docs-guide-nav-list {
		flex-direction: row;
		display: flex;
        padding: 12px 0;
        margin: 0;
        scroll-padding-left: 50%;
        scroll-snap-type: x mandatory;
	}

	.docs-guide-nav-circle {
		display: none;
	}

	.docs-guide-nav-list::before {
		left: 9px;
		top: 10px;
		bottom: 10px;
		width: 1.5px;
	}

	.docs-guide-nav-circle {
		left: -20px;
		top: 5px;
		width: 10px;
		height: 10px;
		border-width: 1.5px;
	}

	.docs-guide-nav-item {
		scroll-snap-align: center;
        list-style: none;
        padding: 0 20px;
	}

	.docs-guide-nav-item:not(:last-child) {
		margin-bottom: 6px;
	}

	.docs-guide-nav-link {
		width: max-content;
	}

	.related-articles-section {
		padding: 30px 0 20px 0;
	}

	.have-additional-questions-section {
		padding: 0 16px !important;
	}

	.have-additional-questions-container  {
		padding: 0px !important;
	}

	.related-articles-list {
		gap: 12px;
	}

	.related-article-link {
		padding: 16px;
	}

	.have-questions-card {
		gap: 20px;
		padding: 12px 0px 30px 0px;
	}

	.have-questions-btn {
		width: 100%;
	}

	.have-questions-divider {
		width: 100%;
		height: 1px;
	}

	.have-questions-btn {
		align-self: stretch;
		text-align: center;
	}
}