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;
    }
}