:root {

	
	/* Background Colors */
	
	--background-color: #F7F6FB;
	--header-background-color: #EBEBEC;
	--footer-background-color: #EBEBEC;
	
	
	/* Alert background Colors */
	
	--warning-background-color: black;
	--success-background-color: black;
	--failed-background-color: black;
	--alert-background-color: black;

	
	/* Text Colors */
	
	--high-title-color: #135193;
	--title-color: #135193;
	--text-color: #135193;
	
	
	/* Button Colors */
	
	--sign-up-color: #135193;
	--log-in-color: #135193;
	
	--anchor-color: #135193;
	
	
	/* Other Colors*/
	
	--header-border-color: #135193;
	
	--footer-border-color: #135193;
	
	--input-border: white;

}


html {
  --s: 30px; /* control the size*/
  --c1: #F8F8F8;
  --c2: #C8E9F3;
  
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  --_c: #0000 66%,var(--c2) 68% 70%,#0000 72%;
  background:
    radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 0    75%,var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 0    75%,var(--_c)) 0 0/var(--_s),
    repeating-conic-gradient(var(--c1) 0 25%,#0000 0 50%) 0 0/var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s)
    var(--c1);
}



body {
	
	margin: 0;
	padding: 0;
	font-family: Book Antiqua;
	
	counter-reset: serial;
	
}


/* Header Styles */

.header {
	
	width: 100%;
	

}

.header-content {
	
	width: -webkit-fill-available;
	min-height: 50px;
	background-color: var(--header-background-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-bottom: 2px solid var(--header-border-color);
	
}


.header-content .logo {
	
	display: flex;
	align-items: center;
	color: var(--high-title-color);
	
}


.header-content .logo img {
	
	width: 60px;
	
}


.header-content .brand {
	
	display: flex;
	color: var(--light-text-color);
	font-size: 20px;
	padding: 0px 10px;
	font-family: arial;
	font-weight: 600;
	
}


.header-content .sign-in-up {
	
	display: inline-flex;
}


.header-content .tracking-link a {
	
	display: flex;
	justify-content: center;
	text-align: center;
	width: max-content;
	text-decoration:  none;
	font-size: 0.85rem;
	background-color: black;
	border: none;
	padding: 6px 16px;
	border-radius: 20px;
	color: white;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
	
}


.header-content .tracking-link i {
    
    padding-top: 2px;
    
}



/* Footer Styles */

.footer-content {
	
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--header-background-color);
	color: var(--light-text-color);
	position: fixed;
	bottom: 0;
	width: -webkit-fill-available;
	min-height: 30px;
	text-align: center;
	padding: 10px;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-top: 1px solid var(--footer-border-color);
	
}


.footer-content .notification-icon img {
	
	width: 30px;
	padding: 0px 6px;
}






/* main-content */


.main-content .titles h1, h2, h3 {
	
	margin: 4px;
		
}


.main-content .titles h3, h2 {
	
	color: var(--title-color);
		
}


.main-content-search {
	
	margin: 10px;
	display: flex;
	height: auto;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	
}


.main-content-search .search {
	
	margin: 10px;
	width: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	
}


.main-content-search img {
	
	width: 110px;
	
}


.main-content-search .search form {
	
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--input-border);
	padding: 2px 4px;
	border-radius: 26px;
	background: rgb(255,109,252);
	background: linear-gradient(133deg, rgba(255,109,252,0.47102591036414565) 29%, rgba(11,101,209,0.23853291316526615) 68%);
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	
}


.main-content-search .search form select {
	
	width: 210px;
	border: none;
	padding: 10px 20px;
	background-color: transparent;
	font-size: 1.02rem;
	
}


.main-content-search .search form select:focus {
	
	outline: none;
	font-size: 1.03rem;
	
}


.main-content-search .search form input[type=submit] {
	
	border: none;
	background-color: transparent;
	cursor: pointer;
	font-size: 1.1rem;
	border: 2px solid black;
	border-radius: 20px;
	padding: 2px 10px;
	margin: 2px 6px;
}


.main-content-search .suggestions {
	
	display: flex;
	flex-wrap: wrap;
	width: -webkit-fill-available;
	justify-content: center;
	align-items: center;

}


.main-content-search .suggestions a {
	
	display: flex;
	width: fit-content;
	margin: 4px;
	text-decoration:  none;
	font-size: 1rem;
	border: 1px solid white;
	padding: 4px 10px;
	border-radius: 20px;
	background: rgb(109,166,255);
	background: linear-gradient(133deg, rgba(109,166,255,0.47102591036414565) 32%, rgba(11,121,209,0.3533788515406162) 68%);
	color: var(--title-color);
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.main-content-search .service-partners a {
	
	display: flex;
	justify-content: center;
	min-width: 180px;
	margin: 10px 4px;
	text-decoration:  none;
	text-align: center;
	font-size: 1rem;
	border: 2px solid var(--anchor-color);
	padding: 6px 10px;
	border-radius: 20px;
	color: var(--title-color);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}



.book_service_by_call a {
	
	display: inline-flex;
	justify-content: center;
	text-align: center;
	width: max-content;
	text-decoration:  none;
	font-size: 1rem;
	background-color: black;
	border: none;
	padding: 6px 16px;
	border-radius: 20px;
	color: white;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
	
}


.book_service_by_call i {
	
	border: 1px solid white;
	padding: 4px 6px;
	border-radius: 50px;
	margin: 2px;
	margin-right: 6px;
}


.main-content summary {
    
    border: 1px solid black;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    
}


.main-content-search .tip-to-search {
    
    max-width: 320px;
    background-color: #E7F0FA;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid black;
}