body{
font-family:'Prompt',sans-serif;
background:#f7f7f7;
}

.theme{
background:linear-gradient(90deg,#ff6fb5,#00c9a7,#4facfe);
}

.brand-title{
font-family:'Kanit';
font-size:18px;
font-weight:600;
}

.brand-subtitle{
font-size:11px;
}

#bannerSlider{
width:100%;
height:100vh;   /* 80% ของหน้าจอ */
overflow:hidden;
}

#bannerSlider .carousel-item{
height:100vh;
}

.banner-image{
width:100%;
height:100%;
object-fit:cover;
}
/* COLOR SYSTEM */

:root{

--cola-blue:#1E6FB9;
--cola-sky:#4DA6FF;
--cola-green:#2DBE7F;
--cola-yellow:#FFC93C;
--cola-orange:#FF8A3D;
--cola-pink:#FF5C8A;
--cola-red:#E63946;

}

/* HEADER */

.navbar{
background:linear-gradient(
90deg,
var(--cola-blue),
var(--cola-sky)
);
}

/* HERO BANNER */

.theme{
background:linear-gradient(
90deg,
var(--cola-blue),
var(--cola-sky),
var(--cola-green)
);
color:white;
}

/* BUTTON */

.btn-primary{
background:var(--cola-blue);
border:none;
}

.btn-primary:hover{
background:var(--cola-sky);
}

/* COMMUNITY SECTION */

.section-community{
background:var(--cola-green);
color:white;
}

/* OPPORTUNITY */

.section-opportunity{
background:var(--cola-yellow);
}

/* SOCIAL IMPACT */

.section-impact{
background:var(--cola-pink);
color:white;
}

/* FOOTER */

footer{
background:var(--cola-blue);
color:white;
}

.card{
border:none;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

.banner-overlay{

background:linear-gradient(
rgba(0,0,0,0.3),
rgba(0,0,0,0.2)
);

}

/* GLOBAL FONT */

body{
font-family:'Prompt',sans-serif;
font-size:16px;
line-height:1.6;
color:#333;
background:#f7f7f7;
}

/* HEADINGS */

h1,h2,h3,h4,h5{
font-family:'Kanit',sans-serif;
font-weight:500;
color:#1E6FB9;
}

/* BRAND TEXT */

.brand-title{
font-family:'Kanit';
font-size:20px;
font-weight:600;
}

.brand-subtitle{
font-size:12px;
color:#666;
}

/* NAVBAR */

.navbar{
font-family:'Prompt';
font-weight:500;
}

/* CARD */

.card-title{
font-family:'Kanit';
font-size:18px;
}

/* BUTTON */

.btn{
font-family:'Prompt';
font-weight:500;
}

/* TABLE */

table{
font-family:'Prompt';
}

/* FOOTER */

footer{
font-family:'Prompt';
font-size:14px;
}