/* =====================================================
   RFACTD LTD WEBSITE V2
   Design System - Foundation
   Version: 2.0
===================================================== */

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

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


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

:root{

/* Brand */

--primary: #050B18;
--secondary: #081B38;

--blue: #006DFF;

--cyan: #29B6F6;

--teal: #00E5FF;

--white: #FFFFFF;

--light: #E6EDF8;

--grey: #9CAEC5;

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

--glass-border: rgba(255,255,255,.10);

/* Shadows */

--shadow-small:
0 10px 30px rgba(0,0,0,.18);

--shadow-medium:
0 20px 50px rgba(0,0,0,.25);

--shadow-large:
0 40px 80px rgba(0,0,0,.45);

/* Radius */

--radius-small: 12px;

--radius: 20px;

--radius-large: 32px;

/* Transition */

--transition: .4s ease;

}


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

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

html{

scroll-behavior: smooth;

}

body{

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

background: var(--primary);

color: var(--white);

overflow-x: hidden;

line-height: 1.7;

}


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

h1,h2,h3,h4{

font-family: 'Space Grotesk',sans-serif;

font-weight: 700;

}

p{

color: var(--light);

font-size: 18px;

line-height: 1.8;

}

a{

text-decoration: none;

color: inherit;

}


/* ==========================
   IMAGES
========================== */

img{

display: block;

max-width: 100%;

}


/* ==========================
   LISTS
========================== */

ul{

list-style: none;

}


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

button{

font-family: inherit;

cursor: pointer;

border: none;

background: none;

}


/* ==========================
   GLOBAL SECTION
========================== */

section{

position: relative;

padding: 120px 8%;

}


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

::-webkit-scrollbar{

width: 10px;

}

::-webkit-scrollbar-track{

background: #07101D;

}

::-webkit-scrollbar-thumb{

background: linear-gradient(

180deg,

var(--blue),

var(--teal)

);

border-radius: 50px;

}


/* ==========================
   SELECTION
========================== */

::selection{

background: var(--cyan);

color: #000;

}


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

body{

background:

radial-gradient(circle at top right,

rgba(0,229,255,.08),

transparent 35%),


radial-gradient(circle at bottom left,

rgba(0,109,255,.08),

transparent 40%),


linear-gradient(

180deg,

#050B18,

#071322,

#081B38,

#050B18

);

}


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

.container{

width: 100%;

max-width: 1400px;

margin: auto;

}


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

.gradient{

background:

linear-gradient(

90deg,

var(--cyan),

var(--teal)

);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}


/* ==========================
   GLASS PANEL
========================== */

.glass{

background: var(--glass);

backdrop-filter: blur(20px);

-webkit-backdrop-filter: blur(20px);

border: 1px solid var(--glass-border);

border-radius: var(--radius);

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

}


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

.glow{

position: absolute;

width: 500px;

height: 500px;

border-radius: 50%;

background: rgba(0,229,255,.06);

filter: blur(150px);

z-index: -1;

}


/* ==========================
   WATERMARK
========================== */

.logo-watermark{

position: fixed;

top: 50%;

left: 50%;

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

width: 850px;

opacity: .035;

pointer-events: none;

z-index: -2;

user-select: none;

}


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

.hero-video{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

z-index: -4;

}


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

.hero-overlay{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background:

linear-gradient(

180deg,

rgba(5,11,24,.60),

rgba(5,11,24,.75),

rgba(5,11,24,.90)

);

z-index: -3;

}

/* =====================================================
   COMPONENT 2
   FLOATING NAVIGATION
===================================================== */

header{

position: fixed;

top: 20px;

left: 50%;

transform: translateX(-50%);

width: 94%;

max-width: 1400px;

z-index: 1000;

}


.navbar{

display: flex;

justify-content: space-between;

align-items: center;

padding: 18px 35px;

background: rgba(8,27,56,.35);

backdrop-filter: blur(25px);

-webkit-backdrop-filter: blur(25px);

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

border-radius: 18px;

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

transition: all .45s ease;

}


/* Navbar on Scroll */

header.scrolled .navbar{

padding: 12px 30px;

background: rgba(5,11,24,.90);

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

}


/* ==========================
   LOGO
========================== */

.nav-logo{

display: flex;

align-items: center;

gap: 14px;

}

.nav-logo img{

width: 52px;

transition: .4s;

}

.nav-logo span{

font-family: 'Space Grotesk',sans-serif;

font-size: 24px;

font-weight: 700;

letter-spacing: 1px;

}


/* Logo Hover */

.nav-logo:hover img{

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

}


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

.nav-links{

display: flex;

align-items: center;

gap: 35px;

}


.nav-links a{

position: relative;

color: #fff;

font-size: 15px;

font-weight: 600;

letter-spacing: .5px;

transition: .35s;

}


/* Underline */

.nav-links a::after{

content: "";

position: absolute;

left: 50%;

bottom: -8px;

transform: translateX(-50%);

width: 0;

height: 2px;

background: linear-gradient(

90deg,

var(--cyan),

var(--teal)

);

transition: .35s;

border-radius: 50px;

}


.nav-links a:hover{

color: var(--cyan);

}


.nav-links a:hover::after{

width: 100%;

}


/* Active Menu */

.nav-links a.active{

color: var(--teal);

}

.nav-links a.active::after{

width: 100%;

}


/* ==========================
   MOBILE MENU ICON
========================== */

.menu-btn{

display: none;

font-size: 34px;

color: white;

cursor: pointer;

transition: .3s;

}


.menu-btn:hover{

color: var(--cyan);

transform: scale(1.08);

}


/* ==========================
   NAV CTA
========================== */

.nav-cta{

padding: 12px 24px;

border-radius: 40px;

background: linear-gradient(

90deg,

var(--blue),

var(--cyan)

);

color: white;

font-weight: 600;

transition: .4s;

}


.nav-cta:hover{

transform: translateY(-3px);

box-shadow: 0 12px 35px rgba(0,109,255,.35);

}


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

@media(max-width:1024px){

.nav-links{

display: none;

}

.menu-btn{

display: block;

}

}


/* Mobile Menu */

.mobile-menu{

position: fixed;

top: 90px;

left: 50%;

transform: translateX(-50%);

width: 92%;

background: rgba(5,11,24,.96);

backdrop-filter: blur(25px);

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

border-radius: 18px;

overflow: hidden;

display: none;

z-index: 999;

}


.mobile-menu.active{

display: block;

animation: fadeDown .35s ease;

}


.mobile-menu a{

display: block;

padding: 18px 25px;

color: white;

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

transition: .3s;

}


.mobile-menu a:hover{

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

padding-left: 35px;

color: var(--cyan);

}


/* ==========================
   NAVIGATION ANIMATION
========================== */

@keyframes fadeDown{

from{

opacity: 0;

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

}

to{

opacity: 1;

transform: translate(-50%,0);

}

}

/* =====================================================
   COMPONENT 3
   HERO SECTION
===================================================== */

.hero{

position: relative;

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

}


.hero-content{

position: relative;

z-index: 5;

width: 90%;

max-width: 1100px;

text-align: center;

}


.hero h4{

display: inline-block;

padding: 10px 22px;

margin-bottom: 25px;

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

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

border-radius: 50px;

color: var(--cyan);

font-size: 14px;

letter-spacing: 3px;

text-transform: uppercase;

backdrop-filter: blur(12px);

}


.hero h1{

font-size: clamp(3.5rem,8vw,7rem);

line-height: 1.05;

margin-bottom: 30px;

font-weight: 700;

}


.hero h1 span{

display: block;

background: linear-gradient(

90deg,

var(--cyan),

var(--teal),

#ffffff

);

background-size: 250%;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: gradientMove 6s infinite linear;

}


.hero p{

max-width: 900px;

margin: auto;

margin-bottom: 50px;

font-size: 20px;

color: #D7E4F5;

}


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

.hero-buttons{

display: flex;

justify-content: center;

gap: 25px;

flex-wrap: wrap;

}


.primary-btn{

padding: 18px 38px;

border-radius: 50px;

background: linear-gradient(

90deg,

var(--blue),

var(--cyan)

);

color: #fff;

font-weight: 700;

transition: .35s;

box-shadow: 0 20px 40px rgba(0,109,255,.30);

}


.primary-btn:hover{

transform: translateY(-6px);

box-shadow: 0 25px 60px rgba(0,229,255,.35);

}


.secondary-btn{

padding: 18px 38px;

border-radius: 50px;

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

color: #fff;

font-weight: 700;

transition: .35s;

}


.secondary-btn:hover{

background: var(--cyan);

color: #061A40;

}


/* ==========================
   SCROLL INDICATOR
========================== */

.scroll-indicator{

margin-top: 90px;

display: flex;

flex-direction: column;

align-items: center;

gap: 15px;

}


.scroll-indicator span{

font-size: 13px;

letter-spacing: 4px;

color: #A7C0DD;

}


.mouse{

width: 32px;

height: 58px;

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

border-radius: 40px;

display: flex;

justify-content: center;

}


.wheel{

width: 6px;

height: 10px;

margin-top: 12px;

border-radius: 10px;

background: var(--cyan);

animation: scrollWheel 2s infinite;

}


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

