/*=====================================================
IFLI PREMIUM WEBSITE
International Finance, Loans & Investment

Theme:
Gold
Silver
White
Charcoal

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


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

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


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

:root{

--gold:#c9a227;

--gold-light:#e5c96d;

--gold-dark:#9a7b12;

--silver:#c8c8c8;

--white:#ffffff;

--black:#111111;

--dark:#1d1d1d;

--light:#f7f7f7;

--text:#5e5e5e;

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

--radius:18px;

--transition:.35s ease;

}



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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#fff;

color:var(--text);

overflow-x:hidden;

line-height:1.8;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

padding:0;

margin:0;

}



/*========================
HEADINGS
=========================*/

h1,h2,h3,h4,h5{

font-family:'Playfair Display',serif;

color:#111;

font-weight:700;

}

h1{

font-size:68px;

line-height:1.1;

}

h2{

font-size:46px;

margin-bottom:20px;

}

h3{

font-size:30px;

}

h4{

font-size:24px;

}

p{

font-size:16px;

color:#666;

}



/*========================
SECTION SPACING
=========================*/

section{

padding:110px 0;

position:relative;

}



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

.subtitle{

display:inline-block;

font-size:14px;

letter-spacing:4px;

font-weight:700;

color:var(--gold);

text-transform:uppercase;

margin-bottom:15px;

}

.gold-line{

width:90px;

height:4px;

background:linear-gradient(to right,var(--gold),var(--gold-light));

border-radius:50px;

margin:20px auto;

}



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

.btn-gold{

background:linear-gradient(135deg,var(--gold),var(--gold-light));

padding:16px 38px;

border-radius:50px;

color:#fff;

font-weight:600;

box-shadow:0 15px 35px rgba(201,162,39,.35);

transition:.4s;

border:none;

}

.btn-gold:hover{

transform:translateY(-5px);

box-shadow:0 25px 45px rgba(201,162,39,.45);

color:#fff;

}



.btn-outline-light{

padding:16px 38px;

border-radius:50px;

}



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

.navbar{

padding:20px 0;

transition:.4s;

}

.navbar.scrolled{

background:#111;

padding:12px 0;

box-shadow:var(--shadow);

}

.navbar-brand img{

height:70px;

}

.navbar-nav li{

margin-left:30px;

}

.navbar-nav a{

font-weight:500;

color:#fff;

}

.navbar-nav a:hover{

color:var(--gold);

}



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

.slider-image{

height:100vh;

object-fit:cover;

}

.carousel-item{

position:relative;

}

.carousel-item::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

}

.carousel-caption{

bottom:20%;

text-align:left;

max-width:720px;

}

.carousel-caption h1{

color:#fff;

margin-bottom:20px;

}

.carousel-caption h5{

color:var(--gold-light);

letter-spacing:3px;

margin-bottom:15px;

}

.carousel-caption p{

font-size:20px;

color:#eee;

margin-bottom:35px;

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

.about-section{

background:#fff;

position:relative;

overflow:hidden;

}

.about-section::before{

content:"";

position:absolute;

right:-150px;

top:-120px;

width:420px;

height:420px;

background:radial-gradient(circle,
rgba(201,162,39,.08),
transparent 70%);

border-radius:50%;

}

.about-image{

position:relative;

overflow:hidden;

border-radius:22px;

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

}

.about-image img{

transition:.6s;

}

.about-image:hover img{

transform:scale(1.06);

}

.about-section p{

font-size:17px;

line-height:1.9;

margin-bottom:22px;

}



/*====================================================
FEATURE BOXES
====================================================*/

.feature-box{

background:#fff;

padding:28px;

border-radius:18px;

text-align:center;

margin-bottom:25px;

border:1px solid #ececec;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.feature-box i{

font-size:42px;

background:linear-gradient(135deg,
var(--gold),
var(--gold-light));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:18px;

}

.feature-box h5{

font-size:18px;

margin:0;

}

.feature-box:hover{

transform:translateY(-10px);

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

border-color:var(--gold);

}



/*====================================================
WHY SECTION
====================================================*/

.why-section{

background:#f8f9fb;

position:relative;

}

.why-card{

background:#fff;

border-radius:22px;

padding:45px 35px;

height:100%;

text-align:center;

transition:.4s;

box-shadow:0 15px 40px rgba(0,0,0,.08);

position:relative;

overflow:hidden;

}

.why-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:4px;

background:linear-gradient(to right,
var(--gold),
var(--gold-light));

transition:.45s;

}

.why-card:hover::before{

left:0;

}

.why-card:hover{

transform:translateY(-12px);

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

}

