*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
font-family:Arial,Helvetica,freesans,sans-serif,'Poppins','Roboto';
}

.banner
{
	width: 100%;
 position: relative;
 min-height: 100vh;

 background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-image: url('https://tse1-mm.cn.bing.net/th/id/R-C.13cd26445c2a20a4179326788840d5e5?rik=50hrGcbcQ7qkLw&riu=http%3a%2f%2fpensionmark.com%2fwp-content%2fuploads%2fSocially-Responsible-Investing-1024x683.jpg&ehk=iR%2fu88RGBxEKzbsgd6bnnF8LaBp94yk6ZwgKYqDYqMw%3d&risl=&pid=ImgRaw&r=0');

}
.nav-bar{
  width: 100%;
 display:flex;/*this causes for them to be in the same line*/
  align-items:center;
  height: 10%;
}
.nav-bar p{
  font-weight:bold;
  font-size:2em;
  padding-left:10px;
  padding-top:10px;
  float:left;
  padding-right:30px;
  color:black;
 
}
.menuicon{
  cursor: pointer;
  margin-left: 20px;
  margin-right: 10px;
  display: none;
}
.nav-bar ul{
  padding:0;
  margin:0;
  flex: 1;
  text-align: right;
}
.nav-bar ul li{
  list-style:none;
  display:inline-block;
  padding:10px;
  position:relative;
  font-size: 20px;
}
.nav-bar ul li a {
  text-decoration:none;
  text-transform:uppercase;
  color:forestgreen;
}
.nav-bar ul li::after{
  content:'';
  height:2px;
  background:#009688;
  position:absolute;
  left:0;
  bottom:0px;
  transition:0.5s;
  
}/*used to create the color effect of the line*/
.nav-bar ul li:hover::after{
  width:100%;
}
.row-2 {
   margin-top: 120px;
  display: flex;
  align-items: center;
  width: 100%;

}
.col-2{
  flex-basis: 50%;

}
.row-2 h1{
  text-align: left;
  padding: 10px 10px 0px 10px;
  font-size: 70px;
  
}
.row-2 p{
  margin-top: 10px;
  font-size: 30px;
  
  padding: 10px;
}
button{
  width: 180px;
  color: #000;
  font-size: 16px;
  padding: 12px 0;
  background:green;
  border: 0;
  border-radius: 20px;
  outline: none;
  margin-top: 30px;
  cursor: pointer;

}
.col-2 .grid{
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr;
}
.card{
  display: grid;
  width: 220px;
  height: 260px;
  box-sizing: border-box;
  border-radius: 30px;
  grid-gap: 2rem;
  cursor: pointer;
  border: 1px solid black;
  color:white;
  background-position: center;
  background-size: cover;
  transition: transform 0.5s;

}
.card p{
 line-height: 20px;
  font-size: 20px;
}
.card h5{
  text-align: center;
  padding-top: 15px;
  font-size: 25px;
}
.card1{
   background-image: url(pic-27.jpg);
}
.card2{
   background-image: url(pic-28.jpg);
}
.card3{
   background-image: url(pic-22.jpg);
}
.card4{
   background-image: url(pic-20.jpg);
}
.card5{
   background-image: url(pi-26.jpg);

}

.card:hover{
  transform: translateY(-10px);

}
.quote{
  text-align: center;
  font-size: 30px;
  padding-top: 50px;
  font-weight: bolder;
}
.stock-images{
  max-width: 1080px;
  margin: auto;
  padding-right: 25px;
  padding-left: 25px;
}

#intro{
  margin-bottom: 100px;
}

#intro img{
  float:left;
  margin-right: 40px;
}



.investing{
padding-bottom: 200px;
margin: auto;
margin-top:50px;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 100px;
line-height: 30px;
}
h1{
  padding-top: 30px;
  padding-bottom:35px;
  text-transform:uppercase;
  font-size: 35px;
  color: green;
  text-align: center;
}
p{
  font-size: 1.5em;
  line-height: 40px;
  padding-top: 15px;
  padding-bottom: 15px;
}


 h2{
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 30px;
  color: green;
}
.calc img{
   height: 700px;
   width: 1000px;
}

#pic-money{
 display: block;
width: 60%;
margin-left:auto;
margin-right:auto;
}

.savings{
  margin-bottom: 50px;
 margin-top: 25px;
}
#important{
  padding-top: 20px;
  padding-bottom: 10px;
  font-size: 2em;
  color:blue;
}
.reasons ol li{
  font-size: 1.5em;
}
.reasons ol{
  padding-left: 80px;
}

.footer{
  background: #000;
  color: #8a8a8a;
  position: sticky;
  top:100%;
  height: 80px;
  
  }


.footer h5{
  text-align: center;
  padding-top: 5px;
  
}
.copyright{
  padding-top: 5px;
}
.footer h6{
  text-align: center;
}


.row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col{
  flex-basis: 50%;/*So that each column occupies half of the space*/
  min-width: 300px;
}
.col img{
  max-width: 100%;
  padding: 50px 50px;

}
.brokers{
  margin-top: 25px;
  padding-bottom: 60px;
}
 ul li{
   font-size: 1.5em;
   padding:10px 0 10px;
}
.brokers p{
  color: blue;
}
.stock-images h3{
  text-align: center;
  padding-top: 20px;
  color:blue;
}
h3{
  color: blue;
  padding-top: 10px;
  padding-bottom: 10px;
}
button a{
  color: white;
  text-decoration: none;
}
h5 a{
    color: white;
  text-decoration: none;
}
.stocks{
  max-width: 1300px;
  margin: auto;
  padding-left: 25px;
  padding-right: 25px;
   margin-top: 100px;
   padding-bottom: 60px;
 }




