/*======================================================
NGSLCC TRADE FAIR 2026
Official Stylesheet
Version 5.0

Designed by Seven
======================================================*/


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

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


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

:root{

--primary:#004d40;
--primary-light:#00695c;
--primary-dark:#00352c;

--secondary:#c8f169;

--accent:#16a34a;

--gold:#f59e0b;

--danger:#ef4444;

--white:#ffffff;

--black:#101010;

--body:#58656f;

--heading:#0f172a;

--border:#e8eceb;

--background:#f8faf9;

--section:#ffffff;

--radius:22px;

--radius-sm:14px;

--transition:.35s cubic-bezier(.4,0,.2,1);

--shadow-xs:
0 5px 12px rgba(0,0,0,.05);

--shadow-sm:
0 12px 30px rgba(0,0,0,.08);

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

--shadow-lg:
0 35px 80px rgba(0,0,0,.18);

}



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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

font-size:16px;

}

body{

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

background:var(--background);

color:var(--body);

overflow-x:hidden;

line-height:1.7;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}



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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf2ef;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-light);

}



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

img{

display:block;

width:100%;

height:auto;

transition:.5s;

}

.gallery-item img{

height:260px;

object-fit:cover;

border-radius:20px;

}

.testimonial-user img{

width:56px;

height:56px;

object-fit:cover;

border-radius:50%;

}

.partners-section .swiper-slide img{

width:100%;

height:140px;

object-fit:contain;

padding:20px;

background:linear-gradient(135deg,#f8faf9,#eef7ef);

border-radius:18px;

}



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

video{

display:block;

width:100%;

height:100%;

object-fit:cover;

}



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

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}



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

button{

font-family:inherit;

cursor:pointer;

border:none;

background:none;

}



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

ul{

list-style:none;

}



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

.wrap{

width:min(1280px,calc(100% - 60px));

margin:auto;

}



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

section{

position:relative;

padding:110px 0;

overflow:hidden;

}

.section{

background:#fff;

}

.section.dark{

background:var(--primary);

color:#fff;

}



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

h1,h2,h3,h4{

font-weight:800;

line-height:1.1;

letter-spacing:-.04em;

color:var(--heading);

}

.section.dark h1,
.section.dark h2,
.section.dark h3{

color:#fff;

}

h1{

font-size:clamp(3.4rem,8vw,6.5rem);

}

h2{

font-size:clamp(2.2rem,5vw,4rem);

margin-bottom:22px;

}

h3{

font-size:1.35rem;

}

p{

font-size:1rem;

line-height:1.8;

}



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

.section-header{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-header.left{

text-align:left;

margin-left:0;

}

.section-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

background:#eef7ef;

border-radius:999px;

font-size:.82rem;

font-weight:700;

color:var(--primary);

letter-spacing:.08em;

margin-bottom:22px;

}

.section-tag i{

color:var(--accent);

}



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

.button{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:16px 30px;

border-radius:999px;

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

color:var(--primary);

font-weight:700;

font-size:.95rem;

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

transition:var(--transition);

}

.button:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

.button.dark{

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

color:#fff;

backdrop-filter:blur(12px);

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

}

.button.dark:hover{

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

}

.section.soft .wrap.split{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(320px,0.9fr);
    gap:52px;
    align-items:start;
}

.section.soft .label{
    display:inline-flex;
    align-items:center;
    padding:.8rem 1rem;
    border-radius:999px;
    background:rgba(6,61,55,.08);
    color:var(--secondary);
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:24px;
}

.section.soft h2{
    margin-top:0;
    max-width:620px;
    line-height:1.1;
}

.section.soft p{
    max-width:680px;
    color:rgba(10,22,25,.78);
}

.tips-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    margin-top:32px;
}

.section.soft .detail{
    position:relative;
    background:#fff;
    border:1px solid rgba(6,61,55,.08);
    border-radius:26px;
    padding:38px 30px 30px;
    box-shadow:0 28px 70px rgba(6,61,55,.06);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.section.soft .detail:hover{
    transform:translateY(-10px);
    border-color:rgba(6,61,55,.16);
    box-shadow:0 40px 90px rgba(6,61,55,.1);
}

.section.soft .tip-number{
    position:absolute;
    top:22px;
    right:22px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:var(--secondary);
    color:#fff;
    font-size:1rem;
    font-weight:800;
    box-shadow:0 12px 30px rgba(6,61,55,.12);
}

.tip-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:rgba(6,61,55,.08);
    color:var(--secondary);
    font-size:1.25rem;
    margin-bottom:18px;
    transition:background .3s ease, color .3s ease, transform .3s ease;
}

.section.soft .detail:hover .tip-icon{
    background:var(--secondary);
    color:#fff;
    transform:scale(1.05);
}

.section.soft .detail h3{
    margin-top:0;
    margin-bottom:16px;
    font-size:1.18rem;
}

.section.soft .detail p{
    margin:0;
    line-height:1.85;
    color:var(--text);
}

.section.soft .event-card{
    background:#fff;
    border:1px solid rgba(6,61,55,.08);
    border-radius:30px;
    box-shadow:0 30px 80px rgba(6,61,55,.06);
    padding:42px 38px;
}

.section.soft .event-card h3{
    margin-top:0;
    margin-bottom:24px;
}

.section.soft .event-card ul{
    list-style:none;
    padding:0;
    margin:0 0 30px;
}

.section.soft .event-card ul li{
    padding:14px 0;
    border-bottom:1px solid rgba(6,61,55,.08);
    color:var(--text);
}

.section.soft .event-card ul li:last-child{
    border-bottom:none;
}

.section.soft .event-card .button{
    width:100%;
}

@media (max-width: 980px) {
    .section.soft .wrap.split,
    .tips-grid{
        grid-template-columns:1fr;
    }
}



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

.grid{

display:grid;

gap:30px;

}



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

.card{

background:#fff;

border-radius:var(--radius);

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

transition:var(--transition);

overflow:hidden;

position:relative;

}

.card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow);

}



/*======================================================
ICONS
======================================================*/

.icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:#eef8e8;

color:var(--primary);

font-size:28px;

margin-bottom:25px;

transition:.4s;

}

.card:hover .icon{

background:var(--secondary);

transform:rotate(-8deg);

}



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

.text-center{

text-align:center;

}

.text-left{

text-align:left;

}

.mt-1{margin-top:10px;}

.mt-2{margin-top:20px;}

.mt-3{margin-top:30px;}

.mt-4{margin-top:40px;}

.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}

.mb-2{margin-bottom:20px;}

.mb-3{margin-bottom:30px;}

.mb-4{margin-bottom:40px;}

.mb-5{margin-bottom:50px;}



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

.fade-up{

opacity:0;

transform:translateY(40px);

animation:fadeUp .9s forwards;

}

@keyframes fadeUp{

to{

opacity:1;

transform:none;

}

}

.float{

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

}

@keyframes float{

50%{

transform:translateY(-10px);

}

}



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

::selection{

background:var(--secondary);

color:var(--primary);

}



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

