/* Charls C2C Style Redesign */


/* --- Theme Colors --- */
:root {
    --c2c-main: #3B9418;
    --c2c-blue: #A5C9EF;
    --c2c-footer: #262B33;
    --c2c-gradient1: linear-gradient(241deg, #4289C1 0%, #086484 100%);
    --c2c-cta: #188E94;
    --c2c-gradient2: linear-gradient(180deg, #3B9418 0%, #7FD65A 50.6%, #E9FFE9 100%);
    --c2c-gradient3: linear-gradient(180deg, #6e6e6e 0%, #c7c7c7 50.6%, #ffffff 100%);
    --c2c-gradient4: linear-gradient(180deg, #9c9c9cdb 0%, #d6d6d6d2 50.6%, #fefefec8 100%);

    /* Utility Colors */
    --c2c-accent-purple: #9557e2;
    --c2c-shadow: rgba(0, 0, 0, 0.69);
    --c2c-border: #ccc;
    --c2c-bg-light: #f1f0f0;
}

/* Search botton state */
.search-btn.disabled {

    pointer-events: none;
    background-color: rgb(137, 136, 136);
    border-color: rgb(137, 136, 136);
    cursor: not-allowed;

}

[ng-cloak] {
    display: none !important;
}

/* For the Matching percentage color*/
.bg-orange {
    background-color: #fd7e14 !important;
}


/* Code Migrated @ 04/07/2025 */

/********* Code ni Lorenzo *********/

/* Login/Register Modal */
/* modal global style */
.information-entry-modal a {

    color: black;
}

.modal-btn {

    background-color: var(--c2c-main) !important;
    color: white !important;
    border-radius: 10px;

}

.modal-overlay {

    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 1050;
    /* Placed higher than the nav bar (1030) */
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    opacity: 0;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out, visibility 0.4s ease-in-out;

}

.modal-overlay.active {

    opacity: 1;
    visibility: visible;

}

.modal-overlay.active-unmount {

    opacity: 0;
    visibility: hidden;

}


.modal-overlay .information-entry-modal {

    flex: 0 0 auto;
    position: relative;
    background-color: white;
    padding: 10px;
    border-radius: 20px;
    height: 90%;
    width: 70%;
    max-width: 500px;
    max-height: 800px;
    overflow: hidden;
    transform: translateY(50%);
    transition: transform 0.4s ease-in-out;

}

.modal-overlay .information-entry-modal.active {

    transform: translateY(0%);

}

.information-entry-modal .close-btn {

    position: absolute;
    top: 10px;
    z-index: 10000;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #000;
    cursor: pointer;

}

.link-text {
    text-decoration: underline !important;
}

.form-control {

    border-radius: 20px !important;
    font-size: 1rem !important;

}

.form-control.password {

    border-radius: 20px 0 0 20px !important;

}

.toggle-visibility {

    border-radius: 0 20px 20px 0 !important;
    cursor: pointer;
}


/* All content styles */

.login-content,
.register-content,
.verify-content,
.confirm-user-type,
.forgot-pass,
.verify-forgot-pass-content,
.change-password-content {
    user-select: none !important;
    position: absolute;
    width: 100%;
    transition: transform 0.4s ease-in-out;
}


/* Setting content state */

.login-content {
    transform: translateX(0);
}

.register-content,
.verify-content,
.confirm-user-type,
.forgot-pass,
.verify-forgot-pass-content,
.change-password-content {
    transform: translateX(100%);
    /* Hidden off-screen */
}

/* Active State */
.login-content.active-slide-out,
.register-content.active-slide-out,
.verify-content.active-slide-out,
.confirm-user-type.active-slide-out,
.forgot-pass.active-slide-out,
.verify-forgot-pass-content.active-slide-out,
.change-password-content.active-slide-out {
    transform: translateX(100%);
    /* Slide out to the left */
}


.register-content.active-slide-in,
.login-content.active-slide-in,
.verify-content.active-slide-in,
.confirm-user-type.active-slide-in,
.forgot-pass.active-slide-in,
.verify-forgot-pass-content.active-slide-in,
.change-password-content.active-slide-in {
    transform: translateX(0);
    /* Slide in from the right */
}

/* ===== Hero (clean, modern) ===== */
.c2c-hero {
    --ink: #0f172a;
    --muted: #6b7280;
    --bg1: #f7fafc;
    --bg2: #ffffff;
    --c2c-main: #3B9418;
    --chip: #ffffff;
    position: relative;
    padding: 120px 0 72px;
    background: radial-gradient(900px 400px at 90% 10%, rgba(47, 109, 246, .08), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
    overflow: hidden;
    text-align: center;
}

.c2c-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* behind content */
    pointer-events: none;
    /* light grid lines */
    background-image:
        linear-gradient(to bottom, rgba(15, 42, 20, 0.092) 1px, transparent 1px),
        linear-gradient(to right, rgba(15, 42, 20, 0.092) 1px, transparent 1px);
    background-size: 80px 80px;
    /* grid size; tweak if needed */
    background-position: center;
    /* soft fade at edges like the reference */
    -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 60%, transparent 100%);
    mask-image: radial-gradient(120% 90% at 50% 30%, #000 60%, transparent 100%);
}

/* keep hero content above the grid */
.c2c-hero>.container,
.c2c-hero .decor {
    position: relative;
    z-index: 1;
}

.c2c-hero .hero-title {
    font-weight: 800;
    line-height: 1.08;
    font-size: clamp(2.4rem, 6.2vw, 4.5rem);
    letter-spacing: .2px;
    color: var(--ink);
    margin: 0 0 .5rem;
}

.c2c-hero .accent {
    color: var(--c2c-main);
}

.c2c-hero .hero-sub {
    color: var(--muted);
    font-size: clamp(.95rem, 1.6vw, 1.125rem);
    margin-bottom: 1.25rem;
}

/* Chips */
.c2c-hero .hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin: 12px auto 22px;
}

.c2c-hero .chip {
    background: var(--chip);
    border: 1px solid #d8dee9;
    color: #0f172a;
    border-radius: 10px;
    padding: .55rem .9rem;
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
}

.c2c-hero .chip:hover {
    border-color: #cfd7e6;
    transform: translateY(-1px);
    transition: .15s ease;
}

/* Search bar */
.c2c-hero .hero-search {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 8px auto 18px;
    max-width: 840px;
}

.c2c-hero .search-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: .75rem .9rem;
    border-radius: 10px;
    min-width: 0;
    flex: 1 1 0%;
}

.c2c-hero .search-field i {
    color: #64748b;
    font-size: 1.05rem;
}

.c2c-hero .search-field input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f172a;
}

.c2c-hero .search-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--blue);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: .85rem 1.2rem;
    font-weight: 700;
    letter-spacing: .1px;
}

