/* Miscellaneous */
:root{
    --accent-color: white;
    --main-color: darkgrey;
    --highlight: #c44a4a;

}
.container{
    justify-content: center;
}
html{

}
.cardArea>h1{
    text-align: center;
}
.cardArea-maps>h1{
    text-align: center;
}
body{
    font-family: 'Questrial', sans-serif;
    background-color: darkgray;
    background-image: linear-gradient(to bottom right, darkgrey, lightgray);
}
main{
    margin-top: 20px;
    width: 100%;
}

.contact{
    width: 20%;
    margin: 0 auto;
}



/* Event Page */
.description{
    text-align: center;
    background-color: var(--highlight);
    padding-bottom: 50px;
    margin-bottom: 0;
}
.container-event{
    display: flex;
    flex-direction: row;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'item item item item';
    width: 100%;
    height: 400px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.item>img{
    width: 100%;
    height: 100%;
    padding: 5px;
    padding-bottom: 100px;
}
.item>img:hover .d1,.d2,.d3,.d4{
    font-size: 20px;
    font-weight: bold;
    transition-delay: 1s;
}
.d1,.d2,.d3,.d4{
    font-weight: bold;
}
.item{
    grid-area: item;
    margin: 20px;
    box-shadow: 2px 4px 4px black;
    background-color: var(--highlight);
}
.events>h1{
    text-align: center;
}

.g>p{
    display: none;
}
.g>p:hover{
    display: absolute;
}

/* Nav Buttons */
nav div.container{
    display: grid;
    grid-auto-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 150px;
    grid-template-areas:
    'logo navbox1 navbox2 navbox3 navbox4 navbox5 navbox6 navbox7';
    grid-gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.logo{
    grid-area: logo;
}
.logo:hover{
    cursor: pointer;
}
.logo>a>img{
    height: auto;
    width: 200px;
}
.navbox a:hover{
    text-decoration: none;
    color: var(--highlight);
    transition: .2s;
}
.navbox:hover{
    cursor: pointer;
    color: var(--highlight);
    transition: .2s;
}
.navbox1{
    grid-area: navbox1;
    text-decoration: none;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    padding-top: 10px;
    margin-top: 50px;
    margin-bottom: 15px;
    border: 2px solid #333;
    border-radius: 10px;
    text-align: center;
    height: 50px;
    
}
.navbox2{
    grid-area: navbox2;
    text-decoration: none;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    padding-top: 10px;
    margin-top: 50px;
    margin-bottom: 15px;
    border: 2px solid #333;
    border-radius: 10px;
    text-align: center;
    height: 50px;
}
.navbox3{
    grid-area: navbox3;
    text-decoration: none;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    padding-top: 10px;
    margin-top: 50px;
    margin-bottom: 15px;
    border: 2px solid #333;
    border-radius: 10px;
    text-align: center;
    height: 50px;
}
.navbox4{
    grid-area: navbox4;
    text-decoration: none;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    padding-top: 10px;
    margin-top: 50px;
    margin-bottom: 15px;
    border: 2px solid #333;
    border-radius: 10px;
    text-align: center;
    height: 50px;
    position: relative;
    display: inline-block;
}
.navbox5{
    grid-area: navbox5;
    text-decoration: none;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    padding-top: 10px;
    margin-top: 50px;
    margin-bottom: 15px;
    border: 2px solid #333;
    border-radius: 10px;
    text-align: center;
    height: 50px;
}
.navbox6{
    grid-area: navbox6;
    text-decoration: none;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    padding-top: 10px;
    margin-top: 50px;
    margin-bottom: 15px;
    border: 2px solid #333;
    border-radius: 10px;
    text-align: center;
    height: 50px;
}
.navbox7{
    grid-area: navbox7;
    text-decoration: none;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
    padding-top: 10px;
    margin-top: 50px;
    margin-bottom: 15px;
    border: 2px solid #333;
    border-radius: 10px;
    text-align: center;
    height: 50px;
}
button{
    
}
button>a:hover{
    cursor: pointer;
    color: var(--highlight);
    transition: .5s;
}

/* Blog Entries */
.b-entry{
    border: 5px solid grey;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 20px;
}

/* Nav Dropdown */
.dropbtn:hover{
    cursor: pointer;
    color: var(--highlight);
    transition: .5s;
}
nav>.container{
    background-color: 
}
nav a{
    color: black;
    text-align: center;
    text-decoration: none;
}
.dropdown{
    text-align: center;
    overflow: hidden;
}
.dropbtn-content{
    display: none;
    position: absolute;
}
.dropbtn-content>a{
    margin-top: 5px;
    margin-bottom: 5px;
}
.navbox4 .dropbtn{
    font-size: 16px;
    border: none;
    outline: none;
    color: black;
    background-color: inherit;
    font-family: inherit;
}
.navbox7 .dropbtn{
    font-size: 16px;
    border: none;
    outline: none;
    color: black;
    background-color: inherit;
    font-family: inherit;
}
.dropdown-content{
    float: none;
    color: black;
    padding: 10px 10px;
    text-decoration: none;
    display: block;
    text-align: center;
}
.dropbtn-content a:hover{
    color: var(--highlight);
}
.navbox4:hover .dropbtn-content{
    display: flex;
    flex-direction: column;
}
.navbox7:hover .dropbtn-content{
    display: flex;
    flex-direction: column;
    
}
.dropbtn{
    position: relative;
    display: inline-block;
}
.dropbtn:hover{
    color: var(--highlight);
}





/* Page Headers */
.container-sub{
    width: 100%;

}
.heroimage{
    background-image: url(../images/indexbanner.JPG);
    background-size: cover;
    height: 100%;
    width: 100%;
}
.heroimage-sub{
    background-image: url(../images/cave.jpg);
    background-size: cover;
    height: 650px;
    width: 100%;
}
.heroitems-sub{
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 550px;
    font-size: 60px;
    color: beige;    
}
.heroitems{
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 550px;
    font-size: 60px;
    color: #333;    
}



/* Index Page Features */
.index-btn>a:hover{
    text-decoration: none;
    color: var(--highlight);    
}
.index-btn{
    color: black;
}
.slideshow{
    margin: 30px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 00 10px rgba(0, 0, 0, .4);
}
.slideshow-container{
    display: grid;
    grid-template-areas: 'pg1 pg2 pg3 pg4';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    grid-gap: 20px;
    justify-content: center;
}
.slideshow-container>img{
    box-shadow: 0 8px 16px rgba(0, 0, 0, .75), 0 5px 5px rgba(0, 0, 0, .22);
}
.container-pg{
    margin-bottom: 30px;
}
.preview-gallery{
    height: 350px;
    width: 100%;
    background-color: #333;
    display: grid;
}
.testimonies{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: auto auto auto;
    width: 80%;
    grid-gap: 100px;
    margin: 0;
}
.container-main{
    width: 60%;
    margin: 0 auto;
}
.container-about{
    width: 60%;
    margin: 0 auto;
}
.container-about>h1{
    text-align: center;
}
.office{
    text-align: center;
}
div>h3{
    text-align: center;
    margin-bottom: 50px;
}
.t1>img{
    height: 50%;
    border-radius: 150px;
    width: auto;
}
.t2>img{
    height: 50%;
    border-radius: 150px;
    width: auto;
}
.t3>img{
    height: 50%;
    width: 200px;
    border-radius: 150px;
    width: auto;
}
.t1{
    height: 400px;
    width: 100%;
}
.t2{
    height: 400px;
    width: 100%;
}
.t3{
    height: 400px;
    width: 100%;
}
.t1,.t2,.t3>p{
    text-align: center;
}


.pg{

}
.pg1{
    height: 250px;
    width: 300px;
}
.pg2{
    height: 250px;
    width: 300px;
}
.pg3{
    height: 250px;
    width: 300px;
}
.pg4{
    height: 250px;
    width: 300px;
}
.pg1>img{
    height: 100%;
    width: 100%;
}
.pg2>img{
    height: 100%;
    width: 100%;
}
.pg3>img{
    height: 100%;
    width: 100%;
}
.pg4>img{
    height: 100%;
    width: 100%;
}




 /* Gallery Grid */
 .gallery-container{
    width: auto;
    margin: auto;

    padding-left: 15px;
    padding-right: 15px;
 }
 .gallery-container>h1{
     text-align: center;
 }
.gallery{
    display: grid;
    grid-template-columns: auto auto auto;
    width: auto;
    margin: auto;
}
.g>a>img{
    width: 100%;
    height: 100%;
}
.g>a>img:hover{
    filter: blur(2px) brightness(70%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .75), 0 5px 5px rgba(0, 0, 0, .22);
    cursor: pointer;
}
.g{
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    height: auto;
    width: 100%;
    transition: .5s ease;
}
.g>img{
    height: 100%;
    width: 100%;
}
.g:hover{
    opacity: 0.3;
}
.gallery:hover .middle{
    opacity: 1;
}
.middle{
    transition: .5s ease;
    opacity: 0;
    text-align: center;
}
.g1{        
    grid-area: g1;
    padding-top: 30px;
}

.g2{        
    grid-area: g2;
    padding-top: 30px;
}
.g3{        
    grid-area: g3;
    padding-top: 30px;
}
.g4{        
    grid-area: g4;
    padding-top: 30px;
    padding-bottom: 30px;
}
.g5{        
    grid-area: g5;
    padding-top: 30px;
    padding-bottom: 30px;
}
.g6{        
    grid-area: g6;
    padding-top: 30px;
    padding-bottom: 30px;
}
.g7{        
    grid-area: g7;
    padding-top: 30px;
}
.g8{        
    grid-area: g8;
    padding-top: 30px;
}
.g9{        
    grid-area: g9;
    padding-top: 30px;
    padding-bottom: 30px;
}
.g1>img{
    width: 100%;
}
.g2>img{
    width: 100%;
}
.g3>img{
    width: 100%;
}
.g4>img{
    width: 100%;
    height: 100%;
}
.g5>img{
    width: 100%;
    height: 100%;
}
.g6>img{
    width: 100%;
    height: 100%;
}
.g7>img{
    width: 100%;
}
.g8>img{
    width: 100%;
}
.g9>img{
    width: 100%;
    height: 100%;
}
form{
    margin-top: 50px;
    margin: auto;
    align-content: center;
}
.column{
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px;
}
.form:after{
    content: "";
    display: table;
    clear: both;
}
.container>h1{
    text-align: center;
    padding-top: 20px;
}
.container>p{
    text-align: center;
}
.b-entry>img{
    height: 75%;
    width: 75%;
    padding-bottom: 20px;
}


/* Footer */
footer{
    background-color: #333;
    text-align: center;
    color: white;
}
.container-footer{
    display: grid;
    background-color: --main-color;
    grid-template-areas: 'footer-box footer-box footer-box';
    grid-auto-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    width: 100%;
}
.footer-box{
    grid-area: footer-box;
    border: 1px solid rgba(0, 0, 0, .4);
    padding: 20px;
    font-size: 16px;
    text-align: center;
}
.mapouter{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 20px;
}
.mui-textfield>label{
    font-size: 16px;
}

/* Card Product Area */

.cardArea { 
    height: auto;
    width: 80%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.cardArea-maps { 
    height: auto;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.card-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.Card {
    min-height: 200px ;
    width: 50%;
    color:var(--highlight);
    background-color: #333;
    margin: 50px;
    transition: box-shadow .3s;
    box-shadow: 0 4px rgba(0,0,0,0.12), 0 2.5px rgba(0,0,0,0.24);
    text-align: center;
    padding: 20px;

}

.Card>h4 {
    text-align: center;
    padding: 20px;
}

.Card>img {
    width: 100%;
    height: 250px;
    margin-bottom: 25px;
}

.Card>p {
    margin-bottom: 30px;
    padding: 10px;
}

.Card:hover {
    box-shadow: 0 16px 32px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.24);
}

.sub-h1{
    margin-top: 100px;
    margin-bottom: 100px;
}


/* Media Queries */
@media(max-wdith: 960px){
    .pagination{
        width: 50%;
        margin: auto;
        display: flex;
        flex-direction: row;
        padding-left: 0;
        list-style: none;
        border-radius: .25rem;
    }
    .page-item{
        background-color: inherit;
        top: 0;
    }
    .heroimage{
        width: 100%;
        height: 100%;
        margin: 0;
    }
};

@media(max-width: 480px){
    .page-link{
        font-size: small;
    }
};