:focus-visible{

outline:none;

box-shadow:

0 0 0 4px rgba(200,241,105,.4);

border-radius:12px;

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

.top{

background:linear-gradient(
90deg,
var(--secondary),
#dff8a8
);

height:42px;

display:flex;

align-items:center;

font-size:.85rem;

font-weight:600;

color:var(--primary);

position:relative;

z-index:1001;

}

.top .wrap{

display:flex;

justify-content:space-between;

align-items:center;

height:100%;

}

.top span{

display:flex;

align-items:center;

gap:10px;

}

.live-dot{

width:10px;

height:10px;

border-radius:50%;

background:#22c55e;

box-shadow:0 0 15px #22c55e;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{transform:scale(1);}

50%{transform:scale(1.4);}

100%{transform:scale(1);}

}


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

.nav{

position:fixed;

top:42px;

left:0;

width:100%;

z-index:999;

transition:.4s;

background:rgba(0,77,64,.78);

backdrop-filter:blur(18px);

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

}

.nav.scrolled{

background:rgba(0,53,44,.96);

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

}

.nav .wrap{

display:flex;

align-items:center;

justify-content:space-between;

height:88px;

gap:40px;

}


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

.brand{

display:flex;

align-items:center;

gap:15px;

color:#fff;

font-size:1.35rem;

font-weight:800;

}

.brand-mark{

width:52px;

height:52px;

border-radius:50%;

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

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

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

color:var(--secondary);

transition:.4s;

}

.brand:hover .brand-mark{

transform:rotate(-10deg);

background:var(--secondary);

color:var(--primary);

}


/*======================================================
MENU
======================================================*/

.links{

display:flex;

align-items:center;

gap:32px;

margin-left:auto;

}

.links a{

position:relative;

font-weight:600;

font-size:.95rem;

color:#fff;

}

.links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--secondary);

transition:.35s;

}

.links a:hover::after,

.links a.active::after{

width:100%;

}

.links a:hover{

color:var(--secondary);

}


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

.mobile-drawer{

position:fixed;

top:0;

right:-100%;

width:340px;

max-width:88%;

height:100vh;

background:linear-gradient(
180deg,
var(--primary),
var(--primary-dark)
);

padding:30px;

display:flex;

flex-direction:column;

transition:.45s ease;

z-index:1005;

overflow-y:auto;

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

}

.mobile-drawer.show{

right:0;

}

.drawer-header{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:25px;

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

margin-bottom:35px;

}

.drawer-close{

width:48px;

height:48px;

border-radius:14px;

background:rgba(255, 255, 255, 0);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

transition:.3s;

}

.drawer-close:hover{

background:var(--secondary);

color:var(--primary);

}

.drawer-links{

display:flex;

flex-direction:column;

gap:10px;

}

.drawer-links a{

display:flex;

align-items:center;

gap:18px;

padding:16px 20px;

border-radius:16px;

color:#fff;

font-weight:600;

transition:.35s;

}

.drawer-links a:hover,

.drawer-links a.active{

background:rgba(248, 244, 244, 0.03);

color:var(--secondary);

}

.drawer-links i{

width:26px;

font-size:18px;

text-align:center;

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

background:#022b24;

padding-top:130px;

}


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

.hero-media{

position:absolute;

inset:0;

z-index:0;

overflow:hidden;

}

.hero-media video{

width:100%;

height:100%;

object-fit:cover;

filter:brightness(.35);

}


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

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
rgba(0,53,44,.92),
rgba(0,53,44,.55),
rgba(0,53,44,.85)
);

z-index:1;

}


/*======================================================
DECORATIVE BLURS
======================================================*/

.hero-blur{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.25;

pointer-events:none;

z-index:1;

}

.blur-one{

width:420px;

height:420px;

background:#c8f169;

top:-120px;

right:-80px;

}

.blur-two{

width:340px;

height:340px;

background:#22c55e;

bottom:-120px;

left:-80px;

}


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

.hero-grid{

display:grid;

grid-template-columns:1.4fr .8fr;

gap:70px;

align-items:center;

position:relative;

z-index:2;

}


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

.hero-content{

color:#fff;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 20px;

border-radius:999px;

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

backdrop-filter:blur(10px);

margin-bottom:24px;

font-weight:600;

}

.hero-content h1{

color:#fff;

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

margin-bottom:24px;

max-width:720px;

}

.hero-content h1 span{

color:var(--secondary);

display:block;

}

.hero-content p{

font-size:1.1rem;

max-width:650px;

margin-bottom:40px;

color:#d8e8e3;

}


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

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:55px;

}


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

.hero-statistics{

display:grid;

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

gap:20px;

}

.hero-statistics article{

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

backdrop-filter:blur(10px);

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

border-radius:18px;

padding:24px;

text-align:center;

}

.hero-statistics h2{

color:var(--secondary);

margin-bottom:6px;

font-size:2.4rem;

}

.hero-statistics span{

color:#d8e8e3;

font-size:.9rem;

}


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

.hero-panel{

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

backdrop-filter:blur(20px);

border-radius:28px;

padding:35px;

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

}

.panel-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.status{

background:#22c55e;

color:#fff;

padding:8px 14px;

border-radius:999px;

font-size:.75rem;

font-weight:700;

}

.countdown{

display:grid;

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

gap:12px;

margin:30px 0;

}

.countdown div{

background:#f5f7f8;

padding:18px 10px;

border-radius:16px;

text-align:center;

}

.countdown strong{

display:block;

font-size:2rem;

color:var(--primary);

}

.event-details{

display:flex;

flex-direction:column;

gap:18px;

margin:35px 0;

}

.event-details li{

display:flex;

gap:15px;

align-items:flex-start;

}

.event-details i{

width:46px;

height:46px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

background:#eef8e8;

color:var(--primary);

flex-shrink:0;

}

.panel-button{

width:100%;

justify-content:center;

}


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

.scroll-indicator{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

color:#fff;

font-size:.8rem;

animation:bounce 2s infinite;

z-index:2;

}

@keyframes bounce{

50%{

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

}

}


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

@media(max-width:992px){

.menu{

display:flex;

align-items:center;

justify-content:center;

}

.links{

position:fixed;

top:0;

right:-100%;

width:320px;

max-width:85%;

height:100vh;

background:linear-gradient(
180deg,
var(--primary),
var(--primary-dark)
);

flex-direction:column;

align-items:flex-start;

padding:110px 35px;

gap:24px;

transition:.45s;

z-index:999;

overflow-y:auto;

}

.links.show{

right:0;

}

.hero-grid{

grid-template-columns:1fr;

gap:50px;

}

.hero-statistics{

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

}

.hero{

padding-top:140px;

}

}

