/* =========================================
   01. RESET / GLOBAL STYLES
========================================= */

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


/* =========================================
   02. BODY STYLES
========================================= */

body{

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

overflow-x:hidden;

}


/* =========================================
   03. COMMON CONTAINER
========================================= */

.container{

width:90%;

max-width:1320px;

margin:auto;

}


/* =========================================
   04. DEFAULT ELEMENTS
========================================= */

a{

text-decoration:none;

}

ul{

list-style:none;

}

button{

border:none;

background:none;

cursor:pointer;

font-family:inherit;

}


/* =========================================
   05. ROOT VARIABLES
========================================= */

:root{

--green:#0C9444;

--dark:#111827;

--border:#e5e7eb;

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

}


/* =========================================
   06. HEADER SECTION
========================================= */

.header{

position:sticky;

top:0;

background:white;

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

z-index:999;

}


/* =========================================
   07. NAVBAR SECTION

HEIGHT GUIDE

80px = Current balanced
90px = More spacing
75px = Compact layout

Reduce height if navbar
and hero section gap feels large

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

.navbar{

height:80px;

display:flex;

align-items:center;

justify-content:
space-between;

}


/* =========================================
   08. LOGO SECTION

Increase width for bigger logo

170px = Current
190px = Bigger
150px = Smaller

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

.logo img{

width:170px;

}


/* =========================================
   09. NAVIGATION SECTION
========================================= */

.nav{

margin-left:auto;

margin-right:30px;

}


.nav-links{

display:flex;

gap:30px;

align-items:center;

}


/* =========================================
   10. NAVIGATION ITEMS

gap:6px controls spacing
between text and dropdown icon

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

.nav-item{

position:relative;

font-size:15px;

font-weight:500;

color:var(--dark);

padding:8px 0;

display:flex;

align-items:center;

gap:6px;

}


/* =========================================
   11. ACTIVE / HOVER UNDERLINE EFFECT

Green underline animation

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

.nav-item::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:0;

height:3px;

background:var(--green);

transition:.3s;

}


.nav-item:hover{

color:var(--green);

}


.nav-item:hover::after{

width:100%;

}


.nav-item.active{

color:var(--green);

}


.nav-item.active::after{

width:100%;

}


/* =========================================
   12. DROPDOWN MENU
========================================= */

.dropdown{

position:relative;

}


.dropdown-menu{

position:absolute;

top:55px;

left:0;

width:240px;

background:white;

padding:15px;

border-radius:18px;

box-shadow:
var(--shadow);

opacity:0;

visibility:hidden;

transform:
translateY(10px);

transition:.3s;

}


.dropdown:hover
.dropdown-menu{

opacity:1;

visibility:visible;

transform:
translateY(0);

}


/* =========================================
   13. DROPDOWN ITEMS
========================================= */

.dropdown-menu a,
.dropdown-right button{

display:flex;

justify-content:
space-between;

width:100%;

padding:12px;

border-radius:10px;

color:var(--dark);

}


.dropdown-menu a:hover,
.dropdown-right button:hover{

background:#f3f4f6;

}


/* =========================================
   14. SUB DROPDOWN MENU
========================================= */

.dropdown-right{

position:relative;

}


.sub-dropdown{

position:absolute;

left:100%;

top:0;

width:220px;

background:white;

padding:15px;

border-radius:18px;

box-shadow:
var(--shadow);

opacity:0;

visibility:hidden;

}


.dropdown-right:hover
.sub-dropdown{

opacity:1;

visibility:visible;

}


/* =========================================
   15. NAVBAR BUTTON
========================================= */

.nav-btn{

background:
var(--green);

padding:
14px 24px;

border-radius:14px;

color:white;

font-weight:600;

transition:.3s;

}


.nav-btn:hover{

opacity:.92;

}


/* =========================================
   16. MOBILE MENU ICON
========================================= */

.menu-toggle{

display:none;

font-size:26px;

cursor:pointer;

}


/* =========================================
   17. ICON ROTATION
========================================= */

