.content__container{
    display:flex;
    flex-direction:row;
    gap:10px;
    background-color: var(--color--fas-blue);
    padding-top:150px;
}
.content__container div{
    margin:20px;
}


.text__container{
    width:45%;
    padding:10px;
    color:white;
    margin-left:0;
    padding-left: 0;
}

.text__body{
    font-weight: normal;
    font-size: 16px;
    line-height: 23px;
    text-align: left;
    font-family:'StabilGrotesk-Regular';

}
.text__intro{
   
    font-size: 45px;
    line-height: 48px;
    text-align: left;
    font-family: 'StabilGrotesk-Bold';
}

.text__explore{
    margin: 0px;
    padding: 10px 0px 10px 10px;
    color: #9ccdf9;
    display: inline;
    font-family: 'StabilGrotesk-bold';
    font-size: 23px;
    line-height: 20px;
    width: disp;
}

.text__span{
    display:flex;
    align-items: center;
    text-decoration: none;

}
.text__span img{
    width:33px;
}

.text__submit{
    font-size: 1.75rem;
    margin: 0 0 0 15px;
    padding:10px;
    color: var(--color--social-orange);
}




/*This is all map stuff*/


.map-display__container{
    position:relative;
    margin:0px !important;
    height: fit-content;
    padding:10px;
    height: 600px;
}

.map-display__img{
    
    width:75%
}

.speech-display__img{
    position:absolute;
    top:-175px;
    width:100%;
    right:0vh
}

.map-display__spawner{
    position:absolute;
    width:50px;
    height:50px;
    z-index: 500;
    left:calc(50% - 25px);
    top:calc(50% - 25px);
}

.bubble__obj{
    position:absolute;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction:column;
    
    width: fit-content;
    aspect-ratio: 1 / 1;
    overflow: hidden; 
    z-index: 500;
    border-radius: 50%;
    border:8px solid var(--color--tech-blue);
    background-color: rgb(232, 232, 232);
    padding: 20px;
    text-align: center;
    
}
.bubble__obj:hover{
    background-color: rgb(255, 255, 255);
    
}

.bubble__obj::after {
  
  content: "";
  position: absolute;



  bottom: 0px;
  right: 0px;

  width: 50px;               /* Controls horizontal thinness */
  height: 50px;             /* Controls vertical length */
  background-color: var(--color--tech-blue);
  clip-path: polygon(50% 0%, 0% 80%, 100% 80%);

  transform: rotate(135deg);

}

.bubble__obj p{
    font-family: 'StabilGrotesk-LightItalic';
    color: var(--color--fas-blue);
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 0px;

             /* Hides everything past the line threshold */



}



.bubble__text{
    /* padding-top: 8px; */
    width: 260px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
}

.bubble__meta{
    border-top:2px solid var(--color--fas-blue);
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    width:200px;
    color: var(--color--nuclear-red);
    margin:0px;
}
.bubble__meta p{
    color: var(--color--nuclear-red)
}

/*Campaign stuff*/


.campaign__container{
    background-color: rgb(225, 225, 225);
    position:relative;
    text-align: center;
}

.campaign__title{
    color: var(--color--fas-blue);
    text-align: left;
    font-family: 'StabilGrotesk-bold';
    font-size: 48px;
}

.campaign__img{
    width:100%;
}
.campaign__links img{
    width:30px;

}
.campaign__links{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap:25px;
    padding: 15px;
    box-sizing:border-box;
}
.campaign__name{
    padding:0px 5px;
    margin:0px;
    font-family: "StabilGrotesk-Bold";
    color:var(--color--fas-blue)
}


.campaing__links--Pinst{
    border-radius: 50%;
}
.campaing__links--Plink{
    border-radius: 50%;
}
.campaing__links--Pdown{
    border-radius: 50%;
}
.campaign__links--Pinst{

}
.campaign__links--Plink{
    
}
.campaign__links--Pdown{
    
}
.campaign__link{
    display:inline-block;
}

.campaign__list{
    width:100%;
    display:flex;
    flex-direction:row;
    gap:15px;
    padding: 20px 0px;
    overflow-x:hidden;
    
}
.campaign__item {
    flex-shrink: 0;
    width:calc(25% - 15px);
    transition: transform 0.2s ease; 
    box-shadow: rgba(31, 48, 64, 0.2) 0px 8px 24px;
}

