/*=========================================
    WMH HERO SECTION
=========================================*/

.wmh-hero{
    position:relative;
    /*background:linear-gradient(135deg,#071B47 0%,#102C75 55%,#1A3F9C 100%);*/
    overflow:hidden;
    padding-top:180px;
    padding-bottom:220px;
}

/* Background */

.hero-grid{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:60px 60px;
    opacity:.15;
}

.hero-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
}

.hero-circle-1{
    width:450px;
    height:450px;
    background:#3A31A4;
    top:-120px;
    left:-120px;
    opacity:.08;
}

.hero-circle-2{
    width:350px;
    height:350px;
    background:#4ec8ff;
    right:-120px;
    bottom:-120px;
    opacity:.25;
}

/* LEFT CONTENT */

.hero-content{
    /*position:relative;*/
    z-index:2;
}

.hero-tag{
    color:#7fd7ff;
    letter-spacing:3px;
    font-size:15px;
    font-weight:600;
    display:flex;
    align-items:center;
    text-transform:uppercase;
}

.tag-line{
    width:45px;
    height:3px;
    background:#4ec8ff;
    margin-right:15px;
    border-radius:30px;
}

.hero-title{
    color:#333333;
    font-size:60px;
    line-height:1.08;
    font-weight:800;
}

.hero-title span{
    background:linear-gradient(90deg,#45D5FF,#6E84FF);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-description{
    color: #333333;
    font-size:18px;
    line-height:1.9;
    max-width:620px;
}

/* BUTTONS */

.hero-buttons{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

.hero-btn-primary{
    background:linear-gradient(135deg,#3A31A4,#6D7BFF);
    color:#fff;
    padding:15px 34px;
    border-radius:50px;
    font-weight:600;
    transition:.35s;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.hero-btn-primary:hover{
    transform:translateY(-4px);
    color:#fff;
}

.hero-btn-outline{
    border:2px solid rgba(255,255,255,.25);
    color:#fff;
    padding:15px 34px;
    border-radius:50px;
    transition:.35s;
}

.hero-btn-outline:hover{
    background:#fff;
    color:#102C75;
}

/* RIGHT IMAGE */

.hero-image-wrapper{
    /*position:relative;*/
    text-align:center;
    z-index:2;
}

.hero-main-image{
    width:90%;
    animation:floatImage 6s ease-in-out infinite;
}

/* FLOATING ICONS */

.floating-icon{
    position:absolute;
    width:75px;
    height:75px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    border-radius:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 20px 40px rgba(0,0,0,.20);
    animation:floatIcon 5s ease-in-out infinite;
}

.floating-icon img{
    width:48px;
}

.icon1{
    top:10%;
    left:15%;
}

.icon2{
    bottom:18%;
    left:8%;
}

.icon3{
    top:22%;
    right:10%;
}

.icon4{
    bottom:10%;
    right:15%;
}

/* FLOATING GLASS CARD */

.hero-slider-wrapper{
    position:relative;
    left:0;
    right:0;
    bottom:50px;
    z-index:5;
}

.glass-card{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:30px;

    padding:45px;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.slide-number{

    font-size:70px;

    font-weight:800;

    background:linear-gradient(180deg,#5bd7ff,#5f6dff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.glass-card h3{

    color:#fff;

    font-size:34px;

    font-weight:700;

}

.glass-card p{

    color:rgba(255,255,255,.82);

    line-height:1.8;

    margin-top:15px;

    font-size:17px;

}

/* Indicators */

.carousel-indicators{

    bottom:-55px;

}

.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#fff;

    opacity:.4;

}

.carousel-indicators .active{

    opacity:1;

    background:#49D2FF;

}

/* Animations */

@keyframes floatImage{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

@keyframes floatIcon{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}

/* Responsive */

@media(max-width:991px){

.wmh-hero{

padding-top:100px;

padding-bottom:180px;

}

.hero-title{

font-size:46px;

}

.hero-description{

font-size:16px;

}

.hero-image-wrapper{

margin-top:60px;

}

.hero-slider-wrapper{

position:relative;

margin-top:50px;

bottom:0;

}

.glass-card{

padding:30px;

}

.slide-number{

font-size:50px;

}

.glass-card h3{

font-size:24px;

}

}

@media(max-width:576px){

.hero-title{

font-size:36px;

}

.hero-buttons{

flex-direction:column;

align-items:flex-start;

}

.hero-btn-outline{

margin-left:0 !important;

margin-top:15px;

}

.hero-tag{

font-size:13px;

}

.floating-icon{

width:58px;

height:58px;

}

.floating-icon img{

width:34px;

}

}
.hero-content,
.hero-image-wrapper,
.glass-card{

opacity:0;

transform:translateY(40px);

transition:all .9s ease;

}

.show-element{

opacity:1;

transform:translateY(0);

}

.floating-icon{

transition:.35s;

cursor:pointer;

}

.floating-icon:hover{

transform:translateY(-10px) scale(1.08);

box-shadow:0 30px 60px rgba(0,0,0,.35);

}

.hero-main-image{

transition:transform .4s ease;

}

.hero-btn-primary{

position:relative;

overflow:hidden;

}

/*.hero-btn-primary:before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transition:.7s;

}

.hero-btn-primary:hover:before{

left:100%;

}

.glass-card{

transition:.35s;

}*/

.glass-card:hover{

transform:translateY(-8px);

box-shadow:0 35px 70px rgba(0,0,0,.35);

}

/*=========================================================================
    WE.MIGRATIONHUB INNER PAGE — ADDITIONAL ENHANCEMENTS
    Added on top of the rules above. Kept in this file (not inline in the
    page) so it lives alongside the rest of the WMH styling. Every color
    here reuses the palette already defined above and in styles.css:
    #043873 (brand blue), #0a2142 / #0d2a5a (footer navy),
    #E93A7D (CTA magenta), #45D5FF -> #6E84FF (hero gradient).
==========================================================================*/

/* ---- page title band: subtle grid texture to echo the hero ---- */
.page-title-section{ position:relative; overflow:hidden; }
.page-title-section::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:46px 46px;
    opacity:.5;
}
.page-title-section .container{ position:relative; z-index:1; }

/* ---- hero buttons: breathing room without inline margins ---- */
.hero-buttons{ gap:18px; }
.hero-buttons a{ margin:0 !important; }

/* ---- slider head: progress bar + nav controls above the card ---- */
.wmh-slider-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:24px;
    position:relative;
    z-index:3;
}

.wmh-progress{
    position:static;
    margin:0;
    display:flex;
    gap:8px;
}
.wmh-progress li{
    width:30px;
    height:4px;
    border-radius:3px;
    background:rgba(255,255,255,.22);
    opacity:1;
    text-indent:-9999px;
    cursor:pointer;
    transition:.3s ease;
}
.wmh-progress li.active{
    width:42px;
    background:linear-gradient(90deg,#45D5FF,#6E84FF);
}

.wmh-slider-nav{ display:flex; gap:10px; }
.wmh-slider-nav .carousel-control-prev,
.wmh-slider-nav .carousel-control-next{
    position:static;
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
}
.wmh-slider-nav .carousel-control-prev:hover,
.wmh-slider-nav .carousel-control-next:hover{
    background:#fff;
}
.wmh-arrow-ic{
    display:inline-block;
    width:9px;
    height:9px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transition:border-color .25s ease;
}
.wmh-arrow-left{ transform:rotate(-135deg); margin-left:4px; }
.wmh-arrow-right{ transform:rotate(45deg); margin-right:4px; }
.wmh-slider-nav .carousel-control-prev:hover .wmh-arrow-ic,
.wmh-slider-nav .carousel-control-next:hover .wmh-arrow-ic{
    border-color:#102C75;
}

/* ---- glass-card: sleeker layout, badge instead of an oversized number ---- */
.hero-slider-wrapper{ max-width:980px; margin:0 auto; left:0; right:0; }

.glass-card{
    display:flex;
    align-items:center;
    gap:36px;
    padding:38px 46px;
    position:relative;
    overflow:hidden;
    background: #043873;
}
.glass-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg,#45D5FF,#6E84FF);
}
.wmh-slide-badge{
    flex:none;
    width:84px;
    height:84px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.05);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.wmh-slide-badge .slide-number{
    font-size:28px;
    line-height:1;
    margin:0;
}
.wmh-slide-total{
    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
    color:rgba(255,255,255,.5);
    margin-top:5px;
}
.glass-card h3{ font-size:24px; margin-bottom:8px; }
.glass-card p{ font-size:14.5px; margin-top:0; max-width:640px; }

@media (max-width:767px){
    .glass-card{ flex-direction:column; text-align:center; gap:16px; padding:30px 26px; }
    .wmh-slide-badge{ width:70px; height:70px; }
}

/* ---- scroll-reveal utility used across the rest of the page ---- */
.wmh-reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .6s ease, transform .6s ease;
}
.wmh-reveal.wmh-in{
    opacity:1;
    transform:translateY(0);
}

/* ---- reusable section eyebrow (light backgrounds) ---- */
.wmh-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#043873;
    margin-bottom:14px;
}
.wmh-eyebrow-line{
    width:32px;
    height:2px;
    background:#043873;
    border-radius:2px;
    display:inline-block;
}

/* ---- why choose cards ---- */
.wmh-choose-card{
    position:relative;
    border:1px solid #e7ebf2;
    border-radius:16px;
    padding:32px 28px;
    height:100%;
    background:#fff;
    overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease;
}
.wmh-choose-card::before{
    content:"";
    position:absolute;
    left:0; top:0;
    width:4px; height:100%;
    background:linear-gradient(180deg,#043873,#3A31A4);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .35s ease;
}
.wmh-choose-card:hover::before{ transform:scaleY(1); }
.wmh-choose-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 50px -28px rgba(4,56,115,.4);
}
.wmh-choose-icon{
    width:56px;
    height:56px;
    border-radius:14px;
    background:#eef3fb;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}
.wmh-choose-icon img{ width:28px; height:28px; margin:0; }
.wmh-choose-card h5{ color:#043873; font-weight:700; font-size:17px; margin-bottom:8px; }

/* ---- key features ---- */
.wmh-feature-item{
    display:flex;
    gap:16px;
    margin-bottom:10px;
    padding:16px 18px;
    border-radius:14px;
    transition:background .25s ease;
}
.wmh-feature-item:hover{ background:#f5f7fb; }
.wmh-feature-icon{
    flex:none;
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,#043873,#3A31A4);
    display:flex;
    align-items:center;
    justify-content:center;
}
.wmh-feature-icon svg{ width:19px; height:19px; }
.wmh-feature-item h6{ color:#043873; font-weight:700; margin-bottom:4px; font-size:15px; }
.wmh-feature-item p{ margin:0; color:#5b6472; font-size:13.5px; line-height:1.6; }

.wmh-feature-visual{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 30px 60px -30px rgba(4,56,115,.35);
}
.wmh-feature-visual::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    box-shadow:inset 0 0 0 1px rgba(4,56,115,.08);
}

/* ---- final cta band ---- */
.wmh-cta-band{ position:relative; overflow:hidden; }
.wmh-cta-band::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:52px 52px;
    opacity:.5;
}
.wmh-cta-band .container{ position:relative; z-index:1; }

.wmh-duo-card{
    position:relative;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;
    padding:38px;
    height:100%;
    backdrop-filter:blur(14px);
    transition:transform .3s ease, border-color .3s ease;
}
.wmh-duo-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.32);
}
.wmh-duo-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}
.wmh-duo-icon img{ width:28px; }
.wmh-duo-card h5{ color:#fff; font-weight:700; font-size:20px; margin-bottom:12px; }
.wmh-duo-card p{ color:rgba(255,255,255,.78); font-size:14.5px; line-height:1.7; margin-bottom:24px; }

/* ---- general section rhythm on this page ---- */
.wmh-page section{ padding:50px 0; }
.wmh-page .container-tight{ max-width:700px; margin:0 auto; }
@media (max-width:767px){ .wmh-page section{ padding:52px 0; } }


/*=========================================================================
    WE.MIGRATIONHUB INNER PAGE — REFINED ELEGANCE PASS
    (Carousel/glass-card rules above are left untouched per request.)
    These rules come last, so they take over from the equivalent rules
    higher up in this file for the same selectors.
==========================================================================*/

/* ---- section intro typography ---- */
.wmh-page .container-tight h2{
    font-size:34px;
    font-weight:700;
    color:#0d2340;
    letter-spacing:-.02em;
    margin:14px 0 16px;
}
.wmh-page .container-tight p{
    color:#5b6472;
    font-size:15.5px;
    line-height:1.85;
}
.wmh-cta-band .container-tight h2{ color:#fff; }

.wmh-section-rule{
    display:block;
    width:60px;
    height:3px;
    border-radius:3px;
    background:linear-gradient(90deg,#043873,#3A31A4);
    margin:24px auto 0;
}
.wmh-section-rule.wmh-rule-light{
    background:linear-gradient(90deg,#7fd7ff,#6E84FF);
}

/* ---- why choose: editorial card ---- */
.wmh-choose-card{
    border:1px solid #e8ebf2;
    border-radius:18px;
    padding:20px 30px 20px 30px;
    background:#fff;
    position:relative;
    height:100%;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.wmh-choose-card::before{ content:none; }
.wmh-choose-card::after{
    content:"";
    position:absolute;
    left:34px; right:34px; bottom:0;
    height:2px;
    background:linear-gradient(90deg,#043873,#3A31A4);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .45s ease;
}
.wmh-choose-card:hover::after{ transform:scaleX(1); }
.wmh-choose-card:hover{
    transform:translateY(-6px);
    border-color:#dfe4ee;
    box-shadow:0 34px 64px -38px rgba(4,56,115,.4);
}
.wmh-choose-index{
    position:absolute;
    top:30px; right:32px;
    font-size:40px;
    font-weight:700;
    letter-spacing:1px;
    color:#d3d9e6;
}
.wmh-choose-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#eef3fb;
    border:1px solid #dde6f3;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    transition:transform .35s ease, background .35s ease;
}
.wmh-choose-card:hover .wmh-choose-icon{
    transform:scale(1.07);
    background:#e4ebf8;
}
.wmh-choose-icon img{ width:40px; height:40px; margin:0; }
.wmh-choose-card h5{
    font-size:18px;
    font-weight:700;
    color:#0d2340;
    letter-spacing:-.01em;
    margin-bottom:10px;
}
.wmh-choose-card p{ color:#5b6472; line-height:1.75; }

/* ---- key features: framed visual + divider list ---- */
.wmh-feature-visual{
    background:     #043873;
    border-radius:24px;
    padding:26px;
    box-shadow:0 40px 80px -42px rgba(4,56,115,.4);
}
.wmh-feature-visual img{ border-radius:14px; width:100%; }
.wmh-feature-visual::after{ content:none; }

.wmh-feature-item{
    display:flex;
    gap:18px;
    padding:24px 4px;
    border-bottom:1px solid #eef0f5;
    border-radius:0;
    background:transparent;
    transition:none;
    align-items:flex-start;
}
.wmh-feature-item:hover{ background:transparent; }
.wmh-feature-col:nth-last-child(-n+2) .wmh-feature-item{
    border-bottom:none;
    padding-bottom:4px;
}
.wmh-feature-icon{
    flex:none;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#eef3fb;
    border:1px solid #dde6f3;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#043873;
}
.wmh-feature-icon svg{ width:21px; height:21px; }
.wmh-feature-item h6{
    color:#0d2340;
    font-weight:700;
    font-size:18px;
    margin-bottom:6px;
}
.wmh-feature-item p{
    color:#5b6472;
    font-size:14px;
    line-height:1.75;
}

/* ---- final cta band: refined panels ---- */
.wmh-duo-card{
    border-radius:22px;
    padding:44px 40px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
}
.wmh-duo-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
}
.wmh-duo-card h5{ font-size:22px; margin-bottom:14px; }
.wmh-duo-card p{ font-size:15px; line-height:1.85; }


/*=========================================================================
    WE.MIGRATIONHUB INNER PAGE — BUG FIXES
    1) The carousel's control row pushed the glass-card taller than the
       hero's reserved bottom padding, so it rode up over the headline
       and the Request Demo button. Switching the slider wrapper to
       normal document flow (like the existing <991px rule already did)
       fixes the overlap at every screen size.
    2) .wmh-cta-band lost its actual background color/gradient when the
       inline <style> block was moved into this file — it was left
       transparent, so the white heading/card text was invisible against
       the page's white background. Restoring it here.
==========================================================================*/

.hero-slider-wrapper{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:60px;
}
.wmh-hero{
    padding-bottom:100px;
}
@media (max-width:991px){
    .hero-slider-wrapper{ margin-top:40px; }
}

.wmh-cta-band{
    background:linear-gradient(135deg,#071B47 0%,#102C75 55%,#1A3F9C 100%);
}