/* ==================================================
   CPL SERVICE CARD — CORE RESET
   ================================================== */

.elementor-element.elementor-widget-cpl_service_card {
    --container-widget-width: 100% !important;
    --container-widget-flex-grow: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ==================================================
   1. THE WRAPPER (The Safety Box)
   ================================================== */
.elementor-element.elementor-widget-cpl_service_card .cpl-service-card-wrapper {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: 100%;
}

/* ==================================================
   SERVICE BOX
   ================================================== */
.cpl-service-card-wrapper .service-box {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.elementor-element.elementor-widget-cpl_service_card .cpl-service-card-wrapper .service-box.style-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-self: stretch;
    width: auto;
    height: 100%;
    min-height: 100%;
    padding: 0;
    overflow: visible;
    width: 100% !important;
}

/* ==================================================
   SERVICE BOX ROW & COL GAP
   ================================================== */
.elementor-element.elementor-widget-cpl_service_card .cpl-service-card-wrapper .row {
    display: flex !important;
    flex-wrap: wrap !important;
    
    /* Pulling the variables from your Dimension Control */
    --final-col-gap: var(--col-gap, 30px);
    --final-row-gap: var(--row-gap, 30px);
    
    /* HORIZONTAL FIX: Pull the row edges out to hide the outer padding */
    margin-left: calc(var(--final-col-gap) / -2) !important;
    margin-right: calc(var(--final-col-gap) / -2) !important;
    
    gap: 0 !important; 
}

.elementor-element.elementor-widget-cpl_service_card .cpl-service-card-wrapper [class*="col-"] {
    /* HORIZONTAL GAP: Half on each side creates the full gap between cards */
    padding-left: calc(var(--final-col-gap) / 2) !important;
    padding-right: calc(var(--final-col-gap) / 2) !important;
    
    /* VERTICAL GAP: Space between the rows */
    margin-top: calc(var(--final-row-gap) / 2) !important;
    margin-bottom: calc(var(--final-row-gap) / 2) !important;
    
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

/* ==================================================
   CARD CONTENT
   ================================================== */

.cpl-service-card-wrapper .service-normal {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
    padding: 15px;
    background: #ffffff;
    border-radius: 5px;
    border: 1px solid #e7edf8;
    z-index: 2;
    transition: all 0.4s ease;
    
    --cpl-card-inner-gap: 15px;
    /* Always flex so enabling divider does not switch layout models (avoids button jump) */
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cpl-card-inner-gap, 15px) !important; 
    width: 100% !important;
    height: 100% !important;
    padding: 30px 25px !important;
}

/* Hover / Active */
.cpl-service-card-wrapper .service-box.style-card:hover .service-normal,
.cpl-service-card-wrapper .service-box.style-card.active .service-normal {
    background: #ffffff;
    box-shadow: 10px 0 60px rgba(109,109,109,0.15);
    transform: translateY(0);
}

/* ==================================================
   ICON
   ================================================== */

.cpl-service-card-wrapper .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #104cba;
}

.cpl-service-card-wrapper .icon i,
.cpl-service-card-wrapper .icon svg {
    font-size: 50px;
    line-height: 1;
}

/* ==================================================
   TEXT
   ================================================== */

.cpl-service-card-wrapper .service-sub-title {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #104cba;
    justify-content: inherit;
}

.cpl-service-card-wrapper .service-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 24px;
    color: #b5b5b5;
    font-weight: 600;
    margin: 15px 0px 15px 0px;
    line-height: 1.2;
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    justify-content: inherit;
    margin: 0 !important;
    flex: 0 0 auto;
}

/*
 * Vertical: vertically center title text in the equalized title band so
 * one-line and two-line titles share balanced title-to-description spacing.
 * JS may raise min-height / icon slot.
 */
.cpl-service-card-wrapper.cpl-layout-vertical .service-title {
    min-height: 2.4em !important;
    align-items: center !important;
}

.cpl-service-card-wrapper.cpl-layout-vertical .service-normal > .icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: inherit;
    box-sizing: border-box;
}

.cpl-service-card-wrapper .cpl-icon-title-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: inherit;
    gap: var(--cpl-icon-title-gap, 12px);
    width: 100%;
}

.cpl-service-card-wrapper.cpl-layout-horizontal .service-normal .cpl-icon-title-inline,
.cpl-service-card-wrapper.cpl-layout-horizontal .cpl-icon-title-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: inherit;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    /* Match Vertical title→description spacing (--cpl-card-inner-gap / flex gap).
       External margin only — not included in JS min-height measurement. */
    margin-bottom: var(--cpl-card-inner-gap, 15px);
}

