/*
|--------------------------------------------------------------------------
| Global
|--------------------------------------------------------------------------
*/

body {

    overflow-x: hidden;

}

/*
|--------------------------------------------------------------------------
| Hero Section
|--------------------------------------------------------------------------
*/

.phc-hero-section {

    padding: 48px 0;

    background:
        linear-gradient(
            180deg,
            #F8FBFC 0%,
            #FFFFFF 100%
        );

}

/*
|--------------------------------------------------------------------------
| Hero Grid
|--------------------------------------------------------------------------
*/

.phc-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(380px, 440px);

    gap: 40px;

    align-items: center;

}

/*
|--------------------------------------------------------------------------
| Hero Content
|--------------------------------------------------------------------------
*/

.phc-hero-title {

    font-size: 44px;

    line-height: 1.22;

    font-weight: 700;

    color: #0F172A;

    margin-bottom: 20px;

    max-width: 640px;

}

.phc-hero-title span {

    color: var(--phc-primary);

}

.phc-hero-description {

    font-size: 18px;

    line-height: 1.7;

    color: #475569;

    max-width: 600px;

    margin-bottom: 24px;

}

/*
|--------------------------------------------------------------------------
| Location
|--------------------------------------------------------------------------
*/

.phc-hero-location {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background:
        rgba(0,168,135,0.08);

    color: var(--phc-primary);

    padding: 12px 18px;

    border-radius: 14px;

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 30px;

}

/*
|--------------------------------------------------------------------------
| Features
|--------------------------------------------------------------------------
*/

.phc-hero-features {

    display: grid;

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

    gap: 14px;

}

/*
|--------------------------------------------------------------------------
| Feature Card
|--------------------------------------------------------------------------
*/

.phc-feature-item {

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 16px;

    padding: 18px 14px;

    text-align: center;

    box-shadow:
        0 4px 18px rgba(15,23,42,0.04);

}

/*
|--------------------------------------------------------------------------
| Feature Icon
|--------------------------------------------------------------------------
*/

.phc-feature-icon {

    width: 52px;

    height: 52px;

    margin: 0 auto 14px;

    border-radius: 50%;

    background:
        rgba(0,168,135,0.08);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: var(--phc-primary);

}

/*
|--------------------------------------------------------------------------
| Feature Text
|--------------------------------------------------------------------------
*/

.phc-feature-text {

    font-size: 14px;

    line-height: 1.5;

    font-weight: 600;

    color: #1E293B;

}

/*
|--------------------------------------------------------------------------
| Auth Card Wrapper
|--------------------------------------------------------------------------
*/

.phc-auth-card-wrapper {

    width: 100%;

}

/*
|--------------------------------------------------------------------------
| Auth Card
|--------------------------------------------------------------------------
*/

.phc-auth-card {

    background: #FFFFFF;

    border-radius: 24px;

    padding: 30px;

    border: 1px solid #E2E8F0;

    box-shadow:
        0 10px 40px rgba(15,23,42,0.06);

}

/*
|--------------------------------------------------------------------------
| Auth Heading
|--------------------------------------------------------------------------
*/

.phc-auth-heading {

    font-size: 26px;

    font-weight: 700;

    text-align: center;

    margin-bottom: 10px;

    color: #0F172A;

}

.phc-auth-subtitle {

    text-align: center;

    color: #64748B;

    margin-bottom: 28px;

    font-size: 15px;

}

/*
|--------------------------------------------------------------------------
| Auth Alerts
|--------------------------------------------------------------------------
*/

.phc-auth-alert {

    padding: 14px 16px;

    border-radius: 14px;

    margin-bottom: 18px;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;

}

/*
|--------------------------------------------------------------------------
| Error Alert
|--------------------------------------------------------------------------
*/

.phc-auth-alert-error {

    background: #FEF2F2;

    border: 1px solid #FECACA;

    color: #B91C1C;

}

/*
|--------------------------------------------------------------------------
| Tabs
|--------------------------------------------------------------------------
*/

.phc-auth-tabs {

    display: flex;

    margin-bottom: 26px;

    border-bottom: 1px solid #E2E8F0;

}

.phc-auth-tabs button,
.phc-auth-tabs a {

    flex: 1;

    text-align: center;

    padding-bottom: 14px;

    font-size: 15px;

    font-weight: 600;

    background: none;

    border: none;

    color: #64748B;

    text-decoration: none;

}

.phc-auth-tabs .active {

    color: var(--phc-primary);

    border-bottom:
        3px solid var(--phc-primary);

}

/*
|--------------------------------------------------------------------------
| Login Form
|--------------------------------------------------------------------------
*/

.phc-login-form {

    display: flex;

    flex-direction: column;

}

.phc-login-form input {

    width: 100%;

    height: 56px;

    font-size: 15px;

    border-radius: 14px;

    margin-bottom: 14px;

}

.phc-auth-note {

    color: #64748B;

    font-size: 14px;

    margin-bottom: 22px;

}

