/* Extra small devices (xs) - Phones / Phones in Portrait Mode*/
@media (max-width: 575.98px) {

	/* Displays navigation items inside a rounded box on mobile and tablet screens */
	.nav-items-list {
		border: 1px solid #ddd;
		border-radius: 8px;
		margin-top: 10px;
		align-items: center;
		text-align: center;
		font-style: bold;
	}

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		border-radius: 10px;
	}

	.navbar-brand img {
		width: 120px;
	}

	.navbar-nav .nav-link {
		color: #555;
		font-size: 18px;
		margin-right: 30px;
		font-weight: 400;
	}

	.contact-now-button {
		background-color: #B62330;
		color: white;
		font-size: 15px;
		font-weight: 300;
		padding: 10px 18px;
		border-radius: 5px;
		text-decoration: none;
		display: flex;
		align-items: center;
		display: inline-block;
		/* Displays the 'Contact Now' button on a single line without unnecessary spacing */
		margin-bottom: 15px;
	}

	.contact-now-button i {
		margin-right: 5px;
	}

	.contact-now-button:hover {
		background-color: #B62330;
	}

	.navbar-nav .t-navbar-nav {
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(31%, 1fr));
		list-style-type: none;
	}

	.navbar-nav .t-navbar-nav li a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin: 0;
		font-weight: 500;
		padding: 12px 0;
		color: #000;
		font-size: 15px;
		justify-content: center;
		height: 100%;
	}

	.t-navbar-nav .border-right {
		border-right: 0.5px solid #dee2e6
	}

	.t-navbar-nav .border-bottom {
		border-bottom: 0.5px solid #dee2e6
	}

	.t-navbar-nav svg {
		width: 45px;
		height: 40px;
	}

	.navbar-contact-details {
		padding: 10px 25px;
		grid-column: span 2;
		/* This item will span across two columns */
		/* You can also use grid-column: 1 / 3; to explicitly start at column line 1 and end at column line 3 */
	}

	.navbar-contact-details .contact-text {
		width: 98%;
		text-align: left;
		display: flex;
		flex-direction: column;
		gap: 2px;
		font-size: 15px;
		align-items: center;
	}

	.navbar-contact-details .contact-text .contact-number,
	.navbar-contact-details .contact-text .contact-email {
		display: flex;
		gap: 5px;
		align-items: center;
	}

	.navbar-contact-details .contact-text .contact-email i {
		font-size: 20px;
		padding-left: 10px;
	}

}

/* Small devices (sm) - Phones in Landscape Mode */
@media (min-width: 576px) and (max-width: 767.98px) {

	/* Displays navigation items inside a rounded box on mobile and tablet screens */
	.nav-items-list {
		border: 1px solid #ddd;
		border-radius: 8px;
		margin-top: 10px;
		align-items: center;
		text-align: center;
		font-style: bold;
	}

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.navbar-brand img {
		width: 120px;
	}

	.navbar-nav .nav-link {
		color: #555;
		font-size: 18px;
		margin-right: 30px;
		font-weight: 400;
	}

	.contact-now-button {
		background-color: #B62330;
		color: white;
		font-size: 15px;
		font-weight: 300;
		padding: 10px 18px;
		border-radius: 5px;
		text-decoration: none;
		display: flex;
		align-items: center;
		display: inline-block;
		/* Displays the 'Contact Now' button on a single line without unnecessary spacing */
		margin-bottom: 15px;
	}

	.contact-now-button i {
		margin-right: 5px;
	}

	.contact-now-button:hover {
		background-color: #B62330;
	}

	.navbar-nav .t-navbar-nav {
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
		list-style-type: none;
	}

	.navbar-nav .t-navbar-nav li a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin: 0;
		font-weight: 500;
		padding: 12px 0;
		color: #000;
		font-size: 15px;
		justify-content: center;
		height: 100%;
	}

	.t-navbar-nav li.border-right {
		border-right: 0.5px solid #dee2e6
	}

	.t-navbar-nav li.border-bottom {
		border-bottom: 0.5px solid #dee2e6
	}

	.t-navbar-nav svg {
		width: 45px;
		height: 40px;
		margin: 0 auto;
	}

	.navbar-contact-details {
		padding: 10px 25px;
		grid-column: span 2;
		/* This item will span across two columns */
		/* You can also use grid-column: 1 / 3; to explicitly start at column line 1 and end at column line 3 */
	}

	.navbar-contact-details .contact-text {
		width: 98%;
		text-align: left;
		display: flex;
		flex-direction: column;
		gap: 2px;
		font-size: 15px;
		align-items: center;
	}

	.navbar-contact-details .contact-text .contact-number,
	.navbar-contact-details .contact-text .contact-email {
		display: flex;
		gap: 5px;
		align-items: center;
	}

	.navbar-contact-details .contact-text .contact-email i {
		font-size: 20px;
		padding-left: 10px;
	}

}


