/*
Theme Name: Mane Characters
Theme URI: https://mc.pmadvsites.com/
Description: Bootstrap 5 Enabled Theme.
Version: 1.0
Tags: Multi-Column, Responsive, Bootstrap
*/

/* -------------------------------------------------------------------------- */
/* Variables                                                                  */
/* -------------------------------------------------------------------------- */
:root {
    /* Color variables */
    --primary-clr: hsl(273, 35%, 40%);
    --primary-shade-clr: hsl(272, 24%, 70%);
    --secondary-clr: hsl(176, 79%, 37%);
    --secondary-shade-clr: hsl(176, 46%, 69%);
    --tertiary-clr: #585858;

    /* Font size variables */
    --font-size--100: 1.125rem; /* 20px */
    --font-size--150: 1.5rem; /* 24px */
    --font-size--200: 3.2rem; /* 32px */
    --font-size--300: 3.2rem; /* 48px */

    /* Button hover colors | use same hsl values but add 8% to second value and minus 8% from third value*/
    --secondary-hover-clr: hsl(176, 87%, 29%);
}
/* -------------------------------------------------------------------------- */
/* Reset styles                                                               */
/* -------------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Libre Franklin', sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

a {
    text-decoration: none;
}

.carousel-inner {
    height: 1024px;
}

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */
.btn-theme {
    color: white;
    width: 175px;
    background-color: var(--secondary-clr);
}

.btn-theme:hover {
    color: white;
    background-color: var(--secondary-hover-clr);
}

.btn-theme--2 {
    width: 100%;
    background-color: transparent;
    border: 1px solid black; 
}

.card {
    position: static;
}

.font-24 {
    font-size: var(--font-size--150);
}

.font-48 {
    font-size: var(--font-size--300);
}

.heading-light {
    text-align: center;
    text-transform: uppercase;
    color: white;
    font-size: var(--font-size--300)
}

.sub-heading {
    color: white;
    text-align: center;
}

@font-face {
    font-family: americanCaptain;
    src: url(fonts/american_captain.ttf);
  }

  .american-captain__font {
    font-family: americanCaptain;
  }

/* -------------------------------------------------------------------------- */
/* Main navbar                                                                */
/* -------------------------------------------------------------------------- */
/* Custom navbar toggler icon */
.custom-navbar-toggler {
    padding-inline: 12px;
    height: 40px;
    width: 56px;
    border: none;
    background: transparent;
}

.custom-navbar-toggler-icon {
    content: '';
    margin-inline: auto;
    display: block;
    position: relative;
    height: 3px;
    width: 100%;
    background-color: white;
}

.custom-navbar-toggler-icon:before {
    content: '';
    margin-inline: auto;
    display: block;
    position: absolute;
    top: 8px;
    height: 100%;
    width: 100%;
    background-color: white;
}

.custom-navbar-toggler-icon:after {
    content: '';
    margin-inline: auto;
    display: block;
    position: absolute;
    top: -8px;
    height: 100%;
    width: 100%;
    background-color: white;
}

.bg-body-theme-clr {
    background-color: var(--primary-clr);
}

.black-nav-logo {
    width: 45%;
}


/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */
.navbar-collapse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    background-color: white;
}

.navbar-nav {
    padding: 2rem 0;
}

/* -------------------------------------------------------------------------- */
/* Home page                                                                  */
/* -------------------------------------------------------------------------- */
/* Brief description under header image | section */
#description {
    background-color: var(--secondary-clr);
}

/* Our mission | section */
#our-mission {
    padding: 2rem 0;
}

.our-mission__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.at-mane-characters {
    line-height: 18px;
}


/* Get Involved | section */
#get-involved .row:first-child {
    background-color: var(--primary-shade-clr);
}

#get-involved .col-12:nth-child(2) {
    background-color: var(--primary-clr);
}

.get-involved__content {
    display: flex;
    height: 100%;
    margin-inline: auto;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
}


/* Sponsor a Horse | section */
#sponsor-a-horse {
    padding: 3rem 0;
    background-color: var(--tertiary-clr);
}


/* Join Our Journey | section */
#join-our-journey {
    height: 400px;
    padding: 2rem 0;
}

.join-our-journey__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

.join-our-journey__content-2 {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}


/* Check Out Our Shop | section */
#check-out-our-shop {
    padding: 3rem 0;
    background-color: var(--secondary-shade-clr);
}

