:root {
        --primary: #00c2f8;
        --secondary: #9bd00c;
        --secondary-alt: #dbeaf7;
        --secondary-alt2: #7facd3;
        --tertiary: #eeab36;
        --teritary-alt: #f9f6ef;
        --quarternary: #007900;
        --ff-primary: "Dongle", sans-serif;
        --ff-secondary: "Paytone One", sans-serif;
        --section-divider-height: 60;
        --section-divider-width: 1920;
        --section-divider-ratio: calc(
          100% * var(--section-divider-height) / var(--section-divider-width)
        );
      }
      
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: var(--ff-secondary);
      }
      p,
      a,
      span,
      li {
        font-family: var(--ff-primary);
        font-size: 1.5em;
        line-height: 1;
      }
      a {
        text-decoration: none;
      }
      html {
        overflow-x: hidden;
      }
      .py-3 {
        /*slight adjust for font used*/
        padding-bottom: 0.8rem !important;
      }
      .z-1 {
        z-index: 10;
      }
      .z-2 {
        z-index: 20;
      }
      .z-3 {
        z-index: 30;
      }
      .z-9 {
        z-index: 999999;
      }
      .o-cover {
        object-fit: cover !important;
      }
      .min-h-inherit {
        min-height: inherit;
      }
      .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .flip-h {
        transform: scale(-1);
      }
      
      .img-zoom img {
        transform: scale(1);
        transition: transform 1s;
      }
      .img-zoom img:hover {
        transform: scale(1.3);
        transition: transform 1s;
      }
      
      .social {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      /****************************
      *************BG**************
      ****************************/
      .bg-primary {
        background-color: var(--primary) !important;
      }
      .bg-secondary {
        background-color: var(--secondary) !important;
      }
      .bg-tertiary {
        background-color: var(--tertiary) !important;
      }
      .bg-quarternary {
        background-color: var(--quarternary) !important;
      }
      
      .bg-alt-1 {
        background-color: var(--secondary-alt) !important;
      }
      
      .bg-alt-2 {
        background-color: var(--teritary-alt) !important;
      }
      
      .bg-fb {
        background-color: #3b5998;
      }
      .bg-tw {
        background-color: #38a1f2;
      }
      .bg-yt {
        background-color: #cd201e;
      }
      .bg-lin {
        background-color: #2877b5;
      }
      
      
      /****************************
      *************BORDER**************
      ****************************/
      .border-primary {
        border-color: var(--primary) !important;
      }
      .border-secondary {
        border-color: var(--secondary) !important;
      }
      .border-tertiary {
        border-color: var(--tertiary) !important;
      }
      .border-quarternary {
        border-color: var(--quarternary) !important;
      }
      
      .border-alt-1 {
        border-color: var(--secondary-alt) !important;
      }
      
      .border-alt-2 {
        border-color: var(--teritary-alt) !important;
      }
      
      /****************************
      ************TEXT*************
      ****************************/
      .text-primary {
        color: #213A0E !important;
      }
      .text-secondary {
        color: var(--secondary) !important;
      }
      .text-tertiary {
        color: var(--tertiary) !important;
      }
      .text-quarternary {
        color: var(--quarternary) !important;
      }
      
      /****************************
      ************FONT*************
      ****************************/
      .font-primary {
        font-family: var(--ff-primary) !important;
      }
      .font-secondary {
        font-family: var(--ff-secondary) !important;
      }
      
      /****************************
      ***********HOVER*************
      ****************************/
      .hover-dark:hover {
        background-color: #333 !important;
        color: white !important;
        transition: background-color 0.25s, white 0.25s;
      }
      
      .has-divider {
        position: relative;
        padding-bottom: var(--section-divider-ratio);
      }
      .section-divider {
        display: block;
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: auto;
      }

.badge {
line-height: .5em;
}
      
      /****************************
      ************BLOB*************
      ****************************/
      .blob {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='500' width='500' %3E%3Cpath fill='%23FFFFFF' d='M72.3,-23.7C81.6,5.2,68.8,41.1,46.2,55.6C23.7,70.1,-8.6,63.2,-28,47.1C-47.3,31.1,-53.7,5.8,-46.9,-19.7C-40,-45.2,-20,-71,5.7,-72.8C31.5,-74.7,62.9,-52.7,72.3,-23.7Z' transform='translate(100 100)' /%3E%3C/svg%3E");
        width: 400px;
        height: 400px;
        position: absolute;
      }

      /****************************
      *********NAVIGATION**********
      ****************************/
      nav li a {
        margin: 0;
        border-radius: 20px;
        padding: 10px 15px !important;
        background-color: transparent;
        color: #333;
        transition: background-color 0.25s, color 0.25s;
      }

a.font-secondary {
    font-size: .7em;
}
      
      
      nav li a:hover {
        background-color: var(--primary) !important;
        color: white !important;
        padding: 10px 20px;
        transition: background-color 0.25s, color 0.25s;
      }
      
      .longclouds {
        left: -20%;
        width: 125% !important;
      }
      
      /*MULTI-ITEM CAROUSEL*/
      @media (max-width: 767px) {
        .multi-slide .carousel-inner .carousel-item > div {
          display: none;
        }
        .multi-slide .carousel-inner .carousel-item > div:first-child {
          display: block;
        }
      }
      
      .multi-slide .carousel-inner .carousel-item.active,
      .multi-slide .carousel-inner .carousel-item-next,
      .multi-slide .carousel-inner .carousel-item-prev {
        display: flex;
      }
      
      /* medium and up screens */
      @media (min-width: 768px) {
        .multi-slide .carousel-inner .carousel-item-end.active,
        .multi-slide .carousel-inner .carousel-item-next {
          transform: translateX(33.33333%);
        }
      
        .multi-slide .carousel-inner .carousel-item-start.active,
        .multi-slide .carousel-inner .carousel-item-prev {
          transform: translateX(-33.33333%);
        }
      }
      
      .multi-slide .carousel-inner .carousel-item-end,
      .multi-slide .carousel-inner .carousel-item-start {
        transform: translateX(0);
      }
      
      /****************************
      ***********BUTTON************
      ****************************/
      .cloud-btn-container {
        position: relative;
        width: 100px;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6vh;
        overflow: hidden;
        border: 1px solid;
        font-weight: 300;
        font-size: 20px;
        transition: 0.5s;
        letter-spacing: 1px;
        border-radius: 8px;
      }
      .custom-section h3 {
       margin-top: 1.5rem !important;
      }
      
      .cloud-btn-container button {
        width: 101%;
        height: 100%;
        font-weight: 300;
        font-size: 11px;
        letter-spacing: 1px;
        font-weight: bold;
        background: #000;
        -webkit-mask: url("clientfiles/stu-daycare-1/images/clouds-top.svg");
        mask: url("clientfiles/stu-daycare-1/images/clouds-top.svg");
        -webkit-mask-size: 2500% 100%;
        mask-size: 2500% 100%;
        border: none;
        color: #213A0E;
        cursor: pointer;
        -webkit-animation: ani2 1s steps(5) forwards;
        animation: ani2 1s steps(5) forwards;
      }
      .cloud-btn-container button:hover .cloud-btn-container {
        background-color: #000 !important;
      }
      .cloud-btn-container button:hover {
        -webkit-animation: ani 1s steps(22) forwards;
        animation: ani 1s steps(22) forwards;
      }
      
      .rotate {
        transform: rotate(25deg) !important;
      }
      
      .spin {
        position: absolute;
        z-index: 9;
        animation-name: spin;
        animation-duration: 15000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      .pulsate {
        position: absolute;
        z-index: 9;
        animation: zoom-in-zoom-out 10s ease infinite;
      }

      .extra-margin-b {
    margin-bottom: 2em;
}
      .slide-in-blurred-br {
        -webkit-animation: slide-in-blurred-br 0.6s cubic-bezier(0.23, 1, 0.32, 1)
          both;
        animation: slide-in-blurred-br 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
      }
      
      .fade-out {
        -webkit-animation: fade-out 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
        animation: fade-out 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
      }
      
      .slide-in-blurred-tl {
        -webkit-animation: slide-in-blurred-tl 0.6s cubic-bezier(0.23, 1, 0.32, 1)
          both;
        animation: slide-in-blurred-tl 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
      }
      .slide-in-bottom {
        -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
          both;
        animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      }
      
      .single-cloud-top,
      .single-cloud-bottom {
        width: 25%;
      }
      .single-cloud-top {
        top: 0;
        right: -10px;
      }
      .single-cloud-bottom {
        bottom: -50px;
        left: -10px;
      }
      @media (max-width: 991px) {
        .single-cloud-top,
        .single-cloud-bottom {
          width: 75%;
        }
        .single-cloud-top {
          top: -35px;
          right: -10px;
        }
        .single-cloud-bottom {
          bottom: -75px;
          left: -35px;
        }
      }
      
      @keyframes zoom-in-zoom-out {
        0% {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(1.2, 1.2);
        }
        100% {
          transform: scale(1, 1);
        }
      }
      
      @-webkit-keyframes ani {
        from {
          -webkit-mask-position: 0 0;
          mask-position: 0 0;
        }
        to {
          -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
        }
      }
      
      @keyframes ani {
        from {
          -webkit-mask-position: 0 0;
          mask-position: 0 0;
        }
        to {
          -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
        }
      }
      
      @-webkit-keyframes ani2 {
        from {
          -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
        }
        to {
          -webkit-mask-position: 0 0;
          mask-position: 0 0;
        }
      }
      
      @keyframes ani2 {
        from {
          -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
        }
        to {
          -webkit-mask-position: 0 0;
          mask-position: 0 0;
        }
      }
      
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      
      @-webkit-keyframes slide-in-blurred-tl {
        0% {
          -webkit-transform: translate(-1000px, -1000px) skew(80deg, 10deg);
          transform: translate(-1000px, -1000px) skew(80deg, 10deg);
          -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
          -webkit-filter: blur(40px);
          filter: blur(40px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translate(0, 0) skew(0deg, 0deg);
          transform: translate(0, 0) skew(0deg, 0deg);
          -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-filter: blur(0);
          filter: blur(0);
          opacity: 1;
        }
      }
      @keyframes slide-in-blurred-tl {
        0% {
          -webkit-transform: translate(-1000px, -1000px) skew(80deg, 10deg);
          transform: translate(-1000px, -1000px) skew(80deg, 10deg);
          -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
          -webkit-filter: blur(40px);
          filter: blur(40px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translate(0, 0) skew(0deg, 0deg);
          transform: translate(0, 0) skew(0deg, 0deg);
          -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-filter: blur(0);
          filter: blur(0);
          opacity: 1;
        }
      }
      
      @-webkit-keyframes slide-in-blurred-br {
        0% {
          -webkit-transform: translate(1000px, 1000px) skew(80deg, 10deg);
          transform: translate(1000px, 1000px) skew(80deg, 10deg);
          -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
          -webkit-filter: blur(40px);
          filter: blur(40px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translate(0, 0) skew(0deg, 0deg);
          transform: translate(0, 0) skew(0deg, 0deg);
          -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-filter: blur(0);
          filter: blur(0);
          opacity: 1;
        }
      }
      @keyframes slide-in-blurred-br {
        0% {
          -webkit-transform: translate(1000px, 1000px) skew(80deg, 10deg);
          transform: translate(1000px, 1000px) skew(80deg, 10deg);
          -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
          -webkit-filter: blur(40px);
          filter: blur(40px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translate(0, 0) skew(0deg, 0deg);
          transform: translate(0, 0) skew(0deg, 0deg);
          -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-filter: blur(0);
          filter: blur(0);
          opacity: 1;
        }
      }
      
      @keyframes fade-out {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      
      @-webkit-keyframes slide-in-bottom {
        0% {
          -webkit-transform: translateY(1000px);
          transform: translateY(1000px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
          opacity: 1;
        }
      }
      @keyframes slide-in-bottom {
        0% {
          -webkit-transform: translateY(1000px);
          transform: translateY(1000px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
          opacity: 1;
        }
      }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-img-top {
  width: 100%;
  height: auto;
}

.card-body {
  padding: 15px;
}

     
      .container1B {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      }
      .rounded-pill {
      font-size: 1.7em !important;
      color: #064706;
      }
              .bg-primary-light {
                  background-color: #00b3b3;
              }
              .bg-secondary-light {
                  background-color: #009999;
              }
              .bg-success-light {
                  background-color: #99ff66;
              }
              .text-primary-dark {
                  color: #003366;
              }
              .card {
                  height: 100%;
                  border: none;
                  border-radius: 15px;
                  overflow: hidden;
                  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
              }
              .card-header {
                  background-color: #003366;
                  color: white;
                  font-weight: bold;
                  text-align: center;
                  padding: 10px;
                  font-size: 1.2rem;
              }
              .card-body {
                  padding: 20px;
                  background-color: white;
              }
              .btn-outline-primary {
                  color: #003366;
                  border-color: #003366;
              }
              .btn-outline-primary:hover {
                  background-color: #003366;
                  color: white;
              }
              .logo-container {
                  position: absolute;
                  top: 10px;
                  right: 20px;
                  width: 150px;
              }
              h1, h2, h3, h4 {
                  color: #003366;
              }
              .card h3 {
                  font-size: 1.3rem;
                  font-weight: bold;
              }
              .card h4 {
                  font-size: 1.1rem;
                  font-weight: bold;
              }
              .card p {
                  font-size: 0.9rem;
              }

/*card slider test*/
 

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  body {
    font: 16px / 24px "Rubik", sans-serif;
    color: var(--black);
    background: var(--platinum);
    margin: 50px 0;
margin-bottom: -2rem;
  }
  
  .card-container {
    max-width: 1400px;
    padding: 0 15px;
    margin: 0 auto;
  }
  
  .cards {
    display: grid;
    grid-auto-columns: 100%;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    padding: 25px 0px;
    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }
  
  .card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 15%);
    scroll-snap-align: start;
    transition: all 0.2s;
  }
  
  .card:hover {
    color: var(--white);
    background: var(--primary);
  }
  
  .card .card-title {
    font-size: 20px;
  }
  
  .card .card-content {
    margin: 20px 0;
    max-width: 85%;
  }
  
  .card .card-link-wrapper {
    margin-top: auto;
  }
  
  .card .card-link {
    display: inline-block;
    text-decoration: none;
    color: white;
    background: var(--primary);
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s;
  }
  
  .card:hover .card-link {
    background: var(--secondary);
  }
  
  .cards::-webkit-scrollbar {
    height: 12px;
  }
  
  .cards::-webkit-scrollbar-thumb,
  .cards::-webkit-scrollbar-track {
    border-radius: 92px;
  }
  
  .cards::-webkit-scrollbar-thumb {
    background: var(--secondary);
  }
  
  .cards::-webkit-scrollbar-track {
    background: var(--thumb);
  }
  
  @media (min-width: 500px) {
    .cards {
      grid-auto-columns: calc(50% - 10px);
      grid-column-gap: 20px;
    }
  }
  
  @media (min-width: 700px) {
    .cards {
      grid-auto-columns: calc(calc(100% / 3) - 20px);
      grid-column-gap: 30px;
    }
  }
  
  @media (min-width: 1100px) {
    .cards {
      grid-auto-columns: calc(25% - 30px);
      grid-column-gap: 40px;
    }
  }
/*card slider test*/

      @media only screen and (min-width: 1024px) {
    /* Example: Adjusting the h1 padding and font-size for desktops */
    h1 {
        padding: 3em 0; /* Increase top and bottom padding */
        font-size: 3rem; /* Increase font size */
    }

    /* Example: Adjusting section margins for desktop */
    .section {
        margin: 0 auto; /* Center sections */
        max-width: 1200px; /* Set a maximum width */
    }

    /* Example: Adjusting button styles for desktop */
    .button {
        padding: 1em 2em; /* Increase button padding */
        font-size: 1.2rem; /* Increase button font size */
    }

    /* Example: Applying the extra margin to specific elements on desktop */
    .extra-margin-b {
        margin-bottom: 3em; /* Increase margin-bottom for desktop */
    }
}