/*==================================================
    NJAKA RAJAONA
    Executive Portfolio
    Version 1.0
==================================================*/

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

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

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

:root{

--primary:#00D2FF;

--secondary:#3A7BFF;

--accent:#7C4DFF;

--dark:#04060D;

--dark2:#0A1022;

--card:#111827;

--glass:rgba(255,255,255,.05);

--white:#ffffff;

--text:#c7d1dc;

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

--success:#1dd75b;

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

--radius:22px;

--transition:.4s ease;

}

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

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

html{

overflow-x:hidden;

}

body{

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

background:#04060D;

color:white;

overflow-x:hidden;

line-height:1.8;

}

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

body::before{

content:"";

position:fixed;

width:100%;

height:100%;

left:0;

top:0;

background:

radial-gradient(circle at 10% 10%,rgba(0,210,255,.15),transparent 35%),

radial-gradient(circle at 90% 20%,rgba(124,77,255,.10),transparent 40%),

radial-gradient(circle at 50% 90%,rgba(58,123,255,.12),transparent 40%),

#04060D;

z-index:-3;

}

/*=========================
PARTICLES
==========================*/

#particles-js{

position:fixed;

width:100%;

height:100%;

left:0;

top:0;

z-index:-2;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#050505;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(#00D2FF,#7C4DFF);

border-radius:20px;

}

/*=========================
LINKS
==========================*/

a{

text-decoration:none;

transition:.3s;

}

a:hover{

color:white;

}

/*=========================
SECTIONS
==========================*/

section{

padding:120px 0;

position:relative;

}

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

.container{

max-width:1400px;

}

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

.navbar{

background:rgba(4,6,13,.60);

backdrop-filter:blur(16px);

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

padding:18px 0;

transition:.4s;

}

.navbar-brand{

font-size:28px;

font-weight:900;

letter-spacing:4px;

color:white;

}

.navbar-brand span{

color:var(--primary);

}

.navbar ul{

gap:35px;

}

.navbar a{

color:#d6dce6;

font-weight:600;

position:relative;

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.navbar a:hover::after{

width:100%;

}

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

#hero{

min-height:100vh;

display:flex;

align-items:center;

}

.badge{

padding:12px 25px;

border-radius:100px;

background:rgba(0,210,255,.12);

border:1px solid rgba(0,210,255,.30);

color:#84f1ff;

font-size:14px;

margin-bottom:30px;

}

#hero h1{

font-size:72px;

font-weight:900;

line-height:1.1;

margin-bottom:20px;

}

#hero h2{

font-size:34px;

font-weight:700;

color:var(--primary);

margin-bottom:30px;

min-height:45px;

}

#hero p{

font-size:20px;

color:#b6c3d1;

max-width:700px;

margin-bottom:45px;

}

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

.btn{

padding:18px 40px;

border-radius:100px;

font-weight:700;

transition:.4s;

}

.btn-primary{

background:linear-gradient(135deg,#00D2FF,#3A7BFF);

border:none;

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

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 25px 50px rgba(0,210,255,.50);

}

.btn-outline-light{

border:2px solid rgba(255,255,255,.20);

background:transparent;

}

.btn-outline-light:hover{

background:white;

color:black;

}
 /*==================================================
    PROFILE CARD
==================================================*/

.profile-card{

position:relative;

padding:25px;

border-radius:40px;

background:

linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.02)
);

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

backdrop-filter:blur(20px);

box-shadow:

0 30px 80px rgba(0,0,0,.5),

0 0 80px rgba(0,210,255,.15);

overflow:hidden;

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

}


.profile-card::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:var(--primary);

filter:blur(120px);

opacity:.35;

top:-80px;

right:-80px;

}


.profile-card img{

width:100%;

border-radius:30px;

position:relative;

z-index:2;

filter:

drop-shadow(0 20px 40px rgba(0,0,0,.6));

}


@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

}


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


.hero-stats{

display:flex;

gap:25px;

margin-top:60px;

flex-wrap:wrap;

}


.hero-stats div{

background:

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

border:

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

padding:25px;

border-radius:20px;

min-width:130px;

backdrop-filter:blur(10px);

transition:.4s;

}


.hero-stats div:hover{

transform:translateY(-10px);

background:

rgba(0,210,255,.10);

border-color:var(--primary);

}


.hero-stats h3{

font-size:40px;

font-weight:900;

color:white;

}


.hero-stats p{

font-size:14px!important;

margin:0!important;

color:#9aa8b8!important;

}


/*==================================================
    SECTION TITLES
==================================================*/