.c2c-hero .search-btn:hover {
    filter: brightness(.96);
}

/* CTA */
.c2c-hero .cta-wrap {
    margin-top: 8px;
}

.c2c-hero .cta-link {
    display: inline-block;
    margin-top: 2px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: #3B9418;
    padding: .65rem 1rem;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(59, 148, 24, .2);
}

.c2c-hero .cta-link:hover {
    filter: brightness(.95);
}

/* subtle decor lines */
.c2c-hero .decor {
    position: absolute;
    width: 220px;
    height: 120px;
    border: 3px solid #3b941852;
    border-top: none;
    border-right: none;
    opacity: .75;
}

.c2c-hero .decor-l {
    left: 4%;
    bottom: 18%;
    border-radius: 18px;
}

.c2c-hero .decor-r {
    right: 4%;
    top: 18%;
    border-radius: 18px;
}

/* Responsive refinements */
@media (max-width: 576px) {
    .c2c-hero {
        padding-top: 96px;
    }

    .c2c-hero .hero-search {
        flex-direction: column;
        gap: 8px;
    }

    .c2c-hero .search-btn {
        width: 100%;
        justify-content: center;
    }
}
/* closing */

/* Within login-content */

.some-animation {

    background-color: gray;
    color: white;
    width: 100px;
    height: 100px;
    border-radius: 30px;


}


/* Password input field */
.custom-width {

    max-width: 236px !important;

}


/* End of login-content */

/* Within Register-content */

/* Modified by Lorenzo @ 04/25/2025 */
.register-btn.disabled,
.change-pass-btn.disabled,
.verify-btn.disabled {


    pointer-events: none !important;
    background-color: rgb(137, 136, 136) !important;
    border-color: rgb(137, 136, 136) !important;
    cursor: not-allowed !important;
    user-select: none !important;

}

/* End of register-content */

/********* End of Code ni Lorenzo *********/

/* End of Code Migrated @ 04/07/2025 */












/* Sir jess login reg form emp css*/
.background-circle {
    position: absolute;
    top: 0;
    right: 0;
    width: 60vw;
    height: 60vw;
    background-color: #6db5ff;
    border-radius: 50%;
    transform: translate(25%, -20%);
    z-index: -1;
    overflow: hidden;
}

html,
body {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-y: scroll;
    /* keeps scrolling */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}


.blue-circle-left {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 50vw;
    height: 50vw;
    background-color: #6eb7ff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}



.blue-circle-lower-right {
    position: absolute;
    top: 80%;
    right: -50%;
    width: 50vw;
    height: 50vw;
    background-color: #6eb7ff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}


.blue-small-circle {
    position: absolute;
    top: 0;
    right: 0;
    width: 20vw;
    height: 20vw;
    background-color: #6eb7ff;
    border-radius: 50%;
    transform: translate(-100%, 160%);
    z-index: -1;

}


.custom-fields::placeholder {
    font-size: 14px;
    opacity: 1;
}


.custom-fields {

    font-size: 16px;
    border: 1px solid #0160af;
}



#about-ojtgo {

    margin-top: 200px;
}








/* Jess Baggs and Millard */
/* Popup background */

/* Modified by Lorenzo @ 03/31/2025 */
.popup-overlay {
    display: none;
    position: fixed;
    z-index: 1050;
    /*Higher that the fixed nav bar (1030)*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Popup box */
.popup-box {
    background: #fff;

    padding: 10px;
    width: 30%;
    position: relative;
}


@media (max-width: 991px) {
    .popup-box {
        width: 70%;
    }
}


@media (max-width: 767px) {
    .popup-box {
        width: 90%;
    }
}

/* Close button */
.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}



@media (max-width: 991px) {
    #about-ojtgo {
        margin-top: 100px;
        /* Applies for 991px and below */
    }
}

/* Sir jess login reg form emp css end */






/************* Landing Page Modifications *************/

/* Globaly set styles */

.input-styles {

    border-radius: 20px !important;
    font-size: 1rem !important;

}

body {
    background-color: #FFFAFA !important;
    /* Set Correct Background Color */
    overflow-x: hidden;
}


/* End of globaly set styles */

/* Hero Container */

