html {
    scroll-behavior: smooth;
}
#section-hero{
    position: relative;
    overflow: hidden;
}

.hero-bg-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Keep overlays/content above video
#section-hero .gradient-edge-top,
#section-hero .gradient-edge-bottom,
#section-hero .sw-overlay,
#section-hero .abs{
    position: relative;
    z-index: 2;
} */


#scrollTopBtn{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    background: #0590fb;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(118, 77, 240, 0.35);
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#scrollTopBtn.show{
    opacity: 1;
    visibility: visible;
}

#scrollTopBtn:hover{
    transform: translateY(-4px);
}

.gradient-edge-top.color {
    background: linear-gradient(180deg, rgb(0 115 186) 0%, rgba(var(--primary-color-rgb), 0) 100%);
}
.id-color{
    color: #017ec4!important;
}
#mainmenu li a:before{
    background: #298deb;
}
h1.banner-content{
    font-size: 80px;
    font-weight: 900;
    letter-spacing: unset;
    /* position: relative;
    left: -135px; */
    width: 645px;
}
h4.banner-text{
    /* position: relative;
    right: -150px; */
    font-size: 25px;
}
/* p.banner-info{
    position: relative;
    right: -150px;
} */

/* */
header.no-transparent{
    background: #1014357d;
}
header.smaller #logo{
    background: unset;
}
header .menu_side-area{
    display: none!important;
}


/* Floating image motion */
.floating-image {
    animation: floatUpDown 6s ease-in-out infinite;
}

/* App button animation */
.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,18%);
    color: #fff;
    transition: all 0.3s ease;
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.app-btn:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.12);
}

.sw-overlay {
   
    background: linear-gradient(0deg, rgba(var(--bg-dark-1-rgb), .8) 0%, rgb(16 20 53) 50%)!important;
}
/* Footer spacing */
footer {
    padding-top: 60px;
    padding-bottom: 30px;
    position: relative;
}

/* Warning box */
footer .footer-warning {
    padding: 35px 30px 22px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* Risk badge */
footer .footer-warning h5 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #fff;
}

footer .footer-warning h5 span {
    background: #764DF0;
    padding: 8px 14px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Footer text */
footer .footer-warning p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255,255,255,0.72);
    margin-bottom: 15px;
}

/* Copyright */
.copyright-text {
    margin: 0;
    color: rgba(255,255,255,0.65);
    font-size: 14px;
}

/* Social section */
.social-media-list {
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.social-media-list a {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.social-media-list a i {
    font-size: 18px;
    position: relative;
    top: 1px;
}

.social-media-list a:hover {
    color: #764DF0;
    transform: translateY(-2px);
}

/* Small utilities */
.uk-text-uppercase {
    text-transform: uppercase !important;
}

.uk-text-small {
    font-size: 0.82rem;
    line-height: 1.8;
}

/* Mobile */
@media (max-width: 768px) {

    .copyright-text,
    .social-media-list {
        text-align: center;
        justify-content: center;
    }

    .social-media-list {
        margin-top: 15px;
    }

    footer .footer-warning {
        padding: 28px 22px 18px;
    }
}
.contact-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 35px 25px;
    border-radius: 14px;
    text-align: center;
    transition: all 0.4s ease;
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;

    /* ADD THESE */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
}

.contact-card .icon-box {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(118, 77, 240, 0.15);
    color: #764DF0;
    font-size: 28px;
}

.contact-card h4 {
    margin-bottom: 8px;
    font-size: 20px;
}

.contact-card p {
    margin-bottom: 5px;
    opacity: 0.9;
}

.contact-card small {
    opacity: 0.6;
}
/* IB image */
.ib-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    animation: floatUpDown 6s ease-in-out infinite;
}

.ib-image-wrap img {
    transition: transform .5s ease;
}

.ib-image-wrap:hover img {
    transform: scale(1.05);
}

/* Main card */
.ib-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(12px);
}

/* Feature item */
.ib-feature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    transition: all .3s ease;
}

.ib-feature:hover {
    transform: translateX(6px);
}

/* Icon */
.ib-feature i {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: rgba(118,77,240,0.15);
    color: #764DF0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Text */
.ib-feature span {
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    font-size: 15px;
}

/* Button */
.btn-main {
    display: inline-block;
    background: #764DF0;
    color: #fff;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .3s ease;
}

.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(118,77,240,0.35);
    color: #fff;
}

