/*------------------ Breadcrumb styling --------------------*/
.breadcrumbs
{
	background: linear-gradient(rgba(150, 60, 221, 0.1), rgba(17, 17, 69, 0.8)), url('../img/contact-bc.png');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.breadcrumb-container
{
	height: 34vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 1.5rem;
}

.breadcrumb-container .hero-heading
{
	font-size: 3rem;
}
/*------------------ Breadcrumb styling --------------------*/



/*------------------------ Map styling ----------------------------*/
.map-location
{
	margin: 1rem 0;
	display: flex;
	align-items: center;
}

.map-location ion-icon
{
	font-size: 2.6rem;
	color: var(--yellow-color);
}
/*------------------------ Map styling ----------------------------*/



/*------------------------------ Contact Info ---------------------------*/
.contact-info
{
	background: linear-gradient(rgba(10, 17, 79, 0.9), rgba(10, 17, 79, 0.9)), url("../img/hero-bg.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.contact-info .container
{
	text-align: center;
	padding: 5rem 0;
}

.contact-info .container .row
{
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.contact-info .container .row .col ion-icon
{
	color: var(--yellow-color);
	font-size: 3.6rem;
}

.info-name
{
	font-size: 1.7rem;
	font-weight: 700;
}

.info-detail
{
	font-size: 1.1rem;
	font-weight: 400;
}
/*------------------------------ Contact Info ---------------------------*/




/*---------------------------------- Branches ---------------------------*/
.branch-img
{
	margin: 1rem 0;
}

.branch-card
{
	margin: 2rem 0;
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	grid-gap: 0.8rem;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
/*---------------------------------- Branches ---------------------------*/













/*-------------------------------------------------------------------------------------*/
/*----------------------------- Desktop screen styling ----------------------------------*/
/*-------------------------------------------------------------------------------------*/
@media screen and (min-width: 789px)
{
	/*----------- Breadcrumb styling ----------*/
	.breadcrumb-container 
	{
		height: 50vh;
	}


	/*------------ Map styling ----------------*/
	.map .container
	{
		max-width: 960px;
		text-align: center;
	}

	.map-location
	{
		justify-content: center;
	}


	/*-------------- Contact info ---------------*/
	/*.contact-info .container
	{
		padding: 8rem 0;
	}*/

	.contact-info .container .row
	{
		flex-direction: row;
	}

	.contact-info .container .row .col ion-icon 
	{
		color: var(--yellow-color);
		font-size: 5rem;
	}

	.info-name 
	{
		font-size: 2.6rem;
	}

	.info-detail 
	{
		font-size: 1.6rem;
	}


	/*-------------------------- Branches styling -----------------------*/
	.branch-card 
	{
		padding: 4rem;
	}
}