.kickstart-hero-container,
.kickstart-hero-skeleton {

    background: var(--gridientt_4, linear-gradient(180deg, #2DA0FA 0%, #89BFFB 50.6%, #FFFAFA 100%)) !important;
    margin-left: -10px;
    /* Move the entire container to the left */
    width: calc(100% + 20px);
    /* Fill the remaining space to the right */
    height: 400px;
}

.hero-header {

    max-width: 600px;
    width: 100%;

}


.filter-btn {

    width: 200px !important;

}


/* Job list and details container */
.find-match-container {

    margin: 0 50px !important;

}


/* Main Find Your Match Content */
.job-list-container {}



/* .job-details-pane {
    height: fit-content;
} */

/* modified by Lorenzo @ 04/24/2025 */
.job-details-container {
    box-shadow: -1px 5px 5px 1px rgba(106, 106, 106, 0.75);
    -webkit-box-shadow: -1px 5px 5px 1px rgba(106, 106, 106, 0.75);
    -moz-box-shadow: -1px 5px 5px 1px rgba(106, 106, 106, 0.75);
}

.posting-description {
    overflow-y: scroll;
    padding-right: 1rem;
    max-height: 200px;
    word-break: break-all;
}

/* modified by Lorenzo @ 04/24/2025 */
.job-list-wrapper {
    height: calc(100vh + 310px);
}

.job-list-pane {
    flex: 1;
    height: inherit;
    overflow-y: scroll;
}


/* Job list (Cards) */

.tag {

    background-color: #d4e8e9;
    padding: 5px 25px !important;

}

/* modified by Lorenzo @ 04/24/2025 */
/* Apply styling if the job card is selected */
.job-card {
    box-shadow: -1px 5px 5px 1px rgba(106, 106, 106, 0.75);
    -webkit-box-shadow: -1px 5px 5px 1px rgba(106, 106, 106, 0.75);
    -moz-box-shadow: -1px 5px 5px 1px rgba(106, 106, 106, 0.75);
    transition: background-color 0.3s ease;
    /* Ensures smooth animation */
}

.job-card.active {
    box-shadow: 0 0 10px 2px rgba(0, 123, 255, 0.5);
    /* glowing blue shadow */
}

.job-card:hover {
    background-color: #C8E0F2 !important;
}




/* Job Details */

.modal-send-request {

    line-height: 1;
    color: black !important;
    background: var(--gridient, linear-gradient(241deg, #A1CFFF 0%, #8BBFFB 50%, #2EA0F9 100%));
    border-radius: 10px;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 1rem;

}

.progress-bar {

    background-color: #70B7FB !important;

}

.progress {

    background-color: #C8E0F2 !important;
    height: 20px;

}


.create-account-banner {

    background: var(--gridient, linear-gradient(241deg, #A1CFFF 0%, #8BBFFB 50%, #2EA0F9 100%));
    padding: 15px 0;
    border-radius: 0 0 0.4rem 0.4rem !important;
    /* Modified by Lorenz o@ 04/24/2025 */
    width: 100%;
    margin-top: auto;
    /* Push to bottom */

}

.create-acc-link {

    text-decoration: underline !important;
    text-decoration-color: navy;

}



/* shimmer loading animation */
.skeleton-loader {
    padding: 2rem;
}

.skeleton-block {
    height: 20px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.skeleton-block::after {
    /* Deals with the animation */
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, #f0f0f0 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
    /*Deals with the shimmer speed*/
}

@keyframes shimmer {
    100% {
        transform: translateX(100vw);
        /*Determines the length of the shimmer will travel*/
    }
}



/* 
    Migrated @ 04/11/2025
    added code by Lorenzo @ 04/11/2025 
    For register format guideline    
    
*/


/* For password */
.guidelines {
    font-size: 13px;
    color: #666;
    background: #f9f9f9;
    border: 1px solid #ddd;
    line-height: 1.3;
    width: 310px;
}

.condition {
    font-size: 13px;
    line-height: 1.3;
    width: 310px;
}

/* Added by Lorenzo @ 04/24/2025 */
/* Override bootstrap styling */
.is-invalid {

    transition: none !important;
}

.reg-field.highlight {

    border-color: #ED2939 !important;

}





/* added by lorenzo @ 05/06/2025 */
/* for responsive design */


@media (max-width: 767px) {

    .find-match-container {

        margin: 0 0 !important;

    }


    .modal-overlay {

        padding: 0 !important;

    }


    .modal-overlay .information-entry-modal {

        width: 100%;
        max-width: unset;
        height: 95%;
        max-height: 900px;
        overflow-y: scroll;

    }

    .modal-overlay .information-entry-modal.active {

        transform: translateY(5%);

    }


    .custom-width {

        max-width: 100% !important;

    }

}


@media (max-width: 480px) {

    .kickstart-hero-container,
    .kickstart-hero-skeleton {

        height: 600px;

    }





}

/* Charls added */


/* Add to your stylesheet */
[ng-if] {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.blue-circle-lower-right {
    position: absolute;
    top: 30%;
    right: 50%;
    width: 30vw;
    height: 30vw;
    background-color: #6db5ff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}


.blue-small-circle {
    position: absolute;
    top: 0;
    right: 0;
    width: 20vw;
    height: 20vw;
    background-color: #6db5ff;
    border-radius: 50%;
    transform: translate(-100%, 160%);
    z-index: -1;

}

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Optional: smooth entry animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.sidebar {
    height: 100%;
    width: 350px;
    position: fixed;
    overflow-y: scroll;
    top: 0;
    left: 0;

    color: white;
}



.content {
    height: 100%;
    margin-left: 350px;

    color: white;
    overflow-y: auto;
    overflow-x: auto;
}


html {
    scroll-behavior: smooth;
}


@media screen and (max-width: 991px) {

    .sidebar {
        width: 100%;
        height: auto;
        position: static;
    }

    .content {
        margin-left: 0;
    }
}

/* OJTGO Team Responsiveness */
.team-img-container {
    width: 180px;
    height: 180px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
}

.team-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Medium devices (tablets, 768px and down) */
@media (max-width: 767.98px) {
    .team-img-container {
        width: 100px;
        height: 100px;
    }
}

/* Small devices (landscape phones, 576px and down) */
@media (max-width: 575.98px) {
    .team-img-container {
        width: 90px;
        height: 90px;
    }
}

/* How It Works Section */
/* container for the illustration */
.hiw-hero {
    position: relative;
}

/* left-side transparent image */
.hiw-hero-illus {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-15%, -50%);
    max-width: 340px;
    width: 30vw;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
}

/* ensure your text sits above */
.hiw-hero>div {
    position: relative;
    z-index: 1;
}

/* tighten/hide on smaller screens */
@media (max-width: 992px) {
    .hiw-hero-illus {
        transform: translate(-10%, -50%);
        max-width: 260px;
        width: 40vw;
        opacity: 0.85;
    }
}

@media (max-width: 576px) {
    .hiw-hero-illus {
        display: none;
    }
}

#how {
    background-color: #f8f9fa;
}

.how-it-works-content {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.step-box {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 4px solid rgb(0, 43, 86);
    min-height: 400px;
}

.step-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.step-number-container {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: rgb(0, 43, 86);
    line-height: 1;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title {
    font-weight: 600;
    color: #212529;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.step-description {
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Emphasized support callout */
.c2c-hiw-extra.upgraded {
    position: relative;
    padding: 28px 22px;
    border: 1px solid rgba(59, 148, 24, .18);
    background:
        radial-gradient(120% 80% at 20% -10%, rgba(59, 148, 24, .10), transparent 60%),
        radial-gradient(120% 80% at 110% 30%, rgba(59, 148, 24, .07), transparent 60%),
        linear-gradient(180deg, #ffffff, #f7fafc);
    box-shadow: 0 10px 30px rgba(59, 148, 24, .08), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.c2c-hiw-extra .extra-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    color: #25631a;
    background: rgba(59, 148, 24, .12);
    border: 1px solid rgba(59, 148, 24, .22);
    margin-bottom: .35rem;
}

.c2c-hiw-extra h4 {
    letter-spacing: .2px;
    color: #1f2937;
}

.c2c-hiw-extra .extra-sub {
    color: #4b5563;
    font-size: 1rem;
}

.c2c-hiw-extra .extra-points {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem .9rem;
    justify-content: center;
    margin-top: .25rem;
}

.c2c-hiw-extra .extra-points span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .65rem;
    border-radius: 999px;
    background: #f3f7ff;
    color: #0f1f3a;
    font-weight: 600;
    font-size: .9rem;
    border: 1px solid #d7e0f3;
}

.c2c-hiw-extra .extra-points i {
    color: #3B9418;
}

/* CTA button */
.c2c-hiw-extra .extra-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1rem;
    border-radius: 12px;
    background: #3B9418;
    color: #fff;
    text-decoration: none;
    font-weight: 650;
    box-shadow: 0 10px 24px rgba(59, 148, 24, .22);
}

.c2c-hiw-extra .extra-cta:hover {
    filter: brightness(.96);
}

/* Soft grid sheen behind (subtle) */
.c2c-hiw-extra.upgraded::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, .05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(120% 90% at 50% 20%, #000 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 55%, transparent 100%);
}

/* Responsive tweak */
@media (max-width:576px) {
    .c2c-hiw-extra.upgraded {
        padding: 24px 18px;
    }

    .c2c-hiw-extra .extra-points span {
        font-size: .88rem;
    }
}

.lottie-animation {
    height: 120px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .step-box {
        margin-bottom: 20px;
        min-height: 380px;
    }

    .lottie-animation {
        height: 100px;
    }
}

/* faq styling */

/* Custom tab buttons */
.custom-tab-button {
    background-color: #fff;
    color: var(--c2c-main);
    /* deep blue text */
    border: 1px solid #ced4da;
    /* light border */
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}


.custom-tab-button:hover {
    background-color: var(--c2c-cta);
    border-color: var(--c2c-main);
    color: var(var(--c2c-main));
}

.custom-tab-button:focus,
.custom-tab-button:active,
.custom-tab-button:focus:active,
.custom-tab-button.active {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--c2c-main) !important;
    border-color: var(--c2c-main) !important;
    color: #fff !important;
}

/* FAQ question/answer spacing */
.faq-question {
    margin-bottom: 20px;
    cursor: pointer;
}

.faq-answer {
    margin-bottom: 30px;
}

.faq-item {
    margin-bottom: 30px;
}

/* Ensure all cards are the same height regardless of content */
#highlights .card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#highlights .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Remove hover effect for highlight cards */
.row.g-4 .card:hover,
.row.g-4 .card:focus,
.row.g-4 .card:active {
    box-shadow: none !important;
    transform: none !important;
    background: inherit !important;
    border-color: inherit !important;
}

/* Blog expand content */
.expanded-card {
    max-height: 600px;
    overflow-y: auto;
    background-color: #fff;
    border: 2px solid #dee2e6;
}

/* News expand content */
.expanded-news {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
}

/* testimonial card style */
.card.testimonial-card {
    max-height: 300px;
}

.card.testimonial-card .card-body {
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.description-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Show 4 lines max */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.see-more-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: linear-gradient(to top, #f8f9fa 70%, transparent);
    color: #0d6efd;
    font-size: 13px;
    padding-top: 20px;
    pointer-events: none;
    /* So modal still opens on card click */
}

/* remove bullets for faq */
.no-bullets {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

/* For highlights scrollbar */
.scrollable-row {
    max-height: 300px;
    /* Adjust height as needed */
    overflow: auto;
    /* Enable scrolling */
    position: relative;
}

/* Hide the scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */
.scrollable-row::-webkit-scrollbar {
    display: none;
    /* Hide the scrollbar */
}

/* Hide the scrollbar for Firefox */
.scrollable-row {
    scrollbar-width: none;
    /* For Firefox */
}

/* Hide the scrollbar for Internet Explorer */
.scrollable-row {
    -ms-overflow-style: none;
    /* For Internet Explorer */
}


/*carousel style*/
.company-carousel-section {
    position: relative;
    background: white;
    padding: 40px 0;
    overflow: hidden;
}

.carousel-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 30px;
    color: #1565C0;
}

.carousel-track-container {
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    animation: scroll-marquee 30s linear infinite;
}

.carousel-slide {
    width: 120px;
    height: 120px;
    margin-right: 80px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Smooth infinite scroll keyframes */
@keyframes scroll-marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-33.333%);
    }
}

/* Fade edges */
.fade-left,
.fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.fade-left {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.fade-right {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}

/* Navbar Styles */
/* === Glassmorphism Navbar === */
.custom-glass-navbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: 40px;
    margin: 1rem auto;
    width: 95%;
    max-width: 1280px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Navbar links */
.navbar-nav .nav-link {
    color: #1a1a1a !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
    color: #3B9418 !important;
}

/* Logo text */
.brand-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a1a1a;
}

/* Buttons */
.navbar .btn {
    font-weight: 500;
    transition: all 0.25s ease;
}

.navbar .btn-success {
    background: #3B9418;
    border: none;
}

.navbar .btn-outline-success {
    border: 1px solid #3B9418;
    color: #3B9418;
    background: white;
}

.navbar .btn-outline-success:hover {
    background: #3B9418;
    color: white;
}

/* Responsive fix */
@media (max-width: 991px) {
    .custom-glass-navbar {
        width: 100%;
        border-radius: 0;
        margin: 0;
    }

    /* stack nav links */
    .navbar-nav {
        gap: 1rem;
        text-align: center;
    }

    /* stack buttons vertically */
    .auth-buttons {
        flex-direction: column !important;
        width: 100%;
        margin-top: 1rem;
    }

    .auth-buttons .btn {
        width: 90%;
        /* full but with margin */
        margin-bottom: 0.5rem;
    }
}
/* Closing */

/* ===== Why C2C: Dark section with background image ===== */
.whyc2c-section {
    --bg: #0b0f14;
    --card: #070809;
    --card-border: rgba(255, 255, 255, .06);
    --text: #e8eefc;
    --muted: #8ca0bf;
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

/* Background image + subtle gradient overlay */
.whyc2c-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 12, 18, .9), rgba(8, 12, 18, .95)),
        url("/wp-content/uploads/icons/whyc2cbg.jpg") center/cover no-repeat;
    filter: saturate(.9);
    z-index: 0;
}

.whyc2c-section>.container {
    position: relative;
    z-index: 1;
}

/* Card */
.c2c-card-dark {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 22px;
    color: var(--text);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
    transition: transform .18s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* glassy hover */
.c2c-card-dark:hover {
    background: rgba(17, 24, 38, .35);
    border-color: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* enable true glass where supported */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .c2c-card-dark:hover {
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
    }
}

/* Icon box (small rounded square like in screenshot) */
.c2c-card-dark .icon-box {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(59, 148, 24, .08);
    /* faint brand tint */
    border: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 14px;
}

.c2c-card-dark .icon-box .bi {
    font-size: 1.25rem;
    color: #bcd7ff;
    /* soft, readable icon color */
}

/* Titles & descriptions */
.c2c-card-dark .card-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 6px 0;
    letter-spacing: .2px;
    color: var(--c2c-main) !important;
}

.c2c-card-dark .card-desc {
    color: var(--muted);
    line-height: 1.5;
    font-size: .95rem;
}

/* Optional: tighten grid on XL like screenshot */
@media (min-width:1200px) {
    .whyc2c-section .row.g-4 {
        row-gap: 1.5rem !important;
    }
}

/* Lift only the content wrapper above the overlay */
.whyc2c-section .whyc2c-content {
    position: relative;
    z-index: 1;
}

/* Endless carousel wrapper */
.c2c-infinite {
    --gap: 1rem;
    /* space between cards */
    --duration: 28s;
    /* lower = faster */
    overflow: hidden;
    position: relative;
    margin-top: 1rem;
}

.c2c-marquee {
    display: flex;
    width: max-content;
    gap: var(--gap);
    animation: c2c-scroll var(--duration) linear infinite;
}

/* Make the carousel span the full viewport width inside a .container */
.c2c-infinite.c2c-fullbleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding-left: max(0px, (100vw - 100%) / 2);
    /* keep content centered */
    padding-right: max(0px, (100vw - 100%) / 2);
}

/* optional: keep your fade shadows aligned */
.c2c-fullbleed::before,
.c2c-fullbleed::after {
    width: 96px;
}

/* Pause on hover so users can read */
.c2c-infinite:hover .c2c-marquee {
    animation-play-state: paused;
}

/* Two groups form a seamless loop */
.c2c-marquee-group {
    display: flex;
    gap: var(--gap);
}

/* Each item holds your existing card */
.c2c-item {
    flex: 0 0 auto;
    width: clamp(240px, 28vw, 340px);
    /* adjust as you like */
}

/* Slide half the belt width for perfect loop */
@keyframes c2c-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Accessibility: prefer manual scroll if reduced motion */
@media (prefers-reduced-motion: reduce) {
    .c2c-marquee {
        animation: none;
    }

    .c2c-infinite {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .c2c-item {
        scroll-snap-align: start;
    }
}

/* closing */

/* dpo style */
/* ===== DPO modern section ===== */
.c2c-dpo {
    --bg1: #f7fafc;
    --bg2: #ffffff;
    --ink: #262B33;
    --muted: #6b7280;
    --brand: #3B9418;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 90% -10%, rgba(59, 148, 24, .08), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* headline & badge */
.c2c-dpo h3 {
    color: var(--ink);
    letter-spacing: .2px;
}

.c2c-dpo .lead {
    color: #3a4250;
}

.dpo-badge {
    background: rgba(59, 148, 24, .1);
    color: var(--brand);
    border: 1px solid rgba(59, 148, 24, .18);
    font-weight: 600;
}

/* bullet list */
.dpo-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: #4b5563;
    margin: .5rem 0;
}

.dpo-list i {
    color: var(--brand);
    font-size: 1.1rem;
    margin-top: .15rem;
}

/* Smaller DPO seal + tighter card */
.c2c-dpo .dpo-card {
    padding: 18px;
    max-width: 360px;
    margin: 0 auto;
}

.c2c-dpo .dpo-seal {
    width: clamp(110px, 14vw, 150px);
}

/* Optionally narrow the right column on large screens */
@media (min-width: 992px) {
    .c2c-dpo .col-lg-5 {
        flex: 0 0 auto;
        width: 32%;
    }

    .c2c-dpo .col-lg-7 {
        width: 68%;
    }
}

.dpo-glow {
    content: "";
    position: absolute;
    inset: auto;
    left: 50%;
    top: -30%;
    width: 420px;
    height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(59, 148, 24, .18), transparent 70%);
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
}

.dpo-seal {
    position: relative;
    z-index: 1;
    max-width: 180px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    transition: transform .35s ease;
}

.dpo-card:hover .dpo-seal {
    transform: translateY(-2px) scale(1.02);
}

.dpo-meta .small {
    color: var(--muted);
}

/* chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: .85rem;
    color: #1f2937;
    background: #f3f7f5;
    border: 1px solid rgba(0, 0, 0, .06);
}

/* subtle entrance animation */
.c2c-dpo .dpo-card,
.c2c-dpo .dpo-headline,
.c2c-dpo .dpo-list li {
    opacity: 0;
    transform: translateY(10px);
    animation: dpoFadeUp .6s ease forwards;
}

.c2c-dpo .dpo-headline {
    animation-delay: .05s;
}

.c2c-dpo .dpo-list li:nth-child(1) {
    animation-delay: .12s;
}

.c2c-dpo .dpo-list li:nth-child(2) {
    animation-delay: .18s;
}

.c2c-dpo .dpo-list li:nth-child(3) {
    animation-delay: .24s;
}

.c2c-dpo .dpo-card {
    animation-delay: .18s;
}

@keyframes dpoFadeUp {
    to {
        opacity: 1;
        transform: none;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {

    .c2c-dpo .dpo-card,
    .c2c-dpo .dpo-headline,
    .c2c-dpo .dpo-list li {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* closing */

/* about us */

.c2c-member {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    transition: transform .15s ease, box-shadow .2s ease;
}

.c2c-member:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
}

.c2c-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.c2c-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mission & Programs Style */

/* subtle leaf bar like the reference */
.c2c-leaf-accent{
  height: 80px;
  border-radius: 20px;
  background:
    radial-gradient(60px 40px at 60px 40px, rgba(59,148,24,.18), transparent 70%),
    radial-gradient(60px 40px at 180px 20px, rgba(59,148,24,.12), transparent 70%),
    radial-gradient(60px 40px at 300px 50px, rgba(59,148,24,.18), transparent 70%),
    linear-gradient(90deg, rgba(59,148,24,.08), rgba(59,148,24,.02));
}

/* card shell inspired by the screenshot */
.c2c-nature-card{
  background: #f5fbf6;
  border: 1px solid #dcefe1;
  border-radius: 16px;
  padding: 16px 18px;
}

/* icon badge */
.c2c-card-icon{
  width: 38px; height: 38px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: #e8f6ea; color:#2f7f1e; font-size:1.25rem;
  border: 1px solid #cfe8d4;
}

/* what we created style */
.c2c-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* stack images */
.c2c-slideshow .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    animation: c2cSlideFade 9s infinite ease-in-out;
}

/* 3 slides => 0s, 3s, 6s delays (3s per slide) */
.c2c-slideshow .slide:nth-child(1) {
    animation-delay: 0s;
}

.c2c-slideshow .slide:nth-child(2) {
    animation-delay: 3s;
}

.c2c-slideshow .slide:nth-child(3) {
    animation-delay: 6s;
}

/* smooth cross-fade: ~0.45s fade in/out, ~2.1s hold */
@keyframes c2cSlideFade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    /* fade in */
    30% {
        opacity: 1;
    }

    /* hold */
    35% {
        opacity: 0;
    }

    /* fade out */
    100% {
        opacity: 0;
    }
}

/* bullets */
.c2c-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    backdrop-filter: saturate(120%) blur(6px);
}

.c2c-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    animation: c2cDotCycle 9s infinite steps(1, end);
    opacity: .6;
}

.c2c-dots .dot:nth-child(1) {
    animation-delay: 0s;
}

.c2c-dots .dot:nth-child(2) {
    animation-delay: 3s;
}

.c2c-dots .dot:nth-child(3) {
    animation-delay: 6s;
}

@keyframes c2cDotCycle {
    0% {
        transform: scale(1);
        background: rgba(255, 255, 255, .9);
        opacity: 1;
    }

    33% {
        transform: scale(1);
        background: rgba(255, 255, 255, .9);
        opacity: 1;
    }

    34% {
        transform: scale(.9);
        background: rgba(255, 255, 255, .5);
        opacity: .6;
    }

    100% {
        transform: scale(.9);
        background: rgba(255, 255, 255, .5);
        opacity: .6;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .c2c-slideshow .slide {
        animation: none;
        opacity: 0;
    }

    .c2c-slideshow .slide:first-child {
        opacity: 1;
    }

    .c2c-dots .dot {
        animation: none;
        opacity: .6;
    }

    .c2c-dots .dot:first-child {
        opacity: 1;
        background: rgba(255, 255, 255, .9);
        transform: scale(1);
    }
}

/* what we created closing */
/* about us closing */

/* Blog section style */

.c2c-blog-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.c2c-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

/* HOW IT WORKS – V2 */

.c2c-hiw-chip {
    background: rgba(59, 148, 24, 0.1);
    color: var(--c2c-main);
    border: 1px solid rgba(59, 148, 24, 0.2);
}

.c2c-hiw-title {
    color: var(--c2c-ink);
    letter-spacing: -0.02em;
}

/* Card base */
.c2c-hiw-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--c2c-border);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

.c2c-hiw-pill {
    display: inline-block;
}

/* Frosted stripe like the reference */
.c2c-hiw-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    width: 42%;
    height: 80%;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.06), rgba(255, 255, 255, 0));
    filter: blur(0.5px);
    border-radius: 12px;
    pointer-events: none;
}

