/* ================================================================
   ice_body.css
   Every rule is copied EXACTLY from ICE_2.html <style> block.
   All selectors are prefixed with  .ice-page-wrap  so your
   common theme / header / footer CSS is never affected.
   Load this file AFTER your theme stylesheet.

   Usage in your layout <head>:
   <link rel="stylesheet" href="<?php echo asset_url('assets/front/css/ice_body.css'); ?>">
   ================================================================ */

/* ---------------------------------------------------------------
   WRAPPER — dark atmospheric background
   Mirrors:  body { background-color:#0a0a1a; }
             body::before { radial-gradient … }
--------------------------------------------------------------- */
.ice-page-wrap {
    font-family: 'Segoe UI', sans-serif;
    color: #fff;
    background-color: #0a0a1a;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}
.ice-page-wrap::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background:
        radial-gradient(circle at 15% 25%, rgba(79,159,255,0.12), transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(26,95,186,0.08),  transparent 40%),
        linear-gradient(135deg, #0a0a1a 0%, #0d0d26 50%, #14143d 100%);
    z-index: -1;
    pointer-events: none;
}
/* Every direct child sits above the bg */
.ice-page-wrap > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   CONTENT WRAPPER
   Mirrors:  .content-wrapper { max-width:1240px; padding:0 40px; }
--------------------------------------------------------------- */
.ice-page-wrap .content-wrapper {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* ---------------------------------------------------------------
   GRADIENT BUTTON
   Mirrors:  .gradient-btn { … background: linear-gradient(135deg,…) }
--------------------------------------------------------------- */
.ice-page-wrap .gradient-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 22px !important;
    border-radius: 50px !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: linear-gradient(135deg, #0d47a1 0%, #0b3d91 60%, #4F9FFF 100%) !important;
}
.ice-page-wrap .gradient-btn:hover {
    box-shadow: 0 6px 20px rgba(13,71,161,0.45) !important;
    color: #fff !important;
}
.ice-page-wrap .gradient-btn:active {
    box-shadow: 0 3px 10px rgba(13,71,161,0.3) !important;
}

/* ================================================================
   SECTION 1 — HERO
   Mirrors:  .rm-hero { display:flex; align-items:center; padding:30px 0 60px 0; }
   ================================================================ */
.ice-page-wrap .banner-info.ice-hero {
    display: flex !important;
    align-items: center !important;
    padding: 30px 0 60px 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-height: unset !important;
}

/* .rm-title — white→sky gradient text, 58 px */
.ice-page-wrap .rm-title {
    font-weight: 700 !important;
    font-size: 58px !important;
    line-height: 1.15 !important;
    padding-top: 30px !important;
    padding-bottom: 5px !important;
    margin-bottom: 0 !important;
    display: block !important;
    background: linear-gradient(45deg, #ffffff 30%, #4F9FFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}
.ice-page-wrap .rm-title span { display: block !important; }

/* Service list */
.ice-page-wrap .service-header {
    color: #4F9FFF !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin-bottom: 15px !important;
}
.ice-page-wrap .service-item {
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: flex-start !important;
}
.ice-page-wrap .service-icon {
    color: #4F9FFF !important;
    margin-right: 15px !important;
    margin-top: 5px !important;
    font-size: 18px !important;
}
.ice-page-wrap .service-text strong {
    font-weight: 700 !important;
    display: block !important;
    font-size: 17px !important;
    margin-bottom: 2px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}
.ice-page-wrap .service-text span {
    color: #b0b0b0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    -webkit-text-fill-color: #b0b0b0 !important;
}

/* ================================================================
   SECTION 2 — FEATURES GLASS SECTION
   Mirrors:  .features-glass-section { padding:46px 0 56px 0; background-color:#e8f2ff; }
   ================================================================ */
.ice-page-wrap .features-glass-section {
    padding: 46px 0 56px 0 !important;
    background-color: #e8f2ff !important;
    background-image: none !important;
}

/* .special-heading span */
.ice-page-wrap .special-heading {
    text-align: center !important;
    margin-bottom: 28px !important;
}
.ice-page-wrap .special-heading span {
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 1.3 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* .glass-card */
.ice-page-wrap .glass-card {
    background: rgba(255,255,255,0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 20px !important;
    padding: 35px 30px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background-image: none !important;
    box-shadow: none !important;
}
.ice-page-wrap .glass-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05) !important;
}

/* .sq-icon + flip animation */
.ice-page-wrap .sq-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    color: #fff !important;
    font-size: 20px !important;
    background: linear-gradient(135deg, #0d47a1 0%, #4F9FFF 100%) !important;
    transition: transform 0.5s ease !important;
    flex-shrink: 0 !important;
}
.ice-page-wrap .glass-card:hover .sq-icon,
.ice-page-wrap .hub-card:hover .hub-icon,
.ice-page-wrap .whom-card:hover .whom-icon {
    transform: rotateY(180deg) scale(1.1) !important;
}

/* feature text */
.ice-page-wrap .feature-title {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}
.ice-page-wrap .feature-desc {
    color: #424245 !important;
    -webkit-text-fill-color: #424245 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
}
.ice-page-wrap .sub-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
.ice-page-wrap .sub-feature-list li {
    font-size: 13px !important;
    color: #6e6e73 !important;
    -webkit-text-fill-color: #6e6e73 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* glass reveal on hover */
.ice-page-wrap .glass-reveal-wrapper {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.165,0.84,0.44,1) !important;
}
.ice-page-wrap .glass-card:hover .glass-reveal-wrapper {
    max-height: 350px !important;
    opacity: 1 !important;
    margin-top: 15px !important;
}

/* ================================================================
   SECTION 3 — ICE HUB / DASHBOARDS
   Mirrors:  .ice-hub-section { background:#fff; padding:46px 0; color:#1a1a1a; }
   ================================================================ */
.ice-page-wrap .ice-hub-section {
    background: #ffffff !important;
    background-image: none !important;
    padding: 15px 0 !important;
    color: #1a1a1a !important;
    overflow: hidden !important;
}

/* .internal-card-title */
.ice-page-wrap .internal-card-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    margin-bottom: 15px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
.ice-page-wrap .internal-card-title span {
    background: linear-gradient(90deg, #0d47a1, #4F9FFF) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* .hub-card */
.ice-page-wrap .hub-card {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: #ffffff !important;
    background-image: none !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    border: 1px solid rgb(224,229,239) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
}
.ice-page-wrap .hub-card:hover {
    background: #edf5ff !important;
    background-image: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    border: 1px solid rgb(224,229,239) !important;
}

/* .hub-icon */
.ice-page-wrap .hub-icon {
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0d47a1 0%, #4F9FFF 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 4px 15px rgba(79,159,255,0.3) !important;
    transition: transform 0.5s ease !important;
    flex-shrink: 0 !important;
}

/* hub text */
.ice-page-wrap .hub-text h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    margin-bottom: 6px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}
.ice-page-wrap .hub-text p {
    font-size: 13px !important;
    color: #666 !important;
    -webkit-text-fill-color: #666 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* .hub-center-circle + radar spin */
.ice-page-wrap .hub-center-circle {
    width: 260px !important;
    height: 260px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 10px rgba(79,159,255,0.05), 0 15px 40px rgba(0,0,0,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 0 auto !important;
}
.ice-page-wrap .hub-center-circle::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important; left: -20px !important;
    right: -20px !important; bottom: -20px !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, transparent 60%, rgba(79,159,255,0.8) 100%) !important;
    z-index: -1 !important;
    animation: iceRadarSpin 3s linear infinite !important;
}
@keyframes iceRadarSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ================================================================
   SECTION 4 — FOR WHOM
   Mirrors:  .for-whom-section { padding:46px 0; background:transparent; }
   ================================================================ */
.ice-page-wrap .for-whom-section {
    padding: 46px 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
.ice-page-wrap .for-whom-header {
    text-align: center !important;
    margin-bottom: 50px !important;
}
.ice-page-wrap .for-whom-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin-bottom: 10px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}
.ice-page-wrap .for-whom-subtitle {
    color: #4F9FFF !important;
    -webkit-text-fill-color: #4F9FFF !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
}

/* .whom-card */
.ice-page-wrap .whom-card {
    background: rgba(255,255,255,0.03) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 12px !important;
    /* padding: 35px 20px !important; */
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.ice-page-wrap .whom-card:hover {
    transform: translateY(-5px) !important;
    border-color: #4F9FFF !important;
    background: rgba(255,255,255,0.06) !important;
    box-shadow: 0 8px 25px rgba(79,159,255,0.2) !important;
}
/* .whom-icon */
.ice-page-wrap .whom-icon {
    font-size: 40px !important;
    margin-bottom: 20px !important;
    background: linear-gradient(135deg, #4F9FFF 0%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    transition: transform 0.5s ease !important;
}
.ice-page-wrap .whom-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}


/* =====================================================
   CLIENT LOGO MARQUEE STRIP
====================================================== */
.client-strip {
    padding: 35px 0;
    background: #ffffff;
}

.client-strip-text {
    font-size: 16px;
}

.client-logo {
    height: 40px;
    width: auto;
    margin: 0 60px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
 
/* Marquee wrapper */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
}
 
/* Scrolling track */
.marquee-content {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scroll 250s linear infinite;
    will-change: transform;
}
 
/* Smooth animation using transform */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ================================================================
   SECTION 5 — SALIENT FEATURES (PILL STYLE)
   Mirrors:  .salient-features-section { background:#fff; padding:46px 0; }
   ================================================================ */
.ice-page-wrap .salient-features-section {
    background: #ffffff !important;
    background-image: none !important;
    padding: 46px 0 !important;
}
.ice-page-wrap .salient-title-dark {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    margin-bottom: 40px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}

/* .pill-cluster */
.ice-page-wrap .pill-cluster {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    max-width: 950px !important;
    margin: 0 auto !important;
}
/* .feature-pill */
.ice-page-wrap .feature-pill {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #4F9FFF !important;
    color: #0d47a1 !important;
    -webkit-text-fill-color: #0d47a1 !important;
    padding: 12px 25px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: default !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
    display: inline-block !important;
}
.ice-page-wrap .feature-pill:hover {
    background: linear-gradient(135deg, #0d47a1 0%, #0b3d91 60%, #4F9FFF 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(79,159,255,0.25) !important;
}

/* ================================================================
   SECTION 6 — DEMO MODULES + FORM
   Mirrors:  .demo-modules-section { background-color:#f8fafc; padding:46px 0; color:#0d1b3e; }
   ================================================================ */
.ice-page-wrap .demo-modules-section {
    background-color: #f8fafc !important;
    background-image: none !important;
    padding: 46px 0 !important;
    color: #0d1b3e !important;
}
.ice-page-wrap .section-title-dark {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    margin-bottom: 30px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}

/* .module-checkbox-card */
.ice-page-wrap .module-checkbox-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    cursor: pointer !important;
    padding: 15px 10px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    width: 100% !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.ice-page-wrap .module-checkbox-card:hover {
    background-color: #ffffff !important;
    border-color: rgba(79,159,255,0.3) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
.ice-page-wrap .module-checkbox-card input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin-bottom: 12px !important;
    accent-color: #0d47a1 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.ice-page-wrap .module-icon-img {
    height: 60px !important;
    width: auto !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
    display: block !important;
}
.ice-page-wrap .module-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}
/* checked state */
.ice-page-wrap .module-checkbox-card:has(input[type="checkbox"]:checked) {
    background-color: #ffffff !important;
    border-color: #4F9FFF !important;
    box-shadow: 0 4px 15px rgba(79,159,255,0.15) !important;
}
.ice-page-wrap .module-checkbox-card:has(input[type="checkbox"]:checked) .module-label {
    color: #0d47a1 !important;
    -webkit-text-fill-color: #0d47a1 !important;
}

/* .demo-form-card */
.ice-page-wrap .demo-form-card {
    background: #ffffff !important;
    background-image: none !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
}
.ice-page-wrap .demo-form-card h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}
.ice-page-wrap .demo-input-group {
    margin-bottom: 15px !important;
}

/* ALL inputs inside the form — mirrors .demo-input exactly */
.ice-page-wrap .demo-input,
.ice-page-wrap .demo-form-card .form-control,
.ice-page-wrap .demo-form-card input[type="text"],
.ice-page-wrap .demo-form-card input[type="email"],
.ice-page-wrap .demo-form-card input[type="tel"],
.ice-page-wrap .demo-form-card textarea {
    /* width: 100% !important; */
    /* padding: 10px 15px !important; */
    font-size: 14px !important;
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    font-family: 'Segoe UI', sans-serif !important;
    -webkit-appearance: none !important;
}
.ice-page-wrap .demo-input:focus,
.ice-page-wrap .demo-form-card .form-control:focus,
.ice-page-wrap .demo-form-card input[type="text"]:focus,
.ice-page-wrap .demo-form-card input[type="email"]:focus,
.ice-page-wrap .demo-form-card input[type="tel"]:focus,
.ice-page-wrap .demo-form-card textarea:focus {
    border-color: #60adff !important;
    box-shadow: 0 0 0 3px rgba(96,173,255,0.15) !important;
    outline: none !important;
    background-color: #ffffff !important;
}
.ice-page-wrap .demo-form-card textarea {
    resize: vertical !important;
    min-height: 100px !important;
}

/* phone wrapper — mirrors .phone-input-wrapper / .phone-number */
.ice-page-wrap .phone-input-wrapper {
    display: flex !important;
}
.ice-page-wrap .phone-number {
    border-radius: 0 6px 6px 0 !important;
    flex: 1 !important;
}

/* intl-tel-input library */
.ice-page-wrap .iti {
    width: 100% !important;
    display: block !important;
}
.ice-page-wrap .iti__flag-container {
    position: absolute !important;
}
.ice-page-wrap .iti--separate-dial-code .iti__selected-flag {
    background-color: #f8fafc !important;
    border-radius: 6px 0 0 6px !important;
}

/* OTP digit boxes */
.ice-page-wrap .otp-box {
    width: 44px !important;
    height: 44px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    background-image: none !important;
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
.ice-page-wrap .otp-box:focus {
    border-color: #60adff !important;
    box-shadow: 0 0 0 3px rgba(96,173,255,0.15) !important;
    background-color: #ffffff !important;
}

/* OTP / Verify / Cancel / Resend buttons */
.ice-page-wrap .btn.verify,
.ice-page-wrap .send-otp-btn,
.ice-page-wrap .s_verify-otp-btn,
.ice-page-wrap .s_resent-otp-btn {
    background: linear-gradient(135deg, #0d47a1 0%, #0b3d91 60%, #4F9FFF 100%) !important;
    background-image: linear-gradient(135deg, #0d47a1 0%, #0b3d91 60%, #4F9FFF 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    transition: opacity 0.2s !important;
    font-family: 'Segoe UI', sans-serif !important;
    cursor: pointer !important;
}
.ice-page-wrap .s_cancel-btn {
    background: #64748b !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
.ice-page-wrap .btn.verify:hover,
.ice-page-wrap .send-otp-btn:hover,
.ice-page-wrap .s_verify-otp-btn:hover,
.ice-page-wrap .s_resent-otp-btn:hover {
    opacity: 0.85 !important;
}

/* Verified tick */
.ice-page-wrap .verified_tick {
    color: #22c55e !important;
    -webkit-text-fill-color: #22c55e !important;
}

/* Error span */
.ice-page-wrap .error {
    font-size: 12px !important;
    color: #ef4444 !important;
    -webkit-text-fill-color: #ef4444 !important;
    display: block !important;
    margin-top: 4px !important;
}
.ice-page-wrap .is-invalid,
.ice-page-wrap .is-invalid.form-control,
.ice-page-wrap .is-invalid.demo-input {
    border-color: #ef4444 !important;
    box-shadow: none !important;
}

/* Submit button — mirrors .demo-submit-btn exactly */
.ice-page-wrap #schedule_submit,
.ice-page-wrap .demo-submit-btn {
    background-color: #1a233a !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 14px 30px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    margin-top: 10px !important;
    font-family: 'Segoe UI', sans-serif !important;
    box-shadow: none !important;
    display: block !important;
    text-align: center !important;
    line-height: normal !important;
}
.ice-page-wrap #schedule_submit:hover,
.ice-page-wrap .demo-submit-btn:hover {
    background-color: #0d47a1 !important;
    background-image: none !important;
}

/* ================================================================
   RESPONSIVE — exactly as ICE_2.html behaves at smaller screens
   ================================================================ */

@media (max-width: 1199px) {
    .ice-page-wrap .content-wrapper {
        padding: 0 24px !important;
    }
}

@media (max-width: 991px) {
    .ice-page-wrap .rm-title {
        font-size: 42px !important;
    }
    .ice-page-wrap .banner-info.ice-hero {
        padding: 24px 0 40px 0 !important;
    }
    .ice-page-wrap .hub-center-circle {
        width: 200px !important;
        height: 200px !important;
    }
    .ice-page-wrap .internal-card-title {
        font-size: 28px !important;
        margin-bottom: 32px !important;
    }
}

@media (max-width: 767px) {
    .ice-page-wrap .content-wrapper {
        padding: 0 16px !important;
    }
    .ice-page-wrap .rm-title {
        font-size: 32px !important;
    }
    .ice-page-wrap .banner-info.ice-hero {
        padding: 20px 0 36px 0 !important;
    }
    .ice-page-wrap .special-heading span,
    .ice-page-wrap .for-whom-title,
    .ice-page-wrap .salient-title-dark,
    .ice-page-wrap .internal-card-title {
        font-size: 26px !important;
    }
    .ice-page-wrap .section-title-dark,
    .ice-page-wrap .demo-form-card h2 {
        font-size: 22px !important;
    }
    .ice-page-wrap .glass-card {
        padding: 24px 18px !important;
    }
    .ice-page-wrap .demo-form-card {
        padding: 22px 16px !important;
    }
    .ice-page-wrap .hub-center-circle {
        width: 160px !important;
        height: 160px !important;
    }
    .ice-page-wrap .feature-pill {
        font-size: 13px !important;
        padding: 10px 18px !important;
    }
    .ice-page-wrap .pill-cluster {
        gap: 10px !important;
    }
    /* module grid: 2 cols on mobile */
    .ice-page-wrap .list-area .col-4 {
        width: 50% !important;
    }
    .ice-page-wrap .otp-box {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .ice-page-wrap .rm-title {
        font-size: 26px !important;
    }
    .ice-page-wrap .special-heading span,
    .ice-page-wrap .for-whom-title,
    .ice-page-wrap .salient-title-dark {
        font-size: 22px !important;
    }
    .ice-page-wrap .hub-center-circle {
        width: 130px !important;
        height: 130px !important;
    }
    .ice-page-wrap .module-icon-img {
        height: 40px !important;
    }
    .ice-page-wrap .module-label {
        font-size: 11px !important;
    }
    .ice-page-wrap .feature-pill {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}

/* ================= PROCESS SECTION ================= */

.proc-grid-section {
    padding: 70px 0;
}

/* Adds 10px spacing between the process rows */
.proc-grid-section .row:not(:last-of-type) {
    margin-bottom: 10px;
}

.proc-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
}

.proc-card-fixed {
    padding: 14px 12px !important;
    min-height: 55px;
}

.proc-card-fixed h4 {
    font-size: 15px;
}

.proc-card-fixed:hover {
    transform: translateY(-4px);
}

.proc-card-fixed.active {
    border: 1px solid #4F9FFF;
    box-shadow: 0 0 20px rgba(79, 159, 255, 0.2);
}

/* Dropdown Panel */
.proc-dropdown-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border-radius: 14px;
    padding: 30px;
    margin: 30px 0;
    display: none;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mini-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.mini-pills .feature-pill {
    font-size: 12px !important;
    padding: 6px 14px !important;
}

/* ─────────────────────────────────────────
   9. FINAL CTA
───────────────────────────────────────── */

.final-ctaa {
    background: #ffffff;
    padding: 20px 0;
}

.ctaa-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.ctaa-text {
    width: 50%;
}

.ctaa-heading {
    color: #0d47a1;
    font-size: 28px;
    font-weight: 700;
}

.ctaa-btn {
    margin-top: 20px;
}

.ctaa-image {
    width: 50%;
    text-align: right;
}

.ctaa-image img {
    max-width: 100%;
    height: auto;
    filter: contrast(1.5);
}


/* ─────────────────────────────────────────
   10. CONTENT WRAPPER (shared layout helper)
───────────────────────────────────────── */

.content-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}


/* ─────────────────────────────────────────
   11. RESPONSIVE
───────────────────────────────────────── */

@media (max-width: 991px) {
    .hero-inner {
        flex-direction: column;
        gap: 40px;
    }

    .hero-left,
    .hero-right {
        width: 100%;
        margin-left: 0;
    }

    .hero-right {
        align-items: center;
    }

    .ctaa-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .ctaa-text,
    .ctaa-image {
        width: 100%;
        text-align: center;
    }

    .track-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .it-hero {
        padding: 60px 0;
    }

    .hero-left h1 {
        font-size: 36px;
    }

    .service-premium-card {
        padding: 40px 25px;
        min-height: auto;
        margin-bottom: 10px;
    }

    .pillar-reveal-card {
        padding: 30px 20px;
    }

    .engagement-panel {
        padding: 40px 25px;
    }

    .engagement-panel h3 {
        font-size: 28px;
    }

    .engagement-panel ul li {
        font-size: 16px;
    }

    .engagement-tabs {
        gap: 12px;
    }

    .eng-tab {
        padding: 12px 24px;
        font-size: 14px;
    }

    .it-header {
        font-size: 24px;
    }

    .global-map-section,
    .why-choose-section {
        padding: 60px 0;
    }

    .content-wrapper {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .outline-btn {
        padding: 10px 24px;
    }
}