@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500&display=swap');


:root {
  --main: #1a4e85; /*This is the main color for the bank*/
  --main1:#1e0c8c; /*This is the main color for the bank*/
  --submain:#ffc107; /*This is the color for backgrounds and subheadings. The second main color*/
  --body:black;  /*this is the color for the bosy paragraphs and links*/
  --midcolor:#008996;/*mid color*/
}
*{
	margin: 0;
padding: 0;
}
/*Heade Styles*/
.header1 li {
color:white;
float: right; 
margin-right: 3%;
font-size:.8rem;
cursor: pointer;
}

.header1 li i {
  display: inline-block; 
  padding: 5px;
  text-decoration: none;
}

.header1 li:hover {
 text-decoration:underline;
}

.header1 #header1-ul{

	background-color:var(--main); 
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

 .header1 hr{
	border: 1px solid var(--main);
}

@media(max-width: 520px){
	.header1 li {
color: var(--main);
float: right; 
margin-right: 3%;
font-size:.4rem;
}

a{
	text-decoration: none;
	 color: var(--submain); 
	 font-size: .5rem;
	 font-weight: 200;
	 font-family: sans-serif;
}

a img{
	max-width: 50px;
}






}
a{
	text-decoration: none;
	 color: var(--submain); 
	 font-size: 1rem;
	 font-weight: 400;
	 font-family: sans-serif;
}

a:hover{
	text-decoration: underline;
	color: var(--main);
}
nav ul li{
	list-style: none;
}


.topnav {
  /*overflow: hidden;*/
  background: linear-gradient(90deg, rgba(7,104,179,1) 0%, rgba(7,104,179,1) 49%, rgba(102,16,242,1) 75%, rgba(158,16,242,1) 89%);
  border-bottom: 1px solid var(--main);

}

.topnav a {
  float: left;
  display: block;
  color: var(--body);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover {
  
  color: var(--main);
}

.topnav a.active { 
  color: var(--main);
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*Headers styles end*/

/*section1*/

 .section1{
 	width: 100%;
 	height: auto;
 	background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.5)), url(images/background.png);
 	background-position: center;
 	background-size: cover;
 }

.container-section1{
	color:white;
	padding: 2.5% 5% 100px 5%;
	border-size:border-box;
}

/* Create two unequal columns that floats next to each other */
.column {
  float: left;
  margin-bottom: 10px;  
  padding-bottom: 10px;
  
}

/* Left column */
.column.left {
  width: 20%;
  border-radius: 3px;
}

.column.right {
  width: 35%;
  float: right;
  border-top:6px solid var(--main);
  min-width: 400px;

}



/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;

}

 .column.left{
 	background-color: var(--main);
 	min-width: 330px;
 }

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column.left, .column.right {
    width: 90%;
  }

  .column.right{
  	float: left;
  	margin-right: 10%;
  	display: none;

  }

  .column.right #middle{
  	font-size: 16px;

  }
  .column.right #lower{
  	font-size: 12px;
  }
}

.column.right h1{
	border-left: 10px solid var(--main);
	padding: 20px;	
	margin-top: 25px;
	color:var(--main); 
}

.banner{
	padding:10px 45px;
	
}
#top{
	font-size: 18px;
	text-transform: uppercase;
	color: var(--submain);
	font-family: sans-serif;
	font-weight: 600;
	line-height: 21px;

}
#middle{
	font-family: Raleway;
	color: var(--body);
	line-height: 21px;
	font-size: 24px;
	font-weight: 450;
	margin:10px 0px 10px 0px;

}

#lower{
	font-family: Raleway;
	color: var(--body);
	line-height: 21px;
	font-size: 18px;
	font-weight: 500;
	margin:10px 0px 10px 0px;
}

.banner-btn{
	padding: 5px;
	margin-right: 10px;
	font-family: Raleway;
	font-weight: 450;
	font-size: 17px;
	cursor: pointer;
	color: white;
	border-radius: 5px;
	border: solid 1px;
	margin: 5px; 

}

