/*
Theme Name: Juniper AI
Theme URI: local
Author: Sandy Tran
Author URI: local
*/

/* === Color Reference ===
Pink:     rgb(221,75,209)
Purple:   rgb(46,15,148)
Purple 2: rgb(93, 72, 237)
Blue:     rgb(28,12,141)
Yellow:   rgb(197, 219, 83)
*/

/* === Utility Classes === */
/* Default (mobile-first) utilities */

/* Margin utilities */
.mt-6 { margin-top: 4rem !important; }
.mb-6 { margin-bottom: 4rem !important; }
.ms-6 { margin-left: 4rem !important; }
.me-6 { margin-right: 4rem !important; }
.mx-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
.my-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

.mt-7 { margin-top: 5rem !important; }
.mb-7 { margin-bottom: 5rem !important; }
.ms-7 { margin-left: 5rem !important; }
.me-7 { margin-right: 5rem !important; }
.mx-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
.my-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }

.mt-8 { margin-top: 6rem !important; }
.mb-8 { margin-bottom: 6rem !important; }
.ms-8 { margin-left: 6rem !important; }
.me-8 { margin-right: 6rem !important; }
.mx-8 { margin-left: 6rem !important; margin-right: 6rem !important; }
.my-8 { margin-top: 6rem !important; margin-bottom: 6rem !important; }

.mt-9 { margin-top: 7rem !important; }
.mb-9 { margin-bottom: 7rem !important; }
.ms-9 { margin-left: 7rem !important; }
.me-9 { margin-right: 7rem !important; }
.mx-9 { margin-left: 7rem !important; margin-right: 7rem !important; }
.my-9 { margin-top: 7rem !important; margin-bottom: 7rem !important; }

.mt-10 { margin-top: 8rem !important; }
.mb-10 { margin-bottom: 8rem !important; }
.ms-10 { margin-left: 8rem !important; }
.me-10 { margin-right: 8rem !important; }
.mx-10 { margin-left: 8rem !important; margin-right: 8rem !important; }
.my-10 { margin-top: 8rem !important; margin-bottom: 8rem !important; }

/* Padding utilities */
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
.ps-6 { padding-left: 4rem !important; }
.pe-6 { padding-right: 4rem !important; }
.px-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

.pt-7 { padding-top: 5rem !important; }
.pb-7 { padding-bottom: 5rem !important; }
.ps-7 { padding-left: 5rem !important; }
.pe-7 { padding-right: 5rem !important; }
.px-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
.py-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

.pt-8 { padding-top: 6rem !important; }
.pb-8 { padding-bottom: 6rem !important; }
.ps-8 { padding-left: 6rem !important; }
.pe-8 { padding-right: 6rem !important; }
.px-8 { padding-left: 6rem !important; padding-right: 6rem !important; }
.py-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

.pt-9 { padding-top: 7rem !important; }
.pb-9 { padding-bottom: 7rem !important; }
.ps-9 { padding-left: 7rem !important; }
.pe-9 { padding-right: 7rem !important; }
.px-9 { padding-left: 7rem !important; padding-right: 7rem !important; }
.py-9 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

