/* if the viewport is equal to 340px or less than that */
@media only screen and (max-width: 340px) {
	.header_area .main-menu .navbar,
	.header_area .main-menu .navbar .navbar-brand,
	.site-main .subscribe-us-area .subscribe .subscribe-title,
	.site-main .subscribe-us-area .subscribe .subscribe-title p,
	h4,
	.site-main .services-area,
	.site-main .subscribe-us-area .subscribe {
		padding: 2%;
		margin: 0%;
	}

	.site-main .site-banner .site-title h1 {
		font-size: 1.5rem;
	}

	.site-main .site-banner .site-title .title-sub {
		font-size: 0.7rem;
	}

	.site-main .site-banner .site-title .console-container {
		font-size: 1em;
		white-space: normal;
	}

	.site-main .site-banner .site-title h3 {
		padding-top: 20%;
	}

	.site-main .site-banner .site-title h4 {
		font-size: 0.7rem;
		letter-spacing: 1px;
	}

	.site-main .subscribe-us-area .subscribe form .input-textbox input {
		width: 15rem !important;
	}

	.site-main > .services-area .services {
		min-height: auto;
		padding: 1.5rem;
	}

	/* Full width cards on tiny screens */
	.site-main .services-area .services-list .col-sm-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* if the viewport is equal to 340px or less than that */
@media only screen and (max-width: 792px) {
	.site-main .about-area .about-title h2 > span {
		font-size: 31px;
		letter-spacing: 10px;
	}

	.site-main .brand-area .experience-area .years-area {
		padding-left: 1%;
		width: 49%;
	}

	.site-main .brand-area .experience-area .bg-panel {
		margin-left: 30%;
		width: 80%;
	}

	.site-main .brand-area .experience-area .call-area {
		padding-left: 3%;
	}

	.site-main .project-area .button-group button {
		font: normal 500 18px / 40px var(--mono);
	}

	.site-main .about-area .about-title p {
		padding: 0%;
	}

	.site-main .subscribe-us-area .subscribe form .input-textbox input {
		width: 20rem;
		margin: 5%;
	}
	.site-main .site-banner .banner-image {
		display: none;
	}

	.site-main .about-area .about-image {
		display: none;
	}

	/* Banner title responsive */
	.site-main .site-banner .site-title h1 {
		font-size: 2.5rem;
	}

	.site-main .site-banner .site-title .title-sub {
		font-size: 1rem;
		letter-spacing: 1.5px;
	}

	.site-main .site-banner .site-title .console-container {
		font-size: 1.3em;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.site-main .site-banner .site-title h3 {
		padding-top: 15%;
	}

	.site-main .site-banner .site-title h4 {
		font-size: 0.9rem;
		letter-spacing: 1.5px;
	}

	/* Services cards responsive */
	.site-main > .services-area .services {
		min-height: auto;
		padding: 1.5rem;
	}

	.site-main .services-area .services-list .g-4 {
		--bs-gutter-y: 1rem;
	}
}

/* ---------- Extra: 480px and below ---------- */
@media only screen and (max-width: 480px) {
	.site-main .site-banner .site-title h1 {
		font-size: 1.8rem;
	}

	.site-main .site-banner .site-title .title-sub {
		font-size: 0.8rem;
	}

	.site-main .site-banner .site-title .console-container {
		font-size: 1em;
	}

	.site-main .site-banner .site-title h3 {
		padding-top: 25%;
	}

	.site-main .site-banner .site-title h4 {
		font-size: 0.75rem;
	}
}

/* if the viewport is equal to 1910px or less than that */
@media only screen and (max-width: 1910px) {
	.header_area .main-menu .navbar {
		padding: 1rem;
	}

	.container {
		max-width: 90%;
	}

	.site-main .brand-area,
	.site-main .services-area .services-title,
	.site-main .about-area {
		padding: 7% 4%;
	}
}