@charset "utf-8";
/* CSS Document */
/*===========================general==============================*/
.scroll-section {
  height: auto;
  padding-top: auto;
  padding-bottom: auto;
}
/*=====fade-in effect on DOM load=====*/
   @keyframes fadeIn {
      from { opacity: 0.15; transform: translateY(10px); /* small lift */ }
      to   { opacity: 1; transform: translateY(0); }
    }

    @-webkit-keyframes fadeIn {
      from { opacity: 0.15; transform: translateY(10px); /* small lift */ }
      to   { opacity: 1; transform: translateY(0); }
    }

    @-moz-keyframes fadeIn {
      from { opacity: 0.15; transform: translateY(10px); /* small lift */ }
      to   { opacity: 1; transform: translateY(0); }
    }

    @-o-keyframes fadeIn {
      from { opacity: 0.15; transform: translateY(10px); /* small lift */ }
      to   { opacity: 1; transform: translateY(0); }
    }
a {
  color: inherit;
  text-decoration: inherit;
  cursor: pointer;
}
.scroll-to-hash {
  scroll-margin-top: 190px; /* match navbar height */
}
.fade-page-change-over{
	 -webkit-animation: fadeIn 0.9s ease-in-out forwards; /* Safari/iOS */
      -moz-animation: fadeIn 0.9s ease-in-out forwards;    /* Firefox */
      -o-animation: fadeIn 0.9s ease-in-out forwards;      /* Old Opera */
      animation: fadeIn 0.9s ease-in-out forwards;         /* Standard */
	/*=====fade-in effect on DOM load=====*/
}
body {
	scroll-behavior: smooth;
  color: #36454F;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 450;
  line-height: 1.9rem;
	background-color: #fcfafa;
}
.card .card-header,
.card .card-body,
.card .card-footer,
.card > .list-group .list-group-item,
.list-group-item{
  background-color: #fafafa !important;
}
ul > li {
  font-weight: 500;
  line-height: 3rem;
}
h1 {
  line-height: 3.1rem;
}
h2, h3 {
  line-height: 3rem;
}
.dropdown-item.active, .dropdown-item:active {
  color: #919191;
  background-color: var(--bs-dropdown-link-active-color);
}
.custom-hr {
  border: none; /* remove default border */
  height: 2px; /* thickness */
  background-color: grey; /* color */
  width: 60%; /* desktop default */
  margin: 3rem auto; /* centered with spacing */
}
/* Mobile adjustment */
@media (max-width: 768px) {
  .custom-hr {
    width: 80%;
    margin: 1.4rem auto;
  }
}
/*-----general instant fade in-----*/
  .fade-in {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s ease, transform 1s ease;
    }
    .fade-in.show {
      opacity: 1;
      transform: translateY(0);
    }
