:root {
    --primary: #081C4B;
    --secondary: #0D2A68;
    --gold: #d7b56d;
    --white: #ffffff;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    color: #13244E;
}

a { text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }



/* ================= TOP HEADER ================= */
.top-header {
    background: linear-gradient(90deg, #244082 0%, #244082 45%, #244082 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 8px 0;
}

.top-header-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-center {
    width: 100%;
    overflow: hidden;
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee span {
    display: inline-block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding-left: 100%;
    animation: marquee 18s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ================= HEADER ================= */
.header-area {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: linear-gradient(90deg, #244082 0%, #244082 45%, #244082 100%);
    padding: 14px 0;
    box-shadow: 0 8px 25px rgba(0,0,0,.15);
    transition: all .35s ease;
}

.header-area.scrolled {
    padding: 8px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ================= NAVBAR ================= */
.navbar {
    padding: 0;
    min-height: 85px;
}

 

.navbar-brand img {
    width: 170px;
    height: auto;
    transition: .35s;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

/* Toggler Button */
.navbar-toggler {
    border: 1px solid rgba(255,255,255,.3);
    padding: 8px 12px;
    position: relative;
    z-index: 10001;
    cursor: pointer;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.navbar-toggler.is-active .navbar-toggler-icon {
    transform: rotate(90deg);
}

/* ================= NAV LINKS ================= */
.nav-link {
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 14px !important;
    transition: .35s;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: #d7b56d !important;
}

.nav-item {
    position: relative;
}

.nav-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 2px;
    background: #d7b56d;
    transform: translateX(-50%);
    transition: .35s;
}

.nav-item:hover::after {
    width: 70%;
}

/* ================= HEADER RIGHT ================= */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 20px;
}

/* Search Box */
.search-box {
    width: 290px;
    height: 48px;
    display: flex;
    align-items: center;
    background: #244082;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50px;
    overflow: hidden;
    transition: all .35s ease;
}

.search-box:hover,
.search-box:focus-within {
    border-color: #d7b56d;
}

.search-box:focus-within {
    box-shadow: 0 0 0 4px rgba(215,181,109,.15);
}

.search-box button {
    width: 50px;
    height: 100%;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
}

.search-box button:hover {
    color: #d7b56d;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    padding-right: 20px;
}

.search-box input::placeholder {
    color: #BFC8DD;
}

/* Login Button */
.login-btn {
    width: 110px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #d7b56d;
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    transition: all .35s ease;
}

.login-btn:hover {
    background: #d7b56d;
    color: #06173D;
}

/* Sign Up Button */
.signup-btn {
    width: 120px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: #d7b56d;
    color: #06173D;
    font-size: 15px;
    font-weight: 700;
    transition: all .35s ease;
    box-shadow: 0 10px 25px rgba(215,181,109,.30);
}

.signup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(215,181,109,.45);
}

/* ================= DESKTOP ONLY (992px+) ================= */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .navbar-nav {
        display: flex;
        align-items: center;
        gap: 5px;
        flex: 1;
        justify-content: center;
    }

    .navbar-toggler {
        display: none;
    }
}

/* ================= TABLET & MOBILE (below 992px) ================= */
@media (max-width: 991.98px) {
    
    .header-area {
        padding: 12px 0;
    }

    .navbar {
        min-height: 70px;
    }

    .navbar-brand img {
        width: 140px;
    }

    /* Mobile Menu Panel */
  /* ===== Animated menu background ===== */
.navbar-collapse {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(120deg, #244082, #1a2f68, #2f55ab, #1a2f68, #244082) !important;
    background-size: 300% 300% !important;
    animation: navGradient 10s ease infinite !important;
    margin-top: 15px !important;
    padding: 20px !important;
    border-radius: 15px !important;
    border: 1px solid #d7b56d !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35),
                0 0 18px rgba(215, 181, 109, 0.25) !important;
}

/* Golden shimmer line on top */
.navbar-collapse::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #f3dfae, #d7b56d, #f3dfae, transparent) !important;
    background-size: 200% 100% !important;
    animation: navShimmer 3s linear infinite !important;
    z-index: 1 !important;
}

/* Soft glowing orb in the corner */
.navbar-collapse::after {
    content: "" !important;
    position: absolute !important;
    right: -60px !important;
    bottom: -60px !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(215, 181, 109, 0.28), transparent 70%) !important;
    animation: navOrb 5s ease-in-out infinite !important;
    pointer-events: none !important;
}

/* Keep menu content above the effects */
.navbar-collapse > * {
    position: relative !important;
    z-index: 2 !important;
}

/* ===== Menu links ===== */
.navbar-collapse .nav-link {
    position: relative !important;
    color: #ffffff !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.navbar-collapse .nav-link::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 4px !important;
    width: 0 !important;
    height: 2px !important;
    background: #d7b56d !important;
    border-radius: 2px !important;
    transition: width 0.35s ease !important;
}

.navbar-collapse .nav-link:hover,
.navbar-collapse .nav-link.active {
    color: #d7b56d !important;
    transform: translateX(4px) !important;
    text-shadow: 0 0 12px rgba(215, 181, 109, 0.5) !important;
}

.navbar-collapse .nav-link:hover::after,
.navbar-collapse .nav-link.active::after {
    width: 100% !important;
}

/* ===== Slide-down when the menu opens ===== */
.navbar-collapse.show {
    animation: navGradient 10s ease infinite,
               navOpen 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ===== Keyframes ===== */
@keyframes navGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes navShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@keyframes navOrb {
    0%, 100% { transform: scale(1);   opacity: 0.7; }
    50%      { transform: scale(1.3); opacity: 1; }
}

@keyframes navOpen {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-collapse,
    .navbar-collapse::before,
    .navbar-collapse::after {
        animation: none !important;
    }
}
    /* Hidden when closed */
    .navbar-collapse.collapse:not(.show) {
        display: none !important;
    }

    /* Visible when open */
    .navbar-collapse.collapse.show {
        display: block !important;
    }

    .navbar-toggler {
        display: block !important;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        margin-bottom: 20px;
    }

    .nav-item::after {
        display: none;
    }

    .nav-link {
        padding: 14px 16px !important;
        border-radius: 10px;
    }

    .nav-link:hover,
    .nav-link.active {
        background: rgba(215,181,109,.1);
    }

    .header-right {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        gap: 12px;
    }

    .search-box {
        width: 100%;
    }

    .login-btn,
    .signup-btn {
        width: 100%;
    }
}

/* ================= MOBILE (below 768px) ================= */
@media (max-width: 767.98px) {
    .top-header {
        display: none;
    }

    .navbar-brand img {
        width: 120px;
    }
}

/* ================= SMALL MOBILE ================= */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .navbar-brand img {
        width: 110px;
    }
}
/*=========================================================
MAIN HERO
=========================================================*/

.hero-section{

    position:relative;
    overflow:hidden;
    min-height:900px;
    display:flex;
    align-items:center;
    padding:120px 0 90px;
    background:url("../img/banner (2).png") center center/cover no-repeat;
    z-index:1;

}

/*=========================================================
DARK OVERLAY
=========================================================*/

.hero-section::before{

    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

}

/*=========================================================
TOP GLOW
=========================================================*/

.hero-section::after{

    content:"";
    position:absolute;
    width:650px;
    height:650px;
    right:-220px;
    top:-150px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(246,178,51,.25),
    transparent 70%);
    z-index:-1;

}

/*=========================================================
GRID PATTERN
=========================================================*/



/*=========================================================
DOTS
=========================================================*/

.hero-particles{

    position:absolute;
    inset:0;
    background-image:
    radial-gradient(#F6B233 1.5px,transparent 1.5px);
    background-size:45px 45px;
    opacity:.08;
    pointer-events:none;

}

/*=========================================================
CONTAINER
=========================================================*/

.hero-section .container{

    position:relative;
    max-width:1320px;
    margin:auto;

    z-index:5;

}

/*=========================================================
LEFT CONTENT
=========================================================*/

.hero-content{
    max-width:600px;
    padding-top:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
}
.hero-section .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:720px;
}

/*=========================================================
BADGE
=========================================================*/

/*=========================================
        PREMIUM ADVISOR BADGE
=========================================*/


/*=========================
Badge Wrapper
=========================*/

.badge-wrapper{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:35px;
}

/*=========================
Premium Badge
=========================*/

.premium-badge{

    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:290px;
    height:60px;
    padding:0 28px;
    border-radius:50px;
    background:linear-gradient(
        135deg,
        #102b63,
        #081d47,
        #102b63
    );

    border:1px solid rgba(215,181,109,.45);
    overflow:hidden;
    cursor:pointer;
    transition:.45s ease;
    animation:float 4s ease-in-out infinite;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 25px rgba(0,0,0,.25);
}

/*=========================
Animated Border Glow
=========================*/



/*=========================
Shine Effect
=========================*/

.premium-badge::before{

    content:"";
    position:absolute;
    top:0;
    left:-150%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:skewX(-25deg);
    animation:shine 4s linear infinite;
}

/*=========================
Icon
=========================*/

.badge-icon{

    font-size:20px;
    color:#FFD34D;
    transition:.5s;
    z-index:2;
}

.badge-text{

    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:.4px;
    color:#fff;
    z-index:2;
    white-space:nowrap;
}

/*=========================
Hover
=========================*/

.premium-badge:hover{

    transform:translateY(-5px) scale(1.04);
    border-color:#FFD34D;
    background:linear-gradient(
        135deg,
        #15387d,
        #0d275d,
        #15387d
    );

    box-shadow:
        0 15px 35px rgba(215,181,109,.30),
        0 0 30px rgba(215,181,109,.25),
        inset 0 1px 0 rgba(255,255,255,.10);

}

.premium-badge:hover .badge-icon{

    transform:rotate(360deg) scale(1.25);

    color:#FFD34D;

}

.premium-badge:hover .badge-text{

    letter-spacing:1px;
}

/*=========================
Glow Pulse
=========================*/

.premium-badge:hover::after{

    animation:borderMove .8s linear infinite;
}

/*=========================
Animations
=========================*/

@keyframes float{

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

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

}

@keyframes shine{

    from{
        left:-150%;
    }

    to{
        left:170%;
    }

}

@keyframes borderMove{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/*=========================
Responsive
=========================*/

@media(max-width:768px){

    .badge-wrapper{
        flex-direction:column;
        align-items:flex-start;
    }

    .premium-badge{
        width:100%;
        min-width:unset;
    }

}

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

@media(max-width:768px){

.advisor-badge{

    width:100%;
    justify-content:flex-start;
    padding:14px 18px;
    font-size:15px;

}

.advisor-badge i{

    width:36px;
    height:36px;
    font-size:16px;

}

.advisor-badge span{

    white-space:normal;

}

}

/*=========================================================
HEADING
=========================================================*/
/* ===============================
Google Fonts
===============================*/

/*
Poppins
Playfair Display
*/

.hero-content{
    max-width:680px;
}

.hero-content h1{

    font-family:'Playfair Display',serif;
    font-size:86px;
    font-weight:800;
    line-height:1.12;
    letter-spacing:-1.5px;
    color:#ffffff;
    margin:30px 0 25px;
}

.hero-content h1 span{
    color:#D9B15D;
}

.hero-content p{

    font-family:'Poppins',sans-serif;
    font-size:20px;
    line-height:34px;
    color:#c9d2e3;
    max-width:620px;
    margin-bottom:40px;
    font-weight:400;
}

/*=========================
Badges
=========================*/

.badge-wrapper{

    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:35px;
}

.premium-badge{

    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 24px;
    border:1px solid rgba(215,181,109,.45);
    border-radius:40px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(12px);
    font-family:'Poppins',sans-serif;
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    transition:.35s;
}

.premium-badge:hover{

    transform:translateY(-3px);
    background:#D9B15D;
    color:#071B3B;
    cursor:pointer;

}

.badge-icon{

    font-size:18px;

}

/*=========================
Buttons
=========================*/

.hero-buttons{

    display:flex;
    gap:20px;
    align-items:center;
    margin-top:20px;
    flex-wrap:wrap;

}

.btn-primary{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 38px;
    background:#D9B15D;
    color:#071B3B;
    text-decoration:none;
    border-radius:50px;
    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight:600;
    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(217,177,93,.35);

}

.btn-secondary{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 38px;
    border:2px solid #D9B15D;
    color:#ffffff;
    text-decoration:none;
    border-radius:50px;
    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight:600;
    transition:.35s;

}

.btn-secondary:hover{

    background:#D9B15D;

    color:#071B3B;

}
/*=========================================================
SMALL CIRCLE
=========================================================*/

.hero-circle{

    position:absolute;
    left:-60px;
    top:-50px;
    width:140px;
    height:140px;
    border-radius:50%;
    border:2px solid rgba(246,178,51,.12);

}

/*=========================================================
LIGHT EFFECT
=========================================================*/

.hero-light{

    position:absolute;
    width:420px;
    height:420px;
    left:-100px;
    bottom:-180px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(246,178,51,.12),
    transparent 70%);

}

/*=========================================================
BOTTOM CURVE
=========================================================*/

.hero-bottom-wave{

    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:120px;
    background:linear-gradient(
    transparent,
    rgba(255,255,255,.02)

    );

}

/*=========================================================
FADE LEFT
=========================================================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
FLOAT
=========================================================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:1200px){

.hero-content h1{

font-size:60px;

}

}

@media(max-width:991px){

.hero-section{

padding:90px 0;
text-align:center;

}

.hero-content{

padding-right:0;

}

.hero-content h1{

font-size:48px;

}

.hero-content p{

margin:auto;

font-size:18px;

line-height:32px;

}

.hero-line{

margin:30px auto;

}

.hero-circle{

display:none;

}

}

@media(max-width:767px){

.hero-section{

padding:70px 0;

min-height:auto;

}

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:16px;
line-height:28px;

}

.advisor-badge{

font-size:14px;
padding:12px 18px;

}

}

@media(max-width:480px){

.hero-content h1{

font-size:30px;
line-height:1.3;

}

.hero-content p{

font-size:15px;

}

}
/*=========================================================
                HERO RIGHT IMAGE
=========================================================*/

.hero-image{

    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:760px;
    animation:fadeRight .9s ease;

}

/*=========================================================
PHONE IMAGE
=========================================================*/

.phone-image{

    width:420px;
    max-width:100%;
    position:relative;
    z-index:15;
    filter:drop-shadow(0 35px 70px rgba(0,0,0,.45));
    animation:phoneFloat 5s ease-in-out infinite;

}

/*=========================================================
PHONE FLOAT
=========================================================*/

@keyframes phoneFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

/*=========================================================
FADE RIGHT
=========================================================*/

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(70px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/*=========================================================
GLOW CIRCLE
=========================================================*/

.hero-image::before{

content:"";
position:absolute;
width:560px;
height:560px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(246,178,51,.22),
rgba(246,178,51,0) 72%);
z-index:1;

}


/*=========================================================
GLASS CARD
=========================================================*/
.floating-card{
    position:absolute;
    width:170px;
    padding:18px;
    border-radius:18px;

    background:linear-gradient(145deg,
        rgba(34,52,98,.95),
        rgba(24,38,78,.90));

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);

    transition:.35s ease;
    overflow:hidden;
}

.floating-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#F6B233,#FFD86A);
}

.floating-card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 25px 50px rgba(0,0,0,.45);
}

.floating-card h3{
    font-size:13px;
    font-weight:500;
    color:#cfd7ea;
    margin-bottom:10px;
}

.floating-card .value{
    font-size:26px;
    font-weight:800;
    color:#F6B233;
    line-height:1;
    margin-bottom:8px;
}

.floating-card p{
    font-size:13px;
    color:#fff;
    opacity:.8;
    margin:0;
}
/*=========================================
        MOBILE - HIDE HERO IMAGE
=========================================*/

@media (max-width:767px){

.hero-image{
    display:none !important;
}

.phone-image{
    display:none !important;
}

.floating-card{
    display:none !important;
}

.hero-image::before{
    display:none !important;
}

}
@media (max-width:767px){

.floating-card{
    display:none !important;
}

.hero-image{
    min-height:auto;
    margin-top:30px;
}

.phone-image{
    width:260px;
    display:block;
    margin:auto;
}

.hero-image::before{
    width:280px;
    height:280px;
}

}
/*=========================================
        HIDE INVESTORS ON MOBILE
=========================================*/

@media (max-width:767px){

.investors{
    display:none !important;
}

}
@media (max-width:767px){

.avatars{
    display:none !important;
}

}
/*=========================================================
CARD ICON
=========================================================*/

.card-icon{

width:52px;
height:52px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:rgba(246,178,51,.15);
border:1px solid rgba(246,178,51,.30);
margin-bottom:15px;

}

.card-icon i{

font-size:22px;

color:#F6B233;

}

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

.floating-card small{

display:block;

font-size:14px;

color:#dbe4f6;

margin-bottom:6px;

}

.floating-card h4{

font-size:30px;

font-weight:700;

color:#F6B233;

margin-bottom:6px;

}

.floating-card p{

margin:0;

font-size:15px;

color:#fff;

line-height:24px;

}

/*=========================================================
CARD POSITION
=========================================================*/

.card1{

top:60px;

left:-20px;

}

.card2{

bottom:80px;

left:-40px;

animation-delay:1s;

}

.card3{

top:210px;

right:-35px;

animation-delay:2s;

}

/*=========================================================
FLOAT ANIMATION
=========================================================*/

@keyframes cardFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/*=========================================================
SMALL GOLD DOTS
=========================================================*/

.gold-dots{

position:absolute;
width:180px;
height:180px;
right:0;
top:40px;
background-image:
radial-gradient(#F6B233 2px,transparent 2px);
background-size:22px 22px;
opacity:.18;
z-index:3;

}

/*=========================================================
GRAPH LINE
=========================================================*/

.graph-line{

position:absolute;
left:0;
bottom:0;
width:100%;
opacity:.18;
pointer-events:none;
z-index:2;

}

/*=========================================================
LIGHT PARTICLE
=========================================================*/

.light-particle{

position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:#F6B233;
box-shadow:
0 0 18px #F6B233,
0 0 30px #F6B233;
animation:particleMove 6s linear infinite;

}

@keyframes particleMove{

0%{

transform:translateY(0);

opacity:0;

}

30%{

opacity:1;

}

100%{

transform:translateY(-220px);

opacity:0;

}

}

/*=========================================================
TABLET
=========================================================*/

@media(max-width:991px){

.hero-image{

margin-top:70px;

min-height:auto;

}

.phone-image{

width:340px;

}

.card1{

left:10px;

top:20px;

}

.card2{

left:0;

bottom:10px;

}

.card3{

right:10px;

top:170px;

}

.hero-image::before{

width:420px;

height:420px;

}

.hero-image::after{

width:360px;

height:360px;

}

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:767px){

.phone-image{

width:270px;

}

.floating-card{

min-width:170px;

padding:15px;

}

.floating-card h4{

font-size:22px;

}

.card1{

top:-10px;

left:0;

}

.card2{

display:none;

}

.card3{

top:110px;

right:0;

}

.hero-image::before{

width:300px;

height:300px;

}

.hero-image::after{

width:260px;

height:260px;

}

}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px){

.phone-image{

width:220px;

}

.floating-card{

display:none;

}

.hero-image::before{

width:240px;
height:240px;

}

.hero-image::after{

display:none;

}

}

@media (max-width:991px){

.hero-section{
    padding:80px 0;
    text-align:center;
}

.hero-section .row{
    flex-direction:column;
}

.hero-content{
    max-width:100%;
}

.hero-buttons{
    justify-content:center;
}

.hero-features{
    justify-content:center;
}

.badge-wrapper{
    justify-content:center;
}

.investors{
    justify-content:center;
}

.hero-image{
    margin-top:60px;
}
}
@media (max-width:576px){

.hero-section{
    padding:60px 0;
}

.hero-content h1{
    font-size:34px;
    line-height:1.25;
}

.hero-content p{
    font-size:16px;
}

.hero-buttons{
    flex-direction:column;
    width:100%;
}

.btn-explore,
.btn-video{
    width:100%;
    justify-content:center;
}

.badge-wrapper{
    gap:12px;
}

.premium-badge{
    width:100%;
    min-width:100%;
}

.hero-features{
    flex-direction:column;
    gap:20px;
}

.feature-divider{
    display:none;
}
}
@media(max-width:767px){

.phone-image{
    width:260px;
}

.floating-card{
    width:140px;
    padding:12px;
}

.floating-card h4{
    font-size:20px;
}

.card1{
    top:0;
    left:0;
}

.card2{
    bottom:20px;
    left:0;
}

.card3{
    top:100px;
    right:0;
}

}
@media(max-width:480px){

.floating-card{
    display:none;
}

.phone-image{
    width:220px;
}

}
.hero-features{
    display:flex;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}


.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-explore,
.btn-video{
    min-width:200px;
}
.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-explore,
.btn-video{
    min-width:200px;
}
.investors{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:40px;
}

@media(max-width:576px){

.investors{
    justify-content:center;
    text-align:center;
}


}


/*=========================================================
                HERO FEATURES
=========================================================*/
/*=========================================
PREMIUM FEATURE SECTION
=========================================*/




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

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

.feature-content{

    display:flex !important;

    flex-direction:column !important;

}

.feature-content h6{

    margin:0 0 4px !important;
    color:#ffffff !important;
    font-size:20px !important;
    font-weight:500 !important;
    line-height:1 !important;

}

.feature-content span{

    color:#C9D3E7 !important;

    font-size:15px !important;

    font-weight:500 !important;

}

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

/*=========================================================
BUTTON SECTION
=========================================================*/

/*=========================================================
INVESTORS
=========================================================*/






/*=====================================*/
/*==============================
 HERO FEATURES
==============================*/
 /*==========================================
 HERO SECTION
==========================================*/
/*==================================================
 HERO SECTION
==================================================*/

.hero-section{
    position:relative;
    overflow:hidden;
    background:#071B45;
    min-height:760px;
    padding:20px 0;
    z-index:1;
}

/* Background Image */

.hero-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../img/banner.png") center center/cover no-repeat;
    opacity:.15;
    z-index:-2;
}

/* Dark Overlay */

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:-1;
}

/* Container */

.hero-section .container{
    position:relative;
    z-index:2;
}

/* Bootstrap Row */

.hero-section .row{
    align-items:center;
}

/*==================================================
 LEFT CONTENT
==================================================*/

.hero-content{
    max-width:650px;
    padding-top:30px;
}

/* Advisor Badge */

.advisor-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:15px;
    font-weight:500;
    margin-bottom:35px;
}

.advisor-badge i{
    color:#F7B733;
    font-size:18px;
}

/* Heading */
.hero-content {
    max-width: 620px;
    padding-top: 40px;
}

.hero-content h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.17;
    letter-spacing: -2px;
    color: #fff;
    margin-bottom: 25px;
    max-width: 800px;
}

.hero-content h1 span {
    font-family: 'Poppins', sans-serif !important;
    color: #D7B56D;
    font-weight: 700;
}
.hero-content p {
    max-width: 560px;
    font-size: 24px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}

/*==================================================
 HERO FEATURES
==================================================*/

.hero-features{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:100%;
    max-width:650px;
    margin:40px 0;

}

/* Feature Box */

.feature-box{

    flex:1;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    min-height:95px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    border-left:3px solid #d7b56d;
    transition:.35s;

}

.feature-box:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

/* Icon */

.feature-icon{

    width:54px;
    height:54px;

    min-width:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:#20386C;

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

    color:#F7B733;

    font-size:22px;

}

/* Text */

