@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

.page-font-override {
    font-family: "Titillium Web", sans-serif !important;
}


.menu-link.active {
    background-color: #c70b46 !important;
    color: #ffffff !important;
}


.card-border-round {
    border-radius: 12px;
}

.btn-border-round {
    border-radius: 8px;
}

/* Add this to your custom.scss or style block */
.bimb-form-radius {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

/* Add this to your custom.scss or style block */
.login-form-radius {
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
    padding: 8px !important;
}

.bimb-primary {
    color: #c70b46 !important;
}

.bimb-text-hover-primary:hover {
    color: #c70b46 !important;
}

:root {
    /* Core primary set */
    --bs-primary: #c70b46 !important;
    --bs-primary-hover: #b50a40 !important;
    --bs-primary-active: #a5093b !important;
    --bs-primary-light: #f7d2dd !important;
    --bs-primary-dark: #8e0833 !important;

    /* Optional RGB version for alpha utilities */
    --bs-primary-rgb: 199, 11, 70 !important;
}

/* ---------------------------
TEXT COMPONENTS
--------------------------- */

.text-primary {
    color: var(--bs-primary) !important;
}

.text-hover-primary:hover {
    color: var(--bs-primary-hover) !important;
}

/* ---------------------------
BUTTONS
--------------------------- */

.btn.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn.btn-primary:hover {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
}

.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary.show {
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
}

/* ---------------------------
BADGES
--------------------------- */

.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* ---------------------------
BACKGROUNDS
--------------------------- */

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-primary-light {
    background-color: var(--bs-primary-light) !important;
}

/* ---------------------------
BORDERS
--------------------------- */

.border-primary {
    border-color: var(--bs-primary) !important;
}

/* Base link color */
/* .page-link {
    color: #c70b46 !important;
    border-color: #c70b46 !important;
} */

/* Hover */
.page-link:hover {
    color: #b50a40 !important;              /* hover tone */
    border-color: #b50a40 !important;
    background-color: #f7d2dd !important;   /* light tint */
}

/* Focus (keyboard / accessibility) */
.page-link:focus {
    color: #b50a40 !important;
    border-color: #b50a40 !important;
    box-shadow: 0 0 0 0.25rem rgba(199, 11, 70, 0.25) !important;
}

/* Active page item */
.page-item.active .page-link {
    color: #fff !important;
    background-color: #c70b46 !important;
    border-color: #c70b46 !important;
}

/* Disabled */
.page-item.disabled .page-link {
    color: #ccc !important;
    border-color: #eee !important;
    background-color: #f9f9f9 !important;
}

/* Optional: Rounded pill-style pagination */
/* .page-link {
    border-radius: 6px !important;
} */

.category-card {
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    transition: all .25s ease;
    border: 1px solid #eee;
    /* box-shadow: 0 2px 8px rgba(0,0,0,.1); */
}

.category-card.active {
    background: lightpink !important;
    /* border-color: #c70b46 !important; */
}

.swiper-slide {
    width: 220px; /* Adjust card width */
}

/* Custom nav buttons */
.btn-nav {
    position: absolute;
    top: 24%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    /* box-shadow: 0 2px 8px rgba(0,0,0,.08); */
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 3;
  }
  .btn-prev { left: 267px; }

    /* Tablet (Medium - 768px and up) */
    @media (min-width: 768px) {
        .btn-prev { 
            left: 5px; 
            top: 50%;
        }
    }

    /* Desktop (Large - 992px and up) */
    @media (min-width: 992px) {
        .btn-prev { 
            left: 70px; 
            top: 30%;
        }
    }


  .btn-next { right: 267px; }

    /* Tablet (Medium - 768px and up) */
    @media (min-width: 768px) {
    .btn-next { 
        right: 5px; 
        top: 50%;
    }
    }

  /* Desktop (Large - 992px and up) */
  @media (min-width: 992px) {
    .btn-next { 
        right: 70px; 
        top: 30%;
    }
}
  /* .btn-nav:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); } */


/* Background / Look & Feel */
  .hero-promo {
    border-radius: 14px;
    background: #f6d7df; /* soft pink hero background */
  }

  /* Inputs */
  .hero-input {
    background: #ffffff;
    border: 0;
    height: 52px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .hero-input::placeholder { color: #a0a0a0; }

  /* Brand button */
  .btn-brand {
    background-color: #c70b46;
    border-color: #c70b46;
    color: #fff;
  }
  .btn-brand:hover {
    background-color: #b50a40; /* hover tone we used earlier */
    border-color: #b50a40;
    color: #fff;
  }

  /* Right-side device collage */
  .device-stack .device-card {
    position: absolute;
    width: 150px;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }
  /* Larger center device */
  .device-stack .device-main {
    width: 190px;
    height: 380px;
    border: 8px solid #f3f3f3; /* faux bezel */
    border-radius: 28px;
    background: #fff;
  }

  /* Utility to mimic object-fit (for older browsers, Metronic supports modern) */
  .object-fit-cover { object-fit: cover; }