/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Macondo&display=swap');

/* CSS Variables */
:root {
    --primary-font: "Inter", sans-serif;
    --secondary-font: "Macondo", cursive;
    --primary-color: #3a2620;
    /* dark brown */
    --secondary-color: #506D1B;
    /* light brown */
    --highlight-color: #416a8e;

    --background-color: #E6E2D3;
    /* blue */
    --highlight-color-light: #7a9fc2;
    /* light blue */

    --highlight-footer-header-backgroundcolor: #4D4D4D;
}

/* Asterisk wildcard selector to override default styles added by the browser */
* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

}

/* General styles */
body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* Generic project styles */
    font-family: 'Inter', sans-serif;
    color: var(--primary-color);
}

/*.container{
    flex:1;
}*/

.section {
    margin-top: 4rem;
    /*  margin-bottom: 2rem; top wwas 2*/
}

/*
.container{
    width:100%; height: 30%;
}*/

/*.section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}*/

h1 {
    /*   font-family: 'Oswald', sans-serif; */
    font-family: var(--primary-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
  /*  color: #506D1B;*/
    color:var(--primary-color);
}

h3{
    color:var(--secondary-color);
}

h6 {
    color: red;
}

/* Header */
header {
    background-color: #ffffff;
    padding: 0 1rem;
    position: fixed;
    z-index: 99;
    width: 100%;
    -webkit-box-shadow: 0 2px 2px #3a3a3a;
            box-shadow: 0 2px 2px #3a3a3a;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
}

header a {
    text-decoration: none;
    color: inherit;
}

/*
.section {
    margin-top: 4rem;
  /*  margin-bottom: 2rem; top wwas 2*}*/

/* grid visualisation CSS for testing */
/*
.container,

 {
    border: 2px solid black;
    position:center;

}

*/

#menu {
    font-size: 110%;
    letter-spacing: 2px;
    list-style-type: none;
}

#menu>li {
    margin-bottom: 1em;
}

.active {
    border-bottom: 1px solid #a3a3a3;
}

nav {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    left: 0;
    padding: 0 1rem;
    -webkit-box-shadow: 0 2px 2px #3a3a3a;
            box-shadow: 0 2px 2px #3a3a3a;
    display: none;
    top: 100%;
}

/* Nav toggle */
#nav-toggle:checked~nav {
    display: block;
}

#nav-toggle {
    display: none;
}

.nav-toggle-label {
    font-size: 2rem;
}


/* Main content */
main {
    background-color: #E9D98A;
    color: var(--primary-color);
    /* Make main element take up any surplus space to push footer down */
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    margin-top: 50.23px;
}

#contacts {
    text-align: center;
    background-color: #ffffff;
    color: var(--primary-color);
    font-size: larger;
    padding: 2rem 1rem;
    min-height: 300px;
}

/* Reasons section */
#reasons {
    width: 90%;
    margin: 20px auto;
}

#reasons h2 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 280%;
}

#benefits-ecosystem>div,
#benefits-pets-human>div {
    line-height: 20px;
    margin-bottom: 20px;
}

#benefits p {
    padding: 0 20px;
}

#benefits hr {
    border-top: 1px solid #3a3a3a;
    margin: 5px 0;
}

#benefits-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*    position:relative;*/
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#circle-cover-bg {
    background: url(../images/winters/winters-5.jpg);
    height: 90vw;
    width: 90vw;
    margin-bottom: 20px;
    border-radius: 50%;
    /* position:absolute;*/

    /* move right */

    /* For bigger phones */
    max-width: 300px;
    max-height: 400px;
}

article div p{
    text-align:left;
}