.rotate{

transform:
rotate(180deg);

transition:.3s;

}


/* =========================================
   18. RESPONSIVE NAVBAR
========================================= */

@media(max-width:1024px){

.menu-toggle{

display:block;

}


.nav-btn{

display:none;

}


.nav{

display:none;

position:absolute;

top:80px;

left:0;

width:100%;

background:white;

padding:30px;

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

}


.nav.active{

display:block;

}


.nav-links{

flex-direction:column;

align-items:flex-start;

}


/* Mobile Dropdown */

.dropdown-menu{

position:static;

opacity:1;

visibility:visible;

display:none;

transform:none;

box-shadow:none;

padding-left:15px;

}


.dropdown.active
.dropdown-menu{

display:block;

}


/* Mobile Sub Dropdown */

.sub-dropdown{

position:static;

display:none;

box-shadow:none;

opacity:1;

visibility:visible;

padding-left:20px;

}


.dropdown-right.active
.sub-dropdown{

display:block;

}

}



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

.hero{

background:#ffffff;

/*
NAVBAR → HERO GAP CONTROL

FORMAT:
padding: TOP RIGHT BOTTOM LEFT

0px = no gap

10px = small gap

20px = bigger gap
*/

padding:0 0 80px;

position:relative;

overflow:hidden;

}


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

.hero-wrapper{

display:flex;

align-items:flex-start;

justify-content:space-between;

/*
LEFT CONTENT ↔ IMAGE GAP

10px current

20px more space

5px compact
*/

gap:10px;

position:relative;

}


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

.hero-content{

/*
LEFT CONTENT WIDTH

58% current

60% wider

55% compact
*/

flex:0 0 58%;

max-width:58%;

position:relative;

z-index:5;

}


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

.hero-tag{

display:block;

font-size:15px;

font-weight:700;

color:var(--green);

margin-bottom:18px;

}


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

.hero-content h1{

/*
HEADING SIZE CONTROL

52px current

50px smaller

48px compact

55px larger
*/

font-size:52px;

font-weight:700;

line-height:1.15;

letter-spacing:-0.5px;

margin-bottom:20px;

color:#111827;

/*
TEXT WIDTH CONTROL

Increase if heading
breaks into extra lines
*/

max-width:800px;

}


.hero-content h1 span{

color:var(--green);

}


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

.hero-content p{

font-size:16px;

line-height:1.8;

color:#6B7280;

max-width:560px;

margin-bottom:28px;

}


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

.hero-buttons{

display:flex;

gap:16px;

margin-bottom:28px;

flex-wrap:wrap;

}


.btn-green{

background:var(--green);

padding:15px 24px;

border-radius:12px;

display:flex;

align-items:center;

gap:10px;

color:white;

font-weight:600;

transition:.3s;

}

.btn-green:hover{

transform:translateY(-2px);

}


.btn-outline{

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

padding:15px 24px;

border-radius:12px;

display:flex;

align-items:center;

gap:10px;

background:white;

color:#111827;

font-weight:500;

}


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

.hero-features{

display:flex;

gap:24px;

flex-wrap:wrap;

}

.hero-features div{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:#4B5563;

}

.hero-features i{

color:var(--green);

}


/* =========================================
   HERO RIGHT SIDE
========================================= */

.hero-right{

flex:0 0 42%;

position:relative;

display:flex;

justify-content:flex-end;

align-items:flex-start;

/*
IMAGE CONTAINER HEIGHT

470px current

520px taller

430px compact
*/

min-height:470px;

}


/* =========================================
   DOT PATTERN
========================================= */

.dots-pattern{

position:absolute;

left:10px;

top:120px;

width:100px;

opacity:.20;

z-index:1;

animation:

floatDots 4s ease-in-out infinite;

}


@keyframes floatDots{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-8px);

}

100%{

transform:
translateY(0);

}

}


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

