/*
flexiscorp css

blue	4a7c9e
red		be4e50
silver	b6b8ba
gray	8a8c8e

*/

body{
	
	xbackground-color: #d0dce2;
 font-family: Arial, Helvetica, sans-serif;
 font-size:	16pt;
 margin: 0px;
}

#wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  xheight: 100vh;
  height: 100%;
   
}

.herotop{
	
	display: block;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.hero{
	
	display: block;
	text-align: center;
}

.hero-image{
	display: inline;
	text-align: left;
}	

.hero-text{
	
	display: inline;
	text-align: left;
}
.center{
  display: flex;
  align-items: center;
  justify-content: center;
  xheight: 100vh;
 
}

.auto-scale {
    max-width: 100%;
    height: auto;
    display: block;
}

.bgdark{
	xbackground-color: #f1f7ff;
}



.container {
    display: flex;
    xmax-width: 800px;
    background-color: white;
    xbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center; /* Ensure text inside the container is left-justified */
}

.column {
    flex: 1;
    padding: 20px;
}

.image-column {
    flex-basis: 30%;
	text-align: center;
}

.image-column img {
    max-width: 100%;
    height: auto;
    xdisplay: block;
}

.text-column {
    flex-basis: 70%;
    padding: 20px;
	text-align: left;
}

.text-column h1 {
    margin-bottom: 20px;
    font-size: 24px;
}

.text-column p {
    margin-bottom: 15px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
	
    .text-column {
        order: 1;
        flex-basis: 100%;
        padding: 10px;
    }
	
    .image-column {
        order: 2;
        flex-basis: 100%;
        padding: 10px;
    }

    .text-column h1 {
        font-size: 16pt;
		
    }
}


.button {
  background-color: #4a7c9e; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}


.button:hover {
  background-color: #be4e50;
  color: white;
  cursor: hand;
}