/*****Buttons*********/

.homeBt{

border-radius: 10px;
text-align:center;
width: 100%;
margin: 5px;
padding: 20px;
cursor: pointer;
display: flex;
justify-content:center;

text-decoration: none !important; 
color: inherit !important;
flex-direction: row;
align-items: stretch;

}

/**Home Page Social Media**/

.homePage-SM-Container{
display: flex; 
justify-content: flex-start; 
gap:10px; 
margin-top: 20px;

}
.homePage-SM-btn{

  background-color: #e0dcdc; 
  width: 150px; 
  height: 100px; 
  border-radius: 10%; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
}
.homePage-SM-img{
width: 40px !important; 
height: 40px !important; 
object-fit: cover; 
border-radius: 50%;


}
/**Social Media Icons **/
.SM-Container{
display: flex; 
justify-content: center; 
align-items: center; 
gap: 10px;

}
.SM-Img{
  width: 32px; 
  height: 30px;
}



/**Button Colours**/

.lightGreen{
  background-color: #c2e2c0;
}
.mediumGreen{
  background-color: #93e499;
}
.darkGreen{
  background-color: #6cd56c;
}

#homeBtLeft{
  background-color: #c2e2c0;
}
#homeBtMid{
  background-color: #93e499;
}
#homeBtRight{
  background-color: #6cd56c;
}
/**Button heights**/
.height-80{
  height: 80px;
}
.height-130{
  height: 130px;
}
.height-150{
  height: 150;
}
/** 2 Button Layout**/

.comser-2-btn-container{
  display: flex;
  justify-content: center;
  margin: 20px auto;
}
.comser-2-btn{
border-radius: 10px;
text-align: center;
margin: 5px;
padding: 15px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none !important; 
color: inherit !important;

}
/** 2x2 Button Layout **/
.comser-2x2-Container{
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 100%;
}
.comser-2x2-btn{
  border-radius: 10px;
  text-align:center;
  margin: 5px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  justify-content:center;
  align-items: center;
  text-decoration: none !important; 
  color: inherit !important;
  width: 200px; 
  flex-direction: column;
  box-sizing: border-box;
  height: 150px;
}

/**3 Button Layout**/
.comser-3-btn-container{
display: flex; 
justify-content: space-between; 
max-width: 100%;

}
.comser-3-btn{
border-radius: 10px; 
text-align: center; 
flex: 1; 
margin:5px; 
padding: 20px; 
cursor: pointer; 
display: flex; 
justify-content: center; 
align-items: center;
text-decoration: none !important; 
color: inherit !important;
}
/**4 Button Layout**/
.comser-4-btn-container{
  display: flex;
  justify-content: space-between;
  max-width: 100%;
}

.comser-4-btn{
  border-radius: 10px;
  text-align: left;
  flex: 1;
  margin: 5px;
  padding: 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none !important; 
color: inherit !important;
}

/**5 Button Layout**/

.comser-5-Container{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  flex-wrap: wrap;
}

.comser-5-Btn{

border-radius: 10px;
text-align: left;
margin: 5px;
padding: 20px;
width: 180px;
height: 100px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;

text-decoration: none !important; 
color: inherit !important;

}


/**Train for Job Buttons**/
.trainForJob-Container{
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin: 10px auto;
}

.trainForJob-Button{
  border-radius: 10px;
  text-align: center;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  padding: 15px;
  width: 200px;
  height: 80px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important; 
color: inherit !important;
}
/**Youth In Trades Button**/

.YIT-Container{
  display: flex; 
  justify-content: start; 
  max-width: 100%;
}
.YIT-btn{
width: 250px; 
text-align: left;
border-radius: 10px;
text-align:center;
margin: 5px;
padding: 20px;
cursor: pointer;
display: flex;
justify-content:center;
align-items: center;
text-decoration: none !important; 
color: inherit !important;
}
.Bt{

  border-radius: 10px;
  text-align:center;
  margin: 5px;
  padding: 20px;
  cursor: pointer;
  
  display: flex;
  justify-content:center;
  align-items: center;
  text-decoration: none !important; 
  color: inherit !important;
  
  }