.hero-image{

position:absolute;

/*
IMAGE LEFT / RIGHT CONTROL

-20 current

0 image inside

-40 more outside
*/

right:-20px;


/*
IMAGE UP / DOWN CONTROL

0 current

20 lower

-20 upper
*/

bottom:0;


/*
IMAGE SIZE CONTROL

620 current

650 bigger

700 large

580 smaller
*/

width:620px;

max-width:none;

z-index:2;

}



/* =========================================
   STATS SECTION
========================================= */

.stats{

/*
STATS OVERLAP CONTROL

-120 current

-140 = more overlap

-100 = less overlap
*/

margin-top:-120px;

position:relative;

z-index:10;


/*
SPACE AFTER STATS

Controls gap:

Stats → What We Do

25px = Professional Recommended ✅

15px = Compact

35px = Spacious

0px = Remove completely
*/

padding-bottom:25px;

}


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

.stats-container{

background:#F7FAF8;

padding:35px;

border-radius:24px;

display:grid;

grid-template-columns:

1.6fr
1fr
1fr
1fr
1fr;

gap:20px;

align-items:center;

box-shadow:

0 12px 30px

rgba(0,0,0,.06);

}


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

.trust{

display:flex;

align-items:center;

gap:18px;

text-align:left;

}


.trust i{

font-size:34px;

color:var(--green);

}


/* =========================================
   INDIVIDUAL STAT
========================================= */

.stat{

text-align:center;

transition:.3s;

}


.stat i{

font-size:26px;

color:var(--green);

margin-bottom:12px;

display:block;

transition:.3s;

}


.stat:hover{

transform:translateY(-4px);

}


.stat:hover i{

transform:scale(1.08);

}


.stat h3{

font-size:38px;

color:var(--green);

margin-bottom:5px;

}


.stat p{

font-size:14px;

color:#6B7280;

line-height:1.5;

}


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

@media(max-width:1024px){

.hero-wrapper{

flex-direction:column;

}

.hero-content{

flex:100%;

max-width:100%;

}

.hero-content h1{

font-size:48px;

}

.hero-right{

width:100%;

min-height:420px;

justify-content:center;

}

.hero-image{

position:relative;

right:auto;

bottom:auto;

margin:auto;

width:100%;

max-width:580px;

}


/*
Tablet gap control
*/

.stats{

margin-top:-30px;

padding-bottom:20px;

}


.stats-container{

grid-template-columns:

repeat(2,1fr);

}

}


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

@media(max-width:768px){

.hero{

padding:0 0 25px;

}


.hero-content{

max-width:100%;

}


.hero-content h1{

font-size:38px;

line-height:1.25;

}


.hero-buttons{

flex-direction:column;

}


.hero-features{

flex-direction:column;

gap:14px;

}


.hero-right{

min-height:300px;

justify-content:center;

align-items:center;

}


.hero-image{

position:relative;

right:auto;

bottom:auto;

margin:auto;

width:100%;

max-width:380px;

display:block;

}


/*
Mobile spacing control

Stats → Services
*/

.stats{

margin-top:0;

padding-bottom:15px;

}


.stats-container{

grid-template-columns:1fr;

padding:25px;

}

}


/* =========================================
SERVICES SECTION
========================================= */

.services{

/*
SECTION GAP CONTROL

TOP =
Stats → What We Do

BOTTOM =
What We Do → About

25px top professional

40px bottom professional
*/

padding:25px 0 40px;

background:#fff;

}


/* =========================================
TOP AREA
========================================= */

.services-top{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:50px;

margin-bottom:40px;

}


/* =========================================
LEFT CONTENT
========================================= */

.services-heading{

flex:1;

max-width:480px;

}


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

.section-tag{

display:block;

font-size:14px;

font-weight:700;

color:var(--green);

margin-bottom:14px;

letter-spacing:1px;

}


/* =========================================
HEADING CONTROL
========================================= */

.services-heading h2{

font-size:38px;

font-weight:700;

line-height:1.25;

color:#111827;

letter-spacing:-0.4px;

}


.services-heading h2 span{

display:block;

white-space:nowrap;

}


/* =========================================
DESCRIPTION
========================================= */

.services-description{

flex:1;

max-width:500px;

padding-top:18px;

}