.campaign__item:hover {
  transform: translateY(-5px);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.campaign__for{
    display:flex;
    justify-content: center;
    align-items: center;
    width:75px;
    height:75px;
    background-color: white;
    border-radius: 50%;
    transform: rotate(180deg);
}


.campaign__back{
    display:flex;
    justify-content: center;
    align-items: center;
    width:75px;
    height:75px;
    
    background-color: white;
    border-radius: 50%;

}

.campaign__btns{
    
    position:absolute;
    padding: var(--spacing--10) var(--spacing--8)calc(8 * 4px);
    display:flex;
    justify-content: space-between;
    top:35%;
    left: 0;
    right: 0;
    z-index: 10;
    
}
.campaign__for:hover{
    background-color: rgb(209, 209, 209);
} 

.campaign__back:hover{
    background-color: rgb(209, 209, 209);

}


.campaign__btns img{
    width:110%;
}


/*NEWS STUFF*/

.news__container{
    
}
.news__header{
    
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
}
.news__header h1{
    margin: 0px;
    color: var(--color--fas-blue);
    display: flex;
    align-items: flex-end;
    font-family: "StabilGrotesk-Bold";
    
}
.news__filters{
    display:flex;
    flex-direction: row;
    gap:20px;
    align-items: flex-end;
}
.news__filters h4{
    margin: 5px;
    color: rgb(146 146 146);
    
}
.news__combine{
    display:flex;
    height:fit-content;
}
.news__main{
    max-height: 675px;
    width:50%;
    box-sizing: border-box;
    padding:20px;
    display:flex;
    flex-direction: column;
    transition: all .2s ease-out;
}
.news__main-btnHold{
    height: 7%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    margin: 10px 0px;
    
}

.news__main-aut{
    margin:0px;
    padding: 5px;
    font-family: 'StabilGrotesk-regular';
    font-size:18px;
    line-height: 20px;
}

.news__main-img{
    width:80%;
    max-height:56%;
    min-height:50%;
}
.news__main-title{
    margin:0px;
    padding:5px;
    height:20%;
    line-height: 35px;

}
.news__main-title a{
    color: var(--color--fas-blue);
    font-style: none;
    text-decoration: none;
    font-family: 'StabilGrotesk-bold';
    font-size: 32px;
    display: block;
    line-height: 31px;
    
}
.news__main-date{
    margin:0px;
    padding:5px;
    font-weight: bold;
    height:6%;
    font-family: 'StabilGrotesk-bold';
    font-size:18px;
    line-height: 20px;
}
.news__main-publication{
    margin:0px;
    padding:5px;
    font-family: 'StabilGrotesk-LightItalic';
    font-size:18px;
    line-height: 20px;
}
.news__main-left{
    display: flex;
    width:50px;
    height:50px;
    background-color: white;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

}
.news__main-right{
    display:flex;
    width:50px;
    height:50px;
    background-color: white;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transform: rotate(180deg);
}

.news__main-btnHold img{
    width:110%;
    
}


.news__list{
    width:50%;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    transition: all .2s ease-out;
}
.news__item{
    display: flex;
    gap:20px;
    

    
}
.news__item-img{
    width:20%;
    height:auto    
}
.news__item-link{
    color:var(--color--fas-blue);
    display:block;
    text-decoration: none;
    font-family: 'StabilGrotesk-bold';
    font-size:24px;
    line-height: 26px;
}

.news__item-title{
    margin:0px;
    font-size: 1.5rem;
    color: var(--color--fas-blue);
}
.news__item-date{
    margin:0px;
    font-size: 1.2rem;
    font-family: 'StabilGrotesk-bold';
    font-size:16px;
    line-height: 19px;
}
.news__item-pub{
    margin:0px;
    font-size: 1.2rem;
    font-family: 'StabilGrotesk-LightItalic';
    font-size:16px;
    line-height: 19px;
}
.news__item-aut{
    margin:0px;
    font-size: 1rem;
    font-family: 'StabilGrotesk-regular';
    font-size:16px;
    line-height: 19px;
}
.news__item-collect{
    display:flex;
    flex-direction: column;
    width:75%
}


/*TERMINATION STUFF*/

.termination__container{
    background-color: var(--color--fas-blue);
}
.termination__title h1{
    color:white;
    text-align: left;
    font-family: "StabilGrotesk-Bold";
}

.termination__holder{
    display: grid;
    flex-direction: row;
    transition: all .2s ease-out;
    flex-wrap: wrap;
    grid-template-columns: repeat(4, 100px);
    align-items: stretch;
    grid-template-columns: 2fr 2fr 2fr 1fr;
    gap: 15px 20px;
}

.termination__item{
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 2px solid var(--color--tech-blue);
    transition: all .2s ease-out;
    max-height: 320px;
}
.termination__item p{
}

.termination__item-type{
    display: flex;
    flex-direction: row;
    width: 100%;
    color: white;
    background-color: var(--color--tech-blue);
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
    font-family: "StabilGrotesk-Bold";
}

.termination__item-icon{
    margin:auto 5px;
}

.termination__item-type p {
    padding-left: 20px;
    font-size: 13px;
    font-family: "StabilGrotesk-Bold";
    
}
.termination__item-title{
    font-weight: bold;
    margin:0 0 8px 0;
    font-size:1.2rem;
}
.termination__item-agency{
    font-size:1rem;
    color:rgb(46, 46, 46);
    margin:0 0 4px 0;
}
.termination__item-agency b{
    font-weight: bold;
}
.termination__item-status{
    font-size:1rem;
    color:rgb(46, 46, 46);
    margin:0;
    padding-bottom:10px;
}
.termination__item-status b{
    font-weight: bold;
}




.termination__item-container {
  display: inline-grid; /* Makes the container only as wide as the text */
  place-items: center;  /* Centers the text */
  cursor: pointer;
  padding:10px;
  align-items:start;
  height:100%;
  justify-content: start;
  justify-items:start;
}


.termination__item-container > div {
  grid-area: 1 / 1;     /* Forces both p tags into the exact same row/column */
  transition: opacity 0.3s ease;
  margin: 0;            /* Removes default spacing that might break the alignment */
}

.termination__content--hide {
    opacity: 0;
    font-family: "StabilGrotesk-Regular";
  
}

.termination__item-container:hover .termination__content--show {
  opacity: 0;
}

.termination__item-container:hover .termination__content--hide {
    opacity: 1;
}

.termination__content-hide-text{
    font-size: 15px;
    overflow-y: auto;
    height: 260px;
    margin: 0px;
}

.termination__item--cmr{
    background-color: #ffffff00;
    display: flex;
    align-items: center;
    text-align: center;
    color:white;
    justify-content: center;
    border:0px;
}

.termination__item-container--cmr{
    align-items: center;
    text-align: center;
    color:white;
    display: flex;
    align-items: center;
}

.termination__item-container--cmr a{
    text-decoration: none;
    color:white;
}


/*GET INVOLVED*/


.getinvolved__container{
    background-color: rgb(225, 225, 225);
}
.getinvolved__holder{
    display: flex;
    flex-direction: row;
    padding:20px;
}
.getinvolved__text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    
}
.getinvolved__text h1{
    color:var(--color--fas-blue);
    margin:0px;
    padding:0 20px;
    font-family: "StabilGrotesk-Bold";
}
.getinvolved__text p{
    padding: 0 20px;
    width: 75%;
    font-size: 1.2rem;
}
.getinvolved__bubbles{
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap:20px;
}