.section-title{

text-align:center;

margin-bottom:80px;

}


.section-title span{

color:var(--primary);

font-weight:700;

letter-spacing:4px;

text-transform:uppercase;

}


.section-title h2{

font-size:55px;

font-weight:900;

margin-top:20px;

}


.section-title p{

max-width:700px;

margin:auto;

color:#aab6c5;

}



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


.glass-card{

background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.02)

);

border:

1px solid rgba(255,255,255,.10);

border-radius:var(--radius);

padding:40px;

height:100%;

backdrop-filter:blur(20px);

transition:.5s;

position:relative;

overflow:hidden;

}


.glass-card::after{

content:"";

position:absolute;

width:150px;

height:150px;

background:var(--primary);

filter:blur(90px);

opacity:0;

transition:.5s;

right:-50px;

bottom:-50px;

}


.glass-card:hover{

transform:translateY(-15px);

border-color:rgba(0,210,255,.5);

box-shadow:

0 30px 70px rgba(0,0,0,.4);

}


.glass-card:hover::after{

opacity:.4;

}



/*==================================================
    BUSINESS VALUE
==================================================*/


.value-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:30px;

}



.value-card{

text-align:center;

padding:45px 25px;

background:

rgba(255,255,255,.04);

border-radius:25px;

border:

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

transition:.4s;

}



.value-card i{

font-size:50px;

margin-bottom:25px;

color:var(--primary);

}


.value-card h3{

font-size:24px;

font-weight:800;

}


.value-card:hover{

background:

rgba(0,210,255,.08);

transform:

translateY(-12px);

}



/*==================================================
    EXPERTISE CARDS
==================================================*/


.expertise-card{

height:320px;

}


.expertise-card i{

font-size:45px;

color:var(--primary);

margin-bottom:25px;

}


.expertise-card ul{

list-style:none;

padding:0;

}


.expertise-card li{

color:#b9c5d3;

padding:6px 0;

}


.expertise-card li::before{

content:"▹";

color:var(--primary);

margin-right:10px;

}



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


.timeline{

position:relative;

max-width:1100px;

margin:auto;

}


.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

height:100%;

width:2px;

background:

linear-gradient(

var(--primary),

var(--accent)

);

}



.timeline-item{

position:relative;

width:50%;

padding:30px;

}



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

left:0;

text-align:right;

}



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

left:50%;

}



.timeline-dot{

position:absolute;

width:20px;

height:20px;

background:var(--primary);

border-radius:50%;

top:45px;

box-shadow:

0 0 30px var(--primary);

}



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

right:-10px;

}


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

left:-10px;

}


.timeline-content{

background:

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

border:

1px solid rgba(255,255,255,.1);

padding:35px;

border-radius:25px;

backdrop-filter:blur(15px);

transition:.4s;

}



.timeline-content:hover{

transform:scale(1.03);

border-color:var(--primary);

}



.timeline-content h3{

color:var(--primary);

font-weight:800;

}


.timeline-content h4{

font-size:20px;

}



/*==================================================
    TECHNOLOGY BADGES
==================================================*/


.tech-cloud{

display:flex;

flex-wrap:wrap;

gap:20px;

justify-content:center;

}



.tech-badge{

padding:15px 30px;

border-radius:100px;

background:

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

border:

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

font-weight:600;

color:#dbe7f5;

transition:.4s;

}



.tech-badge:hover{

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:white;

transform:

translateY(-8px)

scale(1.05);

box-shadow:

0 15px 40px rgba(0,210,255,.35);

}

/* Cyber cursor */

.cyber-cursor{

position:fixed;

width:20px;

height:20px;

border-radius:50%;

background:

rgba(0,210,255,.4);

box-shadow:

0 0 30px #00D2FF;

pointer-events:none;

z-index:9999;

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

transition:.08s;

}


.navbar a.active{

color:#00D2FF;

}

/*==================================================
    EXECUTIVE PROFILE
==================================================*/


#about h3{

font-size:32px;

font-weight:800;

margin-bottom:20px;

}


#about h4{

font-size:20px;

}


.profile-list{

list-style:none;

padding:0;

margin-top:25px;

}



.profile-list li{

display:flex;

align-items:center;

gap:15px;

padding:14px 0;

border-bottom:

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

color:#c5d1de;

}



.profile-list i{

width:30px;

height:30px;

display:flex;

align-items:center;

justify-content:center;

color:#00D2FF;

}



.profile-list strong{

color:white;

min-width:100px;

}


/*==================================================
    EXPERIENCE TAGS
==================================================*/


