.AdditionalResources{
    padding-top: 3em;
    padding-bottom: 3em;
}
.additionalRestitle{
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    line-height: 3rem;
    font-size: 2.78rem ;
    color: var(--brand-goal-line);
    width: 100%;
    padding-bottom: 1.3rem;
}
.button.cu-btn.fiercely.brick {
    background: var(--Brick-Gradient);
    background-size: 150% 100%;
    background-position: 0 0;
}

.button.cu-btn.fiercely {
    font-family: "trade-gothic-next-compressed", "trade-gothic-next", Franklin Gothic, Verdana, sans-serif;
    border-radius: 0;
    display: inline-flex;
    height: 66px;
    max-width: 314px;
    padding: 12px 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: background-position .35s, box-shadow .3s;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .25);
    text-align: center;
    font-size: 21.6px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
}
@media (min-width: 1121px) and (max-width: 1643px) {
    .button.cu-btn.fiercely {
        max-width: 214px;
    }
}

.container#home{
    margin-left: 0;
    margin-right: 0;
}

.container-fluid{
    padding-right: calc(var(--bs-gutter-x)* .24);
    padding-left: calc(var(--bs-gutter-x)* .24);
}

.cufac-button{
    font-family: trade-gothic-next-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    border-radius: 10px;
    background: var(--brand-pur100);
    margin: 50px;
    height: 61px !important;
    width: 247px !important;
    white-space: nowrap;
    padding: 0px;
    color: var(--brand-goal-line);
    text-align: center;
    vertical-align: middle;
    text-align: left;
}

/* DiversitySection  */

.DiversitySectionContent{
    font-family: trade-gothic-next, sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 100%;
    font-size: 1.125rem ;
    line-height: 1.75rem;
    color: var(--brand-goal-line);
    z-index: 1;
    /*padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;*/

}
.DiversitySectionTitle{
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    line-height: 3rem;
    font-size: 2.78rem ;
    width: 100%;
    padding-top: 3.063rem;
    color: var(--brand-goal-line);
    z-index: 1;
}

.safetyButton{
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: 1.75rem;
    --bs-btn-bg: var(--brand-campus-brick);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--brand-clemson);
    padding-bottom: .5em;
}

.UpcomingEvents{
    /*background: var(--brand-diploma) !important;*/
    z-index: 1;
}


.UpcomingSectionContent{
    font-family: trade-gothic-next, sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 100%;
    color: var(--brand-campus-brick);
}

.upcomingtitle{
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.78rem;
    line-height: 3rem;
    color: var(--brand-goal-line);
    width: 100%;
    text-align: left;
    vertical-align: center;
    /*padding-top: 29px;*/
}

.upcomingAll{
    font-family: dejanire-headline, serif;
    font-weight: 700;
    font-style: italic;
    font-size: 22px;
    color: var(--brand-goal-line);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    a{
        color: var(--brand-goal-line);
        font-weight: 700;
    }
    a:hover {
        color: var(--brand-clemson);
    }
}
.upcomingAll:hover {
    color: var(--brand-clemson);
}
.arrow-icon {
    margin-left: 5px;
    transition: transform 0.3s ease-in-out;
}
.upcomingArrow {
    flex: 8; /* Take up 8 parts of the available space */
    background: url("/assets/arrow2.svg") no-repeat left center;
    background-size: 9.713em 6.25em;
    background-position-y: 0.25rem;
    background-position-x: 16rem;
    padding-left: 20px;
}

.upcomingAll:hover .arrow-icon {
    transform: translateX(5px);  /* Moves arrow to the right */
}

.upcomingBanner {
    font-family: trade-gothic-next-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(18px, 2vw, 25px); /* Adjusts dynamically */
    border-radius: 10px;
    background: var(--brand-goal-line);
    margin: 2vw auto; /* Adjust margin dynamically */
    height: 5.313rem; /* Can be changed to auto for better flexibility */
    width: 90%; /* Use percentage instead of fixed width */
    max-width: 880px; /* Prevents it from becoming too wide */
    white-space: nowrap;
    padding: 0.5rem 1rem; /* Adds better spacing */
    color: var(--brand-campus-brick);
    text-align: left;
    display: flex; /* Flexbox for vertical alignment */
    align-items: center; /* Centers content vertically */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .upcomingBanner {
        font-size: clamp(16px, 3vw, 22px);
        width: 95%; /* Takes more space on smaller screens */
        white-space: normal; /* Allows text wrapping */
        text-align: center; /* Centers text */
        height: auto; /* Adjusts height dynamically */
        padding: 1rem;
    }

}