.services-description p{

font-size:16px;

line-height:1.9;

color:#6B7280;

}


/* =========================================
AUTO CARD GRID
========================================= */

.services-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(220px,1fr)
);

gap:22px;

}


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

.service-card{

padding:34px 28px;

border:1px solid #E5E7EB;

border-radius:22px;

background:#fff;

transition:.35s;

display:flex;

flex-direction:column;

min-height:250px;

}


.service-card:hover{

transform:translateY(-6px);

box-shadow:

0 12px 30px

rgba(0,0,0,.06);

}


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

.service-icon{

margin-bottom:22px;

}


.service-icon i{

font-size:44px;

color:var(--green);

}


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

.service-card h3{

font-size:24px;

line-height:1.35;

margin-bottom:14px;

color:#111827;

}


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

.service-card p{

font-size:14px;

line-height:1.8;

color:#6B7280;

margin-bottom:22px;

}


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

.service-card a{

margin-top:auto;

font-size:18px;

color:var(--green);

}


/* =========================================
TABLET
========================================= */

@media(max-width:1024px){

.services-top{

flex-direction:column;

gap:20px;

}

.services-description{

padding-top:0;

}

}


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

@media(max-width:768px){

.services{

/*
Mobile spacing

Top 15px

Bottom 30px
*/

padding:15px 0 30px;

}

.services-top{

text-align:center;

}

.services-heading{

max-width:100%;

}

.services-description{

max-width:100%;

}

.services-heading h2{

font-size:30px;

}

.services-heading h2 span{

white-space:normal;

}

.service-card{

min-height:auto;

padding:28px;

}

}




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

.about{

/*
SECTION GAP CONTROL

Top Gap

Previous Section → About

20px Professional

Bottom Gap

About → Next Section

30px Professional
*/

padding:20px 0 30px;

background:#fff;

}


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

.about-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}


/* =========================================
LEFT CONTENT
========================================= */

.about-content{

flex:0 0 42%;

}


/* =========================================
HEADING CONTROL
========================================= */

.about-content h2{

/*
FONT SIZE CONTROL

46 current

42 smaller

50 bigger
*/

font-size:46px;

font-weight:700;

line-height:1.18;

margin-bottom:22px;

color:#111827;

}


.about-content h2 span{

display:block;

}


/* =========================================
DESCRIPTION
========================================= */

.about-content p{

font-size:16px;

line-height:1.9;

color:#6B7280;

margin-bottom:28px;

}


/* =========================================
POINTS SECTION
========================================= */

.about-points{

display:flex;

flex-direction:column;

gap:14px;

margin-bottom:30px;

}


.about-points div{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

font-weight:500;

color:#374151;

}


.about-points i{

color:var(--green);

font-size:18px;

flex-shrink:0;

}


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

.about-btn{

display:inline-flex;

align-items:center;

gap:10px;

background:var(--green);

padding:15px 24px;

border-radius:12px;

color:white;

font-weight:600;

transition:.3s;

}


.about-btn:hover{

transform:translateY(-3px);

}


/* =========================================
RIGHT SIDE
========================================= */

.about-right{

flex:0 0 52%;

position:relative;

display:flex;

justify-content:center;

align-items:center;

}


/* =========================================
IMAGE CONTROL
========================================= */

.about-image{

/*
IMAGE SIZE CONTROL

540 current

580 bigger

500 smaller
*/

width:540px;

max-width:100%;

display:block;

border-radius:22px;

}


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

.quote-card{

position:absolute;


/*
VERTICAL POSITION CONTROL

68% current

62% move upper

72% move lower

Adjust here later
*/

top:68%;


/*
RIGHT POSITION CONTROL

-25 current

0 inside image

-40 more outside

Adjust here later
*/

right:-25px;


/*
CARD WIDTH CONTROL

380 current

420 bigger

340 smaller
*/

width:380px;


/*
CARD PADDING CONTROL

38 current

44 spacious

30 compact
*/

padding:38px;

background:var(--green);

border-radius:18px;

color:white;

box-shadow:

0 20px 40px

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


/*
DO NOT REMOVE

Maintains overlap
*/

transform:

translateY(-50%);

z-index:5;

}


