@import '../styles.css';

.border-fs-green{
  border: 5px solid #7abb45;
  padding: 50px 20px 50px 20px;
}

.border-fs-neutral-darker{
  border: 5px solid #1E211C;
  padding: 50px 20px 50px 20px;
}

.counter-section {
    display: block;
    width: 100%;
  }
  
  .counter-box {
    background-color: transparent;
    padding: 20px 15px 20px 0px;
    border-radius: 10px;
    text-align: left;
    font-size: 15px;
  }
  
  .counter {
    color: #fff;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  .tab-content p {
    font-size: 1.2rem;
    color: #555;
  }
  
  /* Animations */
  @keyframes countUp {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .counter {
    animation: countUp 0.6s ease-in-out;
  }

  .table-style2 {
    border: 1px solid #a0a0a0;
    font-size: 15px;
    color: #000;
    width: 100%;
  }
  .table-style2 .thead {
    text-align: center;
    font-weight: 400;
    font-size: 25px;
    padding: 30px 0;
}
.table-style2 .thead td {
  padding: 1rem;
}
.table-style2 .th td {
  color: #000;
  background-color: #c4dbf2;
  border-color: #a0a0a0;
}
.table-style2 td, .table-style2 th {
  padding: 1rem;
  vertical-align: top;
  border: 1px solid #a0a0a0;
}

#enrollNow .head span, #enrollNow .head{
  color: #fff !important;
}

#FamiliesHeader .top-heading, #FamiliesHeader .bottom-heading{
  font-weight: 600;
  font-size: 50px;
  text-wrap: nowrap;
}

#FamiliesHeader h2{
  margin-bottom: 0;
}

#FamiliesHeader .center-heading{
  letter-spacing: 25px;
  font-size: 75px;
}

#FamiliesHeader .top-line{
  width: 40%;
  height: 5px;
  position: relative;
  bottom: 15px;
  /* animation: fillAnimation 2s ease-in-out forwards; */
  background-color: transparent;
}

#FamiliesHeader .bottom-line{
  width: 40%;
  height: 5px;
  position: relative;
  top: 15px;
  background-color: transparent;
}

.fill {
  width: 0;
  height: 100%;
  background-color: #6D6E70;
  /* animation: fillAnimation 2s ease-in-out forwards; */
  animation: none; /* Initially no animation */
  transition: width 2s ease-in-out;
}

.fill-reverse {
  width: 0;
  height: 100%;
  background-color: #6D6E70;
  position: absolute;
  right: 0;
  /* animation: fillAnimation 2s ease-in-out forwards; */
  animation: none; /* Initially no animation */
  transition: width 2s ease-in-out;
}

.left-part{
  /* opacity: 0;
  transform: translateX(-500px);
  animation: none; 
  transition: opacity 1s ease-in-out, transform 2s ease-in-out; */
  display: inline-block;
}

.right-part{
  /* opacity: 0;
  transform: translateX(500px);
  animation: none;
  transition: opacity 1s ease-in-out, transform 2s ease-in-out; */
  display: inline-block;
}

@keyframes fillAnimation {
  from {
    width: 0;
}
to {
    width: 100%;
}
}


#GoalsSection .images-wrapper{
  gap: 2%;
}

#GoalsSection .goal-one, #GoalsSection .goal-two, #GoalsSection .goal-three{
  flex: 0 0 33%;
  border-radius: 0.5rem;
  transition: 0.5s ease-in-out;
  /* box-shadow: 1px 5px 15px #000; */
  position: relative;
  overflow: hidden;
  max-height: 350px;
}
#GoalsSection .goal-one:hover, #GoalsSection .goal-two:hover, #GoalsSection .goal-three:hover {
  flex: 0 0 100%;
  /* box-shadow: 1px 3px 15px #000; */
}

#GoalsSection img{
  max-width: 260px;
}

.goal-one:hover .inner-text, 
.goal-two:hover .inner-text, 
.goal-three:hover .inner-text {
    opacity: 1 !important;
    transition: opacity 0.5s ease-in-out;
    transition-delay: 0.5s;
}

#GoalsSection .inner-text {
  opacity: 0;
  overflow: hidden;
  padding: 15px 15px;
  align-items: center;
  display: grid;
  color: #fff;
  font-size: x-large;
  font-size: 30px;
}

#GoalsSection .goal-one{
  background-color: #D12129;
}
#GoalsSection .goal-two{
  background-color: #5CA043;
}
#GoalsSection .goal-three{
  background-color: #E35725;
}
#GoalsSection .tag{
  writing-mode: vertical-rl;
  text-orientation: upright;
}