@media (max-width: 480px) {
    .upcomingBanner {
        font-size: clamp(14px, 4vw, 20px);
        width: 100%;
        margin: 3vw auto;
        border-radius: 5px;
    }
}

.rightBorder{
    border-right-color: var(--brand-clemson) ;
}


.card-title {
    border-left: 3px solid var(--brand-campus-brick);
}
.eventTitle{
    /*padding-left: calc(var(--bs-gutter-x)* .50) !important;*/
    font-weight: 700;
    font-size: 32px !important;
}

.eventTitle:hover{
    color: var(--brand-clemson);
}


.eventDetails{
    color: var(--brand-bengal-stripe);
}


.cardHeader{
    font-size: 20px;
    text-align: center;
    background: var(--brand-reflection);
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 3px;
}

.card{
    border-radius: 9px;
    height: 100%;

}

.cardBodyText{
    font-size: 14px;
    line-height: 22px;
}

.card-body{
    padding-left: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.gisCardImage1{
    background: url("/assets/gis1.png") no-repeat left center;
    background-size: 130px 130px;
    background-position-y: 7px;
    background-position-x: 190px;
}


/*.HeadlinesSection{
    font-family: trade-gothic-next, sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 100%;

    display: flex;
    justify-content: flex-start;

    padding-bottom: 35px;
    padding-top: 35px;
    background: #EDEDED;
    height: 83vh;

}*/
.HeadlinesSection {
    font-family: trade-gothic-next, sans-serif;
    font-weight: 400;
    font-style: normal;
    /*width: 100%;*/
    display: flex;
    justify-content: flex-start;
    padding: clamp(20px, 5vw, 35px) 5vw; /* Adjusts padding based on screen width */

    height: auto;
    /* Ensuring relative positioning for ::before */
    position: relative;
    overflow: hidden; /* Ensures pseudo-element does not cause unwanted scroll */

    /* Background with gradient and texture */
    background: linear-gradient(162deg, #2E1B46 1.66%, #311C4B 37.86%, #432568 59.95%, #4E2B7A 76.61%, #522D80 100%);
    background-size: cover;
    background-blend-mode: overlay;
    /*height: clamp(60vh, 83vh, 100vh); !* Makes height more adaptable *!*/
    z-index: 1;
}

/* Fix for the `h2` styling */
.HeadlinesSection h2 {
    color: var(--brand-goal-line) !important;
}

/* Fix for the ::before pseudo-element */
.HeadlinesSection::before {
    content: "";
    background-size: contain; /* Prevents unwanted stretching */
    background: url(https://www.clemson.edu/_images/home/background-textures/stripe-purp.svg) no-repeat center;
    height: 100%;
    width: 100%;
    opacity: 0.5;

    /* Contain within HeadlinesSection */
    position: absolute;
    top: 0;
    left: 0;
}


/* Large screens (1920px and above) */
@media (min-width: 1920px) {
    .HeadlinesSection {
        /*height: 110vh;
        padding-top: 15vh;
        padding-bottom: 110vh;*/
    }
}

/* Medium screens (1024px - 1725px) */
@media (max-width: 1725px) {
    .HeadlinesSection {
        height: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

@media (max-width: 1512px) {
    .HeadlinesSection {
        height: auto;
        /*padding-top: 15vh;*/
        padding-bottom: 3rem;
    }
}

@media (max-width: 1365px) {
    .HeadlinesSection {
        height: auto;
        /*padding-top: 15vh;*/
        padding-bottom: 3rem;
    }
}

/* Tablets (636px - 1024px) */
@media (max-width: 1028px) {
    .HeadlinesSection {
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        flex-direction: column; /* Adjusts layout for smaller screens */
        align-items: center;
    }
}

/* Mobile screens (below 636px) */
@media (max-width: 636px) {
    .HeadlinesSection {
        height: auto; /* Allows content to dictate height */
        padding-top: 15px;
        padding-bottom: 15px;
        flex-direction: column;
        align-items: center;
    }
}


.headlinesBanner{
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 40px;
    white-space: nowrap;
    color: var(--brand-goal-line);
    text-align: left;
    vertical-align: middle;
    text-align: left;
    padding-left: 134px;
}



.headlinesAll{
    font-family: dejanire-headline, serif;
    font-weight: 700;
    font-style: italic;
    font-size: 22px;
    color: var(--brand-bengal-stripe);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    z-index: 1;
    a{
        color: var(--brand-goal-line);
        font-weight: 700;
    }
    a:hover {
        color: var(--brand-clemson);
    }
}
.headlinesAll:hover {
    color: var(--brand-clemson);
}


.headlinesAll:hover .arrow-icon {
    transform: translateX(5px);  /* Moves arrow to the right */
}

.MissionSection{
    text-align: center;
    justify-content: center;
    align-items: center;
}

.missionTitle{
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 36px;
    color: var(--brand-diploma);
    padding-top: 31px;
}

.missionText{
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 24px;
    color: var(--brand-campus-brick);
    padding-bottom: 31px;
}


.visionBG {
    flex: 9; /* Take up 8 parts of the available space */
    background: url("/assets/homepage/eltigre2.png") no-repeat left center;
    /*background: url("/assets/homepage/cu-tiger-const.png") no-repeat left center;*/
    /*background-size: 21.438em 28.5em;*/
    background-position-y: -11px;
    background-position-x: 0px;
    padding: 20px;
    opacity: 1;
}


/*.heroBanner{
        padding-top: 160px;
        height: 69vh;
        background-size: cover; !* Scales image to cover entire div *!
        !* Centers the image *!
    background:
            linear-gradient(90deg, #2E1A47 0%, #00000000 50%),
            url("/assets/gis-banner.png") no-repeat center;
}*/

.heroBanner {
    padding-top: 160px;
    height: 84vh;
    background-size: cover; /* Ensures the image covers the entire div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;
    background-image: linear-gradient(75deg, #311C4B 1.2%, rgba(103, 52, 112, 0.90) 31.13%,
    rgba(156, 71, 70, 0.60) 47.77%, rgba(227, 117, 38, 0.30) 70.34%,
    rgba(245, 102, 0, 0.10) 92.59%),
    url("https://www.clemson.edu/_images/home/banner-images/ff-background-2440.webp");
}

/*.heroBanner::before {
    content: "";
    background: url(https://www.clemson.edu/_images/home/background-textures/stripe-purp.svg);
    background-repeat: no-repeat;
    background-size: contain; !* Prevents unwanted stretching *!
    background-position: right center;
    height: 100%;
    width: 100%;
    opacity: 0.2;

    !* Contain within HeadlinesSection *!
    position: absolute;
    top: 0;
    left: 0;
}*/

.cu-accent-link {
    color: var(--brand-bengal-stripe) !important;
}
h2.cu-text-wg100{
    color: var(--brand-diploma) !important;
}

h2.cu-text-pur50{
    color: var(--brand-pur50) !important;
}

.missionSection{
    background-image: linear-gradient(180deg, var(--brand-goal-line) 0%, var(--brand-goal-line) 100%), url(https://www.clemson.edu/_images/home/background-textures/rough-bg-lightened-2.webp);
    background-size: auto;
    /*background-repeat: repeat-y;*/
    background-blend-mode: multiply;
}

.gisSection {
    background-image: var(--Purp-to-orange), url(/assets/MMAECM2014.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-position: center center;
}

.additionalResources{
    background-image: var(--Purp-to-orange),
    url(https://www.clemson.edu/_images/home/background-textures/rough-bg-lightened-2.webp);
    background-size: auto;
    background-repeat: repeat-y;
    background-blend-mode: multiply;
}

/*@media (max-width: 767px) {
    #heroBanner-buttons {
        display: none !important;
    }
}*/

/* Media queries for responsive image changes */
.heroBanner {
    padding-top: 160px;
    height: 84vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(
            75deg,
            #311C4B 1.2%,
            rgba(103, 52, 112, 0.90) 31.13%,
            rgba(156, 71, 70, 0.60) 47.77%,
            rgba(227, 117, 38, 0.30) 70.34%,
            rgba(245, 102, 0, 0.10) 92.59%
    ),
    /* url("/assets/homepage/homepage1920x633.jpg"); */
    url("/assets/homepage/homepage2440x1393.jpg");
}
/* 1920px */
@media (max-width: 1920px) {
    .heroBanner {
        background-image: linear-gradient(
                75deg,
                #311C4B 1.2%,
                rgba(103, 52, 112, 0.90) 31.13%,
                rgba(156, 71, 70, 0.60) 47.77%,
                rgba(227, 117, 38, 0.30) 70.34%,
                rgba(245, 102, 0, 0.10) 92.59%
        ),
        url("/assets/homepage/homepage2440x1393.jpg");
    }
}

/* 1730px */
@media (max-width: 1730px) {
    .heroBanner {
        background-image: linear-gradient(
                75deg,
                #311C4B 1.2%,
                rgba(103, 52, 112, 0.90) 31.13%,
                rgba(156, 71, 70, 0.60) 47.77%,
                rgba(227, 117, 38, 0.30) 70.34%,
                rgba(245, 102, 0, 0.10) 92.59%
        ),
        url("/assets/homepage/homepage1730x998.jpg");
    }
}

/* 1512px */
@media (max-width: 1512px) {
    .heroBanner {
        background-image: linear-gradient(
                75deg,
                #311C4B 1.2%,
                rgba(103, 52, 112, 0.90) 31.13%,
                rgba(156, 71, 70, 0.60) 47.77%,
                rgba(227, 117, 38, 0.30) 70.34%,
                rgba(245, 102, 0, 0.10) 92.59%
        ),
        url("/assets/homepage/homepage1512x864.jpg");
    }
}

/* Tablet 1024px */
@media (max-width: 1024px) {
    .heroBanner {
        padding-top: 120px;
        height: 70vh;
        background-position: center top;
        background-image: linear-gradient(
                75deg,
                #311C4B 1.2%,
                rgba(103, 52, 112, 0.90) 31.13%,
                rgba(156, 71, 70, 0.60) 47.77%,
                rgba(227, 117, 38, 0.30) 70.34%,
                rgba(245, 102, 0, 0.10) 92.59%
        ),
        url("/assets/homepage/homepage1024x585.jpg");
    }
}

/* Small tablets 768px */
@media (max-width: 768px) {
    .heroBanner {
        padding-top: 100px;
        height: 64.5vh;
        background-position: center top;
    }
}

/* Phones 636px and below */
@media (max-width: 636px) {
    .heroBanner {
        padding-top: 80px;
        /*padding-bottom: 80px;*/
        height: auto;
        background-position: center top;
        background-image: linear-gradient(
                75deg,
                #311C4B 1.2%,
                rgba(103, 52, 112, 0.90) 31.13%,
                rgba(156, 71, 70, 0.60) 47.77%,
                rgba(227, 117, 38, 0.30) 70.34%,
                rgba(245, 102, 0, 0.10) 92.59%
        ),
        url("/assets/homepage/homepage636x424.jpg");
    }
}




/*.blog-title{
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 7rem;
    color: var(--brand-goal-line);
    padding-left: 32px;
}*/

.blog-title {
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: clamp(2.5rem, 6vw, 7rem); /* Adjusts size dynamically */
    color: var(--brand-goal-line);
    padding-left: 32px; /* Adjusts padding based on viewport width */
}

/* Large screens (1920px and above) */
@media (min-width: 1920px) {
    .blog-title {
        font-size: 7rem;
        padding-left: 32px;
    }
}

/* Medium screens (1024px - 1725px) */
@media (max-width: 1725px) {
    .blog-title {
        font-size: 5rem;
        padding-left: 24px;
    }
}

@media (max-width: 1512px) {
    .blog-title {
        font-size: 4rem;
        padding-left: 32px;
    }
}

/* Tablets (636px - 1024px) */
@media (max-width: 1024px) {
    .blog-title {
        font-size: 3.5rem;
        padding-left: 16px;
    }
}

/* Mobile screens (below 636px) */
@media (max-width: 636px) {
    .blog-title {
        font-size: 2.5rem;
        padding-left: 12px;
    }
}


.logoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(150, 100, 200, 0.6); /* Light purple background */
    backdrop-filter: blur(10px); /* Blurred effect */
    border-radius: 10px; /* Smooth edges */
    max-width: 200px; /* Adjust based on logo size */
    margin: auto; /* Centering */
}

.blog-text{
    font-family: trade-gothic-next, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.35rem;
    line-height: 1.75rem;
    padding-top: 30px;
    padding-left: 32px;
    color: var(--brand-goal-line);
}


.heroButtons{
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.heroButton{
    font-size: 1.5em;
    font-weight: 600;
}

.heroButton .fa-solid{
    font-size: 2em;
}

@media (max-width: 991.98px) {
    .heroButton{
        font-size: 1em;
    }
}

/*
.heroButton .fa-solid:hover{
    font-size: 2.1em;
}*/

.heroButton:hover {
    /*font-size: 2em;*/
    background-color: var(--brand-pur500);
}


.btn-group#quickLinks{
    justify-content: center;
    align-content: center;
    padding-left: 60px;
    /*padding-top: 12rem;*/
    button{
        font-family: trade-gothic-next-condensed, sans-serif;
        color: var(--brand-goal-line);
    }

}