/* CSS Reset */

header, body, nav, ul, li, main, video, aside, figure, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
}
/* Style rules for the body */

body {
	background-color: linear-gradient(to right, #ccc, #fff);
	overflow-x: hidden;
	font-family: "Special Gothic", sans-serif;
	color: #000080;
	
}

header {
	float: left;
	width: 25%;
}

/* Style rules for the navigation area */
@media screen and (min-width: 481px) {
	

		nav {
			font-size: 1.20em;
			font-family: "Special Gothic", sans-serif;
			font-weight: bold;
			padding-top: 60px;
			background-color: #000080;
		}

		.navbar{
			background-color: #fff;

		}

		nav ul {
			padding: 0;
			margin: 0;
			width: 100%;
		}

		nav ul li {
			display: inline;
				
		}		


		nav a {
			margin: 0 2em 0 2em;
			list-style: none;
			text-decoration: none;
			color: #fff;
			
		}
}

/* Style rules for mobile viewport */

/* Style rules for header */
/*@media screen and (min-width: 468 px), print {/

		/*.contact_image {
			display: inline-flex;
		}*/
.index_p {
	margin: -20em 2em 0 2.7em;
	font-size: 1.75em;
	font-weight: bold;
	background-color: gray;
}

.btn {
	margin-top: .5em;
	margin-left: 4.2em;
	padding: 19px;
	font-size: 1.25em;
	font-weight: bold;
	color: #000080;
	border-radius: 10px;
	background-color: #fff;
	cursor: auto;
}

.index_ul {
	margin: 27em 2em -35em 3em;
}

.index_a {
	color: #000080;
	font-size: 1.75em;
	font-weight: bold;
	font-family: "Special Gothic", sans-serif;
} 

		#mobile {
		display: block;
		padding: 2%;
		text-align: center;
}

		.tab-desk {
		display: block;
}

		.footer {
			text-align: center;
		}

.smiling_lady {
	max-width: 100%; 
	display: block;
	width: 100%;
	border-radius: 0;
}

.diverse_group {
	max-width: 100%;
	display: block;
	width: 100%;
	max-height: 100%;
	border-radius: 0;
}

.faq-section {
  max-width: 800px;
  margin: 50px auto;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.faq-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.2rem;
  color: #007bff;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-question: focus {
  outline: none;
}

.icon {
  font-size: 1.5rem;
  color: #007bff;
}

.faq-answer {
  padding: 10px;
  font-size: 1rem;
  color: #555;
  display: none;
}

.faq-question.active .icon {
  content: "-";
}

/* Style rules for the about page */

.about {
	color: #000080;
	
}

.about_main {
	font-family: "Special Gothic", sans-serif;
	color: #000080;
}


.about_h1 {
	padding: 3.35em;
	margin: 4em 1em -5em -2em;
	font-size: 1.55em;
	
}

.about_p {
	margin: 2em 2em 0 1.5em;
	padding: 0 2em 5em -1em;
	font-size: 1.25em;	
}

.about_h3 {
	font-size: 1.55em;
	margin: -10em 0 -5em -8.5em;
}

aside {
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	text-shadow: 4px 4px 10px #c5a687;
}

figure {
	position: relative;
	display: inline-grid;
	border: 4px solid #2a1f14;
	box-shadow: 6px 6px 10px #c5a687;
	max-width: 300px;
	margin: 2%;
}

figcaption {
	padding: 2%;
	border-top: 4px solid #2a1f14;
}


/* Style rules to show mobile id and hide tab-desk */

/* Style rules for the video and img */
video {
	aspect-ratio: auto;
	margin: -15em 25em -10em 40em;
	width: 43%;
	border-radius: 10px;
}

img {
	border-radius: 10px;
	max-width: 100%;
	display: block;
}

h3 {
	padding: 10em;
	margin: -1em 1em 1em -8em;
	color: #000080;
	font-family: "Special Gothic", sans-serif;

}	