/* QUOTE ICON */

.quote-card i{

font-size:34px;

margin-bottom:18px;

}


/* QUOTE TEXT */

.quote-card p{

font-size:18px;

line-height:1.8;

color:white;

margin-bottom:18px;

}


/* AUTHOR */

.quote-card span{

font-size:14px;

opacity:.92;

}


/* =========================================
TABLET VIEW
========================================= */

@media(max-width:1024px){

.about-wrapper{

flex-direction:column;

gap:50px;

}


.about-content{

max-width:100%;

}


.about-right{

width:100%;

}


.quote-card{

top:70%;

right:0;

width:340px;

}

}


/* =========================================
MOBILE VIEW
========================================= */

@media(max-width:768px){

.about{

/*
MOBILE GAP CONTROL

20 top

25 bottom
*/

padding:20px 0 25px;

}


.about-content{

text-align:center;

}


.about-content h2{

font-size:34px;

}


/*
MOBILE BULLETS

Keeps bullets aligned
properly one after another
*/

.about-points{

align-items:flex-start;

max-width:280px;

width:100%;

margin:

0 auto 30px;

}


.about-points div{

width:100%;

text-align:left;

}


/*
CENTER BUTTON MOBILE
*/

.about-btn{

margin:auto;

}


/*
IMAGE + CARD STACK MOBILE
*/

.about-right{

display:flex;

flex-direction:column;

align-items:center;

}


/*
MOBILE IMAGE SIZE

380 current

420 bigger

320 smaller
*/

.about-image{

width:100%;

max-width:380px;

}


/*
CARD BELOW IMAGE MOBILE

No overlap
*/

.quote-card{

position:relative;

top:auto;

right:auto;

transform:none;

margin-top:20px;


/*
CARD WIDTH MOBILE

340 current

300 smaller

380 bigger
*/

max-width:340px;

width:100%;

padding:28px;

}

}

/* =========================================
UPSKILL SECTION
========================================= */

.upskill{

/*
SECTION GAP CONTROL

Previous → Upskill

25px Professional

Upskill → Next

30px Professional
*/

padding:25px 0 30px;

background:#fff;

}


/* =========================================
MAIN BOX
========================================= */

.upskill-box{

background:

linear-gradient(

135deg,

#01351B,

#015227

);

border-radius:28px;


/*
BOX PADDING CONTROL

55 current

70 spacious

45 compact
*/

padding:55px;

display:flex;

justify-content:space-between;

align-items:center;

gap:70px;

overflow:hidden;

position:relative;

}


/*
BACKGROUND GLOW
*/

.upskill-box::after{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:420px;

height:420px;

background:

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

border-radius:50%;

}


/* =========================================
LEFT SIDE
========================================= */

.upskill-left{

flex:1;

position:relative;

z-index:2;


/*
TEXT WIDTH CONTROL

620 current

650 wider

560 compact
*/

max-width:620px;

}


.upskill-tag{

display:block;

font-size:14px;

font-weight:700;

letter-spacing:1px;

color:#A7F3D0;

margin-bottom:18px;

}


/* =========================================
HEADING CONTROL
========================================= */

.upskill-left h2{

/*
FONT SIZE CONTROL

44 current Professional

42 smaller

48 bigger
*/

font-size:44px;

font-weight:700;

line-height:1.15;

color:white;

margin-bottom:22px;


/*
HEADING WIDTH CONTROL

650 current

700 wider

600 compact
*/

max-width:650px;


/*
KEEP FIRST LINE IN ONE ROW

Remove later if needed
*/

white-space:nowrap;

}


/*
GREEN TEXT
*/

.upskill-left h2 span{

display:block;

color:#9AF0B8;

white-space:normal;

}


.upskill-left p{

font-size:16px;

line-height:1.9;

color:

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

max-width:520px;

margin-bottom:35px;

}


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

.upskill-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}


