@import url("./_variables.css");
b{
  font-weight: bold;
}
.site-header__logo-mark {
  height: 60px;
}
.site-header__wrapper{
      background-color:rgba(26, 57, 82, 1.0);

}
.content__container{
    background-color: #F4F8F9;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap:10px;
    align-items: center;
    padding:5%;
    padding-top:150px;
    
}
.termination__type{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color--tech-blue);
    padding:10px;
    color:white;
    font-size:20px;
    
}
.termination__type p{
  margin:0px;
}

.termination__type::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* Positioned at the very bottom edge, ignoring padding */
  border-bottom: 4px solid var(--color--entrepreneur-purple);
}

.termination__container{
    display:grid;
    grid-template-columns: repeat(4, 1fr); 
    gap:30px;
    
    
}


.termination__item{
      border: 2px solid var(--color--tech-blue);
      font-family: "StabilGrotesk-Regular";
}









.termination__text-container {
  display: inline-grid; /* Makes the container only as wide as the text */
  cursor: pointer;
  padding:10px;
  align-items:start;
}

.termination__text-container > div {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease;
  margin: 0;
  font-size: 18px;
  max-height: 200px;         
}

/* Logic: Hide the second tag by default */
.termination__content--hide {
  opacity: 0;
  overflow-y: scroll;
}

/* On Hover: Swap Opacity */
.termination__text-container:hover .termination__content--show {
  opacity: 0;
}

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

.partner__container{
  display:flex;
  flex-direction: row;
  justify-content: center;
  width:80%;
  font-family: "StabilGrotesk-Regular";
  gap:20px;
  height:100px;
}
.partner__item{
  display: flex;
  flex-direction: row;
  gap:20px;
  align-items: center;
  text-decoration: none;
  color:rgb(91, 91, 91);
}
.partner__item:hover{
  color:rgb(32, 32, 32);
}
.partner__item img{
  height:100%;
}


.ad__container{

    display: flex;
    flex-direction: row;
    gap: 25px;
    justify-content: space-around;
    width: 100%;
    height: 130px;
    margin:40px 0px;

}
.ad__temp{
    display:flex;
    flex-direction:row;
    padding:10px;
    width:45%;
    align-items: center;
    gap:10px;
    text-decoration: none;
    height: 50%;
}


.ad__temp hr{
    width: 2px;
    height: 70%;
    border: 0;
    background-color: black;
    color:black;
}
.ad__bubble{
    height:30%;
    align-self: flex-start;
    padding-top:20px;
}
.ad__title{
    
    font-family:"StabilGrotesk-Bold";
    font-size:25px;
    margin:0px;
    line-height: 20px;
    font-size:19px;
}
.ad__text{
    font-family: "StabilGrotesk-Light";
    width:95%;
    color:#4d4d4d;
    margin:5px;
    line-height: 20px;
    font-size: 16px;
}
.ad__logo{
    height:70%;
}
.ad__temp--yel{
    background-color: #FDEB0D;
}
.ad__temp--blue{
    background-color: #9DCDFB;
}


.ad__temp--yel h2{
    color:#E94F36;
}
.ad__temp--blue h2{
    color: var(--color--fas-blue);
}

.usecase__text{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width:83%;
    font-family: 'StabilGrotesk-regular';
    color:#6b6b6d;
    margin:10px;
    
}
.usecase__text p{
  text-align: left;
  display: inline-block;
}

.usecase__title{
    color:var(--color--fas-blue);
    font-family: 'StabilGrotesk-bold';
    margin:10px;
}

@media(max-width:1150px){
  .termination__container{
    grid-template-columns: repeat(3, 1fr);
  }
  .ad__container{
    flex-direction: column;
    align-items: center;
  }
  .ad__temp{
    width:85%;
    height: 130px; 
  }
  
  .ad__container{
    height:auto;
  }
  .ad__logo{
    height: 45%;
  }
}

@media(max-width:1000px){
  .termination__container{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width:650px){
  .termination__container{
    grid-template-columns: repeat(1, 1fr);
  }
  .ad__temp{
    padding:15px;
    flex-direction:column;
    align-items: left;
    height: 100%;
    border-radius: 5px;
  }
  .partner__container{
    flex-direction: column;
    height: auto;
  }
  .partner__item{
    height:80px;
  }
}