.hero::before{

content: "";

position: absolute;

width: 700px;

height: 700px;

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

filter: blur(180px);

border-radius: 50%;

top: -220px;

right: -180px;

z-index: -1;

}


.hero::after{

content: "";

position: absolute;

width: 600px;

height: 600px;

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

filter: blur(180px);

border-radius: 50%;

bottom: -250px;

left: -180px;

z-index: -1;

}


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

@keyframes gradientMove{

0%{

background-position: 0%;

}

100%{

background-position: 250%;

}

}


@keyframes scrollWheel{

0%{

transform: translateY(0);

opacity: 1;

}

100%{

transform: translateY(18px);

opacity: 0;

}

}


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

@media(max-width:768px){

.hero{

padding: 0 25px;

}

.hero h1{

font-size: 3rem;

}

.hero p{

font-size: 17px;

}

.hero-buttons{

flex-direction: column;

align-items: center;

}

.primary-btn,

.secondary-btn{

width: 100%;

max-width: 320px;

text-align: center;

}

}

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

.hero-stats{

    display:flex;

    gap:30px;

    margin-top:80px;

    flex-wrap:wrap;

    align-items:stretch;

}

.hero-stat{

    flex:1;

    min-width:180px;

    padding:30px;

    border-radius:24px;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(

        180deg,

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

        rgba(
            255,
            255,
            255,
            .02
        )

    );

    border:

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

    backdrop-filter:
    blur(
        20px
    );

    transition:

        transform .4s ease,

        border .4s ease,

        box-shadow .4s ease;

}

.hero-stat::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--cyan),

        transparent

    );

    opacity:.5;

}

.hero-stat:hover{

    transform:

    translateY(
        -10px
    );

    border-color:

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

    box-shadow:

    0 20px 40px
    rgba(
        0,
        229,
        255,
        .15
    );

}

.hero-stat h2{

    font-size:

    clamp(
        2rem,
        4vw,
        3rem
    );

    color:
    var(--cyan);

    margin-bottom:
    15px;

    font-weight:
    700;

}

.hero-stat span{

    color:

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

    line-height:
    1.7;

    display:block;

    font-size:
    .95rem;

    text-transform:
    uppercase;

    letter-spacing:
    1px;

}

/* =====================================================
   COMPONENT 4
   ABOUT SECTION
===================================================== */

.about-section{

padding: 140px 8%;

position: relative;

}

.section-header{

text-align: center;

max-width: 900px;

margin: auto;

margin-bottom: 80px;

}

.section-header h5{

display: inline-block;

padding: 10px 20px;

border-radius: 50px;

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

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

color: var(--cyan);

letter-spacing: 3px;

margin-bottom: 25px;

}

.section-header h2{

font-size: clamp(2.5rem,6vw,4.5rem);

margin-bottom: 25px;

line-height: 1.2;

}

.section-header p{

font-size: 20px;

max-width: 760px;

margin: auto;

}

.about-grid{

display: grid;

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

gap: 35px;

margin-top: 80px;

}

.about-card{

padding: 45px;

border-radius: 25px;

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

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

backdrop-filter: blur(20px);

transition: .4s;

}

.about-card:hover{

transform: translateY(-12px);

border-color: var(--cyan);

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

}

.about-icon{

font-size: 55px;

margin-bottom: 25px;

}

.about-card h3{

margin-bottom: 18px;

font-size: 28px;

}

.about-card p{

font-size: 17px;

}

.mission-box{

margin-top: 90px;

padding: 60px;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 60px;

}

.mission-box h3{

font-size: 32px;

margin-bottom: 20px;

color: var(--cyan);

}

.mission-box p{

font-size: 18px;

}

@media(max-width:992px){

.about-grid{

grid-template-columns: 1fr;

}

.mission-box{

grid-template-columns: 1fr;

padding: 40px;

}

}

/* =====================================================
   COMPONENT 5.1
   GLASS SHOWCASE
===================================================== */

.glass-showcase{

padding: 150px 8%;

position: relative;

}

.glass-grid{

display: grid;

grid-template-columns: 1fr 1fr;

gap: 80px;

align-items: center;

}

.section-tag{

display: inline-block;

padding: 10px 20px;

border-radius: 50px;

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

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

color: var(--cyan);

font-size: 14px;

letter-spacing: 3px;

margin-bottom: 25px;

}

.glass-text h2{

font-size: clamp(3rem,5vw,4.8rem);

margin-bottom: 30px;

line-height: 1.1;

}

.glass-text p{

font-size: 20px;

margin-bottom: 45px;

}

.glass-highlights{

display: grid;

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

gap: 20px;

margin-bottom: 45px;

}

.glass-highlights div{

padding: 25px;

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

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

border-radius: 20px;

transition: .35s;

}

.glass-highlights div:hover{

transform: translateY(-8px);

border-color: var(--cyan);

}

.glass-highlights h3{

margin-bottom: 12px;

font-size: 22px;

}

.glass-image{

position: relative;

}

.glass-image img{

width: 100%;

border-radius: 30px;

box-shadow: 0 35px 80px rgba(0,0,0,.45);

transition: .6s;

}

.glass-image:hover img{

transform: scale(1.04);

}

.image-overlay{

position: absolute;

left: 30px;

bottom: 30px;

}

.status-card{

padding: 25px 35px;

background: rgba(5,11,24,.75);

backdrop-filter: blur(20px);

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

border-radius: 20px;

}

.status-card h4{

color: var(--cyan);

margin-bottom: 8px;

letter-spacing: 2px;

font-size: 14px;

}

.status-card p{

font-size: 18px;

color: #fff;

}

@media(max-width:992px){

.glass-grid{

grid-template-columns: 1fr;

}

.glass-highlights{

grid-template-columns: 1fr;

}

}

/* ==========================
   PROJECT STATUS CARD
========================== */

.progress-bar{

width: 220px;

height: 10px;

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

border-radius: 50px;

margin: 15px 0;

overflow: hidden;

}

.progress-fill{

width: 70%;

height: 100%;

background: linear-gradient(
90deg,
var(--blue),
var(--cyan),
var(--teal)
);

border-radius: 50px;

animation: progressGlow 3s ease-in-out infinite;

}

.progress-percent{

font-size: 14px;

font-weight: 600;

color: var(--cyan);

margin-bottom: 20px;

}

.status-card h3{

font-size: 22px;

margin-bottom: 8px;

}

.current-stage{

font-size: 18px;

font-weight: 600;

color: white;

}

@keyframes progressGlow{

0%{

filter: brightness(1);

}

50%{

filter: brightness(1.4);

}

100%{

filter: brightness(1);

}

}

/* =====================================================
   COMPONENT 5.2
   GLASS ECOSYSTEM
===================================================== */

.glass-ecosystem{

padding: 160px 8%;

text-align: center;

}

.ecosystem{

position: relative;

width: 750px;

height: 750px;

margin: 100px auto;

}

.center-circle{

position: absolute;

top: 50%;

left: 50%;

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

width: 220px;

height: 220px;

border-radius: 50%;

background: linear-gradient(
135deg,
var(--blue),
var(--cyan)
);

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

box-shadow: 0 0 60px rgba(0,229,255,.35);

z-index: 20;

}

.center-circle h2{

font-size: 42px;

margin-bottom: 10px;

}

.center-circle p{

font-size: 16px;

color: white;

}

.orbit{

position: absolute;

top: 50%;

left: 50%;

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

width: 650px;

height: 650px;

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

border-radius: 50%;

animation: rotateOrbit 45s linear infinite;

}

.node{

position: absolute;

width: 120px;

height: 120px;

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

backdrop-filter: blur(15px);

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

border-radius: 50%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

font-size: 32px;

transition: .4s;

cursor: pointer;

}

.node span{

font-size: 13px;

margin-top: 10px;

}

.node:hover{

transform: scale(1.15);

background: rgba(0,229,255,.15);

box-shadow: 0 0 40px rgba(0,229,255,.35);

}

.orbit1 .node{

top: -60px;

left: 265px;

}

.orbit2 .node{

top: 70px;

right: -60px;

}

.orbit3 .node{

top: 265px;

right: -60px;

}

.orbit4 .node{

bottom: 70px;

right: 0;

}

.orbit5 .node{

bottom: -60px;

left: 265px;

}

.orbit6 .node{

bottom: 70px;

left: -60px;

}

.orbit7 .node{

top: 265px;

left: -60px;

}

.orbit8 .node{

top: 70px;

left: 0;

}

@keyframes rotateOrbit{

from{

transform: translate(-50%,-50%) rotate(0deg);

}

to{

transform: translate(-50%,-50%) rotate(360deg);

}

}

.node{

animation: counterRotate 45s linear infinite;

}

@keyframes counterRotate{

from{

transform: rotate(0deg);

}

to{

transform: rotate(-360deg);

}

}

@media(max-width:992px){

.ecosystem{

width: 100%;

height: auto;

display: grid;

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

gap: 25px;

}

.orbit{

position: static;

width: auto;

height: auto;

border: none;

animation: none;

transform: none;

}

.center-circle{

position: relative;

transform: none;

margin: auto;

grid-column: 1/3;

}

.node{

position: relative;

margin: auto;

animation: none;

}

}