.why-card .icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,
var(--gold),
var(--gold-light));

box-shadow:0 18px 40px rgba(201,162,39,.35);

}

.why-card .icon i{

font-size:34px;

color:#fff;

}

.why-card h4{

margin-bottom:18px;

font-size:24px;

}

.why-card p{

margin-bottom:0;

line-height:1.8;

}



/*====================================================
INVESTMENT SECTION
====================================================*/

.investment-section{

background:#fff;

}

.sector-card{

position:relative;

overflow:hidden;

border-radius:22px;

background:#fff;

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

transition:.45s;

height:100%;

}

.sector-card:hover{

transform:translateY(-12px);

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

}

.sector-card img{

height:240px;

width:100%;

object-fit:cover;

transition:.6s;

}

.sector-card:hover img{

transform:scale(1.08);

}

.sector-content{

padding:35px;

position:relative;

}

.sector-content h4{

margin:18px 0;

font-size:25px;

}

.sector-content p{

font-size:15px;

line-height:1.8;

}



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

.sector-icon{

width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light));

color:#fff;

font-size:30px;

margin-top:-70px;

position:relative;

z-index:20;

box-shadow:0 15px 40px rgba(201,162,39,.35);

}



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

.featured-card{

border:2px solid var(--gold);

}

.featured-card::after{

content:"Featured";

position:absolute;

top:18px;

right:-38px;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light));

color:#fff;

padding:8px 45px;

transform:rotate(45deg);

font-size:12px;

font-weight:700;

letter-spacing:1px;

}



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

.sector-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(
180deg,
transparent,
rgba(0,0,0,.05));

opacity:0;

transition:.4s;

z-index:1;

}

.sector-card:hover::before{

opacity:1;

}



/*====================================================
GLASS EFFECT
====================================================*/

.glass{

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

backdrop-filter:blur(18px);

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

border-radius:22px;

}



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

.circle-gold{

position:absolute;

width:450px;

height:450px;

background:radial-gradient(circle,
rgba(201,162,39,.10),
transparent 70%);

border-radius:50%;

z-index:-1;

}

.circle-silver{

position:absolute;

width:350px;

height:350px;

background:radial-gradient(circle,
rgba(180,180,180,.10),
transparent 70%);

border-radius:50%;

z-index:-1;

}



/*====================================================
IMAGE OVERLAY
====================================================*/

.image-overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(
180deg,
transparent,
rgba(0,0,0,.55));

}



/*====================================================
SECTION DIVIDER
====================================================*/

.section-divider{

width:100%;

height:120px;

background:linear-gradient(
180deg,
transparent,
#f7f7f7);

}

/*====================================================
FUNDING SECTION
====================================================*/

.funding-section{

background:#f8f9fb;

position:relative;

overflow:hidden;

}

.funding-section::before{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(circle,
rgba(201,162,39,.08),
transparent 70%);

}

.service-card{

background:#fff;

border-radius:24px;

padding:40px 35px;

height:100%;

text-align:center;

position:relative;

overflow:hidden;

transition:.4s;

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

border:1px solid rgba(0,0,0,.05);

}

.service-card:hover{

transform:translateY(-12px);

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

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,
var(--gold),
var(--gold-light));

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-icon{

width:95px;

height:95px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light));

box-shadow:0 20px 40px rgba(201,162,39,.35);

margin-bottom:28px;

}

.service-icon i{

font-size:36px;

color:#fff;

}

.service-card h4{

margin-bottom:20px;

font-size:24px;

}

.service-card p{

margin-bottom:0;

line-height:1.9;

}

.featured-service{

border:2px solid var(--gold);

}



/*====================================================
FUNDING BENEFITS
====================================================*/

.funding-benefits{

background:#fff;

}

.premium-list{

padding-left:0;

margin-top:25px;

}

.premium-list li{

padding:14px 0;

font-size:17px;

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

}

.premium-list li:last-child{

border-bottom:none;

}



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

.process-section{

background:#fff;

}

