/*==========================================================
 International Investment Solutions
 Premium Corporate Website
 Main Stylesheet
 Version: 1.0
==========================================================*/

/*==========================================================
 GOOGLE FONTS
==========================================================*/

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

/*==========================================================
 ROOT VARIABLES
==========================================================*/

:root{

--primary:#0B2345;
--secondary:#153B72;
--gold:#D4AF37;
--gold-light:#F4D76B;
--accent:#2D7FF9;

--white:#ffffff;
--light:#f8f9fc;
--gray:#6c757d;
--dark:#1a1a1a;
--border:#e5e5e5;

--success:#16a34a;
--danger:#dc3545;

--shadow-sm:0 5px 15px rgba(0,0,0,.08);

--shadow:0 15px 35px rgba(0,0,0,.10);

--shadow-lg:0 25px 60px rgba(0,0,0,.15);

--radius:12px;

--radius-lg:20px;

--transition:.35s ease;

}

/*==========================================================
 RESET
==========================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

font-size:16px;

font-weight:400;

line-height:1.8;

color:var(--dark);

background:#fff;

overflow-x:hidden;

}

/*==========================================================
 TYPOGRAPHY
==========================================================*/

h1,h2,h3,h4,h5,h6{

font-weight:700;

line-height:1.2;

color:var(--primary);

margin-bottom:20px;

}

h1{

font-size:58px;

}

h2{

font-size:42px;

}

h3{

font-size:34px;

}

h4{

font-size:26px;

}

h5{

font-size:20px;

}

p{

margin-bottom:20px;

color:#555;

}

a{

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}

/*==========================================================
 UTILITIES
==========================================================*/

.section-subtitle{

display:inline-block;

padding:8px 20px;

background:rgba(212,175,55,.12);

color:var(--gold);

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

border-radius:50px;

margin-bottom:20px;

}

.section-title{

font-size:44px;

margin-bottom:25px;

}

.lead{

font-size:19px;

color:#666;

}

/*==========================================================
 BUTTONS
==========================================================*/

.btn{

padding:14px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-gold{

background:var(--gold);

border:none;

color:#fff;

}

.btn-gold:hover{

background:#b68d16;

transform:translateY(-3px);

box-shadow:var(--shadow);

color:#fff;

}

.btn-outline-light{

border:2px solid #fff;

color:#fff;

}

.btn-outline-light:hover{

background:#fff;

color:var(--primary);

}

/*==========================================================
 LOADER
==========================================================*/

#loader{

position:fixed;

inset:0;

background:#fff;

z-index:999999;

display:flex;

justify-content:center;

align-items:center;

}

.spinner-border{

width:4rem;

height:4rem;

}

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

.top-bar{

background:var(--primary);

padding:10px 0;

font-size:14px;

color:#fff;

}

.top-bar ul{

display:flex;

gap:30px;

list-style:none;

margin:0;

padding:0;

}

.top-bar li{

display:flex;

align-items:center;

gap:8px;

}

.top-bar a{

color:#fff;

margin-left:15px;

font-size:15px;

}

.top-bar a:hover{

color:var(--gold);

}

/*==========================================================
 NAVBAR
==========================================================*/

.navbar{

position:absolute;

top:0;

left:0;

width:100%;

padding:20px 0;

z-index:999;

transition:.4s;

}

.navbar.scrolled{

background:rgba(11,35,69,.97);

backdrop-filter:blur(15px);

box-shadow:var(--shadow);

position:fixed;

}

.navbar-brand img{

height:72px;

}

.navbar-nav .nav-link{

font-weight:600;

font-size:15px;

margin-left:20px;

color:#fff;

position:relative;

}

.navbar-nav .nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

.navbar-nav .nav-link:hover::after,

.navbar-nav .active::after{

width:100%;

}

.navbar-nav .nav-link:hover{

color:var(--gold);

}

/*==========================================================
 PAGE HERO
==========================================================*/

.page-banner{

position:relative;

padding:170px 0 120px;

background:url("../img/banner.jpg") center/cover no-repeat;

color:#fff;

overflow:hidden;

}

