@media(min-width: 1100px){
    /*-------home grid media query------------*/
    .container{
        display: grid;  
        /* grid-template-columns is 
        neccesary  for columns to
        appear*/
        grid-template-columns: repeat(3, 1fr);
    
    }   

    /*------service flexbox media query---------*/
    #servCon{/*inner 2nd flexbox container*/
        display: flex;
        justify-content: space-around;
    }

    /*--------product flexbox media query--------*/
    #prdCon{
        /* justify-content: center; */
        align-items: center;
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
        border-radius: 20px;
        padding: 50px;
    }
    #pbx8{/*pics only flexbox*/
        display: flex;
        flex-direction: row;
        /* margin-top: 50px; */
    }

}

/****************FONT-SIZES***********/
   /********HOME PLARGE**********/
@media screen and (min-width:723px) {
    .plarge{
        font-size: 48px;
        font-weight: bold;
        padding: 0 15px;
    }
    /***********HOME PMED********************/
    .pmed{
        font-size: 35px;
        font-weight: bold;
        padding: 0 10px;
    }
    /**************HOME HMED****************/
    .hmed{
        font-size: 150px;
   } 
}    
@media screen and (max-width:722px) {
    /********END OF: HOME PLARGE**********/
    .plarge{
        font-size: 35px;
        font-weight: bold;
        padding: 0 15px;
    }
    /***********END OF:HOME PMED*************/
    .pmed{
        font-size: 20px;
        font-weight: bold;
        padding: 0 10px;
    }
    /*******END OF: HOME HMED*************/
    .hmed{
        font-size: 80px;
   } 
   
    
}


/***********HOME HLARGE************/
@media screen and (min-width:701px) {
    .hlarge{
        font-size: 180px;
   }
}
@media screen and (max-width:700px){
    .hlarge{
        font-size: 80px;
    }
}
/***********END OF:HOME HLARGE************/


/******************SHOWCASE H1********************/
@media screen and (min-width:606px) {
    #showcase h1 {
        font-size: 550%;
        margin-bottom: 4px;
    }
}
@media screen and (max-width:605px) {
    #showcase h1 {
        font-size: 350%;
        margin-bottom: 4px;
    }
}
/******************END OF:SHOWCASE H1********************/


@media screen and (min-width:501px) {
    /*****************GHS1ZE*****************/
    #ghs1ze{
        font-size: 480%;
        margin: 0px;
    }
    /*#subtitle -> subtitle text for Galleria card*/
    #subtitle{
        margin-bottom: 4px;
        padding-bottom: 14px;
        font-size: 150%;
    }
}
@media screen and (max-width:500px) {
    /***********END OF: GHS1ZE*****************/
    #ghs1ze{
        font-size: 280%;
        margin: 0px;
    }
    /*#subtitle -> subtitle text for Galleria card*/
    #subtitle{
        margin-bottom: 4px;
        padding-bottom: 14px;
        font-size: 100%;
    }
}


/****************END OF: FONT-SIZES***********/

/*-----------GLOBAL VAR--------*/

body{
    background-color:rgb(12, 11, 11);
    
}
a{
    text-decoration: none;
    /* color: blanchedalmond; */
}
li{
    list-style-type: none;
}
.clr{
    clear: both;
}
/* global class for headers*/
.hder{
    background-color:rgb(12, 11, 11);
    color: blanchedalmond;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;/*vertical centre*/
    align-items: center;/*horizontal centre*/
    text-align: center;/*text ALWAYS centered*/
}
article{
    /*background-color: khaki;*/
    background-color: rgb(12, 11, 11);
}

nav ul li {
   
    display: inline;
    padding-left: 16px;
    background-color: rgb(12, 11, 11);
    color: blanchedalmond;
    
}#nav{
     position: sticky;/*fixed*/
     top: 0px;
     left: 0px;
}#nav ul{
    padding: 0 20px;
}#nav a{
    color:  blanchedalmond;  
}

nav{
    padding-right: 3px;
    background-color: rgb(8, 7, 7);
    color:  blanchedalmond;
    border-radius: 0 20px 20px 0;
    padding: 0.3px 0px;
    font-size: 20px;
    width:auto;

    position: absolute;

    z-index: 8;
}