@media(max-width:600px){

.wrap{

width:min(100%,calc(100% - 30px));

}

.hero-content h1{

font-size:2.8rem;

}

.hero-statistics{

grid-template-columns:1fr 1fr;

gap:15px;

}

.countdown{

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

}

.hero-panel{

padding:24px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .button{

width:100%;

}

.top{

display:none;

}

.nav{

top:0;

}
}

.exhibitors{

background:#fff;

}

.company-card{

background:#fff;

border-radius:26px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

}

.company-card:hover{

transform:translateY(-10px);

}

.company-image{

position:relative;

height:240px;

overflow:hidden;

}

.company-image img{

height:100%;

object-fit:cover;

transition:.5s;

}

.company-card:hover img{

transform:scale(1.08);

}

.industry{

position:absolute;

top:20px;

left:20px;

background:var(--secondary);

padding:8px 18px;

border-radius:999px;

font-size:.8rem;

font-weight:700;

color:var(--primary);

}

.company-body{

padding:28px;

}

.company-body h3{

margin-bottom:12px;

}

.company-body a{

display:inline-flex;

align-items:center;

gap:8px;

margin-top:20px;

font-weight:700;

color:var(--primary);

}

.member-card{

background:#fff;

border-radius:24px;

overflow:hidden;

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

transition:.35s;

}

.member-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.member-card img{

height:340px;

object-fit:cover;

}

.member-info{

padding:25px;

text-align:center;

}

.member-info span{

display:block;

margin:8px 0 18px;

color:var(--primary);

font-weight:600;

}

.member-social{

display:flex;

justify-content:center;

gap:12px;

}

.member-social a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#eef8e8;

transition:.3s;

}

.member-social a:hover{

background:var(--primary);

color:#fff;

}

.partners{

padding:80px 0;

background:#fff;

overflow:hidden;

}

.partner-track{

display:flex;

gap:70px;

align-items:center;

animation:partnerMove 30s linear infinite;

width:max-content;

}

.partner-track img{

height:65px;

filter:grayscale(100%);

opacity:.55;

transition:.3s;

}

.partner-track img:hover{

opacity:1;

filter:none;

transform:scale(1.08);

}

@keyframes partnerMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

/*======================================================
WELCOME SECTION
======================================================*/

.welcome{

position:relative;

background:#ffffff;

overflow:hidden;

}

.welcome::before{

content:"";

position:absolute;

width:700px;

height:700px;

right:-350px;

top:-250px;

background:radial-gradient(circle,
rgba(200,241,105,.18),
transparent 70%);

pointer-events:none;

}

.welcome::after{

content:"";

position:absolute;

width:500px;

height:500px;

left:-250px;

bottom:-250px;

background:radial-gradient(circle,
rgba(0,105,92,.06),
transparent 70%);

pointer-events:none;

}

.welcome .wrap{

position:relative;

z-index:2;

}


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

.welcome-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:80px;

align-items:center;

}

.welcome-content{

max-width:700px;

}

.welcome-content h2{

margin-bottom:25px;

}

.welcome-content p{

margin-bottom:25px;

font-size:1.05rem;

color:var(--body);

}

.welcome-image{

position:relative;

}

.welcome-image img{

border-radius:30px;

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

}

.welcome-image::after{

content:"";

position:absolute;

inset:18px;

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

border-radius:24px;

pointer-events:none;

}


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

.highlight-grid{

display:grid;

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

gap:30px;

margin-top:80px;

}

.highlight-grid article{

background:#fff;

padding:35px;

border-radius:26px;

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

transition:var(--transition);

position:relative;

overflow:hidden;

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

}

.highlight-grid article::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--secondary),
var(--accent)
);

transform:scaleX(0);

transition:.45s;

transform-origin:left;

}

.highlight-grid article:hover{

transform:translateY(-12px);

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

}

.highlight-grid article:hover::before{

transform:scaleX(1);

}

.highlight-grid article i{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:#eef8e8;

color:var(--primary);

font-size:28px;

margin-bottom:24px;

transition:.4s;

}

.highlight-grid article:hover i{

background:var(--secondary);

transform:rotate(-10deg);

}

.highlight-grid h3{

margin-bottom:14px;

}

.highlight-grid p{

font-size:.95rem;

}


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

.statistics{

margin-top:100px;

padding:60px;

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

border-radius:34px;

display:grid;

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

gap:40px;

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

position:relative;

overflow:hidden;

}

.statistics::before{

content:"";

position:absolute;

width:450px;

height:450px;

right:-180px;

top:-180px;

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

border-radius:50%;

}

.statistics div{

position:relative;

z-index:2;

text-align:center;

}

.statistics h2{

font-size:3.8rem;

margin-bottom:12px;

color:var(--secondary);

font-weight:900;

}

.statistics p{

font-size:1rem;

font-weight:600;

color:#fff;

opacity:.95;

}


/*======================================================
INDUSTRIES
======================================================*/

.industries{

background:linear-gradient(
180deg,
#f7faf8,
#ffffff
);

}

.industry-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.industry-grid article{

background:#fff;

padding:45px 30px;

border-radius:26px;

text-align:center;

transition:var(--transition);

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

position:relative;

overflow:hidden;

}

.industry-grid article::after{

content:"";

position:absolute;

left:50%;

bottom:0;

width:0;

height:4px;

background:var(--secondary);

transition:.4s;

transform:translateX(-50%);

}

.industry-grid article:hover{

transform:translateY(-12px);

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

}

.industry-grid article:hover::after{

width:100%;

}

.industry-grid i{

width:85px;

height:85px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 25px;

border-radius:50%;

background:#eef8e8;

font-size:34px;

color:var(--primary);

transition:.4s;

}

.industry-grid article:hover i{

background:var(--secondary);

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

}

.industry-grid h3{

font-size:1.15rem;

margin-bottom:12px;

}

.industry-grid p{

font-size:.92rem;

color:var(--body);

}


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

.industries::before{

content:"";

position:absolute;

left:-250px;

top:120px;

width:450px;

height:450px;

border-radius:50%;

background:radial-gradient(circle,
rgba(200,241,105,.15),
transparent 70%);

pointer-events:none;

}

.industries::after{

content:"";

position:absolute;

right:-250px;

bottom:-150px;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(circle,
rgba(0,105,92,.08),
transparent 70%);

pointer-events:none;

}


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

.wave-divider{

position:absolute;

bottom:-2px;

left:0;

width:100%;

line-height:0;

}

.wave-divider svg{

display:block;

width:100%;

height:120px;

}


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

@media(max-width:1200px){

.highlight-grid{

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

}

.industry-grid{

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

}

.statistics{

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

}

}

@media(max-width:900px){

.welcome-grid{

grid-template-columns:1fr;

gap:50px;

}

.welcome-image{

order:-1;

}

.statistics{

padding:40px;

gap:30px;

}

}

@media(max-width:768px){

.highlight-grid,

.industry-grid,

.statistics{

grid-template-columns:1fr;

}

.highlight-grid article,

.industry-grid article{

padding:30px;

}

.statistics h2{

font-size:3rem;

}

}

@media(max-width:480px){

.welcome{

padding:80px 0;

}

.statistics{

padding:30px 25px;

border-radius:24px;

}

.statistics h2{

font-size:2.5rem;

}

.highlight-grid{

margin-top:50px;

}

.industry-grid{

margin-top:50px;

}

}

/*======================================================
EXPERIENCE SECTION
======================================================*/

