/*
Theme Name: Shancelot
Theme URI: https://boilerplate.com/
Description: Bootstrap 5 Enabled Theme.
Version: 1.0
Tags: Multi-Column, Responsive, Bootstrap
*/

/* -------------------------------------------------------------------------- */
/* Variables                                                                  */
/* -------------------------------------------------------------------------- */
:root {
    --primary-color: #6A90A5;
    --secondary-color: #DEEDF4;
    --tertiary-color: #4F4F4F;

    --pink-clr: #F1B5CE;

    --white-clr: #ffffff;
    --black-clr: #000000;

    /* font-size: 62.5%; (62.5/100) 16px = 10px */
    --font-size--lg: 2.4rem; /* 24px */
    --font-size--xl: 3.2rem; /* 32px */
}
/* -------------------------------------------------------------------------- */
/* Resets and Utility classes                                                 */
/* -------------------------------------------------------------------------- */
.flex {
    display: flex;
}

p {
    margin: 0;
    padding: 0;
}

ul {
    padding-left: 1rem;
}

a {
    text-decoration: none;
}

.btn-theme--1 {
    color: var(--white-clr);
    width: 400px;
    font-weight: bold;
    font-size: 32px;
    text-transform: uppercase;
    background-color: var(--tertiary-color);
    border: 2px solid var(--white-clr);
}

.btn-theme--1:hover,
.btn-theme--2:hover,
.btn-theme--3:hover {
    color: var(--white-clr);
}

.btn-theme--2 {
    font-weight: bold;
    text-transform: uppercase;
}

.btn-theme--3 {
    color: var(--white-clr);
    text-decoration: underline;
}

.btn-pink {
    color: var(--pink-clr);
}

.asap-font {
    font-family: 'Asap', 'sans-serif';
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    color: var(--secondary-color);
}

.yaldevi-font {
    font-family: 'Yaldevi', 'sans-serif';
    font-size: 20px;
}

.heading {
    font-family: 'Yaldevi', 'sans-serif';
    font-size: 40px;
    color: var(--white-clr);
    text-align: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* -------------------------------------------------------------------------- */
/* Navbar Section                                                             */
/* -------------------------------------------------------------------------- */
.navbar {
    padding-top: 2rem;
}

.navbar>.container {
    align-items: start;
}

.image-container {
    width: fit-content;
}

.image-container img {
    position: relative;
    z-index: 1;
}


.background-box::before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    background-color: var(--secondary-color);
    position: absolute;
    top: 10px;
    left: 10px;
}

.background-container {
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
    background-color: var(--black-clr);
}

/* -------------------------------------------------------------------------- */
/* Header Section                                                             */
/* -------------------------------------------------------------------------- */
#header {
    padding-bottom: 2rem;
}

.fee, .color, .nicking {
    margin-bottom: 2rem;
}

.text-content {
    font-family: 'Yaldevi', 'sans-serif';
    max-width: 325px;
}

.bullet-list {
    font-size: 20px;
}

.label {
    color: var(--secondary-color);
}

.value {
    font-weight: bold;
    font-size: 24px;
}

.nicking, .dates {
    display: flex;
    justify-content: space-between;
}

/* -------------------------------------------------------------------------- */
/* Pedigree Section                                                           */
/* -------------------------------------------------------------------------- */
#pedigree {
    padding: 2rem 0;
    background-color: var(--primary-color);
}

table {
    color: var(--white-clr);
    margin-inline: auto;
}

table a {
    color: var(--white-clr);
}

td {
    padding-left: 12px;
    border: 1px solid var(--primary-color);
    background-color: var(--tertiary-color);
}

/* -------------------------------------------------------------------------- */
/* News Section                                                               */
/* -------------------------------------------------------------------------- */
#shancelot-news {
    padding: 2rem 0;
}

.card {
    margin-inline: auto;
    max-width: 600px;
    border: none;
}
.card-body {
    font-family: 'Yaldevi', 'sans-serif';
    text-align: center;
    color: var(--white-clr);
    background-color: var(--tertiary-color);
}

.card-text {
    font-size: 20px;
}

.card-title {
    font-size: 24px;
}

.news-image {
    height: 450px;
    width: 600px;
    object-fit: cover;
}

.news-container {
    height: 300px;
    color: white;
    font-family: 'Yaldevi', 'sans-serif';
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--black-clr);
    text-align: center;
}

.news-container .container {
    height: 100%;
}

.news-container .row {
    height: 100%;
}

.news-content {
    padding: 3rem 0;
    text-align: start !important;
    font-family: 'Yaldevi', 'sans-serif';
    color: var(--white-clr);
    background-color: var(--primary-color);
}

/* -------------------------------------------------------------------------- */
/* Sponsoring Farms Section                                                   */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* Attribution                                                                */
/* -------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------- */
/* Page 2 form                                                                */
/* -------------------------------------------------------------------------- */
#header-2 {
    background-color: var(--primary-color);
}

.mare-info-link, .shed-link {
    display: block;
}

#form-area {
    padding: 3rem 0;
    color: white;
    background-color: black;
}

label {
    display: block;
}

.full {
    background-color: var(--tertiary-color);
    width: 100%;
    border: 2px solid var(--primary-color);
}

.checkbox p {
    display: flex;
}

.submit {
    margin-top: 3rem;
    font-family: 'Yaldevi', 'sans-serif';
    font-size: 24px;
    text-transform: uppercase;
    color: white;
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 2px;
    background-color: var(--primary-color);
}


/* -------------------------------------------------------------------------- */
/* Media queries                                                              */
/* -------------------------------------------------------------------------- */

/* Small Devices */
@media only screen and (min-width : 576px) {

}

/* Medium Devices */
@media only screen and (min-width : 768px) {

}

/* Large Devices */
@media only screen and (min-width : 992px) {

}

/* X Large Devices */
@media only screen and (min-width : 1200px) {

}

/* XX Large Devices */
@media only screen and (min-width : 1400px) {

}