.c2c-hiw-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
    background: var(--c2c-main);
    color: #fff;
    /* ensure text switches to white */
}

/* Make inner text white on hover */
.c2c-hiw-card:hover h5,
.c2c-hiw-card:hover p,
.c2c-hiw-card:hover .c2c-hiw-step {
    color: #fff !important;
}

/* Adjust badge (pill) on hover */
.c2c-hiw-card:hover .c2c-hiw-pill {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Step label */
.c2c-hiw-step {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--c2c-main);
    text-transform: uppercase;
}

/* Pills */
.c2c-hiw-pill {
    display: inline-block;
    font-size: .75rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: var(--c2c-footer);
    user-select: none;
}

/* Round arrow between cards */
.c2c-hiw-next {
    position: absolute;
    right: -20px;
    /* sits on the edge like the sample */
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 10px rgba(2, 6, 23, 0.08);
    pointer-events: none;
    /* decorative */
}

.c2c-hiw-next i {
    font-size: 1.6rem;
    line-height: 1;
    color: #94a3b8;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .c2c-hiw-next {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .c2c-hiw-card {
        transition: transform .2s ease, box-shadow .2s ease;
    }
}

/* Why it works for you */

.c2c-feature {
    background: transparent;
    /* no card background */
    border: none;
    /* no border */
    box-shadow: none;
    /* remove shadow */
    transition: transform .2s ease, color .2s ease;
}

