/* ======================================================
   RESET
   ====================================================== */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:Arial,Helvetica,sans-serif;

background:#f8fafc;

color:#1e293b;

line-height:1.6;

}

/* ======================================================
   TOP NAVIGATION
   ====================================================== */
.languageBar,
.topNav {

    padding: 15px 20px;

    text-align: right;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

}

.languageBar a,
.topNav a {

    text-decoration: none;

    color: #2563eb;

    font-weight: bold;

    margin-left: 15px;

}

.languageBar img,
.topNav img {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-right: 4px;
}

.home-link,
.nav-left-link {
    float: left;
    margin-right: 20px;
}

.coming-soon {
    cursor: default;
}

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

.hero{

text-align:center;

padding:70px 20px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#ffffff;

}

.hero img{

width:110px;

margin-bottom:20px;

}

.hero h1{

font-size:42px;

margin-bottom:15px;

}

.tagline{

font-size:24px;

margin-bottom:15px;

}

.subTagline{

font-size:18px;

margin-bottom:30px;

}

.btnHero{

display:inline-block;

padding:14px 15px;

background:#ffffff;

color:#2563eb;

text-decoration:none;

border-radius:10px;

font-weight:bold;

}

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

section{

padding:10px 20px;

}

section h2{

text-align:center;

margin-bottom:40px;

font-size:34px;

}

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

.cardContainer{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:30px;

}

.card{

background:#ffffff;

width:200px;

padding:8px;

border-radius:12px;

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

text-align:center;

}

.card h3{

margin-bottom:15px;

font-size:24px;

}

.card p{

margin-bottom:25px;

}

.card a{

display:inline-block;

padding:10px 22px;

background:#2563eb;

color:white;

text-decoration:none;

border-radius:10px;

font-weight:bold;

}

/* ======================================================
   DIGITAL SERVICES
   ====================================================== */

.services-section {

    padding: 30px 20px;

    text-align: center;

}

.services-card {

    max-width: 850px;

    margin: 0 auto;

    padding: 30px 25px;
    
     box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,0.06);

}

.services-card h2 {

    margin-top: 0;

    margin-bottom: 8px;

}

.services-intro {

    margin-top: 0;

    margin-bottom: 25px;

    color: #64748b;

}

.services-options {

    display: flex;

    justify-content: center;
    
     align-items: center;

    gap: 20px;

    flex-wrap: wrap;
    
       width: 100%;

}

.service-item {

    width: 280px;

    padding: 22px 18px;
    
    box-sizing: border-box;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
    
     text-align: center;


}

.service-icon {

    font-size: 34px;

    margin-bottom: 8px;

}

.service-item h3 {

    margin-top: 0;

    margin-bottom: 8px;

}

.service-item p {

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;

    min-height: 42px;

}

.service-button {

    display: inline-block;

    margin-top: 10px;

    padding: 10px 18px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: bold;

    background: #2563eb;

    color: #ffffff;

}

.service-button:hover {

    transform: translateY(-2px);

}

/* ======================================================
   TENTANG
   ====================================================== */

.tentang{

text-align:center;

max-width:800px;

margin:auto;

}

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

footer{

margin-top:50px;

padding:30px;

background:#1e293b;

color:white;

text-align:center;

}

footer p{

margin:8px 0;

}

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

@media(max-width:768px){

.hero h1{

font-size:32px;

}

.tagline{

font-size:20px;

}

.card{

width:100%;

max-width:330px;

}

}

/* ======================================================
   CONTACT SECTION
   ====================================================== */

.contact-section {

    padding: 35px 20px;

    text-align: center;

}

.contact-section h2 {

    margin-top: 0;

    margin-bottom: 8px;

}

.contact-intro {

    margin-top: 0;

    margin-bottom: 25px;

    color: #64748b;

}

.contact-boxes {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;

}

.contact-card {

    width: 220px;

    box-sizing: border-box;

    padding: 22px 18px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    text-decoration: none;

    color: #1e293b;

    text-align: center;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.contact-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.10);

}

.contact-icon {

    display: block;

    font-size: 32px;

    margin-bottom: 10px;

}

.contact-title {

    display: block;

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 5px;

}

.contact-text {

    display: block;

    font-size: 14px;

    color: #64748b;

}