﻿ 
:root { 
--ks-red: #E8231A; --ks-red-dark: #C41A13; --ks-red-light: #FEE8E7; --ks-green: #3A9B3F; --ks-green-dark: #2D7A31; --ks-green-light: #EEF7EE; --ks-blue: #1E5FAD; --ks-blue-dark: #174D8E; --ks-blue-light: #EEF4FC; --ks-orange: #F47B20; --ks-orange-dark: #D4661A; --ks-orange-light: #FEF4EC; --ks-white: #FFFFFF; 

--ks-gradient-blue-green: linear-gradient(135deg, #1E5FAD 0%, #3A9B3F 100%); 
--ks-gradient-red-orange: linear-gradient(135deg, #E8231A 0%, #F47B20 100%); 
--ks-gradient-green-blue: linear-gradient(135deg, #3A9B3F 0%, #1E5FAD 100%); 
--ks-gradient-orange-red: linear-gradient(135deg, #F47B20 0%, #E8231A 100%); 
--ks-gradient-bg-warm: linear-gradient(135deg, #FEF4EC, #FEE8E7); 
--ks-gradient-bg-cool: linear-gradient(135deg, #EEF4FC, #EEF7EE); 
--ks-overlay-blue: linear-gradient(135deg, rgba(30,95,173,.92), rgba(58,155,63,.92)); 
--ks-overlay-red: linear-gradient(135deg, rgba(232,35,26,.92), rgba(244,123,32,.92)); 

--ks-text-dark: #1A1A1A; 
--ks-text-medium: #444444; 
--ks-text-light: #666666; 
--ks-text-muted: #999999; 
--ks-text-white: #FFFFFF; 
--ks-text-white-80: rgba(255,255,255,.80); 
--ks-text-white-90: rgba(255,255,255,.90); 

--ks-bg-white: #FFFFFF; 
--ks-bg-red-light: #FEE8E7; 
--ks-bg-green-light: #EEF7EE; 
--ks-bg-blue-light: #EEF4FC; 
--ks-bg-orange-light: #FEF4EC; 

--ks-border-red: 5px solid #E8231A;
 --ks-border-green: 5px solid #3A9B3F; 
--ks-border-blue: 5px solid #1E5FAD; 
--ks-border-orange: 5px solid #F47B20; 
--ks-shadow-sm: 0 4px 20px rgba(0,0,0,.06); 
--ks-shadow-md: 0 10px 40px rgba(0,0,0,.08); 
--ks-shadow-lg: 0 20px 60px rgba(0,0,0,.12); 

--ks-radius-sm: 12px; 
--ks-radius-md: 20px; 
--ks-radius-lg: 28px; 
--ks-radius-pill: 50px; 
--ks-radius-circle: 50%; 
 --ks-font-size-hero: 64px; 
--ks-font-size-h1: 54px; 
--ks-font-size-h2: 42px; 
--ks-font-size-h3: 32px; 
--ks-font-size-body-lg: 19px; 
--ks-font-size-body: 17px; 
--ks-font-size-sm: 15px; 
--ks-line-height-body: 2; 
--ks-line-height-heading: 1.2;
 --ks-section-padding: 110px 0; 
--ks-section-padding-sm: 75px 0;
 --ks-transition: all .3s ease; }




/* SECTION BACKGROUNDS */
.ks-bg-white { background: var(--ks-bg-white); }
.ks-bg-red { background: var(--ks-bg-red-light); }
.ks-bg-green { background: var(--ks-bg-green-light); }
.ks-bg-blue { background: var(--ks-bg-blue-light); }
.ks-bg-orange { background: var(--ks-bg-orange-light); }
.ks-bg-grad-blue-green { background: var(--ks-gradient-blue-green); }
.ks-bg-grad-red-orange { background: var(--ks-gradient-red-orange); }
.ks-bg-grad-green-blue { background: var(--ks-gradient-green-blue); }
.ks-bg-grad-orange-red { background: var(--ks-gradient-orange-red); }
.ks-bg-grad-warm { background: var(--ks-gradient-bg-warm); }
.ks-bg-grad-cool { background: var(--ks-gradient-bg-cool); }

/* TEXT COLORS */
.ks-text-red { color: var(--ks-red); }
.ks-text-green { color: var(--ks-green); }
.ks-text-blue { color: var(--ks-blue); }
.ks-text-orange { color: var(--ks-orange); }
.ks-text-white { color: var(--ks-white); }
.ks-text-dark { color: var(--ks-text-dark); }
.ks-text-medium { color: var(--ks-text-medium); }
.ks-text-light { color: var(--ks-text-light); }

/* LABELS / BADGES */
.ks-label { display: inline-block; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 18px; border-radius: var(--ks-radius-pill); margin-bottom: 20px; }
.ks-label-red { background: var(--ks-red); }
.ks-label-green { background: var(--ks-green); }
.ks-label-blue { background: var(--ks-blue); }
.ks-label-orange { background: var(--ks-orange); }

/* HEADINGS */
.ks-heading { font-size: var(--ks-font-size-h1); font-weight: 800; line-height: var(--ks-line-height-heading); margin-bottom: 25px; }
.ks-heading-red { color: var(--ks-red); }
.ks-heading-green { color: var(--ks-green); }
.ks-heading-blue { color: var(--ks-blue); }
.ks-heading-orange { color: var(--ks-orange); }
.ks-heading-white { color: var(--ks-white); }

/* BODY TEXT */
.ks-text { font-size: var(--ks-font-size-body-lg); line-height: var(--ks-line-height-body); color: var(--ks-text-medium); margin-bottom: 20px; }

/* SECTIONS */
.ks-section { padding: var(--ks-section-padding); }
.ks-section-sm { padding: var(--ks-section-padding-sm); }

/* CARDS */
.ks-card { background: var(--ks-bg-white); border-radius: var(--ks-radius-lg); padding: 40px 35px; box-shadow: var(--ks-shadow-md); transition: var(--ks-transition); }
.ks-card:hover { transform: translateY(-8px); box-shadow: var(--ks-shadow-lg); }
.ks-card-red { border-top: var(--ks-border-red); }
.ks-card-green { border-top: var(--ks-border-green); }
.ks-card-blue { border-top: var(--ks-border-blue); }
.ks-card-orange { border-top: var(--ks-border-orange); }

/* STATEMENT BOX */
.ks-statement { border-radius: var(--ks-radius-lg); padding: 60px; text-align: center; margin-bottom: 50px; }
.ks-statement-red-orange { background: var(--ks-gradient-red-orange); }
.ks-statement-blue-green { background: var(--ks-gradient-blue-green); }
.ks-statement h2 { color: var(--ks-white); font-size: 28px; font-weight: 800; line-height: 1.8; margin: 0; }

/* QUOTE / MISSION BOX */
.ks-quote { background: var(--ks-bg-white); border-radius: 0 var(--ks-radius-md) var(--ks-radius-md) 0; padding: 40px 45px; box-shadow: var(--ks-shadow-md); }
.ks-quote-red { border-left: 6px solid var(--ks-red); }
.ks-quote-green { border-left: 6px solid var(--ks-green); }
.ks-quote-blue { border-left: 6px solid var(--ks-blue); }
.ks-quote-orange { border-left: 6px solid var(--ks-orange); }
.ks-quote p { font-size: 20px; line-height: 1.9; color: var(--ks-blue); margin: 0; font-style: italic; font-weight: 600; }

/* BUTTONS */
.ks-btn { display: inline-block; padding: 16px 36px; border-radius: var(--ks-radius-sm); font-size: 18px; font-weight: 700; margin: 8px; transition: var(--ks-transition); text-decoration: none; cursor: pointer; border: none; }
.ks-btn-red { background: var(--ks-red); color: var(--ks-white); }
.ks-btn-red:hover { background: var(--ks-red-dark); color: var(--ks-white); }
.ks-btn-green { background: var(--ks-green); color: var(--ks-white); }
.ks-btn-green:hover { background: var(--ks-green-dark); color: var(--ks-white); }
.ks-btn-blue { background: var(--ks-blue); color: var(--ks-white); }
.ks-btn-blue:hover { background: var(--ks-blue-dark); color: var(--ks-white); }
.ks-btn-orange { background: var(--ks-orange); color: var(--ks-white); }
.ks-btn-orange:hover { background: var(--ks-orange-dark); color: var(--ks-white); }
.ks-btn-outline-red { border: 2px solid var(--ks-red); color: var(--ks-red); background: transparent; }
.ks-btn-outline-red:hover { background: var(--ks-red); color: var(--ks-white); }
.ks-btn-outline-blue { border: 2px solid var(--ks-blue); color: var(--ks-blue); background: transparent; }
.ks-btn-outline-blue:hover { background: var(--ks-blue); color: var(--ks-white); }
.ks-btn-outline-green { border: 2px solid var(--ks-green); color: var(--ks-green); background: transparent; }
.ks-btn-outline-green:hover { background: var(--ks-green); color: var(--ks-white); }
.ks-btn-outline-white { border: 2px solid var(--ks-white); color: var(--ks-white); background: transparent; }
.ks-btn-outline-white:hover { background: var(--ks-white); color: var(--ks-blue); }

/* HERO SECTION */
.ks-hero { position: relative; padding: 140px 0; text-align: center; }
.ks-hero h1 { color: var(--ks-white); font-size: var(--ks-font-size-hero); font-weight: 800; line-height: var(--ks-line-height-heading); margin-bottom: 20px; }
.ks-hero p { color: var(--ks-text-white-90); font-size: 22px; line-height: 1.9; }

/* IMAGES */
.ks-img { width: 100%; border-radius: var(--ks-radius-lg); box-shadow: var(--ks-shadow-lg); }

/* CIRCLE ICON BOX */
.ks-icon-circle { width: 70px; height: 70px; border-radius: var(--ks-radius-circle); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; }
.ks-icon-red { background: var(--ks-bg-red-light); color: var(--ks-red); }
.ks-icon-green { background: var(--ks-bg-green-light); color: var(--ks-green); }
.ks-icon-blue { background: var(--ks-bg-blue-light); color: var(--ks-blue); }
.ks-icon-orange { background: var(--ks-bg-orange-light); color: var(--ks-orange); }

/* NUMBERED CIRCLE */
.ks-number-circle { width: 44px; height: 44px; border-radius: var(--ks-radius-circle); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--ks-white); flex-shrink: 0; }
.ks-number-red { background: var(--ks-red); }
.ks-number-green { background: var(--ks-green); }
.ks-number-blue { background: var(--ks-blue); }
.ks-number-orange { background: var(--ks-orange); }

/* RESPONSIVE */
@media (max-width: 991px) {
	.ks-hero { padding: 90px 0; }
	.ks-hero h1 { font-size: 42px; }
	.ks-heading { font-size: 36px; }
	.ks-section { padding: var(--ks-section-padding-sm); }
	.ks-statement { padding: 40px 25px; }
	.ks-statement h2 { font-size: 22px; }
}