.c2c-feature:hover {
    transform: translateY(-3px);
    color: var(--c2c-main);
}

@media (max-width: 767.98px) {
    .c2c-feature {
        text-align: left;
    }

    .c2c-feature i {
        display: block;
        /* keeps icon above text */
        margin-left: 0;
    }
}

/* Minimal section heading */
.c2c-heading {
    text-align: center;
    margin: 2.5rem 0 1.5rem;
}

.c2c-heading__title {
    margin: 0;
    font-weight: 650;
    line-height: 1.15;
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    color: #26323e;
    /* subtle navy; adjust if needed */
}

.c2c-heading__title .bi {
    font-size: 1.1em;
    vertical-align: -2px;
    opacity: .9;
}

/* thin, elegant divider */
.c2c-heading__rule {
    width: min(680px, 80%);
    height: 2px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .18), rgba(0, 0, 0, 0));
    border-radius: 2px;
}

/* If the old .c2c-section-title-wrap / .c2c-section-title exist, neutralize them */
.c2c-section-title-wrap::before {
    content: none !important;
}

.c2c-section-title-wrap,
.c2c-section-title {
    all: unset;
}
/* closing */

/* Highlights chip button */
.c2c-chipbar {
    display: flex;
    gap: .5rem;
    padding-inline: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--c2c-cta) transparent;

    /* Desktop/tablet: wrap & center */
    flex-wrap: wrap;
    justify-content: center;
}