/* Floating animation */
@keyframes floatUpDown {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* Mobile */
@media(max-width:768px){

    .ib-card {
        padding: 28px 22px;
    }

    .ib-feature {
        gap: 14px;
    }

    .ib-feature i {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 17px;
    }

}


/* Terminal image */
.terminal-image {
    overflow: hidden;
    border-radius: 20px;
    animation: floatUpDown 6s ease-in-out infinite;
}

.terminal-image img {
    transition: transform .5s ease;
}

.terminal-image:hover img {
    transform: scale(1.05);
}

/* Main card */
.terminal-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(12px);
}

/* Feature */
.terminal-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 18px;
    height: 100%;
    transition: all .3s ease;
}

.terminal-feature:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}

/* Icon */
.terminal-feature i {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: rgba(118,77,240,0.15);
    color: #764DF0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Text */
.terminal-feature span {
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    font-size: 14px;
}

/* Button */
.btn-main {
    display: inline-block;
    background: #764DF0;
    color: #fff;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .3s ease;
}

.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(118,77,240,0.35);
    color: #fff;
}

/* Floating */
@keyframes floatUpDown {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* Mobile */
@media(max-width:768px){

    .terminal-card {
        padding: 24px;
    }

    .terminal-feature {
        padding: 15px;
    }

    .terminal-feature i {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 16px;
    }

}
.round-image{
    width: 500px!important;
    height: 500px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #00e5ff;
    box-shadow: 0 0 30px rgba(0,229,255,0.6);
}


@media (max-width: 768px) {
    #section-hero{
        min-height: 500px;
    }
    h1.banner-content{
        font-size: 35px;
        width: unset;
    }
    h4.banner-text {
        font-size: 15px;
    }
    p.banner-info {
        font-size: 12px;
    }
    .abs-centered {
        top: 65%!important;
    }
    #section-about .py-5.my-5{
        padding-top: unset !important;
        padding-bottom: unset !important;
    }
    .floating-image img{
        width: 345px!important;
    }
    .floating-img-text h3{
        font-size: 18px;
    }
   
    .about-content{
        padding-top: unset!important;
        padding-bottom: unset!important;
    }
    .round-image{
        width: 250px !important;
        height: 250px;
        margin-left: 30px;
        margin-bottom: 15px;
    }
    .floating-img-text .app-btn{
        padding: 3px 8px;
        font-size: 15px;
    }
    .contact-card{
        margin-bottom: 10px;
    }
    
    
    .hamburger{
        display:flex;
        z-index:9999;
    }
    header .menu_side-area{
        display: block!important;
    }

    #logo img{
        max-width:220px !important;
    }
    #menu-btn{
        margin-top: 10px!important;
    }


}



.hamburger{
    display:none;
    flex-direction:column;
    cursor:pointer;
    width:30px;
}

.hamburger span{
    height:3px;
    background:#fff;
    margin:4px 0;
    border-radius:5px;
    transition:.3s;
}

















@keyframes floatUpDown {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Glow background */
@keyframes floatGlow {
    0% { transform: translate(0,0) scale(1); opacity: .4; }
    50% { transform: translate(40px,40px) scale(1.2); opacity: .6; }
    100% { transform: translate(0,0) scale(1); opacity: .4; }
}

/* ---------------------------------------------------------------
   Typography refinement.

   The theme declares its whole type scale as custom properties on
   the universal selector, so the site can be retuned here instead
   of rule by rule. custom.css loads after style.css, so an equally
   specific `*` block later in the cascade wins.
--------------------------------------------------------------- */
* {
    --body-font-size: 15px;
    --body-font-weight: 400;

    --h1-font-size: 44px;
    --h1-line-height: 1.2em;
    --h1-letter-spacing: -0.022em;

    --h2-font-size: 34px;
    --h2-line-height: 1.22em;
    --h2-letter-spacing: -0.018em;

    --h3-font-size: 22px;
    --h3-line-height: 1.45em;
    --h3-letter-spacing: -0.01em;

    --h4-font-size: 18px;
    --h4-line-height: 1.55em;

    --h5-font-size: 16px;
    --h5-line-height: 1.55em;

    --h6-font-size: 14px;
    --h6-line-height: 1.55em;

    --mainmenu-font-size: 14px;

    /* The header was exactly as tall as the logo - 85px of logo in an
       85px bar, with no breathing room. The markup used to force this
       inline; it now comes from the theme's own variable. */
    --logo-width: 200px;
}

body {
    line-height: 1.7em;
    /* Light text on the dark sections renders heavy and slightly blurred
       without this; it is the single biggest legibility win here. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Slightly brighter body copy on the dark sections. The theme's .75 alpha
   sits under the 4.5:1 contrast mark against #101435 once the text is small. */
* {
    --body-font-color-dark: rgba(255, 255, 255, .82);
}

/* The hero is sized explicitly, so it does not inherit the scale above. */
h1.banner-content {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.12em;
    letter-spacing: -0.025em;
    width: auto;
    max-width: 620px;
}

h4.banner-text {
    font-size: 19px;
    line-height: 1.5em;
}

@media (max-width: 768px) {
    h1.banner-content {
        font-size: 30px;
        line-height: 1.18em;
        max-width: 100%;
    }

    h4.banner-text {
        font-size: 16px;
    }
}

/* The hero copy sat in a centred parent. With the justification removed it
   inherited that centring, which fought the left-aligned headline beside it. */
h4.banner-text,
p.banner-info {
    text-align: left;
}

/* The scale above is tuned for desktop; headings need a step down before the
   columns stack, or h1/h2 crowd a phone screen. */
@media (max-width: 768px) {
    * {
        --h1-font-size: 32px;
        --h2-font-size: 27px;
        --h3-font-size: 20px;
        --h4-font-size: 17px;
        --logo-width: 150px;
    }

    /* The base sheet pins this with !important, so match it to win. */
    #logo img {
        max-width: 150px !important;
    }
}

/* ---------------------------------------------------------------------------
   Header logo lockup
   The old tradelogo1.png carried the wordmark inside the image, so renaming
   the company meant re-exporting artwork. The icon is now cropped out on its
   (tw-mark.png) and the name is live text, set to sit on the dark
   header. Sizes key off --logo-width so the existing responsive step still
   drives the lockup.
   --------------------------------------------------------------------------- */
#logo .logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* The base sheet pins #logo img with max-width: var(--logo-width); the icon is
   sized by height instead, so that cap has to be lifted for this one image. */
#logo .logo-lockup .logo-icon {
    max-width: none !important;
    width: auto;
    height: 52px;
    flex: 0 0 auto;
}