.process-card{

background:#fff;

border-radius:22px;

padding:35px;

text-align:center;

height:100%;

position:relative;

transition:.4s;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.process-card:hover{

transform:translateY(-12px);

}

.process-number{

position:absolute;

top:18px;

right:18px;

font-size:60px;

font-weight:800;

color:rgba(201,162,39,.10);

line-height:1;

}

.process-card i{

font-size:50px;

margin-bottom:22px;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.process-card h4{

margin-bottom:18px;

}



/*====================================================
WHY IFLI
====================================================*/

.why-ifli{

background:#121212;

color:#fff;

}

.why-ifli h2{

color:#fff;

}

.why-ifli p{

color:#ddd;

}

.mini-feature{

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

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

border-radius:18px;

padding:25px;

text-align:center;

transition:.35s;

margin-bottom:20px;

}

.mini-feature:hover{

background:linear-gradient(
135deg,
rgba(201,162,39,.15),
rgba(255,255,255,.08));

transform:translateY(-8px);

}

.mini-feature i{

font-size:34px;

color:var(--gold);

margin-bottom:15px;

}

.mini-feature h5{

color:#fff;

margin:0;

}



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

.statistics-section{

background:#f8f9fb;

}

.stat-card{

background:#fff;

padding:45px 30px;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card i{

font-size:42px;

color:var(--gold);

margin-bottom:20px;

}

.stat-card h3{

font-size:42px;

margin-bottom:10px;

color:var(--dark);

}

.stat-card p{

margin-bottom:0;

font-weight:500;

}



/*====================================================
CALL TO ACTION
====================================================*/

.cta-section{

background:linear-gradient(
135deg,
#111,
#2a2a2a);

padding:80px 0;

position:relative;

overflow:hidden;

}

.cta-section::before{

content:"";

position:absolute;

top:-100px;

right:-100px;

width:350px;

height:350px;

background:radial-gradient(circle,
rgba(201,162,39,.20),
transparent 70%);

border-radius:50%;

}

.cta-section h2{

color:#fff;

font-size:42px;

margin-bottom:18px;

}

.cta-section p{

color:#ddd;

font-size:18px;

margin-bottom:0;

}

.cta-section .btn-gold{

padding:18px 42px;

font-size:18px;

}



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

@keyframes floatCard{

0%{transform:translateY(0);}

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

100%{transform:translateY(0);}

}

.float{

animation:floatCard 5s ease-in-out infinite;

}



/*====================================================
GOLD GLOW
====================================================*/

.gold-glow{

box-shadow:
0 0 15px rgba(201,162,39,.25),
0 0 35px rgba(201,162,39,.18);

}



/*====================================================
HOVER SCALE
====================================================*/

.hover-scale{

transition:.35s;

}

.hover-scale:hover{

transform:scale(1.04);

}

/*====================================================
APPLICATION SECTION
====================================================*/

.application-section{

background:#ffffff;

position:relative;

overflow:hidden;

}

.application-section::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(circle,
rgba(201,162,39,.08),
transparent 70%);

}

.application-info{

background:#111;

padding:45px;

border-radius:25px;

color:#fff;

height:100%;

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

}

.application-info h3{

color:#fff;

margin-bottom:25px;

}

.application-info p{

color:#ddd;

}

.info-box{

display:flex;

align-items:flex-start;

gap:18px;

margin-bottom:30px;

}

.info-box i{

font-size:28px;

color:var(--gold);

margin-top:5px;

}

.info-box h5{

margin-bottom:8px;

color:#fff;

font-size:18px;

}

.info-box p{

margin:0;

font-size:15px;

color:#d8d8d8;

}

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

.application-form{

background:#fff;

padding:45px;

border-radius:25px;

box-shadow:0 20px 60px rgba(0,0,0,.10);

}

.application-form label{

font-weight:600;

margin-bottom:8px;

color:#222;

}

.form-control,
.form-select{

height:56px;

border-radius:14px;

border:1px solid #d9d9d9;

padding:12px 18px;

transition:.35s;

font-size:15px;

box-shadow:none;

}

textarea.form-control{

height:auto;

min-height:150px;

resize:vertical;

}

.form-control:focus,
.form-select:focus{

border-color:var(--gold);

box-shadow:0 0 0 .25rem rgba(201,162,39,.18);

}

.form-check-input:checked{

background-color:var(--gold);

border-color:var(--gold);

}

input[type=file]{

padding:14px;

}

/*====================================================
DOCUMENTS
====================================================*/

.documents-section{

background:#f8f9fb;

padding:70px 0;

}

.documents-box{

background:#fff;

padding:45px;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.documents-box h3{

margin-bottom:30px;

}

.documents-box ul{

padding-left:18px;

}

.documents-box li{

margin-bottom:14px;

color:#555;

}

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

.contact-section{

background:#fff;

}

.office-card{

background:#fff;

padding:40px;

border-radius:22px;

height:100%;

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

transition:.35s;

border-top:5px solid var(--gold);

}

.office-card:hover{

transform:translateY(-10px);

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

}

.office-card h3{

margin-bottom:20px;

}

.office-card a{

color:var(--gold-dark);

font-weight:600;

}

.office-card a:hover{

color:var(--gold);

}

/*====================================================
MAPS
====================================================*/

.maps-section iframe{

display:block;

border:0;

filter:grayscale(.15);

transition:.35s;

}

.maps-section iframe:hover{

filter:none;

}

/*====================================================
NEWSLETTER
====================================================*/

.newsletter-section{

background:linear-gradient(135deg,#151515,#2a2a2a);

}

.newsletter-box{

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

padding:45px;

border-radius:22px;

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

backdrop-filter:blur(12px);

}

.newsletter-box h2{

color:#fff;

margin-bottom:12px;

}

.newsletter-box p{

color:#ddd;

}

.newsletter-box .form-control{

background:#fff;

}

/*====================================================
TICKER
====================================================*/

.ticker-section{

background:#111;

padding:0;

overflow:hidden;

}

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

.footer{

background:#0f0f0f;

color:#bbb;

padding:80px 0 30px;

}

.footer-logo{

max-height:70px;

}

.footer h5{

color:#fff;

margin-bottom:20px;

}

.footer ul li{

margin-bottom:12px;

}

.footer a{

color:#bdbdbd;

transition:.3s;

}

.footer a:hover{

color:var(--gold);

padding-left:6px;

}

.footer hr{

border-color:rgba(255,255,255,.08);

margin:40px 0 20px;

}

.social-links{

display:flex;

gap:14px;

}

.social-links a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#1d1d1d;

color:#fff;

transition:.35s;

}

.social-links a:hover{

background:linear-gradient(135deg,var(--gold),var(--gold-light));

transform:translateY(-5px);

}

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

.whatsapp-float{

position:fixed;

right:25px;

bottom:25px;

width:64px;

height:64px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

color:#fff;

box-shadow:0 18px 45px rgba(0,0,0,.25);

z-index:9999;

transition:.35s;

}

.whatsapp-float:hover{

transform:scale(1.12);

color:#fff;

}

/*====================================================
BACK TO TOP
====================================================*/

.back-to-top{

position:fixed;

right:25px;

bottom:105px;

width:52px;

height:52px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--gold),var(--gold-light));

color:#fff;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9998;

}

.back-to-top.show{

opacity:1;

visibility:visible;

}

.back-to-top:hover{

transform:translateY(-4px);

}

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

#loader{

position:fixed;

inset:0;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

}

.loader-ring{

width:80px;

height:80px;

border:6px solid #ececec;

border-top-color:var(--gold);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}
}

