@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.cdnfonts.com/css/cabinet-grotesk');

:root {
    --primary-light: #dc143c;
    --primary-dark: #c91136;
}

::-webkit-scrollbar {
    width: .5em;
    height: .4em;
    background: #fff
}

::-webkit-scrollbar-thumb {
    background: var(--primary-dark);
    height: 0;
    width: .75em;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
    transition: ease .4s
}

#top-dog {
    background: #f7f8fa !important
}

* {
    font-family: 'Inter', 'Poppins', Roboto, sans-serif;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
}

html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    max-width: 100vw
}

body {
    background: #fff;
    max-width: 100%;
    transition: ease 800ms;
}

::selection {
    background: black;
}

.hero {
    width: 100%;
    z-index: 0;
    height: 60vh;
    background-size: cover;
}

.clip-bottom-right,
.clip-bottom-right .hero-overlay,
.clip-bottom-right .hero-content {
    border-bottom-right-radius: 200px;
}

.clip-bottom-left,
.clip-bottom-left .hero-overlay,
.clip-bottom-left .hero-content {
    border-bottom-left-radius: 200px;
}

.clip-top-right,
.clip-top-right .hero-overlay,
.clip-top-right .hero-content {
    border-top-right-radius: 200px;
}

.clip-top-left,
.clip-top-left .hero-overlay,
.clip-top-left .hero-content {
    border-top-left-radius: 200px;
}

.hero h1 {
    font-weight: 700;
}

.hero-landing-1 {
    background: url("./../media/cover.jpg") no-repeat;
    background-size: cover;
}

.hero-landing-2 {
    background: url("./../media/start2.jpg") no-repeat center;
}

.hero-overlay {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: inherit;
    background: rgba(201, 17, 54, 0.9);
}

.hero-content {
    width: 100%;
    height: inherit;
    z-index: 2;
    position: absolute;
    display: flex;
    flex-direction: column;
    place-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.vh-100 {
    height: 100vh;
}

.uppercase {
    text-transform: uppercase;
}

.text-crimson {
    color: var(--primary-light);
}

.bg-crimson {
    z-index: 1;
    color: #fff;
    background: rgba(201, 17, 54, 0.9);
}

.nav-logo img {
    height: 4rem;
    padding: 0.8rem 1.2rem;
}

.pill {
    font-size: 1rem;
    transition: ease-in 600ms;
    color: var(--primary-dark);
    padding: 0.4rem 1rem;
    border-radius: 6px;
}

.pill.border {
    border: 2px solid #fff;
}

.pill.border-crimson {
    border-color: var(--primary-dark);
}

/* Crimson Red with no outline */

.btn-crimson {
    color: #fff;
    transition: ease-in 200ms;
    background: var(--primary-light);
}

.btn-crimson:hover {
    transition: ease-in 400ms;
    background: var(--primary-dark);
}

/* White with Crimson Red outline */

.btn-outline-crimson {
    border: var(--primary-dark) 2px solid;
    transition: ease-in 500ms;
    color: #333;
}

.btn-outline-crimson:hover {
    transition: ease-in 500ms;
    color: var(--primary-dark);
}

/* White with no outline */

.btn-white {
    background: #fff !important;
    transition: ease-in 500ms;
    color: #333;
}

.btn-white:hover {
    transition: ease-in 500ms;
    color: var(--primary-dark);
}

/* White outline */

.btn-outline-white {
    border: 2px solid #fff;
    transition: ease-in 500ms;
    color: #fff;
}

.btn-outline-white:hover {
    transition: ease-in 500ms;
    color: var(--primary-dark);
    background-color: #fff !important;
}

#browse-cats a {
    width: auto !important;
    padding: .5rem;
    border-radius: 2rem;
    background: crimson;
    color: white
}

#browse-cats a:hover {
    filter: brightness(80%);
}

.slick-slide {
    width: auto !important;
}

.box {
    position: relative;
    height: 320px;
    margin-bottom: 4rem;
    opacity: 0;
}

.box-img,
.box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    z-index: 1;
}

.box-text {
    width: 100%;
    position: relative;
    z-index: 2;
    color: white;
}

#start-header {
    text-align: center;
}

/* Default */

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: 'Cabinet Grotesk', 'Work Sans', sans-serif;
}

p {
    padding: 0;
    margin: 0;
}

