* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    color: #ffffff;

    background-image:

        linear-gradient(

            rgba(0, 20, 35, 0.08),

            rgba(0, 20, 35, 0.08)

        ),

        url("./images/background.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}

a {

    text-decoration: none;

}


/* HERO */

.hero {

    width: 100%;

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.hero-content {

    padding: 45px 20px;

}


/* C-SERP LOGO PILL */

.logo-container {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 6px 18px 6px 6px;

    margin: 0 auto 22px;

    background: rgba(255, 255, 255, 0.18);

    border: 1px solid rgba(255, 255, 255, 0.45);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    border-radius: 999px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);

}

.main-logo {

    width: 55px;

    height: 55px;

    padding: 6px;

    background: #ffffff;

    border-radius: 50%;

    object-fit: contain;

    display: block;

    margin: 0;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.20);

}

.logo-text {

    color: #ffffff;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1;

    letter-spacing: 0.3px;

    align-self: center;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);

}


/* HERO TITLE */

.hero h1 {

    color: #ffffff;

    font-size: 48px;

    line-height: 1.2;

    font-weight: 700;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);

}

.yellow-text {

    color: #ffff00;

    font-weight: 700;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);

    display: inline-block;

    animation: securityAgenciesFloat 2s ease-in-out infinite;

}

@keyframes securityAgenciesFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}


/* AGENCIES */

.agencies {

    width: 100%;

    padding: 10px 30px 35px;

}

.agency-container {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

}

.agency-card {

    width: 100%;

    min-height: 255px;

    padding: 20px 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.45);

    border-radius: 8px;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);

    transition:

        background 0.25s ease,

        transform 0.25s ease;

}

.agency-card:hover {

    transform: translateY(-4px);

    background: rgba(255, 255, 255, 0.20);

}

.agency-image {

    width: 85px;

    height: 85px;

    padding: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border-radius: 0;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);

    flex-shrink: 0;

}

.agency-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}

.agency-name {

    margin-top: 16px;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 700;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);

}

.learn-more {

    margin-top: 8px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);

    transition: color 0.2s ease;

}

.learn-more:hover {

    color: #ffff00;

}


/* TRACK APPLICATION */

.track-section {

    width: 100%;

    padding: 15px 20px 55px;

    display: flex;

    justify-content: center;

}

.track-button {

    display: inline-block;

    padding: 17px 42px;

    background: #ffff00;

    color: #111111;

    border-radius: 7px;

    font-size: 17px;

    font-weight: 700;

    position: relative;

    transform: translateY(-30px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);

    transition:

        background 0.25s ease,

        transform 0.25s ease,

        box-shadow 0.25s ease;

}

.track-button:hover {

    background: #ffd700;

    transform: translateY(-33px);

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);

}

.track-section .track-button {

    animation: trackFloat 2s ease-in-out infinite;

}

@keyframes trackFloat {

    0% {

        transform: translateY(-30px);

    }

    50% {

        transform: translateY(-42px);

    }

    100% {

        transform: translateY(-30px);

    }

}


/* GENERAL CONTAINER */

.section-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

}


/* WELCOME */

.welcome-section {

    width: 100%;

    padding: 65px 20px;

    background: rgba(255, 255, 255, 0.94);

    color: #222222;

    text-align: center;

}

.welcome-section h2 {

    max-width: 900px;

    margin: 0 auto 15px;

    color: #0878b5;

    font-size: 30px;

    line-height: 1.3;

    font-weight: 700;

}

.welcome-section p {

    max-width: 750px;

    margin: 0 auto;

    color: #555555;

    font-size: 16px;

    line-height: 1.7;

}


/* FIVE STEPS */

.steps-section {

    width: 100%;

    padding: 65px 20px;

    background: rgba(255, 255, 255, 0.97);

    color: #222222;

}

.section-title {

    margin-bottom: 45px;

    color: #000000;

    font-size: 30px;

    line-height: 1.3;

    font-weight: 700;

    text-align: center;

}

.steps-container {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 18px;

}

.step-card {

    position: relative;

    padding: 20px;

    background: linear-gradient(

        to bottom,

        #fdfdfd 0%,

        #fdfdfd 50%,

        #ffffff 50%,

        #ffffff 100%

    );

    border: 1px solid #dddddd;

    border-radius: 8px;

    text-align: center;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;

}

.step-card:nth-child(1) {

    background: linear-gradient(

        to bottom,

        #fffbe8 0%,

        #fffbe8 50%,

        #ffffff 50%,

        #ffffff 100%

    );

}