.feature-content{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.feature-content h5{

    margin:0;

    color:#fff;

    font-size:30px;

    font-weight:700;

    line-height:1;

}

.feature-content span{

    display:block;

    margin-top:6px;

    color:#D8E3F8;

    font-size:13px;

    line-height:18px;

    font-weight:500;

}
/*==================================================
 HERO BUTTONS
==================================================*/

.hero-buttons{
    display:flex;
    align-items:center;
    gap:20px;
    margin:40px 0 35px;
    flex-wrap:wrap;
}

.btn-explore,
.btn-video{
    width:210px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:15px;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    transition:all .35s ease;
}

.btn-explore{

    background:linear-gradient(135deg,#d7b56d,#d7b56d);
    color:#071B45;
    box-shadow:0 15px 35px rgba(247,183,51,.30);

}

.btn-explore:hover{

    color:#071B45;
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(247,183,51,.40);

}

.btn-video{

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;

}

.btn-video:hover{

    background:#ffffff;
    color:#071B45;
    transform:translateY(-4px);

}

.btn-video i,
.btn-explore i{

    font-size:18px;

}

/*==================================================
 INVESTORS
==================================================*/

.investors{

    display:flex;
    align-items:center;
    gap:18px;
    margin-top:10px;

}

.avatars{

    display:flex;

}

.avatars img{

    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #071B45;
    margin-left:-14px;

}

.avatars img:first-child{

    margin-left:0;

}

.investors p{

    margin:0;
    font-size:15px;
    color:#D4DDF0;
    line-height:24px;

}

.investors span{

    color:#F7B733;
    font-weight:700;

}

/*==================================================
 RIGHT SIDE IMAGE
==================================================*/

.hero-image{

    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:700px;

}

.phone-image{

    width:430px;
    max-width:100%;
    position:relative;
    z-index:10;
    filter:drop-shadow(0 35px 60px rgba(0,0,0,.35));
    animation:phoneFloat 4s ease-in-out infinite;

}

@keyframes phoneFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

/*==================================================
 FLOATING CARD
==================================================*/

.floating-card{

    position:absolute;
    min-width:210px;
    padding:22px 24px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 20px 45px rgba(0,0,0,.25);
    color:#fff;
    z-index:20;
    animation:floatCard 5s ease-in-out infinite;

}

.floating-card small{

    display:block;
    font-size:14px;
    color:#D8DFF1;
    margin-bottom:8px;

}

.floating-card h4{

    margin:0;
    font-size:32px;
    color:#F7B733;
    font-weight:700;

}

.floating-card p{

    margin:6px 0 0;
    font-size:14px;
    color:#ffffff;

}

/* Card Position */

.card1{

    top:70px;
    left:-20px;

}

.card2{

    bottom:80px;
    left:-10px;
    animation-delay:1s;

}

.card3{

    top:220px;

    right:-10px;

    animation-delay:2s;

}

/* Floating Animation */

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

/*==================================================
 BACKGROUND GLOW
==================================================*/

.hero-image::before{

    content:"";
    position:absolute;
    width:560px;
    height:560px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(247,183,51,.18) 0%,
    rgba(247,183,51,0) 70%);

    z-index:1;

}



@keyframes rotateCircle{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/*==================================================
 DECORATIVE DOTS
==================================================*/

.hero-section::after{

    content:"";
    position:absolute;
    right:4%;
    top:8%;
    width:220px;
    height:220px;
    background:radial-gradient(#F7B733 2px,transparent 2px);
    background-size:24px 24px;
    opacity:.15;

}

/*==================================================
 HOVER EFFECT
==================================================*/

.floating-card:hover{

    transform:translateY(-8px);

    transition:.35s;

}
/*==================================================
 TABLET RESPONSIVE
==================================================*/

@media (max-width:991px){

.hero-section{
    padding:70px 0;
    text-align:center;
    min-height:auto;
}

.hero-content{
    max-width:100%;
    margin:0 auto;
}

.hero-content h1{
    font-size:52px;
    line-height:1.15;
}

.hero-content p{
    font-size:18px;
    line-height:32px;
    max-width:100%;
}

/* Feature Boxes */

.hero-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin:35px auto;
    width:100%;
    max-width:700px;
}

.feature-box{
    width:100%;
    min-height:90px;
    padding:15px;
}

.feature-content h5{
    font-size:24px;
}

.feature-content span{
    font-size:12px;
}

/* Buttons */

.hero-buttons{
    justify-content:center;
}

/* Investors */

.investors{
    justify-content:center;
}

/* Hero Image */

.hero-image{
    margin-top:70px;
    min-height:auto;
}

.phone-image{
    width:340px;
}

/* Floating Cards */

.card1{
    top:20px;
    left:20px;
}

.card2{
    bottom:20px;
    left:20px;
}

.card3{
    top:180px;
    right:20px;
}

}

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

@media (max-width:767px){
/*====================================
        PREMIUM MOBILE HERO
=====================================*/

@media (max-width:767px){

.hero-section{

    padding:90px 0 60px;
    text-align:center;
    overflow:hidden;
}

.hero-content{

    max-width:100%;
    padding:0 12px;

    animation:heroFade .9s ease;
}

/* ---------- BADGES ---------- */

.badge-wrapper{

    justify-content:center;
    gap:10px;
    margin-bottom:25px;
}

.premium-badge{

    min-width:auto;
    height:42px;

    padding:0 18px;

    border-radius:30px;

    font-size:12px;
}

.badge-icon{

    font-size:15px;
}

/* ---------- HEADING ---------- */

.hero-content h1{

    font-size:clamp(42px,9vw,52px);
    line-height:1.12;
    font-weight:800;
    letter-spacing:-1.5px;
    margin-bottom:22px;
    animation:titleUp .8s ease;
    text-wrap:balance;
    font: size 20px,!important;
}

.hero-content h1 span{

    background:linear-gradient(90deg,#F6B233,#FFD978);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

/* ---------- PARAGRAPH ---------- */

.hero-content p{

    font-size:17px;
    line-height:31px;
    color:#d7ddeb;
    max-width:95%;
    margin:0 auto 35px;
    animation:textFade 1s ease;
}

/* ---------- BUTTONS ---------- */

.hero-buttons{

    flex-direction:column;
    gap:15px;
    width:100%;
}

.btn-explore,
.btn-video{

    width:100%;
    height:56px;
    border-radius:50px;
    justify-content:center;
    font-size:16px;
    animation:buttonPop .8s ease;
}

/* ---------- INVESTOR ---------- */

.investors{

    justify-content:center;

    margin-top:35px;

    flex-direction:column;

    gap:12px;
}

.investors p{

    font-size:15px;
}

}
@keyframes heroFade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes titleUp{

from{

opacity:0;

transform:translateY(40px) scale(.95);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}

@keyframes textFade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes buttonPop{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}
@media(max-width:767px){

.hero-section::before{

    content:"";
    position:absolute;
    width:320px;
    height:320px;
    top:-120px;
    left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(246,178,51,.20),
    transparent 70%);
    filter:blur(20px);
}

}
.hero-content h1::after{

content:"";
display:block;
width:70px;
height:4px;
margin:18px auto 0;
border-radius:10px;
background:#F6B233;
animation:lineGrow .8s ease;

}

@keyframes lineGrow{

from{

width:0;

}

to{

width:70px;

}

}
.hero-content h1{

animation:
titleUp .8s ease,
floatTitle 5s ease-in-out infinite;

}

@keyframes floatTitle{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

}
/* Feature Boxes */

.hero-features{
    grid-template-columns:1fr;
    gap:15px;
}

.feature-box{
    width:100%;
}

.feature-icon{
    width:48px;
    height:48px;
    min-width:48px;
}

.feature-content h5{
    font-size:24px;
}

/* Buttons */

.hero-buttons{
    flex-direction:column;
    gap:15px;
}

.btn-explore,
.btn-video{
    width:100%;
}

/* Investors */

.investors{
    flex-direction:column;
    text-align:center;
}

/* Phone */

.phone-image{
    width:270px;
}

/* Floating Cards */

.floating-card{
    min-width:160px;
    padding:15px;
}

.floating-card h4{
    font-size:22px;
}

.card1{
    top:-5px;
    left:0;
}

.card2{
    bottom:-15px;
    left:0;
}

.card3{
    top:110px;
    right:0;
}

/* Circle */

.hero-image::before{
    width:320px;
    height:320px;
}

.hero-image::after{
    width:260px;
    height:260px;
}

}

/*==================================================
 SMALL MOBILE
==================================================*/

@media (max-width:480px){

.hero-section{
    padding:50px 0;
}

.hero-content h1{
    font-size:37px;
}

.hero-content p{
    font-size:15px;
    line-height:26px;
}

/* Badge */

.advisor-badge{
    font-size:13px;
    padding:10px 16px;
}

/* Feature Box */

.feature-box{
    padding:14px;
}

.feature-content h5{
    font-size:22px;
}

.feature-content span{
    font-size:12px;
}

/* Buttons */

.btn-explore,
.btn-video{
    height:54px;
    font-size:15px;
}

/* Phone */

.phone-image{
    width:220px;
}

/* Hide Floating Cards */

.floating-card{
    display:none;
}

/* Remove Glow */

.hero-image::before{
    width:240px;
    height:240px;
}

.hero-image::after{
    width:190px;
    height:190px;
}

}
./*=====================================
    Desktop / Laptop
======================================*/

.hero-features{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
}

.feature-divider{
    display:none;
}

.feature-item{

    flex:1;

    max-width:33.333%;

    min-width:0;

    height:90px;

    display:flex;
    align-items:center;

    padding:0 20px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #213a72,
        #162b59
    );

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

}

.feature-icon{

    width:58px;
    height:58px;

    min-width:58px;

    margin-right:16px;
}

.feature-text{

    flex:1;
}

.feature-text h4{

    margin:0;

    font-size:22px;

    color:#fff;
}



/*==================================================
INVESTORS
==================================================*/

.investors{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:35px;
}

.avatars{
    display:flex;
}

.avatars img{
    width:54px;
    height:54px;
    border-radius:50%;
    border:3px solid #071B45;
    margin-left:-15px;
    object-fit:cover;
}

.avatars img:first-child{
    margin-left:0;
}

.investors p{
    color:#fff;
    font-size:18px;
    margin:0;
}

.investors span{
    color:#d7b56d;
    font-weight:700;
}

/*==================================================
RIGHT IMAGE
==================================================*/

.hero-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:760px;
}

.phone-image{
    width:470px;
    max-width:100%;
    position:relative;
    z-index:5;
    animation:phoneFloat 4s ease-in-out infinite;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));
}

@keyframes phoneFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

.hero-image::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(215,181,109,.20) 0%,
    rgba(215,181,109,0) 70%);
}



@keyframes rotateCircle{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}
/*==================================================
FLOATING GLASS CARDS
==================================================*/

.floating-card{
    position:absolute;
    min-width:220px;
    padding:22px 25px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    box-shadow:0 20px 45px rgba(0,0,0,.20);
    transition:all .35s ease;
    z-index:20;
    animation:floatCard 5s ease-in-out infinite;
}

.floating-card:hover{
    transform:translateY(-10px);
    border-color:#d7b56d;
    box-shadow:0 25px 60px rgba(0,0,0,.30);
}

.floating-card small{
    display:block;
    color:#D4DCEC;
    font-size:14px;
    margin-bottom:8px;
    font-weight:500;
}

.floating-card h4{
    color:#d7b56d;
    font-size:30px;
    font-weight:700;
    margin-bottom:8px;
}

.floating-card p{
    margin:0;
    color:#ffffff;
    font-size:15px;
    line-height:24px;
}

/*==================================================
CARD POSITIONS
==================================================*/

.card1{
    top:70px;
    left:-10px;
}

.card2{
    bottom:80px;
    left:-25px;
    animation-delay:1s;
}

.card3{
    top:230px;
    right:-20px;
    animation-delay:2s;
}

/*==================================================
FLOAT ANIMATION
==================================================*/

@keyframes floatCard{

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

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

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

}

/*==================================================
BACKGROUND DECORATION
==================================================*/

.hero-section::after{
    content:"";
    position:absolute;
    right:4%;
    top:10%;
    width:220px;
    height:220px;
    background:
    radial-gradient(#d7b56d 2px,transparent 2px);
    background-size:24px 24px;
    opacity:.15;
    z-index:-1;
}

/*==================================================
GLOW EFFECT
==================================================*/

.hero-image .glow{
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(215,181,109,.18);
    filter:blur(90px);
    z-index:0;
}

/*==================================================
IMAGE SHADOW
==================================================*/

.phone-image{
    filter:
    drop-shadow(0 30px 60px rgba(0,0,0,.35));
}

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

@media(max-width:991px){

.hero-section{
    text-align:center;
    padding:80px 0;
}

.hero-image{
    margin-top:70px;
    min-height:auto;
}

.phone-image{
    width:360px;
}

.card1{
    left:20px;
    top:10px;
}

.card2{
    left:10px;
    bottom:20px;
}

.card3{
    right:10px;
    top:170px;
}

.hero-buttons{
    justify-content:center;
}

.hero-features{
    justify-content:center;
}

.investors{
    justify-content:center;
}

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:767px){

.phone-image{
    width:270px;
}

.hero-image::before{
    width:330px;
    height:330px;
}

.hero-image::after{
    width:260px;
    height:260px;
}

.floating-card{
    min-width:170px;
    padding:16px;
}

.floating-card h4{
    font-size:22px;
}

.card1{
    top:-5px;
    left:0;
}

.card2{
    bottom:-10px;
    left:0;
}

.card3{
    top:120px;
    right:0;
}

}

/*==================================================
SMALL MOBILE
==================================================*/

@media(max-width:480px){

.hero-section{
    padding:60px 0;
}

.phone-image{
    width:220px;
    display: none;
}

.floating-card{
    display:none;
}

.hero-buttons{
    flex-direction:column;
    width:100%;
}

.btn-explore,
.btn-video{
    width:100%;
    justify-content:center;
}

}
/*=========================================
        HERO FEATURES - MOBILE ONLY
/*==================================================
SMOOTH TRANSITION
==================================================*/

@media (max-width:767px){

.hero-features{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:10px !important;
    width:100% !important;
    margin-top:30px;
}

.feature-divider{
    display:none !important;
}

.feature-item{

    width:100% !important;
    max-width:none !important;
    height:120px !important;

    display:flex !important;
    flex-direction:column !important;

    justify-content:center !important;
    align-items:center !important;

    padding:15px 8px !important;

    margin:0 !important;

    text-align:center !important;

    border-radius:18px;
}

.feature-icon{

    margin:0 0 10px 0 !important;

    width:48px;
    height:48px;
    min-width:48px;
}

.feature-text{

    width:100%;
}

.feature-text h4{

    font-size:14px !important;
    line-height:20px;
}

}
.feature-item{
    position:relative;
    overflow:hidden;

    display:flex;
    align-items:center;

    width:100%;
    max-width:330px;
    height:90px;

    padding:0 18px;
    margin:0 auto;

    border-radius:22px;

    background:linear-gradient(
        145deg,
        #20386c,
        #152a58
    );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 25px rgba(0,0,0,.35);

    z-index:1;
}
.feature-item::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:22px;

    padding:1.5px;

    background:linear-gradient(
        135deg,
        rgba(255,215,120,.95),
        rgba(215,181,109,.35),
        rgba(255,215,120,.95)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    pointer-events:none;
}
.feature-item::after{

    content:"";

    position:absolute;

    top:-40px;
    right:-40px;

    width:90px;
    height:90px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,215,120,.35),
        transparent 70%
    );

    filter:blur(18px);
}

.hero-section *,
.hero-image *,
.hero-content *{
    transition:all .35s ease;
}

/*==================================================
END
==================================================*/
.bond-section{

    padding:70px 0;

}

.container{

    max-width:1320px;

}

/*==================================
SECTION HEADER
==================================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

    flex-wrap:wrap;

}

.section-header h2{

    font-size:34px;

    font-weight:800;

    color:#001743;

    margin-bottom:8px;

}

.section-header p{

    color:#6d6d6d;

    font-size:15px;

}

.view-all{

    text-decoration:none;
    color: rgb(215, 181, 109);
    font-weight:700;
    transition:.3s;

}

.view-all i{

    margin-left:8px;

}

.view-all:hover{

    color:#001743;

}

/*==================================
CARD
==================================*/
/*==================================
BOND CARD
==================================*/

.bond-card{

    background:#fff;
    border-radius:22px;
    padding:28px;
    border:1px solid #edf0f7;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;

}

.bond-card:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

/*==================================
TOP
==================================*/

.card-top{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;

}

.company-logo{

    width:65px;
    height:65px;
    display:flex;
    justify-content:center;
    align-items:center;

}

.company-logo img{

    width:50px;
    max-width:100%;
    object-fit:contain;

}

.rating-badge{

    background:#d7b56d;
    color:#001743;
    padding:6px 14px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;

}

/*==================================
TITLE
==================================*/

.bond-card h4{

    font-size:20px;
    color:#001743;
    font-weight:700;
    line-height:30px;
    margin-bottom:8px;
    min-height:60px;

}

.bond-type{

    color:#7b7b7b;
    font-size:14px;
    margin-bottom:25px;

}

/*==================================
INFO BOX
==================================*/

.bond-info{

    display:flex;
    justify-content:space-between;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px dashed #ececec;

}

.bond-info:last-of-type{

    border-bottom:none;

}

.bond-info div{

    width:48%;

}

.bond-info span{

    display:block;
    font-size:13px;
    color:#888;
    margin-bottom:5px;

}

.bond-info h5{

    margin:0;
    font-size:17px;
    font-weight:700;
    color:#001743;

}

.bond-info h4{

    margin:0;
    font-size:20px;
    font-weight:700;
    color:#001743;

}
@media (max-width: 380px) {

    .bond-info h5 {
        font-size: 13px;
        line-height: 1.3;
        margin-bottom: 4px;
    }

    .bond-info h4 {
        font-size: 15px;
        line-height: 1.3;
    }
}

/*==================================
BUTTON
==================================*/

.details-btn{

    display:block;
    text-align:center;
    text-decoration:none;
    padding:14px;
    margin-top:25px;
    border:2px solid #d7b56d;
    color:#d7b56d;
    font-weight:700;
    border-radius:12px;
    transition:.3s;

}

.details-btn:hover{

    background:#d7b56d;
    color:#fff;
    border-color:#d7b56d;

}

/*==================================
SWIPER
==================================*/

.bondSwiper{

    padding-bottom:55px;

}

.swiper-slide{

    height:auto;

}

.swiper-pagination{

    position:relative;
    margin-top:25px;

}

.swiper-pagination-bullet{

    width:10px;
    height:10px;
    background:#d7b56d;
    opacity:.4;

}

.swiper-pagination-bullet-active{

    opacity:1;
    width:28px;
    border-radius:20px;

}

/*==================================
TABLET
==================================*/

@media(max-width:991px){

    .bond-card{

        padding:24px;

    }

    .bond-card h4{

        font-size:18px;
        line-height:28px;
        min-height:auto;

    }

    .bond-info h5{

        font-size:16px;

    }

}

/*==================================
MOBILE
==================================*/

@media(max-width:767px){

    .bondSwiper{

        padding:0 10px 50px;

    }

    .bond-card{

        padding:22px;
        border-radius:18px;

    }

    .company-logo{

        width:55px;
        height:55px;

    }

    .company-logo img{

        width:34px;

    }

    .rating-badge{

        font-size:11px;
        padding:5px 12px;

    }

    .bond-card h4{

        font-size:17px;
        line-height:26px;

    }

    .bond-type{

        font-size:13px;

    }

    .bond-info{

        margin-bottom:16px;
        padding-bottom:12px;

    }

    .bond-info span{

        font-size:12px;

    }

    .bond-info h5{

        font-size:15px;

    }

    .details-btn{

        padding:12px;
        font-size:15px;

    }

}
/* ===============================
   MOBILE VIEW ONLY
=================================*/
@media (max-width:767px){

.bond-card{
    padding:28px 22px;
    border-radius:22px;
}

.card-top{
    margin-bottom:20px;
}

.company-logo{
    width:64px;
    height:64px;
    border-radius:18px;
}

.company-logo img{
    width:32px;
}

.rating-badge{
    padding:8px 16px;
    font-size:13px;
    border-radius:30px;
}

.bond-card h4{
    font-size:18px;
    line-height:30px;
    min-height:auto;
    margin-bottom:10px;
}

.bond-type{
    font-size:16px;
    margin-bottom:28px;
}

.bond-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px;
    row-gap:18px;
    margin-bottom:18px;
}

.bond-info div{
    width:100%;
}

.bond-info span{
    font-size:14px;
    color:#9b9b9b;
    margin-bottom:6px;
}

.bond-info h5{
    font-size:18px;
    margin:0;
}

.details-btn{
    width:100%;
    display:block;
    text-align:center;
    padding:15px;
    font-size:18px;
    border-radius:14px;
    margin-top:10px;
}

}
/*==================================
FEATURE BOX
==================================*/

.features{

    margin-top:60px;
    background:#001743;
    border-radius:20px;
    padding:28px;

}

.feature-item{

    display:flex;
    align-items:center;
    color:#fff;

}

.feature-icon{

    width:65px;
    height:65px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:18px;
    font-size:28px;
    color:#d7b56d;

}

.feature-item h4{

    font-size:18px;
    margin-bottom:6px;

}

.feature-item p{

    color:#d6d6d6;
    margin:0;
    font-size:14px;

}

/*==========================================
        MOBILE FEATURE DESIGN
==========================================*/
@media (max-width:767px){

.features{
    margin-top:35px;
    padding:20px;
    background:transparent;
    border-radius:0;
}

.features .row{
    row-gap:15px;
}

.feature-item{

    background:rgba(255,255,255,.06);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;
    padding:18px 15px;

    display:flex;
    align-items:center;

    transition:.4s ease;

    animation:featureFade .7s ease forwards;

    opacity:0;
}

.feature-item:nth-child(1){
    animation-delay:.15s;
}

.feature-item:nth-child(2){
    animation-delay:.35s;
}

.feature-item:nth-child(3){
    animation-delay:.55s;
}

.feature-item:hover{

    transform:translateY(-6px);

    border-color:#d7b56d;

    box-shadow:0 15px 30px rgba(0,0,0,.25);

}

.feature-icon{

    width:60px;
    height:60px;

    min-width:60px;

    margin-right:15px;

    border-radius:16px;

    background:linear-gradient(135deg,#19356d,#102450);

    color:#d7b56d;

    font-size:24px;

    animation:iconFloat 3s ease-in-out infinite;
}

.feature-item h4{

    font-size:18px;

    margin:0;

    color:#fff;
}

.feature-item p{

    font-size:13px;

    margin-top:5px;

    color:#cbd4e5;
}

}
/* Card Animation */
@keyframes featureFade{

from{

    opacity:0;
    transform:translateY(40px);

}

to{

    opacity:1;
    transform:translateY(0);

}

}

/* Floating Icon */

@keyframes iconFloat{

0%,100%{

    transform:translateY(0);

}

50%{

    transform:translateY(-6px);

}

}
@media(max-width:480px){

.feature-item{

    padding:15px;

}

.feature-icon{

    width:52px;
    height:52px;
    min-width:52px;

    font-size:20px;
}

.feature-item h4{

    font-size:16px;
}

.feature-item p{

    font-size:12px;
}

}

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

@media(max-width:991px){

.section-header{

gap:20px;

}

.section-header h2{

font-size:28px;

}

.bond-card{

padding:22px;

}

}

@media(max-width:767px){

.section-header{

flex-direction:column;

align-items:flex-start;

}

.section-header h2{

font-size:26px;

}

.bond-info{

flex-direction:column;

}

.bond-info div{

width:100%;

margin-bottom:18px;

}

}







.feature-box{

    background:linear-gradient(135deg,#09214b,#05142f);
    border-radius:18px;
    overflow:hidden;
    position:relative;
    box-shadow:
    0 15px 45px rgba(3,19,55,.18);

}

.feature-box::before{

    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    

}

.single-feature{

    display:flex;
    align-items:center;
    gap:18px;
    padding:30px 25px;
    position:relative;
    transition:.4s;

}

.single-feature:hover{

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

}

.single-feature::after{

    content:'';
    position:absolute;
    right:0;
    top:20%;
    height:60%;
    width:1px;
    background:rgba(255,255,255,.12);

}

.single-feature:last-child::after{
    display:none;
}

.icon-box{

    width:58px;
    height:58px;
    border-radius:14px;

    background:rgba(247,158,82,.10);

    border:1px solid rgba(247,158,82,.25);

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    transition:.4s;
}

.single-feature:hover .icon-box{

    transform:translateY(-5px);
    background:#f79e52;

}

.icon-box i{

    color:#f79e52;
    font-size:24px;
    transition:.4s;

}

.single-feature:hover .icon-box i{

    color:#fff;

}

.feature-content h5{

    color:#fff;
    font-size:17px;
    font-weight:600;
    margin-bottom:5px;

}

.feature-content p{

    color:rgba(255,255,255,.65);
    margin:0;
    font-size:13px;
    line-height:1.7;

}

/* Hover Glow */

.single-feature:hover{

    transform:translateY(-5px);

}

/* Responsive */

@media(max-width:991px){

.single-feature::after{
display:none;
}

.single-feature{

border-bottom:1px solid rgba(255,255,255,.08);

}

.single-feature:last-child{

border-bottom:none;

}

}

/*==================================================
 BOND PROCESS SECTION
==================================================*/

.bond-process-section{
    padding:100px 0;
    background:#f8f9fc;
    position:relative;
    overflow:hidden;
}

/*==================================================
 HEADING
==================================================*/

.bond-process-heading{
    margin-bottom:80px;
}

.bond-process-subtitle{
    display:inline-block;
    padding:8px 18px;
    background:rgba(36,64,130,.08);
    color:#244082;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    border-radius:30px;
    margin-bottom:18px;
}

.bond-process-heading h2{
    font-size:48px;
    font-weight:700;
    color:#244082;
    margin-bottom:15px;
}

.bond-process-heading h2 span{
    color:#d7b56d;
}

.bond-process-heading p{
    max-width:650px;
    margin:auto;
    color:#6b7280;
    font-size:17px;
    line-height:30px;
}

/*==================================================
 WRAPPER
==================================================*/

.bond-process-wrapper{
    position:relative;
}

/* Timeline */

.bond-process-line{

    position:absolute;

    top:28px;

    left:12%;

    width:76%;

    height:3px;

    background:#d7b56d;

    opacity:.35;

    z-index:0;

}

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

.bond-process-card{

    position:relative;

    background:#ffffff;

    border-radius:24px;

    padding:35px;

    height:100%;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.35s;

    z-index:2;

    overflow:hidden;

}

.bond-process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(36,64,130,.15);

}

/* Top Border */

.bond-process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#244082,#d7b56d);

}

/*==================================================
 STEP NUMBER
==================================================*/

.bond-step-count{

    width:62px;

    height:62px;

    border-radius:50%;

    background:#244082;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:25px;

    font-size:22px;

    font-weight:700;

    box-shadow:0 15px 35px rgba(36,64,130,.25);

}

/*==================================================
 CARD TITLE
==================================================*/

.bond-process-card h3{

    text-align:center;

    color:#244082;

    font-size:24px;

    font-weight:700;

    margin-bottom:35px;

}

/*==================================================
 CARD BODY
==================================================*/

.bond-process-body{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*==================================================
 ITEM
==================================================*/

.bond-process-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding-bottom:18px;

    border-bottom:1px solid #ececec;

}

.bond-process-item:last-child{

    border:none;

    padding-bottom:0;

}

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

.bond-process-icon{

    width:54px;

    height:54px;

    min-width:54px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#244082;

    color:#d7b56d;

    font-size:22px;

    box-shadow:0 12px 25px rgba(36,64,130,.18);

}

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

.bond-process-text h6{

    margin:0;

    color:#244082;

    font-size:16px;

    font-weight:700;

}

.bond-process-text p{

    margin-top:5px;

    color:#777;

    font-size:14px;

    line-height:22px;

}

/*====================================
 FEATURE STRIP
====================================*/

.invest-feature-strip{
    margin:50px 0;
}