.experience{

position:relative;

background:linear-gradient(
180deg,
#ffffff,
#f8fbfa
);

overflow:hidden;

}

.experience::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:600px;

height:600px;

border-radius:50%;

background:radial-gradient(circle,
rgba(200,241,105,.18),
transparent 70%);

pointer-events:none;

}

.experience .wrap{

position:relative;

z-index:2;

}


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

.experience-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.experience-grid article{

background:#fff;

padding:40px;

border-radius:30px;

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

transition:var(--transition);

position:relative;

overflow:hidden;

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

}

.experience-grid article:hover{

transform:translateY(-12px);

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

}

.experience-grid article::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--secondary),
var(--accent)
);

transform:scaleX(0);

transform-origin:left;

transition:.45s;

}

.experience-grid article:hover::before{

transform:scaleX(1);

}


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

.experience-icon{

width:85px;

height:85px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

background:#eef8e8;

font-size:34px;

color:var(--primary);

margin-bottom:28px;

transition:.4s;

}

.experience-grid article:hover .experience-icon{

background:var(--secondary);

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

}

.experience-grid h3{

margin-bottom:18px;

font-size:1.35rem;

}

.experience-grid p{

font-size:.96rem;

line-height:1.8;

}


/*======================================================
PROGRAMME
======================================================*/

.programme{

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

color:#fff;

position:relative;

overflow:hidden;

}

.programme::before{

content:"";

position:absolute;

left:-200px;

bottom:-200px;

width:500px;

height:500px;

border-radius:50%;

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

}

.programme::after{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:420px;

height:420px;

border-radius:50%;

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

}

.programme .section-header h2,

.programme .section-header p{

color:#fff;

}

.programme .section-tag{

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

color:#fff;

}


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

.timeline{

position:relative;

max-width:1000px;

margin:70px auto 0;

padding-left:50px;

}

.timeline::before{

content:"";

position:absolute;

left:18px;

top:0;

bottom:0;

width:4px;

background:linear-gradient(
180deg,
var(--secondary),
#22c55e
);

border-radius:999px;

}


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

.timeline-item{

position:relative;

padding:0 0 45px 50px;

}

.timeline-item:last-child{

padding-bottom:0;

}

.timeline-item::before{

content:"";

position:absolute;

left:-4px;

top:8px;

width:22px;

height:22px;

border-radius:50%;

background:var(--secondary);

border:5px solid var(--primary);

box-shadow:0 0 0 6px rgba(200,241,105,.15);

}


/*======================================================
DAY LABEL
======================================================*/

.timeline-date{

display:inline-block;

padding:8px 18px;

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

border-radius:999px;

font-size:.85rem;

font-weight:700;

margin-bottom:18px;

}


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

.timeline-content{

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

backdrop-filter:blur(12px);

padding:30px;

border-radius:22px;

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

transition:.35s;

}

.timeline-content:hover{

transform:translateX(8px);

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

}

.timeline-content h3{

color:#fff;

margin-bottom:12px;

}

.timeline-content p{

color:#dbe8e4;

}


/*======================================================
BUSINESS OPPORTUNITIES
======================================================*/

.opportunities{

background:#fff;

}

.opportunity-grid{

display:grid;

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

gap:40px;

margin-top:70px;

}

.opportunity{

display:flex;

gap:25px;

padding:35px;

border-radius:26px;

background:#fff;

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

transition:.35s;

}

.opportunity:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.opportunity i{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

background:#eef8e8;

border-radius:20px;

font-size:30px;

color:var(--primary);

flex-shrink:0;

}

.opportunity h3{

margin-bottom:10px;

}


/*======================================================
INVESTMENT CTA
======================================================*/

.investment-banner{

margin-top:100px;

padding:70px;

border-radius:36px;

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

display:grid;

grid-template-columns:2fr auto;

align-items:center;

gap:40px;

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

}

.investment-banner h2{

color:var(--primary);

margin-bottom:18px;

}

.investment-banner p{

color:#174b40;

font-size:1.05rem;

max-width:700px;

}

.investment-banner .button{

background:var(--primary);

color:#fff;

}


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

.experience-grid article,
.timeline-content,
.opportunity{

will-change:transform;

}


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

@media(max-width:1200px){

.experience-grid{

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

}

}

@media(max-width:992px){

.opportunity-grid{

grid-template-columns:1fr;

}

.investment-banner{

grid-template-columns:1fr;

text-align:center;

}

.timeline{

padding-left:35px;

}

}

@media(max-width:768px){

.experience-grid{

grid-template-columns:1fr;

}

.timeline{

padding-left:28px;

}

.timeline-item{

padding-left:35px;

}

.timeline-content{

padding:22px;

}

.investment-banner{

padding:40px 30px;

}

}

@media(max-width:480px){

.timeline::before{

left:12px;

}

.timeline-item::before{

left:-10px;

}

.timeline-date{

font-size:.78rem;

}

}

/*======================================================
EXHIBITORS
======================================================*/

.exhibitors{

background:linear-gradient(
180deg,
#ffffff,
#f7faf9
);

position:relative;

overflow:hidden;

}

.exhibitors::before{

content:"";

position:absolute;

top:-180px;

left:-180px;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(circle,
rgba(200,241,105,.18),
transparent 70%);

pointer-events:none;

}

.exhibitors .swiper{

padding:20px 10px 80px;

}


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

.company-card{

background:#fff;

border-radius:30px;

overflow:hidden;

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

transition:all .45s ease;

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

height:100%;

display:flex;

flex-direction:column;

}

.company-card:hover{

transform:translateY(-12px);

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

}

.company-image{

position:relative;

height:260px;

overflow:hidden;

}

.company-image img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .7s ease;

}

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

transform:scale(1.08);

}

.company-image::after{

content:"";

position:absolute;

inset:0;

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

}

.industry{

position:absolute;

top:20px;

left:20px;

z-index:2;

padding:8px 18px;

border-radius:999px;

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

font-size:.8rem;

font-weight:700;

color:var(--primary);

}

.company-body{

padding:30px;

display:flex;

flex-direction:column;

flex:1;

}

.company-body h3{

margin-bottom:12px;

}

.company-body p{

margin-bottom:25px;

flex:1;

}

.company-body a{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:700;

color:var(--primary);

}

.company-body a:hover{

color:var(--accent);

}


/*======================================================
ORGANISING COMMITTEE
======================================================*/

.committee{

background:#fff;

}

.committee .swiper{

padding-bottom:70px;

}

.member-card{

background:#fff;

border-radius:28px;

overflow:hidden;

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

transition:.4s;

text-align:center;

height:100%;

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

}

.member-card:hover{

transform:translateY(-10px);

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

}

.member-card img{

height:360px;

width:100%;

object-fit:cover;

transition:.6s;

}

.member-card:hover img{

transform:scale(1.06);

}

.member-info{

padding:28px;

}

.member-info h3{

margin-bottom:8px;

}

.member-info span{

display:inline-block;

padding:7px 16px;

border-radius:999px;

background:#eef8e8;

font-size:.82rem;

font-weight:600;

color:var(--primary);

margin-bottom:20px;

}