.c2c-chipbar::-webkit-scrollbar {
    height: 6px;
}

.c2c-chipbar::-webkit-scrollbar-thumb {
    background: var(--c2c-cta);
    border-radius: 999px;
}

/* Mobile-first fixes: keep first chips visible & swipeable */
@media (max-width: 576px) {
    .c2c-chipbar {
        flex-wrap: nowrap;
        /* single row on small screens */
        justify-content: flex-start;
        /* left align so 'All' is visible */
        scrollbar-width: none;
        /* hide FF scrollbar */
        -ms-overflow-style: none;
        /* IE/Edge legacy */

        /* subtle fade edges to hint scroll */
        mask-image: linear-gradient(to right,
                transparent 0, black 24px,
                black calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right,
                transparent 0, black 24px,
                black calc(100% - 24px), transparent 100%);
    }

    .c2c-chipbar::-webkit-scrollbar {
        display: none;
    }

    /* hide WebKit scrollbar */
}

/* Highlights button */
.c2c-chip {
    flex: 0 0 auto;
    /* prevent shrinking on mobile */
    border: 1px solid var(--c2c-border);
    background: var(--c2c-bg-light);
    color: var(--c2c-footer);
    padding: .5rem 1rem;
    border-radius: 999px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    font-weight: 500;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.c2c-chip:hover {
    background: var(--c2c-cta);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(43, 124, 11, 0.615);
}

/* Active chip */
.c2c-chip.is-active {
    background: var(--c2c-main);
    color: #fff;
    border-color: var(--c2c-main);
    box-shadow: 0 4px 10px rgba(43, 124, 11, 0.615);
}

.scrollable-row {
    max-height: 75vh;
    /* adjust this value */
    overflow-y: auto;
    /* make it scrollable */
    padding-right: .5rem;
    /* space for scrollbar */
}

.c2c-subtitle {
    color: #001F3F;
    /* keep your original dark blue */
    font-size: 1.35rem;
    /* a little bigger than fs-4 */
    line-height: 1.6;
    letter-spacing: 0.3px;
}

/* Emphasize key words */
.c2c-subtitle .highlight {
    color: var(--c2c-main);
    /* green from your theme */
    font-weight: 700;
}

/* ===== News Card v2 ===== */
.news-card-v2 {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
}

/* left accent bar */
.news-card-v2::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--c2c-main, #3B9418);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    z-index: 1;
}