/*---media querry for less than 1200px--*/
@media   (max-width: 1200px) and (min-width: 280px)
{
  
  
.reasons ol{
  padding-left: 30px;
 }
.reasons ol li{
  font-size: 1.3em;
}
.col{
  flex-basis: 100%;
  min-width: 300px;
  margin-top: 10px;
}
.col img{
  max-width: 100%;
  padding: 0px 0px 0px 0px;

}
#intro{
  margin-bottom: 40px;
}
#intro img{
  float:left;
  margin-right: 40px;
  width: 100%;
  padding-bottom: 20px;
}
.footer h6{
  text-align: center;
  padding-top: 10px;
}

.brokers{
  margin-top: 30px;
  padding-bottom: 100px;
}
.footer{
  height: 180px;
}
 .footer h5{
  text-align: center;
  padding-top: 15px;
  padding-bottom: 0px;
  
}
.brokers ul li{
  margin-top: 5px;
  
  text-align: left;
}
.brokers p{
  
  margin-right: 20px;
}
.brokers ul{
  
  margin-top: 2px;
  padding: 10px;
}


ul li{
 font-size: 1.3em;
  line-height: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#pic-money{
 display: block;
width: 100%;
margin-left:auto;
margin-right:auto;
padding-top: 13px;
}

h1{
  padding-top: 30px;
  padding-bottom:25px;
  text-transform:uppercase;
  font-size: 40px;
  color: green;
  text-align: center;
}
 
 p{
  font-size: 1.3em;
  line-height: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.calc img{
width: 100%;
padding-top: 13px;
height: 388px;
}
.container{
  max-width: 1300px;
  margin: auto;
  padding-left: 25px;
  padding-right: 25px;
}

  

   

.stocks{
  max-width: 1300px;
  margin: auto;
  padding-left: 25px;
  padding-right: 25px;
  margin-top: 100px;
  padding-bottom: 45px;
}
.card p{
 line-height: 18px;
  font-size: 20px;
  padding-top: 40px;
}
.card h5{
  text-align: center;
  padding-top: 10px;
  font-size: 30px;
}

.quote{
  text-align: center;
  font-size: 20px;
  padding-top: 30px;
  font-weight: bolder;
}

.card{
  display:inline-block;
  width: 220px;
  height: 240px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 15px 25px;
  cursor: pointer;
  border: 1px solid black;
  color: white;
  background-position: center;
  background-size: cover;
  transition: transform 0.5s;
  margin-left: auto;
  margin-right: auto;

}

button{
  width: 100px;
  color: #000;
  font-size: 16px;
  padding: 12px 0;
  background:green;
  border: 0;
  border-radius: 20px;
  outline: none;
  margin-top: 20px;
  cursor: pointer;

}

.col-2 .grid{
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: 50px;
  padding-top: 30px;
  }
.row-2 
{
   margin-top: 60px;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col-2{
  flex-basis: 100%;
  min-width: 300px;
}
.row-2 h1{
  text-align: center;
  padding: 10px 10px 0px 10px;
  font-size: 30px;
  }
.row-2 p{
  margin-top: 10px;
  font-size: 20px;
  padding: 10px;
}

 .nav-bar ul li a
  {
    color: white;
  }

   .menuicon
  {
    display: block;
    cursor: pointer;

  }

 .nav-bar ul li::after{
  content:'';
  height:2px;
  background:#009688;
  position:absolute;
  left:0;
  bottom:0px;
  transition:0.5s;
}

 /*used to create the color effect of the line*/
.nav-bar ul li:hover::after{
  width:100%;
}

.nav-bar ul
  {
    position: absolute;
    top: 70px;
    left: 0;
    background: #333;
    width: 100%;
    margin-top: 25px;
    overflow: hidden;
    transition: max-height 0.5s;
  
  }

.nav-bar ul li
  {
    display: block;
    margin-top: 10px;
    margin-right: 50px;
    margin-bottom: 10px;
  }

.nav-bar
  {
    display:flex;/*this causes for them to be in the same line*/
  align-items:center;
  justify-content: space-between;
  
  }
  
   .nav-bar p{
  font-weight:bold;
  font-size:1.5em;
  padding-left:10px;
  margin-top: 0px;
  float:left;
  padding-right:20px;
  color:black;
  }

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
font-family:Arial,Helvetica,freesans,sans-serif,'Poppins','Roboto'; 
}

.banner
{ 
  width: 100%;
 position: relative;
 min-height: 100vh;
 background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-image: url('https://tse1-mm.cn.bing.net/th/id/R-C.13cd26445c2a20a4179326788840d5e5?rik=50hrGcbcQ7qkLw&riu=http%3a%2f%2fpensionmark.com%2fwp-content%2fuploads%2fSocially-Responsible-Investing-1024x683.jpg&ehk=iR%2fu88RGBxEKzbsgd6bnnF8LaBp94yk6ZwgKYqDYqMw%3d&risl=&pid=ImgRaw&r=0');

}




}