/*grid layout*/
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'bod1 bod1 bod1 bod1 bod1 bod1'
    'bod2 bod2 bod2 bod2 bod2 bod2'
    'bod3 bod3 bod3 bod3 bod3 bod3'
    'bod4 bod4 bod4 bod4 bod4 bod4'
    'footer footer footer footer footer footer';
  grid-gap: 10px;
  background-color: white;

}

.grid-container > section {
    box-sizing:border-box;
  text-align: center;

  font-size: 30px;
}

/*grid sections*/
.header { 
    grid-area: header;     
    background-image: URL(bg1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
     padding: 20px 0;
     position:relative;
}

.bod1 { 
    grid-area: bod1; 
    background-color: WHITE;
    position:relative;
    max-width:100%;
    max-height:100%;
}
.bod2 {
    grid-area: bod2; 
    background-color: #C7C7C7;
    position:relative;
     max-width:100%;
    max-height:100%;
    
}
.bod3 { 
    grid-area: bod3; 
    background-color:  #D2B48C;
    position:relative;
    
}
.bod4 {
    grid-area: bod4;
    background-color: WHITE;
    position:relative;
    
}

.footer {
    grid-area: footer; 
    background-color: #C7C7C7;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display:grid;
    position:relative;
    grid-template-areas:
    'ftitle ftitle ftitle'
    'fcol1 fcol2 fcol3'
    'fcol1 fcol2 fcol3'
    'fcol1 fcol2 fcol3'
    'tag tag tag';
}
/* grid inside footer section*/
.ftitle {
    grid-area: ftitle;
    position:relative;
}
.fcol1 {
    grid-area: fcol1;
    position:relative;
}
.fcol2 { 
    grid-area: fcol2;
    position:relative;
}
.fcol3 { 
    grid-area: fcol3;
    position:relative;
}

.tag{
    grid-area: tag;
    position:relative;
   margin-left:auto;
   margin-right:auto;
}


#mobile{
    display:none;
}
/*tags across all pages*/

h1{
    font-size: 39px;
    font-family: Freestyle Script;
}

h3{
    font-size: 26px;
}

p{
    font-size: 22px;
    padding:0 30px;
}

img{
    width:1400px;
    height:800px;
    max-width:100%;
   max-height: 100%;
  
}

a{
    color: black;
    text-decoration: none; 
}


button {
  background-color: none;
  border: 2px solid wheat;
  color: black;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 72px;
  cursor: pointer;
}




.welcome{
    margin-top: 20px;
    margin-left:20px;
}


/*container for heading*/
.container{
    display:grid;
     box-sizing:border-box;
    max-width:100%;
    gid-template-area:
    'logo logo head head'
    'logo logo head head';

}

.left-container{
    flex-basis:50%;
    grid-area:logo;
    align-content: left;
    position:absolute;
    
}

.right-container{
    flex-basis:50%;
    grid-area:head;
    display:grid;
    grid-template-areas:
    'phrase phrase phrase phrase'
    'phone phone phone phone1'
    'nav nav nav nav';
    height:250px;
    max-height:100%;
    box-sizing:border-box;
    padding:0 10px;
 
}


.phrasegrid{
    position:relative;
    text-align:right;
   grid-area:phrase;
}

.phonegrid{
    position:relative;
    grid-area:phone1;
    align-items:right;
    text-align:right;
    margin-top:50px;
    right:10px;
 
}

.navgrid{
    position:relative;
    grid-area:nav;
    margin-top:15px;
    
}
.logo{
    max-width: 250px;
    max-height: 250px;
    padding-left: 30px;
    float:left;
    left:20;
}


/*nav bar*/
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


.navbar{
    overflow: hidden;
    right:20px;
   float:right;
    bottom:0px;
}

.navbar active{
    background-color: white;
}


.navbar a {
    float: left;
    font-size: 18px;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 22px;  
    border: none;
    outline: none;
    color: black;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}


.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
   
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}