.getinvolved__bubble-item{
    border-radius: 50%;
    width: 30%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    position: relative;
    text-align: center;
    font-family: 'StabilGrotesk-bold';
    font-size: 25px;
    line-height: 41px;
    text-decoration: none;
}




.getinvolved__bubble-item::after {
  
  content: "";
  position: absolute;



  bottom: 8px;
  right: 8px;

  width: 60px;               /* Controls horizontal thinness */
  height: 60px;             /* Controls vertical length */
  background-color: var(--color--tech-blue);
  clip-path: polygon(50% 0%, 0% 80%, 100% 90%);
    z-index: -20;
  transform: rotate(135deg);

}


#bub1{
    background-color: var(--color--tech-blue);
    color:white;
}
#bub2{
    background-color: var(--color--fas-blue);
    color:white;
}
#bub3{
    background-color: var(--color--nuclear-red);
    color:white;
    
    
}


#bub1::after{
    background-color: var(--color--tech-blue);
    
}
#bub2::after{
    background-color: var(--color--fas-blue);
    
}
#bub3::after{
    background-color: var(--color--nuclear-red);
    
    
    
}



.usecases__container{
    background-color: var(--color--fas-blue);
}

.usecases__title{
    color:white;
    
}
.usecases__title h1{
    text-align: left;
}

.usecases__holder{
    display: grid;
    flex-direction: row;
    transition: all .2s ease-out;
    flex-wrap: wrap;
    grid-template-columns: repeat(4, 100px);
    align-items: stretch;
    grid-template-columns: 2fr 2fr 2fr 1fr;;
    gap: 15px 6px;
}

.usecases__item{
    
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 2px solid var(--color--entrepreneur-purple);
    transition: all .2s ease-out;
    max-height: 280px;
}
.usecases__item{
    margin:10px;
}

.usecases__item-type{
    width: 100%;
    background-color: var(--color--entrepreneur-purple);
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    align-items: center;
    /* align-content: center; */
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    font-family: "StabilGrotesk-Bold";
}
.usecases__item-type p {
    padding-left:20px;
    color:white;
    font-size: 13px;
}

.usecases__item-type-text{

}

