a p{ /*styling pragraphs in anchor*/
    display: block;
    margin-block-start: 0em; /*undoing user agent style sheet*/
    margin-block-end:0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.title h1{/*styling paragraphs in first headings*/
    margin-block-start: 0em;
    margin-block-end:0em;/*undoing user agent style sheet*/
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

body{/*styleing body */
    display: grid ;/*as a grid */

    grid-template-columns: 1fr;/*with one collum that spans the body*/
    grid-template-rows:auto;/*rows on automitic */
    
    grid-template-areas:/*with named areas */
    "header" 
    "main"
    "footer"; 
    margin: 0;/*no margin */
    
}



header{/*style the header*/
 
    grid-area: header;/*postioned in in the grid area named "header"*/
    background-color:  #000;/*set background colour to #000 */
    font-family: Helvetica, sans-serif;/*set fonts to aHelvetica and sans-serif */
    font-weight:500 ;/*set font weight to 500*/
    height: 25vh;/*set hight to 25% of view port*/
    width: 100%;/*set wight to 100% of containers */
    z-index: 10;/*set z index / layer to 10*/
   
}
/*style class "logo"*/
.logo{
    grid-area: header;/*postioned in header */
    width: 20%;/*set witdth to 20% of containers*/
    float: left;/*folow to left side of header */
    height: 25vh;/*set hight to 25% of view port like header*/
    max-width: 300px;/*max width can get is 300 pixels*/
    min-width: 70px;/*min width can get is 70 pixels*/
}

.logo img{ /*style images in class "logo"*/
    height: 100%;/*set wight to 100% of containers */
    

}
/*style class "logo"*/
.title {
    grid-area:header;/*postioned in in the grid area named "header"*/
    
    width: 25%;/*set witdth to 25% of containers*/
    height: 7vh;/*set hight to 7% of view port*/
    margin-right: 44%;/*set margin on right side 44% of containers width */
    margin-left: 44%;/*set margin on left side 44% of containers width */
    margin-top: 2%;/*set margin on top side 2% of containers height */
    margin-bottom:5% ;/*set margin on bottom side 5% of containers height */
    display:block;/*set display to block type */
    align-items: center;/*align contents center*/
    background-color: #2D3050;/*set background colour to #2D3050 */
    
}  

.title p{/*style paragraphs in  class "logo"*/
    text-align:center ;/*align text center*/
    font-family: Helvetica, sans-serif;/*set fonts to aHelvetica and sans-serif */
    font-weight: 400 ; /*set font weight to 400*/
    width: 100%; /*set witdth to 100% of containers*/
    color : #fff;
    
    


}
 header button{
   float:right;
   height: 7vh;
   margin-top: 2%;
   z-index: 2;
   display: none;

}
.nav_bar {
    
    width: 60%;
    float: right;
    align-items: center;
    margin-right: 10%;
    margin-bottom: 1%;
}

 /* .nav_bar  {
} */
nav{
    width: 100%;
    z-index: 2;
    
    background-color: #40415A;
    grid-area:header;
    
 
    display: flex;/*display as flex box*/
    flex-wrap: wrap;/*flex box contents to wrap  */
    justify-content: space-between;/*flex box contents wrap with spaced evenly   */


  
}
.nav_bar nav a {
    text-decoration:none;
    
    text-align: center;
    line-height: 5vh;
    color:#ffffff;
    padding-right: 2%;/*set padding on right side 2% of containers width */
    border-right-style:solid;/*give object soild border on right side*/

}



.start {
    margin-left: 5%;
}


.end{
    margin-right: 5%;
    border-right-style:none;/*remove border on right side */

}








/*  */

main{
    background-color:   #40415A;
}
/* style for footer */
footer{
    grid-area: footer;
    display: flex;
    flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color:  #4E4B55;
    height: 15vh;
}

footer a{
    width: 20%;
    background-color: #2D3050;
}
footer img{
    width: 100%;
    
}

/*all "pages" / mains  */
main{
    height: 60vh;
}
.pages{
    height: 100%;
}


/* home page */

#homepage{
    grid-area:main;
    display: grid;
    grid-template-columns: repeat(3,1fr);/*equal collum reapeted 3 times  */
    grid-template-rows: auto;
    grid-template-areas: 
    ".  home-top  ." 
    "room1 room2 room3";
}
#home_top{
    grid-area:home-top;/* set id to corresponding grid area */
}
#room1{
    
    grid-area: room1;/* set id to corresponding grid area */
}

#room2{
    grid-area: room2;/* set id to corresponding grid area */
}
#room3{
    grid-area: room3;/* set id to corresponding grid area */
}
.h-room p{
    padding-left: 10%;
    width: 70%;
    background-color: #4E4B55;

}
#privacy_form{
    position: fixed;
    bottom: 0;    
    
}
#hide_submit{
    display: flex;
    position: fixed;
    bottom: 15px;
    right:20px; 
    padding: 30px; 

}

/* corporate */
#corporate-page{
    grid-area:main;
  
    
  
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto;
    grid-template-areas: 
    ".  corporate-top  ." 
    "c-room1 c-room2 c-room3";
}


#corporate-top{
    grid-area:corporate-top;/* set id to corresponding grid area */
}
#c-room1{
    
    grid-area: c-room1;/* set id to corresponding grid area */
}

#c-room2{
    grid-area: c-room2;/* set id to corresponding grid area */
}
#c-room3{
    grid-area: c-room3;/* set id to corresponding grid area */
}
.c-room p{
    padding-left: 10%;
    width: 60%;
    background-color: #4E4B55;

}