.member-social{

display:flex;

justify-content:center;

gap:12px;

}

.member-social a{

width:44px;

height:44px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#f5f7f8;

transition:.35s;

font-size:16px;

}

.member-social a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-4px);

}


/*======================================================
PARTNERS
======================================================*/

.partners{

padding:90px 0;

background:#ffffff;

overflow:hidden;

position:relative;

}

.partner-track{

display:flex;

align-items:center;

gap:80px;

width:max-content;

animation:partnerLoop 28s linear infinite;

}

.partner-track:hover{

animation-play-state:paused;

}

.partner-track img{

height:60px;

width:auto;

opacity:.55;

filter:grayscale(100%);

transition:.35s;

}

.partner-track img:hover{

opacity:1;

filter:none;

transform:scale(1.08);

}

@keyframes partnerLoop{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}


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

.swiper{

width:100%;

}

.swiper-slide{

height:auto;

display:flex;

}

.swiper-pagination{

bottom:10px !important;

}

.swiper-pagination-bullet{

width:12px;

height:12px;

background:#d6d6d6;

opacity:1;

transition:.3s;

}

.swiper-pagination-bullet-active{

background:var(--secondary);

transform:scale(1.25);

}

.swiper-button-next,

.swiper-button-prev{

width:54px;

height:54px;

border-radius:50%;

background:#fff;

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

color:var(--primary);

transition:.35s;

}

.swiper-button-next:hover,

.swiper-button-prev:hover{

background:var(--secondary);

transform:scale(1.08);

}

.swiper-button-next::after,

.swiper-button-prev::after{

font-size:18px;

font-weight:800;

}


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

.company-card,

.member-card{

opacity:0;

animation:cardFade .8s forwards;

}

@keyframes cardFade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}


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

@media(max-width:1200px){

.company-image{

height:220px;

}

.member-card img{

height:320px;

}

}

@media(max-width:992px){

.swiper-button-next,

.swiper-button-prev{

display:none;

}

.partner-track{

gap:50px;

}

.partner-track img{

height:50px;

}

}

@media(max-width:768px){

.company-body{

padding:22px;

}

.member-info{

padding:22px;

}

.company-image{

height:210px;

}

.member-card img{

height:280px;

}

.partner-track{

gap:40px;

}

.partner-track img{

height:42px;

}

}

@media(max-width:480px){

.company-card,

.member-card{

border-radius:22px;

}

.company-image{

height:190px;

}

.member-card img{

height:250px;

}

}

/*======================================================
GALLERY
======================================================*/

.gallery{
background:#fff;
position:relative;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:240px;
gap:20px;
margin-top:70px;
}

.gallery-item{
position:relative;
overflow:hidden;
border-radius:24px;
cursor:pointer;
box-shadow:var(--shadow-sm);
}

.gallery-item:nth-child(1),
.gallery-item:nth-child(5){
grid-row:span 2;
}

.gallery-item img{
width:100%;
height:100%;
object-fit:cover;
transition:.7s;
}

.gallery-item:hover img{
transform:scale(1.12);
}

.gallery-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,77,64,.65);
opacity:0;
transition:.35s;
}

.gallery-item:hover .gallery-overlay{
opacity:1;
}

.gallery-overlay i{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fff;
color:var(--primary);
font-size:24px;
}


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

.testimonials{
background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);
color:#fff;
}

.testimonial-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
padding:40px;
border-radius:28px;
border:1px solid rgba(255,255,255,.08);
}

.stars{
display:flex;
gap:6px;
margin-bottom:20px;
color:#FFD43B;
}

.testimonial-card p{
font-size:1.05rem;
margin-bottom:30px;
color:#eef5f2;
}

.author{
display:flex;
align-items:center;
gap:16px;
}

.author img{
width:65px;
height:65px;
border-radius:50%;
object-fit:cover;
}

.author h4{
color:#fff;
margin-bottom:5px;
}


/*======================================================
NEWS
======================================================*/

.news{
background:#fff;
}

.news-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:60px;
}

.news-card{
background:#fff;
border-radius:26px;
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:.4s;
}

.news-card:hover{
transform:translateY(-10px);
box-shadow:var(--shadow-lg);
}

.news-card img{
height:240px;
object-fit:cover;
}

.news-card div{
padding:28px;
}

.news-card span{
display:block;
margin-bottom:12px;
color:var(--accent);
font-size:.82rem;
font-weight:700;
}

.news-card h3{
margin-bottom:18px;
}

.news-card a{
font-weight:700;
color:var(--primary);
}


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

.faq{
background:#f7faf9;
}

.faq-list{
max-width:900px;
margin:70px auto 0;
display:grid;
gap:20px;
}

.faq details{
background:#fff;
padding:26px 30px;
border-radius:22px;
box-shadow:var(--shadow-sm);
}

.faq summary{
font-weight:700;
cursor:pointer;
list-style:none;
position:relative;
padding-right:30px;
}

.faq summary::-webkit-details-marker{
display:none;
}

.faq summary::after{
content:"+";
position:absolute;
right:0;
top:0;
font-size:1.4rem;
color:var(--primary);
transition:.3s;
}

.faq details[open] summary::after{
content:"−";
}

.faq p{
margin-top:18px;
}


/*======================================================
VISITOR INFORMATION
======================================================*/

.visitor-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.visitor-list{
margin-top:40px;
display:grid;
gap:25px;
}

.visitor-list>div{
display:flex;
gap:18px;
align-items:flex-start;
}

.visitor-list i{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:18px;
background:#eef8e8;
font-size:24px;
color:var(--primary);
flex-shrink:0;
}

.visitor-map iframe{
width:100%;
height:500px;
border:0;
border-radius:28px;
box-shadow:var(--shadow);
}


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

.newsletter{
background:linear-gradient(
135deg,
var(--secondary),
#dff8a8
);
padding:90px 0;
}

.newsletter-box{
display:grid;
grid-template-columns:1fr auto;
gap:40px;
align-items:center;
}

.newsletter form{
display:flex;
gap:15px;
}

.newsletter input{
width:340px;
padding:18px 22px;
border:none;
border-radius:999px;
font-family:inherit;
}

.newsletter button{
padding:18px 32px;
border-radius:999px;
background:var(--primary);
color:#fff;
font-weight:700;
}


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

.final-cta{
background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);
text-align:center;
color:#fff;
}

.final-cta h2{
color:#fff;
margin-bottom:20px;
}

.final-cta p{
max-width:700px;
margin:0 auto 40px;
}


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

footer{
background:#031b18;
color:#cbd5d1;
padding:90px 0 0;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1.5fr;
gap:50px;
}

.footer-logo{
width:180px;
margin-bottom:20px;
}

footer h3{
color:#fff;
margin-bottom:22px;
}

footer ul{
display:grid;
gap:14px;
}

footer a:hover{
color:var(--secondary);
}

.contact-list li{
display:flex;
gap:14px;
align-items:flex-start;
}

.socials{
display:flex;
gap:12px;
margin-top:30px;
}

.socials a{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#11312d;
transition:.35s;
}

