@font-face {
    font-family: "recharge bd";
    src: url("../fonts/original-recharge-bd.ttf");
    src: url("../fonts/recharge-bd.eot");
    src: url("../fonts/recharge-bd.svg");
    src: url("../fonts/recharge-bd.ttf");
    src: url("../fonts/recharge-bd.woff");
    src: url("../fonts/recharge-bd.woff2");
}
h2 { font-family: "recharge bd"; color: #fff; font-size:50px; padding: 3% 0;}
h2 span { font-size: 80px; display: block;}
body { background: #ccc; margin:0; padding: 0; }
*{ margin:0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.wraper { background: url(../images/1bg.jpg) no-repeat 0 center; position: relative; width: 100%;  height: 100%; background-size: cover; z-index:1; }
.wraper:after { width: 100%; height: 100%; position: absolute; content:''; left:0; top: 0; background:rgb(0 0 0 / 80%); z-index:2;}
.contain { position: relative; z-index:3; max-width: 1024px; width: 100%; margin: 0 auto; text-align: center;}
.contact-cls { margin: 0 auto; max-width: 520px; width: 100%;}
.contact-cls ul { list-style: none; margin: 0; padding: 0;}
.contact-cls ul li {padding: 10px;}
.contact-cls ul li input,
.contact-cls ul li textarea {padding: 10px; border-radius: 5px; border: 1px solid #ccc; width: 100%; font-size: 16px; font-family: Arial;}
.contact-cls ul li textarea { min-height:150px; resize: none;}
.contact-cls ul li #send-mail { padding: 13px 25px; width: auto; color: #fff; font-weight: bold; background: #ff0000; cursor: pointer; border: 2px solid #ccc; margin-bottom: 100px;}
.contact-cls ul li #send-mail:hover { background: #333;}

.logo { display: block; width: 100%; text-align: center;}
.logo a { display: inline-block; margin: 5% auto 0;}
.logo a img { max-width: 280px; height: auto;}
.footer { padding: 10px; background: #333;position: relative; width: 100%; bottom: 0; left: 0; z-index: 9; text-align: center; font: 11px/14px Arial; color: #ccc;}
.footer a { color:#ccc; padding: 0 0 0 5px; }
.footer a:hover { color:#fff; text-decoration: none; }
.footer p { margin: 0;}
@media only screen and (min-width: 1023px) {
}
@media only screen and (max-width: 768px) {
    .logo a { margin-top: 1%;}
    h2 { padding: 2% 0;}
    h2 span { font-size: 65px; }
    
}
@media only screen and (max-width: 468px) {
    .logo a img { max-width: 72px;}
    h2 { font-size: 20px;}
    h2 span { font-size: 32px;}  
    .contact-cls ul li { padding: 5px;}
    .contact-cls { width:90%;}
    .contact-cls ul li input, .contact-cls ul li textarea { font-size: 14px;}
}