/* christmas */
#xmas-page{
    grid-area:main;
    margin-top: 2%;
    margin-left: 2%;
    width: 96%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto;
    grid-template-areas: 
    ".  xmas-top  ." 
    "xmas-room1 xmas-room2 xmas-room3";
}


#xmas-top{
    grid-area:xmas-top;/* set id to corresponding grid area */
}
#xmas-room1{
    
    grid-area: xmas-room1;/* set id to corresponding grid area */
}

#xmas-room2{
    grid-area: xmas-room2;/* set id to corresponding grid area */
}
#xmas-room3{
    grid-area: xmas-room3;/* set id to corresponding grid area */
}
.xmas-room p{
    padding-left: 10%;
    width: 60%;
    background-color: #4E4B55;

}

/* gifting */

#gifting-page{
    grid-area:main;
    height: 100%;

    display: grid;
    grid-template-columns: 2fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "gift gift-card"
    "gift g-card-input"
  }
  
  #gift{
    grid-area:gift;/* set id to corresponding grid area */
  }
#gift-card{
    grid-area:gift-card ;/* set id to corresponding grid area */
}
  
#g-card-input{
    grid-area:g-card-input;/* set id to corresponding grid area */
  }

.g-box{
    width: 70%;
   padding-left: 15%;
}

.g-box p{
    
    width: 90%;
    background-color: #4E4B55;
    font-size: 2.2vw;/*set font size to 2.2 % of view port height */
    

}

.g-box h2{
    
    width: 90%;
    background-color: #4E4B55;
    font-size: 2.2vw;/*set font size to 2.2 % of view port height */
    

}


/* contact */
#contact-page{
    height: 60vh;

}
#contact form{ 
    grid-area:main;
    margin: auto;
    
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10%;
    grid-template-rows: auto;
    grid-template-areas: 
    "user_info_input user_message_input" 
    "user_info_input contact-submit" 
   
}
#user_info_input {
    grid-area: user_info_input;
    
}


#user_message_input{
    grid-area:user_message_input;
    margin:auto;
}

#contact-submit{
    grid-area: contact-submit;
    margin:auto;
}



#contact-page p{
    
    background-color: #4E4B55;
    font-size: 2.2vh;
    

}

.box{
    
    width: 60%;
   padding-left: 15%;
}
#contact-page .box{
    width: 40%;
    


}



 /*media query for tablaet  */

 @media only screen and (max-width: 1023px){ /*media query design reposive to diffrent  screen sizes  */

    
    #homepage{
        margin-top: 0;
        
        margin-left:0;
       
        width: 100%;
        grid-template-columns: 1fr;/*re do of grid for new sreen size*/
        grid-template-rows: auto;
        grid-template-areas: 
        "home-top" 
        "room1"
        "room2"
        "room3";
        
    }
    .h-room h2{
        font-size: 3vw;

    }

    .h-room p{
        
        font-size: 3vw;
        
    
    }

    #xmas-page{
        margin-top: 0;
        
        margin-left: 0;
       
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "xmas-top" 
        "xmas-room1"
        "xmas-room2"
        "xmas-room3";
    }
    #corporate-page{
        margin-top: 0;
        
        margin-left: 0;
       
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "corporate-top" 
        "c-room1"
        "c-room2"
        "c-room3";
    }

    .c-room p{
        
        font-size: 3vw;
    }

    #gifting-page{
        grid-area:main;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: 
        "gift"
        "gift-card" 
        "g-card-input";
       
      } 
    

    #contact form{ 
        grid-area:main;
        margin: auto;
        float: left;
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "user_info_input"
        "user_message_input"
        "contact-submit" ;
    }
    #contact-page p{
    
        background-color: #4E4B55;
        font-size: 2vh;
        
    }

    header button{
        display: block;
    }
    .nav_bar{
        width:15%;
    }
    nav{
        display: flex;
        flex-wrap: wrap;
        z-index:2;

    }
    .nav_bar nav a{
        border: none;
        width: 100%;
        border-bottom-style:solid;
    }
    footer a{
        width:40%;
    }
}

@media only screen and (min-width: 1024px) {
    header button{
        display: none;
    }
}
/* mobile meaia   */
@media only screen and (max-width: 600px){
    .title{
        font-size: 1.5em;
    }
    .box{
        width: 90%;
        margin: auto;
    }
    #homepage{
        margin-top: 0;
        
        margin-left:0;
       
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "home-top" 
        "room1"
        "room2"
        "room3";
        
    }
   
    
    #xmas-page{
        
        margin-top: 0%;
        
        margin-left: 0%;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "xmas-top" 
        "xmas-room1"
        "xmas-room2"
        "xmas-room3";
    }
    #corporate-page{
        margin-top: 0;
        
        margin-left: 0;
       
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "corporate-top" 
        "c-room1"
        "c-room2"
        "c-room3";
    }
    #gifting-page{
        grid-area:main;
        /* padding-top: 2%;
        
        padding-left: 2%; */
        
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: 
        "gift"
        "gift-card" 
        
        "g-card-input";
       
    }
    
    .g-box{
       
       padding-left: 15%;
    }

    .g-box p{
        
        font-size: 3vw;
        
    
    }
    

    #contact form{ 
        grid-area:main;
        margin: auto;
        float: left;
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "user_info_input"
        "user_message_input"
        "contact-submit" ;
    }
    #contact-page p{

        font-size: 1.5vh;
    
    }
    

    header button{
        display: block;
    }
    .nav_bar{
        width:15%;
    }
    nav{
        display: flex;
        flex-wrap: wrap;
        z-index:2;

    }
    .nav_bar nav a{
        border: none;
        width: 100%;

        border-bottom-style:solid;

        

    }
    footer a{
        width:40%;
    }
    

}