@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,300&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; color: #fff}
body {position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: url("../img/bg.jpg") center center / cover no-repeat; height: 100vh; width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden}
body::after {content: '';background: linear-gradient(45deg,#075a9c 50%,#62b7ff);opacity: .92;position: fixed;inset: 0;width: 100%;height: 100%;z-index: -1}
img {width: 100%; display: block}
.campo {margin-bottom: 15px; position: relative}
.campo .icone {position: absolute;width: 23px;left: 26px;top: 13px;fill: #9f9f9f; transition: .5s}
.campo.ativo .icone {fill: #04e283}
input {width: 100%; height: 50px; padding: 15px 15px; font-size: 16.5px; text-indent: 50px; border: 2px solid transparent; border-radius: 6px; color: #000; font-weight: 300; transition: .5s}
input:focus, input:focus-within {outline: 0; box-shadow: 0; border: 2px solid #04e283}
button {display: block;width: 100%;text-align: center;background: #04e283;border: 2px solid #04e283;padding: 20px;text-transform: uppercase;font-size: 24px;font-weight: 600;border-radius: 99px; transition: .5s; cursor: pointer}
button:hover {background: transparent; color: #04e283}
button svg {width: 25px; vertical-align: middle; fill: #ffffff; transition: .5s}
button:hover svg {fill: #04e283}
.mockup {width: 35%}
.mockup img {filter: drop-shadow(20px 20px 30px #00000045)}
.txt {width: 55%}
.obrigado .txt {width: 600px; text-align: center}
.txt h1 {font-weight: 300;font-size: 33.5px;margin-bottom: 60px}
.txt h1 span {display: block;text-transform: uppercase;font-size: 62px;letter-spacing: -2px;font-weight: 900;color: #04e283}
.txt p {font-weight: 300;font-size: 19px;letter-spacing: 1px;margin-bottom: 25px}
body.obrigado {background: linear-gradient(360deg, #076cba, #3689cd);justify-content: center}
body.obrigado::after {display: none}
.obrigado button svg {width: 32px}
.obrigado .txt > svg {width: 50px; fill: #04e283}
.obrigado .txt h1 {font-weight: 300;font-size: 80px;margin-bottom: 30px}
.obrigado .txt h1 span {font-size: 80px}
.obrigado .txt p {font-size: 20px;margin-bottom: 80px; line-height: 1.5}

@media (max-height: 900px){body {height: auto; padding: 50px 0; overflow: visible}}

@media (max-width: 768px){
body {height: auto; padding: 50px 20px; overflow: visible; flex-direction: column}	
button {padding: 17px;font-size: 21px}
button svg {width: 22px}
input {font-size: 15px; height: 45px}
.campo .icone {width: 20px;left: 28px;top: 12px}	
.mockup, .txt {width: 100%}
.mockup img {width: 65%;margin: 0 auto 50px}
.txt h1 {font-size: 17px;text-align: center; margin-bottom: 40px}
.txt h1 span {font-size: 28px;letter-spacing: .5px;-webkit-text-stroke: 1px}
.txt p {font-size: 16px;text-align: center;letter-spacing: 0;margin-bottom: 20px}
body.obrigado {height: 100vh}
.obrigado .txt {width: 100%}	
.obrigado .txt h1 {font-size: 40px}
.obrigado .txt h1 span {font-size: 40px;}
.obrigado .txt p {font-size: 17px}	
}