/*Import google font */
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Raleway:wght@100;400&display=swap');


/*Remove default values*/
* {
    margin: 0;
    padding: 0;
}

/*Add website font-family */
body {
    height: 100vh;
}

/*Style navigation bar*/
.logo {
    height: 50px;
    width: 50px;
    background: url('https://res.cloudinary.com/deipzfplq/image/upload/v1679074205/background-remover_vinz0k.png') no-repeat center;
    background-size: cover;
    border-radius: 50%;
}

.logo p {
    margin-top: 6px;
    margin-left: 45px;
    color: rgb(102, 187, 135);
}

.home-page-container {
    background: black;
}

.bg-darker {
    background: rgba(0, 0, 0, 0.2);
}

.dropdown-menu a:hover {
    background-color: #dedede;
    transition: .5s ease-in-out;
}

.nav-item a:hover {
    transition: .20s ease-in-out;
} 

/* Style for signup and log in messages*/
#msg {
    z-index: 2;
    background-color: rgba(240, 240, 240, 0.888);
    position: absolute;
}

/*Stlye headings*/
h1 {
    font-weight: 900;
    text-transform: uppercase;
}

h2 {
    font-weight: 900;
    font-style: italic;
}

/*Style hero image*/
#hero-image {
    height: 400px;
    background: url('https://res.cloudinary.com/deipzfplq/image/upload/v1677238747/samples/animals/giantpanda_sjl5v9.jpg') no-repeat fixed;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-align: center;
}

#hero-image h1 {
    margin-top: 100px;
}

/* Style accompany images in home page description section*/
.accompany-image1 {
    height: 300px;
    width: 400px;
    background: url('https://res.cloudinary.com/deipzfplq/image/upload/v1677709016/yfog91lorwexabxwc4we.jpg')no-repeat;
    background-size: cover;
    background-position: center;
}

.accompany-image2 {
    height: 300px;
    width: 400px;
    background: url('https://res.cloudinary.com/deipzfplq/image/upload/v1677234626/samples/animals/homepage-image_o86p9d.jpg')no-repeat;
    background-size: cover;
    background-position: center;
}

/*Style home page paragraphs*/
.home-text1 {
    height: 300px;
    width: 400px;
    background:  rgba(240, 240, 240, 0.888);
}

.home-text2 {
    height: 300px;
    width: 400px;
    background:  rgba(240, 240, 240, 0.888);
}

/*Style home page buttons*/
.join-us {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.homepage-program-link p {
    margin-bottom: 50px;
}

.homepage-program-link a, .join-us a {
    background: rgb(27, 121, 32);
    border-radius: 10px;
    padding: 15px;
    text-decoration: none;
    color: #ffffff;
}

.homepage-program-link a:hover, .join-us a:hover {
    background:   rgb(56, 142, 60);
    transition: .5s ease-in-out;
}

/*Style home page bottom image*/
.home-bottom-image {
    background: url('https://res.cloudinary.com/deipzfplq/image/upload/v1679050465/rainforest-sunset2_nkdcgr.jpg') center no-repeat;
    background-size: cover;
    height: 100px;
    width: 100%;
    margin-top: 60px;
}

/*Stlye footer contents*/
footer {
    height: 300px;
    color: #fff;
    background: black;
}

footer h3 {
    font-weight: 800;
    text-transform: uppercase;
}

.media-links a {
    text-decoration: none;
}

.media-links i {
    color: #fff;
    font-size: 2rem;
    display: block;
    padding: 10px; 
}

.contact-us {
    line-height: 1.5rem;
}

.contact-us h3 {
    margin-bottom: 20px;
}

.contact-us a {
    text-decoration: none;
    color: #fff;
}

.contact-us i {
    font-size: 1.5rem;
}

.copyright {
    text-align: center;
    color: #fff;
    background: black;
}



/* Style for program card display*/
.program-page-image {
    background: url('https://res.cloudinary.com/deipzfplq/image/upload/v1679050465/rainforest-sunset2_nkdcgr.jpg')center no-repeat fixed;
    margin-bottom: 60px;
    background-size: cover;
    height: 300px;
}

.program-page-image h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-top: 100px;
}


/*Style for program read page*/
.read-program-image {
    width: 80%;
    height: 300px;
    margin-left: 30px;
}

.program-view-button  {
    margin-top: 30px;
    text-align: center;
    color: rgb(27, 121, 32);
    text-transform: uppercase;
    text-decoration: none;
}

.program-view-button a {
    text-decoration: none;
    color: rgb(27, 121, 32);
    text-transform: uppercase;
}

/*Style for program pagination */
.page-link {
    margin-bottom: 20px;
    margin-top: 20px;
    color: rgb(0, 82, 0);
}

.pagination a:hover,
.pagination-arrow:hover {
    color: rgb(0, 82, 0);
}


.contact-page-section {
    overflow: hidden;
    margin-bottom: -7px;
    margin-top: 10px;
}

/*Style for contact page submit button*/
.btn-contact{
    height: 50px;
    width: 200px;
    background:  rgb(27, 121, 32);
    border: none;
    border-radius: 10px;
    color: #fff;
    margin-top: 30px;
    font-size: 1.2rem;
}