.socials a:hover{
background:var(--secondary);
color:var(--primary);
}

.footer-bottom{
margin-top:70px;
padding:25px 0;
border-top:1px solid rgba(255,255,255,.08);
}

.footer-bottom .wrap{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}


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

.floating-actions{
position:fixed;
right:25px;
bottom:25px;
display:flex;
flex-direction:column;
gap:15px;
z-index:9999;
}

.floating-actions a{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#fff;
box-shadow:var(--shadow);
transition:.35s;
}

.whatsapp-btn{
background:#25D366;
}

.call-btn{
background:#2563EB;
}

.top-btn{
background:var(--primary);
}

.floating-actions a:hover{
transform:translateY(-6px) scale(1.08);
}


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

@media(max-width:1200px){

.gallery-grid{
grid-template-columns:repeat(3,1fr);
}

.news-grid{
grid-template-columns:repeat(2,1fr);
}

.footer-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:992px){

.visitor-grid,
.newsletter-box{
grid-template-columns:1fr;
}

.newsletter form{
flex-direction:column;
}

.newsletter input{
width:100%;
}

}

@media(max-width:768px){

.gallery-grid,
.news-grid,
.footer-grid{
grid-template-columns:1fr;
}

.gallery-grid{
grid-auto-rows:220px;
}

.gallery-item:nth-child(1),
.gallery-item:nth-child(5){
grid-row:auto;
}

.visitor-map iframe{
height:350px;
}

.footer-bottom .wrap{
flex-direction:column;
text-align:center;
}

.floating-actions{
right:15px;
bottom:15px;
}

.floating-actions a{
width:54px;
height:54px;
}

}

@media(max-width:480px){

.testimonial-card,
.news-card div,
.faq details{
padding:22px;
}

.newsletter{
padding:60px 0;
}

.newsletter button{
width:100%;
}

}

/*======================================================
ABOUT PAGE
VERSION 2.0
======================================================*/


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

.about-hero,
.welcome-section,
.chairman-section,
.mission-section,
.history-section,
.partnership-section,
.leadership-section,
.committee-section,
.impact-section,
.partners-section,
.gallery-section,
.testimonials-section,
.news-section,
.about-cta,
.contact-panel,
.newsletter-section,
.map-section{

position:relative;

padding:120px 0;

overflow:hidden;

}


.about-hero{

padding-top:180px;

padding-bottom:140px;

}


.section-header{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}


.section-header.center{

text-align:center;

}


.section-header h2{

font-size:clamp(38px,5vw,62px);

font-weight:800;

line-height:1.08;

margin:18px 0;

color:var(--primary);

}


.section-header p{

font-size:18px;

line-height:1.8;

color:var(--text-light);

max-width:700px;

margin:auto;

}


/*======================================================
SECTION TAG
======================================================*/

.section-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:100px;

background:#eefbf2;

color:var(--accent);

font-weight:700;

font-size:14px;

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

}


.section-tag i{

font-size:14px;

}


/*======================================================
PREMIUM GLASS CARD
======================================================*/

.glass-card{

background:#fff;

border-radius:30px;

padding:38px;

box-shadow:

0 25px 60px rgba(0,0,0,.08);

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

transition:.45s ease;

position:relative;

overflow:hidden;

}


.glass-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:

linear-gradient(

90deg,

var(--secondary),

var(--accent)

);

}


.glass-card:hover{

transform:translateY(-12px);

box-shadow:

0 35px 70px rgba(0,0,0,.12);

}


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

.shape{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.12;

pointer-events:none;

}


.shape-left{

width:420px;

height:420px;

background:var(--secondary);

left:-180px;

top:60px;

}


.shape-right{

width:380px;

height:380px;

background:var(--accent);

right:-160px;

bottom:80px;

}


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

.card-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

font-size:28px;

margin-bottom:26px;

background:

linear-gradient(

135deg,

var(--secondary),

#d8ff70

);

color:var(--primary);

box-shadow:

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

}


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

.grid-2{

display:grid;

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

gap:40px;

}


.grid-3{

display:grid;

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

gap:35px;

}


.grid-4{

display:grid;

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

gap:30px;

}

/*======================================================
MISSION
======================================================*/

.mission-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}


.mission-card{

height:100%;

}


.mission-card h3{

font-size:30px;

margin-bottom:18px;

color:var(--primary);

}


.mission-card p{

line-height:1.9;

color:var(--text-light);

margin-bottom:30px;

}


.mission-card ul{

display:flex;

flex-direction:column;

gap:16px;

margin-top:30px;

}


.mission-card li{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

}


.mission-card li i{

color:var(--accent);

}


.values-grid{

display:grid;

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

gap:15px;

margin-top:25px;

}


.values-grid span{

background:#f5f8f9;

padding:14px;

border-radius:16px;

font-weight:600;

text-align:center;

transition:.35s;

}


.values-grid span:hover{

background:var(--secondary);

transform:translateY(-4px);

}

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

.timeline{

position:relative;

max-width:1000px;

margin:80px auto 0;

padding-left:60px;

}

.timeline::before{

content:"";

position:absolute;

left:22px;

top:0;

bottom:0;

width:4px;

border-radius:20px;

background:linear-gradient(

180deg,

var(--secondary),

var(--accent)

);

}

.timeline-item{

position:relative;

padding-left:60px;

margin-bottom:70px;

opacity:0;

transform:translateY(40px);

animation:fadeUp .8s forwards;

}

.timeline-item:nth-child(2){animation-delay:.15s;}
.timeline-item:nth-child(3){animation-delay:.3s;}
.timeline-item:nth-child(4){animation-delay:.45s;}
.timeline-item:nth-child(5){animation-delay:.6s;}

.timeline-icon{

position:absolute;

left:-6px;

top:15px;

width:56px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#fff;

border:5px solid var(--secondary);

color:var(--primary);

font-size:22px;

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

z-index:2;

}

.timeline-content{

background:#fff;

padding:35px;

border-radius:24px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.timeline-content::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(

90deg,

var(--secondary),

var(--accent)

);

}

.timeline-content:hover{

transform:translateY(-8px);

}

.timeline-content .year{

display:inline-flex;

padding:8px 18px;

border-radius:100px;

background:#eefbf2;

color:var(--accent);

font-size:13px;

font-weight:700;

margin-bottom:15px;

}

.timeline-content h3{

font-size:28px;

margin-bottom:15px;

color:var(--primary);

}

.timeline-content p{

line-height:1.8;

color:var(--text-light);

}

/*======================================================
COUNTRIES
======================================================*/

.country-grid{

display:grid;

grid-template-columns:1fr auto 1fr;

align-items:center;

gap:60px;

margin-top:80px;

}

.country-card{

background:#fff;

padding:45px;

border-radius:30px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.country-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(

90deg,

var(--secondary),

var(--accent)

);

}

.country-card:hover{

transform:translateY(-10px);

}

.country-flag{

font-size:64px;

margin-bottom:20px;

}

.country-card h3{

font-size:34px;

margin-bottom:20px;

color:var(--primary);

}

