/* Footer Wave Background */
.footer {
    position: relative;
    background-size: cover;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    color: #ffffff;
    padding: 20rem 2rem 2rem;
}


/* Container inside footer */
.footer .container {
    width: 100%;
}

/* Links */
.footer-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-link:hover {
    color: #ffc107;
}

/* Logos */
.agapay-logo {
    height: 120px;
}

.agapay-logo-nav {
    height: 100px;
}


.sti-logo {
    width: 100px;
    border-radius: 5%;
}

/* Copyright text */
.agapay-copyright {
    font-size: 0.8rem;
    color: #ffffff;
}


.terms-page {
    max-width: 800px;
    margin: 0 auto;
    color: #222;
    line-height: 1.7;
}

.index-page {
    max-width: 800px;
    margin: 0 auto;
    color: #222;
    line-height: 1.7;
    align-items: center;
}

.terms-page h1 {
    font-size: 2.5rem;
}

.terms-page h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
}

.terms-page h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
}

.terms-page ul {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    text-underline-mode: none;
}

.terms-page h1,
.terms-page h2,
.terms-page h3 {
    color: #003366 !important;
}

/* Landing Hero Page */

.hero-text h2 {
    font-size: 3.2rem;
    font-weight: bold;
    color: #002147;
    margin-top: -250px;
}
.hero-text .highlight {
    color: #f6a623; /* Orange */
}
.hero-text p {
    margin-top: 10px;
    font-size: 1rem;
    color: #444;

}

.store-btn {
    height: 50px;
    margin-right: 10px;
}

/* DECORATIONS */

.curves-left {
    position: absolute;
    bottom: -300px;  /* move it lower */
    left: -500px;    /* move it more left */
    width: 700px;
    z-index: -99;    /* stays behind text */
}
.curves-right {
    position: relative;
    top: -282px;
    right: -127%;
    width: 494px;
    z-index: -99;
}
.triangle-left {
    position: absolute;
    bottom: -200px;
    right: 167%;
    width: 400px;
    z-index: -99;
}
.triangle-left-1 {
    position: absolute;
    bottom: -350px;
    right: 167%;
    width: 400px;
    z-index: -99;
}
.triangle-right {
    position: relative;
    top: 130px;
    right: -88%;
    width: 387px;
    z-index: -99;
}

.hero-image {
    position: relative;
    max-width: 100%;
}

.hero-image .phones {
    margin-top: -144px;
    position: relative;
    z-index: 1;
    right: 17%;
    width: 554px;
    overflow-x: hidden;
}

.hero-image .girl {
    position: absolute;
    bottom: 0;
    left: 49%;
    z-index: 99;
    width: 461px;
    overflow-x: hidden;
}
.emp-b {
    color: #f6a623;
}

/* 3 Easy Steps Section */

.signup-section {
    background-color: #fafafa;
    text-align: center;
    padding-bottom: 20px;
}

.signup-section p {
    font-size: 1rem;
    color: #666;
}

.signup-section h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 40px;
}

.steps {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.step {
    max-width: 300px;
    text-align: center;
}

.images-steps {
    height: 300px;
    margin-right: 10px;
}

/* Mockups Section */

.mockup-image {
    position: relative;
}

.mockup-image .firstmockup {
    margin-top: -125%;
    position: relative;
    z-index: 1;
    left: 3%;
    width: 550px;
    overflow-x: hidden;
}


.firstmockup-text{
    position: relative;
    right: 1%;
}

.firstmockup-text h2 {
    font-size: 3.2rem;
    font-weight: bold;
    color: #002147;
    margin-top: -500px;
}
.firstmockup-text .highlight {
    color: #f6a623; /* Orange */
}
.firstmockup-text p {
    margin-top: 10px;
    font-size: 1rem;
    color: #444;

}

/* SECOND MOCKUP DESIGN */
.mockup-image .secondmockup {
    margin-top: -700px;
    position: relative;
    z-index: 1;
    left: 16%;
    width: 718px;
    /* max-width: 100%; */
    overflow-x: hidden;
}

.secondmockup-text{
    position: relative;
    right: -4%;
}

.secondmockup-text h2 {
    font-size: 3.2rem;
    font-weight: bold;
    color: #002147;
    margin-top: -400px;
}
.secondmockup-text .highlight {
    color: #f6a623; /* Orange */
}
.secondmockup-text p {
    margin-top: 10px;
    font-size: 1rem;
    color: #444;

}

/* THIRD MOCKUP DESIGN */
.mockup-image .thirdmockup {
    margin-top: -70px;
    position: relative;
    z-index: 1; /* phones below */
    right: 30%;
    width: 100%; /* adjust size */
    max-width: 100%;
    overflow-x: hidden;
}

.thirdmockup-text{
    position: relative;
    left: -10%;
}

.thirdmockup-text h2 {
    font-size: 3.2rem;
    font-weight: bold;
    color: #002147;
    margin-top: -250px;
}
.thirdmockup-text .highlight {
    color: #f6a623; /* Orange */
}
.thirdmockup-text p {
    margin-top: 10px;
    font-size: 1rem;
    color: #444;

}


/* FOURTH MOCKUP DESIGN */
.mockup-image .fourthmockup {
    margin-top: -88px;
    position: relative;
    z-index: 1;
    left: 10%;
    width: 375px;
    /* max-width: 100%; */
    overflow-x: hidden;
}

.fourthmockup-text{
    position: relative;
    left: 11%;
    margin-bottom: 80px;
}

.fourthmockup-text h2 {
    font-size: 3.2rem;
    font-weight: bold;
    color: #002147;
    margin-top: -180px;
}
.fourthmockup-text .highlight {
    color: #f6a623; /* Orange */
}
.fourthmockup-text p {
    margin-top: 10px;
    font-size: 1rem;
    color: #444;

}

/* ENDER DESIGN */

.mockup-image .endingmockup {
    margin-top: 63%;
    top: 350px;
    z-index: -99;
    left: 3%;
    width: 810px;
    /* max-width: 102%; */
    overflow-x: hidden;
    margin-bottom: -4px;
    padding-bottom: 2px;
}
.ender-text{
    position: relative;
    left: 10%;
}

.ender-text h2 {
    font-size: 3.2rem;
    font-weight: bold;
    color: #002147; /* Dark Blue */
    margin-top: 300px;
    line-height: 1.3; /* keep spacing readable */
}

.ender-text .highlight {
    color: #f6a623; /* Orange */
}

.ender-text p {
    margin-top: 15px;
    font-size: 1rem;
    color: #002147; /* Navy instead of gray */
    text-align: justify; /* no justify */
    line-height: 1.6;
    max-width: 100%;
}