#logo .logo-wordmark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Cancels the 65px line-height the theme sets on #logo for image logos,
       which would otherwise push the two lines far apart. */
    line-height: 1;
    white-space: nowrap;
}

#logo .logo-wordmark-1 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: #ffffff;
}

/* Letter-spaced to run out to roughly the width of the line above, which is
   what makes the two lines read as one wordmark rather than a stacked pair. */
#logo .logo-wordmark-2 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.3em;
    text-transform: uppercase;
    color: #4da3ff;
    margin-top: 4px;
    /* The trailing letter-space would otherwise shift the line left of centre. */
    text-indent: 1.3em;
}

@media (max-width: 768px) {
    #logo .logo-lockup {
        gap: 9px;
    }

    #logo .logo-lockup .logo-icon {
        height: 40px;
    }

    #logo .logo-wordmark-1 {
        font-size: 16px;
    }

    #logo .logo-wordmark-2 {
        font-size: 9.5px;
        letter-spacing: 1.25em;
        text-indent: 1.25em;
        margin-top: 3px;
    }
}

/* ---------------------------------------------------------------------------
   Certificate of incorporation card (About section)
   Sits on the dark About panel, so it is built from a translucent white wash
   rather than a solid fill - a solid card would read as a hole in the section.
   --------------------------------------------------------------------------- */
.cert-card {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
    padding: 14px;
    max-width: 480px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    text-decoration: none;
    transition: border-color .25s, background .25s, transform .25s;
}

.cert-card:hover,
.cert-card:focus-visible {
    border-color: rgba(77, 163, 255, .55);
    background: rgba(255, 255, 255, .07);
    transform: translateY(-2px);
}

/* The scan is a pale document; the border keeps it from bleeding into the card. */
.cert-card-thumb {
    width: 104px;
    height: auto;
    flex: 0 0 auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .18);
}

.cert-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cert-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.cert-card-meta {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
}

.cert-card-cta {
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #4da3ff;
}

.cert-card-cta::after {
    content: " \2192";
}

@media (max-width: 575px) {
    .cert-card {
        gap: 14px;
        padding: 12px;
    }

    .cert-card-thumb {
        width: 78px;
    }

    .cert-card-title {
        font-size: 15px;
    }
}

/* ---------------------------------------------------------------------------
   Header actions: Login beside Open Account
   Login is outlined so Open Account stays the primary call to action. The
   theme hides header .btn-main below 768px; phones get Login from the menu.
   --------------------------------------------------------------------------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-main.btn-login {
    background: transparent;
    color: #fff;
    /* An inset shadow rather than a border: it takes no space, so Login keeps
       exactly the theme's header button size and lines up with Open Account. */
    box-shadow: inset 0 0 0 2px #764DF0;
}

.btn-main.btn-login:hover {
    background: rgba(118, 77, 240, 0.18);
    color: #fff;
    box-shadow: inset 0 0 0 2px #764DF0, 0 10px 30px rgba(118, 77, 240, 0.35);
}