main {
    display: inline;
    background-color: rgb(8, 7, 7);
}
footer{
    text-align: center;
}footer a{
    color: rgb(8, 7, 7);
}
/*-----------END OF GLOBAL VAR--------*/

/* #showcase is for header for landing page*/
#showcase{
    height: 100vh;
}
#showcase p{
    
    font-size: 20px;
}

/* -----end of #showcase ------*/

/*-------------------GALLERIA-------------------*/








.card{
    box-shadow: 8px 8px 8px 0px;
    border-radius: 20px;
    width: 330px; /*applies to BOTH so it must be here*/
    height: 410px;
    text-align: center;
    position: relative;
    color: maroon;
} 

/*adjust size of pic*/
.fcard{
    width: 230px;
    height: 230px;
    background-size: cover;
    box-shadow: 5px 5px 5px 5px blanchedalmond;
    border-radius: 8px;
    margin: 16px 20px;
}

.newCard{
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.newCard:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}



/*---------------HOME SECTION-----------------*/

/*---------------FLEXBOX AND POSITION----------------*/

article.card h3{
    /*background-color:floralwhite;*/
    background-color: khaki;
    background-size: cover;
    
}

article.card p{
    background-color:floralwhite;
}    
article#Products{

    /*position:relative; opted to use 'position' because I 
    noticed that the elements within article#Products were 
    just shifted out of place around article#Services - 
    maybe something to do with something I noticed when 
    highlighting article#Services in Developer Tools; 
    - it was occupying space meant for article#Products.
    - my theory  is that this is because a#P was floated.
    - I read that for 'position: absolute'... 
       -> "SPACE IS NOT LEFT for the moved element
           AS IT IS NO LONGER IN THE NORMAL FLOW". 
    - my theory seems to have worked as a#Plooks fine now.
    */

    /*float: left
    box-sizing: border-box;*/
    /* width: 20%; */
    margin: 20px;
    /* flex: 1; */
    /* order: 2; */
}


article#Services{
    /*float: left;
    box-sizing: border-box;*/
    /* width: 20%; */
    margin: 20px;
    /* flex: 1; */
    /* order: 1; */
}

article#Galleria{
    background-image:url("images/GalleryCard.jpg");
    background-size: cover;
    color: khaki;
    text-align: center;
    font-size: 55px;
    position: relative;
    margin-top: 20px;
    margin-left: 20px;
    /* width: 33%;
    margin: 10px 20px 10px 100px; */
    /*float: right;
    width: 33.3%;
    box-sizing: border-box;*/
    /* flex: 5; */
    /* order: 3; */
}
#GalleriaH1{
    position: absolute;
    left: 48px;
}




/*------------------------GRID w/IMAGE------------------------*/


.container div{
    z-index: 1;
    cursor: pointer;
    border-radius: 10px;
    height: 210px;

    background-size: cover;
    /*for pic to span and not repaet*/
    background-attachment: fixed;

    /*flexbox*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
   
}   


.hmed a{
    color: rgb(39, 3, 3);
}
.hlarge a{
    
    color: blanchedalmond;
}


section#Home{
    margin-top: 20px;
    padding: 10;
    background: rgb(8, 7, 7);
    border-radius: 10px;
}

/*grid-gap is obsolete ao opted for margin*/
.pdng{
    margin: 5px;
}
.bgProducts{
    background: url("images/LinkedIn_DP.webp");
    background-position: top;
    color: rgb(8, 7, 7);
}
.bgServices{
    background: url("images/LinkedIn_DP.jpg");
    background-position: top left;
    color: rgb(8, 7, 7);
}.bg4Txt{
    /*background: rgb(39, 3, 3);*/
    border-radius: 30px;
    /* opacity: 0.7; */
}
.bgGalleria{
    background-image:url("images/LinkedIn_DP.webp");
    background-position: top right;
    color: rgb(8, 7, 7);
    
}

#bx1{
    order: 1;
}
#bx2{
    order: 2;

    /*attempt to fit text*/
    /* display: inline-block; */
}
#bx3{
    order: 3;
}
#bx4{
    order: 4;
}
#bx5{
    order: 5;
}
#bx6{
    order: 6;
}
#bx7{
    order: 7;
}
#bx8p{
    order: 9;
    padding-left: 160px;
}
#bx9{
    order: 8;
}
.container div:nth-of-type(2){
    grid-column: 2/4;
}
.container div:nth-of-type(4){
    grid-column: 2/4;
}
/*NB!!!
SINCE I CHANGED THE ORDER AND MADE bx8 THE LAST
BOX, I THEN HAD TO CHANGE FROM nth-type(9)
to nth-type(8)*/
.container div:nth-of-type(8){
    grid-column: 2/4;
}