/* =======================================
   STRATEGIC INDUSTRY EXPLORER
======================================= */

.industry-explorer{

padding: 160px 8%;

}

.explorer-grid{

display: grid;

grid-template-columns: 350px 1fr;

gap: 50px;

margin-top: 80px;

}

.industry-menu{

padding: 25px;

display: flex;

flex-direction: column;

gap: 18px;

}

.industry-btn{

padding: 18px 25px;

border-radius: 15px;

background: transparent;

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

color: white;

font-size: 17px;

text-align: left;

transition: .35s;

}

.industry-btn:hover{

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

border-color: var(--cyan);

transform: translateX(10px);

}

.industry-btn.active{

background: linear-gradient(
90deg,
var(--blue),
var(--cyan)
);

}

.industry-display{

padding: 60px;

min-height: 650px;

}

.industry-display h2{

font-size: 52px;

margin-bottom: 20px;

}

.industry-display h3{

margin-top: 40px;

margin-bottom: 20px;

color: var(--cyan);

}

.industry-display ul{

margin: 30px 0;

}

.industry-display li{

margin-bottom: 15px;

font-size: 18px;

color: #E6EDF8;

}

@media(max-width:992px){

.explorer-grid{

grid-template-columns: 1fr;

}

.industry-display{

padding: 35px;

}

}

.industry-display h4{
color: var(--cyan);
font-size: 22px;
margin: 15px 0 25px;
font-weight: 500;
}

/*=====================================================
 COMPONENT 5.3A
 INDUSTRIAL ECOSYSTEM MAP
=====================================================*/

.ecosystem-map{

padding: 180px 8%;

}

.ecosystem-wrapper{

margin-top: 100px;

}

.eco-level{

display: flex;

justify-content: center;

margin: 45px 0;

}

.connector{

width: 6px;

height: 80px;

margin: auto;

background: linear-gradient(
180deg,
transparent,
var(--cyan),
transparent
);

border-radius: 50px;

animation: pulseConnector 2s infinite;

}

@keyframes pulseConnector{

0%{

opacity: .3;

}

50%{

opacity: 1;

box-shadow: 0 0 30px var(--cyan);

}

100%{

opacity: .3;

}

}

.eco-card{

width: 520px;

padding: 45px;

border-radius: 25px;

text-align: center;

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

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

backdrop-filter: blur(18px);

transition: .4s;

}

.eco-card:hover{

transform: translateY(-10px);

border-color: var(--cyan);

}

.flagship{

background: linear-gradient(
135deg,
rgba(0,109,255,.18),
rgba(0,229,255,.12)
);

}

.product-grid{

display: grid;

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

gap: 25px;

}

.product-node{

padding: 28px;

text-align: center;

border-radius: 20px;

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

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

transition: .35s;

cursor: pointer;

}

.product-node:hover{

transform: translateY(-10px);

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

border-color: var(--cyan);

}

.industry-grid{

display: grid;

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

gap: 20px;

}

.industry-node{

padding: 25px;

border-radius: 20px;

text-align: center;

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

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

transition: .35s;

}

.industry-node:hover{

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

border-color: var(--cyan);

transform: scale(1.05);

}

.impact-card{

width: 900px;

padding: 55px;

border-radius: 30px;

background: linear-gradient(
135deg,
rgba(0,109,255,.15),
rgba(0,229,255,.10)
);

}

.impact-grid{

display: grid;

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

gap: 30px;

margin-top: 40px;

}

.impact-grid div{

padding: 25px;

border-radius: 18px;

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

}

@media(max-width:992px){

.product-grid{

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

}

.industry-grid{

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

}

.impact-grid{

grid-template-columns: 1fr;

}

.eco-card{

width: 100%;

}

}

.product-info{

margin-top: 60px;

padding: 45px;

border-radius: 25px;

min-height: 240px;

transition: .5s;

}

.product-icon{

display: block;

font-size: 42px;

margin-bottom: 15px;

}

.product-node h4{

margin-top: 12px;

font-size: 18px;

}

.active-product{

background: linear-gradient(
135deg,
var(--blue),
var(--cyan)
);

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

}

.highlight{

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

box-shadow: 0 0 25px rgba(0,229,255,.4);

}

.fade{

opacity: .35;

transition: .4s;

}

/*==================================
INDUSTRY TERMINAL
==================================*/

.industry-terminal{

    display:flex;
    flex-direction:column;
    gap:25px;

}

/*==================================
INDUSTRY META
==================================*/

.industry-meta{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(
            200px,
            1fr
        )
    );

    gap:20px;

    margin-top:20px;

}

.industry-meta div{

    padding:25px;

    border-radius:20px;

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

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

    transition:
    .3s ease;

}

.industry-meta div:hover{

    transform:
    translateY(
        -5px
    );

    border-color:
    var(--cyan);

}

.industry-meta h4{

    color:
    var(--cyan);

    margin-bottom:
    10px;

}

/*==================================
INDUSTRY ACTIONS
==================================*/

.industry-actions{

    display:flex;

    gap:20px;

    flex-wrap:
    wrap;

    margin-top:
    30px;

}

.resource-btn,
.executive-btn{

    padding:
    14px 30px;

    border:none;

    border-radius:
    50px;

    cursor:
    pointer;

    transition:
    .3s ease;

}

.resource-btn{

    background:
    var(--cyan);

    color:
    #000;

}

.executive-btn{

    background:
    transparent;

    border:
    1px solid
    var(--cyan);

    color:
    white;

}

.resource-btn:hover,
.executive-btn:hover{

    transform:
    translateY(
        -3px
    );

}

/*=====================================================
 COMPONENT 6.0 - MARKET OPPORTUNITY
=====================================================*/

.market-section{
position: relative;
padding: 140px 8%;
overflow: hidden;
}

.market-section::before{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,229,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,229,255,.03) 1px, transparent 1px);
background-size: 70px 70px;
pointer-events: none;
}

.market-grid{
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 35px;
margin-top: 70px;
position: relative;
z-index: 2;
}

/*==============================
 LEFT PANEL
==============================*/

.market-panel{
padding: 40px;
border-radius: 25px;
}

.panel-title{
margin-bottom: 35px;
}

.panel-title h3{
font-size: 2rem;
margin-bottom: 8px;
}

.panel-title span{
color: var(--cyan);
font-size: .9rem;
letter-spacing: 2px;
text-transform: uppercase;
}

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

.metric{
margin-bottom: 28px;
}

.metric:last-child{
margin-bottom: 0;
}

.metric-header{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}

.metric-header h4{
font-size: 1rem;
font-weight: 600;
}

.metric-header span{
color: var(--cyan);
font-size: .85rem;
}

.metric-track{
width: 100%;
height: 10px;
border-radius: 50px;
overflow: hidden;
background: rgba(255,255,255,.08);
}