.step-card:nth-child(2) {

    background: linear-gradient(

        to bottom,

        #fff4f4 0%,

        #fff4f4 50%,

        #ffffff 50%,

        #ffffff 100%

    );

}

.step-card:nth-child(3) {

    background: linear-gradient(

        to bottom,

        #f1f8ff 0%,

        #f1f8ff 50%,

        #ffffff 50%,

        #ffffff 100%

    );

}

.step-card:nth-child(4) {

    background: linear-gradient(

        to bottom,

        #fff6ed 0%,

        #fff6ed 50%,

        #ffffff 50%,

        #ffffff 100%

    );

}

.step-card:nth-child(5) {

    background: linear-gradient(

        to bottom,

        #f0fff5 0%,

        #f0fff5 50%,

        #ffffff 50%,

        #ffffff 100%

    );

}

.step-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.13);

}

.step-image {

    width: 100%;

    height: 150px;

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;

    background: transparent !important;

    border: none !important;

    border-radius: 0;

}

.step-image img {

    width: 70px !important;

    height: 70px !important;

    padding: 0 !important;

    margin: 0 !important;

    object-fit: cover !important;

    display: block !important;

    border: none !important;

    border-radius: 50% !important;

    position: relative;

    animation: stagePictureUpDown 2.5s ease-in-out infinite;

}

@keyframes stagePictureUpDown {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

.step-card:nth-child(1) .step-image {

    filter: drop-shadow(

        0 10px 20px rgba(255, 193, 7, 0.25)

    );

}

.step-card:nth-child(1) .step-image img {

    background: #ffc107 !important;

    box-shadow:

        0 0 0 4px #ffc107,

        0 8px 16px rgba(0, 0, 0, 0.15);

}

.step-card:nth-child(2) .step-image {

    filter: drop-shadow(

        0 10px 20px rgba(255, 75, 75, 0.25)

    );

}

.step-card:nth-child(2) .step-image img {

    background: #ff4b4b !important;

    box-shadow:

        0 0 0 4px #ff4b4b,

        0 8px 16px rgba(0, 0, 0, 0.15);

}

.step-card:nth-child(3) .step-image {

    filter: drop-shadow(

        0 10px 20px rgba(0, 123, 255, 0.25)

    );

}

.step-card:nth-child(3) .step-image img {

    background: #007bff !important;

    box-shadow:

        0 0 0 4px #007bff,

        0 8px 16px rgba(0, 0, 0, 0.15);

}

.step-card:nth-child(4) .step-image {

    filter: drop-shadow(

        0 10px 20px rgba(120, 200, 140, 0.25)

    );

}

.step-card:nth-child(4) .step-image img {

    background: #90d9a5 !important;

    box-shadow:

        0 0 0 4px #90d9a5,

        0 8px 16px rgba(0, 0, 0, 0.15);

}

.step-card:nth-child(5) .step-image {

    filter: drop-shadow(

        0 10px 20px rgba(25, 180, 80, 0.25)

    );

}

.step-card:nth-child(5) .step-image img {

    background: #19b450 !important;

    box-shadow:

        0 0 0 4px #19b450,

        0 8px 16px rgba(0, 0, 0, 0.15);

}

.step-card h3 {

    margin-bottom: 10px;

    color: #222222;

    font-size: 18px;

    line-height: 1.3;

}

.step-card p {

    color: #666666;

    font-size: 13px;

    line-height: 1.6;

}

.step-card strong {

    color: #0878b5;

}


/* VOUCHER */

.already-voucher {

    width: 100%;

    padding: 60px 20px;

    text-align: center;

    background-image:

        linear-gradient(

            rgba(0, 35, 60, 0.45),

            rgba(0, 35, 60, 0.45)

        ),

        url("./images/IMG33.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.already-voucher h2 {

    margin-bottom: 25px;

    color: #ffffff;

    font-size: 28px;

    line-height: 1.3;

}


/* SUPPORT */

.support-section {

    width: 100%;

    padding: 65px 20px;

    background: rgba(255, 255, 255, 0.96);

    color: #222222;

}

.support-section .section-title {

    margin-bottom: 25px;

}

.support-title {

    margin-bottom: 12px;

    color: #222222;

    font-size: 25px;

    text-align: center;

}

.support-description {

    max-width: 750px;

    margin: 0 auto 40px;

    color: #666666;

    font-size: 15px;

    line-height: 1.7;

    text-align: center;

}

.support-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

}

.support-card {

    padding: 25px 18px;

    background: #ffffff;

    border: 1px solid #dddddd;

    border-radius: 8px;

    text-align: center;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;

}

.support-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.13);

}

