@charset "utf-8";

/* ----------------------------------------------------
   TiCK NAVBAR — Conflict‑Safe Bootstrap 5 Version
---------------------------------------------------- */

.tick-navbar {
  background: #00263B;
  padding: 18px 0;
}

/* Brand */
.tick-navbar .navbar-brand img {
  height: 70px;
}

/* Nav links */
.tick-navbar .nav-link {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  padding: 12px 18px !important;
  font-size: 14px !important; /* Ensures consistency */
}

/* Active (ScrollSpy) */
.tick-navbar .nav-link.active {
  color: #0AB7CF !important;
}

/* Hover */
.tick-navbar .nav-link:hover {
  color: #0AB7CF !important;
}
@media (max-width: 991px) {
  .tick-navbar .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Mobile gutters for content sections */
@media (max-width: 991px) {
  .tick-content-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ----------------------------------------------------
   SCROLL ID SECTION OFFSETS
---------------------------------------------------- */

[id] {
  scroll-margin-top: 120px;
}

@media (max-width: 991px) {
  [id] {
    scroll-margin-top: 400px;
  }
}


/* WAIT LIST button */
.tick-waitlist-nav-btn {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 20px !important;
  background: #0AB7CF !important;
  color: #FFF !important;
  border-radius: 4px !important;
  margin-left: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important; /* Match nav links */
}

/* Dropdown menu */
.tick-navbar .dropdown-menu {
  background: #00344D !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0.5rem 0 !important;
  animation: tickFadeIn 0.25s ease;
}

/* Dropdown items — unified desktop + mobile */
.tick-navbar .dropdown-menu .dropdown-item {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 22px !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  font-size: 14px !important; /* FIX: matches nav links */
}

/* Dropdown hover */
.tick-navbar .dropdown-menu .dropdown-item:hover {
  background: #0AB7CF !important;
  color: #ffffff !important;
}

/* Fade animation */
@keyframes tickFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hamburger icon (TiCK turquoise) */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(10,183,207,1)' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* ============================================================
   MOBILE NAVBAR FIXES — TiCK Entertainment
============================================================ */

@media (max-width: 991px) {

  /* Force uppercase on all mobile nav links */
  .tick-navbar .nav-link {
    text-transform: uppercase !important;
    font-size: 14px !important;
  }

  /* Mobile dropdown items — FIXED CAPS + SIZE + PADDING */
  .tick-navbar .dropdown-menu .dropdown-item,
  .tick-navbar .dropdown-menu li a.dropdown-item {
    text-transform: uppercase !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
  }

  /* Full-width WAIT LIST button with proper padding */
  .tick-waitlist-nav-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 14px 28px !important;
    margin: 12px 0 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
  }
/* Align WAIT LIST button perfectly with nav links */
  .tick-navbar .tick-waitlist-nav-btn {
    padding: 10px 20px !important;     /* slightly reduced top/bottom padding */
    line-height: 1.2 !important;       /* matches nav-link text height */
    display: flex !important;
    align-items: center !important;    /* centers text vertically */
  }

  /* Ensure dropdown menu aligns properly on mobile */
  .tick-navbar .dropdown-menu {
    width: 100% !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 991px) {
  .tick-navbar .dropdown-menu .dropdown-item,
  .tick-navbar .dropdown-menu li a.dropdown-item,
  .tick-navbar .dropdown-menu li a {
    padding-left: 46px !important;   /* Strong override */
    padding-right: 20px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    display: block !important;        /* Critical: ensures padding applies */
  }
}


/* --------------------------------------------- */
/* Scroll-to-top                                 */
/* --------------------------------------------- */

/* Scroll To Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  background: #8a2be2; /* TiCK purple */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Make Budicon icon visible */
.scroll-to-top i {
  font-family: 'budicon' !important;
  color: #fff;
  font-size: inherit;
  line-height: 1;
}

/* Visible state */
.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* Hover effect */
.scroll-to-top:hover {
  background: #9d5cff;
  transform: translateY(-3px);
}

/* Mobile adjustments */
@media (max-width: 575px) {
  .scroll-to-top {
    width: 42px;
    height: 42px;
    bottom: 20px;
    right: 20px;
    font-size: 20px;
  }
}
.scroll-to-top i,
.scroll-to-top i:before {
  font-family: 'budicon' !important;
  color: #fff;
  font-size: inherit;
  line-height: 1;
  display: inline-block;
}


/* --------------------------------------------- */
/* Brand Colors                                  */
/* --------------------------------------------- */

:root {
  --tick-blue: #00263B;
  --tick-blue-light: #00344D;
  --tick-turquoise: #0AB7CF;
  --tick-purple: #9b59b6;
  --tick-purple-light: #9b59b6;
  --tick-grey: #f5f7fa;
  --tick-dark: #1a1a1a;
}

/* --------------------------------------------- */
/* BODY FONT OVERRIDE                            */
/* --------------------------------------------- */
body, td, th {
            font-family: Roboto, sans-serif;
        }

/* --------------------------------------------- */
/* TiCK Typography Scale                          */
/* --------------------------------------------- */
p, ul, uo, li {
  font-size: 16px;       /* or whatever tick-body uses */
  line-height: 1.55;     /* optional: matches BS3 feel */
  font-weight: 400;
  color: var(--tick-blue); /* optional: if you want global color */
}


.tick-h1 { font-size: 42px; font-weight: 700; line-height: 1.2; color: var(--tick-blue); }
.tick-h2 { font-size: 34px; font-weight: 700; line-height: 1.25; color: var(--tick-blue); }
.tick-h3 { font-size: 28px; font-weight: 600; line-height: 1.3; color: var(--tick-blue); }
.tick-h4 { font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--tick-blue); }
.tick-h5 { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--tick-blue); }
.tick-h6 { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--tick-blue); }

