@charset "utf-8";
/* CSS Document */

body {margin: 0;padding: 0;background: #0c0c0c;color: #d4ff4f;font-family: "Saira Condensed", sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #000;}

.mid_content {background: #FFF;padding: 30px 20px;border-radius: 14px;text-align: center;width: 40%;box-shadow: 0 0 12px rgba(85, 241, 67, 0.2);position: relative;}
.mid_content h1{color: #040404;font-size: 100px;margin: 0 auto 25px;position: relative;text-transform: uppercase;line-height: 105px;}
.mid_content h1:before{content: "";width: 95%;bottom: -15px;left: 50%;height: 0.5px;background-color: #1ba79c;position: absolute;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);}
.mid_content h3{color: #1aa79b;font-size: 55px;margin: 15px 0 0;position: relative;line-height: 55px;display: inline-block;font-family: "Saira Condensed", sans-serif;}
.mid_content p{font-size: 18px;font-weight: 400;line-height: 1.5;color: #212529;font-family: "Poppins", sans-serif;}
.mid_content hr{width: 60%;background-color: #1ba79c;height: 0.5px;}
.social_list{padding: 0}
.social_list li a{width: 61px;height: 61px;line-height: 60px;font-size: 31px;color: #FFF;display: table;text-align: center;border-radius: 50%;background-color: #1aa79b;margin: 0 auto;}

@media (max-width: 1399px) {
  .mid_content h1 {font-size: 90px;}
  .mid_content h3 {font-size: 50px;}
}
@media (max-width: 1199px) {
  .mid_content {width: 49%;}
}
@media (max-width: 1099px) {
  .mid_content {width: 65%;}
}
@media (max-width: 860px) {
  .mid_content {width: 77%;}
  .mid_content h1 {font-size: 85px;}
  .mid_content h3 {font-size: 45px;}
  .mid_content hr {width: 70%;}
}
@media (max-width: 767px) {
  .mid_content h1 {font-size: 75px;}
  .social{display: table;width: 100%;}
  .social_list {margin-bottom: 0;}
}
@media (max-width: 575px) {
   .mid_content h1 {font-size: 65px;line-height: 75px;}
   .mid_content h3 {font-size: 39px;margin: 5px 0 0;}
   .mid_content {width: 90%;}
}
@media (max-width: 480px) {
    .mid_content h1:before {width: 100%;}
    .mid_content hr {width: 85%;}
}
@media (max-width: 390px) {
    .mid_content h1 {font-size: 55px;line-height: 65px;}
    .mid_content h3 {font-size: 34px;margin: 0;line-height: normal;}
    .mid_content p {font-size: 16px;font-weight: 400;}
    .mid_content {padding: 20px 15px;}
    .mid_content hr {height: 0px;}
}