.banner-overlay{

position:absolute;

inset:0;

background:linear-gradient(

135deg,

rgba(11,35,69,.92),

rgba(21,59,114,.82)

);

}

.page-banner .container{

position:relative;

z-index:2;

}

.page-banner h1{

color:#fff;

font-size:64px;

margin-bottom:25px;

}

.page-banner p{

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

font-size:20px;

max-width:700px;

}

/*==========================================================
 BREADCRUMB
==========================================================*/

.breadcrumb{

background:none;

padding:0;

margin-top:30px;

}

.breadcrumb-item,

.breadcrumb-item a{

color:#fff;

}

.breadcrumb-item+.breadcrumb-item::before{

color:#fff;

}
/*==========================================================
 HERO SECTION
==========================================================*/

.hero-section{

min-height:100vh;
height:auto;
position:relative;
overflow:hidden;
background:#07182f;

}

.hero-slider{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:1;

}

.hero-slide{

position:relative;

height:100vh;

background-position:center;

background-size:cover;

background-repeat:no-repeat;

}

.hero-slide::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
135deg,
rgba(6,18,36,.82),
rgba(11,35,69,.88)
);

}

.hero-content{

position:relative;
display:flex;
z-index:3;

color:#fff;

padding-top:120px;

padding-bottom:120px;

}

.hero-content h1{

font-size:72px;

font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:30px;

}

.hero-content p{

font-size:21px;

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

max-width:700px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:20px;

margin-top:20px;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

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

backdrop-filter:blur(12px);

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

border-radius:50px;

margin-bottom:25px;

color:#fff;

font-weight:600;

}

.hero-scroll{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

color:#fff;

font-size:28px;

animation:bounce 2s infinite;

z-index:5;

}

/*==========================================================
 HERO SHAPES
==========================================================*/

.hero-shape{

position:absolute;

border-radius:50%;

filter:blur(60px);

opacity:.18;

pointer-events:none;

}

.hero-shape.one{

width:350px;

height:350px;

background:#D4AF37;

top:-120px;

right:-100px;

}

.hero-shape.two{

width:260px;

height:260px;

background:#2D7FF9;

bottom:-80px;

left:-60px;

}

/*==========================================================
 HERO STATISTICS
==========================================================*/

.hero-stats{

margin-top:70px;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.hero-stat{

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

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

backdrop-filter:blur(12px);

padding:30px;

border-radius:18px;

text-align:center;

transition:var(--transition);

}

.hero-stat:hover{

transform:translateY(-8px);

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

}

.hero-stat h3{

color:#fff;

font-size:42px;

margin-bottom:8px;

}

.hero-stat p{

margin:0;

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

}

/*==========================================================
 ABOUT SECTION
==========================================================*/

.about-section{

    margin-top:0;
    transform:none;
    position:relative;

}

.about-image{

position:relative;

}

.about-image img{

border-radius:var(--radius-lg);

box-shadow:var(--shadow-lg);

}

.about-experience{

position:absolute;

right:-25px;

bottom:40px;

background:var(--gold);

color:#fff;

padding:30px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

}

.about-experience h2{

font-size:54px;

margin:0;

color:#fff;

}

.about-experience span{

font-weight:600;

display:block;

margin-top:8px;

}

/*==========================================================
 FEATURE CARDS
==========================================================*/

.feature-card{

background:#fff;

border-radius:18px;

padding:40px 35px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

height:100%;

border:1px solid #eef2f7;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.feature-icon{

width:82px;

height:82px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

border-radius:18px;

font-size:34px;

color:#fff;

margin-bottom:25px;

}

.feature-card h4{

margin-bottom:18px;

}

.feature-card p{

margin-bottom:0;

}

/*==========================================================
 INVESTMENT CARDS
==========================================================*/

.investment-card{

position:relative;

background:#fff;

overflow:hidden;

border-radius:20px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

height:100%;

}

.investment-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.6s;

}

.investment-card:hover img{

transform:scale(1.08);

}

.investment-content{

padding:30px;

}

.investment-content h4{

margin-bottom:15px;

}