.country-card p{

line-height:1.8;

margin-bottom:30px;

color:var(--text-light);

}

.country-card ul{

display:grid;

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

gap:18px;

}

.country-card li{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

}

.country-card li i{

color:var(--accent);

}

/*======================================================
TRADE LINK
======================================================*/

.trade-link{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:20px;

}

.trade-link .circle{

width:120px;

height:120px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(

135deg,

var(--secondary),

#d8ff70

);

font-size:42px;

color:var(--primary);

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

animation:pulseTrade 2.5s infinite;

}

.trade-link span{

text-align:center;

font-weight:700;

line-height:2;

color:var(--primary);

letter-spacing:1px;

text-transform:uppercase;

}

@keyframes pulseTrade{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

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

@media(max-width:992px){

.timeline{

padding-left:35px;

}

.timeline::before{

left:15px;

}

.timeline-item{

padding-left:45px;

}

.country-grid{

grid-template-columns:1fr;

gap:35px;

}

.trade-link{

order:2;

}

.country-card{

order:1;

}

.country-card ul{

grid-template-columns:1fr;

}

}

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

.leadership-section{

background:linear-gradient(
180deg,
#ffffff 0%,
#f8fbfc 100%
);

}

.leadership-slider{

padding:30px 15px 80px;

}

.leader-card{

background:#fff;

border-radius:28px;

overflow:hidden;

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

transition:.45s;

height:100%;

display:flex;

flex-direction:column;

}

.leader-card:hover{

transform:translateY(-12px);

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

}

.leader-image{

position:relative;

height:360px;

overflow:hidden;

}

.leader-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.leader-card:hover img{

transform:scale(1.08);

}

.leader-badge{

position:absolute;

left:20px;

top:20px;

padding:8px 18px;

border-radius:100px;

background:var(--secondary);

color:var(--primary);

font-size:13px;

font-weight:700;

}

.leader-content{

padding:30px;

display:flex;

flex-direction:column;

flex:1;

}

.leader-content h3{

font-size:28px;

margin-bottom:6px;

color:var(--primary);

}

.leader-content>span{

color:var(--accent);

font-weight:700;

margin-bottom:18px;

display:block;

}

.leader-content p{

line-height:1.8;

color:var(--text-light);

margin-bottom:25px;

}

.leader-meta{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-bottom:25px;

}

.leader-meta div{

padding:10px 16px;

background:#f5f8f9;

border-radius:14px;

font-size:14px;

font-weight:600;

}

.leader-meta i{

color:var(--accent);

margin-right:8px;

}

.leader-social{

display:flex;

gap:12px;

margin-top:auto;

}

.leader-social a{

width:44px;

height:44px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#eefbf2;

color:var(--primary);

transition:.35s;

}

.leader-social a:hover{

background:var(--secondary);

transform:translateY(-4px);

}

/*======================================================
COMMITTEE
======================================================*/

.committee-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.committee-card{

background:#fff;

padding:35px;

border-radius:24px;

text-align:center;

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

transition:.4s;

}

.committee-card:hover{

transform:translateY(-10px);

}

.committee-card i{

width:90px;

height:90px;

margin:auto auto 25px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:34px;

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

color:var(--primary);

}

.committee-card h3{

font-size:24px;

margin-bottom:18px;

}

.committee-card p{

line-height:1.8;

color:var(--text-light);

margin-bottom:20px;

}

.committee-card span{

display:inline-block;

padding:8px 18px;

border-radius:100px;

background:#eefbf2;

font-weight:700;

color:var(--accent);

}

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

.impact-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.impact-card{

background:#fff;

padding:45px 30px;

border-radius:28px;

text-align:center;

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

transition:.4s;

}

.impact-card:hover{

transform:translateY(-10px);

}

.impact-card i{

font-size:42px;

color:var(--accent);

margin-bottom:20px;

}

.impact-card h2{

font-size:56px;

color:var(--primary);

margin-bottom:12px;

}

.impact-card p{

font-weight:600;

color:var(--text-light);

}

/*======================================================
PARTNERS
======================================================*/

.partners-slider{

padding:30px 0 70px;

}

.partners-slider .swiper-slide{

display:flex;

align-items:center;

justify-content:center;

}

.partners-slider img{

max-width:180px;

max-height:90px;

object-fit:contain;

filter:grayscale(100%);

opacity:.7;

transition:.35s;

}

.partners-slider img:hover{

filter:none;

opacity:1;

transform:scale(1.08);

}

/*======================================================
GALLERY
======================================================*/

.gallery-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:24px;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:320px;

object-fit:cover;

transition:.6s;

}

.gallery-overlay{

position:absolute;

inset:0;

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

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.35s;

}

.gallery-overlay i{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#fff;

font-size:24px;

color:var(--primary);

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

@media(max-width:992px){

.committee-grid{

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

}

.impact-grid{

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

}

.gallery-grid{

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

}

.leader-image{

height:300px;

}

}

@media(max-width:768px){

.committee-grid,

.impact-grid,

.gallery-grid{

grid-template-columns:1fr;

}

.leader-image{

height:260px;

}

.leader-content{

padding:24px;

}

.impact-card h2{

font-size:42px;

}

}
.wrap{
    width:min(1400px,92%);
    margin:auto;
}

/*==================================
WELCOME
==================================*/

.welcome-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:70px;

margin-top:70px;

}

.welcome-image{

position:relative;

}

.welcome-image img{

width:100%;

height:650px;

object-fit:cover;

border-radius:32px;

display:block;

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

}

.welcome-content{

display:flex;

flex-direction:column;

justify-content:center;

}

.feature-grid{

display:grid;

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

gap:22px;

margin-top:40px;

}

/*==================================
CHAIRMAN
==================================*/

.chairman-grid{

display:grid;

grid-template-columns:500px 1fr;

gap:70px;

align-items:center;

}

.chairman-photo{

position:relative;

}

.chairman-photo img{

width:100%;

height:650px;

object-fit:cover;

border-radius:35px;

display:block;

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

}

.chairman-content{

padding:20px 0;

}

.quote-box{

margin:35px 0;

padding:30px;

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

background:#f8fbfc;

border-radius:20px;

font-size:18px;

line-height:1.8;

}

.signature-area{

display:flex;

align-items:center;

gap:25px;

margin-top:45px;

}

.signature-area img{

width:180px;

height:auto;

}

/*==================================
ACHIEVEMENTS
==================================*/

.achievement-strip{

background:linear-gradient(
135deg,
var(--primary),
#0a3f37
);

padding:90px 0;

margin-top:120px;

}

.achievement-grid{

display:grid;

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

gap:30px;

}

.achievement-card{

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

backdrop-filter:blur(18px);

padding:45px 30px;

border-radius:28px;

text-align:center;

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

transition:.35s;

}

.achievement-card:hover{

transform:translateY(-10px);

}

.achievement-card i{

font-size:42px;

color:var(--secondary);

margin-bottom:20px;

}

.achievement-card h3{

font-size:54px;

color:#fff;

margin-bottom:10px;

}

.achievement-card p{

color:#d7e6df;

}

