body {
background: #fcf6e5;
}
#app-hero {
padding-top: 227px;
background-image: url(//tamatanga.com/wp-content/uploads/2024/06/app-bg-1.png);
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.app-hero {
text-align: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.app-hero h1 {
font-size: 5rem;
margin: 0;
height: fit-content;
color: #fffcf4;
transform: rotate(-6deg);
margin-bottom: 30px;
}
.app-hero h4 {
color: #fffcf4;
margin-bottom: 20px;
}
.app-hero > img {
margin-bottom: 100px;
margin-top: 50px;
}
.app-hero .download-apps {
display: flex;
gap: 15px;
position: absolute;
left: 5%;
top: 0;
}
.app-hero .download-apps img {
max-width: 150px;
height: auto;
}
#app-intro {
position: relative;
padding-top: 75px;
}
#app-intro .left-leaf {
position: absolute;
left: 0;
top: -100px;
pointer-events: none;
}
.app-intro {
text-align: center;
}
.app-intro .rewards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 100px;
margin-bottom: 30px;
}
.app-intro .rewards p {
margin-bottom: 0;
}
.app-intro h3 {
margin-bottom: 50px;
}
.app-intro .reward b {
font-weight: 700;
}
.app-intro .reward img {
margin-bottom: 10px;
height: 205px !important;
object-fit: contain;
object-position: bottom center;
}
.app-intro h4 {
line-height: 1.1;
}
.app-intro .download-apps {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.app-intro .download-apps img {
max-width: 150px;
height: auto;
}
#app-steps {
margin-top: 150px;
background-image: url(//tamatanga.com/wp-content/uploads/2024/06/steps-bg.png);
background-size: 15% auto;
background-position: center right;
background-repeat: no-repeat;
padding-bottom: 200px;
position: relative;
}
#app-steps .flower {
position: absolute;
bottom: 0;
left: 0;
z-index: 100;
pointer-events: none;
}
.app-steps {
margin: 0 15%;
text-align: center;
}
.app-steps > h3 {
margin-bottom: 25px;
text-align: center;
}
.app-steps .steps {
margin-bottom: 30px;
background-image: url(//tamatanga.com/wp-content/uploads/2024/06/line.png);
background-position: top center;
background-size: 43% 76%;
background-repeat: no-repeat;
padding-top: 50px;
}
.app-steps .steps b {
font-weight: 700;
}
.app-steps .steps .row:not(:first-of-type) {
margin-top: -75px;
}
.app-steps .steps .row > div {
width: 40%;
}
.app-steps .steps .row h2 {
font-size: 3rem;
}
.app-steps .steps .row h2 span {
font-size: 10rem;
line-height: 1;
letter-spacing: -15px;
}
.app-steps .steps .row:nth-of-type(1) h2,
.app-steps .steps .row:nth-of-type(1) h4 {
color: #008b92;
}
.app-steps .steps .row:nth-of-type(2) h2,
.app-steps .steps .row:nth-of-type(2) h4 {
color: #f39200;
}
.app-steps .steps .row:nth-of-type(3) h2,
.app-steps .steps .row:nth-of-type(3) h4 {
color: #f15f3a;
}
.app-steps .steps .row:nth-of-type(4) h2,
.app-steps .steps .row:nth-of-type(4) h4 {
color: #42aa93;
}
.app-steps .steps .row:nth-of-type(2n - 1) {
display: flex;
justify-content: flex-start;
text-align: end;
}
.app-steps .steps .row:nth-of-type(2n) {
display: flex;
justify-content: flex-end;
text-align: start;
}
.app-steps .download-apps {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.app-steps .download-apps img {
max-width: 150px;
height: auto;
} @media screen and (max-width: 1900px) {
#app-intro .left-leaf {
max-width: 20%;
height: auto;
}
}
@media screen and (max-width: 1300px) {
.app-steps {
margin: 0 10%;
}
#app-steps .flower {
max-width: 30%;
height: auto;
}
} @media screen and (max-width: 1200px) {
#app-steps {
background-image: none;
}
.app-steps {
margin: 0;
}
.app-hero > img {
margin-bottom: 50px;
}
}
@media screen and (max-width: 1024px) {
.app-hero .download-apps {
left: 0%;
top: -50px;
}
} @media screen and (max-width: 992px) {
.app-intro .rewards {
gap: 50px;
}
.app-steps .steps .row h2 span {
font-size: 7rem;
}
.app-steps .steps .row h2 {
font-size: 2.5rem;
}
.app-steps .steps {
background-size: 44% 73%;
}
.app-intro h4 br {
display: none;
}
} @media screen and (max-width: 768px) {
} @media screen and (max-width: 767px) {
#app-hero > img {
left: initial !important;
right: 0 !important;
}
.app-hero > img {
max-width: 100%;
height: auto;
margin-bottom: 80px;
}
#app-intro .left-leaf {
display: none;
}
#app-intro {
padding-top: 25px;
}
.app-intro .rewards {
grid-template-columns: 1fr;
}
.app-intro h4 br {
display: block;
}
.app-intro h3 {
margin-bottom: 0;
}
.app-steps .steps {
background-image: none;
}
.app-steps .steps .row > div {
width: 100%;
}
.app-steps .steps .row:not(:first-of-type) {
margin-top: 50px;
}
}
@media screen and (max-width: 576px) {
#app-hero {
padding-top: 175px;
}
.app-hero h1 {
font-size: 4rem;
}
} @media screen and (max-width: 375px) {
.app-hero h1 {
font-size: 3.5rem;
line-height: 1;
}
}