.investment-content a{

font-weight:700;

color:var(--gold);

}

.investment-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

/*==========================================================
 SERVICE CARDS
==========================================================*/

.service-card{

padding:35px;

border-radius:18px;

background:#fff;

border:1px solid #edf1f6;

transition:var(--transition);

height:100%;

box-shadow:var(--shadow-sm);

}

.service-card:hover{

background:var(--primary);

color:#fff;

transform:translateY(-8px);

}

.service-card:hover h4,

.service-card:hover p,

.service-card:hover i{

color:#fff;

}

.service-card i{

font-size:42px;

color:var(--gold);

margin-bottom:22px;

transition:var(--transition);

}

/*==========================================================
 GLASS CARDS
==========================================================*/

.glass-card{

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

backdrop-filter:blur(16px);

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

border-radius:20px;

padding:35px;

}

/*==========================================================
 IMAGE EFFECTS
==========================================================*/

.image-hover{

overflow:hidden;

border-radius:20px;

}

.image-hover img{

transition:.7s;

}

.image-hover:hover img{

transform:scale(1.08) rotate(.8deg);

}

/*==========================================================
 DECORATIVE BACKGROUNDS
==========================================================*/

.bg-gradient-primary{

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#fff;

}

.bg-gradient-gold{

background:linear-gradient(
135deg,
#d4af37,
#f4d76b
);

}

/*==========================================================
 ANIMATIONS
==========================================================*/

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translate(-50%,0);

}

40%{

transform:translate(-50%,-12px);

}

60%{

transform:translate(-50%,-6px);

}

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.float-animation{

animation:float 4s ease-in-out infinite;

}

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

.timeline{

position:relative;

padding:40px 0;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

bottom:0;

width:3px;

background:var(--gold);

transform:translateX(-50%);

}

.timeline-item{

position:relative;

width:50%;

padding:25px 50px;

margin-bottom:50px;

}

.timeline-item:nth-child(odd){

left:0;

text-align:right;

}

.timeline-item:nth-child(even){

left:50%;

}

.timeline-content{

background:#fff;

padding:35px;

border-radius:18px;

box-shadow:var(--shadow);

position:relative;

}

.timeline-dot{

position:absolute;

top:45px;

width:22px;

height:22px;

background:var(--gold);

border-radius:50%;

border:5px solid #fff;

box-shadow:0 0 0 5px rgba(212,175,55,.25);

}

.timeline-item:nth-child(odd) .timeline-dot{

right:-12px;

}

.timeline-item:nth-child(even) .timeline-dot{

left:-12px;

}

/*==========================================================
TEAM
==========================================================*/

.team-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow-sm);

transition:.35s;

height:100%;

}

.team-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.team-image{

overflow:hidden;

}

.team-image img{

width:100%;

height:360px;

object-fit:cover;

transition:.6s;

}

.team-card:hover .team-image img{

transform:scale(1.08);

}

.team-info{

padding:30px;

text-align:center;

}

.team-info h4{

margin-bottom:5px;

}

.team-position{

color:var(--gold);

font-weight:600;

margin-bottom:15px;

}

.team-social{

display:flex;

justify-content:center;

gap:12px;

margin-top:20px;

}

.team-social a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--primary);

color:#fff;

transition:.3s;

}

.team-social a:hover{

background:var(--gold);

}

/*==========================================================
STATISTICS
==========================================================*/

.statistics{

padding:100px 0;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

}

.counter-box{

text-align:center;

padding:35px;

}

.counter{

font-size:60px;

font-weight:800;

color:#fff;

}

.counter-title{

margin-top:15px;

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

}

/*==========================================================
TESTIMONIALS
==========================================================*/

.testimonial-card{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

height:100%;

position:relative;

}

.testimonial-card::before{

content:"\201C";

position:absolute;

top:15px;

right:25px;

font-size:90px;

color:rgba(212,175,55,.18);

font-family:serif;

}

.client{

display:flex;

align-items:center;

margin-top:25px;

gap:15px;

}

.client img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

}

.client h5{

margin:0;

}

.client span{

font-size:14px;

color:#777;

}

