body { font-family: 'Poppins', sans-serif; /* Padding ini penting agar konten tidak tertutup navbar sticky */ /* */ } .section-padding { padding: 100px 0; } nav { padding:50px 100px !important; height:10%; width: 100%; z-index: 1000; padding: 20px 0; background: linear-gradient(180deg, #02536B 0%, rgba(4, 162, 209, 0.00) 100%); /* */ } .header-tm nav.navbar { background: #02536B; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Style umum untuk elemen di dalam header */ .header-tm .navbar-nav .nav-link { color: white; font-weight: 500; padding: 0 15px; opacity: 0.9; transition: opacity 0.2s; } .header-tm .navbar-nav .nav-link:hover { opacity: 1; } .header-tm .navbar-brand img { max-height: 55px; } .header-tm .header-contact a { color: white; text-decoration: none; font-weight: 500; margin-left: 20px; opacity: 0.9; } .header-tm .header-contact a:hover { opacity: 1; } /* Membuat link kontak menjadi per baris di mobile */ .header-contact a { display: block; padding: 8px 0; } /* Latar belakang menu saat terbuka di mobile */ .navbar-collapse.show { background-color: rgba(2, 83, 107, 0.95); padding: 20px; border-radius: 8px; margin-top: 10px; } /* Aturan untuk layar desktop (lebar 992px ke atas) */ @media (min-width: 992px) { .navbar-brand { position: absolute; left: 50%; transform: translateX(-50%); } .header-contact a { display: inline-block; /* Kembali sejajar di desktop */ padding: 0; } } /* Aturan untuk layar tablet dan mobile (lebar di bawah 991.98px) */ @media (max-width: 991.98px) { .header-tm nav.navbar { background: #02536B; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } nav { width:100% !important; padding:10px 10px !important; } .nav-item { margin-top:20px; } .nav-item:hover { background-color:rgba(2, 83, 107, 1); } } .hero-section-tm { position: relative; padding: 100px 0; height: 60vh; background: url('/tmi_web/static/src/img/background-hero.png') no-repeat top center; background-size: cover; color: white; display: flex; align-items: center; } .hero-section-tm .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(2, 83, 107, 0.9); } .hero-section-tm .hero-content { position: relative; z-index: 2; } .hero-badge-tm { display: inline-block; padding: 15px 25px; background-color: rgb(29,118,145,0.9); border-radius: 10px; font-size: 1.4rem; font-weight: 500; margin-bottom: 1.5rem; } .hero-title-tm { font-size: 3.5rem; font-weight: 700; line-height: 1; margin-bottom: 1rem; } .hero-description-tm { font-size: 1.6rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } .container-custom { max-width: 1100px; margin: auto; padding: 0 15px; } .row-custom { display: flex; flex-wrap: wrap; gap: 20px; } .col-md-6-custom { flex: 0 0 48%; } @media (max-width: 768px) { .col-md-6-custom { flex: 0 0 100%; } } .fw-bold-custom { font-weight: bold; } .img-fluid-custom { width: 100%; height: auto; } .rounded-custom { border-radius: 8px; } .shadow-custom { box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .footer-tm { background-color:rgba(58, 137, 158, 1); color:rgb(255, 255, 255); padding: 60px 0 20px 0; } .footer-tm h5 { color: white; font-weight: 600; margin-bottom: 20px; } .footer-tm p, .footer-tm a { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; text-decoration: none; } .footer-tm a:hover { color: white; } .footer-tm .footer-links { padding-left: 0; list-style: none; } .footer-tm .footer-links li { margin-bottom: 10px; } .footer-tm .bottom-bar { border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 40px; padding-top: 20px; font-size: 0.8rem; } @media (min-width: 992px) { /* Center logo on desktop */ .navbar-tm-custom .navbar-brand { position: absolute; left: 50%; transform: translateX(-50%); } } @media (max-width: 991.98px) { /* Solid background for navbar on mobile */ .navbar-tm-custom { background: #02536B; padding: 10px 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Spacing for mobile menu items */ .navbar-collapse .nav-item { margin-top: 15px; } .navbar-collapse .nav-item:hover { background-color: rgba(255,255,255,0.1); border-radius: 4px; } /* Stack contact links on mobile */ .navbar-tm-custom .header-contact a { display: block; padding: 8px 0; margin-left: 0; } }