/* Themify Customize Styling */
input:read-write,input:read-only,select,textarea {		text-align:center; 
}
input[type=reset], input[type=submit], button, button[type=submit] {	background: none;
	background-color: #116b16;
	color: #ffffff; 
}
input[type=reset]:hover, input[type=submit]:hover, button:hover, button[type=submit]:hover {	background: none;
	background-color: #8cc53f; 
}
#header {	
	margin-bottom: -8px; 
}
#headerwrap.fixed-header #site-logo a img {		width: 50px;
	height: 50px; 
}
#headerwrap.fixed-header #header, #headerwrap.fixed-header #site-description {		text-align:right; 
}
#headerwrap.fixed-header a:hover {	
	color: #abcc16; 
}
body #site-logo a img {		width: 1100px;
	height: 90px; 
}
#site-logo {	
	top: -5px;bottom: auto;
	left: -29px;
	margin-top: -20px;
	margin-bottom: -40px;
	margin-left: 10px; 
}
#site-description {	
	font-family: "ABeeZee";	font-weight:normal;
	font-style:normal;
	font-size:25px;
	text-transform:capitalize;	text-align:right;
	color: #18451d;display: none; 
}
#main-nav {	
	background-color: transparent;
	top: 7px;right: auto;bottom: auto;left: auto;width: auto;
	height: 7px;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 50px; 
}
#main-nav a {	
	padding-right: 20px; 
}
#main-nav a:hover {	
	background-color: transparent; 
}
.post-meta, .loops-wrapper.list-post .post-meta, .single-post .post-meta, .loops-wrapper.grid6 .post-meta, .loops-wrapper.grid5 .post-meta, .loops-wrapper.grid4 .post-meta, .loops-wrapper.grid3 .post-meta, .loops-wrapper.grid2 .post-meta {		text-align:left; 
}
.post-date, .loops-wrapper.list-post .post .post-date, .single #pagewrap .post-content .post-date {	
	color: #8cc53f; 
}
.post-date, .post .post-date .day,.post-date .month, .post .post-date .year, .loops-wrapper.list-post .post .post-date, .single #pagewrap .post-content .post-date, .single-post #pagewrap .post-date-inline .post-date .year {		text-decoration:underline;
	font-weight:normal;
	font-size:12px;
	text-transform:uppercase;	text-align:left; 
}
#footerwrap {	background: none;
	background-color: #012806;background-image: url(https://yagasu.or.id/wp-content/uploads/2021/05/bg_5.png);
	background-size: cover;
	background-position: left top;background-attachment: fixed;
	padding: 180px; 
}
#footer-logo a {	
	font-family: "Palatino", 'Palatino Linotype', 'Book Antiqua', serif;	font-weight:normal;
	letter-spacing:8px;
	font-size:40px;
	text-transform:uppercase;
	color: #2e1717; 
}
#footer {	
	color: #ffffff; 
}
#footer a {	
	color: #ffffff; 
}
#footer-nav {	
	background-size: cover; 
}
#pagewrap .back-top.back-top-float, .full-section-scrolling #footerwrap .back-top .arrow-up a, .footer-horizontal-left #footerwrap .back-top .arrow-up a, .footer-horizontal-right #footerwrap .back-top .arrow-up a, .footer-left-col #footerwrap .back-top .arrow-up a, .footer-right-col #footerwrap .back-top .arrow-up a, #footer .back-top .arrow-up a {	background: none;
	background-color: #012806; 
}
#footerwrap .back-top a:before, #pagewrap .back-top.back-top-float {	
	color: #ffffff; 
}
@media(max-width: 1024px) { /* Themify Customize Styling */
#headerwrap.fixed-header #site-logo a img {		width: 50px;
	height: 50px; 
}
body #site-logo a img {		width: 1100px;
	height: 90px; 
}
 }@media(max-width: 768px) { /* Themify Customize Styling */
#headerwrap.fixed-header #site-logo a img {		width: 50px;
	height: 50px; 
}
body #site-logo a img {		width: 1100px;
	height: 90px; 
}
 }@media(max-width: 600px) { /* Themify Customize Styling */
input[type=reset], input[type=submit], button, button[type=submit] {	background: none;
	background-color: #116b16;
	color: #ffffff; 
}
input[type=reset]:hover, input[type=submit]:hover, button:hover, button[type=submit]:hover {	background: none;
	background-color: #8cc53f; 
}
#headerwrap.fixed-header #site-logo a img {		width: 50px;
	height: 50px; 
}
body #site-logo a img {	
	height: 70px; 
}
#site-description {		font-weight:normal;
 
}
#main-nav {	
	width: 677px; 
}
.post-date, .loops-wrapper.list-post .post .post-date, .single #pagewrap .post-content .post-date {	
	color: #8cc53f; 
}
.post-date, .post .post-date .day,.post-date .month, .post .post-date .year, .loops-wrapper.list-post .post .post-date, .single #pagewrap .post-content .post-date, .single-post #pagewrap .post-date-inline .post-date .year {		font-weight:normal;
 
}
#footerwrap {	background: none;
	background-color: #012806;
	background-size: cover;
	background-position: left top; 
}
#footer-logo a {	
	font-family: "Palatino", 'Palatino Linotype', 'Book Antiqua', serif;	font-weight:normal;

	color: #2e1717; 
}
#footer {	
	color: #ffffff; 
}
#footer a {	
	color: #ffffff; 
}
#footer-nav {	
	background-size: cover; 
}
#pagewrap .back-top.back-top-float, .full-section-scrolling #footerwrap .back-top .arrow-up a, .footer-horizontal-left #footerwrap .back-top .arrow-up a, .footer-horizontal-right #footerwrap .back-top .arrow-up a, .footer-left-col #footerwrap .back-top .arrow-up a, .footer-right-col #footerwrap .back-top .arrow-up a, #footer .back-top .arrow-up a {	background: none;
	background-color: #012806; 
}
#footerwrap .back-top a:before, #pagewrap .back-top.back-top-float {	
	color: #ffffff; 
}
 }
/* Themify Custom CSS */
zoom kotak in

.petak-image-hover {
    width: 300px;                /* Ukuran lingkaran */
    height: 200px;               /* Tinggi lingkaran */
    border-radius: 100%;          /* Membuat bentuk lingkaran */
    overflow: hidden;            /* Memastikan gambar tidak keluar dari lingkaran */
    position: relative;          /* Untuk positioning internal */
    display: block;
}

.petak-image-hover img {
    width: 100%;                 /* Gambar akan memenuhi lingkaran */
    height: 100%;
    object-fit: cover;           /* Menjaga proporsi gambar dalam lingkaran */
    transition: transform 0.9s ease; /* Transisi zoom yang halus */
}

.petak-image-hover:hover img {
    transform: scale(1.2);       /* Zoom 120% saat di-hover */
}


.image-container {
    display: flex;
  
    overflow: hidden;
}

.image-box {
    flex: 1;
    transition: flex 0.3s ease;
}

.image-box img {
    width: 100%;
    height: auto;
    transition: transform 0.9s ease;
}

.image-box:hover {
    flex: 2;
}

.image-box:hover img {
    transform: scale(1.1);
}

button

.button {
  position: relative; /* Agar bisa digerakkan */
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  transition: transform 0.9s ease; /* Animasi yang halus */
}

.button:hover {
  transform: translateX(10px); /* Pindah 10px ke kanan saat hover */
}

tunggu lain