/* basic */
*, :after, :before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

body {
  background: #f3f0e7;
  font-family: Roboto, sans-serif;
  color: #4b5563;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to right, #2b32b2, #1488cc);
}

h3 {
  margin: 0 0 0.5rem 0;
  color: #999;
  font-size: 1.25rem;
}

p {
  margin: 0 0 5rem 0;
  font-size: 1.8rem;
  color: #333;
}

/* box */
.wrapper {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-direction: column;
  
}

/* button */
.btn_primary {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #FF8E61, #FF6622);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(255, 94, 98, 0.3);
  transition: all 0.2s ease-in-out;
}

.btn_primary:hover {
  box-shadow: 0 6px 8px rgba(255, 94, 98, 0.5);
  transform: translateY(-2px);
}

/* option */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

.nice-form-group {
  --nf-input-size:1rem;
  --nf-input-font-size:calc(var(--nf-input-size)*0.875);
  --nf-small-font-size:calc(var(--nf-input-size)*0.875);
  --nf-input-font-family:inherit;
  --nf-label-font-family:inherit;
  --nf-input-color:#20242f;
  --nf-input-border-radius:0.25rem;
  --nf-input-placeholder-color:#929292;
  --nf-input-border-color:#c0c4c9;
  --nf-input-border-width:1px;
  --nf-input-border-style:solid;
  --nf-input-border-bottom-width:2px;
  --nf-input-focus-border-color:#3b4ce2;
  --nf-input-background-color:#f9fafb;
  --nf-invalid-input-border-color:var(--nf-input-border-color);
  --nf-invalid-input-background-color:var(--nf-input-background-color);
  --nf-invalid-input-color:var(--nf-input-color);
  --nf-valid-input-border-color:var(--nf-input-border-color);
  --nf-valid-input-background-color:var(--nf-input-background-color);
  --nf-valid-input-color:inherit;
  --nf-invalid-input-border-bottom-color:#FF6622;
  --nf-valid-input-border-bottom-color:green;
  --nf-label-font-size:var(--nf-small-font-size);
  --nf-label-color:#374151;
  --nf-label-font-weight:500;
  --nf-slider-track-background:#dfdfdf;
  --nf-slider-track-height:0.25rem;
  --nf-slider-thumb-size:calc(var(--nf-slider-track-height)*4);
  --nf-slider-track-border-radius:var(--nf-slider-track-height);
  --nf-slider-thumb-border-width:2px;
  --nf-slider-thumb-border-focus-width:1px;
  --nf-slider-thumb-border-color:#fff;
  --nf-slider-thumb-background:var(--nf-input-focus-border-color);
  display: block;
  margin-top: calc(var(--nf-input-size)*1.5);
  line-height: 1;
  white-space: nowrap;
  --switch-orb-size:var(--nf-input-size);
  --switch-orb-offset:calc(var(--nf-input-border-width)*2);
  --switch-width:calc(var(--nf-input-size)*2.5);
  --switch-height:calc(var(--nf-input-size)*1.25 + var(--switch-orb-offset));
}

.nice-form-group > .nice-form-group {
  margin-top: calc(var(--nf-input-size)/2);
}

.nice-form-group > input[type=checkbox], .nice-form-group > input[type=date], .nice-form-group > input[type=email], .nice-form-group > input[type=month], .nice-form-group > input[type=number], .nice-form-group > input[type=password], .nice-form-group > input[type=radio], .nice-form-group > input[type=search], .nice-form-group > input[type=tel], .nice-form-group > input[type=text], .nice-form-group > input[type=time], .nice-form-group > input[type=url], .nice-form-group > input[type=week], .nice-form-group > select, .nice-form-group > textarea {
  background: var(--nf-input-background-color);
  font-family: inherit;
  font-size: var(--nf-input-font-size);
  border-bottom-width: var(--nf-input-border-width);
  font-family: var(--nf-input-font-family);
  box-shadow: none;
  border-radius: var(--nf-input-border-radius);
  border: var(--nf-input-border-width) var(--nf-input-border-style) var(--nf-input-border-color);
  border-bottom: var(--nf-input-border-bottom-width) var(--nf-input-border-style) var(--nf-input-border-color);
  color: var(--nf-input-color);
  width: 100%;
  padding: calc(var(--nf-input-size)*0.75);
  height: calc(var(--nf-input-size)*2.75);
  line-height: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.15s ease-out;
  --icon-padding:calc(var(--nf-input-size)*2.25);
  --icon-background-offset:calc(var(--nf-input-size)*0.75);
}

