Australia
Inggris
USA
Canada
Singapore
Malaysia
/* ============================================
GLOBAL RESET & BASE (prefix: ss-)
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ss-services-body {
font-family: ‘Segoe UI’, Roboto, ‘Helvetica Neue’, sans-serif;
background: #f4f7fc;
padding: 30px 20px;
color: #1e2a3e;
}
.ss-services-wrapper {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 32px;
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
overflow: hidden;
padding: 2rem 1.8rem;
}
/* section header */
.ss-section-header {
text-align: center;
margin-bottom: 2rem;
}
.ss-section-title {
font-size: 2.2rem;
font-weight: 800;
background: linear-gradient(135deg, #1e3c72, #2a5298);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.5px;
}
.ss-section-subtitle {
color: #4a627a;
max-width: 680px;
margin: 0.8rem auto 0;
font-size: 1.05rem;
}
/* program grid + card (all new naming) */
.ss-programs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 28px;
margin: 2rem 0 1.5rem;
}
.ss-program-card {
background: #ffffff;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 12px 24px -12px rgba(0,0,0,0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex;
flex-direction: column;
border: 1px solid #eef2f8;
}
.ss-program-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 36px -14px rgba(0, 55, 120, 0.2);
}
.ss-program-img {
width: 100%;
height: 180px;
object-fit: cover;
transition: transform 0.4s ease;
}
.ss-program-card:hover .ss-program-img {
transform: scale(1.02);
}
.ss-program-content {
padding: 1.5rem 1.4rem 1.6rem;
display: flex;
flex-direction: column;
flex: 1;
}
.ss-program-icon {
font-size: 2rem;
color: #2a6df4;
margin-bottom: 1rem;
}
.ss-program-title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #0b2b44;
line-height: 1.3;
}
.ss-program-desc {
font-size: 0.94rem;
line-height: 1.5;
color: #2c3e50;
margin-bottom: 1.5rem;
flex: 1;
}
.ss-program-btn-wrap {
margin-top: auto;
}
.ss-program-btn {
display: inline-block;
width: 100%;
padding: 12px 10px;
background: linear-gradient(98deg, #1f5fe6, #3b82f6);
color: white;
border-radius: 40px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
transition: all 0.2s;
box-shadow: 0 6px 12px -8px rgba(0, 88, 255, 0.3);
}
.ss-program-btn:hover {
background: linear-gradient(98deg, #0e4acf, #2563eb);
transform: scale(0.98);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* expand/collapse buttons */
.ss-mobile-expand, .ss-desktop-expand {
display: none;
width: 220px;
background: #f0f4fa;
border: 1px solid #cbdde9;
padding: 12px 20px;
border-radius: 60px;
font-weight: 600;
color: #1e4a76;
cursor: pointer;
margin: 20px auto 30px;
transition: all 0.2s;
font-size: 0.95rem;
text-align: center;
gap: 8px;
justify-content: center;
align-items: center;
}
.ss-mobile-expand i, .ss-desktop-expand i {
transition: transform 0.2s;
}
.ss-mobile-expand:hover, .ss-desktop-expand:hover {
background: #e6edf6;
border-color: #9bb4cc;
}
/* partners section */
.ss-partners-section {
background: #fafcff;
border-radius: 48px;
margin: 2rem 0 1.8rem;
padding: 1.5rem 0 0.8rem;
}
.ss-partners-title {
text-align: center;
font-size: 1.8rem;
font-weight: 700;
color: #1f2e45;
margin-bottom: 1.8rem;
position: relative;
display: inline-block;
width: 100%;
}
.ss-partners-title::after {
content: ”;
display: block;
width: 70px;
height: 3px;
background: #3b82f6;
margin: 10px auto 0;
border-radius: 4px;
}
.ss-partners-container {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
padding: 0 12px;
}
.ss-partners-slider {
display: flex;
width: 100%;
}
.ss-partners-track {
display: flex;
gap: 32px;
animation: ss-scrollLogos 28s linear infinite;
will-change: transform;
flex-shrink: 0;
}
.ss-partner-logo {
flex: 0 0 auto;
width: 130px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
filter: grayscale(0.3);
opacity: 0.8;
transition: all 0.2s;
background: white;
border-radius: 20px;
padding: 6px;
}
.ss-partner-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 2px 5px rgba(0,0,0,0.02));
}
.ss-partner-logo:hover {
filter: grayscale(0);
opacity: 1;
transform: scale(1.02);
}
@keyframes ss-scrollLogos {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-100% – 32px)); }
}
/* astronaut map image */
.ss-astronaut-map-img {
width: 100%;
max-width: 800px;
display: block;
margin: 1rem auto;
border-radius: 24px;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.ss-starship-btn {
background: #2a6df4;
color: white;
padding: 10px 26px;
border-radius: 40px;
text-decoration: none;
display: inline-block;
font-weight: 600;
transition: 0.2s;
}
.ss-starship-btn:hover {
background: #1b4fbb;
transform: translateY(-2px);
}
/* astronauts accordion (starship team) new naming */
.ss-astro-accordion-wrap {
background: transparent;
margin: 2rem 0 1rem;
}
.ss-astro-expand-btn {
background: white;
color:#2a6df4;
border: 1px solid #cbdde9;
padding: 10px 24px;
border-radius: 40px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
margin: 20px auto;
display: flex;
align-items: center;
gap: 8px;
transition: 0.2s;
}
.ss-astro-expand-btn:hover {
background: #eef3fc;
}
.ss-astro-accordion {
background: white;
color:#2a6df4;
border-radius: 60px;
padding: 14px 22px;
width: 100%;
text-align: left;
font-weight: 600;
font-size: 1.1rem;
border: 1px solid #e2edf7;
margin-bottom: 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.ss-astro-accordion:hover {
background: #f8fdff;
border-color: #9bb7d4;
}
.ss-astro-accordion::after {
content: ‘+’;
font-size: 1.4rem;
font-weight: 400;
transition: transform 0.2s;
}
.ss-astro-accordion–active::after {
content: ”;
}
.ss-astro-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease-out;
background: #ffffff;
border-radius: 28px;
margin-bottom: 24px;
}
.ss-astro-team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 24px;
padding: 20px 12px 12px;
}
.ss-astro-card {
background: #ffffff;
border-radius: 28px;
padding: 1.4rem 0.8rem 1.2rem;
text-align: center;
box-shadow: 0 6px 14px rgba(0,0,0,0.02);
border: 1px solid #eef3fc;
transition: 0.2s;
}
.ss-astro-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 12px;
border: 4px solid #eef3ff;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.ss-astro-name {
font-weight: 700;
margin: 8px 0 4px;
font-size: 1.1rem;
}
.ss-astro-role {
color: #2a6df4;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 12px;
}
.ss-astro-social {
display: flex;
justify-content: center;
gap: 16px;
}
.ss-astro-social-link {
color: #4b6a8b;
font-size: 1.2rem;
transition: 0.2s;
}
.ss-astro-social-link:hover {
color: #1f5fe6;
transform: translateY(-2px);
}
.ss-astro-hidden {
display: none;
}
.ss-text-center {
text-align: center;
}
.ss-mt-2 {
margin-top: 1rem;
}
/* ============================================
FORCED STYLES FOR ss-astro-avatar – Independent from global CSS
============================================ */
/* Super specific selector with !important to override any external styles */
.ss-astro-accordion-wrap .ss-astro-card .ss-astro-avatar,
div.ss-astro-accordion-wrap div.ss-astro-card img.ss-astro-avatar,
#ssAstronautsContainer .ss-astro-card .ss-astro-avatar {
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
margin: 0 auto 12px auto !important;
border: 3px solid #eef3ff !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
padding: 0 !important;
background: white !important;
flex-shrink: 0 !important;
}
/* Alternative: jika masih ada pengaruh dari CSS global, gunakan ini */
.ss-astro-avatar {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
object-fit: cover !important;
}
.ss-astro-card {
background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%) !important;
border-radius: 20px !important;
padding: 1.5rem 0.8rem 1.2rem !important;
text-align: center !important;
box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.15), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.9) !important;
transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
cursor: pointer !important;
}
.ss-astro-card:hover {
transform: translateY(-6px) scale(1.01) !important;
box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.2), 0 5px 10px -5px rgba(0, 0, 0, 0.08) !important;
background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%) !important;
}
.ss-astro-card:active {
transform: translateY(2px) scale(0.99) !important;
transition-duration: 0.1s !important;
}
.ss-astro-card:hover .ss-astro-avatar {
transform: scale(1.03) !important;
transition: transform 0.3s ease !important;
}
.ss-astro-card:hover .ss-astro-name {
color: #2563eb !important;
transition: color 0.2s ease !important;
}
/* responsive */
@media (max-width: 700px) {
.ss-services-wrapper {
padding: 1.2rem;
}
.ss-section-title {
font-size: 1.8rem;
}
.ss-programs-grid {
gap: 18px;
}
.ss-partner-logo {
width: 100px;
height: 55px;
}
.ss-program-img {
height: 150px;
}
}
@media (min-width: 768px) {
.ss-desktop-expand {
display: flex;
}
.ss-programs-grid:not(.ss-expanded) .ss-program-card:nth-child(n+4) {
display: none;
}
.ss-programs-grid.ss-expanded .ss-program-card {
display: flex;
}
}
@media (max-width: 767px) {
.ss-mobile-expand {
display: flex;
}
.ss-desktop-expand {
display: none !important;
}
.ss-programs-grid .ss-program-card {
display: none;
}
.ss-programs-grid .ss-program-card:first-child {
display: flex;
}
.ss-programs-grid.ss-expanded .ss-program-card {
display: flex;
}
}
Our Services
Our experienced team is dedicated to guiding you through every step of your journey to study abroad. From initial consultation to post-graduation immigration support, we cover it all. Our comprehensive services from A to Z here to make your international study experience as smooth and successful as possible, so you can focus on achieving your academic and career aspirations.
Our Comprehensive Programs
Discover the perfect pathway to your international education journey with our specialized programs
University Abroad Success Academy (UASA)
Personalized guidance from experienced mentors for standout applications to top global universities.
Stellar Language Navigator (SLN)
Master IELTS, TOEFL or local languages to thrive academically and socially abroad.
Nurturing Achievers Scholarship Academy (NASA)
Expert guidance to secure prestigious scholarships at top universities worldwide.
Starship Orbit Translations (SOT)
Certified translation of academic documents for international applications.
Orion Career & Talent Assessment (OCTA)
Discover your strengths and ideal career path with detailed assessment.
Starship Visa Navigator (SVN)
Expert guidance through the international student visa application process.
Galactic Shield Program (GSP)
Comprehensive health insurance and emergency support for students abroad.
Starship Work Abroad Prep (SWAP)
Tools and guidance for international career opportunities and working holidays.
Cosmic Arrival Support (CAS)
Airport pickup, accommodation and orientation for smooth transition abroad.
At Starship Education, we believe in the power of collaboration and shared growth. We are excited to extend an open invitation to partner with us in our mission to provide Indonesian students with access to world-class international education. Together, we can create a brighter future, breaking barriers and opening doors to global opportunities.
Our Partners
Our Astronauts
At Starship Education, we refer to our education counselors as “Astronauts,” and we designate our centers as “Satellites.” Our Astronauts, spread across Indonesia, are ready to assist you in preparing for studying and working abroad. Choose the nearest Satellite in your city.
(function() {
// ———- PROGRAMS EXPAND/COLLAPSE (new class ss-programs-grid, ss-expanded) ———-
const programsGrid = document.getElementById(‘ssProgramsGrid’);
const mobileBtn = document.getElementById(‘ssMobileExpandBtn’);
const desktopBtn = document.getElementById(‘ssDesktopExpandBtn’);
function togglePrograms(btnElement) {
if (!programsGrid) return;
const isExpanded = programsGrid.classList.contains(‘ss-expanded’);
if (isExpanded) {
programsGrid.classList.remove(‘ss-expanded’);
if (btnElement) btnElement.innerHTML = ‘View All Programs ‘;
} else {
programsGrid.classList.add(‘ss-expanded’);
if (btnElement) btnElement.innerHTML = ‘Collapse Programs ‘;
}
}
if (mobileBtn) mobileBtn.addEventListener(‘click’, () => togglePrograms(mobileBtn));
if (desktopBtn) desktopBtn.addEventListener(‘click’, () => togglePrograms(desktopBtn));
// ———- PARTNERS LOGO SLIDER (infinite loop) ———-
const partnerImgList = [
“http://tiny.cc/SS-topenglish2”, “http://tiny.cc/SS-vooya2”, “http://tiny.cc/ss-hypernova”,
“http://tiny.cc/ss-psikologie”, “http://tiny.cc/SS-SPUN”, “http://tiny.cc/ss-britishcouncil”,
“http://tiny.cc/ss-qstopuniversities”, “http://tiny.cc/ss-adventus”, “http://tiny.cc/SS-GSP”, “http://tiny.cc/SS-MSM”
];
const partnerNamesAlt = [“Top English Jogjakarta”, “Vooya”, “Hypernova Education”, “Psikologie”, “SPUN Global”,
“British Council”, “QS Top Universities”, “Adventus”, “Global Study Partner”, “MSM”];
const trackDiv = document.getElementById(‘ssPartnersTrack’);
if (trackDiv) {
let logosHtml = ”;
for (let cycle = 0; cycle < 2; cycle++) {
for (let i = 0; i < partnerImgList.length; i++) {
logosHtml += `
`;
}
}
trackDiv.innerHTML = logosHtml;
}
// ———- ASTRONAUTS (FETCH JSON + ACCORDION with new CSS classes) ———-
const astroContainer = document.getElementById(‘ssAstronautsContainer’);
const expandAllBtn = document.getElementById(‘ssExpandAllBtn’);
const astronautsJsonUrl = ‘https://raw.githubusercontent.com/starshipedu/Table/refs/heads/main/Atsronaut_team.json’;
async function loadAstronautData() {
if (!astroContainer) return;
try {
const response = await fetch(astronautsJsonUrl);
if (!response.ok) throw new Error(‘Network error’);
const data = await response.json();
if (!data.locations || !Array.isArray(data.locations)) throw new Error(‘Invalid JSON’);
let locationCounter = 0;
data.locations.forEach(location => {
if (!location.name || !location.members || !location.members.length) return;
const accordionBtn = document.createElement(‘button’);
accordionBtn.className = ‘ss-astro-accordion’;
accordionBtn.innerHTML = ` ${location.name}`;
const panelDiv = document.createElement(‘div’);
panelDiv.className = ‘ss-astro-panel’;
const teamGridDiv = document.createElement(‘div’);
teamGridDiv.className = ‘ss-astro-team-grid’;
location.members.forEach(member => {
const avatarImg = (member.image && member.image.startsWith(‘http’)) ? member.image : ‘https://via.placeholder.com/100?text=Avatar’;
const cardDiv = document.createElement(‘div’);
cardDiv.className = ‘ss-astro-card’;
cardDiv.innerHTML = `
${member.name || ‘Counselor’}
${member.role || ‘Education Astronaut’}
`;
teamGridDiv.appendChild(cardDiv);
});
panelDiv.appendChild(teamGridDiv);
astroContainer.appendChild(accordionBtn);
astroContainer.appendChild(panelDiv);
accordionBtn.addEventListener(‘click’, () => {
accordionBtn.classList.toggle(‘ss-astro-accordion–active’);
if (panelDiv.style.maxHeight) panelDiv.style.maxHeight = null;
else panelDiv.style.maxHeight = panelDiv.scrollHeight + ‘px’;
});
// hide if index >= 7 (first 7 visible)
if (locationCounter >= 7) {
accordionBtn.classList.add(‘ss-astro-hidden’);
panelDiv.classList.add(‘ss-astro-hidden’);
}
locationCounter++;
});
if (expandAllBtn) {
expandAllBtn.addEventListener(‘click’, () => {
const hiddenElements = document.querySelectorAll(‘.ss-astro-hidden’);
hiddenElements.forEach(el => el.classList.remove(‘ss-astro-hidden’));
expandAllBtn.style.display = ‘none’;
});
}
} catch (err) {
console.error(err);
if (astroContainer) astroContainer.innerHTML = `
`;
}
}
loadAstronautData();
})();