/*-----HR type border gradient*/
.gradient-color-border {
  border-image: linear-gradient(to right, #500470, #7a3aa0, #01cda2) 1 !important;
}
.lighter-border{
	border-color: #E2E3E5 !important;
}
/*-----close--HR type border gradient----->*/
/*-----Responsive shadow: none by default, shadow on md and up-----*/
.shadow-md-up {
  box-shadow: var(--bs-box-shadow) !important;
}
@media (max-width: 767.98px) {
  .shadow-md-up {
    box-shadow: none !important;
  }
}
/*-----close--Responsive shadow: none by default, shadow on md and up-----*/
/*-----bg backgrounds-----*/
.twnty1-bg-gradient {
  background: linear-gradient(45deg, rgb(80, 4, 112, 0.7), rgb(122, 58, 160), rgb(1, 205, 162));
}
.bg-light-warm {
  background-color: #f7f6f3;
}
.bg-main-indigo {
  background-color: #500470;
}
.cta-bg-simp-gradient {
  background-image: linear-gradient(to top right, #500470, #01cda2);
}
.cta-bg-light-blues {
  background-image: linear-gradient(to bottom right, #500470, #5E77A8);
}
/*-----close--bg backgrounds-----*/
/*-----colors for text-----*/
.cta-main-purple {
  color: #500470;
}
.cta-main-green {
  color: #01cda2;
}
.cta-light-purple {
  color: #b78cff;
}
.cta-fucsia {
  color: #FF5C8D;
}
.cta-mint {
  color: #A8E3DC;
}
.cta-dark {
  color: #1C1C1E;
}

/*-----close--colors for text-----*/
/*===========================buttons==============================*/
.btn:focus, .the-nav-2-btn:focus {
  box-shadow: none !important;
  outline: none !important;
}
.btn-light-purple {
  background-color: #7a3aa0;
  border-color: #7a3aa0;
  color: #fff;
  transition: all 0.3s ease;
}
.btn-light-purple:hover {
  background-color: #7a3aa0;
  border-color: #7a3aa0;
  color: #fff;
  opacity: 0.7;
}
.btn-light-purple-outline {
  background-color: transparent;
  border-color: #7a3aa0;
  color: #7a3aa0;
  transition: all 0.3s ease;
}
.btn-light-purple-outline:hover {
  background-color: #7a3aa0;
  border-color: #7a3aa0;
  color: #fff;
}
.btn-main-purple {
  background-color: #500470;
  border-color: #500470;
  color: #fff;
  transition: all 0.3s ease;
}
.btn-main-purple:hover {
  background-color: #500470;
  border-color: #500470;
  color: #fff;
  opacity: 0.7;
}
.btn-custom-green {
  background-color: #50f0a2;
  border-color: #50f0a2;
  color: #ffffff;
  transition: all 0.3s ease;
}
.btn-custom-green:hover {
  background-color: #50f0a2;
  border-color: #50f0a2;
  color: #ffffff;
  opacity: 0.7;
}
.btn-dark {
  background-color: #1C1C1E;
  border-color: #1C1C1E;
  color: #ffffff;
  transition: all 0.3s ease;
}
.btn-dark:hover {
  background-color: #1C1C1E;
  border-color: #1C1C1E;
  color: #ffffff;
  opacity: 0.7;
}
.btn-dark-outline {
  background-color: transparent;
  border-color: #1C1C1E;
  color: #1C1C1E;
  transition: all 0.3s ease;
}
.btn-dark-outline:hover {
  background-color: #1C1C1E;
  border-color: #1C1C1E;
  color: #ffffff;
  opacity: 0.7;
}
/* On hover → Darker Teal Green */
.btn-transition:hover {
  background-color: #34c07d;
	color:#ffffff;
  opacity: 0.7 !important;
}
.btn-darker-green {
  background-color: #34c07d;
  border-color: #34c07d;
  color: #ffffff;
  transition: all 0.3s ease;
}
.btn-darker-green:hover {
  background-color: #34c07d;
  border-color: #34c07d;
  color: #ffffff;
  opacity: 0.7;
}
.btn-fucsia {
  background-color: #FF5C8D;
  border-color: #FF5C8D;
  color: #ffffff;
  transition: all 0.3s ease;
}
.btn-fucsia:hover {
  background-color: #FF5C8D;
  border-color: #FF5C8D;
  color: #ffffff;
  opacity: 0.7;
}
.btn-mint {
  background-color: #A8E3DC;
  border-color: #A8E3DC;
  color: #ffffff;
  transition: all 0.3s ease;
}
.btn-mint:hover {
  background-color: #A8E3DC;
  border-color: #A8E3DC;
  color: #FF5C8D;
  opacity: 0.7;
}
.btn-fucsia-outline {
  background-color: transparent;
  border-color: #FF5C8D;
  color: #FF5C8D;
  transition: all 0.3s ease;
}
.btn-fucsia-outline:hover {
  background-color: #FF5C8D;
  border-color: #FF5C8D;
  color: #ffffff;
}


/*===========================grouped components===============================*/
/*-----navbar-----*/
/* Initial hidden state */
ul > li > .dropdown-menu, .nested-submenu {
  opacity: 0;
  transform: scaleY(0.95);
  transform-origin: top;
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
  visibility: hidden;
  will-change: opacity, transform;
}
/* When the dropdown is shown */
ul > li > .dropdown-menu.show, .nested-submenu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.7s ease, transform 0.7s ease;
  animation: fadeInNav 0.7s ease forwards;
}
@keyframes fadeInNav {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Initially hide nested submenu */
.nested-submenu {
  display: none;
}
.mainCardItem > .list-group-item {
  font-weight: 600;
}
.sub-nav-drop-item:hover, .mainCardItem > .list-group-item:hover {
  opacity: 0.8;
  color: #500470;
  transform: scale(1);
  animation: pulse 0.9s ease-in-out infinite alternate;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.01);
  }
}
/*-----nav-2 view websites services-----*/
#offcanvasBottom {
  height: auto;
  max-height: none;
}
#offcanvasBottom .offcanvas-body {
  overflow-y: visible;
}
/*-----close--nav-2 view websites services-----*/
.navbar-border {
  border-image: linear-gradient(to right, #500470, #7a3aa0, #01cda2) 1 !important;
}
.navbar-toggler-icon {
  width: 2em;
  height: 2em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2880, 4, 112, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.the-nav-2-btn .navbar-toggler-icon{
  width: 2em;
  height: 2em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/*navbar transition*/
/* Smooth transitions */
.transition-navbar {
  transition: padding 0.3s ease;
}
#navbar-logo {
  max-height: 70px;
  transition: transform 0.3s ease, max-height 0.3s ease;
}
/* SHRUNK state (on SCROLL) = smaller values */
	 .transition-navbar.shrink #navbar-logo {
    max-height: 56px;   /* smaller but still fluid */
    transform: scale(0.9); /* optional smoother shrink */
  }
  .transition-navbar.shrink {
    padding-top: 0.10rem !important;
    padding-bottom: 0.10rem !important;
  }
  .transition-navbar.shrink .navbar-brand {
    font-size: 1rem;
  }
  .transition-navbar.shrink .nav-link {
    font-size: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .transition-navbar.shrink .btn {
    padding: 0.25rem 0.65rem;
    font-size: 0.85rem;
  }
/*-----close--navbar-----*/
/*-----color transition effect-----*/
/*color transition change to teal*/
.color-change-teal {
--fade: 0;
transition: color 0.20s linear;
color: rgb(
  calc(33 + (1 - 33) * var(--fade)),    /* red: 33 → 1 */
  calc(37 + (205 - 37) * var(--fade)),  /* green: 37 → 205 */
  calc(41 + (162 - 41) * var(--fade))   /* blue: 41 → 162 */
);
}
.btn-transition-teal {
  --fade: 0;
  background-color: rgb(
  calc(33 + (1 - 33) * var(--fade)),    /* red: 33 → 1 */
  calc(37 + (205 - 37) * var(--fade)),  /* green: 37 → 205 */
  calc(41 + (162 - 41) * var(--fade))   /* blue: 41 → 162 */
);
  color: #ffffff; /* stays white */ transition: background-color 0.4s ease;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
/*color transition change to light purple*/
.color-change {
--fade: 0;
transition: color 0.20s linear;
color: rgb(
    calc(33 + (122 - 33) * var(--fade)),  /* red: 33 → 122 */
  calc(37 + (58 - 37) * var(--fade)),   /* green: 37 → 58 */
  calc(41 + (160 - 41) * var(--fade))   /* blue: 41 → 160 */
);
}
.btn-transition {
  --fade: 0;
  background-color: rgb(
   calc(33 + (122 - 33) * var(--fade)),  /* red: 33 → 122 */
  calc(37 + (58 - 37) * var(--fade)),   /* green: 37 → 58 */
  calc(41 + (160 - 41) * var(--fade))   /* blue: 41 → 160 */
);
  color: #ffffff; /* stays white */ transition: background-color 0.4s ease;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
/*-----close--color transition effect-----*/
/*-----section wave effect-----*/
/*the divider wave parent*/
.bg-master-gradient{
	position: relative;
  background: linear-gradient(135deg, #500470  0%, #7a3aa0 50%, #50f0a2 100%);
  padding: 4rem 2rem 10rem; 
}
.bg-master-fucsia-gradient{
	position: relative;
  background: linear-gradient(135deg, #FF5C8D 0%, #FF8FB3 50%, #FFD9E5 100%);
  padding: 4rem 2rem 10rem; 
}
.bg-light-blues{
position: relative;
  background: linear-gradient(135deg, #500470 0%, #5E77A8 100%);
  padding: 4rem 2rem 10rem; 
}

.bg-mint-gradient {
	position: relative;
  background-image: linear-gradient(135deg,#A8E3DC 0%,#BFF2E9 50%,#E4FFFA 100%);
	padding: 4rem 2rem 10rem; 
}
.bg-fucisa-gradient {
	position: relative;
  background-image: linear-gradient(135deg,#FF5C8D 0%,#FF8FB3 50%,#FFD9E5 100%);
	padding: 4rem 2rem 10rem; 
}
.bg-blue-violet-gradient {
	position: relative;
  background-image: linear-gradient(135deg,#5E77A8 0%,#7A91C0 50%,#B5C4E2 100%);
	padding: 4rem 2rem 10rem; 
}
/*the wave*/
.wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 120px;
  display: block;
	transform: rotate(180);
}
/*-----close--section wave effect-----*/