/*
.video-responsive iframe{
  height:70% !important;
  width:600px !important;
}
*/
/** Our Team **/


.comser-ourteam-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  justify-content: center;
  column-gap: 20px;
  row-gap: 90px; 
  padding-top: 40px;
  max-width: 100%;
}

.comser-ourteam-box {
 /* width: 250px; */
  padding: 1.25rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  position: relative;
}

.comser-ourteam-box-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid #fff;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  background-color: white;
}

.comser-ourteam-box-photo img {
  min-width: 100%;
  height: auto;
  object-fit: cover;
}

.comser-ourteam-box-content {
  margin-top: 5rem;
  font-size: 0.98rem;
  color: #555;
}

.comser-ourteam-box-content h2 {
  font-weight: bold;
  font-size: 1.1rem;
}



/**grid 2-col**/
.comser-grid-2col  {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-column-gap: 3rem;
  margin-bottom: 0rem !important;
}
@media (max-width: 1180px) {
  .comser-grid-2col  {
    grid-template-columns: auto!important;
  }
}



/**Community Social media section **/
.programServices{
  color: #74747B !important;
  padding-top: 10px !important;
  text-align: center !important;
}
.programServices h3{
  color: #74747B !important;
  padding-top: 10px!important;
  text-align: center!important;
}

.iconAlignment{

  display:flex;
  justify-content: center;
  align-items:center;
  gap:10px;
}
/** Resources Page **/

.report-container{
 display: flex;
  gap: 10px;

}
.report-card{
position: relative; 
width: 200px; 
height: 250px;  
text-align: center;

}
.report-overlay{
  position: absolute; 
  top: 10px; 
  left: 0; 
  right: 0; 
  text-align: center; 
  padding: 5px;
}
.report-card img{
  width: 100%;
  height: 100%;
  border: 2px solid black;
}
.newsletter-container{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

}
.newsletter-card{
  position: relative;
  width: 200px;
  height: 250px;
  border: 2px solid #000;
  text-align: center;
}
.newsletter-overlay{
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 5px;
}
.newsletter-card img{
  width: 100%;
  height: 100%;
}

/*** Override the Google Map list link **/
table .locationButton {
 /** background: #FCF3E3!important; */
  text-decoration: underline!important;
  color:black!important;
  background: transparent!important;
}

/**** CSS for the About us counter script ****/
 
.ar-content-fullcontainer {
  max-width:100%;
  margin-top:0;
  margin-bottom:0;
}

  .ar-content-container {
  margin:0 auto;
  max-width: 87.5rem; 
  margin-bottom:3rem;
}

.ar-content-fullcontainer, .ar-title-bold, .ar-story-blurb,
.ar-num-content, .ar-footer h1, .ar-footer h2, .ar-story-title  {
  font-family: "Roboto", sans-serif;
  font-style: normal;
}

.ar-content-container h2  {
  font-size:2.4rem!important;
  font-weight: 700!important;
}

.ar-2-col-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ar-col-lt-bkgcolor {
  margin-top:10rem!important;
  padding:0!important
}

/***** Card Sections *****/
.ar-box, .ar-stat-box {
width:100%;
}

.ar-stat-box {
border-top:5rem solid #64A34F;
}

.ar-box-bkgcolor {
padding:2.6rem;
}

.ar-cards-4  {
display: grid;
/* grid-template-columns:repeat(4, 1fr); */
grid-template-columns:repeat(4, minmax(0, 1fr));
grid-gap:1rem;
max-width: 1400;
padding:1rem;
padding-left:1rem;
padding-right:1rem;
}



.ar-cards-3, .ar-cards-2  {
grid-template-columns: 30% 30% 30%;
padding:1.8rem 1rem;
margin-bottom:3.8rem;
justify-content: center;
}

.ar-cards-2  {
grid-template-columns: 30% 30%;
}

.ar-card {
padding:0.5rem;
display:flex;
flex-direction: column;
background-color: white;
border:4px solid #64A34F!important;
}


.ar-num-count {
font-family: "Roboto Condensed", sans-serif;
font-weight:400;
font-size:2rem!important;
color:#444;
text-align: center;
margin:0 auto;
padding:1.2rem 1rem 1.2rem 1rem;
margin-bottom:1rem;
margin-top:1.2rem;
}

