﻿.hero {
    width:100%;
    background-size:cover;
    background-position:center center;
    margin-bottom:50px;
    
}
.home_hero {
    /*background-image:url("../Images/Content/test_hero.jpg");*/
    background-color:#78189A;
    height:300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top:3px solid #ED9D34;
    border-bottom:3px solid #ED9D34;
    background-image:url("../Images/Elements/castle_bg.png");
    background-size:202px;
    background-position:bottom 0px right 5%;
    background-repeat:no-repeat;
    /*background:url("../Images/Elements/test.png") no-repeat bottom 0px right 5% #78189A;*/
}
.welcome {
    width:95%;
    max-width:1000px;
    margin:0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .welcome h1.white, .welcome p.white {
        color:#fff;
    }
    .welcome p.centre { 
        text-align:center;
    }

.packages_hero {
    background-image:url("../Images/Content/James.jpg");
    /*background-color:hotpink;*/
    height:500px;
}


.two-col-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:30px;
    max-width:1200px;
    margin:0px auto;
    padding:0px 20px 50px 20px;
}
.two-col-grid div {
    align-content:center;
    display:grid;
    justify-content:center;
}

.two-col-grid .image img {
    max-width:100%;
    display:block;
    border-radius:20px;
    border:5px solid #ED9D34;
}
.reverse {
    grid-row:1/2;
    grid-column:1/2;
}

.one-col-grid {
    display:grid;
    grid-template-columns: 1fr;
    gap:30px;
    max-width:1200px;
    margin:0px auto;
    padding:0px 20px 50px 20px;
}
.one-col-grid div {
    align-content:center;
    display:grid;
    justify-content:center;
}
    .one-col-grid div p, .one-col-grid div h1, .one-col-grid div h2 {
        text-align:center;
    }

.addon-wrapper {
    max-width:1200px;
    width:95%;
    margin:0px auto 30px auto;
}
.addon-grid {
    display:grid;
    gap:20px;
    /*max-width:1200px;
    width:95%;
    margin:0px auto;*/
    /*grid-template-columns:repeat(3, 1fr);*/
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.addon {
    background-color:#ED9D34;
    padding:20px;
    border-radius:20px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image:url("../Images/Elements/castle_bg.png");
    background-size:202px;
    background-position:bottom 0px right 5%;
    background-repeat:no-repeat;
}
.addon img { 
    width:100%;
    border-radius:20px;
    margin-bottom:15px;
}

.banner {
    width:100%;
    background-color:#ED9D34;
    padding-top:30px;
    /*border-top:3px solid #78189A;
    border-bottom:3px solid #78189A;*/
    margin-bottom:30px;
    background-image:url("../Images/Elements/castle_bg.png");
    background-size:202px;
    background-position:bottom 0px right 5%;
    background-repeat:no-repeat;
}

.gallery-wrapper {
    width:95%;
    max-width:1200px;
    margin:0px auto 50px auto;
}
.home-gallery {
    display:grid;
    gap:20px;
    grid-template-columns:repeat(4, 1fr);
}
.gal {
    background-color:#ED9D34;
    border-radius:15px;
    padding:5px;
}
.gal img {
    width:100%;
    border-radius:10px;
    display:block;
}

.contact-section {
    /*background-color: red;*/
    width: 95%;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.contact-content {
    background-color: #78189A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    color: #fff;
}

.contact-form {
    /*background-color: #ED9D34;*/
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.map-banner {
    background-color: #ED9D34;
    width:100%;
    height: 350px;
    padding: 25px 0;
}

.map {
    width: 95%;
    height: 350px;
    max-width:1200px;
    margin: 0px auto;
}

.bouncy-banner {
    background-color: #ED9D34;
    padding-top: 40px;
}

.bouncy-banner a.text-link {
    color: #78189A;
    font-weight: 600;
}

.privacy-section {
    /*background-color: red;*/
    width: 95%;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.privacy-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.privacy-right {
    /*background-color: #ED9D34;*/
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
}

/* ------ FORM INPUTS ------ */

textarea, input {
    width: 100%;
    height: 40px;
    background-color: #fff;
    border: 1px solid #78189A;
    padding-left: 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 16px;
    font-weight: 400;
    color: gray;
    font-family: "DM Sans", sans-serif;;
}

textarea {
    padding-top: 1rem;
    height: 150px;
}

input[type=submit] {
    border-width: 2px;
    color: var(--light-blue);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    font-family: var(--oswald);
}

input:focus, textarea:focus { 
    outline: none;
}


@media only screen and (max-width: 900px) {

    .two-col-grid {
        grid-template-columns:1fr;
    }

    .home-gallery {
    grid-template-columns:repeat(2, 1fr);
}

    .contact-section {
    /*background-color: red;*/
        grid-template-columns: 1fr;
    }

    .privacy-section {
    /*background-color: red;*/
        grid-template-columns: 1fr;
    }

    .reverse {
    grid-row:initial;
    grid-column:initial;
    }

    /*.hero {
        height:250px;
    }*/

}