.check-out-our-shop__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

.title-and-price {
    display: flex;
    justify-content: space-between;
}


/* -------------------------------------------------------------------------- */
/* About Us | PAGE                                                            */
/* -------------------------------------------------------------------------- */
/* What sets us apart | section */
#what-sets-us-apart {
    background-color: var(--secondary-shade-clr);
}

.what-sets-us-apart__content {
    text-align: center;
}

/* Donation Opportunities */
#donation-opportunities {
    margin-top: 20rem;
    padding: 3rem 0;
}

.donation-opportunities__content {
    text-align: center;
}

/* Our Programs */
#our-programs .row {
    top: -8rem;
}

.our-programs__content-left {
    height: max-content;
    color: white;
    height: 100%;
    padding: 6rem 4rem 8rem 4rem;
    background-color: var(--tertiary-clr);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.our-programs__content-right img {
    object-fit: contain;
}

.program__title {
    font-size: var(--font-size--100);
    font-weight: bold;
}

.background-decoration {
    transform: translateY(12rem);
    height: 36rem;
    background-color: var(--primary-clr);
}

/* -------------------------------------------------------------------------- */
/* Our Cast | PAGE                                                            */
/* -------------------------------------------------------------------------- */
#our-cast {
    padding: 3rem 0;
}

.our-cast__content {
    text-align: center;
}

.horse-card {
    margin-inline: auto;
}

.horse-card__caption {
    height: 60px;
    color: white;
    font-size: var(--font-size--150);
    font-weight: bold;
    text-align: center;
    background-color: var(--secondary-clr);

    display: grid;
    place-items: center;
}

/* -------------------------------------------------------------------------- */
/* Our Crew | PAGE                                                            */
/* -------------------------------------------------------------------------- */
#our-crew {
    padding: 3rem 0;
}

.our-crew__content {
    text-align: center;
}

.card {
    border: 3px solid var(--secondary-clr);
}

.card-body {
    border-top: 6px solid var(--secondary-clr);
}

/* -------------------------------------------------------------------------- */
/* Eternal Characters | PAGE                                                  */
/* -------------------------------------------------------------------------- */
#eternal-characters {
    padding: 5rem 0;
    background-color: var(--primary-shade-clr);
}

/* -------------------------------------------------------------------------- */
/* Get Involved | PAGE                                                        */
/* -------------------------------------------------------------------------- */
#donations {
    padding: 4rem 0;
}

.section__content {
    text-align: center;
}

#volunteering {
    padding: 4rem 0;
}

/* -------------------------------------------------------------------------- */
/* Shop | PAGE                                                                */
/* -------------------------------------------------------------------------- */
#the-shop {
    padding: 4rem 0;
}
/* -------------------------------------------------------------------------- */
/* Contact | PAGE                                                             */
/* -------------------------------------------------------------------------- */
#contact-us {
    padding: 6rem 0;
}

.contact-us__form {
    position: relative;
    margin-inline: auto;
    z-index: -1;
}

.wpcf7 {
    width: max-content;
    margin-inline: auto;
}

.name-field, .email-field, .message-field {
    border: none;
    padding-left: 1.2rem;
    border-radius: 10px;
    background-color: var(--secondary-shade-clr);
}

.name-field, .email-field {
    height: 50px;
}

.name-field:focus, .email-field:focus, .message-field:focus {
    outline: none;
    border: 3px solid var(--secondary-clr);
}

.message-field {
    padding-top: 1.2rem;
}

/* -------------------------------------------------------------------------- */
/* Horse | PAGE                                                               */
/* -------------------------------------------------------------------------- */
.horse-navigation {
    display: flex;
    justify-content: center;

    padding: 2rem;
    color: white;
    background-color: var(--tertiary-clr);
}

.horse-navigation h5 {
    margin-left: auto;
    margin-right: auto;
}


/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
#footer {
    background-color: var(--primary-clr);
}

#disclaimer {
    background-color: var(--tertiary-clr);
}

.footer-logo {
    width: 50%;
}

.footer-column__center {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

.footer-column__right {
    margin-inline: auto;
    display: flex;
    width: max-content;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}


/* -------------------------------------------------------------------------- */
/* 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) {
    .get-involved__content {
        width: 500px;
    }
}

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

}

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

}