.support-logo {

    width: 85px;

    height: 85px;

    margin: 0 auto 15px;

    padding: 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border: 1px solid #dddddd;

}

.support-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}

.support-card h3 {

    margin-bottom: 15px;

    color: #222222;

    font-size: 17px;

    line-height: 1.35;

}

.support-card a {

    display: block;

    margin-top: 7px;

    color: #0878b5;

    font-size: 14px;

    line-height: 1.5;

    word-break: break-word;

    transition: color 0.2s ease;

}

.support-card a:hover {

    color: #055d8c;

    text-decoration: underline;

}


/* ADMIN DASHBOARD */

.admin-access {

    width: 100%;

    padding: 25px 20px 35px;

    background: #ffffff;

    text-align: center;

}

.admin-button {

    display: inline-block;

    padding: 11px 25px;

    background: #0878b5;

    color: #ffffff;

    border-radius: 5px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition:

        background 0.25s ease,

        transform 0.25s ease,

        box-shadow 0.25s ease;

}

.admin-button:hover {

    background: #055d8c;

    transform: translateY(-2px);

    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);

}


/* FOOTER */

.footer {

    width: 100%;

    padding: 25px 20px;

    background: rgba(0, 20, 35, 0.90);

    text-align: center;

}

.footer p {

    margin: 5px 0;

    color: #ffffff;

    font-size: 13px;

}

.footer strong {

    color: #ffff00;

}

.footer .copyright {

    font-size: 11px;

    opacity: 0.8;

}


/* TABLET */

@media (max-width: 1000px) {

    .steps-container {

        grid-template-columns: repeat(2, 1fr);

    }

    .support-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* SMALL TABLET */

@media (max-width: 900px) {

    .agency-container {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* MOBILE */

@media (max-width: 600px) {

    .hero {

        min-height: 330px;

    }

    .hero-content {

        padding: 35px 15px;

    }

    .logo-container {

        gap: 7px;

        padding: 5px 15px 5px 5px;

    }

    .main-logo {

        width: 48px;

        height: 48px;

        padding: 5px;

    }

    .logo-text {

        font-size: 13px !important;

        font-weight: 600 !important;

    }

    .hero h1 {

        font-size: 32px;

    }

    .agencies {

        padding: 15px;

        padding-bottom: 35px;

    }

    .agency-container {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .agency-card {

        min-height: 255px;

        padding: 20px;

    }

    .track-section {

        padding: 15px 15px 40px;

    }

    .track-button {

        width: 100%;

        max-width: 380px;

        padding: 16px 25px;

        text-align: center;

    }

    .welcome-section {

        padding: 45px 20px;

    }

    .welcome-section h2 {

        font-size: 24px;

    }

    .welcome-section p {

        font-size: 14px;

    }

    .steps-section {

        padding: 45px 15px;

    }

    .section-title {

        margin-bottom: 30px;

        font-size: 24px;

    }

    .steps-container {

        grid-template-columns: 1fr;

    }

    .step-card {

        padding: 20px;

    }

    .already-voucher {

        padding: 45px 20px;

    }

    .already-voucher h2 {

        font-size: 23px;

    }

    .support-section {

        padding: 45px 15px;

    }

    .support-grid {

        grid-template-columns: 1fr;

    }

    .support-title {

        font-size: 23px;

    }

    .support-description {

        font-size: 14px;

    }

    .admin-access {

        padding: 22px 15px 30px;

    }

    .admin-button {

        width: 100%;

        max-width: 300px;

        padding: 12px 20px;

    }

    .footer {

        padding: 22px 15px;

    }

}


/* VERY SMALL PHONES */

@media (max-width: 380px) {

    .hero h1 {

        font-size: 27px;

    }

    .logo-container {

        gap: 6px;

        padding: 5px 13px 5px 5px;

    }

    .main-logo {

        width: 44px;

        height: 44px;

        padding: 5px;

    }

    .logo-text {

        font-size: 12px !important;

        font-weight: 600 !important;

    }

    .agency-card {

        min-height: 235px;

    }

    .agency-image {

        width: 75px;

        height: 75px;

    }

    .step-image {

        height: 135px;

    }

    .already-voucher h2 {

        font-size: 21px;

    }

}