/* Body text */
.tick-body-lg { font-size: 20px; font-weight: 400; line-height: 1.55; color: var(--tick-blue); }
.tick-body    { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--tick-blue); }
.tick-body-sm { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--tick-blue); }

/* Small text */
.tick-small { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--tick-blue-light); }

/* --------------------------------------------- */
/* TiCK Spacing System                            */
/* --------------------------------------------- */

.tick-section { padding: 60px 0; }
.tick-section-sm { padding: 40px 0; }
.tick-section-lg { padding: 80px 0; }

.tick-gap-sm { margin-bottom: 15px; }
.tick-gap-md { margin-bottom: 30px; }
.tick-gap-lg { margin-bottom: 50px; }

/* --------------------------------------------- */
/* TiCK Text Colors                               */
/* --------------------------------------------- */

.tick-text-blue { color: var(--tick-blue); }
.tick-text-purple { color: var(--tick-purple); }
.tick-text-turquoise { color: var(--tick-turquoise); }
.tick-text-dark { color: var(--tick-dark); }
.tick-text-light { color: var(--tick-grey); }

.tick-text-white {
  color: #fff !important;
}
/* --------------------------------------------- */
/* Mobile Typography Scaling                      */
/* --------------------------------------------- */

@media (max-width: 480px) {
  .tick-h1 { font-size: 34px; }
  .tick-h2 { font-size: 28px; }
  .tick-h3 { font-size: 24px; }
  .tick-h4 { font-size: 20px; }
  .tick-h5 { font-size: 16px; }
  .tick-h6 { font-size: 15px; }

  .tick-body-lg { font-size: 18px; }
  .tick-body    { font-size: 15px; }
  .tick-body-sm { font-size: 14px; }
}


/* --------------------------------------------- */
/* TiCK Modern Box Styles (Bootstrap 5)          */
/* --------------------------------------------- */

/* Filled turquoise box */
.tick-box-filled {
  background-color: var(--tick-turquoise);
  color: #fff;
  border-radius: 10px;
  margin-left: 65px;
  margin-right: 65px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}

/* Filled box heading */
.tick-box-filled .tick-box-heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* Turquoise border box */
.tick-box-border {
  border: 4px solid var(--tick-turquoise);
  border-radius: 10px;
  margin-left: 65px;
  margin-right: 65px;
}

/* Border-box heading */
.tick-border-heading {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tick-blue);
  text-align: center;
}