.nice-form-group > input[type=checkbox]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=date]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=email]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=month]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=number]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=password]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=radio]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=search]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=tel]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=text]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=time]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=url]:required:not(:placeholder-shown):valid, .nice-form-group > input[type=week]:required:not(:placeholder-shown):valid, .nice-form-group > select:required:not(:placeholder-shown):valid, .nice-form-group > textarea:required:not(:placeholder-shown):valid {
  background-color: var(--nf-valid-input-background-color);
  border-bottom-color: var(--nf-valid-input-border-color);
  border-color: var(--nf-valid-input-border-color) var(--nf-valid-input-border-color) var(--nf-valid-input-border-bottom-color);
  color: var(--nf-valid-input-color);
}

.nice-form-group > input[type=search]:-moz-placeholder-shown {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-position: left calc(var(--nf-input-size)*0.75) bottom 50%;
  padding-left: calc(var(--nf-input-size)*2.25);
  background-size: var(--nf-input-size);
  background-repeat: no-repeat;
}

.nice-form-group > input[type=search]:-ms-input-placeholder {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-position: left calc(var(--nf-input-size)*0.75) bottom 50%;
  padding-left: calc(var(--nf-input-size)*2.25);
  background-size: var(--nf-input-size);
  background-repeat: no-repeat;
}


.nice-form-group > input[type=checkbox].switch:checked:after {
  transform: translateY(-50%) translateX(calc(var(--switch-width)/2 - var(--switch-orb-offset)));
  background: #fff;
}

.nice-form-group > select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right calc(var(--nf-input-size)*0.75) bottom 50%;
  background-repeat: no-repeat;
  background-size: var(--nf-input-size);
}

/* Background Animation */
.wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: -1;
  animation: fadeInBackground 2s ease-in-out forwards;
}

/* Blog post styling */
.blog_post {
  position: absolute;
  top: -150%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  max-width: 600px;
  width: 100%;
  border-radius: 15px;
  box-shadow: 2px 2px 3rem rgba(0, 0, 0, 0.4);
  padding: 7rem 3rem 3rem ;
  opacity: 0;
  animation: slideInCard 1s ease-in-out 0.5s forwards;

}

.img_pod {
  height: 163px;
  width: 163px;
  background: linear-gradient(90deg, #FF8E61, #FF6622);
  z-index: -1;
  box-shadow: 0.5px 0.5px 2rem rgba(0, 0, 0, 0.4);
  border-radius: 100%;
  position: absolute;
  left: -75px;
  top: 15px;
  transform: translateY(-50%);
  z-index: 2; /* Pastikan .img_pod berada di atas .blog_post */
  margin-bottom: -75px;
}

img {
  height: 150px;
  width: 150px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  box-shadow: 2px 2px 3rem rgba(0, 0, 0, 0.4);
}

/* Animasi */
@keyframes fadeInBackground {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

/* Animasi untuk blog card */
@keyframes slideInCard {
  0% {
    top: -150%;
    opacity: 0;
  }
  100% {
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

h1 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  color: #333;
}

/* Validasi untuk Select */
.nice-form-group > select:required:not(:placeholder-shown):valid {
  border-bottom-color: var(--nf-valid-input-border-bottom-color); /* Warna hijau untuk valid */
}

.nice-form-group > select:required:not(:placeholder-shown):invalid {
  border-bottom-color: var(--nf-invalid-input-border-bottom-color); /* Warna merah untuk invalid */
}

/* Placeholder Styling */
option:disabled {
  color: #aaa;
  font-style: italic;
}

/* General Select Styling */
select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  appearance: none; /* Menghapus gaya default browser */
  background: #fff url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 0.75rem center;
  background-size: 1rem;
  transition: border-color 0.3s ease-in-out; /* Efek transisi untuk border */
}

/* Hover dan Focus Styling */
select:focus {
  outline: none;
  border-color: #3b4ce2; /* Warna biru saat fokus */
  box-shadow: 0 0 0 2px rgba(59, 76, 226, 0.2); /* Efek glow saat fokus */
}

/* Navbar Styling */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-brand {
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}

.navbar-menu {
  display: flex;
  gap: 1rem;
}

.navbar-menu a {
  color: #333;
  text-decoration: none;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.navbar-menu a:hover {
   background-color: #FF6622;
}

/* Responsive Navbar */
@media (max-width: 768px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
  }

  .navbar-brand {
    order: 1;
  }

  .navbar-menu {
    display: none;
    flex-direction: column;
    background-color: #fff;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    padding: 1rem;
  }

  .navbar-menu.active {
    display: flex;
  }

  .navbar-toggle {
    display: block;
    color: #333;
    font-size: 1.5rem;
    cursor: pointer;
    order: 2;/
            }
        }

/* Layout for Desktop and Tablet */
@media (min-width: 769px) {
  .navbar {
    justify-content: flex-start;
    gap: 2rem;
  }

  .navbar-brand {
    order: 2;
    margin-left: auto;
  }

  .navbar-menu {
    order: 1;
  }

  .navbar-toggle {
    display: none;
  }
}

/* General Styling */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.wrapper {
  padding-top: 60px;
}