.lhvr:hover, .dhvr:hover{
    /*opacity-> see-through, transparent effect
    opacity: 0.7;*/
    /*transform: scale(0.98)->
    changes size of element */
    transform: scale(0.98);
     /*smooth transition between grids
    we cav -> transition: all 0.5 ease-in*/
    transition: all 0.5s ease-in;
}
.lhvr a, .dhvr a{
    color: inherit;
}
.lhvr a:hover{
    color: rgb(145, 42, 145);
    
    
}.dhvr a:hover{
    color: rgb(224, 93, 224);
    
    
}
/*---------------HOME SECTION-----------------*/

/*-----------------------END OF:GRID w/IMAGE----------------------*/


/*--------------------------PRODUCTS-----------------------------------*/
#prd{
    background: none;
    border-color:rgb(8, 7, 7);
    border-radius: 20px;
    border-style: solid;
    margin: 20px 0;
}#pbx1{
    border-radius: 20px;
}#pbx3{
    height: 335px;
    /* width: 143px; */
}
#prdH1{
    color: blanchedalmond;
    font-size: 480%;
    margin: 0px;
}#pbx2{
    text-align: center;/*align "PRODUCTS"*/
}
#pbx4{/*heading + pics*/
    display: flex;
    flex-direction: column;
    align-items: center;
}.prdbH{
    color: blanchedalmond;
    text-align: center;
}
.prdtxt{
    border-color: blanchedalmond;
    border-radius: 20px;
    border-style: solid;
    color: blanchedalmond;   
}
#prdP{
    font-size: 23px;
    font-weight: bold;
    padding: 0 10px;
}
.prdItems{
    width: 230px;
    height: 230px;
    background-size: cover;
    border-radius: 50%;
    border-style: solid;
    border-color: rgb(39, 3, 3);
}


#bx8{
    padding: 0;/*had to remove all padding*/
} 
/*--------------------END OF:PRODUCTS-----------------------------------*/


/*--------------------------SERVICES-----------------------------------*/

#servc{
    display: flex;
    align-items: center;
    flex-direction: column;
    background: black;
    border-radius: 20px;
    margin: 20px 0;
}
#servH1{
    color: blanchedalmond;
    font-size: 480%;
    margin: 0px;
}
.servH2{
    color: blanchedalmond;
}
.pServ{
    color: blanchedalmond;
}
fieldset{
    border-color: blanchedalmond;
    border-width: 3px;
    border-radius: 7px;
    /* background-size: cover; */
}/* #servBlk1{
    background-image: url("images/Stone.jpg");
}#servBlk2{
    background-image: url("images/GardenGate.jpg");
}#servBlk3{
    background-image: url("images/stonepath2.jpg");
} */
legend{
    background-color: rgb(39, 3, 3);
    border-radius: 7px;
    border-style: solid;
    border-color: blanchedalmond;
}
/*-------------------------END OF:SERVICES-----------------------------*/

/*---------------GALLERY SECTION---------------*/
#BXgalpics{
    margin-top: 20px;
    background: brown;
    border-radius: 20px;
    padding: 20px 0;
}
#galpics{
    align-items: center;
    display: grid;
    /* grid-template-columns is 
    neccesary  for columns to
    appear*/
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(auto-fill,
    minmax(235px, 1fr));
}
.Gall{
    float: left;
    width: 550px;
}

/*-------FOOTER------*/
#cntctHead{
    color: blanchedalmond;
}
#contacts{
    display: flex;
    justify-content: space-around;
    color: blanchedalmond;
}
#contacts li{
    display: list-item;
}
/*-------FOOTER------*/