/* news */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15vh 0;
}
.form-group-inline {
    display: flex;
    gap: 10px;
}

/* chat */
.chat-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--light-green-color);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}


header {
    text-align: left;
    margin-bottom: 20px;
}

header h1 {
    font-size: 36px;
}

header p {
    font-size: 16px;
    color: #666;
}

/*.navbars {*/
/*    display: flex;*/
/*    justify-content: left;*/
/*    gap: 15px;*/
/*    margin-top: 10px;*/
/*}*/

/*.navbars a {*/
/*    text-decoration: none;*/
/*    color: #333;*/
/*    padding: 8px 8px;*/
/*    border-radius: 5px;*/
/*}*/

/*.navbars a.active {*/
/*    background-color: #006400;*/
/*    color: #fff;*/
/*}*/

.title-login {
    font-size: 32pt;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-right: 1rem;
}


.gr-box {
    background-color: #f9f9f9;
    background-size: cover;
    background-position: center;
    /*position: absolute;
    top:90%;*/
    top: auto;
    height: auto;
    width: 100%;
    padding: 4vh;
}

.background-2 p{
    font-size: clamp(60px, 3vw, 70px);
    color: black;
    padding-left: 5vh;
    font-weight: lighter;
}

.news-text {
    font-size: clamp(20px, 1vw, 30px);
    color: black;
    padding-left: 5vh;
}

/* Ubah warna teks dan border tombol navigasi */
.nav-pills .nav-link {
    color: #008000 !important; /* Hijau untuk teks tombol */
    background-color: transparent; /* Background transparan untuk tombol default */
    transition: all 0.3s ease; /* Efek transisi untuk hover */
}

/* Warna teks tombol ketika aktif */
.nav-pills .nav-link.active {
    color: #fff !important; /* Warna teks putih */
    background-color: #008000 !important; /* Latar belakang hijau */
    border-color: #008000 !important; /* Border hijau */
}

/* Hover pada tombol navigasi */
.nav-pills .nav-link:hover {
    color: #fff !important; /* Teks putih saat hover */
    background-color: #006400 !important; /* Hijau tua saat hover */
}


/*.subscribes {*/
/*    display: flex;*/
/*    background-image: url('../assets/images/home/kapal-cargo-view.jpg');*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    justify-content: center;*/
/*    text-align: center;*/
/*    color: white;*/
/*    height: 420px;*/

/*}*/

/*.subscribes {*/
/*    display: flex;*/
/*    align-items: right;*/
/*    margin-left: 300px;*/
/*}*/

/*.subscribes p {*/
/*    padding-top: 5px;*/
/*    font-size: 16px;*/
/*    width: 180px;*/
/*    color: #666;*/
/*}*/

/*.subscribes input[type="email"] {*/
/*    padding: 8px;*/
/*    border: 1px solid #ddd;*/
/*    border-radius: 5px;*/
/*}*/

/*.subscribes button {*/
/*    background-color: #006400;*/
/*    color: white;*/
/*    border: none;*/
/*    padding: 8px 15px;*/
/*    margin-left: 5px;*/
/*    border-radius: 5px;*/
/*    cursor: pointer;*/
/*}*/

/* news  */
.news-grid {
    display: flex;
    /*justify-content: space-between;*/
    gap: 20px;
}
.news-grid a {
    text-decoration: none;
}

.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /*width: 500px;*/
    /*height: 700px;*/
    margin: 10px;
    overflow: hidden;
    position: relative;
}

.news-card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.news-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
    justify-content: space-between;

}

.news-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.news-description {
    font-size: 14px;
    color: #555;
}