/* Bullet icon */
.tick-border-icon {
  width: 50px;
  height: 45px;
}
.tick-bullet-icon {
  width: 40px;
  height: 35px;
  margin-right: 8px;
  margin-top: -4px;   /* aligns icon with h3 baseline */	
}
/* Border-box body text */
.tick-border-body {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tick-blue);
  margin: 0 auto;
  max-width: 700px;
}

/* TiCK Feature Icons */
.tick-icon {
  font-size: 48px;                 /* Large, bold icon */
  color: var(--tick-purple);       /* Purple icon color */
  line-height: 1;                  /* Prevent vertical drift */
  display: flex;                   /* Perfect alignment */
  align-items: flex-start;         /* Align top with heading */
  justify-content: center;
  width: 56px;                     /* Fixed width for alignment */
  margin-top: 4px;                 /* Matches screenshot spacing */
}

/* --------------------------------------------- */
/* TiCK SECTION TITLE                            */
/* --------------------------------------------- */
.section-title {
    margin-bottom: 40px
}
.section-title h2 {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 25px;
    color: #b6b6b6;
}
.section-title .icon {
    display: inline-block;
    font-size: 18px;
    line-height: 21px;
    width: 130px;
    margin: 0 auto;
    position: relative;
    color: #cacaca;
}
.section-title .icon:before {
    display: inline-block;
    content: "";
    border-bottom: 1px solid #dadada;
    position: absolute;
    left: 0;
    top: 10px;
    width: 50px;
}
.section-title .icon:after {
    display: inline-block;
    content: "";
    border-bottom: 1px solid #dadada;
    position: absolute;
    right: 0;
    top: 10px;
    width: 50px;
}
/* ---------------------------------------------------------- */
/* WAITLIST SECTION & PURPLE BAR (Grey + Purple variants)     */
/* ---------------------------------------------------------- */

/* Grey wrapper */
.tick-waitlist-wrapper {
  background: var(--tick-grey);
  color: var(--tick-blue);
}

/* Purple wrapper */
.tick-waitlist-purple {
  background: var(--tick-purple);
  color: #fff;
}

/* Waitlist heading */
.tick-waitlist-heading {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

/* Waitlist input */
.tick-waitlist-input {
  max-width: 380px;
  padding: 14px 18px;
  font-size: 18px;
  border-radius: 8px;
  border: none; /* Purple version */
}

/* Grey version input border */
.tick-waitlist-wrapper .tick-waitlist-input {
  border: 2px solid var(--tick-turquoise);
}

/* Waitlist button - position fix*/
#reg-bar h2 {
  line-height: 1.3;
}
#reg-bar .btn {
  margin-top: 0.5rem;
}


/* --------------------------------------------- */
/* Mobile Adjustments                            */
/* --------------------------------------------- */

@media (max-width: 480px) {

  /* Filled box */
  .tick-box-filled {
    margin-left: 20px;
    margin-right: 20px;
  }

  .tick-box-filled .tick-box-heading {
    font-size: 26px;
  }

  /* Border box */
  .tick-box-border {
    margin-left: 20px;
    margin-right: 20px;
  }

  .tick-border-heading {
    font-size: 26px;
  }

  .tick-border-icon {
    width: 40px;
    height: 36px;
  }

  .tick-border-body {
    font-size: 18px;
    line-height: 1.45;
  }

  /* Waitlist */
  .tick-waitlist-heading {
    font-size: 28px;
  }

  .tick-waitlist-input {
    max-width: 100%;
  }
}

/* --------------------------------------------- */
/* What Is Tick Section                          */
/* --------------------------------------------- */
/* Section heading */
.tick-section-heading {
  font-size: 36px;
  font-weight: 700;
  color: var(--tick-blue);
  margin-bottom: 20px;
}

/* Section body text */
.tick-section-body {
  font-size: 20px;
  line-height: 1.6;
  color: var(--tick-blue);
  max-width: 900px;
  margin: 0 auto 20px;
}

/* Feature icons */
/* TiCK Feature Icons — screenshot matched */
.tick-icon {
  font-size: 48px;                 /* Large icon */
  color: var(--tick-purple);       /* Purple icon */
  line-height: 1;                  /* Prevent vertical drift */
  display: flex;
  align-items: flex-start;         /* Align icon with heading top */
  justify-content: center;
  width: 56px;                     /* Fixed width for alignment */
  margin-top: 4px;                 /* Matches screenshot spacing */
}