/* Button Ripple */

.btn-gold{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/*====================================================
REVEAL ANIMATION
====================================================*/

.reveal{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.reveal.animate{

opacity:1;

transform:translateY(0);

}

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

.sector-card::after,
.service-card::after,
.why-card::after{

content:"";

position:absolute;

left:var(--x);

top:var(--y);

width:0;

height:0;

border-radius:50%;

background:rgba(201,162,39,.12);

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

transition:width .45s,height .45s;

pointer-events:none;

}

.sector-card:hover::after,
.service-card:hover::after,
.why-card:hover::after{

width:340px;

height:340px;

}

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

.contact-strip{

background:linear-gradient(135deg,#0d0d0d,#1c1c1c);

padding:0;

position:relative;

overflow:hidden;

border-top:2px solid #c9a227;

border-bottom:2px solid #c9a227;

}

.contact-strip::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:url("../img/world-map.png") center center/cover;

opacity:.04;

pointer-events:none;

}

.contact-strip-item{

display:flex;

align-items:center;

padding:28px 35px;

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

position:relative;

z-index:2;

transition:.35s;

}

.contact-strip-item:hover{

background:rgba(201,162,39,.08);

}

.contact-icon{

width:70px;

height:70px;

min-width:70px;

border-radius:50%;

background:linear-gradient(135deg,#c9a227,#e8c96f);

display:flex;

align-items:center;

justify-content:center;

margin-right:20px;

box-shadow:0 10px 25px rgba(201,162,39,.35);

}

.contact-icon i{

font-size:26px;

color:#fff;

}

.contact-info small{

display:block;

color:#c9a227;

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:6px;

}

.contact-info a{

color:#fff;

font-size:20px;

font-weight:600;

text-decoration:none;

}

.contact-info span{

display:block;

color:#fff;

font-size:17px;

font-weight:500;

}

.contact-info a:hover{

color:#e8c96f;

}

/* Mobile */

@media(max-width:991px){

.contact-strip-item{

border-right:none;

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

padding:22px;

}

.contact-strip-item:last-child{

border-bottom:none;

}

.contact-info a{

font-size:18px;

}

.contact-info span{

font-size:16px;

}

.contact-icon{

width:58px;

height:58px;

min-width:58px;

}

}