.metric-fill{
width: 0%;
height: 100%;
border-radius: 50px;
background: linear-gradient(90deg,#008cff,#00e5ff);
transition: width 1.8s ease;
}

/*==============================
 KPI
==============================*/

.market-kpis{
display: grid;
gap: 20px;
}

.kpi-card{
padding: 28px;
border-radius: 22px;
transition: .35s;
}

.kpi-card:hover{
transform: translateY(-8px);
border: 1px solid rgba(0,229,255,.35);
box-shadow: 0 15px 40px rgba(0,229,255,.12);
}

.kpi-card span{
display: block;
color: var(--cyan);
letter-spacing: 2px;
text-transform: uppercase;
font-size: .8rem;
margin-bottom: 15px;
}

.kpi-card h2{
font-size: 2.2rem;
margin-bottom: 10px;
}

.kpi-card small{
opacity: .75;
line-height: 1.5;
}

/*==============================
 STRATEGIC DRIVERS
==============================*/

.drivers{
margin-top: 70px;
padding: 40px;
border-radius: 25px;
}

.drivers h3{
text-align: center;
margin-bottom: 40px;
font-size: 2rem;
}

.driver-grid{
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 25px;
}

.driver{
padding: 25px;
border-radius: 18px;
background: rgba(255,255,255,.03);
transition: .35s;
}

.driver:hover{
transform: translateY(-8px);
background: rgba(0,229,255,.05);
border: 1px solid rgba(0,229,255,.25);
}

.driver h4{
margin-bottom: 12px;
color: var(--cyan);
}

.driver p{
line-height: 1.7;
opacity: .85;
}


/*==============================
 INVESTOR INSIGHT
==============================*/

.investor-banner{
margin-top: 70px;
padding: 40px;
border-radius: 25px;
display: flex;
align-items: center;
gap: 30px;
border-left: 4px solid var(--cyan);
}

.banner-icon{
width: 85px;
height: 85px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: rgba(0,229,255,.08);
flex-shrink: 0;
}

.investor-banner h3{
margin-bottom: 12px;
font-size: 1.8rem;
}

.investor-banner p{
line-height: 1.9;
opacity: .9;
}

/*==============================
 OUTLOOK
==============================*/

.outlook{
margin-top: 70px;
padding: 45px;
text-align: center;
border-radius: 25px;
}

.outlook h3{
font-size: 2rem;
margin-bottom: 20px;
}

.outlook p{
max-width: 900px;
margin: auto;
line-height: 2;
opacity: .9;

}


/*==============================
 INITIAL DISPLAY
 Content is visible by default.
 JavaScript only enhances it.
==============================*/

.market-panel,
.kpi-card,
.drivers,
.investor-banner,
.outlook{

opacity: 1;
transform: none;
transition:
opacity .8s ease,
transform .8s ease,
box-shadow .35s ease,
border-color .35s ease;

}

/* Animation class added by JavaScript */

.show{

opacity: 1;
transform: translateY(0);

}

/* Optional enhancement classes */

.fade-up{

animation: fadeUp .8s ease forwards;

}

.fade-in{

animation: fadeIn .8s ease forwards;

}

@keyframes fadeUp{

from{

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

}

to{

opacity: 1;
transform: translateY(0);

}

}

@keyframes fadeIn{

from{

opacity: 0;

}

to{

opacity: 1;

}

}

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

@media(max-width: 1100px){

.market-grid{

grid-template-columns: 1fr;

}

.driver-grid{

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

}

}

@media(max-width:768px){

.market-section{

padding: 100px 6%;

}

.driver-grid{

grid-template-columns: 1fr;

}

.investor-banner{

flex-direction: column;
text-align: center;

}

.banner-icon{

margin-bottom: 10px;

}

.kpi-card h2{

font-size: 1.8rem;

}

.panel-title h3,
.drivers h3,
.outlook h3{

font-size: 1.6rem;

}

}

/*=====================================================
 COMPONENT 6.1
 WHY NIGERIA
=====================================================*/

.why-nigeria{

position: relative;

padding: 200px 8%;

overflow: hidden;

}

/* Background Accent */

.why-nigeria::before{

content: "";

}

.nigeria-map-svg object{

    width:100%;
    height:100%;
  object-fit:contain;
    border:none;

}

  .strategic-map{

    width:100%;
    height:100%;

}

.state-node{

    fill:
    var(--cyan);

    cursor:pointer;

    transition:
    .3s;

}

.state-node:hover{

    r:10;

    filter:
    drop-shadow(
        0 0 10px
        var(--cyan)
    );

}
  
position: absolute;

width: 550px;

height: 550px;

border-radius: 50%;

background: rgba(0,229,255,.04);

filter: blur(140px);

top: -180px;

right: -180px;

pointer-events: none;

}

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

.nigeria-grid{

display: grid;

grid-template-columns: 1fr 1fr;

gap: 40px;

margin-top: 70px;

}

/*==================================
 MAP PANEL
==================================*/

.nigeria-map{

padding: 45px;

border-radius: 25px;

text-align: center;

}

.nigeria-map h3{

font-size: 2rem;

margin-bottom: 50px;

}

.map-placeholder{

    position:relative;

    height:600px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:50px;

}

.nigeria-map-svg{

    width:800px;

    height:800px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

}

}

.nigeria-map-svg::before{

content: "Nigeria Map";

letter-spacing: 2px;

}

.map-pulse{

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    border:

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

    animation:

    mapPulse 4s
    infinite;

}

.nigeria-map-svg object{

    width:100%;

    height:100%;

    object-fit:contain;

    filter:

    drop-shadow(
        0 0 25px
        rgba(
            0,
            229,
            255,
            .4
        )
    );

}

@keyframes mapPulse{

0%{

transform: scale(.9);

opacity: .6;

}

100%{

transform: scale(1.25);

opacity: 0;

}

}

/*==================================
 ADVANTAGES
==================================*/

.advantages{

display: grid;

gap: 22px;

}

.advantage-card{

padding: 30px;

border-radius: 22px;

transition: .35s;

}

.advantage-card:hover{

transform: translateY(-8px);

border: 1px solid rgba(0,229,255,.35);

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

}

.advantage-card h3{

color: var(--cyan);

margin-bottom: 12px;

}

.advantage-card p{

line-height: 1.8;

opacity: .88;

}

/*==================================
 SUMMARY
==================================*/

.nigeria-summary{

margin-top: 70px;

padding: 45px;

border-radius: 25px;

text-align: center;

}

.nigeria-summary h3{

font-size: 2rem;

margin-bottom: 20px;

}

.nigeria-summary p{

max-width: 900px;

margin: auto;

line-height: 2;

opacity: .9;

}

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

@media(max-width:992px){

.nigeria-grid{

grid-template-columns: 1fr;

}

}

@media(max-width:768px){

.why-nigeria{

padding: 120px 6%;

}

.map-placeholder{

height: 300px;



}

.nigeria-map-svg{

width: 250px;

height: 180px;

}

.nigeria-summary{

padding: 35px;

}

}

@media(max-width:500px){

.nigeria-map,
.advantage-card,
.nigeria-summary{

padding: 25px;

}

.nigeria-map h3,
.nigeria-summary h3{

font-size: 1.6rem;

}

}

/*=====================================================
 COMPONENT 6.2
 INDUSTRIAL INTELLIGENCE CENTRE
=====================================================*/

.intelligence-centre{

position: relative;
padding: 160px 8%;
overflow: hidden;

}

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

.intelligence-centre::before{

content: "";
position: absolute;
inset: 0;

background-image:

linear-gradient(rgba(0,229,255,.025) 1px, transparent 1px),

linear-gradient(90deg, rgba(0,229,255,.025) 1px, transparent 1px);

background-size: 80px 80px;

pointer-events: none;

}

/*==================================
 MAIN GRID
==================================*/

.intelligence-layout{

display: grid;

grid-template-columns: 1.15fr .85fr;

gap: 40px;

margin-top: 70px;

}

/*==================================
 LEFT PANEL
==================================*/

.intelligence-network{

padding: 45px;

border-radius: 28px;

min-height: 700px;

display: flex;

justify-content: center;

align-items: center;

}

/*==================================
 NETWORK
==================================*/

.network-wrapper{

position: relative;

width: 600px;

height: 600px;

}

/*==================================
 CORE
==================================*/

.core-node{

position: absolute;

width: 210px;

height: 210px;

left: 50%;

top: 50%;

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

border-radius: 50%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

padding: 25px;

z-index: 50;

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

box-shadow:

0 0 40px rgba(0,229,255,.18);

}

.core-node img{

width: 80px;

margin-bottom: 15px;

}

.core-node h4{

font-size: 15px;

margin-bottom: 8px;

}

.core-node span{

color: var(--cyan);

font-size: 13px;

letter-spacing: 1px;

}

/*==================================
 INDUSTRY NODES
==================================*/

.industry-node{

position: absolute;

width: 150px;

height: 150px;

border-radius: 50%;

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

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

display: flex;

justify-content: center;

align-items: center;

text-align: center;

padding: 18px;

cursor: pointer;

transition: .4s;

backdrop-filter: blur(14px);

z-index: 20;

}

.industry-node:hover{

transform: scale(1.08);

border-color: rgba(0,229,255,.45);

box-shadow:

0 0 30px rgba(0,229,255,.18);

}

/*==================================
 NODE POSITIONS
==================================*/

.top{

left: 225px;

top: 0;

}

.left{

left: 0;

top: 225px;

}

.right{

right: 0;

top: 225px;

}

.bottom-left{

left: 90px;

bottom: 0;

}

.bottom-right{

right: 90px;

bottom: 0;

}

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

.connection{

position: absolute;

background: rgba(0,229,255,.18);

z-index: 5;

}

.vertical{

width: 2px;

height: 420px;

left: 299px;

top: 90px;

}

.horizontal{

width: 420px;

height: 2px;

left: 90px;

top: 299px;

}

.diagonal-left{

width: 2px;

height: 170px;

left: 185px;

top: 350px;

transform: rotate(35deg);

transform-origin: top;

}

.diagonal-right{

width: 2px;

height: 170px;

right: 185px;

top: 350px;

transform: rotate(-35deg);

transform-origin: top;

}

/*==================================
 RIGHT PANEL
==================================*/

.intelligence-panel{

padding: 40px;

border-radius: 28px;

}

.panel-label{

color: var(--cyan);

text-transform: uppercase;

letter-spacing: 2px;

font-size: 13px;

}

.intelligence-panel h2{

margin: 15px 0 35px;

font-size: 40px;

}

.panel-section{

margin-bottom: 35px;

}

.panel-section h4{

margin-bottom: 12px;

color: var(--cyan);

}

.panel-section p{

line-height: 1.8;

}

.panel-section ul{

padding-left: 20px;

}

.panel-section li{

margin-bottom: 10px;

}

/*==================================
 IMPORTANCE BAR
==================================*/

.importance-bar{

width: 100%;

height: 12px;

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

border-radius: 30px;

overflow: hidden;

margin-bottom: 10px;

}