/*==========================================================
FAQ
==========================================================*/

.accordion-item{

border:none;

margin-bottom:15px;

border-radius:15px;

overflow:hidden;

box-shadow:var(--shadow-sm);

}

.accordion-button{

padding:22px 25px;

font-weight:600;

background:#fff;

}

.accordion-button:not(.collapsed){

background:var(--primary);

color:#fff;

}

.accordion-button:focus{

box-shadow:none;

}

.accordion-body{

padding:25px;

}

/*==========================================================
CONTACT
==========================================================*/

.contact-card{

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow-sm);

transition:.35s;

height:100%;

}

.contact-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}

.contact-card i{

font-size:46px;

color:var(--gold);

margin-bottom:20px;

}

.contact-form-card{

background:#fff;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);

}

.office-card{

background:var(--primary);

color:#fff;

padding:40px;

border-radius:20px;

height:100%;

}

.office-card h3,

.office-card th,

.office-card td{

color:#fff;

}

.office-card table{

margin:0;

}

/*==========================================================
APPLICATION FORM
==========================================================*/

.application-card{

background:#fff;

border-radius:20px;

padding:45px;

box-shadow:var(--shadow);

}

.application-progress{

display:flex;

justify-content:space-between;

margin:45px 0;

}

.step{

flex:1;

text-align:center;

position:relative;

}

.step::after{

content:"";

position:absolute;

top:18px;

left:50%;

width:100%;

height:3px;

background:#ddd;

z-index:0;

}

.step:last-child::after{

display:none;

}

.step span{

position:relative;

z-index:2;

display:inline-flex;

width:38px;

height:38px;

align-items:center;

justify-content:center;

background:#ddd;

border-radius:50%;

font-weight:700;

}

.step.active span{

background:var(--gold);

color:#fff;

}

.form-step{

display:none;

}

.form-step.active{

display:block;

animation:fadeIn .5s;

}

.form-control,

.form-select{

padding:14px 18px;

border-radius:12px;

border:1px solid #d8d8d8;

}

.form-control:focus,

.form-select:focus{

border-color:var(--gold);

box-shadow:0 0 0 .15rem rgba(212,175,55,.2);

}

/*==========================================================
FOOTER
==========================================================*/

footer{

background:#08182f;

color:#c7d0db;

padding:80px 0 30px;

}

footer h4{

color:#fff;

margin-bottom:25px;

}

footer a{

color:#c7d0db;

}

footer a:hover{

color:var(--gold);

}

.footer-bottom{

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

margin-top:50px;

padding-top:25px;

text-align:center;

}

/*==========================================================
FLOATING BUTTONS
==========================================================*/

.floating-whatsapp{

position:fixed;

right:25px;

bottom:95px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:30px;

z-index:999;

box-shadow:var(--shadow-lg);

}

.back-to-top{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border-radius:50%;

background:var(--gold);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.back-to-top.show{

opacity:1;

visibility:visible;

}

/*==========================================================
ANIMATIONS
==========================================================*/

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==========================================================
UTILITY CLASSES
==========================================================*/

.rounded-20{

border-radius:20px;

}

.shadow-premium{

box-shadow:var(--shadow-lg);

}

.bg-primary-gradient{

background:linear-gradient(135deg,var(--primary),var(--secondary));

}

.text-gold{

color:var(--gold);

}

.min-vh-50{

min-height:50vh;

}

.min-vh-75{

min-height:75vh;

}

.ticker-wrapper{

background:#08182f;

overflow:hidden;

padding:14px 0;

}

.stock-ticker{

overflow:hidden;

white-space:nowrap;

}

.ticker-track{

display:flex;

align-items:center;

gap:45px;

will-change:transform;

}

.ticker-item{

display:flex;

align-items:center;

gap:12px;

font-size:15px;

color:#fff;

}

.ticker-symbol{

font-weight:700;

color:#D4AF37;

}

.ticker-name{

opacity:.85;

}

.ticker-price{

font-weight:600;

}

.positive{

color:#33d17a;

}

.negative{

color:#ff5d5d;

}