.ar-num-content    {
padding-bottom:2rem;
}

.ar-num-content p   {
font-size: 1.2rem!important;
line-height: 1.4rem!important;
}

.ar-stats-box {
text-align: center;
}

.ar-stat-box {
margin-top:4.5rem;
margin-bottom:2rem;
}

.ar-2-col-container, .ar-box-bkgcolor {
margin-top:1.6rem;
padding: 2rem;
padding-bottom: 1rem;
}

.ar-white-bkg-flex {
display: flex;
background-color: white;
gap:1rem;
justify-content: center;
border:2.6rem solid #CCC;
margin:1rem;
}


.ar-footer {
width:100%;
padding:3rem 0;
background-color: black;
}

.ar-footer .ar-footer-container {
max-width:1400px;
margin:0 auto;
color:white;
padding:1rem 2rem;
}

.ar-footer h1, .ar-footer h2 {
color:white;
font-size: 2rem!important;
font-weight: 600!important;
}

.ar-footer h2 {
font-size: 1.6rem!important;
font-weight: normal!important;
}

.ar-footer .footer-icons {
padding:0.78rem 0;
}

.ar-footer .footer-icons .fa-2x {
font-size: 3em;
color: white;
padding-right: 0.88rem;
}


@media (min-width:1401px)  {
.ar-content-container {
margin-top:4rem;
}

.ar-2-col-container, .ar-footer-container  {
  margin-left:2.2rem;
  margin-right:2.2rem;
}

.ar-col-lt-bkgcolor {
  margin-top:0;
  margin-left:0rem!important;
  margin-right:0rem!important;
}

.c_contentpane {
  padding: 0px 0 0 0;
}
}

@media (max-width: 1260px) {
.ar-cards-2 {
  grid-template-columns: 40% 40%;
}
}

@media (max-width: 1140px) {
.ar-2-col-container, .ar-footer-container {
  margin-left: 1.6rem;
  margin-right: 1.6rem;
  padding:0;
}

.ar-cards-4 {
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

/***** Mobile View Menu ************/
@media only screen and (max-device-width:927px) and (orientation:landscape) {
.ar-top-header .adjust-menu {
overflow-x: hidden;
max-height: 325px;
padding-top:1rem;
}
}

@media (max-width: 740px) {

  .comser-5-Container {
    flex-direction: column;
    align-items: center;
  }

  .comser-5-Btn {
    width: 100%;
    
  }


.ar-cards-4 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.homeBt{
  flex-direction: column;
}
.comser-3-btn{
   width: 100%;
   align-items: center;
}
.comser-3-btn-container{

  flex-direction: column;
}

.comser-ourteam-container{
grid-template-columns:repeat(2, 1fr);
}
}

@media (max-width: 640px) {
.comser-4-btn-container {
    flex-direction: column;
    align-items: center;
  }

  .comser-4-btn {
    width: 100%;
    flex: none;
  }

.ar-2-col-container {
  margin-left:1.2rem;
  margin-right:1.2rem;
}

.ar-cards-4 {
  display: block;
  padding-left: 2rem;
  padding-right: 2rem;
}

.ar-card {
    margin:0.58rem;
    margin-bottom:2rem;
}


.ar-2-col-container {
margin-left: 2.6rem;
margin-right: 1rem;
}
}

@media (max-width: 540px){
.comser-ourteam-container{
grid-template-columns:repeat(1, 1fr);
}
}


@media (max-width: 500px){
.homePage-SM-Container {
    flex-direction: column;
    align-items: center;

}}


@media (max-width: 440px) {
.ar-top-header .adjust-menu {
  overflow-x: hidden;
  max-height: 325px;
  padding-top:1rem;
}
.comser-ourteam-container{
grid-template-columns:repeat(1fr);

}
.trainForJob-Container{
  flex-direction: column;
  align-items: center;
}
.trainForJob-Button{
  width: 100%;
}
}

@media (max-width: 400px) {

.ar-content-container h2 {
  font-size: 1.6rem !important;
}

.ar-content-container h2.ar-card-title {
line-height: 2rem !important;
}
}