.importance-fill{

width: 90%;

height: 100%;

background: linear-gradient(90deg,#008cff,#00e5ff);

border-radius: 30px;

}

/*==================================
 EXECUTIVE NOTE
==================================*/

.intelligence-note{

margin-top: 70px;

padding: 45px;

border-radius: 28px;

border-left: 5px solid var(--cyan);

}

.intelligence-note h3{

margin-bottom: 20px;

font-size: 32px;

}

.intelligence-note p{

line-height: 2;

opacity: .9;

}

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

@media(max-width:1200px){

.intelligence-layout{

grid-template-columns: 1fr;

}

.network-wrapper{

transform: scale(.9);

}

}

@media(max-width:768px){

.intelligence-centre{

padding: 120px 6%;

}

.intelligence-network{

overflow-x: auto;

justify-content: flex-start;

}

.network-wrapper{

min-width: 600px;

}

.intelligence-panel{

margin-top: 30px;

}

}

@media(max-width:500px){

.intelligence-panel,
.intelligence-network,
.intelligence-note{

padding: 25px;

}

.intelligence-panel h2{

font-size: 30px;

}

.core-node{

width: 180px;
height: 180px;

}

.core-node img{

width: 65px;

}

}

/* Active Industry */

.active-node{

border: 2px solid #00e5ff;

box-shadow:

0 0 35px rgba(0,229,255,.35);

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

transform: scale(1.08);

}

/*=====================================================
 COMPONENT 6.3
 RESEARCH & INNOVATION PIPELINE
=====================================================*/

.innovation-pipeline{

position: relative;
padding: 160px 8%;
overflow: hidden;

}

.innovation-pipeline::before{

content: "";
position: absolute;
inset: 0;

background:
radial-gradient(circle at top left,
rgba(0,229,255,.05),transparent 55%);

pointer-events: none;

}

/*==================================
 PIPELINE
==================================*/

.pipeline{

display: flex;

justify-content: space-between;

align-items: center;

margin: 90px 0;

position: relative;

gap: 25px;

}

.pipeline-line{

flex: 1;

height: 3px;

background: linear-gradient(
90deg,
rgba(0,229,255,.15),
rgba(0,229,255,.45)
);

border-radius: 30px;

}

/*==================================
 STAGES
==================================*/

.pipeline-stage{

width: 260px;

min-height: 260px;

padding: 35px;

text-align: center;

border-radius: 28px;

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

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

transition: .4s;

position: relative;

}

.pipeline-stage:hover{

transform: translateY(-12px);

border-color: rgba(0,229,255,.4);

box-shadow:

0 20px 45px rgba(0,229,255,.15);

}

.pipeline-stage.active{

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

box-shadow:

0 0 35px rgba(0,229,255,.22);

}

/*==================================
 STAGE NUMBER
==================================*/

.stage-number{

width: 70px;

height: 70px;

border-radius: 50%;

margin: auto;

margin-bottom: 25px;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(

135deg,

#0078ff,

#00e5ff

);

color: white;

font-size: 22px;

font-weight: bold;

}

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

.pipeline-stage h3{

margin-bottom: 18px;

font-size: 22px;

line-height: 1.4;

}

.pipeline-stage p{

line-height: 1.9;

opacity: .88;

}

/*==================================
 RESEARCH GRID
==================================*/

.research-grid{

display: grid;

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

gap: 28px;

margin-top: 70px;

}

.research-card{

padding: 35px;

border-radius: 25px;

transition: .35s;

cursor: pointer;

}

.research-card:hover{

transform: translateY(-10px);

border: 1px solid rgba(0,229,255,.35);

box-shadow:

0 18px 40px rgba(0,229,255,.12);

}

.research-card h3{

margin-bottom: 15px;

}

.research-card span{

color: var(--cyan);

text-transform: uppercase;

letter-spacing: 2px;

font-size: 13px;

}

/*==================================
 NOTE
==================================*/

.innovation-note{

margin-top: 70px;

padding: 45px;

border-radius: 28px;

border-left: 5px solid var(--cyan);

}

.innovation-note h3{

margin-bottom: 20px;

font-size: 32px;

}

.innovation-note p{

line-height: 2;

opacity: .9;

}

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

@media(max-width:1200px){

.pipeline{

flex-direction: column;

}

.pipeline-line{

width: 3px;

height: 80px;

}

.research-grid{

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

}

}

@media(max-width:768px){

.innovation-pipeline{

padding: 120px 6%;

}

.research-grid{

grid-template-columns: 1fr;

}

.pipeline-stage{

width: 100%;

}

}

@media(max-width:500px){

.pipeline-stage,
.research-card,
.innovation-note{

padding: 25px;

}

.pipeline-stage h3{

font-size: 20px;

}

.innovation-note h3{

font-size: 28px;

}

}

/*==================================
 ACTIVE RESEARCH CARD
==================================*/

.research-card.active-node{

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

box-shadow:

0 0 30px rgba(0,229,255,.25);

transform: translateY(-8px);

}

/*=====================================================
 COMPONENT 6.4
 EXECUTION COMMAND CENTRE
=====================================================*/

.execution-centre{

position: relative;
padding: 160px 8%;
overflow: hidden;

}

.execution-centre::before{

content: "";
position: absolute;
inset: 0;

background:
radial-gradient(circle at right top,
rgba(0,229,255,.05),transparent 60%);

pointer-events: none;

}

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

.execution-timeline{

position: relative;

margin: 90px auto;

max-width: 1100px;

display: flex;

flex-direction: column;

gap: 45px;

}

.timeline-progress{

position: absolute;

left: 34px;

top: 0;

bottom: 0;

width: 4px;

border-radius: 30px;

background: linear-gradient(
180deg,
rgba(0,229,255,.65),
rgba(0,229,255,.08)
);

}

/*==================================
 PHASE
==================================*/

.execution-phase{

display: flex;

align-items: flex-start;

gap: 35px;

position: relative;

}

.phase-circle{

width: 70px;

height: 70px;

min-width: 70px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

font-weight: 700;

color: #fff;

background: linear-gradient(
135deg,
#0078ff,
#00e5ff
);

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

position: relative;
z-index: 2;

}

.execution-phase.active .phase-circle{

box-shadow:
0 0 45px rgba(0,229,255,.45);

}

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

.phase-card{

flex: 1;

padding: 35px;

border-radius: 24px;

transition: .35s;

}

.phase-card:hover{

transform: translateY(-8px);

border: 1px solid rgba(0,229,255,.35);

box-shadow:
0 18px 40px rgba(0,229,255,.15);

}

.phase-card span{

color: var(--cyan);

text-transform: uppercase;

font-size: 13px;

letter-spacing: 2px;

}

.phase-card h3{

margin: 15px 0;

font-size: 28px;

}

.phase-card p{

line-height: 1.8;

opacity: .9;

margin-bottom: 20px;

}

.phase-card ul{

padding-left: 20px;

}

.phase-card li{

margin-bottom: 12px;

line-height: 1.7;

}

/*==================================
 EXECUTION SUMMARY
==================================*/

.execution-summary{

margin-top: 80px;

padding: 45px;

border-radius: 28px;

border-left: 5px solid var(--cyan);

}

.execution-summary h3{

font-size: 32px;

margin-bottom: 20px;

}

.execution-summary p{

line-height: 2;

opacity: .9;

}

/*==================================
 HOVER EMPHASIS
==================================*/

.execution-phase:hover .phase-circle{

transform: scale(1.08);

transition: .3s;

}

.execution-phase:hover .timeline-progress{

filter: brightness(1.2);

}

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

@media(max-width:992px){

.execution-centre{

padding: 130px 6%;

}

.phase-card h3{

font-size: 24px;

}

}

@media(max-width:768px){

.execution-phase{

gap: 20px;

}

.phase-circle{

width: 60px;

height: 60px;

min-width: 60px;

font-size: 20px;

}

.timeline-progress{

left: 28px;

}

.phase-card{

padding: 25px;

}

.execution-summary{

padding: 30px;

}

}

@media(max-width:576px){

.execution-phase{

flex-direction: column;

align-items: flex-start;

}

.timeline-progress{

display: none;

}

.phase-circle{

margin-bottom: 15px;

}

.phase-card{

width: 100%;

}

.execution-summary h3{

font-size: 28px;

}

}

/*==================================
 ACTIVE EXECUTION PHASE
==================================*/

.execution-phase.active .phase-card{

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

box-shadow:

0 0 35px rgba(0,229,255,.25);

}

.execution-phase.active .phase-circle{

transform: scale(1.08);

}

/*==================================
 SUBSIDIARIES
==================================*/

.subsidiaries-section{

    padding:140px 8%;

}

.subsidiary-grid{

    display:flex;

    justify-content:center;

    margin-top:70px;

}

.subsidiary-card{

    max-width:900px;

    padding:50px;

    border-radius:28px;

    transition:.35s ease;

}

.subsidiary-card:hover{

    transform:translateY(-10px);

    border:1px solid rgba(0,229,255,.35);

    box-shadow:0 20px 45px rgba(0,229,255,.18);

}

.subsidiary-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

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

    color:var(--cyan);

    font-size:.85rem;

    margin-bottom:20px;

}

.subsidiary-card h3{

    font-size:36px;

    margin-bottom:8px;

}

.subsidiary-card h5{

    color:var(--cyan);

    font-size:18px;

    margin-bottom:25px;

    font-weight:500;

}

