/* =========================================================
   NOVIXAHUB
   Premium Green UI
   Mobile First
========================================================= */

/* GOOGLE FONTS */

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


/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

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

background:#F8FAFC;

color:#111827;

overflow-x:hidden;

}


/* VARIABLES */

:root{

--green:#16A34A;

--green-dark:#15803D;

--green-light:#DCFCE7;

--white:#ffffff;

--text:#111827;

--text-light:#6B7280;

--border:#E5E7EB;

--shadow:

0 15px 45px rgba(0,0,0,.08);

--radius:22px;

}


/* LINKS */

a{

text-decoration:none;

color:inherit;

}


/* IMAGES */

img{

width:100%;

display:block;

}


/* CONTAINER */

.container{

width:min(1180px,92%);

margin:auto;

}


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

header{

position:fixed;

top:0;

left:0;

width:100%;

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

backdrop-filter:blur(15px);

z-index:1000;

border-bottom:1px solid #E5E7EB;

}

.navbar{

height:82px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo-box{

width:48px;

height:48px;

border-radius:16px;

background:linear-gradient(135deg,#16A34A,#22C55E);

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:22px;

font-weight:800;

}

.logo h2{

font-family:'Plus Jakarta Sans';

font-size:28px;

font-weight:800;

}

.logo span{

color:#16A34A;

}

.nav-links{

display:flex;

align-items:center;

gap:35px;

list-style:none;

}

.nav-links a{

font-weight:600;

transition:.3s;

}

.nav-links a:hover{

color:#16A34A;

}

.nav-register{

padding:14px 24px;

background:#16A34A;

color:#fff !important;

border-radius:14px;

}

.nav-register:hover{

background:#15803D;

}

.menu-btn{

display:none;

background:none;

border:none;

font-size:32px;

cursor:pointer;

}

/* MOBILE */

@media(max-width:991px){

.menu-btn{

display:block;

}

.nav-links{

position:fixed;

top:82px;

right:-100%;

width:280px;

height:calc(100vh - 82px);

background:#fff;

flex-direction:column;

align-items:flex-start;

padding:40px 25px;

gap:25px;

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

transition:.35s;

}

.nav-links.active{

right:0;

}

}

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

HERO

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

.hero{

padding-top:120px;

padding-bottom:60px;

}


.hero .container{

display:flex;

flex-direction:column;

gap:45px;

}


.badge{

display:inline-flex;

align-items:center;

padding:10px 18px;

background:#ECFDF5;

color:var(--green);

font-weight:600;

font-size:14px;

border-radius:999px;

margin-bottom:22px;

}


.hero h1{

font-family:'Plus Jakarta Sans';

font-size:46px;

font-weight:800;

line-height:1.08;

margin-bottom:22px;

}


.hero p{

font-size:17px;

line-height:1.8;

color:#6B7280;

margin-bottom:35px;

}


.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

}


.primary-btn{

height:58px;

display:flex;

justify-content:center;

align-items:center;

background:var(--green);

color:white;

font-weight:700;

border-radius:18px;

box-shadow:

0 18px 35px rgba(22,163,74,.30);

transition:.35s;

}


.primary-btn:hover{

background:var(--green-dark);

transform:translateY(-3px);

}


.secondary-btn{

height:58px;

display:flex;

justify-content:center;

align-items:center;

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

border-radius:18px;

font-weight:700;

color:var(--green);

transition:.35s;

background:white;

}


.secondary-btn:hover{

background:var(--green);

color:white;

}


.hero-image{

display:flex;

justify-content:center;

}


.hero-image img{

max-width:370px;

filter:drop-shadow(0 25px 50px rgba(22,163,74,.18));

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

}


/* FLOAT */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0);

}

}


/* TABLET */

@media(min-width:768px){

.hero{

padding-top:150px;

}

.hero-buttons{

flex-direction:row;

}

.primary-btn,

.secondary-btn{

width:230px;

}

}


/* DESKTOP */