.btn-light{

background:white;

padding:15px 24px;

border-radius:12px;

color:#01351B;

font-weight:600;

display:flex;

align-items:center;

gap:10px;

transition:.3s;

}


.btn-light:hover{

transform:

translateY(-2px);

}


.btn-outline-light{

border:

1px solid

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

padding:15px 24px;

border-radius:12px;

color:white;

font-weight:600;

display:flex;

align-items:center;

gap:10px;

transition:.3s;

}


.btn-outline-light:hover{

background:

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

}


/* =========================================
RIGHT SIDE
========================================= */

.upskill-right{

flex:1;

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:0;

border-left:

1px solid

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

position:relative;

z-index:2;

}


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

.feature-box{

display:flex;

align-items:flex-start;

gap:18px;


/*
CARD HEIGHT CONTROL

120 current

100 compact

140 spacious
*/

min-height:120px;

padding:35px;

border:

1px solid

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

color:white;

transition:.3s;

}


.feature-box:hover{

background:

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

}


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

.feature-box i{

/*
ICON SIZE CONTROL

30 current

36 bigger

24 compact
*/

font-size:30px;

color:#A7F3D0;

flex-shrink:0;

}


/* =========================================
FEATURE TEXT CONTROL
========================================= */

.feature-box h4{

font-size:18px;

line-height:1.6;

font-weight:600;

}


/* =========================================
TABLET
========================================= */

@media(max-width:1024px){

.upskill-box{

flex-direction:column;

padding:45px;

}


.upskill-right{

width:100%;

border-left:none;

}


.upskill-left{

max-width:100%;

}


.upskill-left h2{

font-size:40px;

white-space:normal;

}

}


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

@media(max-width:768px){

.upskill{

padding:20px 0 25px;

}


.upskill-box{

padding:35px 25px;

gap:35px;

}


.upskill-left{

text-align:center;

max-width:100%;

}


.upskill-left h2{

/*
MOBILE FONT CONTROL

36 current

34 smaller

40 bigger
*/

font-size:36px;

white-space:normal;

}


.upskill-buttons{

justify-content:center;

}


.upskill-right{

grid-template-columns:1fr;

}


.feature-box{

padding:28px;

min-height:auto;

}

}





/* =========================================
IDEA SECTION
========================================= */

.idea-section{

/*
SECTION GAP CONTROL

Previous → This Section

25px Professional

This → Next Section

25px Professional
*/

padding:25px 0;

background:#fff;

}


/* =========================================
MAIN BOX
========================================= */

.idea-box{

background:#F5F8F7;

border-radius:28px;


/*
BOX HEIGHT CONTROL

36 current

45 spacious

28 compact
*/

padding:36px 42px;

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

}


/* =========================================
LEFT SIDE
========================================= */

.idea-left{

display:flex;

align-items:center;

gap:24px;

flex:1;

}


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

.idea-icon{

/*
ICON BOX SIZE

78 current

90 bigger

65 compact
*/

width:78px;

height:78px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

}


/*
ICON SIZE CONTROL

32 current

38 bigger

28 smaller
*/

.idea-icon i{

font-size:32px;

color:var(--green);

}


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

.idea-content h2{

/*
HEADING SIZE CONTROL

36 current

40 bigger

32 smaller
*/

font-size:36px;

font-weight:700;

color:#111827;

margin-bottom:10px;

}


.idea-content p{

font-size:17px;

color:#6B7280;

line-height:1.7;

}


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

.idea-btn{

background:var(--green);

padding:16px 34px;

border-radius:14px;

display:flex;

align-items:center;

gap:12px;

font-weight:600;

color:white;

transition:.3s;

}


/*
BUTTON HOVER
*/

.idea-btn:hover{

transform:

translateY(-3px);

}


/* =========================================
TABLET
========================================= */

@media(max-width:1024px){

.idea-box{

padding:34px;

}

}


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