.tech-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:25px;

}


.tech-tags span{

background:

rgba(0,210,255,.12);

border:

1px solid rgba(0,210,255,.25);

padding:7px 16px;

border-radius:50px;

font-size:13px;

color:#8beeff;

}



.timeline-content ul{

padding-left:20px;

margin-top:20px;

}



.timeline-content li{

margin-bottom:8px;

color:#c2cedb;

}



.timeline-content li::marker{

color:#00D2FF;

}

/*==================================================
    EXPERTISE IMPROVEMENTS
==================================================*/


.expertise-card{

min-height:480px;

}



.expertise-card p{

color:#aebccc;

margin-bottom:25px;

}



.expertise-card h3{

color:white;

font-size:28px;

margin-bottom:15px;

}



.expertise-card i{

display:inline-flex;

width:80px;

height:80px;

align-items:center;

justify-content:center;

border-radius:25px;

background:

rgba(0,210,255,.10);

box-shadow:

0 0 40px rgba(0,210,255,.15);

}

/*==================================================
 TECHNOLOGY ECOSYSTEM
==================================================*/


.technology-container{

display:flex;

flex-direction:column;

gap:70px;

}



.technology-group{

padding:40px;

border-radius:30px;

background:

rgba(255,255,255,.03);

border:

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

}



.technology-group h3{

font-size:28px;

font-weight:800;

margin-bottom:35px;

color:white;

}



.technology-group h3 i{

color:#00D2FF;

margin-right:15px;

}



.technology-group .tech-cloud{

justify-content:flex-start;

}

/*==================================================
 CERTIFICATION CARDS
==================================================*/


.certificate-card{

height:100%;

padding:35px;

background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.02)

);

border:

1px solid rgba(255,255,255,.10);

border-radius:30px;

transition:.5s;

}


.certificate-card:hover{

transform:

translateY(-15px);

border-color:#00D2FF;

box-shadow:

0 25px 60px rgba(0,210,255,.20);

}



.certificate-icon{

width:75px;

height:75px;

display:flex;

align-items:center;

justify-content:center;

border-radius:25px;

background:

rgba(0,210,255,.12);

margin-bottom:25px;

}



.certificate-icon i{

font-size:35px;

color:#00D2FF;

}



.certificate-card h3{

font-size:25px;

font-weight:800;

margin-bottom:25px;

}



.certificate-card ul{

padding-left:0;

list-style:none;

}



.certificate-card li{

padding:7px 0;

color:#c5d1df;

}



.certificate-card li::before{

content:"✓";

color:#00D2FF;

font-weight:bold;

margin-right:12px;

}

/*==================================================
 GLOBAL EXPERIENCE MAP
==================================================*/


#global{

overflow:hidden;

}



.global-map-container{

height:650px;

display:flex;

align-items:center;

justify-content:center;

}



.world-map{

position:relative;

width:100%;

height:100%;

background:

radial-gradient(
circle,
rgba(0,210,255,.12),
transparent 55%
);

border-radius:40px;

border:

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

overflow:hidden;

}



/* WORLD MAP SVG BACKGROUND */

.world-map::before{

content:"";

position:absolute;

inset:0;

background-image:

url("../img/world-map.svg");

background-repeat:no-repeat;

background-position:center;

background-size:contain;

opacity:.18;

z-index:0;

}



/* =========================
   CONNECTION LINES
========================== */


.connection{

position:absolute;

height:2px;

background:

linear-gradient(
90deg,
transparent,
#00D2FF,
transparent
);

opacity:.5;

z-index:1;

transform-origin:left center;

}



/* =========================
   COUNTRY POINTS
========================== */


.map-point{

position:absolute;

z-index:3;

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

}



.map-point span{

display:block;

width:18px;

height:18px;

background:#00D2FF;

border-radius:50%;

box-shadow:

0 0 15px #00D2FF,
0 0 35px #00D2FF;

position:relative;

}



/* effet radar */

.map-point span::after{

content:"";

position:absolute;

inset:-10px;

border-radius:50%;

border:

1px solid #00D2FF;

animation:

pulse-ring 2s infinite;

}



@keyframes pulse-ring{


0%{

transform:scale(.5);

opacity:1;

}


100%{

transform:scale(2);

opacity:0;

}


}



/* =========================
   COUNTRY INFO CARD
========================== */


.map-point div{

position:absolute;

left:25px;

top:-15px;

background:

rgba(10,16,34,.90);

border:

1px solid rgba(0,210,255,.25);

padding:

15px 20px;

border-radius:15px;

width:200px;

backdrop-filter:blur(15px);

opacity:0;

transition:.4s;

}



