/*
Theme Name: Knight
Theme URL: https://bootstrapmade.com/knight-free-bootstrap-theme/
Author: BootstrapMade
Author URL: https://bootstrapmade.com
*/
/* CSS Document */
/* Float Elements
---------------------------------*/
.fl-lt {float:left;}
.fl-rt {float:right;}
/* Clear Floated Elements
---------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure{ margin:0px;}
img{ max-width:100%;}
a, a:hover, a:active{ outline:0px !important}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/
body {
background:#fff;
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size:1rem;
font-weight:normal;
color:#888888;
margin:0;
}
h2{
font-size:34px;
color:#222222;
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-weight:700;
letter-spacing: -1px;
margin:0 0 15px 0;
text-align:center;
color:rgb(25, 163, 13);
}
h3{
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
color:#222222;
font-size:16px;
margin:0 0 5px 0;
text-transform:uppercase;
font-weight:400;
}
h6{
font-size:16px;
color:#888888;
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight:400;
margin:0 0 60px 0;
text-align: justify;
letter-spacing: 1px;
}
p{
line-height:24px;
margin:0;
}
/* Header Styles
---------------------------------*/
.header{
text-align:center;
background: linear-gradient(135deg, rgba(106, 255, 93, 0.4) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.95) 100%);
padding:280px 0;
width: 100%;
background-size: cover;
background-position: center;
position: relative;
}
.bg-rotate {
position: absolute;
right: 0;
bottom: 0;
width: auto;
animation: spin 20s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.logo{
width:130px;
margin:0 auto 35px;
}
.header h1{
font-family: 'Montserrat',sans-serif;
font-size:100px;
font-weight:400;
letter-spacing: -1px;
margin:0 0 22px 0 ;
color:rgb(25, 163, 13);
text-shadow:
2px 2px 0 #000,
4px 4px 8px rgba(0, 0, 0, 0.6);
}
.we-create{
padding:0;
margin:35px 0 55px;
}
.wp-pic{
margin-bottom:20px;
}
.we-create li{
display:inline-block;
font-family: 'Montserrat',sans-serif;
font-size:14px;
color:rgb(31, 31, 31);
text-transform: uppercase;
font-weight: 400;
margin:0 5px 0 0;
padding:0 0 0 15px;
}
.we-create li:first-child{
background:none;
}
.start-button {
padding-left: 0px;
}
.start-button li a{
color: #fff;
}
.link{
padding:15px 35px;
background:#7cc576;
color:#fff !important;
font-size:16px;
font-weight:400;
font-family: 'Montserrat', sans-serif;
display:inline-block;
border-radius:3px;
text-transform:uppercase;
line-height:25px;
margin-bottom:20px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.link:hover {
text-decoration:none;
color:rgb(0, 97, 0) !important;
background:#fff;
}
.link:active, .link:focus {
background: #7cc576;
text-decoration:none;
color:#fff !important;
}
/* Navigation
---------------------------------*/
.main-nav-outer{
padding: 0;
box-shadow: 0 8px 32px rgba(0, 97, 0, 0.15);
position: relative;
background: linear-gradient(135deg, #006100 0%, #004d00 50%, #003300 100%);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.main-nav{
text-align: center;
margin: 2px 0;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.main-nav li{
margin: 0 0px;
display: inline-flex;
}
.main-nav li a {
display: inline-block;
color: #ffffff;
text-transform: capitalize;
font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 500;
font-size: 12px;
text-decoration: none;
line-height: 14px;
margin: 4px 8px;
padding: 3px 8px;
border-radius: 15px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
white-space: nowrap;
}
.main-nav li a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.main-nav li a:hover::before {
left: 100%;
}
.main-nav li a:hover{
text-decoration: none;
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
}
.small-logo{
padding: 0 10px;
order: 0;
}
.small-logo img {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
transition: transform 0.3s ease;
}
.small-logo img:hover {
transform: scale(1.05);
}
/* Active state for navigation */
.main-nav li a.active {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
font-weight: 600;
}
/* Responsive Navigation */
@media (max-width: 992px) {
.main-nav {
margin: 8px 0 4px;
flex-direction: row;
}
.main-nav li a {
margin: 10px 18px;
font-size: 14px;
padding: 6px 12px;
}
.small-logo {
padding: 0 20px;
}
}
@media (max-width: 768px) {
.main-nav {
flex-direction: column;
margin: 8px 0;
}
.main-nav li {
margin: 2px 0;
}
.main-nav li a {
margin: 4px 16px;
font-size: 14px;
padding: 8px 20px;
}
.small-logo {
order: -1;
padding: 8px 0;
margin-bottom: 8px;
}
.small-logo img {
width: 80px;
height: 40px;
}
}
/* Smooth scroll untuk seluruh halaman */
html {
scroll-behavior: smooth;
scroll-padding-top: 10px;
/* Zoom konten seperti browser zoom 80% */
font-size: 80%;
}
body {
/* Reset font-size untuk menjaga proporsi */
font-size: 14px;
}
/* Navigasi Sticky Enhancement */
.main-nav-outer.scroll-fixed {
background: linear-gradient(135deg, rgba(0, 97, 0, 0.95) 0%, rgba(0, 77, 0, 0.95) 50%, rgba(0, 51, 0, 0.95) 100%);
backdrop-filter: blur(15px);
box-shadow: 0 12px 40px rgba(0, 97, 0, 0.2);
}
/* Loading animation untuk navigasi */
.main-nav-outer {
animation: slideDown 0.5s ease-out;
}
/* Scroll margin untuk semua section agar tidak tertutup navigasi */
section[id],
.header[id] {
scroll-margin-top: 20px;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Mobile Navigation Header */
.mobile-nav-header {
display: none;
justify-content: flex-start;
align-items: center;
padding: 12px 20px;
width: 100%;
background: transparent;
box-shadow: none;
position: relative;
}
.mobile-logo {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.mobile-logo img {
height: 40px;
width: auto;
}
/* Toggle button pojok kanan */
.res-nav_click {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: #006100;
color: #fff;
padding: 8px 12px;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
font-size: 18px;
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
display: flex;
z-index: 1001;
}
.res-nav_click:hover {
background: #004d00;
transform: translateY(-50%) scale(1.05);
}
.mobile-logo {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.mobile-logo img {
height: 40px;
width: auto;
}
/* Perbaikan untuk mobile hamburger menu */
.res-nav_click {
display: none;
background: #006100;
color: #fff;
padding: 8px 12px;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
font-size: 18px;
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
}
.res-nav_click:hover {
background: #004d00;
transform: scale(1.05);
}
.main-section{
padding:40px 0 50px;
}
/* Modern About Section
---------------------------------*/
.modern-about-section {
padding: 60px 0;
position: relative;
overflow: hidden;
}
.modern-about-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Header Styles */
.about-header {
margin-bottom: 80px;
}
.section-badge {
display: inline-block;
background: linear-gradient(135deg, #006100, #004d00);
color: white;
padding: 8px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.section-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.6s;
}
.section-badge:hover::before {
left: 100%;
}
.section-title {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #1e293b, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 24px;
font-family: 'Inter', sans-serif;
}
.section-subtitle {
font-size: 1.25rem;
color: #64748b;
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
font-weight: 400;
}
/* Features Container */
.features-container {
padding: 0;
}
.feature-card {
background: white;
border-radius: 20px;
padding: 32px;
margin-bottom: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(226, 232, 240, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.05), rgba(0, 77, 0, 0.05));
transition: left 0.6s ease;
}
.feature-card:hover::before {
left: 0;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 97, 0, 0.15);
border-color: rgba(0, 97, 0, 0.2);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.feature-icon img {
width: 40px;
height: 40px;
filter: brightness(0) invert(1);
}
.feature-content {
flex: 1;
position: relative;
z-index: 2;
}
.feature-title {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
font-family: 'Inter', sans-serif;
}
.feature-description {
color: #64748b;
line-height: 1.6;
margin: 0;
font-size: 1rem;
}
.feature-number {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 97, 0, 0.1);
color: #006100;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
/* Hero Image Section */
.hero-image-container {
position: relative;
padding: 40px;
}
.image-wrapper {
position: relative;
overflow: hidden;
}
.hero-image {
width: 100%;
height: 500px;
object-fit: cover;
transition: transform 0.6s ease;
}
.image-wrapper:hover .hero-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 30px 30px;
}
.stats-card {
display: flex;
gap: 30px;
}
.stat-item {
color: white;
text-align: center;
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 800;
color: #00ff88;
margin-bottom: 4px;
}
.stat-label {
font-size: 14px;
opacity: 0.9;
}
/* Floating Cards */
.floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.floating-card {
position: absolute;
background: white;
padding: 16px 20px;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
font-size: 14px;
color: #1e293b;
animation: float 3s ease-in-out infinite;
}
.floating-card-1 {
top: 20%;
left: -20px;
animation-delay: 0s;
}
.floating-card-2 {
bottom: 30%;
right: -20px;
animation-delay: 1.5s;
}
.floating-card i {
font-size: 18px;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Responsive Design */
@media (max-width: 992px) {
.modern-about-section {
padding: 80px 0;
}
.section-title {
font-size: 2.8rem;
}
.hero-image-container {
margin-top: 60px;
padding: 20px;
}
.feature-card {
padding: 24px;
}
}
@media (max-width: 768px) {
.modern-about-section {
padding: 60px 0;
}
.section-title {
font-size: 2.2rem;
}
.section-subtitle {
font-size: 1.1rem;
}
.feature-card {
flex-direction: column;
text-align: center;
padding: 32px 20px;
}
.feature-icon {
margin-right: 0;
margin-bottom: 20px;
}
.hero-image {
height: 300px;
}
.stats-card {
justify-content: center;
}
.floating-card {
display: none;
}
}
/* Services
---------------------------------*/
.service-list{
padding:0 0 0 0;
font-size:14px;
margin-bottom:40px;
}
.service-list-col1{
float:left;
width:60px;
height: 60px;
margin-right: 15px;
}
.service-list-col1 i{
font-style:normal;
font-size:38px;
display:block;
color:#222;
font-family: 'FontAwesome';
line-height:38px;
}
.service-list-col2{
overflow:hidden;
}
.service-list-col2 h3{
overflow:hidden;
color:rgb(25, 163, 13);
display: block;
}
/* Modern Support Section
---------------------------------*/
.modern-support-section {
padding: 60px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.modern-support-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(0, 97, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 97, 0, 0.1) 0%, transparent 50%);
pointer-events: none;
}
/* Header Styles */
.support-header {
margin-bottom: 80px;
}
.support-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #006100, #004d00);
color: white;
padding: 12px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 97, 0, 0.3);
}
.support-badge i {
font-size: 16px;
}
.support-title {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #1e293b, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 24px;
font-family: 'Inter', sans-serif;
}
.support-subtitle {
font-size: 1.25rem;
color: #64748b;
line-height: 1.7;
max-width: 700px;
margin: 0 auto;
font-weight: 400;
}
/* Visual Container */
.support-visual-container {
position: relative;
padding: 40px 20px;
}
.main-image-wrapper {
position: relative;
text-align: center;
margin-bottom: 40px;
}
.support-main-image {
max-width: 100%;
height: auto;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
transition: transform 0.3s ease;
}
.support-main-image:hover {
transform: scale(1.05);
}
.floating-badge {
position: absolute;
background: white;
padding: 12px 16px;
border-radius: 50px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 14px;
color: #1e293b;
animation: float 3s ease-in-out infinite;
}
.badge-24-7 {
top: 20%;
right: -10px;
color: #dc2626;
}
.badge-expert {
bottom: 20%;
left: -10px;
color: #0ea5e9;
animation-delay: 1.5s;
}
.floating-badge i {
font-size: 16px;
}
/* Support Stats */
.support-stats {
display: flex;
gap: 20px;
justify-content: center;
}
.stat-box {
background: white;
padding: 20px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 12px;
transition: transform 0.3s ease;
}
.stat-box:hover {
transform: translateY(-5px);
}
.stat-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.stat-content {
display: flex;
flex-direction: column;
}
.stat-number {
font-size: 1.5rem;
font-weight: 800;
color: #1e293b;
line-height: 1;
}
.stat-label {
font-size: 12px;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Service Cards */
.support-services-container {
padding-left: 40px;
}
/* Service Slider Styles */
.service-slider {
position: relative;
overflow: hidden;
border-radius: 24px;
margin-bottom: 30px;
min-height: 400px;
}
.slide-item {
display: none;
width: 100%;
animation: slideIn 0.6s ease-in-out;
}
.slide-item.active {
display: block;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Large Service Card */
.modern-service-card-large {
transition: all 0.3s ease;
}
.service-card-inner-large {
background: white;
border-radius: 24px;
padding: 40px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(226, 232, 240, 0.8);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 380px;
}
.service-card-inner-large::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #006100, #004d00);
}
.service-card-inner-large:hover {
transform: translateY(-5px);
box-shadow: 0 25px 70px rgba(0, 97, 0, 0.15);
}
/* Service Header */
.service-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}
.service-icon-wrapper-large {
display: flex;
align-items: center;
gap: 12px;
}
.service-icon-bg-large {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 8px 25px rgba(0, 97, 0, 0.3);
}
.service-icon-large {
width: 45px;
height: 45px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.service-number-large {
background: rgba(0, 97, 0, 0.1);
color: #006100;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 16px;
border: 2px solid rgba(0, 97, 0, 0.2);
}
.service-meta {
flex: 1;
}
.service-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.1), rgba(0, 77, 0, 0.05));
color: #006100;
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.service-title-large {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin: 0;
font-family: 'Inter', sans-serif;
line-height: 1.3;
}
/* Service Content */
.service-content-large {
position: relative;
}
.service-description-large {
color: #64748b;
line-height: 1.7;
margin-bottom: 25px;
font-size: 1.1rem;
}
/* Service Features Grid */
.service-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 25px;
}
.feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(248, 250, 252, 0.8);
border-radius: 12px;
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(0, 97, 0, 0.05);
transform: translateY(-2px);
}
.feature-item .feature-icon {
width: 35px;
height: 35px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
.feature-item span {
font-weight: 500;
color: #374151;
font-size: 14px;
}
/* Service Footer */
.service-footer-large {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(226, 232, 240, 0.5);
}
.service-footer-text {
display: flex;
align-items: center;
gap: 8px;
color: #64748b;
font-size: 14px;
font-style: italic;
}
.service-footer-text i {
color: #006100;
font-size: 16px;
}
/* Progress Indicator */
.service-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(226, 232, 240, 0.3);
border-radius: 0 0 24px 24px;
}
.progress-bar {
height: 100%;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 0 0 24px 0;
transition: width 0.3s ease;
}
/* Slider Navigation */
.slider-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.slider-btn {
background: white;
border: 2px solid rgba(0, 97, 0, 0.2);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #006100;
font-size: 16px;
}
.slider-btn:hover {
background: linear-gradient(135deg, #006100, #004d00);
color: white;
border-color: transparent;
transform: scale(1.1);
}
.slider-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: scale(1);
background: #f1f5f9;
color: #94a3b8;
border-color: #e2e8f0;
}
.slider-dots {
display: flex;
gap: 8px;
align-items: center;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(0, 97, 0, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: linear-gradient(135deg, #006100, #004d00);
transform: scale(1.3);
}
.dot:hover {
background: rgba(0, 97, 0, 0.6);
transform: scale(1.1);
}
/* Old styles - keep for compatibility */
.modern-service-card {
margin-bottom: 24px;
transition: all 0.3s ease;
}
.service-card-inner {
background: white;
border-radius: 20px;
padding: 32px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(226, 232, 240, 0.8);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card-inner::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.05), rgba(0, 77, 0, 0.05));
transition: left 0.6s ease;
}
.modern-service-card:hover .service-card-inner::before {
left: 0;
}
.modern-service-card:hover .service-card-inner {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 97, 0, 0.15);
border-color: rgba(0, 97, 0, 0.2);
}
.service-icon-wrapper {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.service-icon-bg {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.service-icon {
width: 40px;
height: 40px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.service-number {
background: rgba(0, 97, 0, 0.1);
color: #006100;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.service-content {
position: relative;
z-index: 2;
}
.service-title {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
font-family: 'Inter', sans-serif;
}
.service-description {
color: #64748b;
line-height: 1.6;
margin-bottom: 16px;
font-size: 1rem;
}
.service-features {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.feature-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0, 97, 0, 0.1);
color: #006100;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.feature-tag i {
font-size: 10px;
}
.service-hover-overlay {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}
.modern-service-card:hover .service-hover-overlay {
opacity: 1;
transform: scale(1);
}
/* CTA Section */
.support-cta {
margin-top: 40px;
text-align: center;
}
.modern-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #006100, #004d00);
color: white;
padding: 16px 32px;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
box-shadow: 0 8px 30px rgba(0, 97, 0, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.modern-cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s;
}
.modern-cta-button:hover::before {
left: 100%;
}
.modern-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 97, 0, 0.4);
color: white;
text-decoration: none;
}
.cta-icon {
transition: transform 0.3s ease;
}
.modern-cta-button:hover .cta-icon {
transform: translateX(4px);
}
.cta-note {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #64748b;
font-size: 14px;
}
.cta-note i {
color: #006100;
}
/* Background Elements */
.support-bg-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
}
.bg-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.1), rgba(0, 77, 0, 0.05));
}
.circle-1 {
width: 300px;
height: 300px;
top: 10%;
right: -150px;
animation: float 6s ease-in-out infinite;
}
.circle-2 {
width: 200px;
height: 200px;
bottom: 10%;
left: -100px;
animation: float 6s ease-in-out infinite reverse;
}
.bg-pattern {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* Responsive Design */
@media (max-width: 992px) {
.modern-support-section {
padding: 80px 0;
}
.support-title {
font-size: 2.8rem;
}
.support-services-container {
padding-left: 0;
margin-top: 60px;
}
.support-stats {
flex-direction: column;
align-items: center;
}
.service-card-inner-large {
padding: 30px;
min-height: 350px;
}
.service-features-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 768px) {
.modern-support-section {
padding: 60px 0;
}
.support-title {
font-size: 2.2rem;
}
.support-subtitle {
font-size: 1.1rem;
}
.service-card-inner {
padding: 24px;
}
.service-card-inner-large {
padding: 24px;
min-height: 320px;
}
.service-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.service-icon-bg-large {
width: 70px;
height: 70px;
}
.service-icon-large {
width: 35px;
height: 35px;
}
.service-title-large {
font-size: 1.5rem;
}
.service-features-grid {
grid-template-columns: 1fr;
}
.slider-navigation {
gap: 15px;
}
.slider-btn {
width: 45px;
height: 45px;
font-size: 14px;
}
.floating-badge {
display: none;
}
.service-features {
justify-content: center;
}
.bg-circle {
display: none;
}
}
/* --------------------------
*/
.Learn-More{
display:inline-block;
padding:0 5px 0 0;
color:#7cc576;
font-size:16px;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
font-weight:400;
line-height:24px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
display: none;
}
.Learn-More i{
padding-right:15px;
}
.Learn-More:hover, .Learn-More:focus{
text-decoration:none;
color: #111;
}
/* Produk
---------------------------------*/
.Portfolio-nav{
padding:0;
margin:0 0 45px 0;
list-style:none;
text-align:center;
}
.Portfolio-nav li{
margin:0 10px;
display:inline;
background:rgba(0, 102, 0);
}
.Portfolio-nav li a{
display:inline-block;
padding:10px 22px;
font-size:12px;
line-height:20px;
color:#222222;
border-radius:4px;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
background:#f7f7f7;
margin-bottom:5px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.Portfolio-nav li a:hover{
background:rgba(0, 102, 0);
color:#fff;
text-decoration:none;
}
.portfolioContainer{
margin:0 auto;
padding: 5px;
}
.itsolution-box{
text-align:center;
margin-bottom:30px;
height: auto;
width:100%;
overflow:hidden;
float:left;
padding:0;
background: linear-gradient(135deg, rgb(25, 163, 13), rgb(0, 102, 0));
border-radius: 10px;
}
.Portfolio-box{
text-align:center;
margin-bottom:30px;
height: auto;
width:350px;
padding: 10px;
overflow:hidden;
float:left;
padding:0;
background: linear-gradient(135deg, rgb(25, 163, 13), rgb(0, 102, 0));
border-radius: 10px;
box-shadow: 0 15px 15px rgba(0, 102, 0, 0.6);
}
.namepaket{
text-align:center;
color:#ffffff;
}
.namepaket p{
text-align:center;
margin: 10px;
font-size:24px;
line-height:26px;
font-weight:600;
color:#ffffff;
}
.hargapaket{
text-align:center;
margin: 10px;
color:#ffffff;
}
.totbandwidth {
width: auto;
height: auto;
background-color: #7cc576;
}
.ketentuan {
width: auto;
height: auto;
background-color: #ffffff;
padding: 5px;
text-align: left;
margin: auto;
}
.ketentuan p{
width: auto;
height: auto;
background-color: #ffffff;
padding: 5px;
text-align: left;
margin-left: 10px;
}
.buttonlangganan {
width: 100%;
display: flex;
justify-content: flex-end;
padding: 5px;
background: white;
}
.buttonlangganan button {
background: linear-gradient(135deg, rgb(25, 163, 13), rgb(0, 102, 0));
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
}
.buttonlangganan button:hover {
background: linear-gradient(135deg, rgb(20, 130, 10), rgb(0, 80, 0));
}
.Portfolio-box img{
margin-bottom:25px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.Portfolio-box img:hover {
opacity: 0.6;
}
.Portfolio-nav li a.current{
background:rgba(0, 102, 0);
color:#fff;
text-decoration:none;
box-shadow: 0 8px 12px rgba(0, 102, 0, 0.4);
border-radius: 6px;
}
img {
max-width:100%;
}
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/* Modern Products Section
---------------------------------*/
.modern-products-section {
background: linear-gradient(135deg, #006100 0%, #004d00 50%, #003300 100%);
position: relative;
overflow: hidden;
min-height: 100vh;
color: white;
}
.modern-products-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 30%);
pointer-events: none;
}
.modern-products-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(45deg, transparent 49%, rgba(255, 255, 255, 0.03) 50%, transparent 51%),
linear-gradient(-45deg, transparent 49%, rgba(255, 255, 255, 0.03) 50%, transparent 51%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
pointer-events: none;
opacity: 0.4;
}
/* Products Header */
.products-header {
padding: 60px 0 40px;
position: relative;
z-index: 2;
}
.products-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
color: white;
padding: 12px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.products-badge i {
font-size: 16px;
}
.products-title {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #ffffff, #e8f5e8, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 24px;
font-family: 'Inter', sans-serif;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.products-subtitle {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
max-width: 700px;
margin: 0 auto;
font-weight: 400;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Filter Section */
.filter-section {
padding: 0 0 60px;
position: relative;
z-index: 2;
}
.filter-tabs {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
background: rgba(255, 255, 255, 0.15);
padding: 8px;
border-radius: 60px;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 800px;
margin: 0 auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.filter-btn {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
color: rgba(255, 255, 255, 0.9);
border: none;
padding: 12px 24px;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.filter-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.filter-btn.active {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
color: white;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.filter-icon {
font-size: 16px;
}
/* Products Grid */
.products-grid-section {
padding: 0 0 120px;
position: relative;
z-index: 2;
}
.products-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
/* Product Cards */
.product-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
backdrop-filter: blur(20px);
}
.product-card:hover {
transform: translateY(-12px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.product-card-inner {
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
/* Product Header */
.product-header {
padding: 24px 24px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.product-category {
display: flex;
align-items: center;
gap: 8px;
background: rgba(0, 97, 0, 0.1);
color: #006100;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.product-badge {
padding: 6px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-badge.popular {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
}
.product-badge.recommended {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}
.product-badge:not(.popular):not(.recommended) {
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: white;
}
/* Product Image (for IT Solutions) */
.product-image {
position: relative;
margin: 20px 24px;
border-radius: 16px;
overflow: hidden;
height: 200px;
}
.product-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.8), rgba(0, 77, 0, 0.8));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-image:hover .product-overlay {
opacity: 1;
}
.product-image:hover .product-img {
transform: scale(1.1);
}
.overlay-content {
display: flex;
align-items: center;
gap: 8px;
color: white;
font-weight: 600;
}
/* Product Pricing */
.product-pricing {
padding: 20px 24px;
text-align: center;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.05), rgba(0, 77, 0, 0.02));
border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}
.price-main {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
margin-bottom: 8px;
}
.currency {
font-size: 1.2rem;
font-weight: 600;
color: #64748b;
}
.amount {
font-size: 2.5rem;
font-weight: 800;
color: #1e293b;
font-family: 'Inter', sans-serif;
}
.price-period {
color: #64748b;
font-size: 14px;
font-weight: 500;
}
/* Product Content */
.product-content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
color: #1e293b;
}
.product-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 16px;
font-family: 'Inter', sans-serif;
color: #1e293b;
}
.product-description {
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
font-size: 15px;
}
/* Bandwidth Highlight */
.bandwidth-highlight {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.1), rgba(0, 77, 0, 0.05));
padding: 16px 20px;
border-radius: 16px;
margin-bottom: 20px;
border: 1px solid rgba(0, 97, 0, 0.2);
}
.bandwidth-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.bandwidth-text {
flex: 1;
}
.bandwidth-label {
display: block;
font-size: 12px;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.bandwidth-value {
display: block;
font-size: 1.8rem;
font-weight: 800;
color: #006100;
font-family: 'Inter', sans-serif;
}
/* Product Features */
.product-features {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.feature-highlight {
display: flex;
align-items: center;
gap: 6px;
background: rgba(16, 185, 129, 0.1);
color: #10b981;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.product-features-list {
margin-bottom: 24px;
}
.feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(226, 232, 240, 0.5);
color: #374151;
}
.feature-item:last-child {
border-bottom: none;
}
.feature-item i {
width: 20px;
color: #10b981;
font-size: 16px;
}
.feature-item span {
font-size: 14px;
font-weight: 500;
}
/* Product CTA */
.product-cta {
margin-top: auto;
}
.product-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 24px;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.product-btn.primary {
background: linear-gradient(135deg, #006100, #004d00);
color: white;
box-shadow: 0 8px 25px rgba(0, 97, 0, 0.3);
}
.product-btn.primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s;
}
.product-btn.primary:hover::before {
left: 100%;
}
.product-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 97, 0, 0.4);
color: white;
text-decoration: none;
}
/* Background Elements */
.products-bg-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.bg-pattern-1, .bg-pattern-2 {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.bg-pattern-1 {
top: 10%;
right: -150px;
animation: float 30s ease-in-out infinite;
}
.bg-pattern-2 {
bottom: 10%;
left: -150px;
animation: float 30s ease-in-out infinite reverse;
}
.bg-gradient {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.03), transparent, rgba(255, 255, 255, 0.03));
border-radius: 50%;
animation: rotate 50s linear infinite;
}
/* Decorative Elements */
.bg-pattern-1::before,
.bg-pattern-2::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
border-radius: 50%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.08), transparent);
animation: pulse 4s ease-in-out infinite;
}
.bg-pattern-1::after,
.bg-pattern-2::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite reverse;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes rotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Filter Functionality */
.product-card.hidden {
display: none;
}
.product-card.show {
display: block;
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.products-container {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}
}
@media (max-width: 992px) {
.products-header {
padding: 80px 0 60px;
}
.products-title {
font-size: 2.8rem;
}
.products-container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 0 15px;
}
.filter-tabs {
flex-direction: column;
max-width: 300px;
gap: 4px;
}
.filter-btn {
justify-content: center;
padding: 14px 20px;
}
}
@media (max-width: 768px) {
.products-header {
padding: 60px 0 40px;
}
.products-title {
font-size: 2.2rem;
}
.products-subtitle {
font-size: 1.1rem;
}
.products-container {
grid-template-columns: 1fr;
padding: 0 10px;
}
.product-image {
height: 160px;
margin: 15px 20px;
}
.bandwidth-highlight {
flex-direction: column;
text-align: center;
gap: 12px;
}
.amount {
font-size: 2rem;
}
.bg-pattern-1, .bg-pattern-2 {
display: none;
}
}
.main-section.paddind{
padding-bottom:60px;
background:
linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(52, 185, 74, 0.1));
}
/* Modern Promo Section
---------------------------------*/
.modern-promo-section {
padding: 60px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.modern-promo-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(0, 97, 0, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 97, 0, 0.08) 0%, transparent 50%);
pointer-events: none;
}
/* Promo Header */
.promo-header {
margin-bottom: 80px;
}
.promo-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
padding: 12px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
animation: pulse 2s infinite;
}
.promo-badge i {
font-size: 16px;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.promo-title {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #1e293b, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 24px;
font-family: 'Inter', sans-serif;
}
.promo-subtitle {
font-size: 1.25rem;
color: #64748b;
line-height: 1.7;
max-width: 700px;
margin: 0 auto;
font-weight: 400;
}
/* Main Promo Card */
.promo-main-card {
background: white;
border-radius: 32px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(226, 232, 240, 0.8);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.promo-main-card:hover {
transform: translateY(-8px);
box-shadow: 0 35px 100px rgba(0, 97, 0, 0.15);
}
.promo-card-inner {
display: grid;
grid-template-columns: 1fr 1.5fr;
min-height: 600px;
}
/* Promo Visual */
.promo-visual {
background: linear-gradient(135deg, #006100, #004d00);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.promo-visual::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
animation: float 20s linear infinite;
}
@keyframes float {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(-20px, -20px) rotate(360deg); }
}
.promo-image-container {
position: relative;
text-align: center;
margin-bottom: 30px;
}
.promo-main-image {
max-width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.promo-main-image:hover {
transform: scale(1.05);
}
.promo-badge-overlay {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
/* Quick Benefits */
.quick-benefits {
display: flex;
gap: 15px;
justify-content: center;
position: relative;
z-index: 2;
}
.benefit-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: white;
text-align: center;
}
.benefit-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
backdrop-filter: blur(10px);
}
.benefit-item span {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Terms & Conditions */
.terms-conditions {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.terms-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(226, 232, 240, 0.5);
}
.terms-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
flex-shrink: 0;
}
.terms-title h3 {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px 0;
font-family: 'Inter', sans-serif;
}
.terms-title p {
color: #64748b;
margin: 0;
font-size: 1rem;
}
/* Terms List */
.terms-list {
margin-bottom: 30px;
max-height: 300px;
overflow-y: auto;
padding-right: 10px;
}
.terms-list::-webkit-scrollbar {
width: 6px;
}
.terms-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
.terms-list::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.terms-list::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.term-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
padding: 12px 16px;
background: rgba(248, 250, 252, 0.8);
border-radius: 12px;
transition: all 0.3s ease;
}
.term-item:hover {
background: rgba(0, 97, 0, 0.05);
transform: translateX(5px);
}
.term-bullet {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
flex-shrink: 0;
margin-top: 2px;
}
.term-item span {
color: #374151;
line-height: 1.6;
font-size: 15px;
}
/* CTA Section */
.promo-cta-section {
background: linear-gradient(135deg, rgba(0, 97, 0, 0.05), rgba(0, 77, 0, 0.02));
padding: 30px;
border-radius: 20px;
border: 1px solid rgba(0, 97, 0, 0.1);
}
.cta-content {
margin-bottom: 20px;
}
.cta-text h4 {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px 0;
font-family: 'Inter', sans-serif;
}
.cta-text p {
color: #64748b;
margin: 0 0 24px 0;
font-size: 1rem;
}
.cta-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.primary-cta-btn, .secondary-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.primary-cta-btn {
background: linear-gradient(135deg, #25d366, #20ba5a);
color: white;
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.3);
}
.primary-cta-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s;
}
.primary-cta-btn:hover::before {
left: 100%;
}
.primary-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
.secondary-cta-btn {
background: white;
color: #006100;
border: 2px solid rgba(0, 97, 0, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.secondary-cta-btn:hover {
background: #006100;
color: white;
border-color: #006100;
transform: translateY(-2px);
text-decoration: none;
}
/* Urgency Indicator */
.urgency-indicator {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #f59e0b;
border-radius: 12px;
padding: 12px 16px;
margin-top: 20px;
}
.urgency-content {
display: flex;
align-items: center;
gap: 8px;
color: #92400e;
font-weight: 600;
font-size: 14px;
justify-content: center;
}
.urgency-content i {
animation: blink 1.5s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0.5; }
}
/* Background Elements */
.promo-bg-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
}
.bg-shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.08), rgba(0, 77, 0, 0.04));
}
.shape-1 {
width: 400px;
height: 400px;
top: 10%;
right: -200px;
animation: float 8s ease-in-out infinite;
}
.shape-2 {
width: 300px;
height: 300px;
bottom: 10%;
left: -150px;
animation: float 8s ease-in-out infinite reverse;
}
.bg-dots {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
/* Responsive Design */
@media (max-width: 992px) {
.modern-promo-section {
padding: 80px 0;
}
.promo-title {
font-size: 2.8rem;
}
.promo-card-inner {
grid-template-columns: 1fr;
}
.promo-visual {
padding: 30px;
min-height: 300px;
}
.quick-benefits {
flex-direction: row;
gap: 20px;
}
}
@media (max-width: 768px) {
.modern-promo-section {
padding: 60px 0;
}
.promo-title {
font-size: 2.2rem;
}
.promo-subtitle {
font-size: 1.1rem;
}
.terms-conditions {
padding: 30px 20px;
}
.terms-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.cta-buttons {
flex-direction: column;
}
.primary-cta-btn, .secondary-cta-btn {
justify-content: center;
width: 100%;
}
.bg-shape {
display: none;
}
}
/* ------------------- */
.c-logo-part{
background:#7cc576;
padding:25px 0;
filter: alpha(opacity=60);
}
.c-logo-part ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
.c-logo-part ul li{
display:inline;
margin:0 25px;
}
.c-logo-part ul a{
display:inline-block;
margin: 0 20px;
}
.popup {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8); display: none;
z-index: 9999; overflow-y: auto; padding: 20px;
backdrop-filter: blur(5px);
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
background: transparent;
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
max-width: fit-content;
max-height: 90vh;
overflow: hidden;
opacity: 0;
transform: scale(0.8) translate(-50%, -50%);
transition: all 0.3s ease;
}
.promo-container {
position: relative;
display: flex;
flex-direction: column;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.promo-image {
width: auto;
height: auto;
max-width: 80vw;
max-height: 70vh;
object-fit: contain;
display: block;
}
.promo-title {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 20px;
font-size: 18px;
font-weight: 600;
text-align: center;
margin: 0;
}
.popup-close {
position: absolute;
top: -15px;
right: -15px;
background: linear-gradient(45deg, #ff4757, #ff3742);
color: white;
border: none;
border-radius: 50%;
font-size: 24px;
width: 40px;
height: 40px;
cursor: pointer;
box-shadow: 0 8px 25px rgba(255, 71, 87, 0.3);
transition: all 0.3s ease;
z-index: 10001;
}
.popup-close:hover {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(255, 71, 87, 0.4);
}
@keyframes popupFadeIn {
from {
opacity: 0;
transform: scale(0.8) translate(-50%, -50%);
}
to {
opacity: 1;
transform: scale(1) translate(-50%, -50%);
}
}
@keyframes popupFadeOut {
from {
opacity: 1;
transform: scale(1) translate(-50%, -50%);
}
to {
opacity: 0;
transform: scale(0.8) translate(-50%, -50%);
}
}
.popup.show .popup-content {
opacity: 1;
transform: scale(1) translate(-50%, -50%);
}
.popup.closing .popup-content {
animation: popupFadeOut 0.3s ease-in forwards;
}
/* Responsive popup for mobile devices */
@media (max-width: 768px) {
.popup-content {
max-width: fit-content;
max-height: 85vh;
}
.promo-container {
border-radius: 15px;
}
.promo-image {
max-width: 90vw;
max-height: 60vh;
}
.promo-title {
font-size: 16px;
padding: 12px 15px;
}
.popup-close {
top: -12px;
right: -12px;
width: 35px;
height: 35px;
font-size: 20px;
}
}
@media (max-width: 480px) {
.promo-container {
border-radius: 12px;
}
.promo-image {
max-width: 95vw;
max-height: 50vh;
}
.promo-title {
font-size: 14px;
padding: 10px 12px;
}
}
/* cakupanarea
---------------------------------*/
.cakupanarea-block{
max-width:993px;
padding-top: 10px;
margin:0 auto;
}
.cakupanarea-box {
display: inline-block;
width: 200px;
padding: 10px;
margin: 10px;
border-radius: 15px;
background: #f4fff4;
box-shadow: 0 8px 15px rgba(0, 102, 0, 0.15);
text-align: center;
transition: all 0.3s ease-in-out;
}
.cakupanarea-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 25px rgba(0, 102, 0, 0.3);
}
.cakupanarea-box span{
margin-bottom:24px;
display:block;
}
.cakupanarea-shadow{
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
border-radius:50%;
position:absolute;
width:100%;
height:100%;
z-index:10;
border-radius:50%;
}
.cakupanarea-shadow a{
display:block;
width:100%;
height:100%;
}
.main-section.cakupanarea{
position: relative;
padding: 50px 0;
}
.main-section.cakupanarea::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 1px;
background-color: #4CAF50;
}
.main-section.cakupanarea h2{
margin-bottom:40px;
}
.main-section.cakupanarea img {
width: 100%;
height: auto;
display: block;
border: 1px solid #4CAF50;
}
.cakupanareaicon {
padding: 10px;
}
.blinking {
animation: blink-animation 1s infinite;
}
@keyframes blink-animation {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* --- TABEL --- */
.table-responsive {
margin-top: 40px;
}
table {
font-size: 14px;
border-radius: 10px;
overflow: hidden;
}
thead.table-success {
background-color: #28a745 !important;
color: white;
}
tbody tr:hover {
background-color: #e8f5e9;
}
/* Team
---------------------------------*/
.main-section.team {
padding: 60px 20px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(52, 185, 74, 0.1));
box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.2);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.main-section.team h2 {
text-align: center;
font-size: 36px;
font-weight: bold;
margin-bottom: 50px;
color: #2c3e50;
position: relative;
}
.main-section.team .row:nth-of-type(2) {
display: flex;
flex-wrap: wrap;
}
.col-md-4 {
display: flex;
}
.team-leader-box {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
width: 100%;
padding: 20px;
border-radius: 15px;
background: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.team-leader-box:hover {
transform: translateY(-10px);
box-shadow: 0 15px 25px rgb(0, 80, 0, 0.6);
}
.team-leader img {
width: 180px;
height: 180px;
object-fit: cover;
border-radius: 12px;
margin: 0 auto 20px;
display: block;
transition: transform 0.3s ease;
}
.team-leader-box:hover img {
transform: scale(1.05);
}
.quote-box {
position: relative;
padding: 15px 0;
}
.quote-icon {
font-size: 32px;
color: #27ae60;
position: absolute;
top: 0;
right: 15px;
}
.quote-content h3 {
font-size: 20px;
font-weight: bold;
color: rgb(0, 80, 0);
margin-bottom: 5px;
}
.quote-content span {
font-size: 16px;
color: #888;
}
.team-leader-box p {
font-size: 14px;
color: #3d3d3d;
margin-top: auto;
text-align: justify;
}
@media (max-width: 768px) {
.main-section.team h2 {
font-size: 28px;
}
.team-leader img {
width: 150px;
height: 150px;
}
}
.client-slider {
margin: 0 auto;
max-width: 100%;
}
.client-item img {
width: 100%;
height: auto;
max-height: 200px;
object-fit: contain;
margin: auto;
}
.slick-slide {
padding: 10px;
}
/* Talk Business
---------------------------------*/
.business-talking{
background:url(../img/section-bg2.jpg) top center no-repeat;
background-size:cover;
padding:60px 0 10px;
text-align:center;
}
.business-talking h2{
font-family: 'Montserrat', sans-serif;
font-weight:700;
padding:0;
margin:20px 0 70px;
text-transform:uppercase;
font-size:42px;
color:#fff;
}
/* Support Center
---------------------------------*/
.support-center{
background-size:cover;
padding:10px 0 10px;
text-align:center;
background: url(../img/background-img2.jpeg) right top no-repeat;
background-size: cover;
background-position: center top;
background-attachment: fixed;
}
.support-center h2{
font-family: 'Montserrat', sans-serif;
font-weight:700;
padding:0;
margin:20px 0 20px;
text-transform:uppercase;
font-size:42px;
color:#fff;
}
.support-center .box{
width: auto;
padding: 10px;
}
.support-center .box-col1{
width:60px;
float:left;
}
.support-center .box-col1 i{
display:block;
line-height:38px;
font-family: 'FontAwesome';
font-size:38px;
color:#ffffff;
font-style:normal;
}
.box-col2{ overflow:hidden;}
.box-col2 h3 {
color:rgb(255, 255, 255);
display: block;
text-align: left;
text-transform: none;
}
/* Contact
---------------------------------*/
.main-section.contact {
background: url(../img/bg-map.png) right no-repeat;
padding: 40px 20px;
color: #333;
}
.contact-info-box {
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
box-shadow: 0 15px 25px rgb(0, 80, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.contact-info-box:hover {
transform: translateY(-5px);
}
.contact-info-box h3 {
font-size: 16px;
margin: 10px 0 5px 0;
font-weight: bold;
color: #333;
}
.contact-info-box span {
font-size: 14px;
display: block;
color: #28a745;
margin-bottom: 8px;
}
.contact-info-box a {
font-size: 14px;
color: #007bff;
text-decoration: none;
}
.contact-info-box a:hover {
text-decoration: underline;
}
.social-link{
padding:35px 0;
margin:0 0 0 68px;
display:block;
overflow:hidden;
list-style:none;
}
.social-link li{
float:left;
margin-right:8px;
}
.social-link li a{
display:block;
width:50px;
height:50px;
text-align:center;
line-height:50px;
font-size:25px;
color:#fff;
background:#222222;
border-radius:50%;
transition:all 0.3s ease-in-out;
}
.social-link li a:hover, .social-link li a:focus{
text-decoration:none;
}
.twitter a:hover {
background: #55acee;
}
.facebook a:hover {
background: #3b5998;
}
.pinterest a:hover {
background: #cb2026;
}
.gplus a:hover {
background: #dd4b39;
}
.dribbble a:hover {
background: #ea4c89;
}
.form{
padding: 10px;
}
.input-text{
padding:15px 16px;
border:1px solid #ccc;
width:100%;
height:50px;
border-radius:4px;
font-size:15px;
color:#aaa;
font-family: 'Open Sans', sans-serif;
background-color: transparent;
margin:0 0 15px 0;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.input-text:focus {
border: 1px solid #7cc576;
outline:0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
}
.input-text.text-area{
height:165px;
resize:none;
overflow:auto;
}
.input-btn{
width:175px;
height:50px;
background:#7cc576;
border-radius:4px;
color:#ffffff;
font-size:14px;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
font-weight:400;
border:0px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.input-btn:hover{
background: #111;
color: #fff;
}
.validation {
color: red;
display:none;
margin: 0 0 20px;
font-weight:400;
font-size:13px;
}
#sendmessage {
color: #7cc576;
border:1px solid #7cc576;
display:none;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#errormessage {
color: red;
display:none;
border:1px solid red;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#sendmessage.show, #errormessage.show, .show {
display:block;
}
/* Footer
---------------------------------*/
.footer{
padding:20px 0 20px;
background: linear-gradient(135deg, rgba(1, 46, 1), rgb(20, 130, 10,0.9));
}
.copyright, .credits{
color:#cccccc;
font-size:14px;
display:block;
text-align:center;
}
.copyright a, .credits a{
color:#7cc576;
font-weight:600;
text-decoration: none;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.copyright a:hover, .credits a:hover {
color: #fff;
}
.res-nav_click {
line-height:38px;
font-family: 'FontAwesome';
font-size:38px;
text-decoration: none !important;
color:#777777;
font-style:normal;
display:none;
width:42px;
height:27px;
margin:20px auto;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.res-nav_click:hover, .res-nav_click:active, .res-nav_click:focus {
color: #7cc576 !important;
}
.portfolioContainer{
max-width: 1140px;
}
/* Animation Timers
---------------------------------*/
.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
background-color: whitesmoke;
border-radius: 20px;
}
.location-wrapper .location-card .desc{
font-family: 'Nunito', sans-serif;
font-weight: 400;
color: #8F8F8F;
}
.location-wrapper .location-card .author span{
font-family: 'Nunito', sans-serif;
font-weight: 700;
color: var(--primary-color);
font-size: 1.2rem;
}
.location-wrapper .location-next, .location-prev{
position: absolute;
bottom: 90px;
color: #bbbbbb;
width: 30px;
height: 30px;
}
.location-wrapper .location-next{
right: 30px;
background-color: var(--primary-color);
}
.location-wrapper .location-prev{
right: 80px;
}
/* FORM DAFTAR */
.card {
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.card-header {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 1px;
}
.logo img {
display: block;
margin: 0 auto 30px;
max-width: 140px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
.form-label {
font-weight: 600;
color: #2d2d2d;
margin-bottom: 8px;
font-size: 1rem;
}
.form-control {
border-radius: 10px;
border: 1.5px solid #ced4da;
padding: 12px 15px;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: none;
}
.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 8px rgba(40,167,69,0.4);
outline: none;
}
textarea.form-control {
resize: vertical;
min-height: 80px;
font-family: inherit;
}
.btn-success {
font-weight: 700;
font-size: 1.1rem;
padding: 12px 35px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(40,167,69,0.4);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.btn-success:hover {
background-color: #218838;
box-shadow: 0 8px 25px rgba(33,136,56,0.6);
}
.readonly-text {
display: block;
padding: 12px 15px;
background: #e9f5ec;
border-radius: 10px;
border: 1.5px solid #28a745;
color: #19692c;
font-weight: 600;
font-size: 1rem;
user-select: none;
margin-bottom: 10px;
box-sizing: border-box;
}
/* FORM THANKYOU CARD */
.thank-you-card {
max-width: 500px;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
animation: fadeIn 0.6s ease-in-out;
}
.thank-you-card h2 {
color: rgba(40,167,69);
}
.thank-you-card p {
margin-bottom: 15px;
color: #343a40;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.wa-float {
position: fixed;
width: 180px;
height: 90px;
bottom: 20px;
right: 20px;
z-index: 1000;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}
.wa-float .img{
width: 200px;
height: 100px;
}
.wa-float:hover {
transform: scale(1.1);
}
/* Modern Coverage Section
---------------------------------*/
.modern-coverage-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #ffffff 100%);
position: relative;
overflow: hidden;
padding: 60px 0;
color: #1e293b;
}
.modern-coverage-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(0, 97, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 97, 0, 0.03) 0%, transparent 50%);
pointer-events: none;
}
/* Coverage Header */
.coverage-header {
padding-bottom: 80px;
position: relative;
z-index: 2;
}
.coverage-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #006100, #004d00);
color: white;
padding: 12px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 97, 0, 0.3);
}
.coverage-title {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #006100, #004d00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 24px;
font-family: 'Inter', sans-serif;
}
.coverage-subtitle {
font-size: 1.25rem;
color: #64748b;
line-height: 1.7;
max-width: 700px;
margin: 0 auto;
font-weight: 400;
}
/* Map Section */
.map-section {
padding-bottom: 80px;
}
/* Large Map Container */
.map-container-large {
position: relative;
padding: 20px;
margin-bottom: 60px;
}
.map-wrapper-large {
position: relative;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.15), rgba(0, 97, 0, 0.08));
border-radius: 24px;
padding: 40px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
border: 2px solid rgba(0, 97, 0, 0.2);
overflow: hidden;
}
.indonesia-map-large {
width: 100%;
height: auto;
min-height: 500px;
max-height: 600px;
object-fit: contain;
border-radius: 16px;
filter: contrast(1.3) brightness(1.15) saturate(1.4) drop-shadow(0 6px 25px rgba(0, 0, 0, 0.2));
border: 2px solid rgba(0, 97, 0, 0.3);
}
/* Map Markers */
.map-markers {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
pointer-events: none;
z-index: 10;
}
.map-marker {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
pointer-events: all;
z-index: 15;
}
.marker-dot {
width: 12px;
height: 12px;
background: linear-gradient(135deg, #ff4444, #ff6666);
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4);
position: relative;
z-index: 2;
animation: marker-bounce 2s infinite;
}
.marker-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: rgba(255, 68, 68, 0.3);
border-radius: 50%;
animation: marker-pulse 2s infinite;
z-index: 1;
}
.marker-tooltip {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 20;
}
.marker-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(0, 0, 0, 0.9);
}
.map-marker:hover .marker-tooltip {
opacity: 1;
visibility: visible;
bottom: 30px;
}
.map-marker:hover .marker-dot {
transform: scale(1.3);
background: linear-gradient(135deg, #ff0000, #ff3333);
}
@keyframes marker-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes marker-pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
/* Large Stats Overlay */
.map-stats-overlay {
position: absolute;
top: 60px;
right: 60px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
z-index: 10;
}
.coverage-stats-large {
display: flex;
flex-direction: column;
gap: 20px;
}
.stat-item-large {
display: flex;
align-items: center;
gap: 15px;
}
.stat-icon-large {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.stat-content-large {
display: flex;
flex-direction: column;
}
.stat-number-large {
font-size: 1.8rem;
font-weight: 800;
color: #006100;
font-family: 'Inter', sans-serif;
line-height: 1;
}
.stat-label-large {
font-size: 13px;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
margin-top: 2px;
}
/* Coverage Info Section */
.coverage-info-section {
margin-top: 40px;
}
.info-header-center {
margin-bottom: 50px;
}
.info-header-center h3 {
font-size: 2.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
font-family: 'Inter', sans-serif;
}
.info-header-center p {
font-size: 1.2rem;
color: #64748b;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
/* Features Grid Layout */
.coverage-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-column {
display: flex;
justify-content: center;
}
.feature-item-modern {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
border: 2px solid rgba(0, 97, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
width: 100%;
max-width: 350px;
}
.feature-item-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #006100, #004d00);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.feature-item-modern:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 97, 0, 0.15);
border-color: rgba(0, 97, 0, 0.2);
}
.feature-item-modern:hover::before {
transform: scaleX(1);
}
.feature-icon-modern {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 32px;
margin: 0 auto 25px;
position: relative;
box-shadow: 0 8px 25px rgba(0, 97, 0, 0.3);
}
.feature-icon-modern::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
border-radius: 22px;
z-index: -1;
}
.feature-content-modern h4 {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
font-family: 'Inter', sans-serif;
}
.feature-content-modern p {
color: #64748b;
line-height: 1.7;
font-size: 15px;
}
/* Old map container (hide it) */
.map-container {
display: none;
}
.coverage-info {
display: none;
}
.map-overlay {
position: absolute;
top: 50px;
right: 50px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border-radius: 16px;
padding: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.coverage-stats {
display: flex;
flex-direction: column;
gap: 15px;
}
.stat-item {
display: flex;
align-items: center;
gap: 12px;
}
.stat-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.stat-content {
display: flex;
flex-direction: column;
}
.stat-number {
font-size: 1.5rem;
font-weight: 800;
color: #006100;
font-family: 'Inter', sans-serif;
}
.stat-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
/* Coverage Info */
.coverage-info {
padding-left: 30px;
}
.info-header {
margin-bottom: 40px;
}
.info-header h3 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
font-family: 'Inter', sans-serif;
}
.info-header p {
font-size: 1.1rem;
color: #64748b;
line-height: 1.6;
}
.coverage-features {
display: flex;
flex-direction: column;
gap: 30px;
}
.coverage-features .feature-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 16px;
border: 1px solid rgba(0, 97, 0, 0.1);
transition: all 0.3s ease;
}
.coverage-features .feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 97, 0, 0.1);
border-color: rgba(0, 97, 0, 0.2);
}
.coverage-features .feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
}
.coverage-features .feature-content h4 {
font-size: 1.2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
font-family: 'Inter', sans-serif;
}
.coverage-features .feature-content p {
color: #64748b;
line-height: 1.6;
font-size: 14px;
}
/* Cities Section */
.cities-section {
padding-bottom: 80px;
}
.section-header {
margin-bottom: 50px;
}
.section-header h3 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
font-family: 'Inter', sans-serif;
}
.section-header p {
font-size: 1.1rem;
color: #64748b;
line-height: 1.6;
}
.cities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 40px;
}
.city-card {
position: relative;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 97, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.city-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 97, 0, 0.15);
border-color: rgba(0, 97, 0, 0.2);
}
.city-card-inner {
padding: 30px 25px;
display: flex;
align-items: center;
gap: 20px;
position: relative;
}
.city-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #006100, #004d00);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.city-content {
flex: 1;
}
.city-name {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
font-family: 'Inter', sans-serif;
}
.city-status {
display: flex;
align-items: center;
gap: 8px;
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
animation: pulse-dot 2s infinite;
}
.status-text {
font-size: 12px;
color: #10b981;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.city-pulse {
position: absolute;
top: 50%;
left: 55px;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border: 2px solid rgba(0, 97, 0, 0.3);
border-radius: 50%;
animation: pulse-ring 2s infinite;
pointer-events: none;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
@keyframes pulse-ring {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
/* Modern Table Section */
.coverage-table-section {
background: rgba(255, 255, 255, 0.8);
border-radius: 24px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 97, 0, 0.1);
}
.modern-table-wrapper {
position: relative;
}
.table-controls {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 30px;
gap: 20px;
flex-wrap: wrap;
}
.search-wrapper {
position: relative;
flex: 1;
max-width: 400px;
}
.search-wrapper i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #64748b;
font-size: 16px;
}
.table-search {
width: 100%;
padding: 12px 15px 12px 45px;
border: 2px solid rgba(0, 97, 0, 0.1);
border-radius: 12px;
font-size: 14px;
background: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.table-search:focus {
outline: none;
border-color: rgba(0, 97, 0, 0.3);
box-shadow: 0 0 0 3px rgba(0, 97, 0, 0.1);
}
/* Hide table actions (export & refresh) */
.table-actions {
display: none;
}
.table-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.export-btn {
background: linear-gradient(135deg, #006100, #004d00);
color: white;
box-shadow: 0 4px 15px rgba(0, 97, 0, 0.3);
}
.export-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 97, 0, 0.4);
}
.refresh-btn {
background: rgba(0, 97, 0, 0.1);
color: #006100;
border: 1px solid rgba(0, 97, 0, 0.2);
}
.refresh-btn:hover {
background: rgba(0, 97, 0, 0.2);
transform: translateY(-2px);
}
.modern-table-container {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 97, 0, 0.1);
}
.modern-coverage-table {
width: 100%;
background: white;
margin-bottom: 0;
}
.modern-coverage-table thead {
background: linear-gradient(135deg, #006100, #004d00);
color: white;
}
.modern-coverage-table thead th {
padding: 18px 15px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
position: relative;
}
.modern-coverage-table thead th:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 25%;
height: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.2);
}
.modern-coverage-table tbody tr {
transition: all 0.3s ease;
border-bottom: 1px solid rgba(0, 97, 0, 0.1);
}
.modern-coverage-table tbody tr:hover {
background: rgba(0, 97, 0, 0.05);
transform: scale(1.002);
}
.modern-coverage-table tbody td {
padding: 18px 15px;
border: none;
vertical-align: middle;
}
.row-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: linear-gradient(135deg, #006100, #004d00);
color: white;
border-radius: 8px;
font-weight: 700;
font-size: 12px;
}
.location-info {
display: flex;
align-items: center;
gap: 10px;
}
.location-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #006100;
font-size: 14px;
flex-shrink: 0;
}
.location-name {
font-weight: 600;
color: #1e293b;
font-size: 14px;
}
.area-detail {
padding: 8px 12px;
background: rgba(0, 97, 0, 0.05);
border-radius: 8px;
border-left: 3px solid #006100;
}
.area-text {
color: #374151;
font-size: 13px;
line-height: 1.4;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-badge i {
font-size: 12px;
}
/* Background Elements */
.coverage-bg-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.coverage-bg-elements .bg-shape {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 97, 0, 0.03) 0%, transparent 70%);
}
.coverage-bg-elements .shape-1 {
top: 10%;
right: -150px;
animation: float 25s ease-in-out infinite;
}
.coverage-bg-elements .shape-2 {
bottom: 10%;
left: -150px;
animation: float 25s ease-in-out infinite reverse;
}
.bg-network-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(0, 97, 0, 0.02) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(0, 97, 0, 0.02) 2px, transparent 2px);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
opacity: 0.5;
}
/* Responsive Design */
@media (max-width: 992px) {
.coverage-title {
font-size: 2.8rem;
}
.coverage-info {
padding-left: 0;
margin-top: 40px;
}
.map-overlay {
position: relative;
top: auto;
right: auto;
margin-top: 20px;
}
.cities-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.table-controls {
flex-direction: column;
align-items: stretch;
}
.search-wrapper {
max-width: none;
}
/* Large Map Responsive */
.map-stats-overlay {
position: relative;
top: auto;
right: auto;
margin-top: 20px;
width: 100%;
}
.coverage-stats-large {
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.info-header-center h3 {
font-size: 2.2rem;
}
.coverage-features-grid {
grid-template-columns: 1fr;
gap: 25px;
}
}
@media (max-width: 768px) {
.modern-coverage-section {
padding: 80px 0;
}
.coverage-title {
font-size: 2.2rem;
}
.coverage-subtitle {
font-size: 1.1rem;
}
.cities-grid {
grid-template-columns: 1fr;
}
.city-card-inner {
padding: 25px 20px;
}
.coverage-table-section {
padding: 25px 15px;
margin: 0 -15px;
border-radius: 0;
}
.modern-table-container {
border-radius: 12px;
}
.modern-coverage-table thead th,
.modern-coverage-table tbody td {
padding: 12px 8px;
font-size: 12px;
}
.location-info {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.table-actions {
flex-direction: column;
width: 100%;
}
.table-btn {
justify-content: center;
}
/* Large Map Mobile */
.map-wrapper-large {
padding: 20px;
}
.indonesia-map-large {
min-height: 300px;
max-height: 400px;
}
.map-stats-overlay {
padding: 20px;
border-radius: 16px;
}
.coverage-stats-large {
gap: 15px;
}
.stat-item-large {
gap: 10px;
}
.stat-icon-large {
width: 40px;
height: 40px;
font-size: 16px;
}
.stat-number-large {
font-size: 1.4rem;
}
.stat-label-large {
font-size: 11px;
}
.info-header-center h3 {
font-size: 1.8rem;
}
.info-header-center p {
font-size: 1rem;
}
.feature-item-modern {
padding: 30px 20px;
max-width: none;
}
.feature-icon-modern {
width: 60px;
height: 60px;
font-size: 24px;
margin-bottom: 20px;
}
.feature-content-modern h4 {
font-size: 1.2rem;
}
.feature-content-modern p {
font-size: 14px;
}
/* Map markers responsive */
.marker-dot {
width: 10px;
height: 10px;
border: 2px solid white;
}
.marker-tooltip {
font-size: 10px;
padding: 6px 8px;
}
.map-markers {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
}
/* News Section Styling - Accordion/Article Design */
.news-section {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.news-header {
text-align: center;
margin-bottom: 60px;
}
.news-badge {
display: inline-block;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
color: white;
padding: 8px 24px;
border-radius: 30px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0, 97, 0, 0.3);
}
.news-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.news-subtitle {
font-size: 1.2rem;
color: #666;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* News Stats Row */
.news-stats-row {
margin-bottom: 60px;
}
.stats-container {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.stats-container .stat-item {
display: flex;
align-items: center;
gap: 15px;
background: white;
padding: 20px 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.stats-container .stat-item:hover {
transform: translateY(-5px);
}
.stats-container .stat-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.stats-container .stat-content {
display: flex;
flex-direction: column;
}
.stats-container .stat-number {
font-size: 1.8rem;
font-weight: 700;
color: #333;
}
.stats-container .stat-label {
font-size: 14px;
color: #666;
font-weight: 500;
}
/* News Accordion */
.news-accordion-section {
margin-bottom: 80px;
}
.news-accordion-container {
max-width: 900px;
margin: 0 auto;
}
.news-accordion-item {
background: white;
border-radius: 20px;
margin-bottom: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.news-accordion-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.accordion-header {
cursor: pointer;
padding: 25px;
transition: all 0.3s ease;
}
.accordion-header:hover {
background: rgba(0, 97, 0, 0.02);
}
.news-preview {
display: flex;
gap: 20px;
align-items: flex-start;
}
.news-thumbnail {
flex-shrink: 0;
width: 120px;
height: 90px;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.thumbnail-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-accordion-item:hover .thumbnail-img {
transform: scale(1.1);
}
.news-date-small {
position: absolute;
top: 8px;
right: 8px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
color: white;
padding: 4px 8px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
text-align: center;
line-height: 1.2;
}
.date-day {
display: block;
font-size: 12px;
}
.date-month {
display: block;
font-size: 10px;
opacity: 0.9;
}
.news-preview-content {
flex: 1;
min-width: 0;
}
.news-meta-inline {
display: flex;
gap: 20px;
margin-bottom: 12px;
font-size: 13px;
color: #666;
}
.meta-date, .meta-category {
display: flex;
align-items: center;
gap: 6px;
}
.meta-date i, .meta-category i {
color: #006100;
}
.article-title {
font-size: 1.4rem;
font-weight: 700;
color: #333;
margin-bottom: 8px;
line-height: 1.3;
}
.article-subtitle {
font-size: 1rem;
color: #006100;
margin-bottom: 10px;
font-weight: 500;
}
.article-excerpt {
color: #666;
line-height: 1.5;
margin-bottom: 15px;
font-size: 14px;
}
.preview-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.article-stats {
display: flex;
gap: 15px;
font-size: 12px;
color: #888;
}
.article-stats .stat {
display: flex;
align-items: center;
gap: 4px;
}
.article-stats i {
color: #006100;
}
.expand-indicator {
display: flex;
align-items: center;
gap: 8px;
color: #006100;
font-size: 14px;
font-weight: 600;
}
.expand-icon {
transition: transform 0.3s ease;
}
.accordion-header[aria-expanded="true"] .expand-icon {
transform: rotate(180deg);
}
.expand-text {
display: none;
}
/* Collapsible Content */
.accordion-collapse {
transition: all 0.3s ease;
}
.accordion-body {
padding: 0 25px 25px 25px;
}
.full-article-content {
border-top: 1px solid #eee;
padding-top: 25px;
}
.article-image-full {
position: relative;
height: 300px;
border-radius: 15px;
overflow: hidden;
margin-bottom: 30px;
}
.full-article-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-overlay-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 30px 20px 20px;
}
.article-meta-full {
display: flex;
gap: 20px;
color: white;
font-size: 14px;
}
.author, .publish-date {
display: flex;
align-items: center;
gap: 8px;
}
.article-body {
padding: 0;
}
.article-lead {
margin-bottom: 25px;
padding: 20px;
background: rgba(0, 97, 0, 0.05);
border-left: 4px solid #006100;
border-radius: 8px;
}
.lead-text {
font-size: 1.1rem;
color: #006100;
font-weight: 500;
margin: 0;
line-height: 1.6;
}
.article-content {
margin-bottom: 30px;
}
.content-text {
color: #333;
line-height: 1.8;
font-size: 16px;
margin: 0;
}
.article-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid #eee;
flex-wrap: wrap;
gap: 20px;
}
.action-buttons {
display: flex;
gap: 15px;
}
.action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid #ddd;
background: white;
color: #666;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.action-btn:hover {
background: #006100;
color: white;
border-color: #006100;
}
.social-share {
display: flex;
align-items: center;
gap: 10px;
}
.share-label {
font-size: 14px;
color: #666;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 50%;
color: white;
font-size: 14px;
transition: transform 0.3s ease;
}
.social-link:hover {
transform: translateY(-2px);
}
.social-link.facebook { background: #3b5998; }
.social-link.twitter { background: #1da1f2; }
.social-link.whatsapp { background: #25d366; }
.social-link.telegram { background: #0088cc; }
/* Load More Section */
.load-more-section {
margin-bottom: 60px;
}
.load-more-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
color: white;
padding: 15px 30px;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 97, 0, 0.3);
}
.load-more-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 97, 0, 0.4);
}
.load-info {
margin-top: 15px;
color: #666;
font-size: 14px;
}
/* Newsletter CTA Section */
.newsletter-cta-section {
margin-bottom: 60px;
}
.newsletter-container {
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
border-radius: 20px;
padding: 50px 40px;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.newsletter-content {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
}
.newsletter-icon {
font-size: 3rem;
opacity: 0.9;
}
.newsletter-text h3 {
font-size: 1.8rem;
margin-bottom: 10px;
font-weight: 700;
}
.newsletter-text p {
margin: 0;
opacity: 0.9;
}
.newsletter-form-inline {
flex-shrink: 0;
}
.form-group {
display: flex;
gap: 12px;
margin-bottom: 10px;
}
.newsletter-input-inline {
padding: 12px 20px;
border: none;
border-radius: 12px;
font-size: 16px;
outline: none;
min-width: 250px;
}
.newsletter-btn-inline {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: white;
color: #006100;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-btn-inline:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.form-security {
font-size: 12px;
opacity: 0.8;
display: flex;
align-items: center;
gap: 6px;
}
/* Quick Navigation */
.quick-nav-section {
margin-top: 40px;
}
.quick-nav-header {
margin-bottom: 40px;
}
.quick-nav-header h4 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 10px;
color: #333;
}
.quick-nav-header p {
color: #666;
margin: 0;
}
.quick-nav-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.quick-nav-item {
display: flex;
align-items: center;
gap: 15px;
background: white;
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #333;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.quick-nav-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border-color: #006100;
color: #006100;
}
.nav-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
}
.nav-content {
flex: 1;
}
.nav-content h5 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.nav-content p {
font-size: 14px;
color: #666;
margin: 0;
}
.nav-arrow {
color: #006100;
transition: transform 0.3s ease;
}
.quick-nav-item:hover .nav-arrow {
transform: translateX(5px);
}
/* Responsive Design */
@media (max-width: 768px) {
.news-title {
font-size: 2.5rem;
}
.stats-container {
gap: 30px;
}
.stats-container .stat-item {
flex-direction: column;
text-align: center;
gap: 10px;
}
.news-preview {
flex-direction: column;
gap: 15px;
}
.news-thumbnail {
width: 100%;
height: 200px;
}
.newsletter-container {
flex-direction: column;
text-align: center;
gap: 30px;
}
.newsletter-content {
flex-direction: column;
text-align: center;
gap: 15px;
}
.form-group {
flex-direction: column;
}
.newsletter-input-inline {
min-width: auto;
}
.quick-nav-grid {
grid-template-columns: 1fr;
}
.article-actions {
flex-direction: column;
align-items: flex-start;
}
.action-buttons {
width: 100%;
justify-content: space-between;
}
.expand-text {
display: inline;
}
}
@media (max-width: 480px) {
.news-title {
font-size: 2rem;
}
.accordion-header {
padding: 20px;
}
.accordion-body {
padding: 0 20px 20px 20px;
}
.article-image-full {
height: 200px;
}
.newsletter-container {
padding: 30px 20px;
}
}
/* Timeline Layout CSS - Additional Styles */
.news-timeline-section {
margin-bottom: 80px;
}
.timeline-container {
display: flex;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
min-height: 800px;
}
/* Left Sidebar Timeline Navigation */
.timeline-sidebar {
width: 300px;
flex-shrink: 0;
position: sticky;
top: 120px;
height: fit-content;
}
.timeline-nav {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 97, 0, 0.1);
}
.timeline-title {
font-size: 1.5rem;
font-weight: 700;
color: #333;
margin-bottom: 25px;
text-align: center;
}
.timeline-years {
margin-bottom: 30px;
}
.timeline-year-item {
padding: 15px 20px;
margin-bottom: 10px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.timeline-year-item:hover,
.timeline-year-item.active {
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
color: white;
transform: translateX(5px);
border-color: #006100;
}
.year-number {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 5px;
}
.year-count {
font-size: 14px;
opacity: 0.8;
}
.timeline-stats {
display: flex;
flex-direction: column;
gap: 18px;
background: rgba(255,255,255,0.25);
border-radius: 18px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
backdrop-filter: blur(8px);
border: 1.5px solid rgba(34,197,94,0.15);
padding: 28px 18px 18px 18px;
margin-top: 24px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.timeline-stats::before {
content: '';
position: absolute;
top: -40px; left: -40px;
width: 120px; height: 120px;
background: radial-gradient(circle, #22c55e33 0%, transparent 80%);
z-index: 0;
}
.timeline-stats .stat-box {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255,255,255,0.55);
border-radius: 12px;
box-shadow: 0 2px 8px 0 rgba(34,197,94,0.07);
padding: 14px 12px;
position: relative;
transition: box-shadow 0.2s, transform 0.2s;
z-index: 1;
}
.timeline-stats .stat-box:hover {
box-shadow: 0 4px 16px 0 rgba(34,197,94,0.18);
transform: translateY(-2px) scale(1.03);
}
.timeline-stats .stat-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #22c55e 0%, #006100 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2rem;
box-shadow: 0 2px 8px 0 rgba(34,197,94,0.12);
border: 2.5px solid #fff;
position: relative;
z-index: 2;
}
.timeline-stats .stat-icon::after {
content: '';
position: absolute;
top: 4px; right: 4px;
width: 10px; height: 10px;
background: #fff;
border-radius: 50%;
opacity: 0.18;
}
.timeline-stats .stat-info {
display: flex;
flex-direction: column;
z-index: 2;
}
.timeline-stats .stat-number {
font-size: 1.5rem;
font-weight: 800;
color: #006100;
letter-spacing: 1px;
text-shadow: 0 1px 0 #fff, 0 2px 8px #22c55e22;
}
.timeline-stats .stat-label {
font-size: 13px;
color: #22c55e;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: 2px;
text-shadow: 0 1px 0 #fff;
}
/* Right Content Area */
.timeline-content {
flex: 1;
min-width: 0;
}
.content-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 20px;
}
.content-title h3 {
font-size: 2rem;
font-weight: 700;
color: #333;
margin-bottom: 8px;
}
.content-title p {
color: #666;
font-size: 16px;
margin: 0;
}
.content-controls {
display: flex;
gap: 10px;
}
.view-toggle-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid #ddd;
background: white;
color: #666;
border-radius: 10px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.view-toggle-btn.active,
.view-toggle-btn:hover {
background: #006100;
color: white;
border-color: #006100;
}
/* Scrollable News Content */
.news-content-scroll {
max-height: 800px;
overflow-y: auto;
padding-right: 15px;
scroll-behavior: smooth;
}
.news-content-scroll::-webkit-scrollbar {
width: 6px;
}
.news-content-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.news-content-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
border-radius: 10px;
}
.year-section {
display: none;
margin-bottom: 40px;
}
.year-section.active {
display: block;
}
.year-header {
margin-bottom: 30px;
}
.year-badge {
display: flex;
align-items: center;
gap: 15px;
}
.year-text {
font-size: 2.5rem;
font-weight: 800;
color: #006100;
}
.year-line {
flex: 1;
height: 3px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
border-radius: 2px;
}
/* Timeline Items */
.news-timeline-items {
position: relative;
}
.news-timeline-items::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
border-radius: 1px;
}
.timeline-news-item {
position: relative;
margin-bottom: 30px;
padding-left: 60px;
}
.timeline-dot {
position: absolute;
left: 12px;
top: 20px;
width: 16px;
height: 16px;
background: white;
border: 3px solid #006100;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.dot-inner {
width: 6px;
height: 6px;
background: #006100;
border-radius: 50%;
}
.timeline-content-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.timeline-content-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.news-card-timeline {
display: flex;
min-height: 200px;
}
.news-image-timeline {
width: 250px;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.timeline-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.timeline-content-card:hover .timeline-img {
transform: scale(1.1);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 97, 0, 0.8) 0%, rgba(34, 197, 94, 0.8) 100%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-content-card:hover .image-overlay {
opacity: 1;
}
.news-date-overlay {
background: rgba(255, 255, 255, 0.2);
padding: 10px 15px;
border-radius: 10px;
text-align: center;
color: white;
backdrop-filter: blur(10px);
}
.news-date-overlay .date-day {
display: block;
font-size: 1.5rem;
font-weight: 700;
}
.news-date-overlay .date-month {
display: block;
font-size: 12px;
opacity: 0.9;
}
.news-content-timeline {
flex: 1;
padding: 25px;
display: flex;
flex-direction: column;
}
.news-meta-timeline {
display: flex;
gap: 20px;
margin-bottom: 15px;
font-size: 13px;
color: #666;
flex-wrap: wrap;
}
.meta-date, .meta-category, .meta-read-time {
display: flex;
align-items: center;
gap: 6px;
}
.meta-date i, .meta-category i, .meta-read-time i {
color: #006100;
}
.news-title-timeline {
font-size: 1.3rem;
font-weight: 700;
color: #333;
margin-bottom: 10px;
line-height: 1.4;
}
.news-subtitle-timeline {
font-size: 1rem;
color: #006100;
margin-bottom: 12px;
font-weight: 500;
}
.news-excerpt-timeline {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
flex: 1;
font-size: 14px;
}
.news-actions-timeline {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.timeline-action-btn {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
color: white;
padding: 10px 20px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.timeline-action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 97, 0, 0.3);
}
.timeline-stats {
display: flex;
gap: 15px;
font-size: 12px;
color: #888;
}
.timeline-stats .stat-item {
display: flex;
align-items: center;
gap: 4px;
}
.timeline-stats i {
color: #006100;
}
/* Load More Timeline */
.timeline-load-more {
text-align: center;
padding: 40px 0;
}
.load-more-timeline-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: white;
color: #006100;
padding: 15px 30px;
border: 2px solid #006100;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.load-more-timeline-btn:hover {
background: #006100;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 97, 0, 0.3);
}
/* Newsletter Section Timeline */
.newsletter-section-timeline {
margin-bottom: 60px;
}
.newsletter-card-timeline {
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
border-radius: 20px;
padding: 40px;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.newsletter-content-timeline {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
}
.newsletter-icon-timeline {
font-size: 3rem;
opacity: 0.9;
}
.newsletter-text-timeline h3 {
font-size: 1.5rem;
margin-bottom: 8px;
font-weight: 700;
}
.newsletter-text-timeline p {
margin: 0;
opacity: 0.9;
font-size: 16px;
}
.newsletter-form-timeline {
flex-shrink: 0;
}
.form-input-group {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.newsletter-input-timeline {
padding: 12px 20px;
border: none;
border-radius: 10px;
font-size: 16px;
outline: none;
min-width: 250px;
}
.newsletter-btn-timeline {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: white;
color: #006100;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-btn-timeline:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.form-privacy {
font-size: 12px;
opacity: 0.8;
display: flex;
align-items: center;
gap: 6px;
}
/* Quick Links Section */
.quick-links-section {
margin-top: 40px;
}
.quick-links-header {
text-align: center;
margin-bottom: 40px;
}
.quick-links-header h4 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 10px;
color: #333;
}
.quick-links-header p {
color: #666;
margin: 0;
}
.quick-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.quick-link-card {
display: flex;
align-items: center;
gap: 15px;
background: white;
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #333;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.quick-link-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border-color: #006100;
color: #006100;
}
.quick-link-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #006100 0%, #22c55e 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
}
.quick-link-content {
flex: 1;
}
.quick-link-content h5 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.quick-link-content p {
font-size: 14px;
color: #666;
margin: 0;
}
.quick-link-arrow {
color: #006100;
transition: transform 0.3s ease;
}
.quick-link-card:hover .quick-link-arrow {
transform: translateX(5px);
}
/* Responsive Design for Timeline */
@media (max-width: 1200px) {
.timeline-container {
flex-direction: column;
gap: 30px;
}
.timeline-sidebar {
width: 100%;
position: static;
}
.timeline-nav {
padding: 20px;
}
.timeline-years {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 10px;
}
.timeline-year-item {
flex-shrink: 0;
min-width: 120px;
text-align: center;
}
.news-content-scroll {
max-height: none;
overflow-y: visible;
padding-right: 0;
}
}
@media (max-width: 768px) {
.timeline-news-item {
padding-left: 40px;
}
.timeline-dot {
left: 8px;
}
.news-timeline-items::before {
left: 16px;
}
.news-card-timeline {
flex-direction: column;
min-height: auto;
}
.news-image-timeline {
width: 100%;
height: 200px;
}
.content-header {
flex-direction: column;
gap: 15px;
}
.newsletter-card-timeline {
flex-direction: column;
text-align: center;
gap: 25px;
}
.newsletter-content-timeline {
flex-direction: column;
text-align: center;
gap: 15px;
}
.form-input-group {
flex-direction: column;
}
.newsletter-input-timeline {
min-width: auto;
}
.quick-links-grid {
grid-template-columns: 1fr;
}
.news-actions-timeline {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
.timeline-stats {
width: 100%;
justify-content: space-between;
}
}
@media (max-width: 480px) {
.timeline-nav {
padding: 15px;
}
.newsletter-card-timeline {
padding: 25px 20px;
}
.timeline-content-card {
margin: 0 -10px;
}
}
/* =======================================================================
News Modal Styles
======================================================================= */
.news-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.news-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.news-modal {
background: #ffffff;
border-radius: 20px;
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
transform: scale(0.9) translateY(50px);
transition: all 0.3s ease;
position: relative;
}
.news-modal-overlay.active .news-modal {
transform: scale(1) translateY(0);
}
.news-modal-header {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
}
.news-modal-close {
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.news-modal-close:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
}
.news-modal-content {
height: 100%;
max-height: 90vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #006100 #f1f1f1;
}
.news-modal-content::-webkit-scrollbar {
width: 6px;
}
.news-modal-content::-webkit-scrollbar-track {
background: #f1f1f1;
}
.news-modal-content::-webkit-scrollbar-thumb {
background: #006100;
border-radius: 3px;
}
.news-modal-hero {
position: relative;
height: 300px;
overflow: hidden;
}
.news-modal-image {
width: 100%;
height: 100%;
position: relative;
}
.news-modal-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.news-modal-date-badge {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0, 97, 0, 0.9);
color: white;
padding: 8px 15px;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(10px);
}
.news-modal-text {
padding: 40px;
}
.news-modal-text h2 {
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
line-height: 1.3;
}
.news-modal-text h3 {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 500;
color: #666;
margin-bottom: 25px;
line-height: 1.4;
}
.news-modal-body {
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #444;
margin-bottom: 40px;
}
.news-modal-body p {
margin-bottom: 20px;
}
.news-modal-body p:last-child {
margin-bottom: 0;
}
.news-modal-actions {
border-top: 1px solid #eee;
padding-top: 30px;
display: flex;
flex-direction: column;
gap: 30px;
}
.news-modal-stats {
display: flex;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}
.news-modal-stats .stat-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
font-weight: 500;
}
.news-modal-stats .stat-item i {
color: #006100;
font-size: 16px;
}
.news-modal-share h4 {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 15px;
}
.share-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.share-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
color: white;
}
.share-btn.facebook {
background: #1877f2;
}
.share-btn.facebook:hover {
background: #166fe5;
transform: translateY(-2px);
}
.share-btn.twitter {
background: #1da1f2;
}
.share-btn.twitter:hover {
background: #1a91da;
transform: translateY(-2px);
}
.share-btn.whatsapp {
background: #25d366;
}
.share-btn.whatsapp:hover {
background: #22c55e;
transform: translateY(-2px);
}
.share-btn.copy {
background: #6b7280;
}
.share-btn.copy:hover {
background: #4b5563;
transform: translateY(-2px);
}
.share-btn i {
font-size: 16px;
}
/* Mobile Modal Styles */
@media (max-width: 768px) {
.news-modal-overlay {
padding: 10px;
}
.news-modal {
max-height: 95vh;
border-radius: 15px;
}
.news-modal-hero {
height: 200px;
}
.news-modal-text {
padding: 25px 20px;
}
.news-modal-text h2 {
font-size: 22px;
}
.news-modal-text h3 {
font-size: 16px;
}
.news-modal-body {
font-size: 15px;
}
.news-modal-actions {
gap: 20px;
}
.news-modal-stats {
gap: 15px;
}
.share-buttons {
gap: 8px;
}
.share-btn {
padding: 8px 12px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.news-modal-text {
padding: 20px 15px;
}
.news-modal-text h2 {
font-size: 20px;
}
.share-buttons {
flex-direction: column;
}
.share-btn {
justify-content: center;
}
}
/* =======================================================================
Modern Support Center Styles
======================================================================= */
.modern-support-center {
background: linear-gradient(135deg, #f8fffe 0%, #e6f7f1 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.support-center-header {
margin-bottom: 60px;
}
.support-center-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 97, 0, 0.1);
color: #006100;
padding: 8px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.support-center-title {
font-family: 'Inter', sans-serif;
font-size: 42px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
line-height: 1.2;
}
.support-center-subtitle {
font-family: 'Inter', sans-serif;
font-size: 18px;
color: #666;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.contact-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.contact-card {
background: white;
border-radius: 20px;
padding: 35px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 97, 0, 0.1);
}
.contact-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.contact-card-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.contact-icon {
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
position: relative;
}
.address-card .contact-icon {
background: linear-gradient(135deg, #006100, #008000);
}
.phone-card .contact-icon {
background: linear-gradient(135deg, #0066cc, #0080ff);
}
.email-card .contact-icon {
background: linear-gradient(135deg, #ff6b35, #ff8c42);
}
.contact-type h3 {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 5px;
}
.contact-type span {
font-size: 14px;
color: #666;
}
.contact-content {
margin-bottom: 25px;
}
.address-text {
font-size: 16px;
color: #444;
line-height: 1.6;
margin-bottom: 20px;
}
.phone-number {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 700;
color: #0066cc;
margin-bottom: 15px;
}
.phone-availability {
margin-bottom: 20px;
}
.availability-indicator {
display: flex;
align-items: center;
gap: 8px;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #10b981;
position: relative;
}
.status-dot.online::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
.status-text {
font-size: 14px;
color: #10b981;
font-weight: 600;
}
.email-address {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 600;
color: #ff6b35;
margin-bottom: 15px;
}
.email-info {
margin-bottom: 20px;
}
.response-time {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
}
.contact-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.contact-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
color: white;
}
.contact-btn.maps {
background: linear-gradient(135deg, #006100, #008000);
}
.contact-btn.call {
background: linear-gradient(135deg, #0066cc, #0080ff);
}
.contact-btn.whatsapp {
background: linear-gradient(135deg, #25d366, #22c55e);
}
.contact-btn.email {
background: linear-gradient(135deg, #ff6b35, #ff8c42);
}
.contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.contact-decoration {
position: absolute;
top: -50px;
right: -50px;
width: 100px;
height: 100px;
opacity: 0.1;
}
.decoration-circle {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, #006100, #008000);
}
.quick-contact-section {
margin-bottom: 60px;
}
.quick-contact-card {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 0 auto;
}
.form-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 35px;
text-align: left;
}
.form-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #006100, #008000);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: white;
}
.form-title h3 {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.form-title p {
font-size: 16px;
color: #666;
margin: 0;
}
.quick-contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
position: relative;
}
.form-input {
width: 100%;
padding: 15px 20px 15px 50px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 16px;
font-family: 'Inter', sans-serif;
transition: all 0.3s ease;
background: #f9fafb;
}
.form-input:focus {
outline: none;
border-color: #006100;
background: white;
box-shadow: 0 0 0 3px rgba(0, 97, 0, 0.1);
}
.form-input.textarea {
resize: vertical;
min-height: 100px;
}
.form-icon-input {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 16px;
transition: all 0.3s ease;
}
.form-group:focus-within .form-icon-input {
color: #006100;
}
.form-submit-btn {
background: linear-gradient(135deg, #006100, #008000);
color: white;
border: none;
padding: 18px 30px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
.form-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 97, 0, 0.3);
}
.contact-stats-section {
margin-bottom: 40px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.stat-item {
background: white;
border-radius: 15px;
padding: 25px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.stat-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #006100, #008000);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 24px;
color: white;
}
.stat-number {
display: block;
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.support-center-bg-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.support-shape-1 {
position: absolute;
top: 10%;
left: -10%;
width: 200px;
height: 200px;
background: rgba(0, 97, 0, 0.05);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.support-shape-2 {
position: absolute;
bottom: 10%;
right: -10%;
width: 300px;
height: 300px;
background: rgba(0, 97, 0, 0.03);
border-radius: 50%;
animation: float 8s ease-in-out infinite reverse;
}
.bg-grid-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(0, 97, 0, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
opacity: 0.5;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* =======================================================================
Modern Footer Styles
======================================================================= */
.modern-footer {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: #e5e5e5;
position: relative;
overflow: hidden;
}
.footer-main {
padding: 60px 0 40px;
position: relative;
z-index: 2;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-section h4 {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin-bottom: 20px;
position: relative;
}
.footer-section h4::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(135deg, #006100, #008000);
border-radius: 2px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.footer-logo-img {
width: 50px;
height: 50px;
filter: brightness(0) invert(1);
}
.company-name {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 700;
color: #ffffff;
margin: 0;
}
.company-description {
font-size: 14px;
line-height: 1.6;
color: #b3b3b3;
margin-bottom: 25px;
}
.social-media h4 {
font-size: 16px;
margin-bottom: 15px;
}
.social-links {
display: flex;
gap: 12px;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 16px;
}
.social-link.facebook {
background: #1877f2;
}
.social-link.instagram {
background: linear-gradient(135deg, #e1306c, #fd1d1d, #f77737);
}
.social-link.twitter {
background: #1da1f2;
}
.social-link.youtube {
background: #ff0000;
}
.social-link.linkedin {
background: #0077b5;
}
.social-link:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #b3b3b3;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.footer-links a:hover {
color: #006100;
transform: translateX(5px);
}
.footer-links a i {
font-size: 12px;
width: 16px;
}
.contact-items {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.contact-item .contact-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #006100, #008000);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: white;
flex-shrink: 0;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.contact-label {
font-size: 12px;
color: #888;
font-weight: 500;
text-transform: uppercase;
}
.contact-value {
font-size: 14px;
color: #e5e5e5;
line-height: 1.4;
}
.footer-bottom {
background: rgba(0, 0, 0, 0.3);
padding: 25px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.copyright {
font-size: 14px;
color: #b3b3b3;
}
.footer-links-bottom {
display: flex;
gap: 25px;
}
.footer-link {
color: #b3b3b3;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}
.footer-link:hover {
color: #006100;
}
.back-to-top-btn {
background: linear-gradient(135deg, #006100, #008000);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.back-to-top-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 97, 0, 0.3);
}
.footer-bg-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.footer-shape.shape-1 {
position: absolute;
top: 20%;
left: -5%;
width: 150px;
height: 150px;
background: rgba(0, 97, 0, 0.1);
border-radius: 50%;
animation: float 10s ease-in-out infinite;
}
.footer-shape.shape-2 {
position: absolute;
bottom: 20%;
right: -5%;
width: 200px;
height: 200px;
background: rgba(0, 97, 0, 0.05);
border-radius: 50%;
animation: float 12s ease-in-out infinite reverse;
}
.footer-grid-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Responsive Design */
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.contact-cards-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.modern-support-center {
padding: 60px 0;
}
.support-center-title {
font-size: 32px;
}
.contact-card {
padding: 25px;
}
.form-row {
grid-template-columns: 1fr;
}
.quick-contact-card {
padding: 30px 20px;
}
.form-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.footer-links-bottom {
order: -1;
}
}
@media (max-width: 480px) {
.contact-cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.contact-card {
padding: 20px;
}
.contact-actions {
flex-direction: column;
}
.stats-grid {
grid-template-columns: 1fr;
}
.social-links {
justify-content: center;
}
}
/* Form Validation Styles */
.form-input.error {
border-color: #ef4444;
background: #fef2f2;
}
.field-error {
display: block;
color: #ef4444;
font-size: 12px;
margin-top: 5px;
font-weight: 500;
}
.form-group:has(.form-input.error) .form-icon-input {
color: #ef4444;
}
/* Back to Top Button Initial State */
.back-to-top-btn {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
/* =======================================================================
Navigation Login Button Styles
======================================================================= */
.main-nav .login-button {
margin-left: 8px;
}
.main-nav .login-button .login-btn {
background: linear-gradient(135deg, #006100, #008000);
color: white !important;
padding: 3px 8px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 4px;
font-weight: 600;
font-size: 12px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 97, 0, 0.2);
border: 2px solid transparent;
}
.main-nav .login-button .login-btn:hover {
background: linear-gradient(135deg, #008000, #00a000);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 97, 0, 0.3);
border-color: #00ff00;
}
.main-nav .login-button .login-btn i {
font-size: 12px;
}
.main-nav .login-button .login-btn span {
font-family: 'Inter', sans-serif;
}
/* Mobile responsive for login button */
@media (max-width: 768px) {
.main-nav .login-button {
margin-left: 0;
margin-top: 10px;
}
.main-nav .login-button .login-btn {
justify-content: center;
width: 100%;
padding: 12px 20px;
}
}
/* Active state for login button */
.main-nav .login-button .login-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(0, 97, 0, 0.4);
}
/* Focus state for accessibility */
.main-nav .login-button .login-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 97, 0, 0.3);
}
/* =======================================================================
Image Error Handling
======================================================================= */
/* General image error handling */
img {
max-width: 100%;
height: auto;
}
/* Fallback for broken images */
img[src=""],
img:not([src]),
img[src="#"] {
opacity: 0;
}
/* Image loading placeholder */
.img-placeholder {
background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
animation: slide 2s infinite linear;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 14px;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
@keyframes slide {
0% {
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
100% {
background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px;
}
}
/* Specific image containers with fallbacks */
.promo-image,
.hero-image,
.service-icon-large,
.promo-main-image,
.product-img,
.timeline-img {
/* background: #f9f9f9;
border: 1px solid #e0e0e0; */
transition: all 0.3s ease;
}
.promo-image:not([src]),
.hero-image:not([src]),
.service-icon-large:not([src]),
.promo-main-image:not([src]),
.product-img:not([src]),
.timeline-img:not([src]) {
content: 'Image not found';
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
color: #999;
font-size: 14px;
min-height: 200px;
}
/* Error state styling */
.image-error {
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 8px;
}
.image-error::before {
content: '🖼️ Image not available';
font-family: 'Inter', sans-serif;
}