/* =========================================================
  utilities
  ========================================================= */

/* =========================================================
   1. FONT SIZE
   ========================================================= */
.fs-95 { font-size: 95px; }
.fs-90 { font-size: 90px; }
.fs-85 { font-size: 85px; } 
.fs-80 { font-size: 80px; }
.fs-70 { font-size: 80px; }
.fs-60 { font-size: 60px; }
.fs-50 { font-size: 50px; }
.fs-40 { font-size: 40px; }
.fs-30 { font-size: 30px; }
.fs-24 { font-size: 24px; }
.fs-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.fs-16 { font-size: 16px; }
.fs-14 { font-size: 14px; }
.fs-12 { font-size: 12px; }
 
/* =========================================================
   2. LINE HEIGHT
   ========================================================= */
 
.lh-110 { line-height: 110%; }
.lh-120 { line-height: 120%; }
.lh-130 { line-height: 130%; }
.lh-140 { line-height: 140%; }
.lh-150 { line-height: 150%; }
.lh-160 { line-height: 160%; }
.lh-170 { line-height: 170%; }
 
/* =========================================================
   3. CARDS
   ========================================================= */
 
.cp-20 { padding: 20px; }
.cp-30 { padding: 30px; }
.cp-40 { padding: 40px; }
.cp-50 { padding: 50px; }
.cp-60 { padding: 60px; }
.cp-70 { padding: 70px; }
.cp-80 { padding: 80px; }
.cp-90 { padding: 90px; }
.cp-100 { padding: 100px; }
.cp-110 { padding: 110px; }
.cp-120 { padding: 120px; }
.cp-130 { padding: 130px; }

/* =========================================================
   4. BORDER RADIUS
   ========================================================= */
 
.br-6  { border-radius: 6px; }
.br-10 { border-radius: 10px; }
.br-12 { border-radius: 12px; }
.br-14 { border-radius: 14px; }
.br-15 { border-radius: 15px; }
.br-16 { border-radius: 16px; }
.br-24 { border-radius: 24px; }
.br-30 { border-radius: 30px; }
.br-50 { border-radius: 50px; }
.br-top-25 { border-radius: 25px 25px 0 0; }
.br-top-30 { border-radius: 30px 30px 0 0; }

 
/* =========================================================
   5. BACKGROUNDS
   ========================================================= */
 
