@font-face {
    font-family: 'roobert-pro-regular';
    src: url('font/RoobertPRO-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roobert-pro-light';
    src: url('font/RoobertPRO-Light.woff2') format('woff2');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'roobert-pro-bold';
    src: url('font/RoobertPRO-Bold.woff2') format('woff2');
    font-weight: bolder;
    font-style: normal;
}
  
body { font-family: roobert-pro-regular, Montserrat, Arial, sans-serif; }
h1 { font-family: roobert-pro-bold; }
p { font-size: 0.9rem; font-weight: 300; }
.hero-section { background: linear-gradient(to right, #f8f9fa, #ffffff); padding: 80px 0; text-align: center; }
.cta-buttons .btn { margin: 10px; }
.mascot-section { background: #38195A; color: white; padding: 60px 20px;}
.footer { background: #222; color: white; padding: 40px 0; }
.footer a { color: white; text-decoration: none; }
.btn img {
    transition: filter 0.3s ease-in-out;
}
.btn:hover img {
    filter: invert(1);
}
.arrow-up{
    position: absolute;
    width: 22%;
    left: 23.5%;
    top: 10%;
}
.arrow-down{
    position: absolute;
    width: 22%;
    left: 54.5%;
    top: -10%;
}
.navbar {
    transition: top 0.3s ease-in-out;
}
.custom-card {
    border-radius: 1rem;
    border: 1px solid #eee;
    padding: 1.5rem;
    background: linear-gradient(to bottom right, #EDFBFC, #FCF4F9); /* light gradient */
  }
  .icon-img {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
  }
  .card-title {
    font-weight: 600;
    font-size: 16px;
  }

  /* slider */
    .carousel-container {
      position: relative;
      overflow: hidden;
      max-width: 100%;
      background-color: #fff;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s ease;
    }

    .carousel-card {
      min-width: 300px;
      max-width: 300px;
      margin: 0 10px;
      background: #fff;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 10px;
      flex-shrink: 0;
    }

    .carousel-controls {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .carousel-controls button {
      pointer-events: all;
    }

    .review-stars {
      color: orange;
    }
   .footer {
    background-color: #1c1c1c;
    color: #ffffff;
    padding: 40px 0;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
}

.footer-links a:hover {
    text-decoration: underline;
}
.btn img {
    transition: filter 0.3s ease-in-out;
}
.btn:hover img {
    filter: invert(1);
}