:root {
  --bs-primary: #A15EC2;
  --bs-secondary: #5E4290;
  --bs-dark: #231643;
  --bs-light: #F8F3FB;
  --bs-info: #B887DB;
  --bs-success: #75B798;
  --bs-danger: #D85A7F;
  --bs-warning: #E6B55E;
}

body {
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

body {
  font-family: 'Playfair Display', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
}

.navbar .nav-link {
	font-family: 'Playfair Display', serif;
}
.btn-danger {
  --bs-btn-bg: var(--bs-danger);
}
.btn-warning {
  --bs-btn-bg: var(--bs-warning);
}



.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero-desktop {
  background-image: url('/assets/images/hero2.jpg');
  display: block;
}

.hero-mobile {
  background-image: url('/assets/images/hero3.jpg');
  display: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  padding: 1rem;
}

/* Mobile Switch */
@media (max-width: 768px) {
  .hero-desktop {
    display: none;
  }

  .hero-mobile {
    display: block;
  }
}






    .btn-custom {
      background-color: var(--bs-primary);
      color: white;
    }

    .btn-custom:hover {
      background-color: #8C4AAA;
    }

    footer {
      background-color: var(--bs-dark);
      color: white;
      padding: 1rem 0;
      text-align: center;
    }
    
    .btn-outline-primary {
	  color: var(--bs-primary);
	  border-color: var(--bs-primary);
	}

	.btn-outline-primary:hover {
	  background-color: var(--bs-primary);
	  color: white;
	  border-color: var(--bs-primary);
	}
	
	.card-purple {
  		background-color: rgba(184, 135, 219, 0.2); /* Light purple with transparency */
	}
	
	.card:hover {
	  transform: scale(1.03);
	  transition: transform 0.3s ease;
	}

	.card {
	  transition: transform 0.3s ease; /* ensures smooth reset */
	}
	
	
	.navbar {
	  padding-top: 0.25rem;
	  padding-bottom: 0.25rem;
	}

	.navbar-brand {
	  padding-top: 0;
	  padding-bottom: 0;
	}
	.navbar-brand img {
	  height: 80px;
	  width: 80px;
	  
	}


	.swiper-button-next,
	.swiper-button-prev {
	  color: var(--bs-secondary);
	}
	
	.swiper-slide {
	  height: auto; /* Allow content to define height */
	  display: flex;
	}

	.swiper-slide .card {
	  flex: 1;
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	}
	
	



footer i {
  font-size: 2.2rem;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
}

footer i:hover {
  color: var(--bs-secondary);
}


.banner-section {
    background-image: url('assets/images/banner-background.jpg'); /* Optional background image */
    background-color: var(--bs-light);
    background-size: cover;
    background-position: center;
}
.banner-section h1 {
    font-size: 2.5rem;
    color: var(--bs-secondary);
}
.banner-section p {
    font-size: 1.2rem;
}




.form-control:focus {
  background-color: #fff !important; /* or any custom background */
  border-color: var(--bs-secondary) !important; /* optional: customize border */
  box-shadow: none !important; /* removes the glowing blue outline */
}
input:-webkit-autofill,
textarea:-webkit-autofill {
  background-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 5000s ease-in-out 0s;
}



.g-recaptcha {
    background-color: rgba(255, 255, 255, 0.2);  /* Slight transparent background */
    border-radius: 8px;  /* Optional: makes the reCAPTCHA area rounded */
    padding: 5px;  /* Adds padding to give some space around the reCAPTCHA */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Adds subtle shadow for depth */
    margin-top: 20px;  /* Adds space above the reCAPTCHA */
}

.g-recaptcha iframe {
    border-radius: 8px;  /* Optional: Makes the iframe corners rounded */
    border: none;  /* Removes the default border from the iframe */
}



html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden !important;
}