/* General Styles */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

/* Custom Styles */
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
*, html, body {
  font-family: "Mulish", sans-serif;
}
a {
  text-decoration: none;
}
p, .list, select {
  font-size: 1rem;
  color: #333;
}
h2 {
  font-size: 1.75rem;
  font-weight: bold;
}
h4 {
  font-size: 1.15rem;
  font-weight: bold;
}
.bg-primary, .btn-primary {
  background: #0084D7 !important;
}
button #outline-btn:hover {
  color: #0084D7;
  background: rgba(0, 0, 0, 0.05) !important;
}
.btn {
  border-radius: 0.25rem;
  padding: 8px 20px;
}

.btn:focus, a:focus {
  outline: none;
}
.navbar-toggler:focus, .btn:focus, .form-control:focus {
  outline: none !important;
  box-shadow: none;
}

/* Hero Section */
.cta-section {
  padding: 80px 0;
}
.cta-section .cta-text h1 {
  font-size: 54px;
  font-weight: bold;
}
.cta-section .cta-text p {
  font-size: 18px;
  margin-bottom: 20px;
}

/* Page Section */
.page-top-section {
  padding: 60px 0 30px 0;
}
.page-section {
  padding: 40px 0 60px 0;
}
.page-section .heading {
  width: 80%;
}
.page-section h1 {
  font-size: 42px;
}
.feature-icon img {
  width: 30px;
}
.modules_card {
  border-width: 1px  1px 0;
  border-style: solid;
  border-color: #e8e8e8;
  border-radius: 10px;
  padding: 10px 0;
}
.card {
  position: relative;
  border-color: #CDCDCD;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top-right-radius: 4px;
}
.badge-1, .badge-2, .badge-3, .badge-4 {
  width: 23%;
  background: #F2F2FF;
}
.badge-1::before {
  border-top: 30px solid #0084D7;
  border-left: 30px solid transparent;
}
.badge-2::before {
  border-top: 30px solid #61BF33;
  border-left: 30px solid transparent;
}
.badge-3::before {
  border-top: 30px solid #F19900;
  border-left: 30px solid transparent;
}
.badge-4::before {
  border-top: 30px solid #F00001;
  border-left: 30px solid transparent;
}
.card .card-text li, .card p {
  font-size: 15px;
  line-height: 34px;
  color: #616161;
}
/* Features Section */
.ft_img {
  border-radius: 4px;
}
.full_page {
  height: 72.3vh;
}
.half_page {
  height: 55.3vh;
}
/* Alert styling */
.fade-out-up {
  animation: fadeOutUp 0.5s ease-out forwards;
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}



/* Responsive Tweaks */
@media (max-width: 768px) {
  .page-top-section {
    padding: 60px 0 10px 0;
  }
  .btn-lg {
    width: 100%;
    margin-bottom: 10px;
  }

  section {
    text-align: center;
  }

  /* CTA Section */
  .cta-section {
    padding: 50px 0;
  }

  .cta-section .cta-text h1{
    font-size: 32px;
  }

  .cta-section .cta-text p {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .cta-section img {
    width: 400px;
    margin-left: -20px;
  }

  /* Page Section */
  .page-section {
    padding: 20px 0;
    text-align: center;
  }
  .page-section .heading {
    width: 100%;
  }
  .page-section .intern, .page-section form {
    text-align: left;
  }
  .page-section .page-text h1 {
    font-size: 28px;
  }
  .page-section .page-text .btn {
    margin-bottom: 30px;
  }
  .page-section h2 {
    font-size: 24px;
    font-weight: bold;
  }
  .card {
    height: auto;
    padding: 30px 0;
    margin-bottom: 15px;
  }
  .badge-1, .badge-2, .badge-3, .badge-4 {
    width: 100%;
  }
  .card img {
    width: 100%;
    height: 200px;
  }
  .card-body {
    padding: 5px 20px 15px 20px;
  }
  .card-subtitle {
    font-size: 16px;
  }
  .card-text {
    font-size: 16px;
    margin-bottom: 8px;
    text-align: left;
  }
  .card-link {
    font-size: 16px;
  }

  /* Hero Section */
  .hero-section, .footer-section {
    padding: 20px;
  }
  .hero-heading {
    font-size: 28px;
    margin-bottom: 10px;
  }
  .hero-text {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .hero-section img {
    width: 100%;
    margin-top: 20px;
  }

  /* Footer Section */
  #newsletter1 {
    font-size: 16px;
  }
  footer h5 {
    font-size: 18px;
    font-weight: 600;
  }
  footer p, ul li {
    font-size: 16px;
  }
}

/* Form Group Styling */
.modern-form .form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.modern-form h2 {
  font-size: 20px;
  color: #616161;
  font-weight: 600;
}

.modern-form input, .modern-form textarea {
  font-size: 16px;
}

.modern-form .form-control,
.modern-form .form-select,
.modern-form textarea {
  width: 100%;
  padding: 7px 15px !important;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.modern-form .form-control:focus,
.modern-form .form-select:focus,
.modern-form textarea:focus {
  border-color: #0084d7;
  box-shadow: none;
}

/* Label styling for input placeholders */
.modern-form .form-group label {
  position: absolute;
  top: 7px;
  left: 15px;
  font-size: 14px;
  font-weight: 400;
  background-color: white;
  padding: 0 15px;
  color: #616161;
  transition: 0.3s ease;
  pointer-events: none;
}

.modern-form .form-control:focus ~ label,
.modern-form .form-control:not(:placeholder-shown) ~ label,
.modern-form .form-select:focus ~ label,
.modern-form .form-select:not(:disabled):not([value=""]) ~ label,
.modern-form textarea:focus ~ label,
.modern-form textarea:not(:placeholder-shown) ~ label {
  top: -10px;
  left: 15px;
  font-size: 12px;
  color: #0084d7;
}

/* Dropdown Options Styling */
.modern-form .form-select option {
  padding: 10px;
  background-color: white;
  color: #616161;
}

/* Hover Styling for Options */
.modern-form .form-select option:hover {
  background-color: var(--blue);
  color: white;
}

/* Checkbox Group Styling */
.checkbox-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Custom Checkbox Styling */
.custom-checkbox {
  display: flex;
  align-items: center;
}

.custom-checkbox input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-ash);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  margin-right: 10px;
}

.custom-checkbox input[type="checkbox"]:checked {
  background-color: var(--blue);
  border-color: var(--blue);
}

.custom-checkbox input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

.custom-checkbox input[type="checkbox"]:checked::after {
  display: block;
}

.custom-checkbox label {
  display: inline-block;
  color: #333;
  font-size: 16px;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"]:focus {
  outline: none;
  border-color: none;
}
/* Checkbox error message */
.checkbox-err-msg {
  color: red;
  font-size: 14px;
}

/* Error Styling */
.modern-form .form-control.touched:invalid,
.modern-form .form-select.touched:invalid {
  border-color: #f00001;
}

.modern-form .form-group .modern-form textarea {
  resize: none;
  height: 150px;
}

/* Submit Button */
#submit-btn {
  background-color: #f29901;
  border-color: #f29901;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

#submit-btn:active {
  background-color: rgba(242, 153, 1, 0.8);
  color: #fff;
}

#submit-btn:disabled {
  background-color: rgba(242, 153, 1, 0.6);
  cursor: not-allowed;
}

#submit-btn.requesting {
  opacity: 0.6;
  pointer-events: none;
}