@media (min-width: 750px) and (max-width: 767.98px) {
	.navbar-nav {
		display: flex !important;
	}

	.navbar-nav.d-sm-block {
		display: none !important;
	}
}

/*This will target the Tablets in Portrait and Landscape Modes. */
@media (min-width: 768px) and (max-width: 1366x) {}


/* Medium devices (md) - Tablets*/
@media (min-width: 768px) and (max-width: 991.98px) {
	.navigation-bar-customization {
		padding: 0;
	}

	/* Displays navigation items inside a rounded box on mobile and tablet screens */
	.nav-items-list {
		/* border: 1px solid #ddd; */
		border-radius: 8px;
		margin-top: 10px;
		align-items: center;
		text-align: center;
		font-style: bold;
	}

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.navbar-brand img {
		width: 100px;
	}

	.navbar-nav {
		align-items: center;
		gap: 2px
	}

	.navbar-nav .nav-link {
		color: #555;
		font-size: 14.5px;
		margin-right: 5px;
		font-weight: 400;
	}

	.contact-now-button {
		background-color: #B62330;
		color: white;
		font-size: 11px;
		font-weight: 400;
		padding: 7px 12px;
		border-radius: 5px;
		text-decoration: none;
		display: flex;
		align-items: center;
		display: inline-block;
		/* Displays the 'Contact Now' button on a single line without unnecessary spacing */
		margin-bottom: 2px;
	}

	.contact-now-button i {
		margin-right: 5px;
	}

	.contact-now-button:hover {
		background-color: #B62330;
	}

}

/* Large devices (lg) - Laptops */
@media (min-width: 992px) and (max-width: 1199.98px) {

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.navbar-brand img {
		width: 120px;
	}

	.navbar-nav {
		gap: 10px
	}

	.navbar-nav .nav-link {
		color: #555;
		font-size: 16.5px;
		/* margin-right: 30px; */
		font-weight: 400;
	}

	.contact-now-button {
		background-color: #B62330;
		color: white;
		font-size: 13.5px;
		font-weight: 500;
		padding: 10px 14px;
		border-radius: 5px;
		text-decoration: none;
		display: flex;
		align-items: center;
	}

	.contact-now-button i {
		margin-right: 5px;
	}

	.contact-now-button:hover {
		background-color: #B62330;
	}

}

/* Extra large devices (xl) - Desktops */
@media (min-width: 1200px) and (max-width: 1399.98px) {

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.navbar-brand img {
		width: 120px;
	}

	.navbar-nav .nav-link {
		color: #555;
		font-size: 18px;
		margin-right: 25px;
		font-weight: 400;
	}

	.contact-now-button {
		background-color: #B62330;
		color: white;
		font-size: 15px;
		font-weight: 300;
		padding: 10px 18px;
		border-radius: 5px;
		text-decoration: none;
		display: flex;
		align-items: center;
	}

	.contact-now-button i {
		margin-right: 5px;
	}

	.contact-now-button:hover {
		background-color: #B62330;
	}

}

/* Extra extra large devices (xxl) - Large desktops, 4K */
@media (min-width: 1400px) {

	/*The following block of code will append the text "for Enterprises" after the word "Solutions". We use CSS for this because, on smaller tablet screen widths, it's not feasible to display the full text like "Solutions for Enterprises.".*/
	#changeable-text-for-solutions::after {
		content: " for Enterprises";
		/* Adds the extra text for larger screens */
	}

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.navbar-nav {
		gap: 10px
	}

	.navbar-brand img {
		width: 120px;
	}

	.navbar-nav .nav-link {
		color: #555;
		font-size: 18px;
		margin-right: 30px;
		font-weight: 400;
	}

	.contact-now-button {
		background-color: #B62330;
		color: white;
		font-size: 15px;
		font-weight: 500;
		padding: 10px 18px;
		border-radius: 5px;
		text-decoration: none;
		display: flex;
		align-items: center;
	}

	.contact-now-button i {
		margin-right: 5px;
	}

	.contact-now-button:hover {
		background-color: #B62330;
	}
}