@media(max-width:768px){

.idea-section{

/*
MOBILE GAP CONTROL

20 top

20 bottom
*/

padding:20px 0;

}


.idea-box{

padding:28px 22px;

flex-direction:column;

align-items:flex-start;

}


/*
ICON + TEXT STACK
*/

.idea-left{

align-items:flex-start;

}


/*
HEADING SIZE MOBILE

30 current

26 compact
*/

.idea-content h2{

font-size:30px;

}


.idea-right{

width:100%;

}


.idea-btn{

width:100%;

justify-content:center;

}

}

/* =========================================
REMOVE DEFAULT BODY GAP
Prevents white space after footer
========================================= */

html,
body{

margin:0;

padding:0;

overflow-x:hidden;

}


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

.footer{

background:

linear-gradient(

135deg,

#01351B,

#015227

);

color:white;


/*
FOOTER SPACING

40 current

50 spacious

30 compact
*/

padding:40px 0 0;


/*
Ensures footer ends properly
*/

margin-bottom:0;

}


/* =========================================
TOP AREA
========================================= */

.footer-top{

display:grid;

grid-template-columns:

2fr
1fr
1fr
1.4fr;

gap:40px;

padding-bottom:35px;

border-bottom:

1px solid

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

}


/* =========================================
COLUMN DIVIDER LINE

Reference image contains
vertical partition lines
========================================= */

.footer-column,

.footer-brand{

position:relative;

padding-right:30px;

}


/*
VERTICAL DIVIDER

Remove last divider
for contact section
*/

.footer-column::after,

.footer-brand::after{

content:"";

position:absolute;

right:0;

top:0;

width:1px;

height:100%;

background:

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

}


/*
REMOVE LAST DIVIDER
*/

.footer-top>*:last-child::after{

display:none;

}


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

.footer-logo{

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

LOGO SIZE CONTROL

180px = Smaller

200px = Professional Recommended ✅

220px = Bigger

240px = Large

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

width:240px;

height:auto;

display:block;

margin-bottom:22px;

}


.footer-brand p{

color:

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

line-height:1.9;

max-width:280px;

margin-bottom:28px;

}


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

.social-icons{

display:flex;

gap:14px;

}


/*
SOCIAL ICON SIZE

44 current

50 bigger

38 smaller
*/

.social-icons a{

width:44px;

height:44px;

border-radius:50%;

border:

1px solid

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

display:flex;

align-items:center;

justify-content:center;

color:white;

transition:.3s;

}


.social-icons a:hover{

background:

var(--green);

transform:

translateY(-3px);

}


/* =========================================
COLUMN TITLE
========================================= */

.footer-column h3{

font-size:18px;

margin-bottom:22px;

font-weight:700;

}


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

.footer-column a{

display:block;

margin-bottom:14px;

color:

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

transition:.3s;

}


.footer-column a:hover{

padding-left:5px;

color:white;

}


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

.contact-item{

display:flex;

align-items:flex-start;

gap:14px;

margin-bottom:18px;

}


.contact-item i{

color:#9AF0B8;

margin-top:4px;

}


.contact-item p{

line-height:1.8;

color:

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

}


/* =========================================
BOTTOM BAR
========================================= */

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding:

20px 0;

gap:20px;

flex-wrap:wrap;

}


/*
BOTTOM BORDER
*/

.footer-bottom{

border-top:

1px solid

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

}


.footer-bottom p{

margin:0;

color:

rgba(255,255,255,.80);

}


.footer-policy{

display:flex;

gap:24px;

}


/*
CLICKABLE LINKS

Add links later
*/

.footer-policy a{

color:

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

transition:.3s;

}


.footer-policy a:hover{

color:white;

}


/* =========================================
TABLET
========================================= */

@media(max-width:1024px){

.footer-top{

grid-template-columns:

1fr
1fr;

}


.footer-column::after,

.footer-brand::after{

display:none;

}

}


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

@media(max-width:768px){

.footer{

padding:35px 0 0;

}


.footer-top{

grid-template-columns:1fr;

gap:35px;

}


.footer-bottom{

flex-direction:column;

text-align:center;

}


.footer-policy{

justify-content:center;

}

}