*{ margin: 0; padding: 0; } button { background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; outline: none; } .hero_cta_btn:hover{ background: #294e95 0% 0% no-repeat padding-box; border: 1px solid white; color: white; } .header-banner{ width: 100%; position: relative; } .pc-image{ width: 100%; display: block; } .mobile-image{ display: none; } .header-content{ width: 420px; position: absolute; top: 50%; left: 0; transform: translate(25%,-50%); color: white; } .header-content > p { margin: 20px 0; } .sec-h{ font-size: 32px; } .fir-h{ font-size: 20px; } .header-button { width: 220px; height: 48px; align-items: center; padding: 0 24px; font: 700 16px / 16px Lato; background: #fff 0% 0% no-repeat padding-box; border: 1px solid #171717; border-radius: 4px; color: #000; letter-spacing: 0px; cursor: pointer; } .header-button:hover { background: #294e95 0% 0% no-repeat padding-box; border: 1px solid white; color: white; } @media screen and (max-width: 390px) { .pc-image{ display: none; } .mobile-image{ width: 100%; display: block; } .header-content { top: unset; left: 50%; bottom: 0%; transform: translate(-50%, 0); background-color: rgba(0, 0, 0, .5); padding: 10px 20px; width: 100%; height: 70%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; } .header-content > p { margin: 10px 0; font-size: 12px; } .sec-h{ font-size: 18px; } .fir-h{ font-size: 15px; } .header-button { width: 180px; font-size: 12px; height: 34px; margin-top: 10px; } .bottom-words{ width: 88%; } } @media screen and (min-width: 391px) and (max-width: 460px){ .pc-image{ display: none; } .mobile-image{ width: 100%; display: block; } .header-content { top: unset; left: 50%; bottom: 0%; transform: translate(-50%, 0); background-color: rgba(0, 0, 0, .5); padding: 10px 20px; width: 100%; height: 70%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; } .header-content > p { margin: 10px 0; font-size: 12px; } .sec-h{ font-size: 18px; } .fir-h{ font-size: 15px; } .header-button { width: 180px; font-size: 12px; height: 34px; margin-top: 10px; } .bottom-words{ width: 88%; } } @media screen and (min-width: 461px) and (max-width: 768px) { .pc-image{ display: none; } .mobile-image{ width: 100%; display: block; } .header-content { top: unset; left: 50%; bottom: 0%; transform: translate(-50%, 0); background-color: rgba(0, 0, 0, .5); padding: 10px 20px; width: 100%; height: 70%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; } .header-button { margin-top: 10px; } .bottom-words{ width: 56%; } .sec-h{ font-size: 26px; } .fir-h{ font-size: 20px; } } @media screen and (min-width: 769px) and (max-width: 1000px) { .header-content{ width: 300px; } .top-words { margin: 15px 0; font-size: 12px; } .sec-h{ font-size: 16px; } .fir-h{ font-size: 14px; } .header-button { width: 180px; font-size: 12px; height: 34px; } .bottom-words{ margin: 15px 0 5px 0 !important; font-size: 12px; } } @media screen and (min-width: 1001px) and (max-width: 1200px) { .header-content{ width:410px; left: 10%; transform: translate(0, -50%); } .header-content > p { margin: 15px 0; font-size: 16px; } .sec-h{ font-size: 20px; } .fir-h{ font-size: 18px; } } @media screen and (min-width: 1201px) and (max-width: 1500px) { .header-content { width: 470px; left: 12%; transform: translate(0, -50%); } .header-content > p { font-size: 18px; } .fir-h{ font-size: 20px; } .sec-h{ font-size: 24px; } } @media screen and (min-width: 1501px) and (max-width: 1920px) { .header-content { width: 560px; left: 14%; transform: translate(0, -50%); } .header-content > p { font-size: 16px; } .fir-h{ font-size: 20px; } .sec-h{ font-size: 32px; } } @media screen and (min-width: 1921px) { .header-content { left: 10%; width: 600px; } .header-content > p { margin: 20px 0; font-size: 22px; } .sec-h{ font-size: 32px; } .fir-h{ font-size: 28px; } .header-button{ font-size: 20px; width: 260px; } }