/* =========================================
   PARTNER CONTACT PAGE
========================================= */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }

    .main-title {
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: -2px;
        color: #0c3a30;
        font-size: clamp(34px, 4vw, 56px);
    }

    .partner-contact-section {
        position: relative;
        padding: 180px 0 100px;
        background: #f8f6f2;
        overflow: hidden;
    }

    @media (max-width: 991px) {
        .partner-contact-section {
            padding: 140px 0 70px;
        }
    }

    /* LEFT CONTENT */

    .partner-content {
        padding-right: 50px;
    }

    .partner-tag {
        display: inline-block;
        padding: 8px 18px;
        border-radius: 30px;
        background: rgba(118, 88, 59, 0.10);
        color: #76583b;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 18px;
    }

    .partner-content h1 {
        font-size: clamp(32px, 4.5vw, 52px);
        line-height: 1.15em;
        font-weight: 900;
        color: #0c3a30;
        margin-bottom: 22px;
        letter-spacing: -2px;
    }

    .partner-content p {
        font-size: 16px;
        line-height: 1.85em;
        color: #6b7280;
        margin-bottom: 0;
        font-weight: 400;
    }

    @media (max-width: 991px) {

        .partner-content {
            padding-right: 0;
            margin-bottom: 40px;
        }

        .partner-content h1 {
            font-size: 38px;
        }
    }

    @media (max-width: 576px) {

        .partner-content h1 {
            font-size: 30px;
        }
    }

    /* FORM BOX */

    .partner-form-box {
        background: #fff;
        padding: 40px;
        border-radius: 22px;
        box-shadow: 0 15px 60px rgba(0, 0, 0, 0.08);
        position: relative;
    }

    @media (max-width: 576px) {

        .partner-form-box {
            padding: 25px;
        }
    }

    /* INPUTS */

    .partner-form-box .form-control,
    .partner-form-box select {
        height: 58px;
        border-radius: 12px;
        border: 1px solid #e5e5e5;
        padding: 0 18px;
        font-size: 15px;
        color: #000;
        box-shadow: none;
        transition: all .3s ease;
        background: #fff;
    }

    .partner-form-box .form-control:focus,
    .partner-form-box select:focus {
        border-color: #76583b;
        box-shadow: 0 0 0 3px rgba(118, 88, 59, 0.10);
    }

    /* BUTTON */

    .partner-submit-btn {
        width: 100%;
        height: 58px;
        border: none;
        border-radius: 12px;
        background: #19352d;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        transition: all .3s ease;
    }

    .partner-submit-btn:hover {
        background: #5e442d;
        color: #fff;
    }

    /* SHAPE */

    .partner-contact-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: rgba(118, 88, 59, 0.05);
        top: -180px;
        right: -180px;
    }



    /* cards */
    /* CARDS */

    .connectx-card {

        background: #fff;

        padding: 40px;

        border-radius: 30px;

        height: 100%;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .04);

        transition: .35s;
    }

    .connectx-card:hover {

        transform: translateY(-8px);

    }

    .icon-box {

        width: 75px;

        height: 75px;

        background: #0c3a30;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 25px;
    }

    .icon-box i {

        color: #fff;

        font-size: 24px;

    }

    .connectx-card ul li,
    .expand-list li {

        position: relative;

        padding-left: 40px;

        margin-bottom: 16px;
    }

    .connectx-card ul li:before,
    .expand-list li:before {

        content: "✓";

        position: absolute;

        left: 0;

        top: 2px;

        width: 24px;

        height: 24px;

        background: #0c3a30;

        color: #ffd2b1;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 11px;
    }

    /* EXPANSION */

    .connectx-expand-points {

        padding: 0;

        margin: 0;
    }

    .connectx-expand-points li {

        position: relative;

        padding-left: 52px;

        margin-bottom: 18px;

        font-size: 17px;

        line-height: 1.8em;

        color: #222;
    }

    .connectx-expand-points li:last-child {

        margin-bottom: 0;
    }

    .connectx-expand-points li:before {

        content: "✓";

        position: absolute;

        left: 0;

        top: 2px;

        width: 32px;

        height: 32px;

        background: #0c3a30;


        color: #ffd2b1;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 12px;

        font-weight: 700;
    }

    @media(max-width:991px) {

        .connectx-expand-points li {

            padding-left: 48px;

            font-size: 16px;

        }

    }

    .partner-page or .become-partner-section */ .partner-page,
    .become-partner-section {
        margin-bottom: 20px;
        /* or 40px if you want more space */
    }

    /* second section */
    /* ==========================================================================
   ConnectX Completely Isolated "How Works" Grid Stylesheet
   ========================================================================= */

    /* Main wrapper spacing rules if needed */
    .connectx-how-works-section-wrapper {
        position: relative;
    }

    /* Unique Main Title Class */
    .how-work-main-heading {
        font-size: clamp(28px, 3.5vw, 48px) !important;
        font-weight: 900 !important;
        color: #0c3a30 !important;
        margin: 0 !important;
        letter-spacing: -1.5px !important;
        line-height: 1.15 !important;
    }

    /* Outer grid container wrapping all cards together */
    .how-works-section-cards-container {
        border: 1px solid rgba(55, 102, 92, 0.15) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        box-shadow: 0 20px 40px rgba(55, 102, 92, 0.04) !important;
    }

    /* Base card container styling */
    .how-works-section-card {
        padding: 3rem 2.5rem !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Background grid block style variants */
    .how-works-bg-light {
        background-color: #ffffff !important;
    }

    .how-works-bg-tint {
        background-color: rgba(255, 210, 177, 0.12) !important;
        /* 12% opacity tint of #ffd2b1 */
    }

    /* CRITICAL FIX: The wrapper layout strictly locking items to a horizontal row */
    .how-works-header-flex-row {
        display: flex !important;
        flex-direction: row !important;
        /* Forces inline row flow layout */
        align-items: center !important;
        /* Centers everything vertically inline */
        justify-content: flex-start !important;
        gap: 12px !important;
        /* Distance between badge element and h4 text */
        margin-bottom: 1.5rem !important;
        width: 100% !important;
    }

    /* Custom isolated text header class */
    .how-works-h4 {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #0c3a30 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        transition: color 0.3s ease !important;
    }

    /* Custom isolated badge element */
    .how-works-badge-num {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        color: #0c3a30 !important;
        letter-spacing: 0.05em !important;
        background: rgba(255, 210, 177, 0.4) !important;
        /* Default soft accent */
        padding: 4px 12px !important;
        border-radius: 30px !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        /* Prevents text container from crushing badge dimensions */
        height: 32px !important;
        vertical-align: middle !important;
    }

    /* Custom isolated description block paragraphs */
    .how-works-p-desc {
        font-size: 0.95rem !important;
        color: #6b7280 !important;
        line-height: 1.75 !important;
        margin: 0 !important;
        transition: color 0.3s ease !important;
    }

    /* ==========================================================================
   Interactive Hover Elements Transitions
   ========================================================================== */

    /* Main card hover block */
    .how-works-section-card:hover {
        background-color: #37665c !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 15px 30px rgba(55, 102, 92, 0.2) !important;
        z-index: 2 !important;
    }

    /* Heading element updates to clean white text on active hover layout */
    .how-works-section-card:hover .how-works-h4 {
        color: #ffffff !important;
    }

    /* Paragraph element description text transitions on active hover */
    .how-works-section-card:hover .how-works-p-desc {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* Flipped Hover Requirement: Number background becomes Green, number text shifts to Orange */
    .how-works-section-card:hover .how-works-badge-num {
        background: #37665c !important;
        color: #ffd2b1 !important;
        border: 1px solid rgba(255, 210, 177, 0.3) !important;
    }

    /* ==========================================================================
   Clean Grid Layout Borders Viewport Mixins
   ========================================================================== */

    @media (min-width: 992px) {
        .hw-grid-border-end-lg {
            border-right: 1px solid rgba(55, 102, 92, 0.15) !important;
        }

        .hw-grid-border-end-md {
            border-right: 1px solid rgba(55, 102, 92, 0.15) !important;
        }

        .hw-grid-border-bottom-md {
            border-bottom: 1px solid rgba(55, 102, 92, 0.15) !important;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .hw-grid-border-end-md {
            border-right: 1px solid rgba(55, 102, 92, 0.15) !important;
        }

        .hw-grid-border-bottom-md {
            border-bottom: 1px solid rgba(55, 102, 92, 0.15) !important;
        }

        .hw-grid-border-bottom-sm {
            border-bottom: 1px solid rgba(55, 102, 92, 0.15) !important;
        }
    }

    @media (max-width: 767.98px) {
        .how-works-section-card {
            border-bottom: 1px solid rgba(55, 102, 92, 0.15) !important;
            padding: 2.5rem 1.5rem !important;
        }

        .how-works-section-cards-container .col-md-6:last-child .how-works-section-card {
            border-bottom: none !important;
        }
    }