
.widget.HTML#HTML6 {
padding: 0px;
}
/* =================================
VARIABEL WARNA (SESUAI starshipeducation.com)
================================= */
:root {
–primary-blue: #1e4ed8; /* Warna biru utama dari website */
–blue-hover: #0f3bb3; /* Biru lebih gelap untuk efek hover */
–accent-gold: #fbbf24; /* Aksen emas/kuning */
–gold-dark: #f59e0b;
–text-dark: #1e293b;
–text-gray: #475569;
–text-light: #64748b;
–bg-white: #ffffff;
–bg-light: #f8fafc;
–border-light: #e2e8f0;
–shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
–shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
–shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Inter’, sans-serif;
background-color: var(–bg-white);
color: var(–text-dark);
line-height: 1.5;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* =================================
HEADER SECTION
================================= */
.about-header {
background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 100%);
border-bottom: 1px solid var(–border-light);
}
.header-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 48px;
}
.header-text {
flex: 1.2;
}
.header-image {
flex: 0.9;
border-radius: 32px;
overflow: hidden;
box-shadow: var(–shadow-lg);
}
.header-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.header-image:hover img {
transform: scale(1.02);
}
.badge {
display: inline-block;
background-color: rgba(30, 78, 216, 0.1);
color: var(–primary-blue);
font-size: 0.8rem;
font-weight: 600;
padding: 6px 14px;
border-radius: 40px;
margin-bottom: 24px;
letter-spacing: -0.2px;
}
.main-title {
font-size: 3rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 16px;
color: var(–primary-blue);
}
.subhead {
font-size: 1.25rem;
font-weight: 500;
color: var(–text-gray);
margin-bottom: 20px;
}
.description {
color: var(–text-light);
margin-bottom: 32px;
font-size: 1rem;
line-height: 1.6;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}
.contact-row {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
color: var(–text-dark);
}
.contact-row i {
width: 24px;
color: var(–primary-blue);
font-size: 1.1rem;
}
/* =================================
SECTION UMUM
================================= */
.section {
padding: 80px 0;
}
.section-bg-light {
background-color: var(–bg-light);
}
.section-title {
text-align: center;
margin-bottom: 56px;
}
.section-title h2 {
font-size: 2.25rem;
font-weight: 700;
color: var(–text-dark);
letter-spacing: -0.02em;
position: relative;
display: inline-block;
padding-bottom: 12px;
}
.section-title h2:after {
content: ”;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 4px;
background: var(–accent-gold);
border-radius: 4px;
}
.section-subtitle {
text-align: center;
max-width: 700px;
margin: 16px auto 0;
color: var(–text-light);
font-size: 1.1rem;
}
/* Cards Grid */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
margin-top: 24px;
}
.feature-card {
background: var(–bg-white);
border-radius: 24px;
padding: 32px 28px;
box-shadow: var(–shadow-md);
transition: all 0.25s ease;
border: 1px solid var(–border-light);
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: var(–shadow-lg);
border-color: var(–primary-blue);
}
.card-icon {
font-size: 2.5rem;
color: var(–primary-blue);
margin-bottom: 20px;
}
.card-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 14px;
color: var(–text-dark);
}
/* Accordion (Expandable) */
.accordion-item {
background: var(–bg-white);
border-radius: 20px;
margin-bottom: 16px;
border: 1px solid var(–border-light);
overflow: hidden;
transition: all 0.2s;
}
.accordion-header {
background: var(–bg-white);
padding: 22px 28px;
cursor: pointer;
display: flex;
align-items: center;
gap: 14px;
font-weight: 700;
font-size: 1.2rem;
color: var(–text-dark);
transition: all 0.2s;
}
.accordion-header i {
font-size: 1.4rem;
color: var(–primary-blue);
transition: transform 0.2s;
}
.accordion-header:hover {
background-color: #f1f5f9;
}
.accordion-header.active {
background-color: var(–primary-blue);
color: white;
}
.accordion-header.active i {
color: var(–accent-gold);
}
.accordion-header:after {
content: ‘
Australia
Inggris
USA
Canada
Singapore
Malaysia