.subsidiary-card p{

    line-height:1.9;

    opacity:.9;

    margin-bottom:30px;

}

.subsidiary-features{

    display:grid;

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

    gap:15px;

    margin-bottom:35px;

    padding-left:20px;

}

.subsidiary-features li{

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

}

.subsidiary-footer{

    margin-top:20px;

}

@media(max-width:768px){

.subsidiary-card{

padding:35px;

}

.subsidiary-features{

grid-template-columns:1fr;

}

.subsidiary-card h3{

font-size:30px;

}

}

/*=====================================================
 COMPONENT 6.5
 INVESTMENT OPPORTUNITY
=====================================================*/

.investment-opportunity{

position: relative;
padding: 160px 8%;
overflow: hidden;

}

.investment-opportunity::before{

content: "";
position: absolute;
inset: 0;

background:
radial-gradient(circle at center,
rgba(0,229,255,.05),
transparent 65%);

pointer-events: none;

}

/*==================================
 MAIN LAYOUT
==================================*/

.investment-layout{

display: grid;

grid-template-columns: 1fr 1fr;

gap: 35px;

margin-top: 70px;

}

/*==================================
 DASHBOARD
==================================*/

.investment-dashboard,
.investment-panel{

padding: 40px;

border-radius: 28px;

}

.investment-dashboard h3,
.investment-panel h3{

margin-bottom: 35px;

font-size: 30px;

}

/*==================================
 ITEMS
==================================*/

.investment-item{

display: flex;

justify-content: space-between;

align-items: center;

padding: 18px 0;

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

}

.investment-item:last-child{

border-bottom: none;

}

.investment-item span{

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

}

.investment-item strong{

color: var(--cyan);

text-align: right;

}

/*==================================
 WHY INVEST
==================================*/

.investment-panel ul{

padding-left: 22px;

margin-bottom: 35px;

}

.investment-panel li{

margin-bottom: 16px;

line-height: 1.8;

}

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

.investment-actions{

display: flex;

flex-wrap: wrap;

gap: 18px;

margin-top: 25px;

}

/*==================================
 PROCEEDS
==================================*/

.proceeds{

margin-top: 70px;

padding: 45px;

border-radius: 28px;

}

.proceeds h3{

margin-bottom: 35px;

font-size: 30px;

}

.proceeds-grid{

display: grid;

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

gap: 20px;

}

.proceeds-grid div{

padding: 25px;

border-radius: 20px;

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

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

transition: .35s;

text-align: center;

}

.proceeds-grid div:hover{

transform: translateY(-8px);

border-color: rgba(0,229,255,.35);

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

}

.proceeds-grid h4{

margin-bottom: 12px;

font-size: 18px;

}

.proceeds-grid span{

color: var(--cyan);

font-weight: 600;

}

/*==================================
 RISK PANEL
==================================*/

.risk-panel{

margin-top: 70px;

padding: 45px;

border-radius: 28px;

border-left: 5px solid var(--cyan);

}

.risk-panel h3{

margin-bottom: 20px;

font-size: 30px;

}

.risk-panel p{

line-height: 2;

opacity: .9;

}

/*==================================
 HOVER EFFECTS
==================================*/

.investment-dashboard:hover,
.investment-panel:hover,
.proceeds:hover,
.risk-panel:hover{

box-shadow: 0 20px 45px rgba(0,229,255,.12);

transition: .35s;

}

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

@media(max-width:1200px){

.investment-layout{

grid-template-columns: 1fr;

}

.proceeds-grid{

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

}

}

@media(max-width:768px){

.investment-opportunity{

padding: 120px 6%;

}

.proceeds-grid{

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

}

.investment-dashboard,
.investment-panel,
.proceeds,
.risk-panel{

padding: 30px;

}

}

@media(max-width:576px){

.proceeds-grid{

grid-template-columns: 1fr;

}

.investment-item{

flex-direction: column;

align-items: flex-start;

gap: 8px;

}

.investment-item strong{

text-align: left;

}

.investment-actions{

flex-direction: column;

}

.investment-actions .btn{

width: 100%;

text-align: center;

}

}

/*==================================
 ACTIVE BUTTON ANIMATION
==================================*/

.investment-actions .btn{

transition: .3s ease;

}

.investment-dashboard,
.investment-panel,
.proceeds,
.risk-panel{

transition: .35s ease;

}

/*=====================================================
 COMPONENT 6.6
 NATIONAL & GLOBAL IMPACT
=====================================================*/

.impact-section{

position: relative;

padding: 160px 8%;

overflow: hidden;

}

.impact-section::before{

content: "";

position: absolute;

inset: 0;

background:
radial-gradient(circle at left center,
rgba(0,229,255,.05),
transparent 65%);

pointer-events: none;

}

/*==================================
 IMPACT GRID
==================================*/
.impact-grid{

display: flex;

gap: 30px;

overflow-x: auto;

overflow-y: hidden;

scroll-snap-type: x mandatory;

scroll-behavior: smooth;

padding: 10px 5px 20px;

margin-top: 80px;

-webkit-overflow-scrolling: touch;

scrollbar-width: thin;

scrollbar-color: rgba(0,229,255,.35) transparent;

}

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

.impact-card{

flex: 0 0 380px;

min-width: 380px;

padding: 40px;

border-radius: 28px;

text-align: center;

position: relative;

overflow: hidden;

scroll-snap-align: start;

transition: .35s ease;

}

.impact-grid::-webkit-scrollbar{

height: 8px;

}

.impact-grid::-webkit-scrollbar-track{

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

border-radius: 20px;

}

.impact-grid::-webkit-scrollbar-thumb{

background: rgba(0,229,255,.45);

border-radius: 20px;

}

.impact-grid::-webkit-scrollbar-thumb:hover{

background: rgba(0,229,255,.7);

}

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

.impact-icon{

width: 85px;

height: 85px;

margin: 0 auto 25px;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

font-size: 36px;

background: linear-gradient(

135deg,

#0078ff,

#00e5ff

);

color: #fff;

box-shadow:

0 0 25px rgba(0,229,255,.25);

}

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

.impact-card h3{

margin-bottom: 18px;

font-size: 24px;

}

.impact-card p{

line-height: 1.9;

opacity: .88;

}

/*==================================
 SUMMARY
==================================*/

.impact-summary{

margin-top: 80px;

padding: 45px;

border-radius: 28px;

border-left: 5px solid var(--cyan);

}

.impact-summary h3{

margin-bottom: 20px;

font-size: 32px;

}

.impact-summary p{

line-height: 2;

opacity: .9;

}

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

.impact-card::after{

content: "";

position: absolute;

width: 220px;

height: 220px;

background:

radial-gradient(circle,

rgba(0,229,255,.12),

transparent 70%);

top: -120px;

right: -120px;

opacity: 0;

transition: .4s;

}

.impact-card:hover::after{

opacity: 1;

}

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

@media(max-width:1200px){

.impact-grid{

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

}

}

@media(max-width:768px){

.impact-section{

padding: 120px 6%;

}

.impact-grid{

grid-template-columns: 1fr;

}

.impact-card{

padding: 30px;

}

.impact-summary{

padding: 30px;

}

}

@media(max-width:576px){

.impact-card h3{

font-size: 22px;

}

.impact-summary h3{

font-size: 28px;

}

.impact-icon{

width: 70px;

height: 70px;

font-size: 30px;

}

}

/*==================================
 ACTIVE IMPACT CARD
==================================*/

.impact-card.active-impact{

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

box-shadow:

0 0 35px rgba(0,229,255,.25);

}

.impact-card{

transition:

transform .35s ease,

box-shadow .35s ease,

border .35s ease;

}

/*=====================================================
 COMPONENT 6.7
 EXECUTIVE GOVERNANCE CENTRE
=====================================================*/

.governance-section{

position: relative;
padding: 160px 8%;
overflow: hidden;

}

.governance-section::before{

content: "";
position: absolute;
inset: 0;

background:
radial-gradient(circle at right center,
rgba(0,229,255,.05),
transparent 65%);

pointer-events: none;

}

/*==================================
 GOVERNANCE GRID
==================================*/

.governance-grid{

display: grid;

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

gap: 30px;

margin-top: 80px;

}

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

.governance-card{

position: relative;

padding: 40px 30px;

border-radius: 28px;

text-align: center;

transition: .35s ease;

overflow: hidden;

}

.governance-card:hover{

transform: translateY(-10px);

border: 1px solid rgba(0,229,255,.35);

box-shadow:

0 18px 45px rgba(0,229,255,.15);

}

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

.governance-icon{

width: 85px;

height: 85px;

margin: 0 auto 25px;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

font-size: 36px;

color: #fff;

background:

linear-gradient(

135deg,

#0078ff,

#00e5ff

);

box-shadow:

0 0 25px rgba(0,229,255,.25);

}

.governance-card h3{

margin-bottom: 18px;

font-size: 24px;

}

.governance-card p{

line-height: 1.9;

opacity: .88;

}

/*==================================
 LEADERSHIP PANEL
==================================*/