#apply-btn{
	 border-color:var(--main);
	background-color: var(--main);
	
}

#apply-btn:hover{
	color: var(--submain);
	border-color: var(--submain);
}

#sign-up-btn{
border-color:white;
color: var(--submain);
background-color: white;

}

#sign-up-btn:hover{
	border-color: var(--main);
	color: var(--main);
}

.banner a{
	text-decoration: none;
}

.form-content input[type=text], input[type=password]{

width: 91%;
}

#login-btn{
  width:97%;
  border: 2px solid var(--submain);
  font-size: 16px;
  cursor: pointer;
  padding: 5%;
  color: var(--main);
  background-color:var(--submain);
   
}

#login-btn:hover{

  border: 2px solid var(--submain);
  color: var(--submain);
  background-color:var(--main);

   
}

.form-content{
	padding: 10%;
	color:var(--submain); 
}

#forgotpwd{
	color:white;
}

#forgotpwd a:hover{
 color:var(--submain);
 text-decoration: underline;
}
.inside label{
	font-size: 18px;
}

.inside input{
  height: 40px;
  border:none; 
  padding: 3px 10px 3px 10px;
  margin-bottom: 5px;
  font-weight: 500;
  
}
@import url("fonts.css");

.nav-wrapper {
    height: 53px;
    
}

/* Add a black background color to the top navigation */
.topnav {
    background-color:
    overflow: hidden;
    height: 53px;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 14px;
    font-family: Roboto-Bold;
}
#righttopnav{
  float: right;
}
/* Change the color of links on hover */


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}


/* Used to make the navbar sticky */
.navbar-fixed {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    position: fixed;
}

/* When the screen is less than 855 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 855px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 855px) {
  .topnav.responsive {
      position: relative;
      height: auto;
  }

  .navbar-fixed.responsive {
      top: 0;
      z-index: 100;
      position: fixed;
      width: 99.15%;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;


   .columns {
  float: left;
  width: 44%;
  padding: 10px;
  top: 50%;
  left: 50%;
  
}
  }

  
}
.transparent{
	
	text-align: center;
	padding: 20px;
	
	justify-content: space-between;

}

.trans-nav a{
	color: var(--main);
	margin-top: 100px;
	margin-right: 50px;
	margin-right: 50px;
}

.trans-nav a:hover{
	color: white;
}

.quick-links-wrapper{
	width: 80%;
	background-color: var(--submain);
	height:auto;
	top: 50%;
  left: 50%;

	z-index:20;
	margin-top:-50px;
	margin-right: 10%;
	margin-left: 10%;
	border-radius: 3px;
	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
}




/* Create three equal columns that floats next to each other */
.columns {
  float: left;
  width: auto;
  padding: 10px;
  top: 50%;
  left: 50%;
  
}



/* Clear floats after the columns */
.roww:after {
  content: "";
  display: table;
  clear: both;

}

.quick-links{
	text-align: center;
}

#b-right{
	border-right: dotted black 2px;

}
.roww .columns:hover{
  background-color: #f7f2f2;
}

#b-right a:hover{
 text-decoration: none;
 color: black;
}
#b-right a:hover{
text-decoration: none;
 color: black;
}


.tablink {
  background-color: #555;
  color:white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 33.33%;
}

.tablink:hover {
  background-color:var(--main);
  color: var(--submain);
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: var(--main);
  display: none;
  padding: 100px 20px;
  height: 100%;
  background-color:;
}

#Home {background-color: }
#News {background-color: }
#Contact {background-color: }
#About {background-color:}


/*--course---*/
.course{
  width: 80%;
  margin: auto;
  text-align: center;
  padding:-top:100px;

}

.course h1{
  font-size: 36PX;
  font-weight: 600;
}

.course p{

  color: gray;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  
}


.course .row{ 
  display: flex;
  justify-content: space-between;
}

.course .course-col{
  width: 31%;
  flex-basis: 31%;
  background: white;
  border-radius: 10px;
  margin-bottom: 5%;  
  box-sizing: border-box;
  transition: 0.3s;
}

