* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     min-height: 100%;
 }

 body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 15px;
     line-height: 20px;
     color: #242021;
     font-weight: 400;
 }

 #wrapper {
     max-width: 992px;
     margin: 1rem auto;
     border: solid thin #242021;
     overflow: hidden;
     position: relative;
     background: #fff;
 }

 header {
     background: #5b2873;
     display: flex;
     justify-content: space-between;
 }

 header div {
     padding: 30px 30px 16px;
 }

 header div:nth-of-type(2) {
     background: #472973;
     width: 355px;
     display: flex;
     justify-content: center;
 }

 article {
     padding: 28px 35px 24px;
 }

 .logo {
     display: flex;
     justify-content: center;
 }

 article .flexbox {
     display: flex;
     justify-content: space-between;
     gap: 20px;
 }

 article .flex {
     width: 49%;
 }

 article .flex:nth-of-type(1) {
     width: 47%;
 }

 article .flex:nth-of-type(2) .box p {
     display: flex;
     align-items: center;
     gap: 17px;
     margin: 0 0 12px -20px;
 }

 article .flex:nth-of-type(1) p:last-child img {
     vertical-align: middle;
     margin: 3px 8px 0 3px;
 }

 .font {
     font-size: 24px;
     color: #5b2873;
     font-weight: bold;
     margin-bottom: 0 !important;
     line-height: 1.1;
 }

 .font-big {
     font-size: 20px;
 }

 :is(ul li, p) strong {
     color: #5b2873;
 }

 article>p:nth-of-type(1) strong {
     font-size: 22px;
     line-height: 1.5;
 }

 :is(strong, h1, h2) {
     font-weight: 700;
 }

 h1 {
     font-size: 71px;
     margin: 30px 0;
     line-height: 1.1;
     color: #5b2873;
 }

 h1 span {
     font-size: 37px;
 }

 h1 small {
     display: block;
     font-size: 39px;
 }

 h2 {
     font-size: 16px;
     margin: 0 0 14px;
     line-height: 20px;
     color: #00aeef;
 }

 h3 {
     font-size: 22px;
     line-height: 1.2;
     font-weight: bold;
     padding-bottom: 15px;
 }

 img {
     max-width: 100%;
     vertical-align: bottom;
 }

 p:not(:last-child) {
     margin-bottom: 15px;
 }

 :is(a:link, a:visited, a:hover, a:active) {
     color: #009ee3;
     text-decoration: none;
     font-weight: 700;
     white-space: nowrap;
 }

 .link img {
     display: inline-block;
     margin: 7px 0 4px 2px;
     position: relative;
     top: -2px;
 }

 ul {
     list-style: none;
     padding: 0 0 20px;
 }

 ul li {
     padding-left: 22px;
 }

 ul li:before {
     text-indent: -22px;
     content: "\2212";
     color: #000;
     float: left;
     font-size: 17px;
     margin-top: 1px;
 }

 ul.ul li {
     font-weight: 700;
     color: #5b2873;
     font-size: 22px;
     line-height: 28px;
 }

 ul.ul li:before {
     color: #5b2873;
     font-size: 23px;
 }

 .box {
     margin: 18px 0 21px;
 }

 .socical {
     margin-top: 0;
 }

 .fontsize {
     font-size: 23px;
     line-height: 1.1;
 }

 .color {
     color: #009ee3 !important;
 }

 footer {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
 }

 .icon {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
 }

 .infor {
     background: #5C2874;
     padding: 10px;
     width: 327px;
     height: 288px;
     clip-path: ellipse(50% 40% at 50% 50%);
     display: flex;
     justify-content: center;
     align-items: center;
     padding-left: 52px;
     transform: scale(1) rotate(351deg) translateX(1px) skewX(1deg);
     position: absolute;
     top: -139px;
     left: 29px;
 }

 .infor :is(h3, p) {
     color: #fff;
 }

 @media screen and (max-width:991px) {
     #wrapper {
         border: none;
         margin: 0;
         line-height: 21px;
     }

     :is(header div, article) {
         padding: 16px;
     }

     .nowrap {
         white-space: nowrap;
     }

     :is(h1, h2, p, ul li) {
         hyphens: auto;
     }

     h1 {
         font-size: 70px;
     }

     br:not(br.mobile-block) {
         display: none;
     }

     .infor {
         left: 1rem;
     }

     article .flex {
         width: 46%;
     }
 }

 @media screen and (max-width:888px) {
     #wrapper {
         background: #fff;
         padding-bottom: 0;
     }

     h1 {
         font-size: 80px;
     }

     footer img {
         display: block;
     }
 }

 @media screen and (max-width:820px) {
     article .flexbox {
         flex-direction: column;
     }

     article .flex {
         width: auto !important;
     }

     article .flex:nth-of-type(2) .box p {
         margin-left: 0;
     }

     h1 {
         font-size: 60px;
         margin: 30px 0;
     }

     h1 :is(span, small) {
         font-size: 30px;
     }

     .infor {
         margin: 0 auto;
         position: static;
         transform: none;
     }
 }

 @media screen and (max-width:660px) {
     h1 {
         line-height: 1;
         font-size: 40px;
     }

     :is(h1 small, h1 span) {
         display: inline;
         font-size: 24px;
     }
 }

 @media screen and (max-width:510px) {
     header {
         flex-direction: column;
         align-items: center;
     }

     header div:nth-of-type(2) {
         width: 100% !important;
     }
 }

 @media screen and (max-width:400px) {
     .infor {
         width: auto;
     }

     .infor br {
         display: inline !important;
     } }