@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@font-face { font-family: 'Poppins'; src: url(../fonts/poppins/Poppins-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: 'Poppins Light'; src: url(../fonts/poppins/Poppins-Light.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: 'Poppins Medium'; src: url(../fonts/poppins/Poppins-Medium.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: 'Poppins Bold'; src: url(../fonts/poppins/Poppins-Bold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: 'Poppins Black'; src: url(../fonts/poppins/Poppins-Black.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/outfit/static/Outfit-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: 'Outfit Bold'; src: url(../fonts/outfit/static/Outfit-Bold.ttf) format("truetype"); font-display: swap; }

body { font-family: 'Outfit', 'Poppins', Arial, sans-serif; }
.absolute { position: absolute;}
.left-0 { left: 0;}
.right-0 { right: 0;}
.top-0 { top: 0;}
.z-index-priority { z-index: 999999999 !important;}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit Bold', 'Poppins Bold', Arial, sans-serif; font-weight: bold !important;
}
.text-right { text-align: right !important;}

.borderless {
  border-color: transparent !important;
  box-shadow: none !important;
}

.text-bold { font-weight: bold !important; font-family: 'Outfit Bold', 'Poppins Bold', Arial, sans-serif;}
strong { font-weight: bold !important; font-family: 'Outfit Bold', 'Poppins Bold', Arial, sans-serif;}

mark { padding: 0.3rem !important; padding-left: 1rem !important; padding-right: 1rem !important;}
mark.rounded-circle { padding: 0.5rem 1rem !important; }

.landing-btn {
    display: flex;
    max-width: -moz-fit-content;
    max-width: fit-content;
    border: 0 solid #e5e7eb;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: 1rem 1.75rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.landing-btn-small {
    padding: .75rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1;
}

.landing-btn-primary {
    position: relative;
    overflow: hidden;
    border: 5px solid;
    --tw-border-opacity: 1;
    border-color: rgb(76, 215, 192);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background: linear-gradient(90deg, #3fad9a, color-mix(in srgb, #218272 85%, #218272) 50%, #218272);
    background-size: 200% 100%;
    animation: gradientMove 8s linear infinite;
}

.landing-btn-primary:hover {
    background: linear-gradient(90deg, #218272, color-mix(in srgb, #3fad9a 85%, #3fad9a) 50%, #3fad9a);
}

.landing-btn-secondary {
    position: relative;
    padding: 5px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(13 13 18 / var(--tw-text-opacity, 1));
    background: linear-gradient(90deg, rgb(76, 215, 192) -12.6%, #3fad9a 109.84%);
}

.landing-btn-secondary span {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem 1.75rem;
}

.landing-btn-secondary:hover span {
    background-color: #eee;
}

.bg-white { background-color: #fff;}

.btn-dark { background-color: black !important; border-color: black !important;}
.btn-dark:hover, .btn-default, .tab-content { background-color: white !important; border-color: black !important; color: black !important;}
/* .form-control { border-color: black !important; color: black !important;} */
.nav-link.active { background-color: white !important; border-color: black !important; color: black !important; }
.nav-tabs-top .nav-link.active { border-bottom: 1px solid #fff !important; }
.nav-tabs-left .nav-link.active { border-right: 1px solid #fff !important; }

.btn-primary { background-color: rgb(44, 75, 255) !important; border-color: rgb(44, 75, 255) !important;}
.btn-primary:hover { background-color: white !important; color: rgb(44, 75, 255) !important;}

.bg-purple { background-color: #8475b6 !important; color: #fff; color: #3E1019}
.bg-purple-light { background-color: #9984be !important;}
.bg-purple-dark { background-color: #65598c !important;}
.text-purple { color: #8475b6 !important;}
.text-purple-light { color: #9984be !important;}
.text-purple-dark { color: #65598c !important;}

.btn-pink { background-color: #E77395; border-color: #E77395 !important; color: #fff;}
.btn-pink:hover { background-color: #F48BA4; color: #fff;}
.btn-pink-light { background-color: #F48BA4 !important; color: #3E1019 !important;}
.btn-pink-light:hover { background-color: #E77395 !important; }

.border-pink { border-color: #E77395 !important;}
.border-pink-light { border-color: #F8B0B7 !important;}

.bg-pink { background-color: #f7a4aa !important; color: #fff; color: #3E1019}
.bg-pink-light { background-color: #fccdbf !important;}
.bg-pink-dark { background-color: #f4899d !important;}

.text-pink { color: #f7a4aa !important;}
.text-pink-light { color: #fccdbf !important;}
.text-pink-dark { color: #f4899d !important;}

.btn-yellow { background-color: #FAF488; border-color: #FAF488 !important; color: #fff;}
.btn-yellow:hover { background-color: #FCE69B; color: #fff;}

.border-yellow { border-color: #FAF488 !important;}
.border-yellow-light { border-color: #f5f2ac !important;}

.bg-yellow { background-color: #f1db5f !important; color: #fff;}
.bg-yellow-light { background-color: #efdfa1 !important;}
.bg-yellow-dark { background-color: #d8c656 !important;}

.text-yellow { color: #f1db5f !important;}
.text-yellow-light { color: #efdfa1 !important;}
.text-yellow-dark { color: #d8c656 !important;}

.btn-cyan { background-color: #A1E3F9; border-color: #07CDF5 !important; color: #fff;}
.btn-cyan:hover { background-color: #578FCA; color: #fff;}
.border-cyan { border-color: #A1E3F9 !important;}
.border-cyan-light { border-color: #D1F8EF !important;}
.bg-cyan { background-color: #A1E3F9 !important; color: #fff;}
.bg-cyan-light { background-color: #D1F8EF !important;}
.bg-cyan-dark { background-color: #578FCA !important;}
.text-cyan { color: #A1E3F9 !important;}
.text-cyan-light { color: #D1F8EF !important;}
.text-cyan-dark { color: #578FCA !important;}

.bg-green-light { background-color: #78cbbe !important;}
.bg-green { background-color: #41998b !important;}
.bg-green-dark { background-color: #218272 !important;}
.text-green-light { color: #78cbbe !important;}
.text-green { color: #41998b !important;}
.text-green-dark { color: #218272 !important;}

.bg-brown { background-color: #3E1019 !important; }
.text-brown { color: #3E1019 !important; }

.display-4 { font-weight: 600;}

/* Awake-style layout tweaks */
.awake-shell {
  background: radial-gradient(circle at top left, #f5f3ff 0, #ffffff 55%, #f3faf8 100%);
}

.awake-navbar {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(16px);
}

.awake-navbar .navbar-brand img {
  height: 32px;
}

.awake-navbar .nav-link {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0f172a;
}

.awake-navbar .nav-link:hover {
  color: #218272;
}

.awake-hero {
  padding-top: 7rem;
  padding-bottom: 5rem;
}

.awake-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.awake-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background-color: rgba(15, 23, 42, 0.04);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.awake-hero-h1 {
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  line-height: 1.05;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}

.awake-hero-lead {
  font-size: 1.05rem;
  color: #4b5563;
  max-width: 34rem;
}

.awake-hero-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.awake-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.awake-hero-card {
  border-radius: 1.75rem;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(148, 163, 184, 0.18);
  overflow: hidden;
  background: #0b1220;
}

.awake-hero-card iframe {
  display: block;
  border: none;
}

/* Avatar stack in hero */
.awake-hero-meta .our-customers-pics {
  display: inline-flex;
  align-items: center;
}

.awake-hero-meta .our-customers-pics img {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  margin-left: -10px;
}

.awake-hero-meta .our-customers-pics img:first-child {
  margin-left: 0;
}

a {
  text-decoration: none !important; 
}
a:hover, a:focus, a:visited {
  text-decoration: none !important;
}

#faqs img, #privacy img, #terms img { border: 1px solid #ccc; }

mark { padding: 0; }

.media {
    display: flex;
    align-items: flex-start;
}

.media-body {
    flex: 1;
}

.opacity-25            { opacity: .25 !important; }
.opacity-50            { opacity: .5 !important; }
.opacity-75            { opacity: .75 !important; }
.opacity-100           { opacity: 1 !important; }

.text-tiny             { font-size: 70% !important; }
.text-small            { font-size: 85% !important; }
.text-big              { font-size: 112% !important; }
.text-large            { font-size: 150% !important; }
.text-xlarge           { font-size: 170% !important; }

.modal-dialog { width: 875px !important;}

@media (max-width: 992px) {
    .navbar-collapse .nav-item { display: grid; }
    .navbar-collapse .nav-item a.text-dark { margin-left: 6px }
    h1 { font-size: 45px; line-height: 1.1;}
    h2 { line-height: 2rem;}
    h3 { line-height: 0.9;}
    #experts h5 { font-size: 15px;}

    .modal-dialog { width: 100% !important;}

    a {
        text-decoration: none !important; 
    }
    a:hover, a:focus, a:visited {
        text-decoration: none !important;
    }

    .awake-hero {
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    .awake-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .awake-hero-h1 {
        font-size: 2.1rem;
    }
}