#GoalsSection .goal-one:hover ~ .goal-two, #GoalsSection .goal-one:hover ~ .goal-three {
  flex: 0 0 0;
}
#GoalsSection:has(.goal-two:hover) .goal-one, #GoalsSection:has(.goal-two:hover) .goal-three{
  flex: 0 0 0;
}
#GoalsSection:has(.goal-three:hover) .goal-one, #GoalsSection:has(.goal-three:hover) .goal-two{
  flex: 0 0 0;
}


@media (max-width:992px){
  #GoalsSection .images-wrapper{
    display: grid !important;
    gap: 1%;
  }
  #GoalsSection .goal-one, #GoalsSection .goal-two, #GoalsSection .goal-three{
    max-height: 100%;
    padding-bottom: 20px;
  }
  #GoalsSection img{
    max-width: 100%;
  }
  #GoalsSection .tag{
    writing-mode: inherit;
    text-orientation: inherit;
  }
  #GoalsSection .inner-text{
    font-size: 20px;
    transition: none;
    opacity: 1;
  }
  #FamiliesHeader .center-heading{
    font-size: 50px;
  }
  #FamiliesHeader .bottom-heading, #FamiliesHeader .top-heading{
    font-size: 30px;
  }
}


#healthyMealOptions, #exploreOptions{
  border-radius: 5px;
  color: #000;
  /* & .head{
    font-size: 70px;
  } */

  & p{
    font-size: 18px;
  }

  & .cta{
     justify-content: left;

     & .btn{
        background-color: #1E211C;
        border-radius: 0;
        color: #fff;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
     }
  }
}
#exploreOptions{
  color: #fff;
  border-radius: 0px;
}

#wellnessResourcesTextBox{
  color: #fff;

  & p{
    font-size: 18px;
  }

  & .cta{
     justify-content: left;

     & .btn{
        background-color: #1E211C;
        border-radius: 0;
        color: #fff;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
     }
  }
}

.block-text{
  .cta{
     justify-content: left;

     & .btn{
        background-color: #7abb45;
        border-radius: 0;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
     }
  }
}

#statText{
  border-radius: 5px;
  --grid-gutter-half : 0px !important;
  p, span {color: #000;}
  h1{
      background-color: #1E211C;
      padding:5px;
      color:white;
      border-radius: 5px;
      font-size:3rem;
      text-align:center;
  }
}


#statHeading, #mealOptionsText{
  border-radius: 5px;
  .head{
    font-weight: 400;
    color: #000;
  }
  .pre-head{
    color: #000;
  }
}

#mealOptionsText {
  
  & ol{
    list-style: none;
    counter-reset: custom-counter;
    padding-left: 0;
  }

  ol li {
  counter-increment: custom-counter;
  position: relative;
  left: 5em;
}

  ol li::before {
  content: counter(custom-counter);
  position: absolute;
  width: 3em;
  height: 3em;
  left: -5em;
  background: #1E211C;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid #ccc;
}
  
  .cta{
    display: flex;

    .btn{
      background-color: #1E211C;
      transform: none;
      + .btn{
            background-color: transparent;
            border: 2px solid #8b8b8b;
            color: #1E211C !important;
    }
    }
  }

  @media (max-width:576px) {
    ol li{
      left: 2.5em;
      width: 90%;
    }
    ol li::before{
      width: 2em;
      height: 2em;
      left: -2.5em;
    }
  }
}

#cateringText{

  .head{
    font-size: 50px;
  }

  .checklist {
  list-style: none;
  padding-left: 0;
}

.checklist li {
  position: relative;
  padding-left: 2.5em;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1em;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid black;
  color: black;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.25em;
}

.cta .btn{
      transform: none;
      color: #fff !important; 
      background-color: #1E211C;
}
}

#resourcesHeadingText{

  .pre-head{
    color: #fff;
  }

  .head{
    font-size: 50px;
    font-weight: 500;
  }

  p{
    font-size: 17px;
  }
}

#specialMealText{

  .head{
    font-weight: 500;
  }

  .cta .btn{
    transform: none;
    background-color: #1E211C;
    letter-spacing: 1px;
  }

}

#wellnessText{

  .head{
    font-weight: 500;
  }
  
  .cta{
      display: flex;
  }

  .cta .btn{
    transform: none;
    background-color: #1E211C;
    letter-spacing: 1px;
  }
  
  @media (max-width:768px){
      .cta{
          display: block;
      }
      .cta .btn{
          width:100%;
          margin: 10px 0px !important;
      }
  }

}

#deptMessage{
    border-radius: 10px;
}