/* Start Variables */
:root, [data-bs-theme=light] {
    --bs-black: #000;
    --bs-white: #fff;
    --bs-slate-gray: #54585A;
    --bs-primary: #c8102e;
    --bs-secondary: #E5E5E5; /* Light Gray */
    --bs-secondary-hover: #D5D5D5;
    --bs-info: #FFF9D9; /* Cream */
    --bs-light: #f8f9fa;
    --bs-dark: #960C22;
    --bs-primary-rgb: 200, 16, 46;
    --bs-secondary-rgb: 229, 229, 229;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 255, 249, 217; 
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 150, 12, 34;
    --bs-slate-gray-rgb: 84, 88, 90;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
}
/* End Variables */
/* Start Utilities */
.w-fit { width: fit-content; }
/* End Utilities */
/* Start Backgrounds */
.bg-slate-gray {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-slate-gray-rgb), var(--bs-bg-opacity)) !important;
}

[class^="bg-image"] {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
}

/* End Backgrounds */

/* Start Sections */
.container-text {
    width: 100%;
    max-width: 740px;
	padding-right: 1.25rem;
    padding-left: 1.25rem;
}

@media screen and (min-width: 768px) {
  .container-text {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
}

@media screen and (min-width: 992px) {
  .container-text {
    padding-right: 0;
    padding-left: 0;
  }
}

/* End Sections */

/* Start Layouts */
.d-grid { display: grid; }

.grid-col-1 { grid-template-columns: 1fr; }
.grid-col-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 768px) { 
    .grid-col-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-col-md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-col-md-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
    .grid-col-lg-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-col-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-col-lg-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-col-lg-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-col-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1200px) {
    .grid-col-xl-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-col-xl-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-col-xl-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-col-xl-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-col-xl-6 { grid-template-columns: repeat(6, 1fr); }
}
/* End Layouts */

/* Start Buttons */
/* Button Colors */
.btn-primary { 
    --bs-btn-border-color: var(--bs-primary);
} 

.btn-snippet.btn-secondary {
    background-color:  var(--bs-secondary);
    border-color:  var(--bs-secondary);
    color: var(--bs-black);
}

    .btn-snippet.btn-secondary:hover, .btn-snippet.btn-secondary:focus, .btn-snippet.btn-secondary:focus-visible {
        background-color:  var(--bs-secondary-hover);
        border-color:  var(--bs-secondary-hover);
        color: var(--bs-black);
    }

.btn-snippet.btn-light {
    background-color: var(--bs-white);
}
    .btn-snippet.btn-light:hover, .btn-snippet.btn-light:focus, .btn-snippet.btn-light:focus-visible {
        background-color: var(--bs-gray-100);
    }

.btn-snippet.btn-link:active {
    color: var(--bs-dark);
}

/* Button Outline on Focus */
.btn-snippet:focus, .btn-snippet:focus-visible {
    outline: 2px var(--bs-black) solid;
    box-shadow: none;
}

/* Button Icons */
.btn-snippet .btn-i-hoverFocus { display: none; }
    
.btn-snippet {
    display: flex;
    padding: .75rem 1.25rem;
    border-radius: 2rem;
    border: 1px;
    text-wrap: pretty;
    font-weight: 600;
}

    .btn-snippet:hover .btn-i-hoverFocus, .btn-snippet:focus .btn-i-hoverFocus, .btn-snippet:focus-visible .btn-i-hoverFocus { 
        display: inline-block;
    }

    .btn-snippet:hover .btn-i-default, .btn-snippet:focus .btn-i-default, .btn-snippet:focus-visible .btn-i-default  {
        display: none;
    }
.btn-snippet i {
    -webkit-text-stroke: .5px;
    padding-left: .5rem;
    transition: opacity 0.4s ease, right 0.4s ease; /* Transition for icon appearance */
}

.btn-snippet i.btn-i-left {
    padding-left: 0;
    padding-right: .5rem;
}

.btn-link.btn-snippet:hover, .btn-link.btn-snippet:focus, .btn-link.btn-snippet:focus-visible {
    text-decoration: none;
}

/* End Buttons */