.pt-10 { padding-top: 8rem !important; }
.pb-10 { padding-bottom: 8rem !important; }
.ps-10 { padding-left: 8rem !important; }
.pe-10 { padding-right: 8rem !important; }
.px-10 { padding-left: 8rem !important; padding-right: 8rem !important; }
.py-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .mt-sm-6 { margin-top: 4rem !important; }
    .mb-sm-6 { margin-bottom: 4rem !important; }
    .ms-sm-6 { margin-left: 4rem !important; }
    .me-sm-6 { margin-right: 4rem !important; }
    .mx-sm-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
    .my-sm-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

    .mt-sm-7 { margin-top: 5rem !important; }
    .mb-sm-7 { margin-bottom: 5rem !important; }
    .ms-sm-7 { margin-left: 5rem !important; }
    .me-sm-7 { margin-right: 5rem !important; }
    .mx-sm-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
    .my-sm-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }

    .mt-sm-8 { margin-top: 6rem !important; }
    .mb-sm-8 { margin-bottom: 6rem !important; }
    .ms-sm-8 { margin-left: 6rem !important; }
    .me-sm-8 { margin-right: 6rem !important; }
    .mx-sm-8 { margin-left: 6rem !important; margin-right: 6rem !important; }
    .my-sm-8 { margin-top: 6rem !important; margin-bottom: 6rem !important; }

    .mt-sm-9 { margin-top: 7rem !important; }
    .mb-sm-9 { margin-bottom: 7rem !important; }
    .ms-sm-9 { margin-left: 7rem !important; }
    .me-sm-9 { margin-right: 7rem !important; }
    .mx-sm-9 { margin-left: 7rem !important; margin-right: 7rem !important; }
    .my-sm-9 { margin-top: 7rem !important; margin-bottom: 7rem !important; }

    .mt-sm-10 { margin-top: 8rem !important; }
    .mb-sm-10 { margin-bottom: 8rem !important; }
    .ms-sm-10 { margin-left: 8rem !important; }
    .me-sm-10 { margin-right: 8rem !important; }
    .mx-sm-10 { margin-left: 8rem !important; margin-right: 8rem !important; }
    .my-sm-10 { margin-top: 8rem !important; margin-bottom: 8rem !important; }

    /* Padding utilities */
    .pt-sm-6 { padding-top: 4rem !important; }
    .pb-sm-6 { padding-bottom: 4rem !important; }
    .ps-sm-6 { padding-left: 4rem !important; }
    .pe-sm-6 { padding-right: 4rem !important; }
    .px-sm-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
    .py-sm-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    .pt-sm-7 { padding-top: 5rem !important; }
    .pb-sm-7 { padding-bottom: 5rem !important; }
    .ps-sm-7 { padding-left: 5rem !important; }
    .pe-sm-7 { padding-right: 5rem !important; }
    .px-sm-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
    .py-sm-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

    .pt-sm-8 { padding-top: 6rem !important; }
    .pb-sm-8 { padding-bottom: 6rem !important; }
    .ps-sm-8 { padding-left: 6rem !important; }
    .pe-sm-8 { padding-right: 6rem !important; }
    .px-sm-8 { padding-left: 6rem !important; padding-right: 6rem !important; }
    .py-sm-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

    .pt-sm-9 { padding-top: 7rem !important; }
    .pb-sm-9 { padding-bottom: 7rem !important; }
    .ps-sm-9 { padding-left: 7rem !important; }
    .pe-sm-9 { padding-right: 7rem !important; }
    .px-sm-9 { padding-left: 7rem !important; padding-right: 7rem !important; }
    .py-sm-9 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

    .pt-sm-10 { padding-top: 8rem !important; }
    .pb-sm-10 { padding-bottom: 8rem !important; }
    .ps-sm-10 { padding-left: 8rem !important; }
    .pe-sm-10 { padding-right: 8rem !important; }
    .px-sm-10 { padding-left: 8rem !important; padding-right: 8rem !important; }
    .py-sm-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .mt-md-6 { margin-top: 4rem !important; }
    .mb-md-6 { margin-bottom: 4rem !important; }
    .ms-md-6 { margin-left: 4rem !important; }
    .me-md-6 { margin-right: 4rem !important; }
    .mx-md-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
    .my-md-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

    .mt-md-7 { margin-top: 5rem !important; }
    .mb-md-7 { margin-bottom: 5rem !important; }
    .ms-md-7 { margin-left: 5rem !important; }
    .me-md-7 { margin-right: 5rem !important; }
    .mx-md-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
    .my-md-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }

    .mt-md-8 { margin-top: 6rem !important; }
    .mb-md-8 { margin-bottom: 6rem !important; }
    .ms-md-8 { margin-left: 6rem !important; }
    .me-md-8 { margin-right: 6rem !important; }
    .mx-md-8 { margin-left: 6rem !important; margin-right: 6rem !important; }
    .my-md-8 { margin-top: 6rem !important; margin-bottom: 6rem !important; }

    .mt-md-9 { margin-top: 7rem !important; }
    .mb-md-9 { margin-bottom: 7rem !important; }
    .ms-md-9 { margin-left: 7rem !important; }
    .me-md-9 { margin-right: 7rem !important; }
    .mx-md-9 { margin-left: 7rem !important; margin-right: 7rem !important; }
    .my-md-9 { margin-top: 7rem !important; margin-bottom: 7rem !important; }

    .mt-md-10 { margin-top: 8rem !important; }
    .mb-md-10 { margin-bottom: 8rem !important; }
    .ms-md-10 { margin-left: 8rem !important; }
    .me-md-10 { margin-right: 8rem !important; }
    .mx-md-10 { margin-left: 8rem !important; margin-right: 8rem !important; }
    .my-md-10 { margin-top: 8rem !important; margin-bottom: 8rem !important; }

    /* Padding utilities */
    .pt-md-6 { padding-top: 4rem !important; }
    .pb-md-6 { padding-bottom: 4rem !important; }
    .ps-md-6 { padding-left: 4rem !important; }
    .pe-md-6 { padding-right: 4rem !important; }
    .px-md-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
    .py-md-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    .pt-md-7 { padding-top: 5rem !important; }
    .pb-md-7 { padding-bottom: 5rem !important; }
    .ps-md-7 { padding-left: 5rem !important; }
    .pe-md-7 { padding-right: 5rem !important; }
    .px-md-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
    .py-md-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

    .pt-md-8 { padding-top: 6rem !important; }
    .pb-md-8 { padding-bottom: 6rem !important; }
    .ps-md-8 { padding-left: 6rem !important; }
    .pe-md-8 { padding-right: 6rem !important; }
    .px-md-8 { padding-left: 6rem !important; padding-right: 6rem !important; }
    .py-md-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

    .pt-md-9 { padding-top: 7rem !important; }
    .pb-md-9 { padding-bottom: 7rem !important; }
    .ps-md-9 { padding-left: 7rem !important; }
    .pe-md-9 { padding-right: 7rem !important; }
    .px-md-9 { padding-left: 7rem !important; padding-right: 7rem !important; }
    .py-md-9 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

    .pt-md-10 { padding-top: 8rem !important; }
    .pb-md-10 { padding-bottom: 8rem !important; }
    .ps-md-10 { padding-left: 8rem !important; }
    .pe-md-10 { padding-right: 8rem !important; }
    .px-md-10 { padding-left: 8rem !important; padding-right: 8rem !important; }
    .py-md-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .mt-lg-6 { margin-top: 4rem !important; }
    .mb-lg-6 { margin-bottom: 4rem !important; }
    .ms-lg-6 { margin-left: 4rem !important; }
    .me-lg-6 { margin-right: 4rem !important; }
    .mx-lg-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
    .my-lg-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

    .mt-lg-7 { margin-top: 5rem !important; }
    .mb-lg-7 { margin-bottom: 5rem !important; }
    .ms-lg-7 { margin-left: 5rem !important; }
    .me-lg-7 { margin-right: 5rem !important; }
    .mx-lg-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
    .my-lg-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }

    .mt-lg-8 { margin-top: 6rem !important; }
    .mb-lg-8 { margin-bottom: 6rem !important; }
    .ms-lg-8 { margin-left: 6rem !important; }
    .me-lg-8 { margin-right: 6rem !important; }
    .mx-lg-8 { margin-left: 6rem !important; margin-right: 6rem !important; }
    .my-lg-8 { margin-top: 6rem !important; margin-bottom: 6rem !important; }

    .mt-lg-9 { margin-top: 7rem !important; }
    .mb-lg-9 { margin-bottom: 7rem !important; }
    .ms-lg-9 { margin-left: 7rem !important; }
    .me-lg-9 { margin-right: 7rem !important; }
    .mx-lg-9 { margin-left: 7rem !important; margin-right: 7rem !important; }
    .my-lg-9 { margin-top: 7rem !important; margin-bottom: 7rem !important; }

    .mt-lg-10 { margin-top: 8rem !important; }
    .mb-lg-10 { margin-bottom: 8rem !important; }
    .ms-lg-10 { margin-left: 8rem !important; }
    .me-lg-10 { margin-right: 8rem !important; }
    .mx-lg-10 { margin-left: 8rem !important; margin-right: 8rem !important; }
    .my-lg-10 { margin-top: 8rem !important; margin-bottom: 8rem !important; }

    /* Padding utilities */
    .pt-lg-6 { padding-top: 4rem !important; }
    .pb-lg-6 { padding-bottom: 4rem !important; }
    .ps-lg-6 { padding-left: 4rem !important; }
    .pe-lg-6 { padding-right: 4rem !important; }
    .px-lg-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
    .py-lg-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    .pt-lg-7 { padding-top: 5rem !important; }
    .pb-lg-7 { padding-bottom: 5rem !important; }
    .ps-lg-7 { padding-left: 5rem !important; }
    .pe-lg-7 { padding-right: 5rem !important; }
    .px-lg-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
    .py-lg-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

    .pt-lg-8 { padding-top: 6rem !important; }
    .pb-lg-8 { padding-bottom: 6rem !important; }
    .ps-lg-8 { padding-left: 6rem !important; }
    .pe-lg-8 { padding-right: 6rem !important; }
    .px-lg-8 { padding-left: 6rem !important; padding-right: 6rem !important; }
    .py-lg-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

    .pt-lg-9 { padding-top: 7rem !important; }
    .pb-lg-9 { padding-bottom: 7rem !important; }
    .ps-lg-9 { padding-left: 7rem !important; }
    .pe-lg-9 { padding-right: 7rem !important; }
    .px-lg-9 { padding-left: 7rem !important; padding-right: 7rem !important; }
    .py-lg-9 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

    .pt-lg-10 { padding-top: 8rem !important; }
    .pb-lg-10 { padding-bottom: 8rem !important; }
    .ps-lg-10 { padding-left: 8rem !important; }
    .pe-lg-10 { padding-right: 8rem !important; }
    .px-lg-10 { padding-left: 8rem !important; padding-right: 8rem !important; }
    .py-lg-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .mt-xl-6 { margin-top: 4rem !important; }
    .mb-xl-6 { margin-bottom: 4rem !important; }
    .ms-xl-6 { margin-left: 4rem !important; }
    .me-xl-6 { margin-right: 4rem !important; }
    .mx-xl-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
    .my-xl-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

    .mt-xl-7 { margin-top: 5rem !important; }
    .mb-xl-7 { margin-bottom: 5rem !important; }
    .ms-xl-7 { margin-left: 5rem !important; }
    .me-xl-7 { margin-right: 5rem !important; }
    .mx-xl-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
    .my-xl-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }

    .mt-xl-8 { margin-top: 6rem !important; }
    .mb-xl-8 { margin-bottom: 6rem !important; }
    .ms-xl-8 { margin-left: 6rem !important; }
    .me-xl-8 { margin-right: 6rem !important; }
    .mx-xl-8 { margin-left: 6rem !important; margin-right: 6rem !important; }
    .my-xl-8 { margin-top: 6rem !important; margin-bottom: 6rem !important; }

    .mt-xl-9 { margin-top: 7rem !important; }
    .mb-xl-9 { margin-bottom: 7rem !important; }
    .ms-xl-9 { margin-left: 7rem !important; }
    .me-xl-9 { margin-right: 7rem !important; }
    .mx-xl-9 { margin-left: 7rem !important; margin-right: 7rem !important; }
    .my-xl-9 { margin-top: 7rem !important; margin-bottom: 7rem !important; }

    .mt-xl-10 { margin-top: 8rem !important; }
    .mb-xl-10 { margin-bottom: 8rem !important; }
    .ms-xl-10 { margin-left: 8rem !important; }
    .me-xl-10 { margin-right: 8rem !important; }
    .mx-xl-10 { margin-left: 8rem !important; margin-right: 8rem !important; }
    .my-xl-10 { margin-top: 8rem !important; margin-bottom: 8rem !important; }

    /* Padding utilities */
    .pt-xl-6 { padding-top: 4rem !important; }
    .pb-xl-6 { padding-bottom: 4rem !important; }
    .ps-xl-6 { padding-left: 4rem !important; }
    .pe-xl-6 { padding-right: 4rem !important; }
    .px-xl-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
    .py-xl-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    .pt-xl-7 { padding-top: 5rem !important; }
    .pb-xl-7 { padding-bottom: 5rem !important; }
    .ps-xl-7 { padding-left: 5rem !important; }
    .pe-xl-7 { padding-right: 5rem !important; }
    .px-xl-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
    .py-xl-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

    .pt-xl-8 { padding-top: 6rem !important; }
    .pb-xl-8 { padding-bottom: 6rem !important; }
    .ps-xl-8 { padding-left: 6rem !important; }
    .pe-xl-8 { padding-right: 6rem !important; }
    .px-xl-8 { padding-left: 6rem !important; padding-right: 6rem !important; }
    .py-xl-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

    .pt-xl-9 { padding-top: 7rem !important; }
    .pb-xl-9 { padding-bottom: 7rem !important; }
    .ps-xl-9 { padding-left: 7rem !important; }
    .pe-xl-9 { padding-right: 7rem !important; }
    .px-xl-9 { padding-left: 7rem !important; padding-right: 7rem !important; }
    .py-xl-9 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

    .pt-xl-10 { padding-top: 8rem !important; }
    .pb-xl-10 { padding-bottom: 8rem !important; }
    .ps-xl-10 { padding-left: 8rem !important; }
    .pe-xl-10 { padding-right: 8rem !important; }
    .px-xl-10 { padding-left: 8rem !important; padding-right: 8rem !important; }
    .py-xl-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
}

/* === Typography === */
.material-symbols-outlined { 
	font-size: unset !important; 
}

.text-secondary {
	color: #c8fcff !important;
}

.font-rem {
	text-transform: uppercase;
	font-family: "REM", sans-serif;
}

.font-poppins {
	font-family: "Poppins", sans-serif;

}

/* === Bootstrap Components === */
.breadcrumb-item + .breadcrumb-item::before { color: #fff !important; }

/* === Custom Components === */
.bg-glow { background-attachment: scroll; background-clip: border-box; background-color: rgb(20, 22, 32); background-image: radial-gradient(65% 60% at 50% 50%, rgba(0, 52, 255, 0.25) 0%, rgb(20, 22, 32) 78%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; }
.glass-card { padding: 30px; position: relative; border: 0.1px solid rgba(255,255,255,0.5); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); }
.section-label { border: 1px solid rgb(93, 72, 237); padding: 5px 20px; border-radius: 40px; font-weight: 100; display: inline-block; }

/* === Sizing === */
.h-100vh { height: 100vh; }