/*
|--------------------------------------------------------------------------
| Login Button
|--------------------------------------------------------------------------
*/

.phc-auth-btn {

    width: 100%;

    height: 56px;

    font-size: 17px;

    border-radius: 14px;

}

/*
|--------------------------------------------------------------------------
| Security Box
|--------------------------------------------------------------------------
*/

.phc-auth-security {

    margin-top: 24px;

    background: #F8FAFC;

    border-radius: 18px;

    padding: 16px;

    display: flex;

    align-items: center;

    gap: 14px;

}

.phc-auth-security-icon {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background:
        rgba(0,168,135,0.08);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}

/*
|--------------------------------------------------------------------------
| Large Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .phc-hero-grid {

        grid-template-columns:
            minmax(0, 1fr)
            340px;

        gap: 24px;

    }

    .phc-hero-title {

        font-size: 38px;
        line-height: 1.22;

    }

}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 920px) {

    .phc-hero-grid {

        grid-template-columns: 1fr;

        gap: 28px;

    }

    .phc-auth-card-wrapper {

        width: 100%;

        max-width: 520px;

        margin: 0 auto;

    }

    .phc-hero-title {

        font-size: 36px;
        
        line-height: 1.22;

        max-width: 100%;

    }

    .phc-hero-description {

        max-width: 100%;

    }

    /*
    |--------------------------------------------------------------------------
    | Features
    |--------------------------------------------------------------------------
    */

    .phc-hero-features {

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

        gap: 12px;

    }

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .phc-hero-section {

        padding: 28px 0;

    }

    .phc-hero-title {

        font-size: 30px;

        line-height: 1.22;

        margin-bottom: 16px;
        
        

    }

    .phc-hero-description {

        font-size: 16px;

        line-height: 1.6;

        margin-bottom: 20px;

    }

    .phc-hero-location {

        width: 100%;

        justify-content: center;

        text-align: center;

        font-size: 14px;

        padding: 12px 14px;

        margin-bottom: 24px;

    }

    /*
    |--------------------------------------------------------------------------
    | Features
    |--------------------------------------------------------------------------
    */

    .phc-hero-features {

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

        gap: 10px;

    }

    .phc-feature-item {

        min-width: auto;

        padding: 16px 10px;

    }

    .phc-feature-icon {

        width: 44px;

        height: 44px;

        font-size: 18px;

        margin-bottom: 12px;

    }

    .phc-feature-text {

        font-size: 13px;

        line-height: 1.4;

    }

    /*
    |--------------------------------------------------------------------------
    | Auth Card
    |--------------------------------------------------------------------------
    */

    .phc-auth-card {

        padding: 20px;

        border-radius: 18px;

    }

    .phc-auth-heading {

        font-size: 22px;

        line-height: 1.3;

    }

    .phc-auth-subtitle {

        font-size: 14px;

        margin-bottom: 22px;

    }

    .phc-login-form input {

        height: 50px;

        font-size: 15px;

    }

    .phc-auth-btn {

        height: 50px;

        font-size: 16px;

    }

}

/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

    .phc-hero-title {

        font-size: 26px;
        
        line-height: 1.22;

    }

    .phc-feature-item {

        padding: 14px 8px;

    }

    .phc-feature-text {

        font-size: 12px;

    }

    .phc-auth-card {

        padding: 18px;

    }

}



/*
|--------------------------------------------------------------------------
| Process Section
|--------------------------------------------------------------------------
*/

.phc-process-section {

    padding: 70px 0 40px;

    background: #FFFFFF;

}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.phc-process-header {

    text-align: center;

    margin-bottom: 42px;

}

.phc-process-header h2 {

    font-size: 34px;

    font-weight: 700;

    color: #0F172A;

    margin: 0;

}

/*
|--------------------------------------------------------------------------
| Flow Layout
|--------------------------------------------------------------------------
*/

.phc-process-flow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    flex-wrap: nowrap;

}

/*
|--------------------------------------------------------------------------
| Item
|--------------------------------------------------------------------------
*/

.phc-process-item {

    width: 180px;

    text-align: center;

    position: relative;

    flex-shrink: 0;

}

/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.phc-process-icon {

    width: 74px;

    height: 74px;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: rgba(0,168,135,0.08);

    border: 1px solid rgba(0,168,135,0.12);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    color: var(--phc-primary);

}

/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.phc-process-item h3 {

    font-size: 16px;

    font-weight: 700;

    color: #0F172A;

    margin-bottom: 10px;

    line-height: 1.4;

}

/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.phc-process-item p {

    font-size: 14px;

    line-height: 1.6;

    color: #64748B;

    margin: 0;

}

/*
|--------------------------------------------------------------------------
| Connector Line
|--------------------------------------------------------------------------
*/