.bg-violet { background-color: #4e39ef; }
.bg-plum   { background-color: #4f3854; }
.bg-indigo { background-color: #43249c; }
.bg-lilac  { background-color: #f6e7ff; }
.bg-blush  { background-color: #fbf1f1; }
.bg-glass  { background: rgba(255, 255, 255, 0.75); }
.bg-glass-1 { background: rgba(255, 255, 255, 0.32); }
.bg-night {  background: linear-gradient(142deg, #030009 22.5%, #190053 72.86%); }
.bg-night-reverse {  background: linear-gradient(142deg, #190053 26.84%, #030009 78.89%); }
.bg-FFFBFB{ background: #FFFBFB; }
.bg-bluedark-gradient{background: linear-gradient(300deg, #1A0656 0%, #000 96.47%);}
.bg-FFF2F2 { background:#FFF2F2; }
.bg-skyblue-gradient { background: linear-gradient(180deg, #FFF 0%, #F1F5FD 100%); }
.bg-F0F0F0{ background:#F0F0F0 }
.bg-7445F7 { background:#7445F7 }
.bg-4B22BE { background:#4B22BE }
.bg-EBF3FB { background: #EBF3FB }
.bg-F4EBFF { background: #F4EBFF; }
.bg-FFF6DE { background: #FFF6DE }
.bg-D8E9F9 { background: #D8E9F9; }
.bg-EBDAFF { background: #EBDAFF  }
.bg-FDEBBD { background: #FDEBBD }
.bg-bluedark { background: rgba(52, 28, 111, 0.5); }
.bg-F9FBFE {  background: #F9FBFE; }
/* =========================================================
   6. TEXT COLOUR
   ========================================================= */
 
.tc-purple { color: #6d08be; }
.tc-black  { color: #000000; }
.tc-ink    { color: #222222; }
.tc-body   { color: #6b6868; }
.tc-muted  { color: #8e96a0; }
.tc-white  { color: #ffffff; }
.color-2D5072 { color: #2D5072; }
.color-D43900 { color:#D43900 }
.color-691AA1 { color: #691AA1; }
.color-6C6C6C { color: #6C6C6C;}
.tc-purple-hover:hover { color: #6d08be !important; }
 
/* =========================================================
   7. BORDERS
   ========================================================= */
 
.bb-line { border-bottom: 1px solid #b2b2b2; }
.bt-line { border-top: 1px solid #b2b2b2; }
.b-line  { border: 1px solid #b2b2b2; }
.bb-dash { border-bottom: 1px dashed #b2b2b2; }
.bb-D1E0EF{border-bottom: 1px solid #D1E0EF;}
.border-D1E0EF{ border: 1px solid #D1E0EF;}
.border-7445F7 { border:1px solid #7445F7; }
.border-DFD8EE { border:1px solid #DFD8EE }
.border-1-fff-4 { border: 1px solid rgba(255, 255, 255, 0.40);; }

 
/* =========================================================
   8. SECTION SPACING
   ========================================================= */
 .sec-30  { padding: 30px 0; }
 .sec-40  { padding: 40px 0; }
 .sec-50  { padding: 50px 0; }
.sec-60  { padding: 60px 0; }
.sec-70  { padding: 70px 0; }
.sec-80  { padding: 80px 0; }
.sec-90  { padding: 90px 0; }
.sec-100 { padding: 100px 0; }



.pr-30 { padding-right: 30px; }
.pr-40 { padding-right: 40px; }
.pr-50 { padding-right: 50px; }
.pr-60 { padding-right: 60px; }
.pr-70 { padding-right: 70px; }
.pr-80 { padding-right: 80px; }

.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.pl-60 { padding-left: 60px; }
.pl-70 { padding-left: 70px; }
.pl-80 { padding-left: 80px; }


/* =========================================================
   8. BUTTONS
   ========================================================= */
 

  .primary-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  background: #3C11A5;
  border-radius: 10px;
  font-size: 14px;
  padding: 13px 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  border: 1px solid #3C11A5;
  transition: border-color 0.3s ease;
}


.primary-button:hover{
  background: #740c9a;
  border: 1px solid #740c9a;
  color: #fff;
}


.primary-button-animation {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  padding: 13px 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  border: 1px solid transparent;

  /* the static gradient border */
  background:
    linear-gradient(#3C11A5, #3C11A5) padding-box,
    linear-gradient(180deg, #6D08BE 0%, #C51298 50%, #E80D39 100%) border-box;
}

.primary-button-animation:hover { color: #fff; }

/* travelling highlight, hidden until hover */
.primary-button-animation::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400%;
  height: 1600%;
  z-index: -2;
  background: conic-gradient(
    transparent 0deg,
    transparent 300deg,
    #FF4FA3 335deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.primary-button-animation:hover::before {
  opacity: 1;
  animation: pb-spin 4s linear infinite;
}

/* solid fill, covers everything except the 2px edge */
.primary-button-animation::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  z-index: -1;
  border-radius: 8px;
  background: #3C11A5;
}

@keyframes pb-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.primary-button-animation:focus-visible {
  outline: 1px solid #a855f7;
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .primary-button-animation { padding: 12px 18px; }
}
.secondary-button{
  text-decoration: none;
  background: #ffffff;
  border-radius: 10px;
font-size: 14px;
padding: 13px 20px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #000;
white-space: nowrap;
transition: background 0.2s ease;
border: 1px solid #ffffff;
}
.secondary-button:hover
{
border: 1px solid #ffffff;
background: transparent;
color: #fff;
}

.gradient-btn{
border-radius: 10px;
background: linear-gradient(90deg, #BF0183 0%, #4514A0 100%);
text-decoration: none;
font-size: 14px;
padding: 13px 20px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
transition: background 0.2s ease;
}
.gradient-btn:hover{
background: linear-gradient(90deg, #4514A0 0%, #BF0183 100%);;
}

.empty-btn{
  background: transparent;
  text-decoration: none;
font-size: 14px;
padding: 13px 20px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
transition: background 0.2s ease;
}
 
.common-box-shadow { box-shadow: 0 10px 18.9px 0 rgba(0, 0, 0, 0.05); }

.common-box-shadow-1 { box-shadow: box-shadow: 10px 22px 22.3px 0 rgba(0, 0, 0, 0.05); }
 .flex-1{ flex: 1; }
 /* =========================================================
   10 Arrow link, arrow slides out on hover
   ========================================================= */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-decoration: none;
}

.arrow-link svg {
  width: 24px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* the underline, grows from the left on hover */
.arrow-link span {
  position: relative;
}

.arrow-link span::after  {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.arrow-link:hover span::after,
.arrow-link:focus-visible span::after {
  transform: scaleX(1);
}

.arrow-link:hover svg,
.arrow-link:focus-visible svg {
  transform: translateX(4px);
}

.arrow-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .arrow-link span::after,
  .arrow-link svg { transition: none; }
}
/* =========================================================
   13. OPACITY
   ========================================================= */

.op-10  { opacity: 0.1; }
.op-20  { opacity: 0.2; }
.op-30  { opacity: 0.3; }
.op-40  { opacity: 0.4; }
.op-50  { opacity: 0.5; }
.op-60  { opacity: 0.6; }
.op-70  { opacity: 0.7; }
.op-80  { opacity: 0.8; }
.op-90  { opacity: 0.9; }
.op-100 { opacity: 1; }



/* =========================================================
   Responsive Typography CSS
   ========================================================= */

@media (max-width: 991.98px) {
.fs-95 { font-size: 30px; }
.fs-90 { font-size: 30px; }
.fs-85 { font-size: 30px; } 
.fs-80 { font-size: 25px; }
.fs-70 { font-size: 25px; }
.fs-60 { font-size: 25px; }
.fs-50 { font-size: 25px; }
.fs-40 { font-size: 25px; }
.fs-24 { font-size: 18px }
.sec-50  { padding: 45px 0; }
  .sec-60  { padding: 50px 0; }
  .sec-70  { padding: 55px 0; }
  .sec-80  { padding: 60px 0; }
  .sec-90  { padding: 60px 0; }
  .sec-100 { padding: 65px 0; }
 .cp-60  { padding: 40px; }
  .cp-70  { padding: 40px; }
  .cp-80  { padding: 40px; }
  .cp-90  { padding: 50px; }
  .cp-100 { padding: 60px; }
  .cp-110 { padding: 60px; }
  .cp-120 { padding: 60px; }
  .cp-130 { padding: 65px; }
.pr-30, .pr-40, .pr-50, .pr-60, .pr-70, .pr-80 { padding-right: 15px; }
.pl-30, .pl-40, .pl-50, .pl-60, .pl-70, .pl-80 { padding-left: 15px; }

}

@media (max-width: 767.98px) {
  .cp-40  { padding: 32px; }
  .cp-50  { padding: 34px; }
  .cp-60  { padding: 36px; }
  .cp-70  { padding: 38px; }
  .cp-80  { padding: 40px; }
  .cp-90  { padding: 40px; }
  .cp-100 { padding: 42px; }
  .cp-110 { padding: 42px; }
  .cp-120 { padding: 44px; }
  .cp-130 { padding: 44px; }
  .sec-40  { padding: 35px 0; }
  .sec-50  { padding: 40px 0; }
  .sec-60  { padding: 45px 0; }
  .sec-70  { padding: 48px 0; }
  .sec-80  { padding: 50px 0; }
  .sec-90  { padding: 52px 0; }
  .sec-100 { padding: 55px 0; }
}

@media (max-width: 575.98px) {
  .cp-20  { padding: 16px; }
  .cp-30  { padding: 20px; }
  .cp-40  { padding: 20px; }
  .cp-50  { padding: 24px; }
  .cp-60  { padding: 24px; }
  .cp-70  { padding: 28px; }
  .cp-80  { padding: 28px; }
  .cp-90  { padding: 30px; }
  .cp-100 { padding: 30px; }
  .cp-110 { padding: 32px; }
  .cp-120 { padding: 32px; }
  .cp-130 { padding: 34px; }
.sec-30  { padding: 25px 0; }
  .sec-40  { padding: 30px 0; }
  .sec-50  { padding: 35px 0; }
  .sec-60  { padding: 38px 0; }
  .sec-70  { padding: 40px 0; }
  .sec-80  { padding: 42px 0; }
  .sec-90  { padding: 45px 0; }
  .sec-100 { padding: 48px 0; }
  .pr-30, .pr-40, .pr-50,
  .pr-60, .pr-70, .pr-80 { padding-right: 15px; }

  .pl-30, .pl-40, .pl-50,
  .pl-60, .pl-70, .pl-80 { padding-left: 15px; }

}