.secured_loans {
	padding: 7em;
	margin: -19em 1em 5em -4.5em;
	color: #000080;
	font-family: "Special Gothic", sans-serif;
}
/*Tablet Viewport: Show tablet-desktop class, hide mobile class */
@media screen and  (min-width: 630px) {
	.grid {
		grid-template-columns: auto auto auto;
		grid-gap: 10px;
	}

	aside {
		grid-column: 1 / span 2;
}

.secured_loans p {
	width: 35%;
	color: #000080;
	font-size: 1.25em;
	padding: 0 2em 0 1em;
}

.secured_loans ul {
	width: 43%;
	display: block;
	padding: 0.4rem;
	padding-left: 50px;
	text-align: left;
	color: #000080;
	font-size: 1.25em;
	list-style-type: square;

}

.three_experts {
	margin: -40em 15em -6em 50em;
	width: 43%;
	height: auto;

}

.building_plans {
	padding: 18em 0 0 3em;

}

.unsecured_loans {
	color: #000080;
	font-size: 1.25em;
	position: flex;
	font-family: "Special Gothic", sans-serif;
}

.unsecured_title {
	margin: -14em 8em 15em 20em;
	text-align: right;
	font-size: 1.25em;

}

.unsecured_loans ul {
	margin: -1em 0 2em 38em;
	float: right;
	list-style-type: square;
	padding: 0px;
}

.unsecured_loans p {
	width: 45%;
	margin: -17em 10em 2em 37em;
	display: block;
}

}

.commrealloan {
	margin: -10em 2em -1em 50em;
	width: 43%;
	height: auto;
}

.commercial_realestate_loan {
	font-family: "Special Gothic", sans-serif;
	font-size: 1.25em;
	color: #000080;
}

.commercial_realestate_loan p {
	margin: -2em 1em 1em 1.5em;
	padding: 0;
}

.commercial_realestate_loan ul {
	display: block;
	list-style-type: square;
	width: 43%;
	padding: 0 2em 0 3em ;
}

.title {
	padding: 0;
	margin: -12.5em 2em 3em 30px;
	font-size: 1.25em;
}

.contact_image #image1 {
	max-width: 100%;
	max-height: 100%;
	margin: 3em auto;
	padding-left: 1em;
	width: 100%;
	height: 450px;
	border-radius: 0;
}

.contact_h3 {
	margin-top: -12em;
	margin-bottom: -9.4em;

}

#forms {
	margin: -13em 1em -4em 0;
	padding-left: 1em;
	width: auto;
}

/*.form-grid {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 40px;
	padding: 20px;
}*/ 

/* Style rules for form elements */

#form {
	margin-top: 2%;
	background-color: #d3d3d3;
	padding: 2%;
}

#form h2 {
	text-align: center;
}

.prod_serv_h1 {
	margin: 5em 1em 1em 1em;
}

.prod_serv_h2 {
	margin: 2em 0.5em;
}

.text {
	position: relative;
	bottom: 0;
	background: #c7c7c7;
	color: #000080;
	width: 100%;
	padding: 20px;
}


@media screen and (min-width: 1015px), print {

	/* Style rules for fieldset */

fieldset, input, select, textarea {
	margin-bottom: 2%;

}

fieldset legend {
	font-weight: bold;
	font-size: 1.25em;
}

label {
	display: block;
	padding-top: 3%;
}

form  {
	margin: 0 2em;
	border: none;
	display: block;
	padding: 2%;
	background-color: #f2f0ef;
	font-size: 1em;
	border-radius: 0;
}

#submit {
	margin: 1em 1em 5em 0.8em ;
}

label {
	margin-bottom: 20px;
}
	
		footer {
		font-size: 0.80em;
		color: #fff;
		padding: .8em 1em;
		text-align: center;
		background-color: #000080;
	}

	.index_footer {
		margin: 38em 0 0 0;
	}

	a {
		color: #fff;
	}

	.grid {
		grid-template-columns: auto auto auto;
		grid-gap: 30px;
	}

	aside {
		grid-column: 1 / span 3;
		font-size: 2em;
	}
}
/* Media Query for Large Desktop Viewports */
/*@media screen and (min-width: 1921px) {

}*/