@charset "UTF-8";

body {font-family: 'Arson Pro', sans-serif;
	padding: 0px;
	margin: 0px;}

h1,h2,h3 {font-family: 'Arson Pro', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;}

.header {display: flex; 
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding: 0,5rem 1rem;
}

nav {display: flex;
	flex: 1;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center; 
}

nav a {margin: 20px;
text-decoration:none;
font-weight: 700;
color: black
}

.flag:hover{transition:0.5s; filter: brightness(0.8); cursor: pointer}

.navbar {align-content: center}


nav a:hover { color: darkgrey;
border-bottom: 0.5px solid #000000;
text-align:center;transition: 0.3s

}

.navbar {
  display: flex;
  flex-wrap: wrap;
}

.button {background-color: #13065E; 
	color: white;
	font-family: "Arson Pro", sans-serif;
	font-weight: 700;
	transition: 0.3s ease;
	padding: 20px ;
	font-size: 13pt ;
	border: none;
	margin-left: 15px
	
}

.col img{justify-content: center}

button:hover {background-color:#7AA1EC}

.tanggal {font-weight: 20px; 
	font-style: oblique;
	font-family: 'Arson Pro',sans-serif;
	font-size: 10px;
	color: #727272 }

.col img {width: 80%; 
	margin-top:100px;
	align-items: center; 
}

.rups:hover{transition:0.5s;
filter: brightness(0.8);
cursor: pointer
}

.newsbutton {padding: 17px 24px;
	font-size:15px; 
	font-weight: 500px;
	font-family: 'Arson Pro',sans-serif;
	background-color: #13065E;
	color: white; 
	border: none;
	transition: 0.3s
}
.newsimg:hover {transition:0.5s;
filter: brightness(0.8);
cursor: pointer}

.col {text-align: left}

.footer {padding: 40px;
	background-color:#000000;
	color: #FFFFFF;
	text-align:center;
	font-weight: 400px;
}
.row {display:flex; justify-content: 
	space-between; 
	gap: 1rem;}

.read {font-weight: 400px; 
	color:#2da127 ; 
	font-size: 18px; 
	font-family: 'Arson Pro', sans-serif}
.read:hover {color: #5B6F5A;transition: 0.3s;cursor: pointer}

.main {
  position: relative;
  height: 100vh;
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("../images/Machine 2 Dharma.png") center/cover no-repeat;
	overflow: hidden
}

.text-overlay {
  position: absolute;
  top: 55%;
  left: 5%;
  transform: translateY(-50%);
  color: white;
  width: 40%;
  display: block;  
  flex: none;
	  
}

.text-overlay h1 {
  font-size: 2.5rem;
  margin-bottom: 30px;
	text-align: left;
	margin: 0 0 20px 0	
}

.text-overlay p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 30px;
	text-align: left;
		margin: 0 0 80px 0
}		

.text-overlay,
.text-overlay div,
.text-overlay h1,
.text-overlay p {
  text-align: left;
  justify-content: flex-start ;
  align-items: flex-start;
}

.text-overlay h1 {
  font-size: 2.5rem;
  margin: 0 0 15px 0;
  padding: 0;
  width: 100%;
}

.text-overlay p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0 0 70px 0;
  padding: 0;
	width: 100%;}

.section:hover{color: #A2A2A2;transition:0.6s; cursor:pointer;transform: translate(17px)}

.centerimage {margin:20px;margin-bottom: 120px; display: flex; gap: 80pt;padding-top: 50px; justify-content: center;}

.rightcenter {justify-content: space-between}

.footer-top {
  background-color: #13065e;
  color: white;
  padding: 30px 20px;
  font-family: 'Arson Pro', sans-serif;
}

.footeredit {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.footer-left {
  width: 20%;
}

.footer-right {
  width: 50%;
}

.footer-left h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.footer-left h2 {
  font-size: 1.rem;
  margin-bottom: 20px;
}

.alamat p {
  line-height: 1.5;
  margin-bottom: 25px;
  font-size: 1rem;
}

.footerbutton {
  padding: 12px 30px;
  font-family: 'Arson Pro', sans-serif;
  font-size: 1rem; 
  font-weight: 600;
  background-color: #2da127; 
  border: none; 
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.3s;
}

.footerbutton:hover {
  background-color: #525552;
}

.footer-right h3 {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
  font-size: 1rem;
  position: relative;
  padding-left: 20px;
}

.footer-links li:before {
  content: "•";
  color: #2da127;
  position: absolute;
  left: 0;
}

.footer-right a {
  color: inherit ;
  text-decoration: none; 
}


.footer-right a:hover {
  color: gray;
  text-decoration: none;
}


@media (max-width : 10px ){
  .footeredit {
    flex-direction: column;
    gap: 30px;
  }
  
  .footer-left,
  .footer-right {
    width: 100%;
  }
  
  .footer-right {
    margin-top: 30px;
  }
}
.dropdown {
        position: relative;
        display: inline-block;
    }
    
    
    .dropbtn {
        padding: 16px;
        text-decoration: none;
        color: inherit;
    }
    
   
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #FFFFFF;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    
   
    .dropdown:hover .dropdown-content {
        display: block;
    }
 
.socials {margin-left:-10px; margin-top:-50px }

.socials:hover{cursor: pointer}

@media (max-width: 767px) {
  .main {
    height: auto;
    min-height: 100vh;
    padding: 60px 20px;
  }
  
  .text-overlay {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    padding: 20px;
  }
  
  .text-overlay h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .text-overlay p {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  .centerimage {
    flex-direction: column;
    gap: 40px;
    padding: 30px 20px;
    margin-bottom: 60px;
  }
  
  .rightcenter {
    flex-direction: column;
    gap: 40px;
  }
  
  iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  
  .rups {
    width: 100%;
  }
  
  .row {
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }
  
  .col {
    width: 100%;
    margin-top: 40px;
  }
  
  .col img {
    width: 100%;
    margin-top: 0;
  }
  
  .header {
    flex-direction: column;
    padding: 1rem;
  }
  
  .navbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
  }
  
  nav a {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .button {
    padding: 15px;
    font-size: 0.9rem;
    margin-left: 0;
  }
  
  hr {
    width: 90%;
    margin-bottom: 60px;
  }
  
  .footeredit {
    flex-direction: column;
    gap: 30px;
  }
  
  .footer-left, 
  .footer-right {
    width: 100%;
  }
  
  .socials {
    margin: 0 0 1rem 0;
  }
}

/* Tablet (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .text-overlay {
    width: 60%;
  }
  
  .centerimage {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .rightcenter {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .row {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .col {
    width: 45%;
    min-width: 300px;
  }
}

/* Small Desktop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .text-overlay {
    width: 50%;
  }
  
  .centerimage {
    gap: 40px;
  }
}
@media (max-width: 991px) {
  .row {
    justify-content: center !important;
    padding-left: 0 !important;
  }
  
  .col {
    text-align: center;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .col h4,
  .col h5,
  .col h3 {
    text-align: center;
  }
  
  .newsimg {
    margin-left: auto;
    margin-right: auto;
  }
}@media (min-width: 768px) and (max-width: 991px) {
  
  .row {
    justify-content: center;
    padding-left: 0;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  
  .col {
    text-align: center;
  }
}



.text-overlay a {
  color: inherit;       
  text-decoration: none; 
}

.text-overlay a:hover {
  color: #A2A2A2;       
}




body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

* {
    box-sizing: border-box; /* Include padding/borders in width calculations */
}
.dropdown:focus-within .dropdown-content {
    display: block;
}

.dropbtn:focus + .dropdown-content {
    display: block;
}
}