.read-more {
    font-size: 14px;
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.read-more i {
    margin-left: 5px;
}

.news-card2 {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /*width: 25vw;*/
    /*margin: 20px;*/
    overflow: hidden;
    height: 500px;
    transition: transform 0.2s;
}
.news-card2 img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.news-card2:hover {
    transform: translateY(-5px);
}

.news-card3 {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /*width: 25vw;*/
    height: 500px;
    margin: 20px;
    overflow: hidden;
    transition: transform 0.2s;
}
.news-card3 img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}
.news-card3:hover {
    transform: translateY(-5px);
}
.news-content {
    padding: 20px;
    height: auto;
}
.date {
    font-size: 12px;
    color: var(--grey-color);
    margin-bottom: 10px;
}
.news-date {
    font-size: clamp(15px, 1vw, 30px);
    color: var(--grey-color);
    margin-bottom: 10px;
    font-weight: lighter;
}
.news-content h1 {
    font-size: 18pt;
    font-weight: bold;
    margin-bottom: 10px;
}
.news-title {
    font-size: clamp(20px, 1.5vw, 50px);

    font-weight: normal;
    margin-bottom: 10px;
    text-decoration: none;
    color: #000;
}
.news-description {
    font-size: clamp(15px, 1vw, 30px);
    color: var(--grey-color);
    margin-bottom: 20px;
}

.read-mores {
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: right;
    border-radius: 4px;
    text-align: right;
    color: #000;
    /*margin-left: 45vw;*/
}
.pagination {
    display: flex;
    align-items: center;
    /*margin-left: 40vw;*/
    justify-content: center;
    padding-bottom: 10vh;
}
.pagination a {
    text-decoration: none;
    color: black;
    margin: 0 10px;
    font-size: 18px;
}
.pagination a.active {
    text-decoration: underline;
}
.pagination .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    color: black;
    text-decoration: none;
}

/* footer  */
/* Gambar latar belakang */
.footer {
    background-color: #fff;
    padding: 40px;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*width: 100%;*/
    /*position: relative;*/
}



.img-footer {
    /*margin-bottom: 20px;*/
}

.subscribe-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    max-width: 300px;
}

.subscribe-container input[type="email"] {
    border: none;
    padding: 10px;
    flex: 1;
    font-size: 14px;
}

.subscribe-container button {
    background-color: #2d4b1a;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
}

.footer h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #000;
}

.footer a, .footer p {
    color: #00000080;
    text-decoration: none;
    font-size: 14px;
    margin: 5px 0;
    display: block;
}

.footer a:hover {
    color: darkgray;
}

.terms {
    margin-top: 10px;
}

.horizontal-line {
    border-top: 1px solid #ccc;
    /*width: 205%; !* Spans across both columns *!*/
    margin: 20px 0;
}

.footer-social {
    display: flex;
    /*align-items: center;*/
    /*position: absolute;*/
    /*bottom: 60px;*/
    /*right: 20px;*/
}

.footer-social a {
    margin-right: 25px; /* Adjust this value to control the spacing */
}

.footer-social a:last-child {
    margin-right: 0; /* Remove margin from the last icon */
}

/* footer  */
/* Gambar latar belakang */
.background-20 {
    background-image: url('../../../img/astrika/about/industrial.jpg');
    background-size: cover;
    background-position: center;
    margin: auto;
    height: 80vh;
    background-repeat: no-repeat;
}

.lis-putih {
    height: 90%;
    width: 95%;
    margin: auto;
    justify-content: center;
    text-align: center;
    align-content: center;
    border: 2px solid #fff;
    transform: translate(0%, 6%);
}

.text-2 {
    display: flex;
    color: #fff;
    justify-content: center;
    padding: 80px;
    font-size: 40px;
}

.background-21 {
    align-items: center;
    color: black;
    margin-left: 32vw;

}

.img-text-33 {
    color: #fff;
    font-size: 14pt;
    /*margin-left: -2vw;*/
}

.background-22 {
    align-items: center;
    color: black;
    /*margin-left: 52vw;*/
    /*margin-top: -5.2rem;*/

}

.img-text-4 {
    color: #fff;
    font-size: 14pt;
    margin-left: -3vw;
}