.usecases__item-container{
    display: inline-grid; /* Makes the container only as wide as the text */
    place-items: center;  /* Centers the text */
    cursor: pointer;
    padding:10px;
    align-items:start;
    height:100%;
}
.usecases__item-container > div{
    grid-area: 1 / 1;     /* Forces both p tags into the exact same row/column */
    transition: opacity 0.3s ease;
    margin: 0; 
}

.usecases__content--hide{

}

.usecases__content-hide-text{

}
.usecases__content--show{

}

.usecases__item-title{
    margin:0px;
    font-size:15px;
    font-family: "StabilGrotesk-Regular";
}
.usecases__item-title p{
    margin: 0;
    font-family: 'StabilGrotesk-Regular';
    font-size: 15px;
    /* overflow-y: auto; */
    /* height: 100%; */
}
.usecases__item-agency{
    font-size: 13px;
    color: rgb(46, 46, 46);
    font-family: 'StabilGrotesk-Bold';
}
.usecases__item-agency b{
    font-weight: bold;
}

.usecases__item-status{
    font-size:1rem;
    color:rgb(46, 46, 46);
    padding-bottom:10px;
}

.usecases__item-status b{
    font-weight: bold;
}

.usecases__item--cmr{
    background-color: #ffffff00;
    display: flex;
    align-items: center;
    text-align: center;
    color:white;
    justify-content: center;
    border:0px;
}

.usecases__item-container--cmr{
    align-items: center;
    text-align: center;
    color:white;
    display: flex;
    align-items: center;
}

.usecases__item-container--cmr a{
    text-decoration: none;
    color:white;
}

@media(max-width:1275px) {
    .getinvolved__bubble-item{
        font-size: 22px;
        line-height: 26px;
    }
}

@media (max-width: 1200px) {
    .news__item-title{
        font-size:18px;
    }
    .news__item-title a{
        line-height: 16px;
        font-size:18px;
    }
    .news__main-title a{
        font-size: 18px;
        line-height: 16px;
    }

    .getinvolved__holder{
        flex-direction: column;
    }

    .getinvolved__text{
        width:60%;
    }
    
    
}

@media (max-width: 1000px) {

    .getinvolved__bubble-item{
        font-size: 18px;
        line-height: 24px;
    }
    .campaign__item{
        flex-shrink: 0;
        width: calc(34% - 15px);
        transition: transform 0.2s ease;
        box-shadow: rgba(31, 48, 64, 0.2) 0px 8px 24px;

    }
    .content__container {
        flex-direction: column;
    }
    .speech-display__img{
        top:0
    }
    .text__container{
        width:90%;
        margin-left:0px;
    }
    .usecases__holder{
        grid-template-columns: 1fr 1fr;
    }
    .termination__holder{
        grid-template-columns: 1fr 1fr;
    }
    .content__container div{
        margin:0px;
    }

}

@media (max-width: 850px) {
    .news__item-title a{
        line-height: 14px;
        font-size:14px;
    }
    .news__item-pub{
        font-size: 14px;
    }
    .news__item-aut{
        font-size: 14px;
    }
    .news__item-date{
        font-size: 14px;
    }
    .news__item-img{
        justify-self: center;
        align-self: center;
        width:80px;
        height:80px;
    }
    .campaign__for{
        width:45px;
        height:45px;
    }
    .campaign__back{
        width:45px;
        height:45px;
    }
    
}
@media (max-width: 800px) {
    .news__main{
        width:100%;
    }
    .news__list{
        width: 100%;
        height:auto;
        overflow-y: auto;
    }
    .news__combine{
        flex-direction: column;
    }
    .news__item{
        margin:20px 0px;
    }
    .news__item-title a{
        line-height: 14px;
        font-size:14px;
    }
    .map-display__container{
        display: none;
    }
    
}


@media (max-width: 750px) {
    .getinvolved__bubbles{
        flex-direction: column;
    }

    .getinvolved__bubble-item{
        width:50%;
    }
    .campaign__item{
        flex-shrink: 0;
        width: calc(52% - 15px);
        transition: transform 0.2s ease;
        box-shadow: rgba(31, 48, 64, 0.2) 0px 8px 24px;

    }
}

@media (max-width: 650px) {
    .usecases__holder{
        grid-template-columns: 1fr ;
    }
    .termination__holder{
        grid-template-columns: 1fr ;
    }
    .getinvolved__text{
        width:100%;
    }
    .campaign__item{
        flex-shrink: 0;
        width: calc(102% - 15px);
        transition: transform 0.2s ease;
        box-shadow: rgba(31, 48, 64, 0.2) 0px 8px 24px;

    }
    .campaign__btns{
        top:55%
    }
    .getinvolved__bubble-item{
        width:60%;
        
        
    }

}

@media (max-width: 550px) {

    .getinvolved__bubble-item{
        font-size:12px;
        line-height: 14px;
    }
    
}