/*
Theme Name: Maplehurst Stock Farm
Theme URI: https://mh.pmadvsites.com/
Description: Bootstrap 5 Enabled Theme.
Version: 1.0
Tags: Multi-Column, Responsive, Bootstrap
*/

/* -------------------------------------------------------------------------- */
/* Base styles                                                                */
/* -------------------------------------------------------------------------- */
:root {
    /* Color variables */
    --primary-theme-color: #1c4152; /* #1c4152 */
    --secondary-theme-color: #2f6f8a;
    --accent-theme-color: #936520;

    --primary-theme-opacity: rgba(28, 65, 82, 0.8);

    --white-color: white;
    --black-color: black;

    /* Font size variables */
    --font-100: 20px;
    --font-200: 24px;
    --font-300: 30px;
    --font-400: 32px;
    --font-500: 40px;
    --font-600: 64px;

    /* Border radius */
    --border-radius: 20px;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Libre Franklin', sans-serif !important;
}

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

.social-links a, .social-icons-header a {
    text-decoration: none;
}

.nav-link a {
    text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */
.font-100 {
    /* 20px */
    font-size: var(--font-100);
}

.font-200 {
    /* 24px */
    font-size: var(--font-200);
}

.font-300 {
    /* 30px */
    font-size: var(--font-300);
}

.font-400 {
    /* 32px */
    font-size: var(--font-400);
}

.font-500-black {
    /* 40px */
    font-size: var(--font-500);
    font-weight: 900;
}

.font-600-black {
    /* 60px */
    font-size: var(--font-600);
    font-weight: 900;
}

.btn-accent {
    background-color: var(--accent-theme-color) !important;
}

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

.text-secondary-theme-color {
    color: var(--secondary-theme-color);
    text-decoration-color: var(--secondary-theme-color);
}

.padding-y {
    padding: 4rem 0;
}

.img-size {
    width: 135px;
}

/* -------------------------------------------------------------------------- */
/* Header video and wrappper styles                                           */
/* -------------------------------------------------------------------------- */
.video-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.navbar-toggler {
    border: 3px solid var(--accent-theme-color) !important;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(147, 101, 32 ,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* -------------------------------------------------------------------------- */
/* Header section                                                             */
/* -------------------------------------------------------------------------- */
.header {
    background-color: var(--primary-theme-color);
    width: 100%;
}

.text-container {
    background-color: var(--accent-theme-color);
}

/* -------------------------------------------------------------------------- */
/* Services section                                                           */
/* -------------------------------------------------------------------------- */
.services {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: var(--secondary-theme-color);
}

.services-card {
    background-color: var(--primary-theme-color) !important;
    border: 1px solid var(--accent-theme-color) !important;
    border-radius: 16px;
    padding: 20px 0;
    height: 250px;
}

.services-card p {
    padding-inline: 16px;
}

.coming-soon {
    background-color: var(--primary-theme-color);
    border-top: 2rem solid var(--accent-theme-color);
}


/* -------------------------------------------------------------------------- */
/* Team section                                                               */
/* -------------------------------------------------------------------------- */
.team-card {
    width: 300px; /* 381px */
}

.team-card img {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.team-card-body {
    background-color: var(--primary-theme-opacity);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding: 14px 12px;
}

/* -------------------------------------------------------------------------- */
/* Mane Characters section                                                    */
/* -------------------------------------------------------------------------- */
.border-bottom-1 {
    border-bottom: 2rem solid var(--primary-theme-color) !important;
}

/* -------------------------------------------------------------------------- */
/* Footer section                                                             */
/* -------------------------------------------------------------------------- */
footer {
    background-color: var(--primary-theme-color);
}

.vertical-spacing {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.right-image-group {
    height: 98.4%;
    overflow: hidden;
}

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

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    
 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    ul {
        min-width: auto;
        margin-inline: auto;
    }

    .content-box {
        width: 65%;
    }

    .coming-soon {
        margin-top: -12px;
    }

    .header {
        background-color: var(--primary-theme-opacity);
        position: absolute;
        left: 0;
        z-index: 10;
    }

    .col-lg-fit {
        width: fit-content !important;
    }

    .padding-x {
        padding-inline: 5rem;
    }
 }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    .vertical-spacing {
        padding: 0;
    }
 }