/* BACK SHADOW / HALO (appears behind on hover) */
.news-card-v2::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 20px;
    background: radial-gradient(120% 90% at 50% 10%,
            rgba(59, 148, 24, .14), rgba(0, 0, 0, .10) 50%, rgba(0, 0, 0, 0) 70%);
    z-index: -1;
    /* behind the card */
    opacity: 0;
    transform: scale(.98);
    transition: opacity .22s ease, transform .22s ease;
}

/* inner spacing */
.news-card-v2__body {
    padding: 14px 16px 12px 20px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

/* hover + focus styles */
.news-card-v2:hover,
.news-card-v2:focus-within {
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, .12);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}

.news-card-v2:hover::after,
.news-card-v2:focus-within::after {
    opacity: 1;
    transform: scale(1);
}

/* date */
.news-card-v2 small.text-muted {
    color: #6b7280 !important;
    font-weight: 500;
    letter-spacing: .2px;
}

/* title clamp */
.news-card-v2 .card-title {
    color: #111827;
    font-weight: 700;
    line-height: 1.25;
    margin-right: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* description clamp */
.news-card-v2 .card-text>div {
    color: #374151;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* see more */
.news-card-v2 .see-more {
    color: var(--c2c-main, #3B9418);
    padding: .25rem .4rem;
    border-radius: .5rem;
    transition: background .15s ease, transform .15s ease, color .15s ease;
    text-decoration: none;
}

.news-card-v2 .see-more i {
    font-size: .9rem;
    transition: transform .15s ease;
}

.news-card-v2 .see-more:hover {
    background: rgba(59, 148, 24, .08);
    transform: translateX(1px);
}

.news-card-v2 .see-more:hover i {
    transform: translateX(2px);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {

    .news-card-v2,
    .news-card-v2::after {
        transition: none;
    }
}
/* closing */

/* Footer styles */
/* === Modern Footer === */
.custom-footer {
    background: #111;
    /* dark clean background */
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

.footer-logo-wrap {
    display: flex;
    justify-content: center;
}

.footer-nav .footer-link {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-nav .footer-link:hover {
    color: var(--c2c-main);
}

/* Social Icons */
.social-circle {
    background: #222;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.social-circle:hover {
    background: var(--c2c-main);
    color: #fff;
}

/* Responsive */
@media (max-width: 767px) {
    .footer-nav {
        flex-direction: column !important;
        gap: 0.75rem;
    }
}

/* Tagline animation */
.tagline-animate {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideUp 1.2s ease-out forwards;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* privacy policy */
.privacy .privacy-hero .privacy-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(90deg, var(--c2c-main), #54b42a);
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    padding: .35rem .6rem;
    border-radius: 999px;
    box-shadow: 0 4px 16px var(--ring);
}

.privacy .privacy-hero h1 {
    color: var(--ink);
}

.privacy .privacy-card {
    background: var(--card-bg);
    color: var(--ink);
    border: 1px solid var(--card-bdr);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    backdrop-filter: blur(6px);
}

/* Headings with left accent + subtle divider */
.privacy .privacy-h {
    position: relative;
    margin: 1.75rem 0 1rem;
    padding-left: .9rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.privacy .privacy-h::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15rem;
    bottom: .15rem;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--c2c-main), #8ed957);
}

/* Lists */
.privacy .privacy-list {
    margin: .5rem 0 1.25rem;
    padding-left: 1.1rem;
}

.privacy .privacy-list li {
    margin: .25rem 0;
}

/* Notes / emphasized paragraphs */
.privacy .privacy-note {
    color: var(--muted);
}

/* Links */
.privacy a {
    color: #8ed957;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy a:hover {
    color: #b8f08c;
}

/* Bootstrap Icons size tweak (optional) */
.privacy .bi {
    font-size: .95rem;
}

/* Make ordered lists match the Privacy list spacing */
.privacy .privacy-ol {
    padding-left: 1.15rem;
    margin: .25rem 0 1.25rem;
}

.privacy .privacy-ol>li {
    margin: .55rem 0;
}

/* closing */


/* Start Hami 07/11/25*/

#privacy li,
#privacy p,
#terms li,
#terms p,
#contact p {
    text-align: justify;
}

.blue-small-circle {
    transform: translate(30%, 190%);
}

.background-circle {
    transform: translate(30%, -20%);
}

.bi-chat-square-dots-fill {
    color: rgb(0, 50, 101);
}

/* If a fixed navbar overlaps or adds breathing room you don't want */
#contact {
    scroll-margin-top: 0;
}

#contact>.container:first-child {
    margin-top: 0;
}

/* ============================================
   STICKY FOOTER LAYOUT
   ============================================ */

/* Ensure html and body take full height */
html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Main page wrapper - flexbox container */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Full viewport height */
}

/* Navbar stays at top (fixed positioning already set) */
.navbar.fixed-top {
    flex-shrink: 0;
    /* Don't shrink */
}

/* Main content grows to fill available space */
.main-content {
    flex: 1 0 auto;
    /* Grow to fill space, don't shrink, auto basis */
    width: 100%;
    padding-top: 0;
    /* Remove if you have padding */
}

/* Footer stays at bottom */
.custom-footer {
    flex-shrink: 0;
    /* Don't shrink */
    margin-top: auto;
    /* Push to bottom if content is short */
}

/* Alternative method using CSS Grid (more modern) */
.page-wrapper-grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.page-wrapper-grid .navbar {
    grid-row: 1;
}

.page-wrapper-grid .main-content {
    grid-row: 2;
}

.page-wrapper-grid .custom-footer {
    grid-row: 3;
}

/* Ensure sections don't have conflicting margins */
section {
    position: relative;
}

/* Account for fixed navbar in first section */
section:first-of-type {
    margin-top: 0;
}

/* Ensure proper spacing */
.main-content>section:last-child {
    margin-bottom: 0;
    padding-bottom: 3rem;
    /* Add some breathing room above footer */
}

/* Footer specific adjustments */
.custom-footer {
    background: #111;
    color: #fff;
    padding: 40px 20px;
    width: 100%;
}

/* Prevent footer from shrinking on zoom out */
.custom-footer .container {
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile devices */
@media (max-width: 767px) {
    .main-content {
        padding-top: 0;
    }

    .custom-footer {
        padding: 30px 15px;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
    .main-content>section:last-child {
        padding-bottom: 2.5rem;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .main-content>section:last-child {
        padding-bottom: 4rem;
    }
}

/* ============================================
   ZOOM OUT FIX - Keep footer at bottom
   ============================================ */

/* Prevent layout breaking on zoom out */
@media (max-width: 1920px) {
    .page-wrapper {
        min-height: 100vh;
    }
}

/* Handle very wide screens / zoomed out */
@media (min-width: 1921px) {
    .page-wrapper {
        min-height: 100vh;
    }

    .main-content {
        min-height: calc(100vh - 300px);
        /* Adjust based on navbar + footer height */
    }
}

/* ============================================
   ADDITIONAL UTILITIES
   ============================================ */

/* Prevent content from being hidden under navbar */
section[id] {
    scroll-margin-top: 80px;
    /* Match navbar height */
}

/* Smooth transitions for Angular page changes */
[ng-show] {
    transition: opacity 0.3s ease;
}

/* Hide elements properly during Angular initialization */
[ng-cloak].angular-cloak {
    display: none !important;
}

/* Ensure modals don't affect footer position */
.modal-overlay {
    position: fixed;
    z-index: 1050;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ============================================
   OPTIONAL: Minimum content height
   ============================================ */

/* Ensure each section has minimum height for short content pages */
.main-content>section {
    min-height: 200px;
    /* Adjust as needed */
}

/* Special case for very short pages */
.main-content.short-content {
    min-height: calc(100vh - 200px);
    /* viewport - (navbar + footer) */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* for chip carousel */
.chip-marquee { width: min(100%, 980px); margin: 0 auto; }
.chip-viewport { overflow: hidden; }
.chip-lane {
  display: flex; gap: 10px; padding: 6px 4px;
  will-change: transform; transform: translateX(0);
}
.chip {
  white-space: nowrap; pointer-events: none; /* not clickable */
}