@media(min-width:1100px){

.hero{

padding-top:170px;

padding-bottom:100px;

}

.hero .container{

flex-direction:row;

align-items:center;

justify-content:space-between;

}

.hero-content{

width:52%;

}

.hero-image{

width:44%;

justify-content:flex-end;

}

.hero h1{

font-size:66px;

}

.hero p{

width:90%;

}

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

.hero-stats{

margin-top:35px;

display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

flex-wrap:wrap;

}

.hero-members{

display:flex;

align-items:center;

gap:12px;

}

.member-images{

display:flex;

}

.member-images img{

width:42px;

height:42px;

border-radius:50%;

border:3px solid white;

object-fit:cover;

margin-left:-12px;

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

}

.member-images img:first-child{

margin-left:0;

}

.member-text h4{

font-family:'Plus Jakarta Sans';

font-size:18px;

font-weight:800;

color:#111827;

}

.member-text span{

font-size:13px;

color:#6B7280;

}

.mini-stat{

text-align:center;

}

.mini-stat h4{

font-family:'Plus Jakarta Sans';

font-size:20px;

font-weight:800;

color:#16A34A;

}

.mini-stat span{

font-size:13px;

color:#6B7280;

}
.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.phone{
    width:100%;
    max-width:520px;
    filter:drop-shadow(0 25px 60px rgba(22,163,74,.18));
    animation:float 5s ease-in-out infinite;
}
/*=====================================

ACTIVITIES

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

.activities{

padding:90px 0;

background:#ffffff;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-heading span{

color:#16A34A;

font-weight:700;

letter-spacing:3px;

font-size:13px;

}

.section-heading h2{

font-family:'Plus Jakarta Sans';

font-size:42px;

margin:12px 0;

}

.section-heading p{

max-width:650px;

margin:auto;

color:#6B7280;

line-height:1.8;

}

.activity-card{

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

padding:35px;

margin-bottom:30px;

background:#fff;

border-radius:28px;

border:1px solid #ECFDF5;

box-shadow:0 15px 45px rgba(0,0,0,.06);

transition:.35s;

}

.activity-card:hover{

transform:translateY(-8px);

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

}

.activity-image{

flex:1;

text-align:center;

}

.activity-image img{

max-width:220px;

}

.activity-content{

flex:1;

}

.activity-content h3{

font-family:'Plus Jakarta Sans';

font-size:30px;

margin-bottom:15px;

}

.activity-content p{

color:#6B7280;

line-height:1.9;

margin-bottom:25px;

}

.activity-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

background:#16A34A;

color:#fff;

border-radius:14px;

font-weight:700;

transition:.35s;

}

.activity-btn:hover{

background:#15803D;

}

@media(max-width:900px){

.activity-card{

flex-direction:column;

text-align:center;

padding:30px 20px;

}

.activity-image img{

max-width:180px;

}

.activity-content h3{

font-size:24px;

}

.activity-btn{

width:100%;

}

}
/*=====================================

VIEW ALL OPPORTUNITIES

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

.view-all-section{

text-align:center;

margin-top:55px;

}

.view-all-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px 36px;

background:#16A34A;

color:#fff;

border-radius:18px;

font-weight:700;

font-size:17px;

transition:.35s;

box-shadow:0 15px 35px rgba(22,163,74,.25);

}

.view-all-btn span{

transition:.35s;

}

.view-all-btn:hover{

background:#15803D;

transform:translateY(-4px);

}

.view-all-btn:hover span{

transform:translateX(6px);

}
/*=====================================
OPPORTUNITIES PAGE
======================================*/

.opportunities-page{

padding:140px 0 90px;

background:#F8FAFC;

}

.category-title{

margin:50px 0 25px;

font-size:28px;

font-family:'Plus Jakarta Sans';

}

.opportunity-list{

display:flex;

flex-direction:column;

gap:18px;

}

.opportunity-card{

display:flex;

align-items:center;

gap:20px;

padding:18px;

background:#fff;

border-radius:22px;

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

transition:.35s;

}

.opportunity-card:hover{

transform:translateY(-5px);

}

.opportunity-card img{

width:82px;

height:82px;

object-fit:contain;

flex-shrink:0;

}

.opportunity-card h4{

font-size:21px;

font-family:'Plus Jakarta Sans';

margin-bottom:6px;

}

.opportunity-card p{

color:#6B7280;

font-size:15px;

line-height:1.6;

}

.status{

margin-left:auto;

padding:10px 18px;

border-radius:999px;

font-size:13px;

font-weight:700;

white-space:nowrap;

}

.activity-action{

margin-left:auto;

display:flex;

align-items:center;

justify-content:center;

padding:12px 22px;

background:#16A34A;

color:#fff;

border-radius:14px;

font-weight:700;

transition:.35s;

white-space:nowrap;

}

.activity-action:hover{

background:#15803D;

transform:translateY(-2px);

}
/*=====================================

WHY CHOOSE NOVIXAHUB

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

.why-section{

padding:100px 0;

background:#F8FAFC;

}

.why-container{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}

.why-image{

flex:1;

text-align:center;

}

.why-image img{

max-width:420px;

width:100%;

}

.why-content{

flex:1;

}

.section-tag{

display:inline-block;

padding:8px 18px;

background:#DCFCE7;

color:#16A34A;

font-size:13px;

font-weight:700;

border-radius:999px;

letter-spacing:1px;

margin-bottom:18px;

}

.why-content h2{

font-size:46px;

font-family:'Plus Jakarta Sans';

line-height:1.2;

margin-bottom:18px;

}

.why-content p{

font-size:17px;

line-height:1.8;

color:#6B7280;

margin-bottom:30px;

}

.why-list{

list-style:none;

margin-bottom:35px;

}

.why-list li{

display:flex;

align-items:center;

gap:15px;

font-size:18px;

font-weight:600;

margin-bottom:18px;

}

.why-list span{

width:34px;

height:34px;

background:#DCFCE7;

color:#16A34A;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

flex-shrink:0;

}

@media(max-width:900px){

.why-container{

display:flex;

flex-direction:column-reverse;

gap:40px;

text-align:center;

}

.why-image{

margin-top:10px;

}

.why-image img{

max-width:320px;

}

.why-content h2{

font-size:34px;

}

.why-content p{

font-size:16px;

}

.why-list{

margin:30px 0;

}

.why-list li{

justify-content:flex-start;

text-align:left;

font-size:16px;

}

.primary-btn{

margin:auto;

}

}
/*=====================================

TESTIMONIALS

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

.testimonials{

padding:100px 0;

background:#fff;

overflow:hidden;

}

.testimonial-slider{

position:relative;

overflow:hidden;

margin-top:50px;

}

.testimonial-track{

display:flex;

transition:.6s ease;

}

.testimonial-card{

min-width:100%;

padding:35px;

background:#fff;

border-radius:25px;

border:1px solid #ECFDF5;

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

}

.stars{

font-size:24px;

color:#FBBF24;

margin-bottom:20px;

}

.testimonial-card p{

font-size:17px;

line-height:1.8;

color:#6B7280;

margin-bottom:25px;

}

.member{

display:flex;

align-items:center;

gap:15px;

}

.member img{

width:60px;

height:60px;

border-radius:50%;

object-fit:cover;

}

.member h4{

font-size:18px;

margin-bottom:4px;

font-family:'Plus Jakarta Sans';

}

.member span{

display:flex;

align-items:center;

gap:8px;

color:#16A34A;

font-size:15px;

font-weight:600;

margin-top:3px;

}

.slider-dots{

display:flex;

justify-content:center;

gap:12px;

margin-top:30px;

}

.dot{

width:12px;

height:12px;

border-radius:50%;

background:#CBD5E1;

cursor:pointer;

transition:.3s;

}

.dot.active{

background:#16A34A;

transform:scale(1.2);

}
/*=====================================

FAQ

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

.faq-section{

padding:100px 0;

background:#F8FAFC;

}

.faq-container{

margin-top:50px;

max-width:850px;

margin-inline:auto;

}

.faq-item{

background:#fff;

border-radius:20px;

margin-bottom:18px;

overflow:hidden;

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

border:1px solid #ECFDF5;

}

.faq-question{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:24px;

background:none;

border:none;

cursor:pointer;

font-size:18px;

font-weight:700;

font-family:'Plus Jakarta Sans';

text-align:left;

}

.faq-icon{

font-size:28px;

color:#16A34A;

transition:.3s;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}

.faq-answer p{

padding:0 24px 24px;

line-height:1.8;

color:#6B7280;

}

.faq-item.active .faq-answer{

max-height:250px;

}

.faq-item.active .faq-icon{

transform:rotate(45deg);

}
/*=====================================

CALL TO ACTION

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

.cta-section{

padding:100px 0;

background:#ffffff;

}

.cta-box{

background:linear-gradient(135deg,#16A34A,#22C55E);

border-radius:35px;

padding:60px;

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

overflow:hidden;

position:relative;

}

.cta-content{

flex:1;

color:#fff;

}

.cta-content h2{

font-size:52px;

font-family:'Plus Jakarta Sans';

line-height:1.15;

margin:20px 0;

}

.cta-content p{

font-size:18px;

line-height:1.9;

opacity:.95;

margin-bottom:35px;

max-width:550px;

}

.cta-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.cta-buttons .primary-btn{

background:#fff;

color:#16A34A;

}

.cta-buttons .primary-btn:hover{

background:#F8FAFC;

}

.cta-buttons .secondary-btn{

background:transparent;

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

color:#fff;

}

.cta-buttons .secondary-btn:hover{

background:#fff;

color:#16A34A;

}

.cta-image{

flex:1;

display:flex;

justify-content:center;

}

.cta-image img{

max-width:340px;

}

@media(max-width:900px){

.cta-box{

flex-direction:column;

padding:40px 25px;

text-align:center;

}

.cta-content h2{

font-size:36px;

}

.cta-content p{

font-size:16px;

}

.cta-buttons{

justify-content:center;

}

.cta-image img{

max-width:260px;

}

}
/*=====================================

FOOTER

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

.footer{

background:#0F172A;

padding:80px 0 30px;

color:#CBD5E1;

}

.footer-grid{

display:grid;

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

gap:50px;

margin-bottom:50px;

}

.footer-logo{

font-size:34px;

color:#fff;

margin-bottom:20px;

}

.footer-logo span{

background:#16A34A;

color:#fff;

padding:8px 14px;

border-radius:14px;

margin-right:8px;

}

.footer-about p{

line-height:1.8;

}

.footer-links h3{

color:#fff;

margin-bottom:20px;

font-size:20px;

}

.footer-links ul{

list-style:none;

padding:0;

}

.footer-links li{

margin-bottom:14px;

}

.footer-links a{

text-decoration:none;

color:#CBD5E1;

transition:.3s;

}

.footer-links a:hover{

color:#22C55E;

}

.footer hr{

border:none;

height:1px;

background:#334155;

margin:35px 0;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.socials{

display:flex;

gap:15px;

align-items:center;

flex-wrap:wrap;

}

.socials a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

background:#1E293B;

color:#ffffff;

border-radius:50%;

text-decoration:none;

font-size:20px;

transition:.35s ease;

}

.socials a:hover{

background:#16A34A;

transform:translateY(-5px) scale(1.08);

box-shadow:0 12px 25px rgba(34,197,94,.35);

}

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

.menu-btn{
    display:block;
    width:50px;
    height:50px;
    background:#16A34A;
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:28px;
    cursor:pointer;
}

.nav-links{
    position:fixed;
    top:0;
    right:-100%;
    width:280px;
    height:100vh;
    background:#fff;
    padding:100px 30px;
    display:flex;
    flex-direction:column;
    gap:25px;
    list-style:none;
    box-shadow:-10px 0 30px rgba(0,0,0,.10);
    transition:.35s;
    z-index:1000;
}

.nav-links.active{
    right:0;
}

.nav-links a{
    font-size:18px;
    font-weight:600;
}

.nav-register{
    background:#16A34A;
    color:#fff;
    padding:14px 20px;
    border-radius:14px;
    text-align:center;
}

@media(min-width:992px){

    .menu-btn{
        display:none;
    }

    .nav-links{
        position:static;
        width:auto;
        height:auto;
        background:none;
        padding:0;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:30px;
        box-shadow:none;
    }

}