.cpl-service-card-wrapper.cpl-layout-horizontal .cpl-icon-title-inline .icon {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    line-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.cpl-service-card-wrapper.cpl-layout-horizontal .cpl-icon-title-inline .icon i,
.cpl-service-card-wrapper.cpl-layout-horizontal .cpl-icon-title-inline .icon svg,
.cpl-service-card-wrapper.cpl-layout-horizontal .cpl-icon-title-inline .icon img {
    display: block !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* Horizontal: center title text with icon (1-line and multi-line). No title min-height. */
.cpl-service-card-wrapper.cpl-layout-horizontal .cpl-icon-title-inline .service-title {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}

.cpl-service-card-wrapper.cpl-layout-horizontal .cpl-icon-title-inline > * + * {
    margin-inline-start: var(--cpl-icon-title-gap, 12px) !important;
}

.cpl-service-card-wrapper .service-normal .cpl-card-divider {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    --cpl-divider-h: 1px;
    height: var(--cpl-divider-h);
    min-height: var(--cpl-divider-h);
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #e7edf8;
    flex: 0 0 auto;
    align-self: start;
    /* Keep total spacing equal to one card gap so enabling divider does not shift layout */
    margin-top: calc(-0.5 * (var(--cpl-card-inner-gap, 15px) + var(--cpl-divider-h, 1px)));
    margin-bottom: calc(-0.5 * (var(--cpl-card-inner-gap, 15px) + var(--cpl-divider-h, 1px)));
    position: relative;
    z-index: 1;
}

.cpl-service-card-wrapper .service-normal > .service-desc {
    /* Floor for short copy; JS raises this per-row to the tallest description. */
    min-height: var(--cpl-desc-min-height, 5.1em);
    width: 100%;
    box-sizing: border-box;
}

/*
 * Vertical: description stays at natural / JS-equalized height.
 * Leftover card space sits between the content stack and the CTA (not inside .service-desc).
 */
.cpl-service-card-wrapper.cpl-layout-vertical .service-normal > .service-desc {
    flex: 0 0 auto !important;
}

/* Horizontal: keep existing grow-to-fill behaviour unchanged. */
.cpl-service-card-wrapper.cpl-layout-horizontal .service-normal > .service-desc {
    flex: 1 1 auto !important;
}

.cpl-service-card-wrapper .service-desc p {
    margin-bottom: 20px;
    line-height: 1.7;
}

.cpl-service-card-wrapper .service-desc ul,
.cpl-service-card-wrapper .service-desc ol {
    margin: 0 0 20px;
    padding-left: 1.25em;
    text-align: inherit;
}

.cpl-service-card-wrapper .service-desc ul li,
.cpl-service-card-wrapper .service-desc ol li {
    line-height: 1.7;
    font-weight: 400;
}

.cpl-service-card-wrapper .service-desc ul li > a,
.cpl-service-card-wrapper .service-desc ol li > a {
    color: inherit;
    font: inherit;
    text-decoration: inherit;
    position: relative;
    z-index: 3;
}

/* Keep description→CTA spacing consistent regardless of last block type (p/ul/ol). */
.cpl-service-card-wrapper .service-desc > *:last-child {
    margin-bottom: 0 !important;
}

.cpl-service-card-wrapper .service-desc ul li:last-child,
.cpl-service-card-wrapper .service-desc ol li:last-child,
.cpl-service-card-wrapper .service-desc p:last-child {
    margin-bottom: 0;
}

.cpl-service-card-wrapper .service-normal > .cpl-btn {
    flex: 0 0 auto;
}

/*
 * Vertical: push only the CTA to the card bottom.
 * Overrides margin-top from the button margin shorthand / --btn-margin while
 * leaving left, right, and bottom values from that system intact.
 * Higher specificity so Elementor CTA-gap margin-top cannot break equalization.
 */
.elementor-element.elementor-widget-cpl_service_card .cpl-service-card-wrapper.cpl-layout-vertical .service-normal > .cpl-btn.cpl-style-card,
.cpl-service-card-wrapper.cpl-layout-vertical .service-normal > .cpl-btn.cpl-style-card {
    margin-top: auto !important;
}

.cpl-service-card-wrapper.cpl-list-marker-none .service-desc ul {
    list-style: none;
    padding-left: 0;
}

/*
 * List markers — ::before shapes/glyphs (size/gap via Elementor selectors + vars).
 * Keep selectors short so editor + frontend both match.
 */
.cpl-service-card-wrapper[class*="cpl-list-marker-"]:not(.cpl-list-marker-none) .service-desc ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.cpl-service-card-wrapper[class*="cpl-list-marker-"]:not(.cpl-list-marker-none) .service-desc ul li {
    display: block !important;
    position: relative !important;
    list-style: none !important;
    font-weight: 400;
    padding-left: calc(var(--cpl-list-marker-size, 8px) + var(--cpl-list-marker-gap, 8px)) !important;
}

.cpl-service-card-wrapper[class*="cpl-list-marker-"]:not(.cpl-list-marker-none) .service-desc ul li::before {
    position: absolute !important;
    left: 0 !important;
    top: 0.85em !important;
    transform: translateY(-50%) !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: currentColor !important;
    line-height: 1 !important;
    pointer-events: none;
}

/* Disc */
.cpl-service-card-wrapper.cpl-list-marker-disc .service-desc ul li::before {
    content: "" !important;
    width: var(--cpl-list-marker-size, 8px) !important;
    height: var(--cpl-list-marker-size, 8px) !important;
    min-width: var(--cpl-list-marker-size, 8px) !important;
    min-height: var(--cpl-list-marker-size, 8px) !important;
    background-color: currentColor !important;
    border: none !important;
    border-radius: 50% !important;
}

/* Circle */
.cpl-service-card-wrapper.cpl-list-marker-circle .service-desc ul li::before {
    content: "" !important;
    width: var(--cpl-list-marker-size, 8px) !important;
    height: var(--cpl-list-marker-size, 8px) !important;
    min-width: var(--cpl-list-marker-size, 8px) !important;
    min-height: var(--cpl-list-marker-size, 8px) !important;
    background-color: transparent !important;
    border: 2px solid currentColor !important;
    border-radius: 50% !important;
}

/* Square */
.cpl-service-card-wrapper.cpl-list-marker-square .service-desc ul li::before {
    content: "" !important;
    width: var(--cpl-list-marker-size, 8px) !important;
    height: var(--cpl-list-marker-size, 8px) !important;
    min-width: var(--cpl-list-marker-size, 8px) !important;
    min-height: var(--cpl-list-marker-size, 8px) !important;
    background-color: currentColor !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Arrow / tick / dash */
.cpl-service-card-wrapper.cpl-list-marker-arrow .service-desc ul li::before {
    content: "\2192" !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    font-size: var(--cpl-list-marker-size, 8px) !important;
    font-weight: 600;
}

.cpl-service-card-wrapper.cpl-list-marker-tick .service-desc ul li::before {
    content: "\2713" !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    font-size: var(--cpl-list-marker-size, 8px) !important;
    font-weight: 700;
}

.cpl-service-card-wrapper.cpl-list-marker-dash .service-desc ul li::before {
    content: "\2013" !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    font-size: var(--cpl-list-marker-size, 8px) !important;
    font-weight: 400;
}

/* ==================================================
   BUTTON — CPL ONLY
   ================================================== */

.cpl-service-card-wrapper .service-box .service-normal .cpl-btn {
    display: inline-flex;
    padding: 10px 20px;
    border: 1px solid #e5e5e5;
    background: #d5d5d5;
    color: #000;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}
/* Target only buttons within the style-card service box */
.service-box.style-card .cpl-btn.cpl-style-card {
    width: max-content; 
    height: 30px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    flex: 0 0 auto;
    align-self: var(--btn-justify, start);
    justify-self: var(--btn-justify, start); 
    margin: var(--btn-margin, 20px 0 0 0) !important;
}

.service-box.style-card .cpl-btn.cpl-style-card > span {
    display: inline-flex;
    align-items: center;
    gap: var(--cpl-btn-icon-gap, 6px);
}

.service-box.style-card .cpl-btn.cpl-style-card .cpl-btn-text {
    text-underline-offset: 2px;
}

.service-box.style-card .cpl-btn.cpl-style-card .cpl-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    font-size: var(--cpl-btn-icon-size, 15px);
}

.service-box.style-card .cpl-btn.cpl-style-card i,
.service-box.style-card .cpl-btn.cpl-style-card svg {
    display: block;
    width: var(--cpl-btn-icon-size, 15px);
    height: var(--cpl-btn-icon-size, 15px);
    font-size: var(--cpl-btn-icon-size, 15px);
    line-height: 1;
    flex-shrink: 0;
    fill: currentColor;
    color: inherit;
    transition: transform 0.3s ease;
}

/* Button hover */
.cpl-service-card-wrapper .service-box .service-normal .cpl-btn:hover {
    background: #104cba;
    border-color: #104cba;
    color: #ffffff;
}

/* CTA icon hover movement (overridable via --cpl-btn-hover-move) */
.cpl-service-card-wrapper .service-box.style-card .service-normal .cpl-btn:hover .cpl-btn-icon i,
.cpl-service-card-wrapper .service-box.style-card .service-normal .cpl-btn:hover .cpl-btn-icon svg {
    transform: translateX(var(--cpl-btn-hover-move, 2px));
}

/* Disabled Default Style */
/* Button hover style ONLY when disabled */
.cpl-service-card-wrapper.btn-style-disabled
.service-box.style-card
.service-normal
.cpl-btn {
    background: none;
    border: none;
}

/* Remove underline from the main button hover state */
.cpl-service-card-wrapper.btn-style-disabled .service-box.style-card .service-normal .cpl-btn:hover {
    background: none;
    border: none;
    color: #3B82F6;
    text-decoration: none; /* Disable default underline on the parent */
}

/* Underline only under link text, not icon */
.cpl-service-card-wrapper.btn-style-disabled .service-box.style-card .service-normal .cpl-btn:hover .cpl-btn-text {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #3B82F6;
}

.cpl-service-card-wrapper.btn-style-disabled .service-box.style-card .service-normal .cpl-btn:hover .cpl-btn-icon,
.cpl-service-card-wrapper.btn-style-disabled .service-box.style-card .service-normal .cpl-btn:hover .cpl-btn-icon i,
.cpl-service-card-wrapper.btn-style-disabled .service-box.style-card .service-normal .cpl-btn:hover .cpl-btn-icon svg {
    text-decoration: none !important;
}
/* ==================================================
   CIRCLE SHAPES (SAFE ISOLATION)
   ================================================== */

.cpl-service-card-wrapper .circle-shapes-wrap {
    position: absolute;
    width: 120%;
    padding-bottom: 120%;
    top: -10%;
    left: -10%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: rounded 30s linear infinite;
}

.cpl-service-card-wrapper .service-box:hover .circle-shapes-wrap,
.cpl-service-card-wrapper .service-box.active .circle-shapes-wrap {
    opacity: 1;
}

/* Main circle */
.cpl-service-card-wrapper .circle-shape {
    inset: 0;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #e0e0e1;
}

/* Dots */
.cpl-service-card-wrapper .circle-shape::before,
.cpl-service-card-wrapper .circle-shape::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: zoomInOutTwo 4s infinite;
}

.cpl-service-card-wrapper .circle-shape::before {
    left: 15%;
    top: 10%;
    background: #ff7a41;
}

.cpl-service-card-wrapper .circle-shape::after {
    right: 15%;
    bottom: 10%;
    background: #104cba;
}

/* ==================================================
   CARD LINK
   ================================================== */

/* full clickable area */
.cpl-card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* keep content visible & interactive */
.cpl-service-card-wrapper .service-normal,
.cpl-service-card-wrapper .circle-shapes-wrap {
    position: relative;
    z-index: 2;
}

/*
 * When the card overlay is enabled, let clicks pass through the content shell
 * so the overlay receives them, while keeping buttons and description links clickable.
 */
.cpl-service-card-wrapper .service-box.is-clickable .service-normal {
    pointer-events: none;
}

.cpl-service-card-wrapper .service-box.is-clickable .cpl-btn,
.cpl-service-card-wrapper .service-box.is-clickable .service-desc a {
    pointer-events: auto;
}

/* button always above card link */
.cpl-service-card-wrapper .cpl-btn {
    position: relative;
    z-index: 3;
}

/* UX */
.cpl-service-card-wrapper .service-box.is-clickable {
    cursor: pointer;
}

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

@media (max-width: 767px) {
    .cpl-service-card-wrapper .circle-shapes-wrap {
        display: none;
    }
    .cpl-service-card-wrapper .service-normal {
        padding: 25px;
    }
}

@media (max-width: 375px) {
    .cpl-service-card-wrapper .service-normal {
        padding-left: 25px;
        padding-right: 25px;
    }
}