section div article {
    margin-bottom: 30px;
}
/* Footer */
footer {
    background-color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    /*  justify-content:space-around;*/
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    /* flex-wrap:wrap;*/
    padding: 2rem 1rem;
    min-height: 200px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

/* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {

    /* Header */
    nav {
        display: block;
        position: relative;
        -webkit-box-shadow: none;
                box-shadow: none;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        padding-right: 1rem;
    }

    #menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #menu>li {
        padding-left: 1rem;
    }

    .nav-toggle-label {
        display: none;
    }

    #logo {
        font-size: 280%;
        line-height: 75px;
        margin: 0 0.5rem;
    }

    /* Main content */
    main {
        /* Push main content down to accommodate larger header */
        margin-top: 79px;
    }

    /* Reasons section */
    #benefits-ecosystem,
    #benefits-pets-humans {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100%;
    }

    #benefits-ecosystem>div,
    #benefits-pets-humans>div {
        width: 75%;
    }

    #benefits-pets-humans>div {
        text-align: end;
        -ms-flex-item-align: end;
            align-self: flex-end
    }
}

/* <-- Close 768px media query */

/* Large devices (laptops and desktops, 992px and up) */
@media screen and (min-width: 992px) {
    #menu a:hover {
        border-bottom: 1px solid #3a3a3a;
    }
}

/* <-- Close 992px media query */

@media screen and (min-width: 1200px) {

    /* Reasons section */
    #benefits {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

    #benefits>div {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

    #benefits-image {
        -webkit-box-ordinal-group: 1;
            -ms-flex-order: 0;
                order: 0
    }

    #benefits-pets-humans {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }

    #benefits-pets-humans>div {
        -ms-flex-item-align: start;
            align-self: flex-start;
    }

    #benefits-ecosystem>div {
        -ms-flex-item-align: end;
            align-self: flex-end;
    }

}

/* <-- Close 1200px media query */

/* Custom Carousel Styles - Full width, 50% height */
.custom-carousel {
    width: 100vw;
    height: 50vh;
    position: relative;
    margin-left: calc(-50vw + 50%);
}

.custom-carousel .carousel-inner {
    height: 100%;
}

.custom-carousel .carousel-item {
    height: 100%;
}

.custom-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

/* Ensure carousel controls are visible */
.custom-carousel .carousel-control-prev,
.custom-carousel .carousel-control-next {
    z-index: 10;
}

/* Social Media Icons */
.social-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
}

.social-links a {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin: 0 0.5rem;
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    color: var(--highlight-color);
}

/* Contact Button */
.contact-button {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 12px 24px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2rem;
    margin-bottom: 20px;
}

.contact-button:hover {
    background-color: var(--primary-color);
    color: #ffffff;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-box-shadow: 0 4px 8px rgba(58, 38, 32, 0.3);
            box-shadow: 0 4px 8px rgba(58, 38, 32, 0.3);
}

.contact-button:active {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-box-shadow: 0 2px 4px rgba(58, 38, 32, 0.2);
            box-shadow: 0 2px 4px rgba(58, 38, 32, 0.2);
}

/* Navigation Contact Button */
.nav-contact-button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    text-decoration: none;
}

.nav-contact-button:hover {
    -webkit-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-box-shadow: 0 2px 4px rgba(58, 38, 32, 0.2);
            box-shadow: 0 2px 4px rgba(58, 38, 32, 0.2);
}

/* Form Container */
.form-container {
    margin-top: 3rem;
    padding: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Form Header - Match navbar styling */
#please {
    font-size: 110%;
    letter-spacing: 2px;
    font-family: 'Lato', sans-serif;
    color: var(--secondary-color);
    text-align: left;
    margin-bottom: 2rem;
    font-weight: 500;
}

/* Card Images - Uniform Dimensions */
#services .card-img-top {
    height: 200px;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

/* Remove underline from services button link */
#servicesbutton a {
    text-decoration: none;
    text-transform: none;
}

/* Remove underline from request button link */
#Request {
    text-decoration: none;
}

/* Change navbar CTA text color to secondary color */
.CTA {
    color: var(--secondary-color);
}

/* Change call button border to secondary color */
#call {
    border-color: var(--secondary-color);
}

/* Mobile Media Query - Footer Reordering */
@media screen and (max-width: 768px) {
    #details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    #one {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }

    #two {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    #two .social-links {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .button-section {
        text-align: center;
        margin: 1rem 0;
    }

    #three {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
    }
}