.map-point:hover div{

opacity:1;

}



.map-point h4{

font-size:18px;

color:#00D2FF;

margin:0;

}



.map-point p{

font-size:13px;

color:#c5d1dc;

margin:5px 0 0;

}



/* =========================
   COUNTRY POSITIONS
========================== */


/* Madagascar */

.madagascar{

left:62.5%;

top:72%;

}


/* France */
.france{

left:50%;

top:24%;

}



/* Belgique */
.belgique{

left:50.8%;

top:20.2%;

}



/* Espagne */
.espagne{

left:48.2%;

top:29.5%;

}



/* Italie */
.italie{

left:52.2%;

top:27%;

}



/* Maroc */
.maroc{

left:47.5%;

top:34%;

}



/* Turquie */

.turquie{

left:57%;

top:28%;

}



/* Chine */
.chine{

left:80%;

top:36.5%;

}


/* Inde */
.inde{

left:70.5%;

top:40%;

}


/* Thaïlande / Philippines */
.asie{

left:80%;

top:50%;

}


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


@media(max-width:768px){


.global-map-container{

height:450px;

}



.map-point span{

width:12px;

height:12px;

}



.map-point div{

width:150px;

padding:10px;

font-size:12px;

}


.world-map::before{

background-size:cover;

opacity:.12;

}


}

/*==================================================
 PROJECT CARDS
==================================================*/


.project-card{

height:100%;

padding:40px;

border-radius:30px;

background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.02)

);

border:

1px solid rgba(255,255,255,.10);

transition:.5s;

position:relative;

overflow:hidden;

}



.project-card:hover{

transform:

translateY(-15px);

border-color:#00D2FF;

box-shadow:

0 30px 70px rgba(0,210,255,.20);

}



.project-icon{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

border-radius:25px;

background:

rgba(0,210,255,.12);

margin-bottom:30px;

}



.project-icon i{

font-size:38px;

color:#00D2FF;

}



.project-card h3{

font-size:26px;

font-weight:800;

margin-bottom:20px;

}



.project-card p{

color:#b8c5d4;

}



.project-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:25px;

}



.project-tags span{

padding:7px 15px;

border-radius:50px;

background:

rgba(124,77,255,.15);

border:

1px solid rgba(124,77,255,.3);

font-size:13px;

color:#d6c8ff;

}

/*==================================================
    EXECUTIVE METRICS
==================================================*/


#metrics{

padding-top:80px;

padding-bottom:100px;

}



.metric-card{

text-align:center;

padding:45px 25px;

height:100%;

background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.02)

);

border:

1px solid rgba(255,255,255,.10);

border-radius:30px;

transition:.5s;

}



.metric-card:hover{

transform:

translateY(-15px);

border-color:#00D2FF;

box-shadow:

0 30px 70px rgba(0,210,255,.25);

}



.metric-card i{

font-size:45px;

color:#00D2FF;

margin-bottom:25px;

}



.metric-card h3{

font-size:65px;

font-weight:900;

background:

linear-gradient(

135deg,

#00D2FF,

#7C4DFF

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.metric-card p{

color:#b7c3d1;

font-weight:600;

}

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


.contact-item{

display:flex;

gap:20px;

align-items:center;

padding:20px 0;

border-bottom:

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

}



.contact-item i{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:

rgba(0,210,255,.12);

color:#00D2FF;

font-size:22px;

}



.contact-item h4{

font-size:16px;

margin:0;

color:white;

}



.contact-item p,
.contact-item a{

margin:0;

color:#b9c6d5;

}




.form-control{

background:

rgba(255,255,255,.05)!important;

border:

1px solid rgba(255,255,255,.12)!important;

padding:18px 20px;

border-radius:18px;

color:white!important;

}



.form-control::placeholder{

color:#8f9baa;

}



.form-control:focus{

border-color:#00D2FF!important;

box-shadow:

0 0 25px rgba(0,210,255,.20)!important;

}



textarea.form-control{

resize:none;

}

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


footer{

padding:70px 0 30px;

background:

rgba(0,0,0,.35);

border-top:

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

text-align:center;

}



footer h3{

font-size:35px;

font-weight:900;

}



footer p{

color:#9eacbd;

}



.footer-links{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

margin:30px 0;

}



.footer-links a{

color:#c8d4e2;

}



.footer-links a:hover{

color:#00D2FF;

}



.footer-bottom{

margin-top:40px;

padding-top:25px;

border-top:

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

font-size:14px;

}