.btn-contact:hover {
    color:#fff;
    background: rgb(56, 142, 60);
    transition: .5s ease-in-out;
}

/*Style for contact page map*/
.map {
    width: 100%;
    height: 400px;
}

.register-form,
.booking-form,
.contact-form {
    background: rgba(240, 240, 240, 0.888);
    padding-bottom: 30px;
    margin-bottom: -16px;
    overflow: hidden;
}

.login-form {
    background: rgba(240, 240, 240, 0.888);
    padding-bottom: 30px;
    margin-bottom: -16px;
    overflow: hidden;
    height: 800px;
}

.register-form h1,
.contact-form h1,
.login-form h1,
.page-wrap h1 {
    text-align: center;
    margin: 30px;
    font-style: italic;
}


.register-form p,
.login-form p {
    text-align: center;
    margin-top: 20px;
}

.register-form a,
.login-form a {
    text-decoration: none;
    color: rgb(0, 82, 0);
}

.booking-card {
    border-radius: 20px;
    box-shadow: 6px 6px 10px 10px rgba(0, 0, 0, 0.2);
    margin-top: 50px;
}
.contact-card {
    border-radius: 20px;
    box-shadow: 6px 6px 10px 10px rgba(0, 0, 0, 0.2);
}

/*Style for allauth forms label*/
.control-label {
    margin-top: 1.5rem;
}

/*Style for all form buttons*/
.form-btns {
    height: 50px;
    width: 200px;
    background: rgb(27, 121, 32);
    border: none;
    border-radius: 10px;
    color: #fff;
    margin-top: 30px;
}

.form-btns:hover {
    background: rgb(56, 142, 60);
    color: #fff;
    transition: .5s ease-in-out;
}

.btn-cancel {
    height: 40px;
    width: 100px;
    background: rgb(169, 0, 0);
    border: none;
    border-radius: 5px;
    color: #fff;
    margin-top: 30px;
    text-decoration: none;
}

.delete-buttons a {
    padding: 7px;
    background: rgb(27, 121, 32);
    width: 100px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
}

.delete-buttons a:hover {
    color: #fff; 
    background: rgb(56, 142, 60);
    transition: .5s ease-in-out; 
}

/*Style for booking/enrollment form*/
.booking-form-page-wrap {
    background: rgba(240, 240, 240, 0.888);
    padding-bottom: 40px;
    margin-bottom: -20px;
}

.booking-form-page-wrap p {
    margin-top: 30px;
    font-size: 1.2rem;
}

.booking-image {
    height: 300px;
    background:url('https://res.cloudinary.com/deipzfplq/image/upload/v1679050465/rainforest-sunset2_nkdcgr.jpg')no-repeat center fixed; 
    background-size: cover;
    margin-bottom: -17px;
}

.booking-heading {
    padding-top: 150px;
}

.jobs ul {
    list-style:none;
}

.jobs h3 {
    font-weight: 700;
}

.booking-list-body{
    height: 800px;
    background: rgba(240, 240, 240, 0.888);
}

.booking-list{
    display: inline;
    background: rgba(240, 240, 240, 0.888);
    height: 350px;
}

.booking-list h3 {
    font-weight: 900;
    font-size: 1.2rem;
}

/*Style for logout page*/
.confirmation-form {
    height: 800px;
    text-align: center;
    padding-top: 200px;
}

.logout-confirmation {
    background: rgba(240, 240, 240, 0.888);
    display: inline;
}

/* Style for Blog post*/
.blog-post-body {
    height: 600px;
}

.blog-image {
    width: 100%;
    height: 70%;
}

.blog-view-image {
    width: 100%;
    height: 300px;
}

.blog-heading h1 { 
    border-top: 1px solid black; 
    font-weight: 300;
}


.blog-title a{
    text-decoration: none;
    color: rgb(27, 121, 32);
}


.blog-hr hr {
    border: 2px solid rgb(56, 142, 32);
}

.blog-hr a {
    text-decoration: none;
    color: rgb(27, 121, 32);
    font-size: 1.5rem;
}

.comment-form-margin {
    margin-bottom: -17px;
    padding-bottom: 20px;
}

.list li {
    list-style: none;
    line-height: 3rem;
}
.error-page-wrap {
    background: url('https://res.cloudinary.com/deipzfplq/image/upload/v1679926159/404-image_d8qjw0.jpg')no-repeat;
    background-size: cover;
    background-position: center;
    height: 800px;
    margin-bottom: -17px;
}

.log-form-message {
    padding-bottom: 500px;
}

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

    .homepage-program-link {
        margin-top: 100px;
    }

    .home-text1 {
        font-size: 0.8rem;
    }

    .home-text2 {
        font-size: 0.8rem;
    }

}

@media only screen and (max-width: 600px) {
    footer {
        height: 600px;
    }

    .homepage-program-link {
        margin-top: 50px;
    }
    
    .blog-post-body {
        height: 900px;
    }
    
    .blog-title h2 {
        font-size: 1.2rem;
    }
}