.leadership-panel{

margin-top: 80px;

padding: 45px;

border-radius: 28px;

}

.leadership-panel h3{

font-size: 32px;

margin-bottom: 35px;

}

/*==================================
 LEADERSHIP GRID
==================================*/

.leadership-grid{

display: grid;

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

gap: 25px;

}

.leader-card{

padding: 30px;

border-radius: 20px;

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

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

transition: .35s ease;

}

.leader-card:hover{

transform: translateY(-6px);

border-color: rgba(0,229,255,.35);

box-shadow:

0 15px 35px rgba(0,229,255,.12);

}

.leader-card h4{

margin-bottom: 15px;

font-size: 20px;

color: var(--cyan);

}

.leader-card p{

opacity: .9;

line-height: 1.8;

}

/*==================================
 GOVERNANCE SUMMARY
==================================*/

.governance-summary{

margin-top: 70px;

padding: 45px;

border-radius: 28px;

border-left: 5px solid var(--cyan);

}

.governance-summary h3{

font-size: 32px;

margin-bottom: 20px;

}

.governance-summary p{

line-height: 2;

opacity: .9;

}

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

.governance-card::after{

content: "";

position: absolute;

width: 220px;

height: 220px;

border-radius: 50%;

background:

radial-gradient(

circle,

rgba(0,229,255,.12),

transparent 70%

);

top: -120px;

right: -120px;

opacity: 0;

transition: .4s;

}

.governance-card:hover::after{

opacity: 1;

}

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

@media(max-width:1200px){

.governance-grid{

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

}

}

@media(max-width:768px){

.governance-section{

padding: 120px 6%;

}

.governance-grid{

grid-template-columns: 1fr;

}

.leadership-grid{

grid-template-columns: 1fr;

}

.leadership-panel,
.governance-summary{

padding: 30px;

}

}

@media(max-width:576px){

.governance-card{

padding: 30px 25px;

}

.governance-icon{

width: 70px;

height: 70px;

font-size: 30px;

}

.governance-card h3{

font-size: 22px;

}

.leadership-panel h3,
.governance-summary h3{

font-size: 28px;

}

}

.linkedin-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

margin-top:25px;

border-radius:15px;

text-decoration:none;

font-weight:600;

letter-spacing:1px;

color:#fff;

background:

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

border:

1px solid

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

transition:.4s ease;

}


.linkedin-btn:hover{


transform:

translateY(-4px);


border-color:

var(--cyan);


box-shadow:

0 0 30px

rgba(
0,
229,
255,
.20
);

  
}
/*==================================
 ACTIVE GOVERNANCE CARD
==================================*/

.governance-card.active-governance{

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

box-shadow:
0 0 35px rgba(0,229,255,.25);

}

.governance-card,
.leader-card{

transition:
transform .35s ease,
border .35s ease,
box-shadow .35s ease;

}

/*=====================================================
 COMPONENT 6.8
 STRATEGIC COLLABORATION NETWORK
=====================================================*/

.collaboration-section{

position: relative;

padding: 160px 8%;

overflow: hidden;

}

.collaboration-section::before{

content: "";

position: absolute;

inset: 0;

background:
radial-gradient(circle at center left,
rgba(0,229,255,.05),
transparent 65%);

pointer-events: none;

}

/*==================================
 COLLABORATION GRID
==================================*/

.collaboration-grid{

display: grid;

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

gap: 30px;

margin-top: 80px;

}

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

.collaboration-card{

position: relative;

padding: 40px;

border-radius: 28px;

text-align: center;

overflow: hidden;

transition: .35s ease;

}

.collaboration-card:hover{

transform: translateY(-10px);

border: 1px solid rgba(0,229,255,.35);

box-shadow:

0 18px 45px rgba(0,229,255,.15);

}

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

.collaboration-icon{

width: 85px;

height: 85px;

margin: 0 auto 25px;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

font-size: 36px;

color: #fff;

background:

linear-gradient(

135deg,

#0078ff,

#00e5ff

);

box-shadow:

0 0 25px rgba(0,229,255,.25);

}

.collaboration-card h3{

margin-bottom: 18px;

font-size: 24px;

}

.collaboration-card p{

line-height: 1.9;

opacity: .88;

}

/*==================================
 SUMMARY
==================================*/

.collaboration-summary{

margin-top: 80px;

padding: 45px;

border-radius: 28px;

border-left: 5px solid var(--cyan);

}

.collaboration-summary h3{

font-size: 32px;

margin-bottom: 20px;

}

.collaboration-summary p{

line-height: 2;

opacity: .9;

}

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

.collaboration-card::after{

content: "";

position: absolute;

width: 220px;

height: 220px;

border-radius: 50%;

background:

radial-gradient(

circle,

rgba(0,229,255,.12),

transparent 70%

);

top: -120px;

right: -120px;

opacity: 0;

transition: .4s;

}

.collaboration-card:hover::after{

opacity: 1;

}

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

@media(max-width:1200px){

.collaboration-grid{

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

}

}

@media(max-width:768px){

.collaboration-section{

padding: 120px 6%;

}

.collaboration-grid{

grid-template-columns: 1fr;

}

.collaboration-summary{

padding: 30px;

}

}

@media(max-width:576px){

.collaboration-card{

padding: 30px;

}

.collaboration-icon{

width: 70px;

height: 70px;

font-size: 30px;

}

.collaboration-card h3{

font-size: 22px;

}

.collaboration-summary h3{

font-size: 28px;

}

}

/*==================================
 ACTIVE COLLABORATION CARD
==================================*/

.collaboration-card.active-collaboration{

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

box-shadow:

0 0 35px rgba(0,229,255,.25);

}

.collaboration-card{

transition:

transform .35s ease,

border .35s ease,

box-shadow .35s ease;

}

/*=====================================================
 COMPONENT 6.9
 INVESTOR ENGAGEMENT CENTRE
=====================================================*/

.engagement-section{

position: relative;

padding: 160px 8%;

overflow: hidden;

}

.engagement-section::before{

content: "";

position: absolute;

inset: 0;

background:
radial-gradient(
circle at top right,
rgba(0,229,255,.06),
transparent 70%
);

pointer-events: none;

}

/*==================================
 ENGAGEMENT GRID
==================================*/

.engagement-grid{

display: grid;

grid-template-columns: 1fr 1fr;

gap: 35px;

margin-top: 80px;

margin-bottom: 70px;

}

/*==================================
 EXECUTIVE CARDS
==================================*/

.engagement-card{

position: relative;

padding: 45px;

border-radius: 30px;

overflow: hidden;

transition:
transform .35s ease,
border .35s ease,
box-shadow .35s ease;

}

.engagement-card:hover{

transform: translateY(-8px);

border: 1px solid rgba(0,229,255,.35);

box-shadow:
0 20px 45px rgba(0,229,255,.16);

}

.engagement-card h3{

font-size: 32px;

margin-bottom: 35px;

}

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

.contact-item{

padding: 20px 0;

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

}

.contact-item:last-child{

border-bottom: none;

}

.contact-item h4{

font-size: 18px;

color: var(--cyan);

margin-bottom: 8px;

}

.contact-item p{

opacity: .88;

line-height: 1.8;

word-break: break-word;

}

/*==================================
 INVESTOR RESOURCES
==================================*/

.resource-list{

display: flex;

flex-direction: column;

gap: 18px;

}

.resource-btn{

display: flex;

justify-content: space-between;

align-items: center;

padding: 18px 22px;

border-radius: 16px;

text-decoration: none;

color: #fff;

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

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

transition: .35s ease;

}

.resource-btn::after{

content: "↗";

font-size: 18px;

transition: .35s ease;

}

.resource-btn:hover{

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

border-color: rgba(0,229,255,.35);

transform: translateX(8px);

}

.resource-btn:hover::after{

transform: translateX(4px);

}

.executive-btn{

    margin-top:30px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
    1rem 2rem;

    position:relative;

    z-index:10;

}

/*=====================================================
 COMPONENT 6.9
 INVESTOR ENGAGEMENT CENTRE
 PART 2
======================================================*/

/*==================================
 ENQUIRY PANEL
==================================*/

/*==================================
STRATEGIC ENQUIRY PORTAL
==================================*/

.enquiry-panel{

position:relative;

padding:65px;

margin-top:60px;

border-radius:32px;

overflow:hidden;

backdrop-filter:blur(25px);

background:
linear-gradient(

135deg,

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

rgba(255,255,255,.02)

);

border:

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

box-shadow:

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

}


.enquiry-panel h3{

font-size:38px;

margin-bottom:18px;

letter-spacing:1px;

line-height:1.4;

color:#fff;

}


.enquiry-panel .portal-subtitle{

font-size:17px;

line-height:1.9;

margin-bottom:45px;

color:

rgba(
255,
255,
255,
.70
);

max-width:850px;

}


/*==================================
FORM GRID
==================================*/


.enquiry-panel form{

display:grid;

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

gap:30px;

margin-bottom:30px;


}


/*==================================
INPUTS
==================================*/

.enquiry-panel input,

.enquiry-panel select,