@media(max-width:992px){

.welcome-grid,

.chairman-grid{

grid-template-columns:1fr;

gap:50px;

}

.welcome-image img,

.chairman-photo img{

height:500px;

}

.achievement-grid{

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

}

.top-card,

.bottom-card{

position:relative;

left:0;

right:0;

top:0;

bottom:0;

margin-top:20px;

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

.achievement-grid{

grid-template-columns:1fr;

}

}

:root{

--container:1380px;

--section-space:120px;

}

.wrap{

width:min(var(--container),92%);

margin-inline:auto;

}

.section{

padding:var(--section-space) 0;

}

.section.narrow{

max-width:900px;

margin:auto;

}

.section.full{

width:100%;

}

.grid{

display:grid;

gap:40px;

}

.newsletter{

width:100%;

}

.newsletter .wrap{

max-width:1200px;

}

/*=========================================
GLOBAL LAYOUT
=========================================*/

html{
    scroll-behavior:smooth;
}

.page-hero.booking-hero{
    min-height:78vh;
    display:flex;
    align-items:center;
    background:linear-gradient(135deg, rgba(0,77,64,.96), rgba(2,45,38,.85)), url('images/ChatGPT Image Aug 10, 2026, 03_44_41 PM.png') center/cover;
    color:#fff;
    padding-top:140px;
}

.booking-hero-content{
    max-width:720px;
}

.booking-hero-content h1{
    color:#fff;
    font-size:clamp(2.4rem, 5vw, 4rem);
    margin-bottom:18px;
}

.booking-hero-content p{
    color:rgba(255,255,255,.9);
    font-size:1.08rem;
    max-width:660px;
}

.booking-highlights{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
}

.booking-highlight{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
}

.booking-highlight i{
    color:var(--secondary);
}

.booking-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px, 520px);
    gap:42px;
    align-items:start;
}

.booking-info h2{
    margin-bottom:16px;
}

.booking-contact-list{
    display:grid;
    gap:16px;
    margin-top:28px;
}

.booking-contact-card{
    background:#fff;
    border:1px solid rgba(6,61,55,.08);
    border-radius:22px;
    padding:20px 22px;
    box-shadow:0 24px 60px rgba(6,61,55,.06);
}

.booking-contact-card span{
    display:block;
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--primary);
    margin-bottom:8px;
}

.booking-contact-card b{
    color:var(--heading);
    font-size:1rem;
}

.booking-form{
    position:relative;
}

.form-status{
    min-height:26px;
    margin-bottom:12px;
    color:var(--primary);
    font-weight:700;
}

.form-status.success{
    color:#15803d;
}

.form-status.error{
    color:#b91c1c;
}

.form-status.loading{
    color:var(--primary);
}

.field-full{grid-column:1 / -1;}

.form-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
    margin-top:12px;
}

.helper-text{
    color:var(--text);
    font-size:.92rem;
    margin:0;
}

.booking-form .button{
    position:relative;
    min-width:220px;
}

.booking-form .button.loading{
    pointer-events:none;
    opacity:.85;
}

.booking-form .button.loading .button-text{
    opacity:.85;
}

.booking-payment-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
}

.booking-payment-grid .detail{
    background:#fff;
    border:1px solid rgba(6,61,55,.08);
    border-radius:24px;
    padding:28px;
    box-shadow:0 24px 60px rgba(6,61,55,.06);
}

.booking-payment-grid .detail h3{
    margin-top:0;
    margin-bottom:12px;
}

.booking-payment-grid .detail p{
    margin:0;
}

@keyframes spin{
    to { transform: rotate(360deg); }
}

.booking-form .button .fa-spinner{
    animation:spin 1s linear infinite;
}

@media (max-width: 980px) {
    .booking-grid,
    .booking-payment-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 700px) {
    .page-hero.booking-hero{
        min-height:auto;
        padding-top:120px;
        padding-bottom:90px;
    }

    .booking-highlights{
        flex-direction:column;
    }
}

body{
    margin:0;
    overflow-x:hidden;
    background:#ffffff;
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.7;
}

main{
    width:100%;
    overflow:hidden;
}

.wrap{
    width:min(1380px,92%);
    margin-inline:auto;
    position:relative;
}

.section{
    position:relative;
    padding:110px 0;
    width:100%;
}

.section.white{
    background:#fff;
}

.section.soft{
    background:#f8fafb;
}

.section.dark{
    background:var(--primary);
    color:#fff;
}

.plans{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:30px;
    margin-top:50px;
}

.plan{
    background:#fff;
    padding:36px 30px;
    border-radius:28px;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 30px 60px rgba(6,61,55,.06);
    display:flex;
    flex-direction:column;
    gap:20px;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.plan:hover{
    transform:translateY(-10px);
    border-color:rgba(6,61,55,.18);
    box-shadow:0 38px 90px rgba(6,61,55,.12);
}

.plan.featured{
    background:linear-gradient(180deg,rgba(236,255,241,.95),#fff);
    border-color:rgba(15,145,85,.18);
}

.plan .tag{
    display:inline-flex;
    padding:.65rem 1rem;
    border-radius:999px;
    background:rgba(6,61,55,.08);
    color:var(--secondary);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.plan.featured .tag{
    background:rgba(15,145,85,.14);
}

.plan h3{
    margin:0;
    font-size:1.6rem;
    line-height:1.2;
}

.plan .price{
    font-size:3rem;
    font-weight:900;
    color:var(--primary);
}

.plan.featured .price{
    color:var(--secondary);
}

.plan p{
    color:var(--text);
    line-height:1.8;
    margin:0;
}

.plan .more{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    color:var(--secondary);
    text-decoration:none;
}

.plan .more:hover{
    text-decoration:underline;
}

.exhibitor-form{
    background:#fff;
    padding:40px 42px;
    border-radius:30px;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 30px 80px rgba(6,61,55,.06);
}

.exhibitor-form h3{
    margin-top:0;
    margin-bottom:24px;
    font-size:2rem;
}

.exhibitor-form p{
    color:var(--text);
    margin-bottom:28px;
    line-height:1.8;
}

.exhibitor-form .form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.exhibitor-form .field{
    display:flex;
    flex-direction:column;
    gap:.85rem;
}

.exhibitor-form label{
    font-size:.95rem;
    font-weight:700;
    color:var(--text);
}

.exhibitor-form input,
.exhibitor-form select,
.exhibitor-form textarea{
    width:100%;
    padding:18px 20px;
    border:1px solid rgba(0,0,0,.14);
    border-radius:18px;
    background:#f8fafb;
    color:var(--text);
    font-family:inherit;
    font-size:.98rem;
}

.exhibitor-form textarea{
    min-height:170px;
    resize:vertical;
}

.exhibitor-form button{
    margin-top:18px;
    width:min(320px,100%);
}

@media (max-width: 980px) {
    .plans,
    .industry-grid,
    .highlight-grid,
    .form-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 700px) {
    .plan,
    .exhibitor-form{
        padding:28px;
    }
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:70px;
    align-items:center;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:35px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:30px;
}

.company-card{
    width:100%;
}