.course h3{
  color: var(--submain);
  font-family: Raleway;
  text-align: center;
  font-weight: 600;
  margin: 10px;
}
.course .course-col:hover{
  box-shadow: 0 0 20px 0px rgb(0,0,0,0.2);
  transform: scale(1.02);
}

@media(max-width: 700px){
  .row{
    flex-direction:column;
    width: 105%; 
  }

  .tabcontent {
  color: var(--main);
  display: none;
  padding: 20px 20px;
  height: 100%;
  background-color: ;
}

  .course .course-col{
  width: 100%;}
}


.course-col img{
  width: 100%;
}

.course-col p{
  font-family: Raleway;
  font-weight: 400;
  padding: 10%;
}

.button button{
  width: 100%;
  border: none;
  height: 60px;
  background-color: var(--main);
  color: var(--submain);
  
}

.button button:hover{
  color: var(--main);
  background-color: var(--submain);
}



.below{
  width: 100%;
  height: auto;
  background-color: var(--submain);
  
}

.below .container{

padding: 20px;
  
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {

  padding: 10px;
  flex: 60%;
}

.flex-item-left img{
  width: 60%;

}

.flex-item-right {
  
  padding: 10px;
  flex: 30%;
  color: white;
  font-family: sans-serif;
  width: 100%;
  text-align: left;

}


#appinfo{
  margin: 1% 30px 1% 20px;
}
.flex-item-right h1{
font-size: 2rem;
}
.flex-item-right h3{
font-size: 1rem;
font-family: Raleway;
}

.flex-item-right p{
font-size: 1rem;
font-family: Raleway;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}


.news{
  background-color: var(--main);
}

#news-hr{
  color: var(--submain);
  height: 2px;
}

/* footer */
.footer-bottom{
  background-color: var(--main);
  color: var(--submain);
  height:auto;
}

.footer-bottom p{
  text-align: center;
padding: 1%;
}


/* about us*/

.about-sec1{
  width: 100%;
  height: auto;
  background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.1)), url(images/home1.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
 }
 

 .about-sec1-container{
  padding: 20px 100px;
  top: 50%;
 }


 .about-sec1-container .content{
  width: 50%;
  background-color: rgba(255,255,255,0.9);
  border-top: solid 10px var(--main);
  margin: 30px;
  padding: 40px;
 }


 @media(max-width: 700px){
 .about-sec1-container .content{
  background-color: rgba(255,255,255,0.9);
  border-top: solid 10px var(--main);
  margin: 20px;
  padding: 10px;
  width: 80%;
 }
 .about-sec1-container{
  padding: 10px 20px;
  top: 50%;
 }


 }

 .about-sec1-container .content h1{
  color: var(--main);
  font-family: sans-serif;
  text-transform: uppercase;
 }





.about-sec1-container h1{
  font-size: 1.3rem;
  font-weight: 600;
}

.about-sec1-container p{

  color: gray;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 22px;
  padding: 10px,
}


.about-sec1-container .row{
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}

.about-sec1-container .course-col{
  flex-basis: 31%;
  background: white;
  border-radius: 10px;
  margin-bottom: 5%;
  padding: 12px 12px;
  box-sizing: border-box;
  transition: 0.3s;
}

.about-sec1-container h3{
  text-align: center;
  font-weight: 600;
  margin: 10px;
}
.about-sec1-container .course-col:hover{
  box-shadow: 0 0 20px 0px rgb(0,0,0,0.2);
  transform: scale(1.02);
}

@media(max-width: 700px){
  .about-sec1-container .row{
    flex-direction:column; 
  }
}


#iconheaders{
  text-align: center;
  border: 1px solid gray;
}


.course-col i{
  color: var(--main);
  font-size: 36px;
}
.about-sec1-container #bank-name{
  color: var(--main);
  font-size: 2rem;
  text-decoration: underline;
  font-family: Raleway;
}


  
.frow:after {
  content: "";
  display: table;
  clear: both;
}