/* Feature headings */
.tick-feature-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--tick-blue);
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Feature body */
.tick-feature-body {
  font-size: 18px;
  line-height: 1.5;
  color: var(--tick-blue);
  max-width: 320px;
  margin: 0 auto;
}

/* --------------------------------------------- */
/* TiCK Video Modal (Bootstrap 5 Clean)          */
/* --------------------------------------------- */

/* Center modal and control max width */
#videoModal .modal-dialog {
  max-width: 900px;
  margin: 40px auto;
  animation: tickSlideDown 0.45s ease-out;
}

/* Remove padding so video fills width */
#videoModal .modal-body {
  padding: 0;
}

/* Responsive video */
.video-player {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

/* TiCK turquoise modal header */
.tick-modal-header {
  background: var(--tick-turquoise);
  color: #fff;
  border-bottom: none;
  padding: 30px 20px 15px;
}

/* Modal title */
.tick-modal-header .modal-title {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

/* Bootstrap 5 close button */
.tick-modal-header .btn-close {
  filter: invert(1); /* makes the close icon white */
  opacity: 1;
}

/* Slide-down animation */
@keyframes tickSlideDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.video-player {
  border-radius: 10px;
  overflow: hidden;
}

/* --------------------------------------------- */
/* TiCK PARALLAX (Bootstrap 5 Clean)          */
/* --------------------------------------------- */

/* Modern Narrow Parallax */
.tick-parallax-modern {
  position: relative;
  padding: 40px 0;
  background-image: url('../images/parallax4.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

/* Softer overlay */
.tick-parallax-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.30);
  z-index: 1;
}

.tick-parallax-modern .container {
  position: relative;
  z-index: 2;
}

/* Header */
.tick-parallax-header {
  margin-bottom: 30px;
}

.tick-parallax-quote i {
  font-size: 42px;
  color: #fff;
  opacity: 0.85;
}

/* --------------------------------------------- */
/* PARALLAX TESTIMONIAL ANIMATION (FINAL WORKING) */
/* --------------------------------------------- */

/* Wrapper locks height + centers content */
.tick-parallax-wrapper {
  position: relative;
  min-height: 60px;       /* FIXED: prevents collapse */
  display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */
}

/* Slides absolutely positioned inside wrapper */
.tick-parallax-slide {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease;
}

/* Active slide (fade-in) */
.tick-parallax-slide.active {
  visibility: visible;
  opacity: 1;
}

/* Fade-out class */
.tick-parallax-slide.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease; /* fast fade-out */
}

/* --------------------------------------------- */
/* NAV DOTS                                       */
/* --------------------------------------------- */

.tick-parallax-dots {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.tick-parallax-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.75);
  transition: background 0.3s ease, transform 0.3s ease;
}

.tick-parallax-dots button.active {
  background: var(--tick-purple);
  transform: scale(1.2);
}

/* --------------------------------------------- */
/* FOOTER                                        */
/* --------------------------------------------- */
.black-wrapper {
  background: #000;
  color: #fff;
}

.footer-menu a {
  color: #fff;
  text-decoration: none;
}
.footer-menu li {
  font-size: 14px;
  font-weight: 400;
}


.footer-menu a:hover {
  opacity: 0.7;
}

.social i {
  font-size: 24px;
  color: #fff;
  transition: opacity 0.25s ease;
}

.social i:hover {
  opacity: 0.7;
}
.footer-logo {
  max-width: 100%;
  height: 60px;
}
/*--------------------------------------------------*/
/*   MY CODE from style-n1.css                      */
/*--------------------------------------------------*/
.response {
  margin-top: 10px;
  padding: 12px;
  background: #f4f4f4;
  border-radius: 4px;
  font-weight: bold;
}

.alert-success {
  background-color: #e6fbe6;
  color: #2d7a2d;
  border: 1px solid #c2e5c2;
}

.alert-error {
  background-color: #fce6e6;
  color: #c94444;
  border: 1px solid #f2c2c2;
}

