@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
*
{
    margin: 0;
    padding: 0;
}
body
{
    align-items: center;
    align-content: center;
    justify-content: center;
    font-family: 'poppins', sans-serif;
}

h1{
    color: rgb(255, 136, 0);
    font-size: 40px;
    letter-spacing: 8px;
    text-transform: uppercase;
}
h1 span{
    color: #111;
}

.container
{
    max-width: 900px;
    height: auto;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    padding: 30px;
    background: #fcf5c7f;
}
@media (max-width: 850px){
    .container{
        max-width: 450px;
        margin: 0 10px;
    }
}
.container .header
{
    text-align: center;
}
.container .info
{
    position: relative;
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 400px;
    height: 550px;
    background: #e8f3c0;
    margin: 7px;
    padding: 15px;
    border: 1px solid crimson;
    transition: 0.3s ease-in-out;
    font-size: 14px;
}
.container .info:hover
{
    box-shadow: 10px 10px 15px #0000006b;
}
.container .info .imgarea
{
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 400px;
    height: 300px;
    padding-bottom: 20px;
}
.container .info .imgarea img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container .formfilling
{
    position: relative;
    display: inline-block;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    height: 550px;
    background: #e8f3c0;
    margin: 7px;
    padding: 15px;
    border: 1px solid crimson;
    transition: 0.3s ease-in-out;
}
.container .formfilling:hover
{
    box-shadow: 10px 10px 15px #0000006b;
}
.design
{
	background-color: #f5f2d6;
	border:1px solid #621212;
    /* outline: 1px solid #281d8f;
    outline-offset: -13px; */
	padding:5px;
	transition: 0.5s ease-out;
	width: 400px;
	align-items: center;
}

.gdalternate
{
	font-size: 12px;
    font-weight: 500;
	background-color : #87e4e9;
	color :#000000;
	line-height: 25px; 
	overflow: hidden;
}
.gdalternate1
{
	background-color:#d4fdff;
	font-size: 12px;
    font-weight: 500;
	color: #000000;
	line-height: 25px; 
	overflow: hidden;
}
.labels
{
	font-family:"Segoe UI";
	color:#000;
	font-size:14px;
	width: 50%;
	padding-left: 10px;
}

.hdr
{
  	font-family:"Trebuchet MS";
	font-size:35px;
	color:#000;
	margin: 20px;
  	padding-bottom: 10px;
}
.ghead
{
	background-color :  #291d8fe3;
	color :#ffffff;
	line-height: 30px; 
	padding-left: 5px;
	padding-bottom: 10px;
	margin-left: 10px;

}
.gheadd
{
	padding-left: 10px;
    font-weight: 600;
    font-size: 15px;
}
.fields
{
	cursor: pointer;
	font-family:"Segoe UI";
	padding:3px 6px;
	color:#000;
	border:1px solid #126062;
  	width: 90%;
	position: relative;
	background:#f5f6f7;
	margin: 5px;
}
.btn
{
	margin-top: 5px;
    margin-bottom: 5px;
	padding: 5px 10px;
	background: rgb(255, 188, 111);
	color: #000;
	border: 1px solid red;
	border-radius: 5px;
	cursor: pointer;
	width: 130px;
	font-weight: 700;
	transition: 0.1s ease-in-out;
}
.btn:hover
{
    background: rgb(207, 255, 130);
    color: #004f52;
}
.bttn
{
    text-align: center;
    align-items: center;
    margin-bottom: 50px;
}
.bttn a
{
    text-decoration: none;
    background-color: #a85dff;
    width: 30px;
    padding: 0 5px;
    font-size: 20px;
    color: #fff;
    font-weight: 500px;
    border-radius: 2px;
}
.bttn a:hover
{
    color: darkblue;
}