.phc-process-line {

    width: 70px;

    height: 2px;

    background:
        repeating-linear-gradient(
            to right,
            rgba(0,168,135,0.28),
            rgba(0,168,135,0.28) 6px,
            transparent 6px,
            transparent 12px
        );

    margin-top: -58px;

    flex-shrink: 0;

}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .phc-process-flow {

        flex-wrap: wrap;

        gap: 24px;

    }

    .phc-process-line {

        display: none;

    }

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .phc-process-section {

        padding: 48px 0 24px;

    }

    .phc-process-header {

        margin-bottom: 28px;

    }

    .phc-process-header h2 {

        font-size: 28px;

    }

.phc-process-flow {

    display: grid;

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

    gap: 18px;

    align-items: stretch;

}

/*
|--------------------------------------------------------------------------
| Middle Item (Step 3)
|--------------------------------------------------------------------------
*/

.phc-process-item:nth-child(5) {

    grid-column: 1 / -1;

    max-width: 220px;

    margin: 0 auto;

}

    .phc-process-item {

        width: 100%;

        background: #FFFFFF;

        border: 1px solid #E2E8F0;

        border-radius: 18px;

        padding: 18px 14px;

    }

    .phc-process-icon {

        width: 58px;

        height: 58px;

        font-size: 24px;

        margin-bottom: 14px;

    }

    .phc-process-item h3 {

        font-size: 14px;

        margin-bottom: 8px;

    }

    .phc-process-item p {

        font-size: 12px;

        line-height: 1.5;

    }

}

/*
|--------------------------------------------------------------------------
| Trust Section
|--------------------------------------------------------------------------
*/

.phc-trust-section {

    padding: 40px 0 80px;

    background: #FFFFFF;

}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.phc-trust-card {

    display: grid;

    grid-template-columns:
        1.2fr
        0.9fr
        0.9fr;

    align-items: center;

    gap: 28px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 10px 40px rgba(15,23,42,0.05);

}

/*
|--------------------------------------------------------------------------
| Left
|--------------------------------------------------------------------------
*/

.phc-trust-left {

    padding: 40px;

}

/*
|--------------------------------------------------------------------------
| Badge
|--------------------------------------------------------------------------
*/

.phc-trust-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 16px;

    border-radius: 999px;

    background: rgba(0,168,135,0.08);

    color: var(--phc-primary);

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 20px;

}

/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.phc-trust-left h2 {

    font-size: 42px;

    line-height: 1.15;

    margin-bottom: 18px;

    color: #0F172A;

}

/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.phc-trust-left p {

    font-size: 16px;

    line-height: 1.8;

    color: #64748B;

    margin-bottom: 28px;

    max-width: 480px;

}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.phc-trust-actions {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

}

.phc-btn-secondary {

    background: #FFFFFF;

    border: 1px solid #CBD5E1;

    color: #0F172A;

}

.phc-btn-secondary:hover {

    border-color: var(--phc-primary);

    color: var(--phc-primary);

}

/*
|--------------------------------------------------------------------------
| Center Image
|--------------------------------------------------------------------------
*/

.phc-trust-center {

    height: 100%;

}

.phc-trust-center img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

/*
|--------------------------------------------------------------------------
| Right Features
|--------------------------------------------------------------------------
*/

.phc-trust-right {

    display: flex;

    flex-direction: column;

    gap: 18px;

    padding: 28px;

}

/*
|--------------------------------------------------------------------------
| Feature Box
|--------------------------------------------------------------------------
*/

.phc-trust-feature {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 18px;

    border: 1px solid #E2E8F0;

    border-radius: 18px;

    background: #FFFFFF;

}

/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.phc-trust-feature-icon {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: rgba(0,168,135,0.08);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    flex-shrink: 0;

}

/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.phc-trust-feature span {

    font-size: 15px;

    font-weight: 600;

    line-height: 1.5;

    color: #0F172A;

}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .phc-trust-card {

        grid-template-columns: 1fr;

    }

    .phc-trust-center {

        max-height: 320px;

    }

    .phc-trust-right {

        flex-direction: row;

        justify-content: center;

        flex-wrap: wrap;

    }

    .phc-trust-feature {

        width: calc(33.333% - 12px);

        min-width: 200px;

    }

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .phc-trust-section {

        padding: 24px 0 60px;

    }

    .phc-trust-left {

        padding: 26px 22px;

    }

    .phc-trust-left h2 {

        font-size: 30px;

        line-height: 1.2;

    }

    .phc-trust-left p {

        font-size: 15px;

        line-height: 1.7;

    }

    .phc-trust-actions {

        flex-direction: column;

    }

    .phc-trust-actions .phc-btn {

        width: 100%;

        justify-content: center;

    }

    .phc-trust-center {

        max-height: 240px;

    }

    .phc-trust-right {

        padding: 22px;

        flex-direction: column;

    }

    .phc-trust-feature {

        width: 100%;

    }

}


.phc-home-legal {

    margin-top: 18px;

    text-align: center;

    font-size: 13px;

    line-height: 1.7;

    color: #64748B;

}

.phc-home-legal a {

    color: #0CA678;

    text-decoration: none;

    font-weight: 600;

}

.phc-home-legal a:hover {

    text-decoration: underline;

}