video {
    max-width: 100%;
}

/* Nav */
nav {
    box-shadow: none;
    filter: drop-shadow(1px 0 2px #a8a8a8);
}
nav li a {
    color: dimgrey!important;
    transition: ease-in 400ms;
    font-weight: 500;
}

nav ul a:hover {
    color: var(--primary-dark);
    transition: ease-out 400ms;
}

/* Utility Classes */
.rounded {
    border-radius: 0.3rem;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
    gap: 1rem;
}

.justify-center {
    justify-content: center;
}

.place-items-center {
    place-items: center;
}

.h-screen {
    height: 100vh;
}

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

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.pb-1,
.py-1 {
    padding-bottom: .25rem;
}

.pt-1,
.py-1 {
    padding-top: .25rem;
}

.pb-2,
.py-2 {
    padding-bottom: .5rem;
}

.pt-2,
.py-2 {
    padding-top: .5rem;
}

.pb-3,
.py-3 {
    padding-bottom: 1rem;
}

.pt-3,
.py-3 {
    padding-top: 1rem;
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem;
}

.pt-4,
.py-4 {
    padding-top: 1.5rem;
}

.pb-6,
.py-6 {
    padding-bottom: 2.5rem;
}

.pt-6,
.py-6 {
    padding-top: 2.5rem;
}

.pb-1,
.py-1 {
    padding-bottom: .25rem;
}

.pt-1,
.py-1 {
    padding-top: .25rem;
}

.pb-2,
.py-2 {
    padding-bottom: .5rem;
}

.pt-2,
.py-2 {
    padding-top: .5rem;
}

.pb-3,
.py-3 {
    padding-bottom: 1rem;
}

.pt-3,
.py-3 {
    padding-top: 1rem;
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem;
}

.pt-4,
.py-4 {
    padding-top: 1.5rem;
}

.pb-6,
.py-6 {
    padding-bottom: 2.5rem;
}

.pt-6,
.py-6 {
    padding-top: 2.5rem;
}

.pb-1,
.py-1 {
    padding-bottom: .25rem;
}

.ps-1,
.px-1 {
    padding-left: .25rem;
}

.pe-2,
.px-2 {
    padding-right: .5rem;
}

.ps-2,
.px-2 {
    padding-left: .5rem;
}

.pe-3,
.px-3 {
    padding-right: 1rem;
}

.pe-3,
.px-3 {
    padding-left: 1rem;
}

.pe-4,
.px-4 {
    padding-right: 1.5rem;
}

.ps-4,
.px-4 {
    padding-left: 1.5rem;
}

.ps-6,
.px-6 {
    padding-left: 2.5rem;
}

.pe-6,
.px-6 {
    padding-right: 2.5rem;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.mb-1,
.my-1 {
    margin-bottom: .25rem;
}

.mt-1,
.my-1 {
    margin-top: .25rem;
}

.mb-2,
.my-2 {
    margin-bottom: .5rem;
}

.mt-2,
.my-2 {
    margin-top: .5rem;
}

.mb-3,
.my-3 {
    margin-bottom: 1rem;
}

.mt-3,
.my-3 {
    margin-top: 1rem;
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem;
}

.mt-4,
.my-4 {
    margin-top: 1.5rem;
}
.mb-6,
.my-6 {
    margin-bottom: 2.5rem;
}
.mt-6,
.my-6 {
    margin-top: 2.5rem;
}
.ml-1,
.mx-1 {
    margin-left: 0.25rem;
}
.mr-1,
.mx-1 {
    margin-right: 0.25rem;
}
.ml-2,
.mx-2 {
    margin-left: 0.5rem;
}
.mr-2,
.mx-2 {
    margin-right: 0.5rem;
}
.ml-3,
.mx-3 {
    margin-left: 1rem;
}
.mr-3,
.mx-3 {
    margin-right: 1rem;
}
.ml-4,
.mx-4 {
    margin-left: 1.5rem;
}
.mr-4,
.mx-4 {
    margin-right: 1.5rem;
}
.ml-6,
.mx-6 {
    margin-left: 2.5rem;
}
.mr-6,
.mx-6 {
    margin-right: 2.5rem;
}
.font-weight-bold {
    font-weight: bold;
}
.fit-content{
  width: fit-content!important;
}
/* Footer */
footer.page-footer {
    color: #222;
}