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

@media (max-width: 575.98px) 
{
	/*The following block of code will append the text "for Enterprises" after the word "Item2". We use CSS for this because, on smaller tablet screen widths, it's not feasible to display the full text like "Item2 for Enterprises.".*/
	#changeable-text-for-item::after 
	{
		content: " for Enterprises";
		/* Adds the extra text for larger 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: #227B82;
		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: #227B82;
	}

	.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;
	}

	.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;
	}
	.flag-icon {
		background-size: contain;
		background-position: 50%;
		background-repeat: no-repeat;
		position: relative;
		display: inline-block;
		width: 1.33333333em;
		line-height: 1em
	}
	
	.flag-icon:before {
		content: '\00a0'
	}
	.flag-icon-ca {
		background-image: url(../images/flags/flag-ca.svg)
	}
	.flag-icon-in {
		background-image: url(../images/flags/flag-in.svg)
	}
	.flag-icon-us {
		background-image: url(../images/flags/flag-us.svg)
	}

}

@media (min-width: 576px) and (max-width: 767.98px) 
{

	/*The following block of code will append the text "for Enterprises" after the word "Item2". We use CSS for this because, on smaller tablet screen widths, it's not feasible to display the full text like "Item2 for Enterprises.".*/
	#changeable-text-for-item::after 
	{
		content: " for Enterprises";
		/* Adds the extra text for larger 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: #f23436;
		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: #f23436;
	}

	.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;
	}

	.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;
	}

	.flag-icon 
	{
		background-size: contain;
		background-position: 50%;
		background-repeat: no-repeat;
		position: relative;
		display: inline-block;
		width: 1.33333333em;
		line-height: 1em
	}
	.flag-icon:before 
	{
		content: '\00a0'
	}
	.flag-icon-ca 
	{
		background-image: url(../images/flags/flag-ca.svg)
	}
	.flag-icon-in 
	{
		background-image: url(../images/flags/flag-in.svg)
	}
	.flag-icon-us 
	{
		background-image: url(../images/flags/flag-us.svg)
	}

}


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

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

	.flag-icon 
	{
		background-size: contain;
		background-position: 50%;
		background-repeat: no-repeat;
		position: relative;
		display: inline-block;
		width: 1.33333333em;
		line-height: 1em
	}
	
	.flag-icon:before 
	{
		content: '\00a0'
	}
	.flag-icon-ca 
	{
		background-image: url(../images/flags/flag-ca.svg)
	}
	.flag-icon-in 
	{
		background-image: url(../images/flags/flag-in.svg)
	}
	.flag-icon-us 
	{
		background-image: url(../images/flags/flag-us.svg)
	}

}


@media screen and (max-width:767.98px) 
{
	.navbar-contact-details .contact-text .contact-number a, .navbar-contact-details .contact-text .contact-email a 
	{
		color: #000;
		text-decoration: none;
	}
	.navbar-contact-details .contact-text .contact-number a:hover, .navbar-contact-details .contact-text .contact-email a:hover 
	{
		color: #F23436;
	}

}


@media (min-width: 768px) 
{
	.navbar-expand-md .navbar-nav 
	{ 
		margin-top: 5px;
	} 
	#section-for-navigation-bar.sticky-top 
	{
		top:40px;
	}
}


@media (min-width: 768px) and (max-width: 991.98px) 
{
	.navigation-bar-customization 
	{
		padding: 0;
	}

	.nav-items-list 
	{
		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: #f23436;
		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: #f23436;
	}

}


@media (min-width: 992px) and (max-width: 1199.98px) 
{

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

	.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: #f23436;
		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: #f23436;
	}

}

@media (min-width: 1200px) and (max-width: 1399.98px) 
{

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

	.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: #f23436;
		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: #f23436;
	}

}

@media (min-width: 1400px) 
{

	/*The following block of code will append the text "for Enterprises" after the word "Item2". We use CSS for this because, on smaller tablet screen widths, it's not feasible to display the full text like "Item2 for Enterprises.".*/
	#changeable-text-for-item::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: #f23436;
		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: #f23436;
	}
}