@font-face {
  font-family: 'Cambon';
  src: url('/fonts/Cambon-SemiBold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Cambon Bold */
@font-face {
  font-family: 'Cambon';
  src: url('/fonts/Cambon-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}


/* Custom Padding Classes */
.px-custom {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .px-custom {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {
    .px-custom {
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

@media (min-width: 1280px) {
    .px-custom {
        padding-left: 17rem;
        padding-right: 17rem;
    }
}

/* Counter Animation */
.counter-animate {
    animation: countUp 2s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Content Animation */
.hero-content {
    animation: slideInUp 1s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Container */
.custom-container{
    max-width: 1650px !important;
    padding-inline: 20px;
    margin-inline: auto;
}
@media screen and (min-width:800px){
   .custom-container{
        padding-inline: 25px;
    } 
}
@media screen and (min-width:1280px){
   .custom-container{
        padding-inline: 55px;
    } 
}


#suggested article {
    position: relative;
    overflow: hidden;
}

#suggested article::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px; 
    height: 100%; 
 
    background-color: #820263ad; 
    pointer-events: none;
    z-index: 0; 
    border-top-left-radius: 1.5rem; 
    border-bottom-left-radius: 1.5rem;
}