/* Global theme settings using CSS variables */
:root {
    --font-sans: "trade-gothic-next", sans-serif;

    --background: #f8f5ff;
    --foreground: #333333;
    --brand-campus-brick: #B94700;
    --brand-blue-ridge: #005EB8;
    --brand-state-flag: #00205B;
    --brand-stadium: #CBC4BC;
    --brand-howards-rock: #8C8279;
    --brand-reflection: #C8C9C7;
    --brand-innovation: #888B8D;
    --brand-bengal-stripe: #000000;
    --brand-clemson: #F56600;
    --brand-goal-line: #FFFFFF;
    --brand-regalia: #522D80;
    --brand-college-avenue: #333333;
    --brand-diploma: #2E1A47;
    --brand-reflection-contrast: #333333;
    --brand-parchment : #EFDBB2;

    /* Orange Palette */
    --brand-or10: #fffcfa;
    --brand-or50: #FFF0E6;
    --brand-or100: #F5D8C4;
    --brand-or200: #F68C3D;
    --brand-or300: #F58A3D;
    --brand-or400: #F56600;
    --brand-or500: #D95700;
    --brand-or600: #B94700;
    --brand-or700: #993B00;

    /* Purple Palette */
    --brand-pur50: #F8F5FF;
    --brand-pur100: #B6A3CC;
    --brand-pur300: #8163A6;
    --brand-pur400: #522D80;
    --brand-pur500: #3D215E;
    --brand-pur600: #2E1A47;
    --brand-pur700: #1E112E;

    /* Blue Palette */
    --brand-blu100: #EDF6FF;
    --brand-blu300: #3D87CC;
    --brand-blu400: #005EB8;
    --brand-blu500: #002D80;
    --brand-blu600: #00205B;
    --brand-blu700: #001233;

    /* Green Palette */
    --brand-gr100: #F9FAE8;
    --brand-gr300: #D2D957;
    --brand-gr400: #B7BF10;
    --brand-gr500: #84941E;
    --brand-gr600: #546223;
    --brand-gr700: #394217;

    /* WG Palette */
    --brand-wg100: #FFFFFF;
    --brand-wg200: #FCF9F5;
    --brand-wg300: #F2ECE6;
    --brand-wg400: #CBC4BC;
    --brand-wg500: #B3A79B;
    --brand-wg600: #8C8279;
    --brand-wg700: #655C53;

    /* CG Palette */
    --brand-cg100: #F7F7F7;
    --brand-cg200: #EDEDED;
    --brand-cg300: #C8C9C7;
    --brand-cg400: #888B8D;
    --brand-cg500: #575959;
    --brand-cg600: #333333;
    --brand-cg700: #000000;

    /* Neutral Palette */
    --brand-neu100: #FFF8ED;
    --brand-neu300: #FAEFD9;
    --brand-neu500: #EFDBB2;
    --brand-neu600: #DDC593;

    --light-orange: #e8b23f;
    --teal:#53edbf;
    --rose:#f55d7b;

    --nav-bg : rgba(239, 235, 235, 0.9);


    --Brick-Gradient: linear-gradient(48deg, #F56600 20.51%, #BB4B26 50.63%, #BA4A26 74.29%);
    --Regalia-Gradient: linear-gradient(48deg, #2E1B46 0.02%, #311C4B 5.32%, #432568 43.15%, #4E2B7A 75.85%, #522D80 99.52%);
    --Purp-to-orange: linear-gradient(48deg, #F56600 20.46%, #F06404 21.82%, #9C4746 48.45%, #673470 67.23%, #522D80 76.35%);
}
html{
    height : 100%;
}
body{
    height: 300vh;
}

html, body {
    /*height: 100%;*/
      /*margin: 0;*/
      display: flex;
      flex-direction: column;
      font-family: var(--font-sans) !important;
}

p{
    font-size: 1.125em;
    line-height: 1.5rem;
}

.selectize-dropdown, .selectize-dropdown.form-control {
    z-index : 11;
}

.floating-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: none; /* Hidden by default */
    background-color: var(--brand-campus-brick);
    color: white;
    border: none;
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease, transform 0.2s ease;
    z-index: 999;
}

.floating-button:hover {
    transform: scale(1.3);
    background-color: #b33a2f;
}

.footer-social-mobile {
    font-family: dejanire-headline, serif;
    font-weight: 700;
    font-style: italic;
    font-size: 22px;
    line-height: 25px;
    letter-spacing: 1px;
    padding-top: 25px;
    padding-left: 1.2rem;

    svg{
        font-size: 22px !important;
    }
}
    .footer-engage-mobile{
        font-family: dejanire-headline, serif;
        font-weight: 700;
        font-style: italic;
        font-size: 22px;
        line-height: 30px;
        letter-spacing: 1px;
        padding-top: 25px;
        padding-left: 1.2rem;
    }

.contact-info-mobile{
    padding-left: 1.2rem !important;
    font-family: dejanire-text, sans-serif;
    font-weight: 400;
    font-style: normal;
    /*font-size: 20px;*/
    line-height: 30px;
    text-align: center;
}

.mobileFooterLogo{
    height: 8rem;
}


@media (min-width: 576px) {
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 992px) {
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 1200px) {
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}


@media (min-width: 1400px) {
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 1920px) {
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        width : 1920px
    }
}


.sticky-navbar {
    position: sticky !important;
    top: 0 ;
    left: 0 !important;
    z-index: 1000;
    a{
        color: var(--brand-pur100);
        /*font-weight: 800;*/
        font-size: 1rem;
        svg{
            color: var(--brand-goal-line) !important;
            font-size: 1.5em;
            height: 1.4em;
            padding-left: 5em;
        }
    }
    a:hover {
        color: var(--brand-campus-brick);
    }

    header{
        top: 0 !important;
    }

}

.container-fluid {
    flex: 1;
    width: 100%;
    /*background-color: var(--brand-pur50);*/
}

@media (min-width: 768px) {
    .container-fluid#cu-main-content{
        padding-top: 4.125em;
    }
}


/*!* Apply the font family globally *!*/
body {
    font-family: var(--font-sans), serif !important;
    /*background-color: var(--brand-goal-line) !important;*/
    color: var(--foreground) !important;
    a{
        color: var(--brand-campus-brick);
    }
}

.content.mainContent {
    padding-top: 9em;
}


footer{
    background-color: var(--brand-regalia);
    color: var(--brand-pur50) !important;

    a{
        color: var(--brand-pur50);
    }
    svg{
        color: var(--brand-campus-brick);
    }
}

@media (max-width: 1199.98px) {  /* xl breakpoint in Bootstrap is 1200px */
    footer {
        background-color: var(--brand-pur50) !important; /* Change to your desired color */
        color: white; /* Optional: Change text color */
        .container-fluid{
            background-color: var(--brand-diploma);
        }
    }
}


header {
    background-color: var(--brand-pur50) !important;
}

#top-nav{
    background-color: var(--brand-pur100) !important;
    font-weight: 800 !important;
}


.smokeStack {
    background: url('https://cufacilities-dev8eec1.sites.clemson.edu/assets/stacks2.png');
    background-size: 100% 100%;
    height: 100px;
    width: 100px;
    margin-top: -100px;
    float: right;
}


.form_and_dashboard_heading{

    margin-left: -.25em;

}