/********** common setting **********/
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
html { scroll-behavior: smooth }
:root { --color10:#14C962; --color20:#2CE079; --black90:#262626; --black70:#525252; }
* { font-family: "Inter", sans-serif !important; }
h2 { font-size: 2.8rem !important; font-weight: 700; }
img { display: block; max-width: 100%; }
a, button { cursor: pointer; }
.jumbotron { margin-bottom: 0 !important;   /*  padding-bottom: 0 !important; */ }
.atlas-cta { border-radius: 30px !important; padding: 12px 30px !important; font-weight: 700; transition: .3s ease-in-out !important; font-size: 180% !important; }

.lead-pay { zoom:.5; /* padding: 2rem 0 1em;  */display: inline-block; }

.atlas-cta:hover { text-decoration: none; transform: translateY(1px); }
.atlas-cta-wide { width: 100%; }
.cta-green { background: var(--color10); color: #fff; }
.cta-green:hover { color: #ffffff; background: var(--color20); }
.cta-blue { background: var(--black90); color: #ffffff; }
.cta-blue:hover { color: #ffffff; background: var(--black70); }
.cta-ghost { border: 2px solid #192440 !important; color: var(--black70); }
.cta-ghost:hover { color: #ffffff; background: var(--black90); }
#banner { background-size: cover;    /*overflow: hidden;*/ }

/********** banner **********/
#banner header { overflow: hidden; }
#banner header img { max-width: 130px; }

/********** feature (skew background) **********/
.topFeatrures img { width: 3rem; }
.headerLogo img { display: inline; }
.headerFeatureCon { position: relative; width: 100%; height: 100%; }

.headerFeature { position: relative; }
.feature img { width: 100%; max-width: 600px; }
#feature-first { background: linear-gradient(168deg, #ffffff 55%, var(--color10) 0); }
#feature-middle { background: #ffffff; }
#feature-last { background: var(--color10); }

/********** price table **********/
#price-table { padding-top: 4rem !important; padding-bottom: 4rem !important; }
#price-table__premium { background: #192440; color: #ffffff; }
#price-table ul li { padding: 5px 0; }

/********** contact **********/
#contact { background-size: cover; }
#contact ul li { padding: 3px 0; }
#contact form { color: var(--color10); }
#contact form input, #contact form textarea { background: transparent; border: 1px solid var(--color10); color: #ffffff; }

/********** copyright **********/
#copyright { background: var(--black90); padding: 2rem 3rem; }
#copyright #social-media a { width: 40px; height: 40px; border-radius: 99%; background: #ffffff; transition: .4s ease; }
#copyright #social-media a i { color: #192440; font-size: 1.2rem; line-height: 40px; }
#copyright #social-media a:hover { background: #00FFAD; }
#copyright #social-media a:hover i { color: #ffffff; }

/********** RWD **********/
@media (max-width:575px) {
    #banner h1 { font-size: 3rem; }
}

/********** viewport **********/
@media (max-width:575px) {
    .headerFeature { bottom: -4rem }
}
@media (min-width:576px) {
    .headerFeature { min-width: 100%; left: 0; bottom: -7rem }
}
@media (max-width:767px) { }
@media (min-width:768px) {
    .headerFeature { min-width: 105%; left: 0; bottom: -7rem }
}
@media (max-width:991px) { }
@media (min-width:992px) {
    .headerFeature { bottom: -7rem; left: -7rem; min-width: 125% }
    @media (max-width:1199px) { }
    @media (min-width:1200px) {
        .headerFeature { bottom: -7rem; left: -10rem; min-width: 120% }
    }