.custom-rounded-box {
	border-radius: 10px; /* Adjust the pixel value to change the roundness */
	background-color: #0ab7cf;
	font-size: 22px;
	font-weight: normal;
	color: white;
	text-align: center;
	padding-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	margin-top: 0px;
	margin-right: 65px;
	margin-bottom: 0px;
	margin-left: 65px;
}
.custom-rounded-border-box {
	border-radius: 10px; /* Adjust the pixel value to change the roundness */
	border: thick solid #0ab7cf;
	text-align: center;
	padding-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	margin-top: 0px;
	margin-right: 65px;
	margin-bottom: 0px;
	margin-left: 65px;	
}
@media (max-width: 478px) { 
	.custom-rounded-border-box {
		margin-right: 20px;
		margin-left: 20px;
	}
	.custom-rounded-box {
		margin-right: 20px;
		margin-left: 20px;		
	}
}
.custom-rounded-border-box-large {
	border-radius: 10px; /* Adjust the pixel value to change the roundness */
	border: thick solid #0ab7cf;
	text-align: center;
	padding-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;	
}
.inner-turquise-box {
	border-radius: 10px; /* Adjust the pixel value to change the roundness */
	border: thick solid #fff;
	background: #0ab7cf;
	text-align: center;
	padding-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-shadow: 0px 0px;
	color: #FFFFFF;
}

.inner-turquise-box h3 {
	color: #FFFFFF;  /*cahanged to black*/
	font-weight: normal;
}

.waitlist-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

#teaserEmail {
  width: 300px; /* or 100%, or whatever you prefer */
}
#teaserJoinBtn {
	display: flex;
	align-items: center !important;
	color: #FFFFFF !important;
	background-color: #0AB7CF !important;
}
#teaserJoinBtn:hover {
  background-color: #089eaf !important;
/*    transform: translateY(-2px) !important;*/
}
#teaserJoinBtn {
  transition: all 0.2s ease !important;
}

.waitlist-success {
 /* background: rgba(255, 255, 255, 0.1);*/ /* subtle glassy overlay */
  background: #0ab7cf;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  margin-top: 20px;
  animation: fadeIn 0.5s ease forwards;
  color: #fff; /* ensures text is readable on purple banner */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#teaserJoinBtn.processing {
  pointer-events: none;
  opacity: 0.8;
}

#teaserJoinBtn.processing span#teaserJoinText {
  display: none;
}

#teaserJoinBtn.processing::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.6);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/*Enquiry form CSS*/

.form-container {
	background-color: #000000; /* your purple block */
	padding: 30px;
	border-radius: 12px;
	margin: 0 auto;
	float: left;
}

.form-container input,
.form-container textarea,
.multi-select,
.email {
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
}

/*.form-container textarea {
  height: 140px;
  resize: none;
}*/

.form-container .btn {
  background-color: #0ab7cf;
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

#contactForm button.processing {
  pointer-events: none;
  opacity: 0.8;
}

#contactForm button.processing::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.6);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.form-container label {
  color: #ffffff;
}

/* Contact form success box */


/* Fade + slide-up entrance */
.contact-success {
  background: #0ab7cf;
  color: #ffffff;
  padding: 22px;
  border-radius: 10px;
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  margin-left: -30px;
  margin-right: -30px;

  /* Animation */
  opacity: 0;
  transform: translateY(10px);
  animation: successFade 0.45s ease-out forwards;
}

@keyframes successFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact-success h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

/*remove purple box*/
.form-container.success-mode {
  background: transparent;
  padding: 0;
}

/*CREATOR-REG-FORM*/
.form-container h3 {
	margin: 20px 0 10px 0;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}
.form-container p {
	color: #fff;
	font-weight: bold;
}

/* Multi-select - see style-n1.css*/
/*.creator-form .multi-select {
    height: auto !important;
    overflow: hidden !important;
	padding: 8px;
}*/
/* Auto-expanding textareas */
.creator-form textarea.auto-expand {
  min-height: 38px;
  height: 38px;
  overflow-y: hidden;
  resize: vertical;
  line-height: 1.4;
}

/* Full‑width multiple select boxes */
select[multiple],
.multi-select {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 10px;
    min-height: 120px; /* optional: makes them taller and easier to use */
}
/*Success Spinner Animation - Creator Reg Form*/
#creator-form button.processing::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.6);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}

/*-------------------------------end my code-------------------------------------------------------------*/