.invest-feature-wrapper{

    background:linear-gradient(135deg,#244082,#18346b);

    border-radius:18px;

    padding:25px 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    box-shadow:0 18px 40px rgba(36,64,130,.20);

}

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

.invest-feature-card{

    flex:1;

    display:flex;

    align-items:center;

    gap:18px;

    padding:0 20px;

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

}

.invest-feature-card:last-child{

    border-right:none;

}

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

.invest-icon-box{

    width:58px;

    height:58px;

    min-width:58px;

    border-radius:14px;

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

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#d7b56d;

    font-size:24px;

    transition:.35s;

}

.invest-feature-card:hover .invest-icon-box{

    background:#d7b56d;

    color:#244082;

    transform:translateY(-5px);

}

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

.invest-text h5{

    margin:0 0 6px;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

}

.invest-text p{

    margin:0;

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

    font-size:14px;

    line-height:22px;

}


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

@media(max-width:991px){

.invest-feature-wrapper{

    flex-direction:column;

    padding:20px;

}

.invest-feature-card{

    width:100%;

    padding:20px 0;

    border-right:none;

    border-bottom:1px solid rgba(255,255,255,.12);

}

.invest-feature-card:last-child{

    border-bottom:none;

}

}

@media(max-width:576px){

.invest-feature-card{

    flex-direction:column;

    text-align:center;

}

.invest-icon-box{

    margin-bottom:10px;

}

.invest-text h5{

    font-size:16px;

}

.invest-text p{

    font-size:13px;

}

}

/*==================================================
  GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==================================================
  GLOBAL CSS
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fc;
    color:#222;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

ul{
    list-style:none;
    padding:0;
    margin:0;
}

.fi-investment-section{
    position:relative;
    padding:50px 0;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#f7f9fd 100%);
}

/*==================================================
  BACKGROUND SHAPES
==================================================*/


/*==================================================
  SECTION HEADING
==================================================*/

.fi-section-header{

    text-align:center;

    margin-bottom:80px;
}

.fi-section-subtitle{

    display:inline-block;

    color:#777;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:15px;
}

.fi-section-title{

    font-size:50px;

    font-weight:800;

    color:#244082;

    margin-bottom:0;
}

.fi-section-title span{

    color:#d7b56d;
}

/*==================================================
  TIMELINE
==================================================*/

.fi-process-wrapper{

    position:relative;
}

.fi-process-line{

    position:absolute;

    top:34px;

    left:15%;

    width:70%;

    height:4px;

    border-radius:30px;

    background:linear-gradient(90deg,#244082,#d7b56d);

    z-index:0;
}

/* Animated Dot */

.fi-process-line::after{

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#d7b56d;

    top:-5px;

    left:0;

    box-shadow:0 0 20px rgba(215,181,109,.8);

    animation:fiTimelineMove 6s linear infinite;
}

@keyframes fiTimelineMove{

    0%{
        left:0;
    }

    100%{
        left:100%;
    }

}

/*==================================================
  STEP CARD
==================================================*/

.fi-process-card{

    position:relative;

    z-index:2;

    text-align:center;
}

/*==================================================
  STEP NUMBER
==================================================*/

.fi-step-count{

    width:68px;

    height:68px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:22px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#244082,#3157b0);

    border:6px solid #ffffff;

    box-shadow:0 15px 35px rgba(36,64,130,.25);

    transition:.4s;
}

.fi-process-card:hover .fi-step-count{

    background:linear-gradient(135deg,#d7b56d,#e5ca87);

    color:#244082;

    transform:rotate(360deg) scale(1.08);
}

/*==================================================
  STEP TITLE
==================================================*/

.fi-step-title{

    margin:22px 0 30px;

    font-size:24px;

    font-weight:700;

    color:#244082;
}

/*==================================================
  COMMON CARD STYLE
==================================================*/

.fi-bond-card,
.fi-payment-card{

    background:#ffffff;

    border-radius:24px;

    padding:40px 30px;

    border:1px solid rgba(36,64,130,.08);

    box-shadow:0 20px 45px rgba(36,64,130,.08);

    transition:.4s;

    min-height:420px;

    position:relative;

    overflow:hidden;
}

.fi-bond-card:hover,
.fi-payment-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(36,64,130,.18);
}

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

@media(max-width:991px){

    .fi-process-line{
        display:none;
    }

    .fi-process-card{
        margin-bottom:40px;
    }

    .fi-section-title{
        font-size:38px;
    }

}

@media(max-width:767px){

    .fi-investment-section{
        padding:70px 0;
    }

    .fi-section-title{
        font-size:30px;
    }

    .fi-step-title{
        font-size:20px;
    }

    .fi-step-count{

        width:58px;
        height:58px;
        font-size:18px;

    }

}
/*==================================================
  PART 2
  KYC CARD DESIGN
==================================================*/

.fi-kyc-wrapper{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* Individual Card */

.fi-kyc-item{

    display:flex;
    align-items:center;
    gap:18px;

    padding:18px;

    background:#ffffff;

    border-radius:18px;

    border:1px solid rgba(36,64,130,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;
}

.fi-kyc-item::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:#d7b56d;

    transform:scaleY(0);

    transition:.35s;
}

.fi-kyc-item:hover{

    transform:translateX(10px);

    border-color:#d7b56d;

    box-shadow:0 20px 35px rgba(36,64,130,.10);
}

.fi-kyc-item:hover::before{

    transform:scaleY(1);
}

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

.fi-kyc-icon{

    width:62px;

    height:62px;

    min-width:62px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#244082,#3d63b8);

    color:#fff;

    font-size:24px;

    transition:.4s;
}

.fi-kyc-item:hover .fi-kyc-icon{

    background:linear-gradient(135deg,#d7b56d,#efd48f);

    color:#244082;

    transform:rotate(-12deg) scale(1.1);
}

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

.fi-kyc-content{

    flex:1;
}

.fi-kyc-content h5{

    margin-bottom:6px;

    color:#244082;

    font-size:17px;

    font-weight:700;
}

.fi-kyc-content p{

    margin:0;

    color:#707070;

    font-size:14px;

    line-height:24px;
}

/*==================================================
  BOND CARD
==================================================*/

.fi-bond-card{

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    position:relative;
}

/* Decorative Background */

.fi-bond-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(215,181,109,.10);

    border-radius:50%;

    top:-70px;

    right:-70px;
}

.fi-bond-card::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:rgba(36,64,130,.05);

    border-radius:50%;

    bottom:-50px;

    left:-50px;
}

/*==================================================
 BADGE
==================================================*/

.fi-card-badge{

    display:inline-block;

    padding:12px 25px;

    border-radius:40px;

    background:linear-gradient(90deg,#244082,#3558b2);

    color:#fff;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:30px;
}

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

.fi-card-icon{

    width:120px;

    height:120px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#d7b56d,#efdca6);

    color:#244082;

    font-size:48px;

    box-shadow:0 20px 45px rgba(215,181,109,.30);

    margin-bottom:30px;

    transition:.4s;

    position:relative;

    z-index:2;
}

.fi-bond-card:hover .fi-card-icon{

    transform:rotate(12deg) scale(1.08);
}

/* Glow Ring */

.fi-card-icon::after{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    border-radius:50%;

    border:2px solid rgba(215,181,109,.35);

    animation:fiPulse 2s infinite;
}

@keyframes fiPulse{

0%{

transform:scale(1);

opacity:1;
}

100%{

transform:scale(1.45);

opacity:0;
}

}

/*==================================================
 BOND TITLE
==================================================*/

.fi-bond-card h4{

    color:#244082;

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;
}

/*==================================================
 BOND DESCRIPTION
==================================================*/

.fi-bond-card p{

    max-width:280px;

    color:#6f7785;

    line-height:30px;

    font-size:15px;

    margin:0 auto;
}

/*==================================================
 FLOATING ANIMATION
==================================================*/

@keyframes fiFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

.fi-bond-card{

animation:fiFloat 5s ease-in-out infinite;
}

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

@media(max-width:991px){

.fi-kyc-item{

padding:16px;
}

.fi-card-icon{

width:100px;
height:100px;
font-size:40px;
}

}

@media(max-width:576px){

.fi-kyc-item{

flex-direction:column;

text-align:center;
}

.fi-kyc-icon{

margin:auto;
}

.fi-card-badge{

font-size:12px;

padding:10px 20px;
}

.fi-bond-card h4{

font-size:20px;
}

}
/*==================================================
 PART 3
 PAYMENT CARD
 SUPPORT CARD
 BUTTONS
==================================================*/

/*====================================
PAYMENT CARD
====================================*/

.fi-payment-card{

    position:relative;
    text-align:center;
    padding:40px 30px;
    min-height:420px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.fi-payment-card::before{

    content:"";
    position:absolute;
    width:200px;
    height:200px;
    border-radius:50%;
    background:rgba(36,64,130,.05);
    left:-80px;
    top:-80px;
}

.fi-payment-card::after{

    content:"";
    position:absolute;
    width:160px;
    height:160px;
    border-radius:50%;
    background:rgba(215,181,109,.10);
    right:-60px;
    bottom:-60px;
}

.fi-payment-card h4{

    font-size:24px;
    font-weight:700;
    color:#244082;
    margin:25px 0 15px;
}

.fi-payment-card p{

    max-width:280px;
    font-size:15px;
    line-height:28px;
    color:#666;
    margin:auto;
}

/* Payment Icon */

.fi-payment-card .fi-card-icon{

    background:linear-gradient(135deg,#244082,#4164b7);
    color:#fff;
}

.fi-payment-card:hover .fi-card-icon{

    background:linear-gradient(135deg,#d7b56d,#edd593);
    color:#244082;
    transform:rotate(-12deg) scale(1.08);
}

/* Payment Badge */

.fi-payment-card .fi-card-badge{

    background:linear-gradient(90deg,#d7b56d,#cfa552);
}

/*====================================
SUPPORT CARD
====================================*/

.fi-support-box{

    margin-top:25px;
    padding:22px;
    border-radius:20px;
    background:#ffffff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 18px 40px rgba(36,64,130,.08);
    transition:.4s;
    border:1px solid rgba(36,64,130,.08);
}

.fi-support-box:hover{

    transform:translateY(-8px);
    box-shadow:0 25px 45px rgba(36,64,130,.18);
}

.fi-support-left{

    display:flex;
    align-items:center;
    gap:15px;
}

.fi-support-icon{

    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,#244082,#4164b7);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:26px;
    transition:.4s;
}

.fi-support-box:hover .fi-support-icon{

    background:linear-gradient(135deg,#d7b56d,#edd593);
    color:#244082;
    transform:rotate(12deg);
}

.fi-support-left span{

    display:block;
    color:#777;
    font-size:13px;
    margin-bottom:4px;
}

.fi-support-left h5{

    color:#244082;
    margin:0;
    font-size:18px;
    font-weight:700;
}

/*====================================
CALL BUTTON
====================================*/

.fi-call-button{

    padding:13px 28px;
    border-radius:50px;
    background:linear-gradient(90deg,#244082,#4164b7);
    color:#fff;
    font-weight:600;
    transition:.4s;
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.fi-call-button:hover{

    background:linear-gradient(90deg,#d7b56d,#cfa552);
    color:#fff;
    transform:translateY(-3px);
}

/*====================================
BOTTOM BUTTON
====================================*/

.fi-bottom-button{

    margin-top:70px;
}

.fi-invest-button{

    display:inline-flex;
    align-items:center;
    gap:16px;
    padding:18px 42px;
    border-radius:60px;
    background:linear-gradient(90deg,#244082,#4164b7);
    color:#fff;
    font-size:18px;
    font-weight:700;
    transition:.4s;
    position:relative;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(36,64,130,.25);
}

.fi-invest-button::before{

    content:"";
    position:absolute;
    width:45px;
    height:200%;
    background:rgba(255,255,255,.35);
    top:-50%;
    left:-80px;
    transform:rotate(25deg);
    transition:.8s;
}

.fi-invest-button:hover::before{

    left:120%;
}

.fi-invest-button:hover{

    background:linear-gradient(90deg,#d7b56d,#cfa552);
    color:#fff;
    transform:translateY(-5px);
}

.fi-invest-button i{

    transition:.4s;
}

.fi-invest-button:hover i{

    transform:translateX(8px);
}

/*====================================
FLOAT ANIMATION
====================================*/

@keyframes fiFloating{

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

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

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

}

.fi-payment-card{

    animation:fiFloating 6s ease-in-out infinite;
}

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

@media(max-width:991px){

    .fi-support-box{

        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .fi-support-left{

        justify-content:center;
    }

    .fi-call-button{

        width:100%;
        justify-content:center;
    }

    .fi-invest-button{

        width:100%;
        max-width:320px;
        justify-content:center;
    }

}

@media(max-width:576px){

    .fi-payment-card{

        padding:30px 20px;
    }

    .fi-payment-card h4{

        font-size:20px;
    }

    .fi-support-icon{

        width:55px;
        height:55px;
        font-size:22px;
    }

    .fi-support-left h5{

        font-size:16px;
    }

    .fi-invest-button{

        font-size:16px;
        padding:16px 30px;
    }

}
/*==================================================
 PART 4
 PREMIUM ANIMATIONS & EFFECTS
 Author : ChatGPT
==================================================*/

/*====================================
 CARD HOVER GLOW
====================================*/

.fi-process-card{
    transition:.5s ease;
}

.fi-process-card:hover{
    transform:translateY(-12px);
}

/*====================================
 GOLD BORDER EFFECT
====================================*/

.fi-bond-card,
.fi-payment-card,
.fi-support-box{

    position:relative;
}

.fi-bond-card::after,
.fi-payment-card::after,
.fi-support-box::after{

    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    padding:1px;
   
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;
}

.fi-bond-card:hover::after,
.fi-payment-card:hover::after,
.fi-support-box:hover::after{

    opacity:1;
}

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

.fi-card-icon,
.fi-support-icon,
.fi-kyc-icon{

    transition:.5s;
}

.fi-process-card:hover .fi-card-icon{

    transform:rotate(12deg) scale(1.08);
}

.fi-process-card:hover .fi-support-icon{

    transform:rotate(-10deg) scale(1.1);
}

.fi-kyc-item:hover .fi-kyc-icon{

    transform:rotate(10deg) scale(1.08);
}

/*====================================
 BUTTON SHADOW
====================================*/

.fi-call-button,
.fi-invest-button{

    position:relative;

    overflow:hidden;
}

.fi-call-button::before,
.fi-invest-button::before{

    content:"";
    position:absolute;
    width:40px;
    height:180%;
    background:rgba(255,255,255,.35);
    top:-40%;
    left:-80px;
    transform:rotate(25deg);
    transition:.8s;
}

.fi-call-button:hover::before,
.fi-invest-button:hover::before{

    left:130%;
}

/*====================================
 FLOATING CIRCLE
====================================*/

.fi-investment-section::before{

    animation:fiCircleOne 9s ease-in-out infinite;
}

.fi-investment-section::after{

    animation:fiCircleTwo 12s ease-in-out infinite;
}

@keyframes fiCircleOne{

0%,100%{

transform:translateY(0px);
}

50%{

transform:translateY(25px);
}

}

@keyframes fiCircleTwo{

0%,100%{

transform:translateX(0px);
}

50%{

transform:translateX(-30px);
}

}

/*====================================
 CARD FLOAT
====================================*/

@keyframes fiCardFloat{

0%{

transform:translateY(0);
}

50%{

transform:translateY(-8px);
}

100%{

transform:translateY(0);
}

}

.fi-bond-card{

animation:fiCardFloat 5s ease-in-out infinite;
}

.fi-payment-card{

animation:fiCardFloat 6s ease-in-out infinite;
}

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

.fi-card-icon{

position:relative;
}

.fi-card-icon::before{

content:"";
position:absolute;
width:50%;
height:50%;
border-radius:50%;
border:2px solid rgba(215,181,109,.4);
animation:fiPulse 2s infinite;
}

@keyframes fiPulse{

0%{

transform:scale(1);

opacity:1;
}

100%{

transform:scale(1.45);

opacity:0;
}

}

/*====================================
 TIMELINE DOT
====================================*/

.fi-process-line{

overflow:hidden;
}

.fi-process-line::before{

content:"";

position:absolute;

width:14px;

height:14px;

border-radius:50%;

background:#d7b56d;

top:-5px;

left:0;

box-shadow:0 0 18px rgba(215,181,109,.9);

animation:fiTimeline 7s linear infinite;
}

@keyframes fiTimeline{

0%{

left:0%;
}

100%{

left:100%;
}

}

/*====================================
 FADE IN
====================================*/

@keyframes fiFadeUp{

from{

opacity:0;

transform:translateY(40px);
}

to{

opacity:1;

transform:translateY(0);
}

}

.fi-process-card{

animation:fiFadeUp .8s ease both;
}

.fi-process-card:nth-child(2){

animation-delay:.2s;
}

.fi-process-card:nth-child(3){

animation-delay:.4s;
}

/*====================================
 SCROLLBAR
====================================*/

::-webkit-scrollbar{

width:10px;
}

::-webkit-scrollbar-track{

background:#edf2fa;
}

::-webkit-scrollbar-thumb{

background:#244082;

border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{

background:#d7b56d;
}

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

@media(max-width:991px){

.fi-process-line{

display:none;
}

}

@media(max-width:768px){

.fi-section-title{

font-size:34px;
}

.fi-step-title{

font-size:20px;
}

.fi-card-icon{

width:90px;
height:90px;
font-size:38px;
}

.fi-support-box{

padding:20px;
}

}

@media(max-width:576px){

.fi-invest-button{

width:100%;

justify-content:center;
}

.fi-call-button{

width:100%;

justify-content:center;
}

}
/*===============================
BOTTOM CTA
===============================*/

.fi-bottom-cta-row{

    margin-top:70px;
}

/*===============================
START BUTTON BOX
===============================*/

.fi-start-btn-box{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;
}

/*===============================
START BUTTON
===============================*/

.fi-invest-button{

    background:linear-gradient(135deg,#244082,#3558a8);

    color:#fff;

    padding:18px 40px;

    border-radius:60px;

    display:inline-flex;

    align-items:center;

    gap:15px;

    font-size:18px;

    font-weight:600;

    transition:.4s;

    box-shadow:0 18px 40px rgba(36,64,130,.25);
}

.fi-invest-button:hover{

    background:linear-gradient(135deg,#d7b56d,#c79c46);

    color:#fff;

    transform:translateY(-5px);
}

.fi-invest-button i{

    transition:.4s;
}

.fi-invest-button:hover i{

    transform:translateX(8px);
}

/*===============================
SUPPORT BOX
===============================*/

.fi-support-box-new{

    background:#fff;

    border-radius:22px;

    padding:22px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 18px 45px rgba(36,64,130,.10);

    border:1px solid rgba(36,64,130,.08);

    transition:.4s;
}

.fi-support-box-new:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 55px rgba(36,64,130,.18);
}

/*===============================
LEFT SIDE
===============================*/

.fi-support-info{

    display:flex;

    align-items:center;

    gap:18px;
}

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

.fi-support-icon-new{

    width:68px;

    height:68px;

    border-radius:50%;

    background:linear-gradient(135deg,#244082,#3b5da8);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

    transition:.4s;
}

.fi-support-box-new:hover .fi-support-icon-new{

    background:linear-gradient(135deg,#d7b56d,#e6ca84);

    color:#244082;

    transform:rotate(12deg);
}

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

.fi-support-info small{

    color:#8a8a8a;

    display:block;

    margin-bottom:4px;
}

.fi-support-info h5{

    margin:0;

    color:#244082;

    font-size:22px;

    font-weight:700;

    line-height:30px;
}

/*===============================
CALL BUTTON
===============================*/

.fi-call-btn-new{

    background:linear-gradient(135deg,#244082,#3558a8);

    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    transition:.4s;
}

.fi-call-btn-new:hover{

    background:linear-gradient(135deg,#d7b56d,#c79c46);

    color:#fff;

    transform:translateY(-3px);
}

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

@media(max-width:991px){

.fi-bottom-cta-row{

gap:25px;
}

.fi-start-btn-box{

margin-bottom:20px;
}

.fi-support-box-new{

flex-direction:column;

text-align:center;

gap:20px;
}

.fi-support-info{

justify-content:center;
}

}

@media(max-width:576px){

.fi-invest-button{

width:100%;

justify-content:center;
}

.fi-call-btn-new{

width:100%;

justify-content:center;
}

.fi-support-info h5{

font-size:18px;
}

}
/*==============================

BOTTOM SECTION

==============================*/

.finpro-bottom-area{

margin-top:70px;

}

/*==============================

LEFT CARD

==============================*/

.finpro-invest-card{

height:140px;

background:linear-gradient(135deg,#244082,#3559b2);

border-radius:22px;

padding:30px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 25px 50px rgba(36,64,130,.25);

transition:.4s;

}

.finpro-invest-card:hover{

transform:translateY(-6px);

}

.finpro-invest-card h4{

color:#fff;

font-size:28px;

font-weight:700;

margin-bottom:10px;

}

.finpro-invest-card p{

color:#dfe8ff;

margin:0;

}

/*==============================

BUTTON

==============================*/

.finpro-invest-btn{

background:#fff;
color:#244082;
padding:16px 28px;
border-radius:50px;
font-weight:700;
display:flex;
align-items:center;
gap:12px;
transition:.4s;

}

.finpro-invest-btn:hover{

background:#d7b56d;

color:#fff;

}

/*==============================

RIGHT CARD

==============================*/

.finpro-help-card{

height:140px;
background:#fff;
border-radius:22px;
padding:25px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.finpro-help-left{

display:flex;
align-items:center;
gap:18px;

}

.finpro-help-icon{

width:70px;
height:70px;
border-radius:50%;
background:#244082;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
color:#fff;

}

.finpro-help-left span{

color:#999;
font-size:13px;

}

.finpro-help-left h5{

margin:0;
font-size:24px;
color:#244082;
font-weight:700;

}
@media (max-width: 767px) {

    .finpro-help-card {
        height: auto;
        min-height: 100px;
        padding: 16px;
        border-radius: 16px;
        gap: 12px;
    }

    .finpro-help-left {
        gap: 12px;
        min-width: 0;
    }

    .finpro-help-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 22px;
    }

    .finpro-help-left span {
        font-size: 11px;
        display: block;
        margin-bottom: 3px;
    }

    .finpro-help-left h5 {
        font-size: 18px;
        line-height: 1.2;
        word-break: break-word;
    }
}

@media (max-width: 480px) {

    .finpro-help-card {
        padding: 14px;
        border-radius: 14px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .07);
    }

    .finpro-help-left {
        gap: 10px;
    }

    .finpro-help-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 20px;
    }

    .finpro-help-left span {
        font-size: 10px;
    }

    .finpro-help-left h5 {
        font-size: 16px;
    }
}

.finpro-call-btn{

background:#244082;

color:#fff;

padding:15px 28px;

border-radius:50px;

font-weight:600;

transition:.4s;

}

.finpro-call-btn:hover{

background:#d7b56d;

color:#fff;

}

/*==============================

RESPONSIVE

==============================*/

@media(max-width:991px){

.finpro-invest-card,
.finpro-help-card{

height:auto;

flex-direction:column;

text-align:center;

gap:20px;

}

}

  /*==========================================
    TESTIMONIAL SECTION
    /*=========================================
 Google Font
==========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');




/*=========================================
 Testimonial Section
==========================================*/

.testimonial-section{

    position:relative;
    padding:90px 0;
    overflow:hidden;
    background:
    linear-gradient(135deg,#244082 0%,#244082 45%,#244082 100%);
}


/*=========================================
 Background Dots
==========================================*/

.bg-dots{

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-image:
    radial-gradient(rgba(255,193,7,.25) 1.5px,transparent 1.5px);
    background-size:18px 18px;
    opacity:.35;

}


/*=========================================
 Decorative Curves
==========================================*/

.curve{

    position:absolute;
    border:1px solid rgba(255,196,0,.25);
    border-radius:50%;

}

.curve1{

    width:650px;
    height:650px;
    right:-250px;
    top:-320px;

}

.curve2{

    width:520px;
    height:520px;
    right:-180px;
    top:-260px;

}

.curve3{

    width:390px;
    height:390px;
    right:-120px;
    top:-200px;

}


/*=========================================
 Floating Circles
==========================================*/

.circle{

    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.03);

}

.circle1{

    width:260px;
    height:260px;
    left:-120px;
    bottom:-120px;

}

.circle2{

    width:170px;
    height:170px;
    right:150px;
    bottom:50px;

}

.circle3{

    width:80px;
    height:80px;
    right:320px;
    top:120px;

}


/*=========================================
 Heading
==========================================*/

.section-heading{

    margin-bottom:70px;
    position:relative;
    z-index:10;

}

.section-heading span{

    color:#d7b56d;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;

}

.section-heading h2{

    color:#fff;
    font-size:46px;
    font-weight:700;
    margin-top:10px;

}

.section-heading p{

    color:#cfd7ef;
    margin-top:8px;

}


/*=========================================
 Owl Slider
==========================================*/

.testimonial-slider{

    position:relative;
    z-index:10;

}

/*=========================================
 Card
==========================================*/

.testimonial-card{

    position:relative;
    background:#fff;
    border-radius:22px;
    padding:70px 28px 35px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
    margin:45px 12px;
    transition:.35s;
    overflow:visible;
    min-height:410px;

}

.testimonial-card:hover{

    transform:translateY(-10px);

}


/*=========================================
 Profile Image
==========================================*/

.client-image{

    position:absolute;
    left:50%;
    top:-40px;
    transform:translateX(-50%);

}

.client-image img{

   .client-image img{

    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
    border:4px solid #fff;

}

}
/*=========================================
    HIDE CLIENT IMAGE - TABLET & MOBILE
=========================================*/

@media (max-width:991px){

.client-image{
    display:none !important;
}

.client-image img{
    display:none !important;
}

}
@media (max-width:991px){

.client-image img{
    display:none !important;
}

}


/*=========================================
 Text
==========================================*/

.card-content h5{

    color:#18376d;
    font-weight:700;
    margin-bottom:5px;

}

.card-content small{

    color:#777;

}

.card-content h4{

    font-size:23px;
    color:#18376d;
    font-weight:700;
    margin:20px 0;
    line-height:34px;

}

.card-content p{

    color:#666;
    line-height:28px;
    font-size:15px;

}


/*=========================================
 Stars
==========================================*/

.stars{

    margin-top:12px;

}

.stars i{

    color:#d7b56d;
    margin:0 2px;

}


/*=========================================
 Quotes
==========================================*/

.quote-left{

    position:absolute;
    top:20px;
    left:22px;
    font-size:38px;
    color:#E2E2E2;

}

.quote-right{

    position:absolute;
    right:22px;
    bottom:18px;
    font-size:38px;
    color:#E2E2E2;

}


/*=========================================
 Active Center Card
==========================================*/

.owl-item.center .testimonial-card{

    background:linear-gradient(180deg,#0C2E73,#244082);
    border:2px solid rgba(255,185,35,.35);
    transform:scale(1.08);

}

.owl-item.center .card-content h5,

.owl-item.center h4,

.owl-item.center p,

.owl-item.center small{

    color:#fff;

}

.owl-item.center .quote-left,

.owl-item.center .quote-right{

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

}

.owl-item.center .stars i{

    color:#FFD84C;

}


/*=========================================
 Smooth Animation
==========================================*/

.owl-item{

    transition:.4s;

}

.owl-item.center{

    z-index:99;

}
/*=========================================
    OWL NAVIGATION
==========================================*/

.testimonial-slider .owl-nav {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: calc(100% + 120px);
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.testimonial-slider .owl-nav button {
    pointer-events: all;
    width: 55px;
    height: 55px;
    border-radius: 50% !important;
    border: 2px solid #d7b56d !important;
    background: rgba(255,255,255,.08) !important;
    color: #d7b56d !important;
    font-size: 22px !important;
    transition: .35s;
    display: flex !important;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

.testimonial-slider .owl-nav button:hover {
    background: #d7b56d !important;
    color: #082868 !important;
    transform: scale(1.1);
}

/*=========================================
    OWL DOTS
==========================================*/

/* =========================================
   OWL NAVIGATION - DESKTOP
========================================= */

.testimonial-slider {
    position: relative;
}

.testimonial-slider .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);

    display: flex !important;
    justify-content: space-between;
    align-items: center;

    pointer-events: none;
    z-index: 100;
}

.testimonial-slider .owl-nav button.owl-prev,
.testimonial-slider .owl-nav button.owl-next {

    pointer-events: auto;

    width: 52px;
    height: 52px;

    margin: 0 !important;

    border-radius: 50% !important;

    border: 2px solid #d7b56d !important;

    background: #244082 !important;

    color: #d7b56d !important;

    font-size: 20px !important;

    display: flex !important;
    justify-content: center;
    align-items: center;

    line-height: 1 !important;

    transition: all .3s ease;
}

/* LEFT */
.testimonial-slider .owl-nav button.owl-prev {
    position: absolute;
    left: -26px;
}

/* RIGHT */
.testimonial-slider .owl-nav button.owl-next {
    position: absolute;
    right: -26px;
}

/* HOVER */

.testimonial-slider .owl-nav button.owl-prev:hover,
.testimonial-slider .owl-nav button.owl-next:hover {

    background: #d7b56d !important;
    color: #244082 !important;

    transform: scale(1.1);
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width:1200px) {

    .testimonial-slider .owl-nav button.owl-prev {
        left: -30px;
    }

    .testimonial-slider .owl-nav button.owl-next {
        right: -30px;
    }

}


/* =========================================
   LAPTOP
========================================= */

@media (min-width:992px) and (max-width:1199px) {

    .testimonial-slider .owl-nav button.owl-prev {
        left: 5px;
    }

    .testimonial-slider .owl-nav button.owl-next {
        right: 5px;
    }

}


/* =========================================
   TABLET + MOBILE
========================================= */

@media (max-width:991px) {

    .testimonial-slider .owl-nav {
        display: none !important;
    }

}

/*=========================================
    CARD HOVER
==========================================*/

.testimonial-card:hover {
    box-shadow: 0 25px 60px rgba(0,0,0,.30);
}

.owl-item.center .testimonial-card:hover {
    transform: translateY(-15px) scale(1.07);
}
.testimonial-card{

    padding-top:70px;

}

/*=========================================
    IMAGE ANIMATION
==========================================*/

.client-image img {
    transition: .4s;
}

.testimonial-card:hover .client-image img {
    transform: rotate(5deg) scale(1.08);
}
.testimonial-card{
    position: relative;
    overflow: visible;
    border-radius: 22px;
    padding: 75px 30px 35px;
}

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

@media (max-width:1199px){

    .section-heading h2{
        font-size:38px;
    }

    .testimonial-slider .owl-nav{
        width:100%;
        left:0;
    }

}

@media (max-width:991px){

    .testimonial-section{
        padding:70px 0;
    }

    .section-heading{
        margin-bottom:50px;
    }

    .section-heading h2{
        font-size:34px;
    }

    .testimonial-card{
        min-height:auto;
        padding:65px 25px 30px;
    }

    .testimonial-slider .owl-nav{
        display:none !important;
    }

}

@media (max-width:767px){

    .testimonial-section{
        padding:60px 0;
    }

    .section-heading h2{
        font-size:28px;
    }

    .section-heading p{
        font-size:14px;
    }

    .testimonial-card{
        margin:35px 5px;
        padding:60px 20px 30px;
    }

    .card-content h4{
        font-size:18px;
        line-height:28px;
    }

    .card-content p{
        font-size:14px;
        line-height:24px;
    }

    .client-image img{
        width:75px;
        height:75px;
    }

}

@media (max-width:575px){

    .section-heading span{
        font-size:11px;
    }

    .section-heading h2{
        font-size:24px;
    }

    .testimonial-card{
        border-radius:18px;
    }

    .quote-left,
    .quote-right{
        font-size:28px;
    }

}
/*=========================================
    MOBILE RESPONSIVE
==========================================*/

@media (max-width:767px){

    .testimonial-section{
        padding:60px 0;
    }

    .testimonial-slider{
        padding:0 10px;
    }

    .testimonial-card{
        width:100%;
        margin:40px 0;
        padding:60px 18px 25px;
        border-radius:18px;
        min-height:auto;
    }

    .client-image{
        top:-35px;
    }

    .client-image img{
        width:70px;
        height:70px;
        border-width:3px;
    }

    .card-content h5{
        font-size:18px;
    }

    .card-content small{
        font-size:13px;
    }

    .card-content h4{
        font-size:18px;
        line-height:28px;
        margin:15px 0;
    }

    .card-content p{
        font-size:14px;
        line-height:24px;
    }

    .quote-left{
        top:15px;
        left:15px;
        font-size:28px;
    }

    .quote-right{
        bottom:15px;
        right:15px;
        font-size:28px;
    }

    .stars{
        margin-top:10px;
    }

    .stars i{
        font-size:14px;
    }

    /* Disable scale effect on mobile */
    .owl-item.center .testimonial-card{
        transform:none;
    }

    .owl-item:not(.center) .testimonial-card{
        transform:none;
    }

    .testimonial-slider .owl-nav{
        display:none !important;
    }

    .testimonial-slider .owl-dots{
        margin-top:20px;
    }
}

/*=========================================
    SMALL MOBILE
==========================================*/

@media (max-width:480px){

    .testimonial-section{
        padding:50px 0;
    }

    .testimonial-slider{
        padding:0 5px;
    }

    .testimonial-card{
        padding:55px 15px 22px;
        border-radius:16px;
    }

    .client-image img{
        width:65px;
        height:65px;
    }

    .card-content h5{
        font-size:17px;
    }

    .card-content h4{
        font-size:16px;
        line-height:25px;
    }

    .card-content p{
        font-size:13px;
        line-height:22px;
    }

    .quote-left,
    .quote-right{
        font-size:24px;
    }
}
 /*====================================================
                FAQ SECTION
====================================================*/
/*====================================================
                FAQ SECTION
====================================================*/

.faq-section{
    background:#f7f9fc;
    padding:80px 0;
}

.faq-row{
    align-items:flex-start;
}

.faq-left,
.faq-right{
    position:relative;
}

.faq-wrapper{
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

/*====================================================
                HEADING
====================================================*/

.faq-heading{
    margin-bottom:25px;
}

.faq-heading h2{
    font-size:34px;
    font-weight:700;
    color:#0d2b63;
    margin:0;
}

/*====================================================
                ACCORDION
====================================================*/

.custom-faq .accordion-item{
    border:none;
    border-radius:12px !important;
    overflow:hidden;
    margin-bottom:15px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.35s;
}

.custom-faq .accordion-item:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(0,0,0,.10);
}

.custom-faq .accordion-button{
    background:#fff;
    color:#102c63;
    font-size:16px;
    font-weight:600;
    padding:18px 22px;
    box-shadow:none;
}

.custom-faq .accordion-button:focus{
    box-shadow:none;
}

.custom-faq .accordion-button:not(.collapsed){
    background:#fff;
    color:#0b2f73;
    font-weight:700;
}

.custom-faq .accordion-body{
    padding:20px 22px;
    font-size:15px;
    color:#666;
    line-height:28px;
}

/* Plus / Minus */

.custom-faq .accordion-button::after{
    background-image:none !important;
    content:"+";
    width:24px;
    height:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    font-weight:700;
    color:#0b2f73;
    transition:.3s;
}

.custom-faq .accordion-button:not(.collapsed)::after{
    content:"−";
    color:#F4B731;
}

/*====================================================
                CONTACT CARD
====================================================*/

.contact-card {
    position: sticky;
    top: 100px;

    width: 100%;
    min-height: 550px;
    height: 100%;

    background: linear-gradient(135deg, #244082, #0b2f73);
    border-radius: 20px;
    padding: 45px ;

    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,.18);
}
.contact-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 55px rgba(0,0,0,.22);
}

/* Decorative Circle */

.contact-card::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-120px;
    right:-120px;
}

.contact-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    border:1px solid rgba(255,193,7,.20);
    top:-70px;
    right:-70px;
}

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

.contact-bottom {
    width: 100%;
}

.contact-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;

    padding: 14px 20px;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.contact-item i {
    width: 32px;
    height: 32px;

    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);
    color: #ffc107;
}

.contact-item span {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .contact-box {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 15px 25px;

        padding: 16px 18px;
    }

    .contact-item {
        width: auto;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .contact-box {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 14px;

        padding: 16px;
    }

    .contact-item {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .contact-item span {
        font-size: 13px;
        white-space: normal;
        word-break: break-word;
    }

}

/*=========================================
        MOBILE VIEW
=========================================*/

@media (max-width:767px){

.contact-box{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:18px;
    padding:20px 18px;
    border-radius:18px;
    text-align:center;
}

.contact-item{

    width:100%;

    justify-content:center;

    gap:12px;
}

.contact-item i{

    width:45px;
    height:45px;

    font-size:18px;

    border-radius:50%;

    background:rgba(255,255,255,.10);
}

.contact-item span{

    font-size:16px;

    white-space:normal;

    word-break:break-word;

    line-height:1.5;
}

}

/*=========================================
        SMALL MOBILE
=========================================*/

@media (max-width:480px){

.contact-box{
    padding:18px 15px;
}

.contact-item{
    flex-direction:column;
    gap:8px;
}

.contact-item span{
    font-size:15px;
}

.contact-item i{
    width:42px;
    height:42px;
}

}

/*====================================================
                BUTTON
====================================================*/

.discussion-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 34px;
    background:#fff;
    color:#0b2f73;
    border-radius:40px;
    text-decoration:none;
    font-weight:700;
    transition:.35s;
}

.discussion-btn:hover{
    background:#d7b56d;
    color:#fff;
    transform:translateY(-3px);
}

/*====================================================
                CONTACT BOX
====================================================*/

.contact-bottom{
    display:flex;
    gap:15px;
    position:relative;
    z-index:2;
    margin-top:40px;
}

.contact-box{
    flex:1;
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    color:#fff;
    transition:.35s;
}

.contact-box:hover{
    border-color:#d7b56d;
    background:rgba(255,255,255,.08);
    transform:translateY(-3px);
}

.contact-box i{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.12);
    color:#d7b56d;
    font-size:18px;
    transition:.35s;
}

.contact-box:hover i{
    background:#d7b56d;
    color:#082868;
}

.contact-box span{
    font-size:15px;
    font-weight:500;
    word-break:break-word;
}

/*====================================================
                ANIMATION
====================================================*/

.faq-wrapper{
    animation:fadeLeft .8s ease;
}

.contact-card{
    animation:fadeRight .8s ease;
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

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

@media(max-width:991px){

    .contact-card{
        position:static;
        min-height:auto;
        max-height:none;
        margin-top:30px;
    }

    .contact-bottom{
        flex-direction:column;
    }

    .faq-heading h2{
        font-size:28px;
    }
}

@media(max-width:768px){

    .faq-section{
        padding:60px 0;
    }

    .faq-wrapper{
        padding:25px;
    }

    .contact-card{
        padding:28px;
    }

    .contact-content h3{
        font-size:24px;
        line-height:34px;
    }

    .discussion-btn{
        width:100%;
    }

    .custom-faq .accordion-button{
        font-size:15px;
        padding:16px 18px;
    }

    .contact-box{
        padding:15px;
    }
}

/* ==========================================================
   PREMIUM FOOTER CSS
   Generated for Bootstrap 5
   Theme: Matches provided reference
   ========================================================== */

/* =========================================================
   FOOTER
========================================================= */

.footer-section {
    background: #06173D;
    color: #ffffff;

    padding: 35px 0 25px;

    overflow: hidden;
}


/* =========================================================
   MAIN FOOTER BOX
========================================================= */

.footer-top-box {
    width: 100%;

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

    border-radius: 14px;

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

    padding: 28px 32px;
    background :white;
}


/* =========================================================
   TOP GRID
========================================================= */

.footer-grid {

    display: grid;

    grid-template-columns:
        1fr
        1.8fr
        1.25fr;

    gap: 0;

    align-items: stretch;
}


/* =========================================================
   COLUMNS
========================================================= */

.footer-column {

    min-width: 0;

    padding: 0 28px;

    border-right: 1px solid #06173D;
}

.footer-column:first-child {
    padding-left: 0;
}

.footer-column:last-child {
    padding-right: 0;

    border-right: none;
}


/* =========================================================
   HEADINGS
========================================================= */

.footer-column h5 {

    margin: 0 0 22px;
    color: #06173D;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}


/* =========================================================
   ADDRESS
========================================================= */

.address-column p {

    max-width: 330px;
    margin: 0;
    color: #06173D;
    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   LEGAL LINKS
========================================================= */

.legal-links {

    display: grid;

    grid-template-columns: 1fr 1.25fr;

    gap: 28px;
}

.legal-links ul {

    list-style: none;

    padding: 0;

    margin: 0;
}

.legal-links li {

    margin-bottom: 12px;
}

.legal-links li:last-child {
    margin-bottom: 0;
}

.legal-links a {

    color: #06173D;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    transition: .2s ease;
}

.legal-links a:hover {

    color: #D7B56D;

    padding-left: 3px;
}


/* =========================================================
   COMPANY DETAILS
========================================================= */

.company-details {

    list-style: none;

    padding: 0;

    margin: 0;
}

.company-details li {

    color: #06173D;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 13px;
}

.company-details li:last-child {
    margin-bottom: 0;
}

.company-details strong {

    color: #06173D

    font-weight: 600;
}
.address-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.address-column h5 {
    margin: 0 0 18px 0;
    line-height: 1.2;
}

.address-column p {
    margin: 0;
    line-height: 1.55;
}


.address-column .global-logo {
    display: block;
    width: 235px;
    height: auto;

    margin-top: 10px;
    margin-left: -5px;
    margin-right: 0;

    object-fit: contain;
    object-position: left center;
}


/* =========================================================
   SOCIAL + CERTIFICATES
========================================================= */

.footer-social-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(255,255,255,.10);
}


/* SOCIAL */

.footer-social {

    display: flex;

    align-items: center;

    gap: 10px;
}

.footer-social a {

    width: 38px;
    height: 38px;

    border-radius: 50%;

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

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    transition: .2s ease;
}

.footer-social a:hover {

    background: #D7B56D;

    color: #06173D;

    transform: translateY(-2px);
}


/* CERTIFICATES */

.footer-certificates {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 36px;
}

.certificate {

    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.certificate i {

    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(215,181,109,.12);
    color: #D7B56D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.footer-disclaimer {

    padding: 20px 0;

    border-bottom: 1px solid rgba(255,255,255,.10);

    text-align: center;
}

.footer-disclaimer p {

    max-width: 1120px;
    margin: auto;
    color: rgba(255,255,255,.67);
    font-size: 15px;
    line-height: 1.7;
}

.footer-disclaimer span {

    color: #D7B56D;
    font-family: monospace;
    font-weight: 700;
    margin-right: 5px;
    font-size:20px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-bottom {

    padding-top: 20px;

    text-align: center;
}

.footer-bottom p {

    margin: 0;

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

    font-size: 15px;

    line-height: 1.6;
}


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

@media (max-width: 1100px) {

    .footer-grid {

        grid-template-columns:
            1fr 1.6fr;

        row-gap: 30px;
    }

    .company-column {

        grid-column: 1 / -1;

        padding: 25px 0 0;

        border-right: none;

        border-top: 1px solid rgba(255,255,255,.10);
    }

    .footer-certificates {

        gap: 18px;
    }

}


@media (max-width: 768px) {

    .footer-section {
        padding: 25px 0 20px;
    }

    .footer-top-box {
        padding: 24px 20px;
    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 28px;
    }

    .footer-column {

        padding: 0 0 25px;

        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .footer-column:last-child {

        padding-bottom: 0;

        border-bottom: none;
    }

    .company-column {

        grid-column: auto;

        padding: 0;

        border-top: none;
    }

    .legal-links {

        grid-template-columns: 1fr 1fr;

        gap: 20px;
    }

    .footer-social-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }

    .footer-certificates {

        width: 100%;

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 15px 25px;
    }

}


@media (max-width: 480px) {

    .legal-links {

        grid-template-columns: 1fr;
    }

    .footer-certificates {

        flex-direction: column;

        align-items: flex-start;
    }

    .footer-disclaimer p {

        text-align: left;

        font-size: 11px;
    }

    .footer-bottom p {

        font-size: 15px;
    }

}
.bond-features {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.bond-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s ease;
}

.bond-features li i {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #1b5e20;
    font-size: 11px;
}

.bond-features li:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.15);
}
.bondSwiper .swiper-pagination {
    position: relative;
    bottom: auto !important;
    margin-top: 22px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bondSwiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px !important;
    opacity: 0.45;
}

.bondSwiper .swiper-pagination-bullet-active {
    opacity: 1;
}
/*=========================================
login page 
==========================================*/
/*====================================
 BOND FEATURE STRIP
====================================*/

.bond-feature-strip{
    margin:0;
    padding:0;
    width:100%;
}

.bond-feature-inner{
    background:#ffffff;
    border-radius:0;

    padding:12px 40px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    width:100%;
    box-sizing:border-box;

    gap:0;

    box-shadow:0 8px 25px rgba(0,0,0,.04);
}


/*====================================
 TITLE
====================================*/

.bond-feature-title{
    flex:1.4 1 0;
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:0 20px;
    box-sizing:border-box;
}

.bond-feature-title small,
.bond-feature-stat small{
    color:#d7b56d;
    font-size:7px;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:3px;
}

.bond-feature-title strong{
    color:#244082;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}


/*====================================
 STAT COLUMNS
====================================*/

.bond-feature-stat{
    flex:1 1 0;
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:0 15px;

    min-height:36px;

    border-left:1px solid #dfe3ea;

    box-sizing:border-box;
}

.bond-feature-stat small{
    color:#8a8f99;
}

.bond-feature-stat strong{
    color:#12284d;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}


/*====================================
 BUTTON
====================================*/

.bond-feature-action{
    flex:0 0 160px;

    width:160px;

    margin:0 0 0 15px;

    padding:11px 15px;

    background:#082650;
    color:#ffffff;

    border-radius:30px;

    text-decoration:none;
    text-align:center;

    font-size:11px;
    font-weight:700;

    white-space:nowrap;

    box-sizing:border-box;

    transition:.3s;
}

.bond-feature-action:hover{
    background:#244082;
    color:#ffffff;
    transform:translateY(-2px);
}


/*====================================
 REMOVE EXTRA TOP/BOTTOM SPACING
====================================*/

.bond-feature-strip,
.bond-feature-strip *{
    box-sizing:border-box;
}

.bond-feature-strip{
    margin-top:0 !important;
}

.bond-feature-inner{
    margin-top:0 !important;
}


/*====================================
 MOBILE
====================================*/

@media(max-width:900px){

    .bond-feature-inner{
        flex-wrap:wrap;
        padding:15px 20px;
    }

    .bond-feature-title{
        flex:100%;
        padding:0 0 12px;
    }

    .bond-feature-stat{
        flex:1 1 0;
        padding:8px;
    }

    .bond-feature-action{
        flex:100%;
        width:100%;
        margin:12px 0 0;
    }
}
```css
/* =========================================================
   MOBILE DESIGN — BONDS PARTNERS CONTACT PAGE
   Add this AFTER your existing CSS
========================================================= */

@media (max-width: 767px) {

    /* =========================
       GLOBAL MOBILE
    ========================= */

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 14px;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }


    /* =========================
       HEADER / NAVBAR
    ========================= */

    .header-area {
        position: relative;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 4px 20px rgba(6, 23, 61, .06);
    }

    .header-area .navbar {
        min-height: 68px;
        padding: 10px 0;
    }

    .navbar-brand {
        margin-right: 0;
    }

    .navbar-brand img {
        width: 145px;
        max-width: 145px;
        height: auto;
    }

    .navbar-toggler {
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid #E3E8EF;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        box-shadow: none !important;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(215,181,109,.15) !important;
    }

    .navbar-toggler-icon {
        width: 21px;
        height: 21px;
    }

    .navbar-collapse {
        margin-top: 12px;
        padding: 14px 0 4px;
        border-top: 1px solid #EEF1F5;
    }

    .navbar-nav {
        width: 100%;
        margin: 0 !important;
        gap: 2px;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 12px !important;
        border-radius: 8px;
        color: #16233D;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .4px;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: #06173D;
        background: #F6EDDB;
    }

    .header-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
        padding-top: 14px;
        border-top: 1px solid #EEF1F5;
    }

    .search-box {
        width: 100%;
        display: flex;
    }

    .search-box input {
        width: 100%;
    }

    .login-btn,
    .signup-btn {
        width: 100%;
        text-align: center;
        min-height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }


    /* =========================
       HERO
    ========================= */

    .contact-hero {
        min-height: auto;
    }

    .contact-hero-inner {
        width: 100%;
        padding: 46px 20px 92px;
    }

    .hero-eyebrow {
        font-size: 10px;
        letter-spacing: 1.7px;
        gap: 8px;
        margin-bottom: 16px;
    }

    .eyebrow-line {
        width: 24px;
    }

    .contact-hero h1 {
        max-width: 100%;
        font-size: clamp(36px, 10vw, 48px);
        line-height: 1.08;
        letter-spacing: -1.8px;
        margin-bottom: 18px;
    }

    .hero-text {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
        color: rgba(255,255,255,.68);
    }

    .contact-hero::before {
        width: 360px;
        height: 360px;
        right: -230px;
        top: -230px;
    }

    .contact-hero::after {
        width: 180px;
        height: 180px;
        left: -120px;
        bottom: -120px;
    }


    /* =========================
       MAIN CONTENT
    ========================= */

    .contact-main {
        width: calc(100% - 28px);
        margin: -48px auto 55px;
    }

    .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }


    /* =========================
       FORM CARD
    ========================= */

    .contact-form-card {
        width: 100%;
        padding: 25px 18px 22px;
        border-radius: 15px;
        box-shadow: 0 12px 35px rgba(6, 23, 61, .08);
    }

    .card-eyebrow {
        font-size: 10px;
        letter-spacing: 1.4px;
        margin-bottom: 8px;
    }

    .contact-form-card h2 {
        font-size: 23px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .card-description {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 22px;
    }


    /* =========================
       FORM
    ========================= */

    .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .form-group {
        width: 100%;
    }

    .form-group.full {
        grid-column: auto;
    }

    .form-group label {
        font-size: 12px;
        margin-bottom: 7px;
    }

    .form-group input {
        width: 100%;
        height: 48px;
        min-height: 48px;
        padding: 0 13px;
        font-size: 13px;
        border-radius: 8px;
    }

    .form-group textarea {
        width: 100%;
        min-height: 120px;
        padding: 12px 13px;
        font-size: 13px;
        border-radius: 8px;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
        font-size: 12px;
    }


    /* =========================
       CAPTCHA
    ========================= */

    .captcha-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .captcha-image {
        width: 100%;
        height: 50px;
        min-height: 50px;
        font-size: 21px;
    }

    .captcha-input {
        width: 100%;
        height: 48px;
        font-size: 13px;
    }


    /* =========================
       SUBMIT BUTTON
    ========================= */

    .form-submit {
        width: 100%;
        margin-top: 21px;
        justify-content: stretch;
    }

    .submit-button {
        width: 100%;
        min-width: 0;
        height: 50px;
        min-height: 50px;
        border-radius: 8px;
        font-size: 12px;
    }


    /* =========================
       RIGHT SIDE
    ========================= */

    .contact-info {
        width: 100%;
        gap: 15px;
    }


    /* =========================
       LOCATION CARD
    ========================= */

    .location-card {
        width: 100%;
        min-height: auto;
        padding: 23px 20px;
        border-radius: 15px;
    }

    .location-icon {
        width: 43px;
        height: 43px;
        margin-bottom: 17px;
        border-radius: 10px;
        font-size: 16px;
    }

    .location-card h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .location-card p {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.7;
    }


    /* =========================
       PHONE + EMAIL
    ========================= */

    .info-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .info-card {
        width: 100%;
        padding: 18px 14px;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(6, 23, 61, .06);
    }

    .info-icon {
        width: 37px;
        height: 37px;
        margin-bottom: 12px;
        border-radius: 8px;
        font-size: 13px;
    }

    .info-card h4 {
        font-size: 12px;
        line-height: 1.35;
        margin-bottom: 5px;
    }

    .info-card p {
        font-size: 11px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }


    /* =========================
       SUPPORT CARD
    ========================= */

    .support-card {
        width: 100%;
        padding: 20px 17px;
        border-radius: 12px;
    }

    .support-header {
        gap: 10px;
        margin-bottom: 11px;
    }

    .support-icon {
        width: 37px;
        height: 37px;
        flex: 0 0 37px;
        border-radius: 8px;
    }

    .support-header h4 {
        font-size: 13px;
    }

    .support-card p {
        font-size: 12px;
        line-height: 1.6;
    }

    .support-contact-row {
        margin-top: 14px;
        padding: 10px;
        gap: 9px;
    }

    .support-contact-row .support-phone-icon {
        width: 31px;
        height: 31px;
        flex: 0 0 31px;
    }

    .support-contact-copy span {
        font-size: 8px;
    }

    .support-contact-copy a {
        font-size: 12px;
    }

    .support-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 11px;
    }

    .support-cta {
        min-height: 42px;
        padding: 8px 7px;
        font-size: 9px;
        gap: 5px;
    }


    /* =========================
       TRUST STRIP
    ========================= */

    .trust-strip {
        width: 100%;
        margin-top: 18px;
        padding: 17px 18px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px 10px;
        border-radius: 12px;
    }

    .trust-item {
        align-items: flex-start;
        gap: 7px;
        font-size: 10px;
        line-height: 1.4;
    }

    .trust-item i {
        flex: 0 0 auto;
        font-size: 13px;
        margin-top: 1px;
    }


    /* =====================================================
       FOOTER MOBILE
    ===================================================== */

    .footer-section {
        width: 100%;
        overflow: hidden;
    }

    .footer-section .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .footer-top-box {
        padding: 0;
    }

    .footer-grid {
        display: flex !important;
        flex-direction: column;
        gap: 28px;
    }

    .footer-column {
        width: 100%;
    }

    .footer-column h5 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .footer-column p {
        font-size: 11px;
        line-height: 1.7;
    }

    .global-logo {
        width: 180px !important;
        max-width: 100%;
        margin-top: 8px !important;
    }

    .legal-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .legal-links ul {
        margin: 0;
        padding: 0;
    }

    .legal-links li {
        margin-bottom: 8px;
    }

    .legal-links a {
        font-size: 10px;
        line-height: 1.4;
    }

    .company-details {
        padding-left: 0;
        margin: 0;
        list-style: none;
    }

    .company-details li {
        font-size: 10px;
        line-height: 1.65;
        margin-bottom: 7px;
    }

    /*====================================
Bonds 
====================================*/

:root {
    --bond-navy: #13244E;
    --bond-gold: #d7b56d;
    --bond-gold-dark: #96763d;
    --bond-text: #25334a;
    --bond-muted: #737f91;
    --bond-border: #e5e9ef;
    --bond-background: #f7f8fa;
    --bond-cream: #fcf9f1;
  }

  .bond-opportunities,
  .bond-opportunities * { box-sizing: border-box; }

  .bond-opportunities {
    padding: 48px 20px;
    overflow: hidden;
    background:
      radial-gradient(900px 300px at 10% -10%, rgba(215,181,109,.12), transparent 60%),
      var(--bond-background);
    color: var(--bond-text);
    font-family: "Lato", Arial, sans-serif;
  }

  .bond-section-inner { width: min(100%, 1360px); margin: 0 auto; }

  /* ---------- Section heading ---------- */
  .bond-heading-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 28px;
  }
  .bond-eyebrow { margin: 0 0 9px; color: var(--bond-gold-dark); font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
  .bond-heading-row h2 { margin: 0; color: var(--bond-navy); font-size: clamp(28px, 3vw, 37px); font-weight: 900; line-height: 1.2; }
  .bond-heading-description { margin: 10px 0 0; color: var(--bond-muted); font-size: 15px; line-height: 1.6; }
  .bond-view-all {
    display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px;
    padding: 12px 16px; border: 1px solid var(--bond-border); border-radius: 6px;
    color: var(--bond-navy); background: #fff;
    font-size: 13px; font-weight: 900; text-decoration: none; transition: .25s ease;
  }
  .bond-view-all span { transition: transform .25s ease; }
  .bond-view-all:hover { border-color: var(--bond-gold); background: #fffaf0; transform: translateY(-2px); }
  .bond-view-all:hover span { transform: translateX(4px); }

  /* ---------- Slider ---------- */
  .bondSwiper { padding: 14px 6px 26px; overflow: hidden; }
  .bondSwiper .swiper-wrapper { align-items: stretch; }
  .bondSwiper .swiper-slide { display: flex; height: auto; min-width: 0; }
  .bondSwiper .swiper-slide > .bond-card { height: 100%; }

  /* ---------- Card ---------- */
  .bond-card {
    position: relative; display: flex; flex-direction: column; width: 100%;
    padding: 0; margin: 0; container-type: inline-size;
    border: 1px solid var(--bond-border); border-radius: 16px; overflow: hidden;
    background: #fff; box-shadow: 0 6px 20px rgba(19,36,78,.06);
    opacity: 0; transform: translateY(24px);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity .6s ease;
  }
  .bond-opportunities.is-visible .bond-card { opacity: 1; transform: translateY(0); }
  .bond-opportunities.is-visible .swiper-slide:nth-child(2) .bond-card { transition-delay: .08s; }
  .bond-opportunities.is-visible .swiper-slide:nth-child(3) .bond-card { transition-delay: .16s; }
  .bond-opportunities.is-visible .swiper-slide:nth-child(4) .bond-card { transition-delay: .24s; }
  .bond-opportunities.is-visible .bond-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(19,36,78,.14);
    transition-delay: 0s;
  }

  /* ---------- Compact header (bond / investment theme) ---------- */
  .bond-card-header {
    position: relative; width: 100%; margin: 0;
    padding: 40px 0 0;
    background-color: #0e1c40;
    background-image:
      /* soft navy fade behind the logo so it stays clean */
      radial-gradient(ellipse 45% 130% at 50% 100%, rgba(14,28,64,.9), transparent 75%),
      /* candlestick chart + gold trend line */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 15H400M0 30H400M0 45H400M0 60H400' stroke='white' stroke-opacity='.06'/%3E%3Cpath d='M20 48V66M48 44V62M76 42V58M104 36V54M132 38V56M160 30V48M188 32V46M216 24V42M244 26V40M272 18V36M300 14V32M328 16V30M356 8V26M384 4V22' stroke='white' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cg fill='%23d7b56d' fill-opacity='.8'%3E%3Crect x='16' y='53' width='8' height='9'/%3E%3Crect x='72' y='46' width='8' height='9'/%3E%3Crect x='100' y='44' width='8' height='6'/%3E%3Crect x='156' y='34' width='8' height='10'/%3E%3Crect x='212' y='28' width='8' height='10'/%3E%3Crect x='268' y='22' width='8' height='10'/%3E%3Crect x='296' y='18' width='8' height='10'/%3E%3Crect x='352' y='12' width='8' height='10'/%3E%3Crect x='380' y='8' width='8' height='10'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.3'%3E%3Crect x='44' y='50' width='8' height='8'/%3E%3Crect x='128' y='42' width='8' height='10'/%3E%3Crect x='184' y='36' width='8' height='6'/%3E%3Crect x='240' y='30' width='8' height='6'/%3E%3Crect x='324' y='19' width='8' height='7'/%3E%3C/g%3E%3Cpath d='M20 57L48 54L76 50L104 47L132 47L160 39L188 39L216 33L244 33L272 27L300 23L328 22L356 17L384 13' fill='none' stroke='%23f3dfae' stroke-opacity='.9' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='384' cy='13' r='3' fill='%23f3dfae'/%3E%3C/svg%3E"),
      /* gold glow top-right */
      radial-gradient(260px 140px at 100% 0%, rgba(215,181,109,.30), transparent 70%),
      linear-gradient(135deg, #1d3566, #0e1c40);
    background-size: 100% 100%, cover, 100% 100%, 100% 100%;
    background-position: center, center bottom, center, center;
    background-repeat: no-repeat;
  }
  .bond-card-header::before {             /* gold shimmer line */
    content: ""; position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--bond-gold), #f3dfae, var(--bond-gold));
    background-size: 200% 100%; animation: bondShimmer 3s linear infinite;
  }

  .bond-company-logo {
    position: absolute; z-index: 3; top: 10px; left: 50%;
    width: 52px; height: 52px; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #e6e1d6; border-radius: 15px; background: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.28);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .bond-company-logo img { display: block; width: 100%; height: 100%; padding: 8px; object-fit: contain; }
  .bond-card:hover .bond-company-logo { transform: translateX(-50%) translateY(-3px) scale(1.07); }

  .bond-company-panel {
    position: relative; z-index: 2; overflow: hidden;
    padding: 40px 12px 14px;
    text-align: center;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(215,181,109,.6);
    border-bottom: 1px solid #efe6cf;
    background-color: #fffdf8;
    background-image:
      /* rupee coin (top-right) + rising bars (bottom-left) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='xMidYMid slice'%3E%3Ccircle cx='262' cy='26' r='30' fill='none' stroke='%23d7b56d' stroke-opacity='.45' stroke-width='1.2'/%3E%3Ccircle cx='262' cy='26' r='23' fill='none' stroke='%23d7b56d' stroke-opacity='.3' stroke-dasharray='2 3'/%3E%3Ctext x='262' y='37' font-size='30' text-anchor='middle' fill='%23d7b56d' fill-opacity='.4' font-family='Georgia,serif' font-weight='700'%3E%E2%82%B9%3C/text%3E%3Cg fill='%23d7b56d' fill-opacity='.13'%3E%3Crect x='12' y='98' width='10' height='12'/%3E%3Crect x='26' y='88' width='10' height='22'/%3E%3Crect x='40' y='76' width='10' height='34'/%3E%3Crect x='54' y='62' width='10' height='48'/%3E%3C/g%3E%3Cpath d='M17 94L31 83L45 70L59 56' fill='none' stroke='%23d7b56d' stroke-opacity='.4' stroke-width='1.2'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #ffffff 0%, #fbf6e9 100%);
    background-size: cover, 100% 100%;
    background-position: center, 0 0;
    background-repeat: no-repeat;
  }
  .bond-company-panel::before {           /* thin gold divider at the bottom */
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--bond-gold), transparent);
  }
  .bond-company-panel::after {            /* hover shine */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
    transform: translateX(-120%);
  }
  .bond-card:hover .bond-company-panel::after { transform: translateX(120%); transition: transform .9s ease; }

  .bond-header-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em; margin: 0; color: var(--bond-navy);
    font-family: "Lato", Arial, sans-serif; font-size: 14px; font-weight: 900;
    line-height: 1.35; letter-spacing: .3px; text-transform: uppercase; overflow-wrap: anywhere;
  }

  /* ---------- Card body ---------- */
  .bond-card-body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }

  .bond-type-pill {
    align-self: flex-start; padding: 5px 10px; margin-bottom: 10px;
    border: 1px solid #eee5d2; border-radius: 999px;
    color: #806735; background: #fcfaf5; font-size: 10px; font-weight: 900; letter-spacing: .4px;
  }
  .bond-card-title {
    height: 45px; margin: 0 0 12px; color: var(--bond-navy);
    font-size: 15px; font-weight: 900; line-height: 1.5; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bond-field-label { display: block; margin-bottom: 4px; color: var(--bond-muted); font-size: 11px; font-weight: 700; }

  /* ISIN */
  .bond-isin-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; margin-bottom: 6px;
    border: 1px dashed #dcc999; border-radius: 10px;
    background: linear-gradient(135deg, #fffdf8, #fbf5e6);
  }
  .bond-isin-row .bond-field-label { margin-bottom: 2px; }
  .bond-isin-value { color: var(--bond-navy); font-size: 14px; font-weight: 900; letter-spacing: .8px; overflow-wrap: anywhere; }
  .bond-copy-btn {
    flex: 0 0 32px; width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #eadfc4; border-radius: 8px;
    color: var(--bond-gold-dark); background: #fff; cursor: pointer; transition: .2s ease;
  }
  .bond-copy-btn svg { width: 15px; height: 15px; }
  .bond-copy-btn:hover { color: var(--bond-navy); background: var(--bond-gold); border-color: var(--bond-gold); transform: scale(1.06); }
  .bond-copy-btn.copied { color: #fff; background: #2e8b57; border-color: #2e8b57; }

  /* Metrics */
  .bond-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
  .bond-metric {
    display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 54px;
    padding: 8px 8px 8px 0; border-bottom: 1px solid var(--bond-border); overflow-wrap: anywhere;
  }
  .bond-metric:nth-child(odd) { border-right: 1px solid var(--bond-border); }
  .bond-metric:nth-child(even) { padding-left: 12px; padding-right: 0; }
  .bond-metric strong { color: var(--bond-text); font-size: 13px; font-weight: 900; line-height: 1.45; }
  .bond-rating { color: #1f7a4d !important; }
  .bond-rating-by { color: var(--bond-muted); font-size: 11px; font-weight: 700; letter-spacing: .2px; }

  /* ---------- Actions: two equal buttons in one aligned row ---------- */
  .bond-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    margin-top: auto; padding-top: 2px;
  }
  .bond-price-btn,
  .bond-details-btn {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 44px; padding: 0 8px; border-radius: 8px;
    font-size: 12px; font-weight: 900; line-height: 1; white-space: nowrap;
    text-decoration: none; transition: .25s ease;
  }

  /* Login for Price: gold */
  .bond-price-btn {
    border: 1.5px solid var(--bond-gold); color: var(--bond-navy);
    background: linear-gradient(135deg, #e9cf92, var(--bond-gold));
    box-shadow: 0 5px 12px rgba(215,181,109,.38);
  }
  .bond-price-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }
  .bond-price-btn::before {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
  }
  .bond-price-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(215,181,109,.55); }
  .bond-price-btn:hover::before { left: 130%; }

  /* View Details: navy outline */
  .bond-details-btn {
    border: 1.5px solid var(--bond-navy); color: var(--bond-navy); background: #fff;
  }
  .bond-btn-arrow { color: var(--bond-gold-dark); font-size: 15px; transition: transform .25s ease; }
  .bond-details-btn:hover { color: #fff; background: var(--bond-navy); transform: translateY(-2px); }
  .bond-details-btn:hover .bond-btn-arrow { color: var(--bond-gold); transform: translateX(4px); }

  /* ---------- Footer / controls ---------- */
  .bond-slider-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; }
  .bond-pagination { position: static; width: auto !important; }
  .bond-pagination .swiper-pagination-bullet {
    width: 7px; height: 7px; margin: 0 3px !important; background: #cbd2dd; opacity: 1;
    transition: width .3s ease, background .3s ease;
  }
  .bond-pagination .swiper-pagination-bullet-active { width: 24px; border-radius: 5px; background: var(--bond-gold); }

  .bond-slider-arrows { display: flex; gap: 8px; }
  .bond-prev, .bond-next {
    width: 40px; height: 40px; border: 1px solid var(--bond-border); border-radius: 8px;
    color: var(--bond-navy); background: #fff; font-size: 17px; cursor: pointer; transition: .2s ease;
  }
  .bond-prev:hover, .bond-next:hover { border-color: var(--bond-gold); background: var(--bond-navy); color: var(--bond-gold); transform: translateY(-2px); }

  .bond-disclaimer { margin: 14px 0 0; color: var(--bond-muted); font-size: 11px; line-height: 1.6; }


  /* ---------- Desktop / laptop alignment fixes ---------- */
  .bond-opportunities .bondSwiper .bond-card { padding: 0 !important; margin: 0 !important; }
  .bond-opportunities .bond-card > .bond-card-header { width: 100% !important; margin: 0 !important; padding: 40px 0 0 !important; }
  .bond-opportunities .bond-card > .bond-card-body { width: 100%; padding: 16px 18px 18px !important; }
  .bond-opportunities .bond-card-header,
  .bond-opportunities .bond-card-body { float: none; max-width: none; }

  /* pagination dots centred with the arrow buttons */
  .bond-opportunities .bond-slider-footer { align-items: center; min-height: 40px; }
  .bond-opportunities .bond-pagination {
    position: static !important; transform: none !important; width: auto !important;
    display: flex; align-items: center; height: 40px; margin: 0; padding: 0;
  }
  .bond-opportunities .bond-pagination .swiper-pagination-bullet { display: block; flex: 0 0 auto; }

  /* buttons stack only when the card itself is narrow */
  @container (max-width: 270px) {
    .bond-actions { grid-template-columns: 1fr; }
  }

  /* laptop */
  @media (min-width: 900px) and (max-width: 1199px) {
    .bond-opportunities { padding: 44px 24px; }
  }
  /* large desktop */
  @media (min-width: 1200px) {
    .bond-opportunities { padding: 56px 32px; }
    .bond-heading-row { margin-bottom: 36px; }
    .bond-card-body { padding: 18px 20px 20px !important; }
    .bond-header-title { font-size: 14.5px; }
  }

  /* =========================================================
     DESKTOP / LAPTOP ONLY (1024px and up) – mobile is untouched
     ========================================================= */
  @media (min-width: 1024px) {
    /* remove the outer box around the slider */
    .bond-section,
    .bond-section .container { background: transparent !important; }
    .bond-opportunities {
      background: transparent !important; box-shadow: none !important;
      border: 0 !important; border-radius: 0 !important;
      padding: 56px 0 40px !important;
    }
    .bond-opportunities .bond-section-inner { width: min(100%, 1280px); padding: 0 24px; }

    /* heading */
    .bond-opportunities .bond-heading-row { margin-bottom: 34px; align-items: flex-end; }
    .bond-opportunities .bond-heading-row h2 { font-size: 40px; letter-spacing: -.3px; }
    .bond-opportunities .bond-heading-description { font-size: 16px; }
    .bond-opportunities .bond-view-all { padding: 13px 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(19,36,78,.05); }

    /* slider area: room for shadow + hover lift, no clipping */
    .bond-opportunities .bondSwiper { padding: 16px 10px 34px; margin: 0 -10px; }

    /* cards */
    .bond-opportunities .bondSwiper .bond-card {
      border-radius: 18px; border: 1px solid #e8ecf2;
      box-shadow: 0 8px 26px rgba(19,36,78,.07);
    }
    .bond-opportunities.is-visible .bond-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(19,36,78,.15); }

    /* header: a little taller + bigger logo */
    .bond-opportunities .bond-card > .bond-card-header { padding: 46px 0 0 !important; border-radius: 18px 18px 0 0; }
    .bond-opportunities .bond-company-logo { width: 60px; height: 60px; top: 12px; border-radius: 17px; }
    .bond-opportunities .bond-company-logo img { padding: 9px; }
    .bond-opportunities .bond-company-panel { padding: 46px 14px 16px; border-radius: 24px 24px 0 0; }
    .bond-opportunities .bond-header-title { font-size: 14.5px; }

    /* body */
    .bond-opportunities .bond-card > .bond-card-body { padding: 20px 22px 22px !important; }
    .bond-opportunities .bond-type-pill { margin-bottom: 12px; }
    .bond-opportunities .bond-card-title { height: 46px; font-size: 15px; margin-bottom: 14px; }
    .bond-opportunities .bond-isin-row { padding: 12px 14px; margin-bottom: 8px; }
    .bond-opportunities .bond-metric { min-height: 58px; }
    .bond-opportunities .bond-metric strong { font-size: 14px; }
    .bond-opportunities .bond-metrics { margin-bottom: 20px; }

    /* buttons */
    .bond-opportunities .bond-actions { gap: 12px; }
    .bond-opportunities .bond-price-btn,
    .bond-opportunities .bond-details-btn { height: 46px; font-size: 12.5px; padding: 0 10px; border-radius: 9px; }

    /* controls */
    .bond-opportunities .bond-slider-footer { margin-top: 8px; }
    .bond-opportunities .bond-prev,
    .bond-opportunities .bond-next { width: 44px; height: 44px; border-radius: 10px; }
    .bond-opportunities .bond-pagination { height: 44px; }
    .bond-opportunities .bond-disclaimer { margin-top: 18px; font-size: 12px; }
  }

  /* ---------- Keyframes ---------- */
  @keyframes bondShimmer { to { background-position: -200% 0; } }

  /* ---------- Responsive ---------- */
  @media (max-width: 767px) {
    .bond-opportunities { padding: 32px 15px; }
    .bond-heading-row { align-items: flex-start; flex-direction: column; gap: 16px; }
    .bond-heading-row h2 { font-size: 29px; }
    .bond-card-body { padding: 16px; }
  }
  @media (max-width: 380px) {
    .bond-header-title { font-size: 13px; letter-spacing: .2px; }
    .bond-isin-value { font-size: 13px; letter-spacing: .5px; }
    .bond-metric strong { font-size: 12px; }
    .bond-actions { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bond-card { opacity: 1; transform: none; }
    .bond-opportunities *, .bond-opportunities *::before, .bond-opportunities *::after {
      animation: none !important; transition-duration: .01ms !important;
    }
  }

  .ft-section {
    --ft-navy: #13244E;
    --ft-navy-deep: #0b1733;
    --ft-gold: #d7b56d;
    --ft-gold-soft: #f3dfae;
    --ft-text: rgba(255,255,255,.74);
    --ft-line: rgba(255,255,255,.10);

    position: relative;
    overflow: hidden;
    color: var(--ft-text);
    font-family: "Lato", Arial, sans-serif;
    background:
      radial-gradient(700px 260px at 85% 0%, rgba(215,181,109,.14), transparent 65%),
      linear-gradient(180deg, var(--ft-navy) 0%, var(--ft-navy-deep) 100%);
  }
  .ft-section,
  .ft-section *,
  .ft-section *::before,
  .ft-section *::after { box-sizing: border-box; }

  .ft-section ul { margin: 0; padding: 0; list-style: none; }
  .ft-section a { text-decoration: none; }
  .ft-section p { margin: 0; }

  /* gold shimmer line on top */
  .ft-section::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--ft-gold), var(--ft-gold-soft), var(--ft-gold));
    background-size: 200% 100%; animation: ftShimmer 4s linear infinite;
  }
  /* soft triangle pattern (same style as the bond cards) */
  .ft-section::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='%23ffffff' fill-opacity='.025'%3E%3Cpath d='M0 104L30 52L60 104z'/%3E%3Cpath d='M60 104L90 52L120 104z'/%3E%3Cpath d='M30 52L60 0L90 52z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90px 78px;
  }

  .ft-container {
    position: relative; z-index: 1;
    width: min(100%, 1280px); margin: 0 auto;
    padding: 64px 24px 0;
  }

  /* ---------- Top grid ---------- */
  .ft-top {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr 1fr;
    gap: 48px;
    padding-bottom: 44px;
  }

  .ft-title {
    position: relative;
    margin: 0 0 22px; padding-bottom: 14px;
    color: #fff; font-size: 16px; font-weight: 900; line-height: 1.4; letter-spacing: .2px;
  }
  .ft-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 36px; height: 3px; border-radius: 3px; background: var(--ft-gold);
    transition: width .35s ease;
  }
  .ft-col:hover .ft-title::after { width: 64px; }

  /* address */
  .ft-addr { display: flex; gap: 12px; font-size: 14px; line-height: 1.8; }
  .ft-addr i { flex: 0 0 auto; margin-top: 5px; color: var(--ft-gold); font-size: 15px; }

  .ft-logo-chip {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 20px; padding: 12px 16px; max-width: 100%;
    border-radius: 12px; background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .ft-logo-chip:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.32); }
  .ft-logo { display: block; width: 200px; max-width: 100%; height: auto; }

  /* legal links */
  .ft-legal-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .ft-legal-links li { border-bottom: 1px solid var(--ft-line); }
  .ft-legal-links a {
    position: relative; display: flex; align-items: center; gap: 0;
    padding: 11px 0; color: var(--ft-text);
    font-size: 14px; font-weight: 700; line-height: 1.4;
    transition: color .25s ease, padding-left .25s ease;
  }
  .ft-legal-links a::before {
    content: "›"; width: 0; overflow: hidden; color: var(--ft-gold);
    font-size: 18px; line-height: 1; opacity: 0;
    transition: width .25s ease, opacity .25s ease, margin .25s ease;
  }
  .ft-legal-links a:hover { color: var(--ft-gold-soft); }
  .ft-legal-links a:hover::before { width: 14px; margin-right: 4px; opacity: 1; }

  /* company details */
  .ft-company-details { display: grid; gap: 12px; }
  .ft-company-details li {
    padding: 13px 16px; border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ft-line); border-left: 3px solid var(--ft-gold);
    transition: background .25s ease, transform .25s ease;
  }
  .ft-company-details li:hover { background: rgba(255,255,255,.09); transform: translateX(4px); }
  .ft-label {
    display: block; margin-bottom: 4px;
    color: var(--ft-gold); font-size: 10.5px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase;
  }
  .ft-company-details strong { color: #fff; font-size: 14.5px; font-weight: 900; letter-spacing: .3px; overflow-wrap: anywhere; }

  /* ---------- Social + certificates ---------- */
  .ft-social-row {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 26px 0; border-top: 1px solid var(--ft-line);
  }
  .ft-social { display: flex; gap: 10px; }
  .ft-social a {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; font-size: 15px;
    border: 1px solid rgba(215,181,109,.45); background: rgba(255,255,255,.04);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .ft-social a:hover {
    transform: translateY(-5px) rotate(-6deg);
    color: var(--ft-navy); background: var(--ft-gold);
    box-shadow: 0 10px 20px rgba(215,181,109,.35);
  }

  .ft-certs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
  .ft-cert {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px; border-radius: 999px;
    color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
    background: rgba(255,255,255,.05); border: 1px solid var(--ft-line);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .ft-cert i { color: var(--ft-gold); font-size: 14px; }
  .ft-cert:hover { border-color: var(--ft-gold); background: rgba(215,181,109,.1); transform: translateY(-2px); }

  /* ---------- Disclaimer ---------- */
  .ft-disclaimer {
    padding: 18px 22px; border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ft-line); border-left: 3px solid var(--ft-gold);
  }
  .ft-disclaimer p { font-size: 12.5px; line-height: 1.8; color: rgba(255,255,255,.66); }
  .ft-disclaimer span { color: var(--ft-gold); font-weight: 900; margin-right: 4px; }

  /* ---------- Copyright ---------- */
  .ft-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 24px 0 30px;
  }
  .ft-bottom p { font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.55); }
  .ft-to-top {
    flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; cursor: pointer; font-size: 14px;
    color: var(--ft-gold); background: transparent; border: 1px solid rgba(215,181,109,.5);
    transition: transform .25s ease, background .25s ease, color .25s ease;
  }
  .ft-to-top:hover { transform: translateY(-4px); background: var(--ft-gold); color: var(--ft-navy); }

  /* ---------- Animations ---------- */
  @keyframes ftShimmer { to { background-position: -200% 0; } }

  .ft-section.ft-js .ft-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .ft-section.ft-js .ft-reveal.ft-in { opacity: 1; transform: none; }
  .ft-section.ft-js .ft-top .ft-reveal:nth-child(2) { transition-delay: .1s; }
  .ft-section.ft-js .ft-top .ft-reveal:nth-child(3) { transition-delay: .2s; }

  /* ---------- Laptop / tablet ---------- */
  @media (max-width: 1100px) {
    .ft-top { grid-template-columns: 1fr 1fr; gap: 40px 36px; }
    .ft-legal { grid-column: 1 / -1; order: 3; }
    .ft-certs { gap: 8px; }
    .ft-cert { padding: 8px 13px; }
  }

  @media (max-width: 860px) {
    .ft-social-row { flex-direction: column; align-items: flex-start; gap: 20px; }
    .ft-certs { justify-content: flex-start; }
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 767px) {
    .ft-container { padding: 44px 17px 0; }
    .ft-top { grid-template-columns: 1fr; gap: 34px; padding-bottom: 32px; }
    .ft-legal { grid-column: auto; order: 0; }
    .ft-title { font-size: 15px; margin-bottom: 18px; }
    .ft-addr { font-size: 13.5px; }
    .ft-logo { width: 180px; }

    .ft-social-row { margin-top: 0; padding: 22px 0; }
    .ft-social a { width: 38px; height: 38px; }
    .ft-certs { width: 100%; display: grid; grid-template-columns: 1fr; gap: 9px; }
    .ft-cert { width: 100%; font-size: 11.5px; padding: 10px 14px; border-radius: 10px; }

    .ft-disclaimer { padding: 15px 16px; }
    .ft-disclaimer p { font-size: 11px; line-height: 1.75; }

    .ft-bottom { flex-direction: column; gap: 16px; padding: 20px 0 26px; text-align: center; }
    .ft-bottom p { font-size: 10.5px; line-height: 1.7; }
  }

  @media (max-width: 380px) {
    .ft-container { padding-left: 14px; padding-right: 14px; }
    .ft-legal-links { grid-template-columns: 1fr; }
    .ft-legal-links ul + ul li:first-child { border-top: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ft-section::before { animation: none; }
    .ft-section.ft-js .ft-reveal { opacity: 1; transform: none; transition: none; }
    .ft-section *, .ft-section *::before, .ft-section *::after { transition-duration: .01ms !important; }
  }

  
/* =========================================================
   THEME  (only navy + gold shades - no orange)
========================================================= */
:root{
  --orange:#D4B06A;              /* gold accent */
  --gold-rgb:212,176,106;        /* same gold, for rgba() glows */
  --blue:#244082;                /* main brand blue */
  --blue-glow-rgb:110,150,230;   /* soft light-blue glow */
  --navy:#031a3c;
  --navy-2:#082650;
  --navy-3:#0d3569;
  --ink:#07172f;
  --muted:#65748b;
  --line:rgba(3,26,60,.13);
  --white:#fff;
  --green:#16a34a;
  --green-dark:#087f3d;
  --green-light:#22c55e;
}

/* =========================================================
   RESET
========================================================= */
*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

button,
a{font:inherit}

button{cursor:pointer}

/* =========================================================
   HERO
========================================================= */
.bond-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(520px 300px at 80% 4%,rgba(var(--gold-rgb),.10),transparent 68%),
    radial-gradient(600px 340px at 0% 100%,rgba(3,26,60,.07),transparent 70%),
    linear-gradient(110deg,#eaf7fc 0%,#f5edf9 55%,#f9e7f2 100%);
}

.bond-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:620px;
  height:620px;
  right:-330px;
  top:-385px;
  border:1px solid rgba(3,26,60,.06);
  border-radius:50%;
  box-shadow:
    0 0 0 42px rgba(3,26,60,.018),
    0 0 0 86px rgba(3,26,60,.014);
}

.bond-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.28;
  background-image:
    linear-gradient(rgba(3,26,60,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,26,60,.028) 1px,transparent 1px);
  background-size:68px 68px;
  pointer-events:none;
}

.hero-container{
  width:min(1282px,calc(100% - 84px));
  margin:0 auto;
  padding:18px 0 0;
}

/* =========================================================
   MAIN CONTENT
========================================================= */
.hero-main{
  min-height:335px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 540px;
  align-items:center;
  gap:40px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */
.hero-copy{
  min-width:0;
  padding:8px 0 22px;
}

/* ---------- Trust badge ---------- */
.trust{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 17px 0 8px;
  margin-bottom:13px;
  color:#fff;
  background:linear-gradient(135deg,var(--green-dark),var(--green),var(--green-light));
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px 14px 14px 7px;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.15px;
  box-shadow:
    0 5px 15px rgba(22,163,74,.22),
    inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
  animation:trust-entry .65s cubic-bezier(.22,1,.36,1) both;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.trust::before{
  content:"";
  position:absolute;
  top:0;
  left:-80px;
  width:45px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);
  animation:trust-shine 3.5s ease-in-out infinite;
}

.trust::after{
  content:"";
  position:absolute;
  right:7px;
  top:50%;
  width:6px;
  height:6px;
  border-top:1.5px solid rgba(255,255,255,.8);
  border-right:1.5px solid rgba(255,255,255,.8);
  transform:translateY(-50%) rotate(45deg);
  opacity:.8;
}

.trust:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.06);
  box-shadow:
    0 8px 22px rgba(22,163,74,.3),
    0 0 0 3px rgba(34,197,94,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.trust-icon{
  position:relative;
  z-index:2;
  width:19px;
  height:19px;
  min-width:19px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.85);
  border-radius:5px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 6px rgba(255,255,255,.12);
  animation:icon-pulse 2.4s ease-in-out infinite;
  transition:transform .25s ease;
}

.trust:hover .trust-icon{transform:rotate(-5deg) scale(1.05)}

.trust span:not(.trust-icon){
  position:relative;
  z-index:2;
  white-space:nowrap;
}

@keyframes trust-entry{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes icon-pulse{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.05),
      inset 0 0 6px rgba(255,255,255,.1);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(255,255,255,.08),
      0 0 12px rgba(255,255,255,.15),
      inset 0 0 8px rgba(255,255,255,.15);
  }
}

@keyframes trust-shine{
  0%{left:-80px}
  30%,100%{left:120%}
}

/* ---------- Title ---------- */
.hero-title{
  max-width:690px;
  margin:0;
  color:var(--navy);
  font-size:45px;
  line-height:1.03;
  letter-spacing:-2.15px;
  font-weight:850;
}

.hero-subtitle{
  display:flex;
  align-items:center;
  gap:7px;
  margin:16px 0 22px;
  color:var(--navy);
  font-size:21px;
  line-height:1.1;
  font-weight:750;
}

.hero-subtitle .accent{color:var(--orange)}

.hero-subtitle .dash{
  width:38px;
  height:2px;
  border-radius:4px;
  background:var(--orange);
}

/* =========================================================
   STATS
========================================================= */
.stats{
  width:min(100%,635px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}

.stat{
  min-width:0;
  min-height:76px;
  padding:11px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.stat:first-child{padding-left:0}

.stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:18px;
  right:0;
  width:1px;
  height:40px;
  background:var(--line);
}

.stat strong{
  color:var(--navy);
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.4px;
  font-weight:800;
}

.stat span{
  margin-top:6px;
  color:#69778b;
  font-size:11px;
  line-height:1.2;
}

/* =========================================================
   ACTIONS
========================================================= */
.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
}

.btn{
  min-height:46px;
  border-radius:25px;
  padding:0 21px;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  font-size:14px;
  font-weight:750;
  transition:transform .35s ease,background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}

.btn-orange{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:var(--blue);
  box-shadow:0 8px 20px rgba(36,64,130,.22);
}

.btn-orange::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}

.btn-orange:hover{
  color:#fff;
  background:var(--navy);
  transform:translateY(-3px);
  box-shadow:
    0 10px 24px rgba(3,26,60,.18),
    0 0 0 4px rgba(3,26,60,.06);
}

.btn-orange:hover::before{left:140%}

.btn-orange:active{transform:translateY(-1px) scale(.98)}

.btn-orange b{
  font-size:20px;
  line-height:1;
  font-weight:400;
}

/* =========================================================
   RIGHT FEATURED PANEL
========================================================= */
.feature-wrap{
  position:relative;
  min-width:0;
  height:272px;
  padding-top:10px;
}

.feature-card{
  position:relative;
  height:262px;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.04),transparent 35%),
    linear-gradient(135deg,#0b356c 0%,var(--blue) 72%);
  box-shadow:
    0 18px 42px rgba(3,26,60,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.feature-card::before{
  content:"";
  position:absolute;
  width:410px;
  height:410px;
  right:-205px;
  top:-240px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:
    0 0 0 34px rgba(255,255,255,.018),
    0 0 0 70px rgba(255,255,255,.012);
}

/* soft blue glow (was orange) */
.feature-card::after{
  content:"";
  position:absolute;
  left:-75px;
  bottom:-80px;
  width:280px;
  height:150px;
  border-radius:50%;
  background:rgba(var(--blue-glow-rgb),.16);
  filter:blur(28px);
}

.slide{
  position:absolute;
  inset:0;
  padding:28px 17px 23px 27px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  align-items:center;
  gap:18px;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .4s ease,transform .4s ease;
  z-index:2;
}

.slide.active{
  opacity:1;
  transform:translateX(0);
}

.slide-copy{
  min-width:0;
  align-self:start;
  padding-top:5px;
}

.feature-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
  color:#70ef37;
  font-size:20px;
  line-height:1;
  font-style:italic;
  font-weight:850;
}

.feature-label::before{
  content:"";
  width:20px;
  height:2px;
  border-radius:3px;
  background:#70ef37;
}

.bond-title{
  max-width:300px;
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.65px;
  font-weight:780;
}

.bond-description{
  max-width:300px;
  margin:10px 0 0;
  color:rgba(255,255,255,.64);
  font-size:10px;
  line-height:1.45;
}

.invest{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

.invest-arrow{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  transition:.22s ease;
}

.invest:hover .invest-arrow{
  color:#fff;
  background:var(--orange);
  border-color:var(--orange);
  transform:translateX(3px);
}

/* ---------- Yield card ---------- */
.yield-card{
  position:relative;
  align-self:center;
  height:214px;
  overflow:hidden;
  padding:25px 17px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:21px 21px 30px 21px;
  background:
    radial-gradient(circle at 76% 87%,rgba(var(--blue-glow-rgb),.32),transparent 32%),
    linear-gradient(145deg,#0a2d60,var(--blue) 82%);
  box-shadow:0 15px 30px rgba(0,0,0,.24);
}

.yield-card::before{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-33px;
  width:108px;
  height:108px;
  border:2px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 9px rgba(255,255,255,.04),
    0 0 0 19px rgba(255,255,255,.025);
}

/* gold dot (glow now gold, not orange) */
.yield-card::after{
  content:"";
  position:absolute;
  right:34px;
  bottom:41px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 14px rgba(var(--gold-rgb),.75);
}

.yield-label{
  position:relative;
  z-index:3;
  display:block;
  color:#9eacc0;
  font-size:9px;
  font-weight:650;
}

.yield-number{
  position:relative;
  z-index:3;
  margin-top:4px;
  color:#fff;
  font-size:47px;
  line-height:.93;
  letter-spacing:-2.5px;
  font-weight:900;
  white-space:nowrap;
}

.yield-number span{color:var(--orange)}

.yield-note{
  position:relative;
  z-index:3;
  margin-top:7px;
  color:#8190a6;
  font-size:8px;
}

.maturity{
  position:relative;
  z-index:3;
  margin-top:15px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#8492a8;
  font-size:8px;
}

.maturity strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:12px;
}

.maturity strong span{color:var(--orange)}

/* ---------- Floating chip ---------- */
.rate-chip{
  position:absolute;
  z-index:10;
  top:0;
  right:0;
  min-width:106px;
  padding:8px 11px 9px;
  border-radius:10px 10px 0 10px;
  background:#fff;
  box-shadow:0 10px 23px rgba(3,26,60,.14);
}

.rate-chip small{
  display:block;
  color:#7c899b;
  font-size:6px;
  font-weight:850;
  letter-spacing:.5px;
}

.rate-chip strong{
  display:block;
  margin-top:2px;
  color:var(--orange);
  font-size:16px;
  line-height:1;
}

/* ---------- Slider dots ---------- */
.slider-dots{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
}

.slider-dot{
  width:17px;
  height:3px;
  padding:0;
  border:0;
  border-radius:5px;
  background:rgba(255,255,255,.27);
}

.slider-dot.active{
  width:25px;
  background:#fff;
}

/* =========================================================
   BOTTOM FEATURE STRIP
   Desktop = single bar  |  Mobile = 2x2 grid
========================================================= */
.bond-feature-strip{
  --f-navy:var(--navy,#031a3c);
  --f-gold:var(--orange,#D4B06A);
  --f-line:rgba(3,26,60,.12);

  position:relative;
  z-index:5;
  width:100%;
  background:rgba(255,255,255,.94);
  border-top:1px solid rgba(3,26,60,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.bond-feature-inner{
  width:min(1282px,calc(100% - 84px));
  min-height:72px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr auto;
  align-items:center;
}

.bond-feature-title{
  min-width:0;
  padding-right:20px;
}

.bond-feature-title small,
.bond-feature-title strong{display:block}

.bond-feature-title small{
  color:var(--f-gold);
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.bond-feature-title strong{
  margin-top:6px;
  color:var(--f-navy);
  font-size:14px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.2px;
}

.bond-feature-stat{
  min-width:0;
  height:40px;
  padding:0 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--f-line);
  text-align:center;
}

.bond-feature-stat small{
  color:#7c8798;
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.bond-feature-stat strong{
  margin-top:6px;
  color:var(--f-navy);
  font-size:14px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}

.bond-feature-action{
  justify-self:end;
  height:42px;
  margin-left:18px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:24px;
  color:#fff;
  background:var(--blue);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(3,26,60,.18);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease;
}

/* FIXED: was "color:var#244082" (invalid) */
.bond-feature-action:hover{
  color:var(--navy);
  background:var(--f-gold);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(var(--gold-rgb),.35);
}

/* =========================================================
   LAPTOP (up to 1120px)
========================================================= */
@media(max-width:1120px){
  .hero-container{width:calc(100% - 48px)}

  .hero-main{
    grid-template-columns:minmax(0,1fr) 460px;
    gap:25px;
  }

  .hero-title{font-size:39px}

  .stat{
    padding-left:12px;
    padding-right:12px;
  }

  .stat strong{font-size:16px}

  .slide{
    grid-template-columns:minmax(0,1fr) 170px;
    padding-left:20px;
  }

  .yield-card{height:202px}
  .yield-number{font-size:39px}

  .bond-feature-inner{
    width:calc(100% - 48px);
    grid-template-columns:1.3fr 1fr 1fr 1fr 1fr auto;
  }
  .bond-feature-stat{padding:0 8px}
  .bond-feature-stat strong{font-size:13px}
  .bond-feature-action{padding:0 16px;margin-left:10px}
}

/* =========================================================
   TABLET + MOBILE (up to 900px) - LEFT ALIGNED
========================================================= */
@media(max-width:900px){
  .hero-container{
    padding-top:25px;
    padding-bottom:30px;
  }

  .hero-main{
    min-height:0;
    grid-template-columns:1fr;
    gap:30px;
  }

  .hero-copy{
    width:100%;
    padding-bottom:0;
    text-align:left;
  }

  .trust{margin-left:0;margin-right:0}

  .hero-title{
    max-width:720px;
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .hero-subtitle{
    justify-content:flex-start;
    text-align:left;
  }

  .stats{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .actions{
    justify-content:flex-start;
    align-items:flex-start;
  }

  .feature-wrap{
    width:100%;
    max-width:650px;
    margin-left:0;
    margin-right:auto;
  }
}

/* =========================================================
   MOBILE (up to 600px)
========================================================= */
@media(max-width:600px){
  .hero-container{
    width:calc(100% - 24px);
    padding-top:22px;
    padding-bottom:25px;
  }

  .hero-main{gap:27px}

  .trust{
    height:32px;
    padding-right:14px;
    gap:7px;
    font-size:10px;
  }

  .trust-icon{
    width:18px;
    height:18px;
    min-width:18px;
  }

  .hero-title{
    width:100%;
    max-width:100%;
    margin:0;
    font-size:33px;
    line-height:1.04;
    letter-spacing:-1.4px;
  }

  .hero-subtitle{
    width:100%;
    flex-wrap:wrap;
    margin-top:14px;
    margin-bottom:19px;
    font-size:18px;
  }

  .hero-subtitle .dash{display:none}

  .stats{
    width:100%;
    grid-template-columns:1fr 1fr;
  }

  .stat{
    min-height:69px;
    padding:10px 11px;
  }

  .stat:first-child{padding-left:0}

  .stat strong{font-size:14px}
  .stat span{font-size:9px}

  .stat:nth-child(2)::after{display:none}

  .stat:nth-child(3){grid-column:1/-1}

  .actions{
    width:100%;
    gap:8px;
  }

  .btn{
    min-height:44px;
    padding:0 16px;
    font-size:12px;
  }

  .btn-orange:first-child{min-width:165px}

  .feature-wrap{
    max-width:none;
    height:242px;
    padding-top:9px;
  }

  .feature-card{
    width:100%;
    height:233px;
    border-radius:15px;
  }

  .slide{
    grid-template-columns:minmax(0,1fr) 126px;
    gap:8px;
    padding:24px 8px 19px 14px;
  }

  .feature-label{
    font-size:17px;
    margin-bottom:11px;
  }

  .feature-label::before{width:16px}

  .bond-title{
    max-width:190px;
    font-size:18px;
  }

  .bond-description{
    max-width:190px;
    font-size:8px;
    line-height:1.45;
  }

  .invest{
    margin-top:13px;
    font-size:11px;
  }

  .invest-arrow{
    width:25px;
    height:25px;
  }

  .yield-card{
    height:181px;
    padding:24px 9px 10px;
    border-radius:16px 16px 22px 16px;
  }

  .yield-label{font-size:7px}

  .yield-number{
    font-size:29px;
    letter-spacing:-1.5px;
  }

  .yield-note{font-size:7px}

  .maturity{
    margin-top:11px;
    font-size:7px;
  }

  .maturity strong{font-size:10px}

  .rate-chip{
    right:4px;
    min-width:92px;
    padding:7px 9px 8px;
  }

  .rate-chip strong{font-size:14px}
}

/* =========================================================
   SMALL MOBILE (up to 390px)
========================================================= */
@media(max-width:390px){
  .hero-title{font-size:29px}

  .hero-subtitle{font-size:17px}

  .stat strong{font-size:13px}
  .stat span{font-size:8px}

  .btn{
    padding:0 13px;
    font-size:11px;
  }

  .btn-orange:first-child{min-width:150px}

  .feature-wrap{height:228px}
  .feature-card{height:219px}

  .slide{
    grid-template-columns:minmax(0,1fr) 112px;
    padding-left:12px;
  }

  .bond-title{font-size:16px}

  .yield-card{
    height:169px;
    padding-top:22px;
  }

  .yield-number{font-size:25px}
}

/* =========================================================
   VERY SMALL MOBILE (up to 340px)
========================================================= */
@media(max-width:340px){
  .hero-container{width:calc(100% - 18px)}

  .trust{max-width:100%}
  .trust span:not(.trust-icon){font-size:9px}

  .hero-title{font-size:27px}
  .hero-subtitle{font-size:16px}

  .stats{grid-template-columns:1fr}

  .stat{
    min-height:60px;
    border-bottom:1px solid var(--line);
  }

  .stat:last-child{border-bottom:0}

  .stat:nth-child(1)::after,
  .stat:nth-child(2)::after{display:none}

  .stat:nth-child(3){grid-column:auto}

  .actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn-orange:first-child{min-width:160px}
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   GLOBAL FIX: no horizontal (left/right) scroll + mobile width
========================================================= */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
img,svg,video,iframe{max-width:100%}

/* header: mobile width */
@media (max-width:991.98px){
  .header-area{max-width:100%}
  .header-area .navbar{flex-wrap:wrap}
  .header-area .navbar-brand img{max-width:100%}
  .header-area .navbar-collapse{width:100%}
  .header-area .header-right{
    flex-wrap:wrap;
    width:100%;
    max-width:100%;
  }
  .header-area .search-box{max-width:100%}
  .header-area .search-box input{min-width:0;max-width:100%}
}

/* =========================================================
   MOBILE ONLY - ALIGNMENT + SPACING FIX (desktop untouched)
========================================================= */

/* ---------- Tablet + Mobile (900px aur neeche) ---------- */
@media (max-width:900px){

  /* page side spacing: sab kuch ek hi left line par */
  .bond-hero .hero-container{
    width:calc(100% - 32px);
    padding:24px 0 26px;
  }

  .bond-hero .hero-main{gap:24px}

  .bond-hero .hero-copy{
    padding:0;
    text-align:left;
  }

  /* trust badge: chhoti screen par wrap ho, bahar na nikle */
  .bond-hero .trust{
    max-width:100%;
    height:auto;
    min-height:32px;
    margin:0 0 14px;
    padding:8px 26px 8px 8px;
    line-height:1.25;
  }

  .bond-hero .trust > span:not(.trust-icon){white-space:normal}

  /* heading + subtitle */
  .bond-hero .hero-title{
    margin:0;
    font-size:32px;
    line-height:1.08;
    letter-spacing:-1.2px;
    text-align:left;
  }

  .bond-hero .hero-subtitle{
    flex-wrap:wrap;
    gap:6px;
    margin:12px 0 20px;
    font-size:18px;
    text-align:left;
  }

  .bond-hero .hero-subtitle .dash{display:none}

  /* stats: 3 barabar columns, left aligned text */
  .bond-hero .stats{
    width:100%;
    grid-template-columns:repeat(3,1fr);
    margin:0 0 20px;
    text-align:left;
  }

  .bond-hero .stat{
    min-height:72px;
    padding:12px 8px 12px 10px;
    text-align:left;
  }

  .bond-hero .stat:first-child{padding-left:0}

  .bond-hero .stat:nth-child(2)::after{display:block}
  .bond-hero .stat:nth-child(3){grid-column:auto}

  .bond-hero .stat strong{font-size:14px}

  .bond-hero .stat span{
    margin-top:5px;
    font-size:10px;
    line-height:1.25;
  }

  /* button: full width, center text */
  .bond-hero .actions{
    width:100%;
    justify-content:flex-start;
  }

  .bond-hero .actions .btn-orange{
    width:100%;
    min-height:48px;
    justify-content:center;
  }

  /* feature card: left align, full width */
  .bond-hero .feature-wrap{
    width:100%;
    max-width:none;
    margin:0;
  }

  /* ---------- Bottom strip: purane design jaisa, bas mobile mein sahi aligned ---------- */
  .bond-hero .bond-feature-strip{padding:0}

  .bond-hero .bond-feature-inner{
    width:calc(100% - 32px);
    max-width:none;
    min-height:0;
    margin:0 auto;
    padding:16px 0 18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:stretch;
  }

  .bond-hero .bond-feature-title{
    grid-column:1/-1;
    padding:0 0 12px;
    text-align:left;
  }

  .bond-hero .bond-feature-stat{
    height:auto;
    min-height:60px;
    padding:12px 8px 12px 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
    border:0;
    border-top:1px solid rgba(3,26,60,.12);
  }

  /* right column: left line + thoda andar */
  .bond-hero .bond-feature-stat:nth-of-type(3),
  .bond-hero .bond-feature-stat:nth-of-type(5){
    padding-left:16px;
    border-left:1px solid rgba(3,26,60,.12);
  }

  .bond-hero .bond-feature-stat strong{
    margin-top:5px;
    font-size:14px;
  }

  .bond-hero .bond-feature-action{
    grid-column:1/-1;
    justify-self:stretch;
    width:100%;
    height:46px;
    margin:14px 0 0;
    justify-content:center;
  }
}

/* ---------- Mobile (600px aur neeche): feature card spacing ---------- */
@media (max-width:600px){

  .bond-hero .feature-wrap{
    height:252px;
    padding-top:10px;
  }

  .bond-hero .feature-card{height:242px}

  .bond-hero .slide{
    grid-template-columns:minmax(0,1fr) 128px;
    gap:10px;
    padding:26px 10px 28px 16px;
  }

  .bond-hero .bond-title{
    max-width:100%;
    font-size:18px;
  }

  .bond-hero .bond-description{
    max-width:100%;
    font-size:9px;
  }

  .bond-hero .rate-chip{right:6px}

  .bond-hero .slider-dots{bottom:10px}
}

/* ---------- Chhoti mobile (380px aur neeche) ---------- */
@media (max-width:380px){

  .bond-hero .hero-title{font-size:28px}
  .bond-hero .hero-subtitle{font-size:16px}

  .bond-hero .stat{padding:10px 6px 10px 8px}
  .bond-hero .stat strong{font-size:13px}
  .bond-hero .stat span{font-size:9px}

  .bond-hero .slide{grid-template-columns:minmax(0,1fr) 112px}
  .bond-hero .bond-title{font-size:16px}

  .bond-hero .bond-feature-stat:nth-of-type(3),
  .bond-hero .bond-feature-stat:nth-of-type(5){padding-left:12px}
}

/* =========================================================
   THEME  (only navy + gold shades - no orange)
========================================================= */
:root{
  --orange:#D4B06A;              /* gold accent */
  --gold-rgb:212,176,106;        /* same gold, for rgba() glows */
  --blue:#244082;                /* main brand blue */
  --blue-glow-rgb:110,150,230;   /* soft light-blue glow */
  --navy:#031a3c;
  --navy-2:#082650;
  --navy-3:#0d3569;
  --ink:#07172f;
  --muted:#65748b;
  --line:rgba(3,26,60,.13);
  --white:#fff;
  --green:#16a34a;
  --green-dark:#087f3d;
  --green-light:#22c55e;
}

/* =========================================================
   RESET
========================================================= */
*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

button,
a{font:inherit}

button{cursor:pointer}

/* =========================================================
   HERO
========================================================= */
.bond-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(520px 300px at 80% 4%,rgba(var(--gold-rgb),.10),transparent 68%),
    radial-gradient(600px 340px at 0% 100%,rgba(3,26,60,.07),transparent 70%),
    linear-gradient(110deg,#eaf7fc 0%,#f5edf9 55%,#f9e7f2 100%);
}

.bond-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:620px;
  height:620px;
  right:-330px;
  top:-385px;
  border:1px solid rgba(3,26,60,.06);
  border-radius:50%;
  box-shadow:
    0 0 0 42px rgba(3,26,60,.018),
    0 0 0 86px rgba(3,26,60,.014);
}

.bond-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.28;
  background-image:
    linear-gradient(rgba(3,26,60,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,26,60,.028) 1px,transparent 1px);
  background-size:68px 68px;
  pointer-events:none;
}

.hero-container{
  width:min(1282px,calc(100% - 84px));
  margin:0 auto;
  padding:18px 0 0;
}

/* =========================================================
   MAIN CONTENT
========================================================= */
.hero-main{
  min-height:335px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 540px;
  align-items:center;
  gap:40px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */
.hero-copy{
  min-width:0;
  padding:8px 0 22px;
}

/* ---------- Trust badge ---------- */
.trust{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 17px 0 8px;
  margin-bottom:13px;
  color:#fff;
  background:linear-gradient(135deg,var(--green-dark),var(--green),var(--green-light));
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px 14px 14px 7px;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.15px;
  box-shadow:
    0 5px 15px rgba(22,163,74,.22),
    inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
  animation:trust-entry .65s cubic-bezier(.22,1,.36,1) both;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.trust::before{
  content:"";
  position:absolute;
  top:0;
  left:-80px;
  width:45px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);
  animation:trust-shine 3.5s ease-in-out infinite;
}

.trust::after{
  content:"";
  position:absolute;
  right:7px;
  top:50%;
  width:6px;
  height:6px;
  border-top:1.5px solid rgba(255,255,255,.8);
  border-right:1.5px solid rgba(255,255,255,.8);
  transform:translateY(-50%) rotate(45deg);
  opacity:.8;
}

.trust:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.06);
  box-shadow:
    0 8px 22px rgba(22,163,74,.3),
    0 0 0 3px rgba(34,197,94,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.trust-icon{
  position:relative;
  z-index:2;
  width:19px;
  height:19px;
  min-width:19px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.85);
  border-radius:5px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 6px rgba(255,255,255,.12);
  animation:icon-pulse 2.4s ease-in-out infinite;
  transition:transform .25s ease;
}

.trust:hover .trust-icon{transform:rotate(-5deg) scale(1.05)}

.trust span:not(.trust-icon){
  position:relative;
  z-index:2;
  white-space:nowrap;
}

@keyframes trust-entry{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes icon-pulse{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.05),
      inset 0 0 6px rgba(255,255,255,.1);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(255,255,255,.08),
      0 0 12px rgba(255,255,255,.15),
      inset 0 0 8px rgba(255,255,255,.15);
  }
}

@keyframes trust-shine{
  0%{left:-80px}
  30%,100%{left:120%}
}

/* ---------- Title ---------- */
.hero-title{
  max-width:690px;
  margin:0;
  color:var(--navy);
  font-size:45px;
  line-height:1.03;
  letter-spacing:-2.15px;
  font-weight:850;
}

.hero-subtitle{
  display:flex;
  align-items:center;
  gap:7px;
  margin:16px 0 22px;
  color:var(--navy);
  font-size:21px;
  line-height:1.1;
  font-weight:750;
}

.hero-subtitle .accent{color:var(--orange)}

.hero-subtitle .dash{
  width:38px;
  height:2px;
  border-radius:4px;
  background:var(--orange);
}

/* =========================================================
   STATS
========================================================= */
.stats{
  width:min(100%,635px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}

.stat{
  min-width:0;
  min-height:76px;
  padding:11px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.stat:first-child{padding-left:0}

.stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:18px;
  right:0;
  width:1px;
  height:40px;
  background:var(--line);
}

.stat strong{
  color:var(--navy);
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.4px;
  font-weight:800;
}

.stat span{
  margin-top:6px;
  color:#69778b;
  font-size:11px;
  line-height:1.2;
}

/* =========================================================
   ACTIONS
========================================================= */
.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
}

.btn{
  min-height:46px;
  border-radius:25px;
  padding:0 21px;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  font-size:14px;
  font-weight:750;
  transition:transform .35s ease,background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}

.btn-orange{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:var(--blue);
  box-shadow:0 8px 20px rgba(36,64,130,.22);
}

.btn-orange::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}

.btn-orange:hover{
  color:#fff;
  background:var(--navy);
  transform:translateY(-3px);
  box-shadow:
    0 10px 24px rgba(3,26,60,.18),
    0 0 0 4px rgba(3,26,60,.06);
}

.btn-orange:hover::before{left:140%}

.btn-orange:active{transform:translateY(-1px) scale(.98)}

.btn-orange b{
  font-size:20px;
  line-height:1;
  font-weight:400;
}

/* =========================================================
   RIGHT FEATURED PANEL
========================================================= */
.feature-wrap{
  position:relative;
  min-width:0;
  height:272px;
  padding-top:10px;
}

.feature-card{
  position:relative;
  height:262px;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.04),transparent 35%),
    linear-gradient(135deg,#0b356c 0%,var(--blue) 72%);
  box-shadow:
    0 18px 42px rgba(3,26,60,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.feature-card::before{
  content:"";
  position:absolute;
  width:410px;
  height:410px;
  right:-205px;
  top:-240px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:
    0 0 0 34px rgba(255,255,255,.018),
    0 0 0 70px rgba(255,255,255,.012);
}

/* soft blue glow (was orange) */
.feature-card::after{
  content:"";
  position:absolute;
  left:-75px;
  bottom:-80px;
  width:280px;
  height:150px;
  border-radius:50%;
  background:rgba(var(--blue-glow-rgb),.16);
  filter:blur(28px);
}

.slide{
  position:absolute;
  inset:0;
  padding:28px 17px 23px 27px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  align-items:center;
  gap:18px;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .4s ease,transform .4s ease;
  z-index:2;
}

.slide.active{
  opacity:1;
  transform:translateX(0);
}

.slide-copy{
  min-width:0;
  align-self:start;
  padding-top:5px;
}

.feature-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
  color:#70ef37;
  font-size:20px;
  line-height:1;
  font-style:italic;
  font-weight:850;
}

.feature-label::before{
  content:"";
  width:20px;
  height:2px;
  border-radius:3px;
  background:#70ef37;
}

.bond-title{
  max-width:300px;
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.65px;
  font-weight:780;
}

.bond-description{
  max-width:300px;
  margin:10px 0 0;
  color:rgba(255,255,255,.64);
  font-size:10px;
  line-height:1.45;
}

.invest{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

.invest-arrow{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  transition:.22s ease;
}

.invest:hover .invest-arrow{
  color:#fff;
  background:var(--orange);
  border-color:var(--orange);
  transform:translateX(3px);
}

/* ---------- Yield card ---------- */
.yield-card{
  position:relative;
  align-self:center;
  height:214px;
  overflow:hidden;
  padding:25px 17px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:21px 21px 30px 21px;
  background:
    radial-gradient(circle at 76% 87%,rgba(var(--blue-glow-rgb),.32),transparent 32%),
    linear-gradient(145deg,#0a2d60,var(--blue) 82%);
  box-shadow:0 15px 30px rgba(0,0,0,.24);
}

.yield-card::before{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-33px;
  width:108px;
  height:108px;
  border:2px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 9px rgba(255,255,255,.04),
    0 0 0 19px rgba(255,255,255,.025);
}

/* gold dot (glow now gold, not orange) */
.yield-card::after{
  content:"";
  position:absolute;
  right:34px;
  bottom:41px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 14px rgba(var(--gold-rgb),.75);
}

.yield-label{
  position:relative;
  z-index:3;
  display:block;
  color:#9eacc0;
  font-size:9px;
  font-weight:650;
}

.yield-number{
  position:relative;
  z-index:3;
  margin-top:4px;
  color:#fff;
  font-size:47px;
  line-height:.93;
  letter-spacing:-2.5px;
  font-weight:900;
  white-space:nowrap;
}

.yield-number span{color:var(--orange)}

.yield-note{
  position:relative;
  z-index:3;
  margin-top:7px;
  color:#8190a6;
  font-size:8px;
}

.maturity{
  position:relative;
  z-index:3;
  margin-top:15px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#8492a8;
  font-size:8px;
}

.maturity strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:12px;
}

.maturity strong span{color:var(--orange)}

/* ---------- Floating chip ---------- */
.rate-chip{
  position:absolute;
  z-index:10;
  top:0;
  right:0;
  min-width:106px;
  padding:8px 11px 9px;
  border-radius:10px 10px 0 10px;
  background:#fff;
  box-shadow:0 10px 23px rgba(3,26,60,.14);
}

.rate-chip small{
  display:block;
  color:#7c899b;
  font-size:6px;
  font-weight:850;
  letter-spacing:.5px;
}

.rate-chip strong{
  display:block;
  margin-top:2px;
  color:var(--orange);
  font-size:16px;
  line-height:1;
}

/* ---------- Slider dots ---------- */
.slider-dots{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
}

.slider-dot{
  width:17px;
  height:3px;
  padding:0;
  border:0;
  border-radius:5px;
  background:rgba(255,255,255,.27);
}

.slider-dot.active{
  width:25px;
  background:#fff;
}

/* =========================================================
   BOTTOM FEATURE STRIP
   Desktop = single bar  |  Mobile = 2x2 grid
========================================================= */
.bond-feature-strip{
  --f-navy:var(--navy,#031a3c);
  --f-gold:var(--orange,#D4B06A);
  --f-line:rgba(3,26,60,.12);

  position:relative;
  z-index:5;
  width:100%;
  background:rgba(255,255,255,.94);
  border-top:1px solid rgba(3,26,60,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.bond-feature-inner{
  width:min(1282px,calc(100% - 84px));
  min-height:72px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr auto;
  align-items:center;
}

.bond-feature-title{
  min-width:0;
  padding-right:20px;
}

.bond-feature-title small,
.bond-feature-title strong{display:block}

.bond-feature-title small{
  color:var(--f-gold);
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.bond-feature-title strong{
  margin-top:6px;
  color:var(--f-navy);
  font-size:14px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.2px;
}

.bond-feature-stat{
  min-width:0;
  height:40px;
  padding:0 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--f-line);
  text-align:center;
}

.bond-feature-stat small{
  color:#7c8798;
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.bond-feature-stat strong{
  margin-top:6px;
  color:var(--f-navy);
  font-size:14px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}

.bond-feature-action{
  justify-self:end;
  height:42px;
  margin-left:18px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:24px;
  color:#fff;
  background:var(--blue);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(3,26,60,.18);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease;
}

/* FIXED: was "color:var#244082" (invalid) */
.bond-feature-action:hover{
  color:var(--navy);
  background:var(--f-gold);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(var(--gold-rgb),.35);
}

/* =========================================================
   LAPTOP (up to 1120px)
========================================================= */
@media(max-width:1120px){
  .hero-container{width:calc(100% - 48px)}

  .hero-main{
    grid-template-columns:minmax(0,1fr) 460px;
    gap:25px;
  }

  .hero-title{font-size:39px}

  .stat{
    padding-left:12px;
    padding-right:12px;
  }

  .stat strong{font-size:16px}

  .slide{
    grid-template-columns:minmax(0,1fr) 170px;
    padding-left:20px;
  }

  .yield-card{height:202px}
  .yield-number{font-size:39px}

  .bond-feature-inner{
    width:calc(100% - 48px);
    grid-template-columns:1.3fr 1fr 1fr 1fr 1fr auto;
  }
  .bond-feature-stat{padding:0 8px}
  .bond-feature-stat strong{font-size:13px}
  .bond-feature-action{padding:0 16px;margin-left:10px}
}

/* =========================================================
   TABLET + MOBILE (up to 900px) - LEFT ALIGNED
========================================================= */
@media(max-width:900px){
  .hero-container{
    padding-top:25px;
    padding-bottom:30px;
  }

  .hero-main{
    min-height:0;
    grid-template-columns:1fr;
    gap:30px;
  }

  .hero-copy{
    width:100%;
    padding-bottom:0;
    text-align:left;
  }

  .trust{margin-left:0;margin-right:0}

  .hero-title{
    max-width:720px;
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .hero-subtitle{
    justify-content:flex-start;
    text-align:left;
  }

  .stats{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .actions{
    justify-content:flex-start;
    align-items:flex-start;
  }

  .feature-wrap{
    width:100%;
    max-width:650px;
    margin-left:0;
    margin-right:auto;
  }
}

/* =========================================================
   MOBILE (up to 600px)
========================================================= */
@media(max-width:600px){
  .hero-container{
    width:calc(100% - 24px);
    padding-top:22px;
    padding-bottom:25px;
  }

  .hero-main{gap:27px}

  .trust{
    height:32px;
    padding-right:14px;
    gap:7px;
    font-size:10px;
  }

  .trust-icon{
    width:18px;
    height:18px;
    min-width:18px;
  }

  .hero-title{
    width:100%;
    max-width:100%;
    margin:0;
    font-size:33px;
    line-height:1.04;
    letter-spacing:-1.4px;
  }

  .hero-subtitle{
    width:100%;
    flex-wrap:wrap;
    margin-top:14px;
    margin-bottom:19px;
    font-size:18px;
  }

  .hero-subtitle .dash{display:none}

  .stats{
    width:100%;
    grid-template-columns:1fr 1fr;
  }

  .stat{
    min-height:69px;
    padding:10px 11px;
  }

  .stat:first-child{padding-left:0}

  .stat strong{font-size:14px}
  .stat span{font-size:9px}

  .stat:nth-child(2)::after{display:none}

  .stat:nth-child(3){grid-column:1/-1}

  .actions{
    width:100%;
    gap:8px;
  }

  .btn{
    min-height:44px;
    padding:0 16px;
    font-size:12px;
  }

  .btn-orange:first-child{min-width:165px}

  .feature-wrap{
    max-width:none;
    height:242px;
    padding-top:9px;
  }

  .feature-card{
    width:100%;
    height:233px;
    border-radius:15px;
  }

  .slide{
    grid-template-columns:minmax(0,1fr) 126px;
    gap:8px;
    padding:24px 8px 19px 14px;
  }

  .feature-label{
    font-size:17px;
    margin-bottom:11px;
  }

  .feature-label::before{width:16px}

  .bond-title{
    max-width:190px;
    font-size:18px;
  }

  .bond-description{
    max-width:190px;
    font-size:8px;
    line-height:1.45;
  }

  .invest{
    margin-top:13px;
    font-size:11px;
  }

  .invest-arrow{
    width:25px;
    height:25px;
  }

  .yield-card{
    height:181px;
    padding:24px 9px 10px;
    border-radius:16px 16px 22px 16px;
  }

  .yield-label{font-size:7px}

  .yield-number{
    font-size:29px;
    letter-spacing:-1.5px;
  }

  .yield-note{font-size:7px}

  .maturity{
    margin-top:11px;
    font-size:7px;
  }

  .maturity strong{font-size:10px}

  .rate-chip{
    right:4px;
    min-width:92px;
    padding:7px 9px 8px;
  }

  .rate-chip strong{font-size:14px}
}

/* =========================================================
   SMALL MOBILE (up to 390px)
========================================================= */
@media(max-width:390px){
  .hero-title{font-size:29px}

  .hero-subtitle{font-size:17px}

  .stat strong{font-size:13px}
  .stat span{font-size:8px}

  .btn{
    padding:0 13px;
    font-size:11px;
  }

  .btn-orange:first-child{min-width:150px}

  .feature-wrap{height:228px}
  .feature-card{height:219px}

  .slide{
    grid-template-columns:minmax(0,1fr) 112px;
    padding-left:12px;
  }

  .bond-title{font-size:16px}

  .yield-card{
    height:169px;
    padding-top:22px;
  }

  .yield-number{font-size:25px}
}

/* =========================================================
   VERY SMALL MOBILE (up to 340px)
========================================================= */
@media(max-width:340px){
  .hero-container{width:calc(100% - 18px)}

  .trust{max-width:100%}
  .trust span:not(.trust-icon){font-size:9px}

  .hero-title{font-size:27px}
  .hero-subtitle{font-size:16px}

  .stats{grid-template-columns:1fr}

  .stat{
    min-height:60px;
    border-bottom:1px solid var(--line);
  }

  .stat:last-child{border-bottom:0}

  .stat:nth-child(1)::after,
  .stat:nth-child(2)::after{display:none}

  .stat:nth-child(3){grid-column:auto}

  .actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn-orange:first-child{min-width:160px}
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   GLOBAL FIX: no horizontal (left/right) scroll + mobile width
========================================================= */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
img,svg,video,iframe{max-width:100%}

/* header: mobile width */
@media (max-width:991.98px){
  .header-area{max-width:100%}
  .header-area .navbar{flex-wrap:wrap}
  .header-area .navbar-brand img{max-width:100%}
  .header-area .navbar-collapse{width:100%}
  .header-area .header-right{
    flex-wrap:wrap;
    width:100%;
    max-width:100%;
  }
  .header-area .search-box{max-width:100%}
  .header-area .search-box input{min-width:0;max-width:100%}
}

/* =========================================================
   MOBILE ONLY - ALIGNMENT + SPACING FIX (desktop untouched)
========================================================= */

/* ---------- Tablet + Mobile (900px aur neeche) ---------- */
@media (max-width:900px){

  /* page side spacing: sab kuch ek hi left line par */
  .bond-hero .hero-container{
    width:calc(100% - 32px);
    padding:24px 0 26px;
  }

  .bond-hero .hero-main{gap:24px}

  .bond-hero .hero-copy{
    padding:0;
    text-align:left;
  }

  /* trust badge: chhoti screen par wrap ho, bahar na nikle */
  .bond-hero .trust{
    max-width:100%;
    height:auto;
    min-height:32px;
    margin:0 0 14px;
    padding:8px 26px 8px 8px;
    line-height:1.25;
  }

  .bond-hero .trust > span:not(.trust-icon){white-space:normal}

  /* heading + subtitle */
  .bond-hero .hero-title{
    margin:0;
    font-size:32px;
    line-height:1.08;
    letter-spacing:-1.2px;
    text-align:left;
  }

  .bond-hero .hero-subtitle{
    flex-wrap:wrap;
    gap:6px;
    margin:12px 0 20px;
    font-size:18px;
    text-align:left;
  }

  .bond-hero .hero-subtitle .dash{display:none}

  /* stats: 3 barabar columns, left aligned text */
  .bond-hero .stats{
    width:100%;
    grid-template-columns:repeat(3,1fr);
    margin:0 0 20px;
    text-align:left;
  }

  .bond-hero .stat{
    min-height:72px;
    padding:12px 8px 12px 10px;
    text-align:left;
  }

  .bond-hero .stat:first-child{padding-left:0}

  .bond-hero .stat:nth-child(2)::after{display:block}
  .bond-hero .stat:nth-child(3){grid-column:auto}

  .bond-hero .stat strong{font-size:14px}

  .bond-hero .stat span{
    margin-top:5px;
    font-size:10px;
    line-height:1.25;
  }

  /* button: full width, center text */
  .bond-hero .actions{
    width:100%;
    justify-content:flex-start;
  }

  .bond-hero .actions .btn-orange{
    width:100%;
    min-height:48px;
    justify-content:center;
  }

  /* feature card: left align, full width */
  .bond-hero .feature-wrap{
    width:100%;
    max-width:none;
    margin:0;
  }

  /* ---------- Bottom strip: purane design jaisa, bas mobile mein sahi aligned ---------- */
  .bond-hero .bond-feature-strip{padding:0}

  .bond-hero .bond-feature-inner{
    width:calc(100% - 32px);
    max-width:none;
    min-height:0;
    margin:0 auto;
    padding:16px 0 18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:stretch;
  }

  .bond-hero .bond-feature-title{
    grid-column:1/-1;
    padding:0 0 12px;
    text-align:left;
  }

  .bond-hero .bond-feature-stat{
    height:auto;
    min-height:60px;
    padding:12px 8px 12px 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
    border:0;
    border-top:1px solid rgba(3,26,60,.12);
  }

  /* right column: left line + thoda andar */
  .bond-hero .bond-feature-stat:nth-of-type(3),
  .bond-hero .bond-feature-stat:nth-of-type(5){
    padding-left:16px;
    border-left:1px solid rgba(3,26,60,.12);
  }

  .bond-hero .bond-feature-stat strong{
    margin-top:5px;
    font-size:14px;
  }

  .bond-hero .bond-feature-action{
    grid-column:1/-1;
    justify-self:stretch;
    width:100%;
    height:46px;
    margin:14px 0 0;
    justify-content:center;
  }
}

/* ---------- Mobile (600px aur neeche): feature card spacing ---------- */
@media (max-width:600px){

  .bond-hero .feature-wrap{
    height:252px;
    padding-top:10px;
  }

  .bond-hero .feature-card{height:242px}

  .bond-hero .slide{
    grid-template-columns:minmax(0,1fr) 128px;
    gap:10px;
    padding:26px 10px 28px 16px;
  }

  .bond-hero .bond-title{
    max-width:100%;
    font-size:18px;
  }

  .bond-hero .bond-description{
    max-width:100%;
    font-size:9px;
  }

  .bond-hero .rate-chip{right:6px}

  .bond-hero .slider-dots{bottom:10px}
}

/* ---------- Chhoti mobile (380px aur neeche) ---------- */
@media (max-width:380px){

  .bond-hero .hero-title{font-size:28px}
  .bond-hero .hero-subtitle{font-size:16px}

  .bond-hero .stat{padding:10px 6px 10px 8px}
  .bond-hero .stat strong{font-size:13px}
  .bond-hero .stat span{font-size:9px}

  .bond-hero .slide{grid-template-columns:minmax(0,1fr) 112px}
  .bond-hero .bond-title{font-size:16px}

  .bond-hero .bond-feature-stat:nth-of-type(3),
  .bond-hero .bond-feature-stat:nth-of-type(5){padding-left:12px}
}
body {
    background: yellow !important;
}
/* =========================================================
   THEME  (only navy + gold shades - no orange)
========================================================= */
:root{
  --orange:#D4B06A;              /* gold accent */
  --gold-rgb:212,176,106;        /* same gold, for rgba() glows */
  --blue:#244082;                /* main brand blue */
  --blue-glow-rgb:110,150,230;   /* soft light-blue glow */
  --navy:#031a3c;
  --navy-2:#082650;
  --navy-3:#0d3569;
  --ink:#07172f;
  --muted:#65748b;
  --line:rgba(3,26,60,.13);
  --white:#fff;
  --green:#16a34a;
  --green-dark:#087f3d;
  --green-light:#22c55e;
}

/* =========================================================
   RESET
========================================================= */
*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

button,
a{font:inherit}

button{cursor:pointer}

/* =========================================================
   HERO
========================================================= */
.bond-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(520px 300px at 80% 4%,rgba(var(--gold-rgb),.10),transparent 68%),
    radial-gradient(600px 340px at 0% 100%,rgba(3,26,60,.07),transparent 70%),
    linear-gradient(110deg,#eaf7fc 0%,#f5edf9 55%,#f9e7f2 100%);
}

.bond-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:620px;
  height:620px;
  right:-330px;
  top:-385px;
  border:1px solid rgba(3,26,60,.06);
  border-radius:50%;
  box-shadow:
    0 0 0 42px rgba(3,26,60,.018),
    0 0 0 86px rgba(3,26,60,.014);
}

.bond-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.28;
  background-image:
    linear-gradient(rgba(3,26,60,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,26,60,.028) 1px,transparent 1px);
  background-size:68px 68px;
  pointer-events:none;
}

.hero-container{
  width:min(1282px,calc(100% - 84px));
  margin:0 auto;
  padding:18px 0 0;
}

/* =========================================================
   MAIN CONTENT
========================================================= */
.hero-main{
  min-height:335px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 540px;
  align-items:center;
  gap:40px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */
.hero-copy{
  min-width:0;
  padding:8px 0 22px;
}

/* ---------- Trust badge ---------- */
.trust{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 17px 0 8px;
  margin-bottom:13px;
  color:#fff;
  background:linear-gradient(135deg,var(--green-dark),var(--green),var(--green-light));
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px 14px 14px 7px;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.15px;
  box-shadow:
    0 5px 15px rgba(22,163,74,.22),
    inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
  animation:trust-entry .65s cubic-bezier(.22,1,.36,1) both;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.trust::before{
  content:"";
  position:absolute;
  top:0;
  left:-80px;
  width:45px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);
  animation:trust-shine 3.5s ease-in-out infinite;
}

.trust::after{
  content:"";
  position:absolute;
  right:7px;
  top:50%;
  width:6px;
  height:6px;
  border-top:1.5px solid rgba(255,255,255,.8);
  border-right:1.5px solid rgba(255,255,255,.8);
  transform:translateY(-50%) rotate(45deg);
  opacity:.8;
}

.trust:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.06);
  box-shadow:
    0 8px 22px rgba(22,163,74,.3),
    0 0 0 3px rgba(34,197,94,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.trust-icon{
  position:relative;
  z-index:2;
  width:19px;
  height:19px;
  min-width:19px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.85);
  border-radius:5px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 6px rgba(255,255,255,.12);
  animation:icon-pulse 2.4s ease-in-out infinite;
  transition:transform .25s ease;
}

.trust:hover .trust-icon{transform:rotate(-5deg) scale(1.05)}

.trust span:not(.trust-icon){
  position:relative;
  z-index:2;
  white-space:nowrap;
}

@keyframes trust-entry{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes icon-pulse{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.05),
      inset 0 0 6px rgba(255,255,255,.1);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(255,255,255,.08),
      0 0 12px rgba(255,255,255,.15),
      inset 0 0 8px rgba(255,255,255,.15);
  }
}

@keyframes trust-shine{
  0%{left:-80px}
  30%,100%{left:120%}
}

/* ---------- Title ---------- */
.hero-title{
  max-width:690px;
  margin:0;
  color:var(--navy);
  font-size:45px;
  line-height:1.03;
  letter-spacing:-2.15px;
  font-weight:850;
}

.hero-subtitle{
  display:flex;
  align-items:center;
  gap:7px;
  margin:16px 0 22px;
  color:var(--navy);
  font-size:21px;
  line-height:1.1;
  font-weight:750;
}

.hero-subtitle .accent{color:var(--orange)}

.hero-subtitle .dash{
  width:38px;
  height:2px;
  border-radius:4px;
  background:var(--orange);
}

/* =========================================================
   STATS
========================================================= */
.stats{
  width:min(100%,635px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}

.stat{
  min-width:0;
  min-height:76px;
  padding:11px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.stat:first-child{padding-left:0}

.stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:18px;
  right:0;
  width:1px;
  height:40px;
  background:var(--line);
}

.stat strong{
  color:var(--navy);
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.4px;
  font-weight:800;
}

.stat span{
  margin-top:6px;
  color:#69778b;
  font-size:11px;
  line-height:1.2;
}

/* =========================================================
   ACTIONS
========================================================= */
.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
}

.btn{
  min-height:46px;
  border-radius:25px;
  padding:0 21px;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  font-size:14px;
  font-weight:750;
  transition:transform .35s ease,background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}

.btn-orange{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:var(--blue);
  box-shadow:0 8px 20px rgba(36,64,130,.22);
}

.btn-orange::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}

.btn-orange:hover{
  color:#fff;
  background:var(--navy);
  transform:translateY(-3px);
  box-shadow:
    0 10px 24px rgba(3,26,60,.18),
    0 0 0 4px rgba(3,26,60,.06);
}

.btn-orange:hover::before{left:140%}

.btn-orange:active{transform:translateY(-1px) scale(.98)}

.btn-orange b{
  font-size:20px;
  line-height:1;
  font-weight:400;
}

/* =========================================================
   RIGHT FEATURED PANEL
========================================================= */
.feature-wrap{
  position:relative;
  min-width:0;
  height:272px;
  padding-top:10px;
}

.feature-card{
  position:relative;
  height:262px;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.04),transparent 35%),
    linear-gradient(135deg,#0b356c 0%,var(--blue) 72%);
  box-shadow:
    0 18px 42px rgba(3,26,60,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.feature-card::before{
  content:"";
  position:absolute;
  width:410px;
  height:410px;
  right:-205px;
  top:-240px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:
    0 0 0 34px rgba(255,255,255,.018),
    0 0 0 70px rgba(255,255,255,.012);
}

/* soft blue glow (was orange) */
.feature-card::after{
  content:"";
  position:absolute;
  left:-75px;
  bottom:-80px;
  width:280px;
  height:150px;
  border-radius:50%;
  background:rgba(var(--blue-glow-rgb),.16);
  filter:blur(28px);
}

.slide{
  position:absolute;
  inset:0;
  padding:28px 17px 23px 27px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  align-items:center;
  gap:18px;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .4s ease,transform .4s ease;
  z-index:2;
}

.slide.active{
  opacity:1;
  transform:translateX(0);
}

.slide-copy{
  min-width:0;
  align-self:start;
  padding-top:5px;
}

.feature-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
  color:#70ef37;
  font-size:20px;
  line-height:1;
  font-style:italic;
  font-weight:850;
}

.feature-label::before{
  content:"";
  width:20px;
  height:2px;
  border-radius:3px;
  background:#70ef37;
}

.bond-title{
  max-width:300px;
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.65px;
  font-weight:780;
}

.bond-description{
  max-width:300px;
  margin:10px 0 0;
  color:rgba(255,255,255,.64);
  font-size:10px;
  line-height:1.45;
}

.invest{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

.invest-arrow{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  transition:.22s ease;
}

.invest:hover .invest-arrow{
  color:#fff;
  background:var(--orange);
  border-color:var(--orange);
  transform:translateX(3px);
}

/* ---------- Yield card ---------- */
.yield-card{
  position:relative;
  align-self:center;
  height:214px;
  overflow:hidden;
  padding:25px 17px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:21px 21px 30px 21px;
  background:
    radial-gradient(circle at 76% 87%,rgba(var(--blue-glow-rgb),.32),transparent 32%),
    linear-gradient(145deg,#0a2d60,var(--blue) 82%);
  box-shadow:0 15px 30px rgba(0,0,0,.24);
}

.yield-card::before{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-33px;
  width:108px;
  height:108px;
  border:2px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 9px rgba(255,255,255,.04),
    0 0 0 19px rgba(255,255,255,.025);
}

/* gold dot (glow now gold, not orange) */
.yield-card::after{
  content:"";
  position:absolute;
  right:34px;
  bottom:41px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 14px rgba(var(--gold-rgb),.75);
}

.yield-label{
  position:relative;
  z-index:3;
  display:block;
  color:#9eacc0;
  font-size:9px;
  font-weight:650;
}

.yield-number{
  position:relative;
  z-index:3;
  margin-top:4px;
  color:#fff;
  font-size:47px;
  line-height:.93;
  letter-spacing:-2.5px;
  font-weight:900;
  white-space:nowrap;
}

.yield-number span{color:var(--orange)}

.yield-note{
  position:relative;
  z-index:3;
  margin-top:7px;
  color:#8190a6;
  font-size:8px;
}

.maturity{
  position:relative;
  z-index:3;
  margin-top:15px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#8492a8;
  font-size:8px;
}

.maturity strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:12px;
}

.maturity strong span{color:var(--orange)}

/* ---------- Floating chip ---------- */
.rate-chip{
  position:absolute;
  z-index:10;
  top:0;
  right:0;
  min-width:106px;
  padding:8px 11px 9px;
  border-radius:10px 10px 0 10px;
  background:#fff;
  box-shadow:0 10px 23px rgba(3,26,60,.14);
}

.rate-chip small{
  display:block;
  color:#7c899b;
  font-size:6px;
  font-weight:850;
  letter-spacing:.5px;
}

.rate-chip strong{
  display:block;
  margin-top:2px;
  color:var(--orange);
  font-size:16px;
  line-height:1;
}

/* ---------- Slider dots ---------- */
.slider-dots{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
}

.slider-dot{
  width:17px;
  height:3px;
  padding:0;
  border:0;
  border-radius:5px;
  background:rgba(255,255,255,.27);
}

.slider-dot.active{
  width:25px;
  background:#fff;
}

/* =========================================================
   BOTTOM FEATURE STRIP
   Desktop = single bar  |  Mobile = 2x2 grid
========================================================= */
.bond-feature-strip{
  --f-navy:var(--navy,#031a3c);
  --f-gold:var(--orange,#D4B06A);
  --f-line:rgba(3,26,60,.12);

  position:relative;
  z-index:5;
  width:100%;
  background:rgba(255,255,255,.94);
  border-top:1px solid rgba(3,26,60,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.bond-feature-inner{
  width:min(1282px,calc(100% - 84px));
  min-height:72px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr auto;
  align-items:center;
}

.bond-feature-title{
  min-width:0;
  padding-right:20px;
}

.bond-feature-title small,
.bond-feature-title strong{display:block}

.bond-feature-title small{
  color:var(--f-gold);
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.bond-feature-title strong{
  margin-top:6px;
  color:var(--f-navy);
  font-size:14px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.2px;
}

.bond-feature-stat{
  min-width:0;
  height:40px;
  padding:0 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--f-line);
  text-align:center;
}

.bond-feature-stat small{
  color:#7c8798;
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.bond-feature-stat strong{
  margin-top:6px;
  color:var(--f-navy);
  font-size:14px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}

.bond-feature-action{
  justify-self:end;
  height:42px;
  margin-left:18px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:24px;
  color:#fff;
  background:var(--blue);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(3,26,60,.18);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease;
}

/* FIXED: was "color:var#244082" (invalid) */
.bond-feature-action:hover{
  color:var(--navy);
  background:var(--f-gold);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(var(--gold-rgb),.35);
}

/* =========================================================
   LAPTOP (up to 1120px)
========================================================= */
@media(max-width:1120px){
  .hero-container{width:calc(100% - 48px)}

  .hero-main{
    grid-template-columns:minmax(0,1fr) 460px;
    gap:25px;
  }

  .hero-title{font-size:39px}

  .stat{
    padding-left:12px;
    padding-right:12px;
  }

  .stat strong{font-size:16px}

  .slide{
    grid-template-columns:minmax(0,1fr) 170px;
    padding-left:20px;
  }

  .yield-card{height:202px}
  .yield-number{font-size:39px}

  .bond-feature-inner{
    width:calc(100% - 48px);
    grid-template-columns:1.3fr 1fr 1fr 1fr 1fr auto;
  }
  .bond-feature-stat{padding:0 8px}
  .bond-feature-stat strong{font-size:13px}
  .bond-feature-action{padding:0 16px;margin-left:10px}
}

/* =========================================================
   TABLET + MOBILE (up to 900px) - LEFT ALIGNED
========================================================= */
@media(max-width:900px){
  .hero-container{
    padding-top:25px;
    padding-bottom:30px;
  }

  .hero-main{
    min-height:0;
    grid-template-columns:1fr;
    gap:30px;
  }

  .hero-copy{
    width:100%;
    padding-bottom:0;
    text-align:left;
  }

  .trust{margin-left:0;margin-right:0}

  .hero-title{
    max-width:720px;
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .hero-subtitle{
    justify-content:flex-start;
    text-align:left;
  }

  .stats{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  .actions{
    justify-content:flex-start;
    align-items:flex-start;
  }

  .feature-wrap{
    width:100%;
    max-width:650px;
    margin-left:0;
    margin-right:auto;
  }
}

/* =========================================================
   MOBILE (up to 600px)
========================================================= */
@media(max-width:600px){
  .hero-container{
    width:calc(100% - 24px);
    padding-top:22px;
    padding-bottom:25px;
  }

  .hero-main{gap:27px}

  .trust{
    height:32px;
    padding-right:14px;
    gap:7px;
    font-size:10px;
  }

  .trust-icon{
    width:18px;
    height:18px;
    min-width:18px;
  }

  .hero-title{
    width:100%;
    max-width:100%;
    margin:0;
    font-size:33px;
    line-height:1.04;
    letter-spacing:-1.4px;
  }

  .hero-subtitle{
    width:100%;
    flex-wrap:wrap;
    margin-top:14px;
    margin-bottom:19px;
    font-size:18px;
  }

  .hero-subtitle .dash{display:none}

  .stats{
    width:100%;
    grid-template-columns:1fr 1fr;
  }

  .stat{
    min-height:69px;
    padding:10px 11px;
  }

  .stat:first-child{padding-left:0}

  .stat strong{font-size:14px}
  .stat span{font-size:9px}

  .stat:nth-child(2)::after{display:none}

  .stat:nth-child(3){grid-column:1/-1}

  .actions{
    width:100%;
    gap:8px;
  }

  .btn{
    min-height:44px;
    padding:0 16px;
    font-size:12px;
  }

  .btn-orange:first-child{min-width:165px}

  .feature-wrap{
    max-width:none;
    height:242px;
    padding-top:9px;
  }

  .feature-card{
    width:100%;
    height:233px;
    border-radius:15px;
  }

  .slide{
    grid-template-columns:minmax(0,1fr) 126px;
    gap:8px;
    padding:24px 8px 19px 14px;
  }

  .feature-label{
    font-size:17px;
    margin-bottom:11px;
  }

  .feature-label::before{width:16px}

  .bond-title{
    max-width:190px;
    font-size:18px;
  }

  .bond-description{
    max-width:190px;
    font-size:8px;
    line-height:1.45;
  }

  .invest{
    margin-top:13px;
    font-size:11px;
  }

  .invest-arrow{
    width:25px;
    height:25px;
  }

  .yield-card{
    height:181px;
    padding:24px 9px 10px;
    border-radius:16px 16px 22px 16px;
  }

  .yield-label{font-size:7px}

  .yield-number{
    font-size:29px;
    letter-spacing:-1.5px;
  }

  .yield-note{font-size:7px}

  .maturity{
    margin-top:11px;
    font-size:7px;
  }

  .maturity strong{font-size:10px}

  .rate-chip{
    right:4px;
    min-width:92px;
    padding:7px 9px 8px;
  }

  .rate-chip strong{font-size:14px}
}

/* =========================================================
   SMALL MOBILE (up to 390px)
========================================================= */
@media(max-width:390px){
  .hero-title{font-size:29px}

  .hero-subtitle{font-size:17px}

  .stat strong{font-size:13px}
  .stat span{font-size:8px}

  .btn{
    padding:0 13px;
    font-size:11px;
  }

  .btn-orange:first-child{min-width:150px}

  .feature-wrap{height:228px}
  .feature-card{height:219px}

  .slide{
    grid-template-columns:minmax(0,1fr) 112px;
    padding-left:12px;
  }

  .bond-title{font-size:16px}

  .yield-card{
    height:169px;
    padding-top:22px;
  }

  .yield-number{font-size:25px}
}

/* =========================================================
   VERY SMALL MOBILE (up to 340px)
========================================================= */
@media(max-width:340px){
  .hero-container{width:calc(100% - 18px)}

  .trust{max-width:100%}
  .trust span:not(.trust-icon){font-size:9px}

  .hero-title{font-size:27px}
  .hero-subtitle{font-size:16px}

  .stats{grid-template-columns:1fr}

  .stat{
    min-height:60px;
    border-bottom:1px solid var(--line);
  }

  .stat:last-child{border-bottom:0}

  .stat:nth-child(1)::after,
  .stat:nth-child(2)::after{display:none}

  .stat:nth-child(3){grid-column:auto}

  .actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn-orange:first-child{min-width:160px}
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   GLOBAL FIX: no horizontal (left/right) scroll + mobile width
========================================================= */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
img,svg,video,iframe{max-width:100%}

/* header: mobile width */
@media (max-width:991.98px){
  .header-area{max-width:100%}
  .header-area .navbar{flex-wrap:wrap}
  .header-area .navbar-brand img{max-width:100%}
  .header-area .navbar-collapse{width:100%}
  .header-area .header-right{
    flex-wrap:wrap;
    width:100%;
    max-width:100%;
  }
  .header-area .search-box{max-width:100%}
  .header-area .search-box input{min-width:0;max-width:100%}
}

/* =========================================================
   MOBILE ONLY - ALIGNMENT + SPACING FIX (desktop untouched)
========================================================= */

/* ---------- Tablet + Mobile (900px aur neeche) ---------- */
@media (max-width:900px){

  /* page side spacing: sab kuch ek hi left line par */
  .bond-hero .hero-container{
    width:calc(100% - 32px);
    padding:24px 0 26px;
  }

  .bond-hero .hero-main{gap:24px}

  .bond-hero .hero-copy{
    padding:0;
    text-align:left;
  }

  /* trust badge: chhoti screen par wrap ho, bahar na nikle */
  .bond-hero .trust{
    max-width:100%;
    height:auto;
    min-height:32px;
    margin:0 0 14px;
    padding:8px 26px 8px 8px;
    line-height:1.25;
  }

  .bond-hero .trust > span:not(.trust-icon){white-space:normal}

  /* heading + subtitle */
  .bond-hero .hero-title{
    margin:0;
    font-size:32px;
    line-height:1.08;
    letter-spacing:-1.2px;
    text-align:left;
  }

  .bond-hero .hero-subtitle{
    flex-wrap:wrap;
    gap:6px;
    margin:12px 0 20px;
    font-size:18px;
    text-align:left;
  }

  .bond-hero .hero-subtitle .dash{display:none}

  /* stats: 3 barabar columns, left aligned text */
  .bond-hero .stats{
    width:100%;
    grid-template-columns:repeat(3,1fr);
    margin:0 0 20px;
    text-align:left;
  }

  .bond-hero .stat{
    min-height:72px;
    padding:12px 8px 12px 10px;
    text-align:left;
  }

  .bond-hero .stat:first-child{padding-left:0}

  .bond-hero .stat:nth-child(2)::after{display:block}
  .bond-hero .stat:nth-child(3){grid-column:auto}

  .bond-hero .stat strong{font-size:14px}

  .bond-hero .stat span{
    margin-top:5px;
    font-size:10px;
    line-height:1.25;
  }

  /* button: full width, center text */
  .bond-hero .actions{
    width:100%;
    justify-content:flex-start;
  }

  .bond-hero .actions .btn-orange{
    width:100%;
    min-height:48px;
    justify-content:center;
  }

  /* feature card: left align, full width */
  .bond-hero .feature-wrap{
    width:100%;
    max-width:none;
    margin:0;
  }

  /* ---------- Bottom strip: purane design jaisa, bas mobile mein sahi aligned ---------- */
  .bond-hero .bond-feature-strip{padding:0}

  .bond-hero .bond-feature-inner{
    width:calc(100% - 32px);
    max-width:none;
    min-height:0;
    margin:0 auto;
    padding:16px 0 18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:stretch;
  }

  .bond-hero .bond-feature-title{
    grid-column:1/-1;
    padding:0 0 12px;
    text-align:left;
  }

  .bond-hero .bond-feature-stat{
    height:auto;
    min-height:60px;
    padding:12px 8px 12px 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
    border:0;
    border-top:1px solid rgba(3,26,60,.12);
  }

  /* right column: left line + thoda andar */
  .bond-hero .bond-feature-stat:nth-of-type(3),
  .bond-hero .bond-feature-stat:nth-of-type(5){
    padding-left:16px;
    border-left:1px solid rgba(3,26,60,.12);
  }

  .bond-hero .bond-feature-stat strong{
    margin-top:5px;
    font-size:14px;
  }

  .bond-hero .bond-feature-action{
    grid-column:1/-1;
    justify-self:stretch;
    width:100%;
    height:46px;
    margin:14px 0 0;
    justify-content:center;
  }
}

/* ---------- Mobile (600px aur neeche): feature card spacing ---------- */
@media (max-width:600px){

  .bond-hero .feature-wrap{
    height:252px;
    padding-top:10px;
  }

  .bond-hero .feature-card{height:242px}

  .bond-hero .slide{
    grid-template-columns:minmax(0,1fr) 128px;
    gap:10px;
    padding:26px 10px 28px 16px;
  }

  .bond-hero .bond-title{
    max-width:100%;
    font-size:18px;
  }

  .bond-hero .bond-description{
    max-width:100%;
    font-size:9px;
  }

  .bond-hero .rate-chip{right:6px}

  .bond-hero .slider-dots{bottom:10px}
}

/* ---------- Chhoti mobile (380px aur neeche) ---------- */
@media (max-width:380px){

  .bond-hero .hero-title{font-size:28px}
  .bond-hero .hero-subtitle{font-size:16px}

  .bond-hero .stat{padding:10px 6px 10px 8px}
  .bond-hero .stat strong{font-size:13px}
  .bond-hero .stat span{font-size:9px}

  .bond-hero .slide{grid-template-columns:minmax(0,1fr) 112px}
  .bond-hero .bond-title{font-size:16px}

  .bond-hero .bond-feature-stat:nth-of-type(3),
  .bond-hero .bond-feature-stat:nth-of-type(5){padding-left:12px}
}
:root {
    --bond-navy: #13244E;
    --bond-gold: #d7b56d;
    --bond-gold-dark: #96763d;
    --bond-text: #25334a;
    --bond-muted: #737f91;
    --bond-border: #e5e9ef;
    --bond-background: #f7f8fa;
    --bond-cream: #fcf9f1;
  }

  .bond-opportunities,
  .bond-opportunities * { box-sizing: border-box; }

  .bond-opportunities {
    padding: 48px 20px;
    overflow: hidden;
    background:
      radial-gradient(900px 300px at 10% -10%, rgba(215,181,109,.12), transparent 60%),
      var(--bond-background);
    color: var(--bond-text);
    font-family: "Lato", Arial, sans-serif;
  }

  .bond-section-inner { width: min(100%, 1300px); margin: 0 auto; }

  /* ---------- Section heading ---------- */
  .bond-heading-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 28px;
  }
  .bond-eyebrow { margin: 0 0 9px; color: var(--bond-gold-dark); font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
  .bond-heading-row h2 { margin: 0; color: var(--bond-navy); font-size: clamp(28px, 3vw, 37px); font-weight: 900; line-height: 1.2; }
  .bond-heading-description { margin: 10px 0 0; color: var(--bond-muted); font-size: 15px; line-height: 1.6; }
  .bond-view-all {
    display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px;
    padding: 12px 16px; border: 1px solid var(--bond-border); border-radius: 6px;
    color: var(--bond-navy); background: #fff;
    font-size: 13px; font-weight: 900; text-decoration: none; transition: .25s ease;
  }
  .bond-view-all span { transition: transform .25s ease; }
  .bond-view-all:hover { border-color: var(--bond-gold); background: #fffaf0; transform: translateY(-2px); }
  .bond-view-all:hover span { transform: translateX(4px); }

  /* ---------- Slider ---------- */
  .bondSwiper { padding: 14px 6px 26px; overflow: hidden; }
  .bondSwiper .swiper-wrapper { align-items: stretch; }
  .bondSwiper .swiper-slide { display: flex; height: auto; min-width: 0; }
  .bondSwiper .swiper-slide > .bond-card { height: 100%; }

  /* ---------- Card ---------- */
  .bond-card {
    position: relative; display: flex; flex-direction: column; width: 100%;
    padding: 0; margin: 0; container-type: inline-size;
    border: 1px solid var(--bond-border); border-radius: 16px; overflow: hidden;
    background: #fff; box-shadow: 0 6px 20px rgba(19,36,78,.06);
    opacity: 0; transform: translateY(24px);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity .6s ease;
  }
  .bond-opportunities.is-visible .bond-card { opacity: 1; transform: translateY(0); }
  .bond-opportunities.is-visible .swiper-slide:nth-child(2) .bond-card { transition-delay: .08s; }
  .bond-opportunities.is-visible .swiper-slide:nth-child(3) .bond-card { transition-delay: .16s; }
  .bond-opportunities.is-visible .swiper-slide:nth-child(4) .bond-card { transition-delay: .24s; }
  .bond-opportunities.is-visible .bond-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(19,36,78,.14);
    transition-delay: 0s;
  }

  /* ---------- Compact header (bond / investment theme) ---------- */
  .bond-card-header {
    position: relative; width: 100%; margin: 0;
    padding: 40px 0 0;
    background-color: #0e1c40;
    background-image:
      /* soft navy fade behind the logo so it stays clean */
      radial-gradient(ellipse 45% 130% at 50% 100%, rgba(14,28,64,.9), transparent 75%),
      /* candlestick chart + gold trend line */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 15H400M0 30H400M0 45H400M0 60H400' stroke='white' stroke-opacity='.06'/%3E%3Cpath d='M20 48V66M48 44V62M76 42V58M104 36V54M132 38V56M160 30V48M188 32V46M216 24V42M244 26V40M272 18V36M300 14V32M328 16V30M356 8V26M384 4V22' stroke='white' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cg fill='%23d7b56d' fill-opacity='.8'%3E%3Crect x='16' y='53' width='8' height='9'/%3E%3Crect x='72' y='46' width='8' height='9'/%3E%3Crect x='100' y='44' width='8' height='6'/%3E%3Crect x='156' y='34' width='8' height='10'/%3E%3Crect x='212' y='28' width='8' height='10'/%3E%3Crect x='268' y='22' width='8' height='10'/%3E%3Crect x='296' y='18' width='8' height='10'/%3E%3Crect x='352' y='12' width='8' height='10'/%3E%3Crect x='380' y='8' width='8' height='10'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.3'%3E%3Crect x='44' y='50' width='8' height='8'/%3E%3Crect x='128' y='42' width='8' height='10'/%3E%3Crect x='184' y='36' width='8' height='6'/%3E%3Crect x='240' y='30' width='8' height='6'/%3E%3Crect x='324' y='19' width='8' height='7'/%3E%3C/g%3E%3Cpath d='M20 57L48 54L76 50L104 47L132 47L160 39L188 39L216 33L244 33L272 27L300 23L328 22L356 17L384 13' fill='none' stroke='%23f3dfae' stroke-opacity='.9' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='384' cy='13' r='3' fill='%23f3dfae'/%3E%3C/svg%3E"),
      /* gold glow top-right */
      radial-gradient(260px 140px at 100% 0%, rgba(215,181,109,.30), transparent 70%),
      linear-gradient(135deg, #1d3566, #0e1c40);
    background-size: 100% 100%, cover, 100% 100%, 100% 100%;
    background-position: center, center bottom, center, center;
    background-repeat: no-repeat;
  }
  .bond-card-header::before {             /* gold shimmer line */
    content: ""; position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--bond-gold), #f3dfae, var(--bond-gold));
    background-size: 200% 100%; animation: bondShimmer 3s linear infinite;
  }

  .bond-company-logo {
    position: absolute; z-index: 3; top: 10px; left: 50%;
    width: 52px; height: 52px; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #e6e1d6; border-radius: 15px; background: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.28);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .bond-company-logo img { display: block; width: 100%; height: 100%; padding: 8px; object-fit: contain; }
  .bond-card:hover .bond-company-logo { transform: translateX(-50%) translateY(-3px) scale(1.07); }

  /* UPDATED: rupee coin + bars are now fixed-size background layers, so alignment stays the same on every screen */
  .bond-company-panel {
    position: relative; z-index: 2; overflow: hidden;
    padding: 58px 12px 20px;
    text-align: center;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(215,181,109,.6);
    border-bottom: 1px solid #efe6cf;
    background-color: #fffdf8;
    background-image:
      /* layer 1: rupee coin (fixed 60x60, top-right) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='27' fill='none' stroke='%23d7b56d' stroke-opacity='.45' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%23d7b56d' stroke-opacity='.3' stroke-dasharray='2 3'/%3E%3Ctext x='30' y='40' font-size='27' text-anchor='middle' fill='%23d7b56d' fill-opacity='.4' font-family='Georgia,serif' font-weight='700'%3E%E2%82%B9%3C/text%3E%3C/svg%3E"),
      /* layer 2: rising bars (fixed 64x56, bottom-left) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cg fill='%23d7b56d' fill-opacity='.13'%3E%3Crect x='0' y='44' width='10' height='12'/%3E%3Crect x='14' y='34' width='10' height='22'/%3E%3Crect x='28' y='22' width='10' height='34'/%3E%3Crect x='42' y='8' width='10' height='48'/%3E%3C/g%3E%3Cpath d='M5 40L19 29L33 16L47 2' fill='none' stroke='%23d7b56d' stroke-opacity='.4' stroke-width='1.2'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #ffffff 0%, #fbf6e9 100%);
    background-size: 38px 38px, 64px 56px, 100% 100%;
    background-position: right 24px top 10px, left 14px bottom 0, 0 0;
    background-repeat: no-repeat;
  }
  .bond-company-panel::before {           /* thin gold divider at the bottom */
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--bond-gold), transparent);
  }
  .bond-company-panel::after {            /* hover shine */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
    transform: translateX(-120%);
  }
  .bond-card:hover .bond-company-panel::after { transform: translateX(120%); transition: transform .9s ease; }

  .bond-header-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em; margin: 0; color: var(--bond-navy);
    font-family: "Lato", Arial, sans-serif; font-size: 14px; font-weight: 900;
    line-height: 1.35; letter-spacing: .3px; text-transform: uppercase; overflow-wrap: anywhere;
  }

  /* ---------- Card body ---------- */
  .bond-card-body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }

  .bond-type-pill {
    align-self: flex-start; padding: 5px 10px; margin-bottom: 10px;
    border: 1px solid #eee5d2; border-radius: 999px;
    color: #806735; background: #fcfaf5; font-size: 10px; font-weight: 900; letter-spacing: .4px;
  }
  .bond-card-title {
    height: 45px; margin: 0 0 12px; color: var(--bond-navy);
    font-size: 15px; font-weight: 900; line-height: 1.5; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bond-field-label { display: block; margin-bottom: 4px; color: var(--bond-muted); font-size: 11px; font-weight: 700; }

  /* ISIN */
  .bond-isin-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; margin-bottom: 6px;
    border: 1px dashed #dcc999; border-radius: 10px;
    background: linear-gradient(135deg, #fffdf8, #fbf5e6);
  }
  .bond-isin-row .bond-field-label { margin-bottom: 2px; }
  .bond-isin-value { color: var(--bond-navy); font-size: 14px; font-weight: 900; letter-spacing: .8px; overflow-wrap: anywhere; }
  .bond-copy-btn {
    flex: 0 0 32px; width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #eadfc4; border-radius: 8px;
    color: var(--bond-gold-dark); background: #fff; cursor: pointer; transition: .2s ease;
  }
  .bond-copy-btn svg { width: 15px; height: 15px; }
  .bond-copy-btn:hover { color: var(--bond-navy); background: var(--bond-gold); border-color: var(--bond-gold); transform: scale(1.06); }
  .bond-copy-btn.copied { color: #fff; background: #2e8b57; border-color: #2e8b57; }

  /* Metrics */
  .bond-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 22px; }
  .bond-metric {
    display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 54px;
    padding: 8px 8px 8px 0; border-bottom: 1px solid var(--bond-border); overflow-wrap: anywhere;
  }
  .bond-metric:nth-child(odd) { border-right: 1px solid var(--bond-border); }
  .bond-metric:nth-child(even) { padding-left: 12px; padding-right: 0; }
  .bond-metric strong { color: var(--bond-text); font-size: 13px; font-weight: 900; line-height: 1.45; }
  .bond-rating { color: #1f7a4d !important; }
  .bond-rating-by { color: var(--bond-muted); font-size: 11px; font-weight: 700; letter-spacing: .2px; }

  /* ---------- Actions: two equal buttons in one aligned row ---------- */
  .bond-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    margin-top: auto; padding-top: 4px;
  }
  .bond-price-btn,
  .bond-details-btn {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 44px; padding: 0 8px; border-radius: 8px;
    font-size: 12px; font-weight: 900; line-height: 1; white-space: nowrap;
    text-decoration: none; transition: .25s ease;
  }

  /* Login for Price: gold */
  .bond-price-btn {
    border: 1.5px solid var(--bond-gold); color: var(--bond-navy);
    background: linear-gradient(135deg, #e9cf92, var(--bond-gold));
    box-shadow: 0 5px 12px rgba(215,181,109,.38);
  }
  .bond-price-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }
  .bond-price-btn::before {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
  }
  .bond-price-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(215,181,109,.55); }
  .bond-price-btn:hover::before { left: 130%; }

  /* View Details: navy outline */
  .bond-details-btn {
    border: 1.5px solid var(--bond-navy); color: var(--bond-navy); background: #fff;
  }
  .bond-btn-arrow { color: var(--bond-gold-dark); font-size: 15px; transition: transform .25s ease; }
  .bond-details-btn:hover { color: #fff; background: var(--bond-navy); transform: translateY(-2px); }
  .bond-details-btn:hover .bond-btn-arrow { color: var(--bond-gold); transform: translateX(4px); }

  /* ---------- Footer / controls ---------- */
  .bond-slider-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; }
  .bond-pagination { position: static; width: auto !important; }
  .bond-pagination .swiper-pagination-bullet {
    width: 7px; height: 7px; margin: 0 3px !important; background: #cbd2dd; opacity: 1;
    transition: width .3s ease, background .3s ease;
  }
  .bond-pagination .swiper-pagination-bullet-active { width: 24px; border-radius: 5px; background: var(--bond-gold); }

  .bond-slider-arrows { display: flex; gap: 8px; }
  .bond-prev, .bond-next {
    width: 40px; height: 40px; border: 1px solid var(--bond-border); border-radius: 8px;
    color: var(--bond-navy); background: #fff; font-size: 17px; cursor: pointer; transition: .2s ease;
  }
  .bond-prev:hover, .bond-next:hover { border-color: var(--bond-gold); background: var(--bond-navy); color: var(--bond-gold); transform: translateY(-2px); }

  .bond-disclaimer { margin: 14px 0 0; color: var(--bond-muted); font-size: 11px; line-height: 1.6; }


  /* ---------- Desktop / laptop alignment fixes ---------- */
  .bond-opportunities .bondSwiper .bond-card { padding: 0 !important; margin: 0 !important; }
  .bond-opportunities .bond-card > .bond-card-header { width: 100% !important; margin: 0 !important; padding: 40px 0 0 !important; }
  .bond-opportunities .bond-card > .bond-card-body { width: 100%; padding: 16px 18px 24px !important; }
  .bond-opportunities .bond-card-header,
  .bond-opportunities .bond-card-body { float: none; max-width: none; }

  /* pagination dots centred with the arrow buttons */
  .bond-opportunities .bond-slider-footer { align-items: center; min-height: 40px; }
  .bond-opportunities .bond-pagination {
    position: static !important; transform: none !important; width: auto !important;
    display: flex; align-items: center; height: 40px; margin: 0; padding: 0;
  }
  .bond-opportunities .bond-pagination .swiper-pagination-bullet { display: block; flex: 0 0 auto; }

  /* buttons stack only when the card itself is narrow */
  @container (max-width: 270px) {
    .bond-actions { grid-template-columns: 1fr; }
  }

  /* laptop */
  @media (min-width: 900px) and (max-width: 1199px) {
    .bond-opportunities { padding: 44px 24px; }
  }
  /* large desktop */
  @media (min-width: 1200px) {
    .bond-opportunities { padding: 56px 32px; }
    .bond-heading-row { margin-bottom: 36px; }
    .bond-card-body { padding: 18px 20px 26px !important; }
    .bond-header-title { font-size: 14.5px; }
  }

  /* =========================================================
     DESKTOP / LAPTOP ONLY (1024px and up) – mobile is untouched
     ========================================================= */
  @media (min-width: 1024px) {
    /* remove the outer box around the slider */
    .bond-section,
    .bond-section .container { background: transparent !important; }
    .bond-opportunities {
      background: transparent !important; box-shadow: none !important;
      border: 0 !important; border-radius: 0 !important;
      padding: 56px 0 40px !important;
    }
    .bond-opportunities .bond-section-inner { width: min(100%, 1280px); padding: 0 24px; }

    /* heading */
    .bond-opportunities .bond-heading-row { margin-bottom: 34px; align-items: flex-end; }
    .bond-opportunities .bond-heading-row h2 { font-size: 40px; letter-spacing: -.3px; }
    .bond-opportunities .bond-heading-description { font-size: 16px; }
    .bond-opportunities .bond-view-all { padding: 13px 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(19,36,78,.05); }

    /* slider area: room for shadow + hover lift, no clipping */
    .bond-opportunities .bondSwiper { padding: 16px 10px 34px; margin: 0 -10px; }

    /* cards */
    .bond-opportunities .bondSwiper .bond-card {
      border-radius: 18px; border: 1px solid #e8ecf2;
      box-shadow: 0 8px 26px rgba(19,36,78,.07);
    }
    .bond-opportunities.is-visible .bond-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(19,36,78,.15); }

    /* header: a little taller + bigger logo */
    .bond-opportunities .bond-card > .bond-card-header { padding: 46px 0 0 !important; border-radius: 18px 18px 0 0; }
    .bond-opportunities .bond-company-logo { width: 60px; height: 60px; top: 12px; border-radius: 17px; }
    .bond-opportunities .bond-company-logo img { padding: 9px; }
    .bond-opportunities .bond-company-panel {
      padding: 64px 14px 22px; border-radius: 24px 24px 0 0;
      background-size: 42px 42px, 64px 56px, 100% 100%;
      background-position: right 28px top 12px, left 14px bottom 0, 0 0;
    }
    .bond-opportunities .bond-header-title { font-size: 14.5px; }

    /* body */
    .bond-opportunities .bond-card > .bond-card-body { padding: 20px 22px 28px !important; }
    .bond-opportunities .bond-type-pill { margin-bottom: 12px; }
    .bond-opportunities .bond-card-title { height: 46px; font-size: 15px; margin-bottom: 14px; }
    .bond-opportunities .bond-isin-row { padding: 12px 14px; margin-bottom: 8px; }
    .bond-opportunities .bond-metric { min-height: 58px; }
    .bond-opportunities .bond-metric strong { font-size: 14px; }
    .bond-opportunities .bond-metrics { margin-bottom: 26px; }

    /* buttons */
    .bond-opportunities .bond-actions { gap: 14px; }
    .bond-opportunities .bond-price-btn,
    .bond-opportunities .bond-details-btn { height: 46px; font-size: 12.5px; padding: 0 6px; border-radius: 9px; }

    /* controls */
    .bond-opportunities .bond-slider-footer { margin-top: 8px; }
    .bond-opportunities .bond-prev,
    .bond-opportunities .bond-next { width: 44px; height: 44px; border-radius: 10px; }
    .bond-opportunities .bond-pagination { height: 44px; }
    .bond-opportunities .bond-disclaimer { margin-top: 18px; font-size: 12px; }
  }

  /* ---------- Keyframes ---------- */
  @keyframes bondShimmer { to { background-position: -200% 0; } }

  /* ---------- Responsive ---------- */
  @media (max-width: 767px) {
    .bond-opportunities { padding: 32px 15px; }
    .bond-heading-row { align-items: flex-start; flex-direction: column; gap: 16px; }
    .bond-heading-row h2 { font-size: 29px; }
    .bond-card-body { padding: 16px; }
  }
  @media (max-width: 380px) {
    .bond-header-title { font-size: 13px; letter-spacing: .2px; }
    .bond-isin-value { font-size: 13px; letter-spacing: .5px; }
    .bond-metric strong { font-size: 12px; }
    .bond-actions { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bond-card { opacity: 1; transform: none; }
    .bond-opportunities *, .bond-opportunities *::before, .bond-opportunities *::after {
      animation: none !important; transition-duration: .01ms !important;
    }
  }
  /* --side-space pehle se :root me hona chahiye (dobara likhne ki zarurat nahi) */

/* FEATURE STRIP (3 cards wala) */
section.invest-feature-strip {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section.invest-feature-strip > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
    box-sizing: border-box !important;
}

section.invest-feature-strip .invest-feature-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* HOW EASY TO INVEST SECTION */
section.fi-investment-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section.fi-investment-section > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--side-space) !important;
    padding-right: var(--side-space) !important;
    box-sizing: border-box !important;
}

section.fi-investment-section .fi-process-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* ===== Equal height: 3 step cards ===== */
.fi-process-wrapper .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.fi-process-wrapper .row > [class*="col-"] {
    display: flex !important;
}

.fi-process-card {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ===== Inner boxes fill the remaining height of the card ===== */
.fi-kyc-wrapper,
.fi-bond-card,
.fi-payment-card {
    flex: 1 1 auto !important;
    height: 100% !important;
}

.fi-kyc-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* ===== Bottom area: Ready to Invest + Need Assistance ===== */
.finpro-bottom-area .row {
    display: flex !important;
    align-items: stretch !important;
}

.finpro-bottom-area .row > [class*="col-"] {
    display: flex !important;
}

.finpro-invest-card,
.finpro-help-card {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* ===== Mobile: let height be automatic when columns stack ===== */
@media (max-width: 991px) {
    .fi-process-card,
    .fi-bond-card,
    .fi-payment-card,
    .finpro-invest-card,
    .finpro-help-card {
        height: auto !important;
    }
}