.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 400px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  animation: slideIn 0.5s ease;
}

@keyframes slideIn {
  from { transform: translateY(-200px); }
  to { transform: translateY(-50%); }
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.form-group {
  margin-bottom: 15px;
}



.submit-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
}


 /* Disabled button styling (gray) */
  #btn-support:disabled {
    background-color: #b0b0b0;  /* Gray color */
    color: #fff;
    cursor: not-allowed;
  }

  /* Styling for active button (when enabled) */
  #btn-support:not(:disabled) {
    background-color: #007bff; /* Blue color for active button */
    color: #fff;
  }

/* Hide reCAPTCHA initially */
    #recaptcha-container {
      display: none;
      margin-top: 10px;
    }
	
	
	/* Custom CSS for image compression and optimization */
		@font-face{font-family:WWF;src:url(./WWF.otf) format("opentype")}
		 body h1, h2, h3, h4, a {
            font-family: WWF !important;
        }
		
		
		
        img {
            width: 100%;
            height: auto;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            object-fit: cover;
        }

        
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }

        /* Centering text and button in hero section */
        .hero-content h1 {
            font-size: 4.5rem;
        }
		
		.hero-content {
			padding: 30px;
			text-align: left;
		}

        .hero-content p {
            font-size: 1rem;
            margin-bottom: 20px;
        }

        /* Footer */
        footer {
            margin-top: 50px;
        }
		
		
		
		/* Floating Navbar */
		.navbar {
			position: fixed;
			top: 0;
			width: 100%;
			background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
			z-index: 10; /* Ensure it stays on top of the hero section */
		}

		/* Adjust the links' colors for contrast */
		.navbar .nav-link {
			color:white;
		}

		.navbar .nav-link:hover {
			color: orange; /* Slightly darker on hover */
		}
		
		.navbar-toggler {
			background-color:white;
		}
		
		.navbar-nav {
			text-align:center;
		}
		
		/* Logo Overlay */
.logo-overlay {
    position: fixed;
    top: 0px; /* Adjust for spacing */
    left: 10%;
    transform: translateX(-50%); /* Center the logo horizontally */
    z-index: 10; /* Place above other elements */
}

.logo-overlay img {
    width: 170px; /* Adjust the size of the logo as needed */
    height: auto;
    background: white; /* Background to make it stand out */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.spt {
background-color:black;
color:white;
}

.spt:hover {
color:black !important;
background-color: orange !important;
}
		
		#contact {
		color:white;
		}
		
		footer {
			margin-top: 0px !important;
		}
		
		.privacy {
			font-size: 11px !important;
		}
		
		input::placeholder {
            font-size: 15px; /* Ukuran font untuk placeholder */
            color: gray; /* Warna placeholder opsional */
        }
		
		form .lbl {
			color: #1E5C41;
		}
		
		
		.qtystrong {
			font-size: 30px;
		}
		
		#about, #about3 {
		text-align: center;
		}
		
		#about img {
		 border-radius:10px;
		 height:250px;
		}
		
		#about2 .card {
			opacity: 0.8;
			padding: 20px;
			border-radius: 20px;
		}
		
		#about2 {
			margin-bottom: 40px;
			border-radius: 30px;
		}
		
		
		
		#about3 img {
			max-width: 120px; /* Adjust size of the images */
			height: auto; /* Maintain aspect ratio */
			margin: 0 auto; /* Center the image inside the column */
			display: block; /* Ensure the image is treated as a block element for centering */
		}
		
		
		#totalAmount, #totalAmountDuplicate {
		 color: #8FBBFF;
		}
		
		.btn-custom:disabled {
            cursor: not-allowed; /* Disable pointer events */
        }
        .btn-custom:disabled:hover {
            background-color: #6c757d; /* Gray color */
            border-color: #6c757d; /* Gray border */
        }
		
		.logo-overlay {
			display: none;
		}
		
		#form-mobile {
			display: none;
		}
		
		#about ul {
			text-align: left;
		}
		
		#form-mobile-duplicate {
			display:none;
		}
		
		/* Mobile-specific adjustments */
@media (max-width: 768px) {
	
	#btn-tnm-middle {
		width:70% !important;
	}
	
	#form-mobile-duplicate {
			display:block;
		}
		
	.form-web {
		display: none !important;
	}
		
	.btn-mobile {
		display: block !important;
	}
		
		
		
    .hero-section {
        height: 60vh; /* Reduce height on smaller screens */
        background-position: top; /* Adjust positioning */
    }
	
	.plnt {
		width: 230px !important;
	}

    .hero-content h1 {
        font-size: 2.0rem; /* Smaller text */
    }
	
	.hero-content {
			padding: 0px;
			text-align: left;
		}

    .hero-content p, ol {
        font-size: 12px;
    }
	
	.hidemobile {
		display: none;
	}
	
	#about .col-lg-3 {
		margin-bottom: 50px !important;
	}
	
	#about2 .row {
			padding: 0 0px !important;
		}
		
		#about3 img {
			max-width: 200px !important;
		}
		
		#about3 .col-lg-2 {
			margin-bottom: 50px !important;
		}
		
		.logo-overlay {
			display: block !important;
			right: 320px !important
		}
		
		.img-fluid-logo {
		  max-width:45% !important;
		}
		
		.hero-footer h1 {
			font-size:3.2rem;
		}
}