@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root {
    --card_width: 250px;
    --row_increment: 10px;
    --card_border_radius: 16px;
    --card_small: 26;
    --card_med: 33;
    --card_large: 45;
}

* {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden !important;
    width: 100%;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
}

.text-shadow {
    text-shadow: 4px 4px 8px #000;
}

.image-hero {
    object-fit: cover;
    height: 100vh;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, transparent 100%);
    overflow: hidden;
}

.image-middle {
    object-fit: cover;
    height: 100vh;
    width: 100%;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 50%, transparent 100%);
    overflow: hidden;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade-in.fade-in-show {
    opacity: 1;
}

.border-gradient {
    border: 10px solid;
    border-image-slice: 1;
    border-width: 3px;
    border-radius: 10px;
}

.border-gradient-primary {
    border-image-source: linear-gradient(to left, #43cea2, #185a9d);
}