body p{
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    margin-bottom:10px;
}

.btn-style-1 {
  margin-left: auto;
  margin-right: auto;

  display: inline-flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */

  background-color: #b91c1c; /* bg-red-700 */
  color: #ffffff;

  padding: 0.5rem 1.5rem; /* py-2 px-6 */

  border-radius: 9999px; /* rounded-full */

  transition: background-color 150ms ease-in-out;
}

.btn-style-1:hover {
  background-color: #991b1b; /* hover:bg-red-800 */
}

/* -----------------------------------
   Base Input
----------------------------------- */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0.375rem;
  background: #ffffff;
  color: #111827; /* gray-900 */
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input::placeholder {
  color: #9ca3af; /* gray-400 */
}

.form-input:focus {
  border-color: #3b82f6; /* blue-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
  outline: none;
}

/* -----------------------------------
   Textarea
----------------------------------- */
.form-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #ffffff;
  color: #111827;
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-textarea::placeholder {
  color: #9ca3af;
}

.form-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
  outline: none;
}

/* -----------------------------------
   Select
----------------------------------- */
.form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #ffffff;
  color: #111827;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
  outline: none;
}

/* -----------------------------------
   Label
----------------------------------- */
.form-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: #374151; /* gray-700 */
}

/* -----------------------------------
   Help Text
----------------------------------- */
.form-help {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280; /* gray-500 */
}

/* -----------------------------------
   Error Text
----------------------------------- */
.form-error {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #dc2626; /* red-600 */
}

/* -----------------------------------
   Error State (Input)
----------------------------------- */
.form-input-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.4) !important;
}

/* -----------------------------------
   Disabled State
----------------------------------- */
.form-disabled {
  background: #f3f4f6; /* gray-100 */
  border-color: #e5e7eb; /* gray-200 */
  color: #9ca3af;
  cursor: not-allowed;
}

/* -----------------------------------
   Checkbox
----------------------------------- */
.form-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  accent-color: #3b82f6; /* blue-500 */
}

/* -----------------------------------
   Radio
----------------------------------- */
.form-radio {
  width: 1rem;
  height: 1rem;
  accent-color: #3b82f6;
}

/* -----------------------------------
   Toggle Switch
----------------------------------- */
.form-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.form-toggle {
  position: relative;
  width: 2.5rem;
  height: 1.25rem;
  background: #d1d5db;
  border-radius: 9999px;
  transition: background 0.2s;
}

.form-toggle-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.form-toggle-input:checked + .form-toggle {
  background: #3b82f6;
}

.form-toggle-input:checked + .form-toggle .form-toggle-thumb {
  transform: translateX(1.25rem);
}

/* -----------------------------------
   Form Group Wrapper
----------------------------------- */
.form-group {
  margin-bottom: 1rem;
}


h1{font-family: "Playfair", serif!important;color:#FFFFFF;font-style: italic;} 

#intro2 h1{font-family: "Playfair", serif!important;color:rgb(139, 23, 3)!important;font-style: italic;} 

.section h1,h2,h3,h4,h5,h6{
  font-family: "Playfair", serif;
  font-style: italic;
  font-weight: 700;
  color:rgb(139, 23, 3)!important;
  margin-bottom:0px;
  text-transform: uppercase;
}

section h1,h2,h3,h4,h5,h6{
  font-family: "Playfair", serif;
  font-style: italic;
  font-weight: 700;
  color:rgb(139, 23, 3)!important;
  margin-bottom:0px;
  text-transform: uppercase;
}

.footer h5{font-style: normal;}
.footer p{color:#f6f6f6;}
.footer a{color:#f1f1f1}
.footer ul{list-style-type:none;}

body ul:not(nav ul){list-style-type:disc; padding-left: 0; margin-bottom:25px;margin-left:35px!important; list-style-position: outside;}
body ul:not(nav ul) li {position: relative; padding-left: .6em;padding-bottom:.6em}
body ol:not(nav ul){list-style-type:decimal; padding-left: 0; margin-bottom:25px;margin-left:35px!important; list-style-position: outside;}
body ol:not(nav ul) li {position: relative; padding-left: .6em;padding-bottom:.6em}

.logo h3{font-size:25px!important; font-weight:100;margin:0 0 0 20px}
/* body a:not(nav a) {text-decoration: none!important; color:brown} */
.section{padding-top:70px}

/* ==============BOX SLIDER */
.reveal-left {  opacity: 0;  transform: translateX(-400px);  transition: all 2s ease-out;}
.reveal-right { opacity: 0;  transform: translateX(400px);  transition: all 2s ease-out;}
.reveal-left.active,.reveal-right.active {  opacity: 1;  transform: translateX(0);}
.reveal-up {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
    will-change: transform, opacity;
    transition:
        opacity 1s ease-out,
        transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
} 

.reveal-up.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
/* ===================
 */
/* ======BANNER */
@keyframes slide-up { 0% {    opacity: 0;    transform: translateY(40px);  }  100% {    opacity: 1;    transform: translateY(0);  }}
.animate-slide-up {  animation: slide-up 0.8s ease-out forwards;}
.animate-delay-200 {  animation-delay: 200ms;}
/* =============== */

.image-wrapper:hover .image-overlay,
    .image-wrapper:hover .image-buttons {
      opacity: 1;
      pointer-events: auto;
    }


/* ==================STUDENT SUPPORT================== */
/* Remove unwanted backgrounds */
.carousel-track-wrapper,
.carousel-track,
.carousel-card {
    background: transparent !important;
}

/* Allow zoomed card to show fully */
.carousel-track-wrapper {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Equal height cards */
.carousel-card {
    display: flex;
}

.carousel-card .card-inner {
    flex: 1;
    height: 100%;
}

/* Center zoom effect */
 .card-inner {
    transform: scale(1);
    opacity: 0.85;
    transform-origin: center center;
    transition: transform .4s ease, opacity .4s ease;
}

.carousel-card.is-active .card-inner {
    transform: scale(1.05);
    opacity: 1;
    z-index: 10;
}
.team-carousel .carousel-card {
    flex: 0 0 auto; /* prevents flex from resizing cards */
     /*width: 100%;    default for mobile */
}

.carousel-card {
    flex: 0 0 auto;
}

/* Center zoom effect */
.team-carousel .card-inner {
    transform: scale(1);
    opacity: 0.85;
    transition: transform .4s ease, opacity .4s ease;
}

.team-carousel .carousel-card.is-active .card-inner {
    transform: scale(1);
    opacity: 1;
}
/* ==================END STUDENT SUPPORT================== */




















@media (max-width: 767px) {
  .reveal-left, .reveal-right {
    transform: translateY(30px);
  }
}