.enquiry-panel textarea{


width:100%;

padding:22px;

margin-bottom:25px;

border-radius:18px;

background:

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

border:

1px solid

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

color:white;

font-size:16px;

font-family:inherit;

outline:none;

transition:.4s ease;

}


.enquiry-panel input:hover,

.enquiry-panel select:hover,

.enquiry-panel textarea:hover{


border-color:

rgba(
0,
229,
255,
.25
);


}


.enquiry-panel input:focus,

.enquiry-panel select:focus,

.enquiry-panel textarea:focus{


background:

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

border-color:
var(--cyan);

box-shadow:

0 0 35px
rgba(
0,
229,
255,
.18
);

}


.enquiry-panel input::placeholder,

.enquiry-panel textarea::placeholder{


color:

rgba(
255,
255,
255,
.45
);

}


/*==================================
SELECT
==================================*/


.enquiry-panel select{

cursor:pointer;

}


.enquiry-panel option{

color:#111;

}


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

.enquiry-panel textarea{

width:200%;

display:block;

resize:none;

appearance:none;

-webkit-appearance:none;

-moz-appearance:none;

outline:none;

border:none;

min-height:320px;

padding:25px;

margin-bottom:25px;

border-radius:20px;

line-height:2;

font-size:16px;

font-family:inherit;

color:#fff;


background:

linear-gradient(

135deg,

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

rgba(
255,
255,
255,
.03
)

);


border:

1px solid

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


transition:.4s ease;


}


/*==================================
TEXTAREA PLACEHOLDER
==================================*/


.enquiry-panel textarea::placeholder{


color:

rgba(
255,
255,
255,
.45
);


line-height:1.8;


}


/*==================================
TEXTAREA HOVER
==================================*/


.enquiry-panel textarea:hover{


border-color:

rgba(
0,
229,
255,
.30
);


box-shadow:

0 0 25px

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


}


/*==================================
TEXTAREA FOCUS
==================================*/


.enquiry-panel textarea:focus{


background:

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


border-color:

var(--cyan);


box-shadow:

0 0 40px

rgba(
0,
229,
255,
.18
);


}


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


.btn-submit{

width:100%;

padding:24px;

margin-top:15px;

font-size:16px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

border-radius:18px;

transition:.4s ease;

}


.btn-submit:hover{


transform:

translateY(-5px);

box-shadow:

0 25px 50px

rgba(
0,
229,
255,
.25
);


}


/*==================================
EXECUTIVE NOTES
==================================*/


.executive-note{


text-align:center;

margin-top:30px;

font-size:15px;

line-height:2;

color:

rgba(
255,
255,
255,
.70
);


}


.security-note{


text-align:center;

margin-top:15px;

font-size:14px;

line-height:2;

color:

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


}


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


.enquiry-panel::before{


content:"";


position:absolute;

width:400px;

height:400px;

top:-220px;

right:-180px;

border-radius:50%;


background:

radial-gradient(

circle,

rgba(
0,
229,
255,
.15
),

transparent 75%

);


opacity:0;

transition:.5s ease;

}


.enquiry-panel:hover::before{


opacity:1;

}


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


@media(max-width:768px){


.enquiry-panel{


padding:40px;

}


.enquiry-panel h3{


font-size:30px;


}


.enquiry-panel{


grid-template-columns:
1fr;


}


.btn-submit{


width:100%;


}


}


@media(max-width:576px){


.enquiry-panel input,

.enquiry-panel select,

.enquiry-panel textarea{


padding:18px;


}


.enquiry-panel h3{


font-size:28px;


}


}

.trust-container{

max-width:1400px;

margin:auto; 
  
  display:grid;

grid-template-columns:

repeat(6,1fr);

gap:25px !important;

}



.trust-icon{
  
  width: 72px;

  height: auto;

margin-bottom: 15px;
  
}

}
/*=====================================================
 COMPONENT 7.0
 EXECUTIVE CORPORATE FOOTER
=====================================================*/

.executive-footer{

position: relative;

padding: 110px 8% 40px;

overflow: hidden;

background:
linear-gradient(
180deg,
rgba(5,10,18,.96),
rgba(2,6,12,1)
);

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

}

.executive-footer::before{

content: "";

position: absolute;

inset: 0;

background:

radial-gradient(

circle at top center,

rgba(0,229,255,.06),

transparent 70%

);

pointer-events: none;

}

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

.footer-grid{

display: grid;

grid-template-columns:

1.4fr
1fr
1fr
1fr
1.2fr;

gap: 45px;

margin-bottom: 70px;

}

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

.footer-column{

position: relative;

}

.footer-column h3{

margin: 18px 0;

font-size: 30px;

}

.footer-column h4{

margin-bottom: 24px;

font-size: 22px;

color: var(--cyan);

}

.footer-column p{

line-height: 1.9;

opacity: .86;

margin-bottom: 18px;

}

/*==================================
 LOGO
==================================*/

.footer-logo{

width: 72px;

height: auto;

margin-bottom: 15px;

filter:

drop-shadow(

0 0 18px

rgba(0,229,255,.25)

);

}

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

.footer-column ul{

list-style: none;

padding: 0;

margin: 0;

}

.footer-column ul li{

margin-bottom: 16px;

}

.footer-column ul li a{

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

text-decoration: none;

transition: .35s ease;

position: relative;

}

.footer-column ul li a::after{

content: "";

position: absolute;

left: 0;

bottom: -5px;

width: 0;

height: 2px;

background: var(--cyan);

transition: .35s;

}

.footer-column ul li a:hover{

color: var(--cyan);

}

.footer-column ul li a:hover::after{

width: 100%;

}

/*==================================
 SOCIAL
==================================*/

.footer-social{

display: flex;

gap: 18px;

margin-top: 28px;

}

.footer-social a{

width: 48px;

height: 48px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

text-decoration: none;

color: white;

border:

1px solid

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

background:

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

transition: .35s ease;

}

.footer-social a:hover{

background: var(--cyan);

color: #00151f;

transform:

translateY(-5px);

box-shadow:

0 10px 25px

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

}

/*=====================================================
 COMPONENT 7.0
 EXECUTIVE FOOTER (PART 2)
======================================================*/

/*==================================
 INVESTOR RESOURCE LINKS
==================================*/

.footer-column .btn{

margin-top: 18px;

width: 100%;

text-align: center;

}

.footer-column ul li{

transition: .3s ease;

}

.footer-column ul li:hover{

transform: translateX(8px);

}

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

.footer-column p{

display: flex;

align-items: flex-start;

gap: 10px;

}

.footer-column p:last-of-type{

margin-bottom: 25px;

}

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

.executive-footer hr{

border: none;

height: 1px;

background:

linear-gradient(

to right,

transparent,

rgba(0,229,255,.35),

transparent

);

margin: 45px 0;

}

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

.footer-bottom{

display: flex;

justify-content: space-between;

align-items: center;

gap: 20px;

flex-wrap: wrap;

}

.footer-bottom div{

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

font-size: .95rem;

}

.footer-bottom a{

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

text-decoration: none;

transition: .3s ease;

margin: 0 8px;

}

.footer-bottom a:hover{

color: var(--cyan);

}

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

.back-to-top{

position: fixed;

right: 35px;

bottom: 35px;

width: 58px;

height: 58px;

border: none;

border-radius: 50%;

background: linear-gradient(
135deg,
#0078ff,
#00e5ff
);

color: #fff;

font-size: 24px;

cursor: pointer;

opacity: 0;

visibility: hidden;

transition: .35s ease;

z-index: 999;

box-shadow:

0 15px 35px rgba(0,229,255,.25);

}

.back-to-top.show{

opacity: 1;

visibility: visible;

}

.back-to-top:hover{

transform: translateY(-6px);

box-shadow:

0 20px 40px rgba(0,229,255,.4);

}

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

.footer-column{

transition: .35s ease;

}

.footer-column:hover{

transform: translateY(-4px);

}

.footer-column::after{

content: "";

position: absolute;

top: -60px;

right: -60px;

width: 140px;

height: 140px;

border-radius: 50%;

background:

radial-gradient(

circle,

rgba(0,229,255,.08),

transparent 70%

);

opacity: 0;

transition: .35s;

}

.footer-column:hover::after{

opacity: 1;

}

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

@media(max-width:1200px){

.footer-grid{

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

gap: 40px;

}

}

@media(max-width:768px){

.executive-footer{

padding: 90px 6% 30px;

}

.footer-grid{

grid-template-columns: 1fr;

gap: 35px;

}

.footer-bottom{

flex-direction: column;

text-align: center;

}

.back-to-top{

right: 20px;

bottom: 20px;

width: 52px;

height: 52px;

font-size: 20px;

}

}

@media(max-width:576px){

.footer-column h3{

font-size: 26px;

}

.footer-column h4{

font-size: 20px;

}

.footer-social{
font-size: 20px;

}

.footer-social{

justify-content: center;

flex-wrap: wrap;

}

.footer-column .btn{

width: 100%;

}

}

/*==================================
 ACTIVE FOOTER LINK
==================================*/

.footer-active{

color: var(--cyan)!important;

font-weight: 600;

}

.footer-column,
.footer-column a,
.back-to-top{

transition: all .35s ease;

}