p{
    font-family: 'Cormorant Garamond', serif;

}
a:link{
    font-family: 'Cormorant Garamond', serif;
    color: black;
    text-decoration: none;
}
a:visited{
    font-family: 'Cormorant Garamond', serif;
    color: black;
    text-decoration: none;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url(font/Cormorant_Garamond/CormorantGaramond-Light.ttf) format(truetype);
}



.header{
    height: 120px;
    width: 100%;
 background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 3px 20px rgb(215, 215, 215) ;


    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.contact{
    
    position: fixed;
    font-size: 15px;
    font-weight: 200;
    top: 1%;
    left: 1%;
    
    
}

.email:hover{
    font-size: 16px;
    text-decoration: underline;
        opacity: 0.5;
    transition: 0.5s;
    }
    .email:active{
        opacity: 1;
        transition: 0s;
    } 

    .tel:hover{
        font-size: 16px;
        text-decoration: underline;
            opacity: 0.5;
        transition: 0.5s;
        }
        .tel:active{
            opacity: 1;
            transition: 0s;
        } 
        .insta:hover{
            font-size: 16px;
            text-decoration: underline;
                opacity: 0.5;
            transition: 0.5s;
            }
            .insta:active{
                opacity: 1;
                transition: 0s;
            } 
            .facebook:hover{
                font-size: 16px;
                text-decoration: underline;
                    opacity: 0.5;
                transition: 0.5s;
                }
                .facebook:active{
                    opacity: 1;
                    transition: 0s;
                } 
            .line:hover{
                font-size: 16px;
                text-decoration: underline;
                    opacity: 0.5;
                transition: 0.5s;
                }
                .line:active{
                    opacity: 1;
                    transition: 0s;
                } 





.logodiv{
  
   position: fixed;
  left: 50%;
  
  
  top: 1%;
  transform: translate(-50%);
  
  
}



.logo{

    width: 80px;
    
}

.category{

   height: 120px;
   width: 100%;
  
    display: grid;
    grid-template-columns:0fr 1fr 1fr 1fr 1fr 1fr 1fr 0fr ;
}

.productdiv{
    margin-top: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.product{
    font-size: 18px;
}
.product:hover{
    font-size: 19px;
    text-decoration: underline;
        opacity: 0.5;
    transition: 0.5s;
    }
    .product:active{
        opacity: 1;
        transition: 0s;
    } 

.homediv{
   box-shadow: 0px 3px 20px rgb(215, 215, 215);
margin-top: 90px;
   display: flex;
   align-items: center;
   justify-content: center;
  
  
 
}

.home{
    font-size: 22px;
    font-weight: 500;
    opacity: 0.5;
}



.fooddiv{
    margin-top: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.food{
    font-size: 18px;
}
.food:hover{
    font-size: 19px;
    text-decoration: underline;
        opacity: 0.5;
    transition: 0.5s;
    }
    .food:active{
        opacity: 1;
        transition: 0s;
    } 





    .fashiondiv{
    margin-top: 90px;
    display: flex;
   align-items: center;
   justify-content: center;
}
.fashion{
    font-size: 18px;
}
.fashion:hover{
    font-size: 19px;
    text-decoration: underline;
        opacity: 0.5;
    transition: 0.5s;
    }
    .fashion:active{
        opacity: 1;
        transition: 0s;
    } 

    .locationdiv{
        margin-top: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .location{
        font-size: 18px;
    }
    .location:hover{
        font-size: 19px;
        text-decoration: underline;
            opacity: 0.5;
        transition: 0.5s;
        }
        .location:active{
            opacity: 1;
            transition: 0s;
        } 

    .videodiv{
        margin-top: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .video{
        font-size: 18px;
    }
    .video:hover{
        font-size: 19px;
        text-decoration: underline;
            opacity: 0.5;
        transition: 0.5s;
        }
        .video:active{
            opacity: 1;
            transition: 0s;
        } 
    

.wholegrid{
  
  height: 80%;
    background-color: rgba(255, 255, 255,0.92);
    
    max-width: 100%;

    margin-left: 0;
    margin-right: 0;
    margin-top: 130px;
   
    
     
    display: grid;
    
}
.background{
    background-image: url(hi.jpg);
    background-size: 100%;
padding-top: 3%;
padding-bottom: 3%;
  
    
    
}
.blogogrid{
margin-top: 2%;
    max-width: 10%;
    margin-left: auto;
    margin-right: auto;  
}
.blogo{
    width: 100%;
}

.quote{
    @font-face {
        font-family: 'Cormorant Garamond';
        src: url(font/Cormorant_Garamond/CormorantGaramond-Bold.ttf) format(truetype),
    
        ;
    }
    color: rgb(255, 255, 255);
    margin-left: auto;
    margin-right: auto; 
    margin-top: 3%;
    margin-bottom: 0%;
    text-align: center;
    font-size: 300%;
    font-weight: 900;
    font-style: italic;
    
}

.quote2{
    font-family: 'Noto Serif Thai', serif;
    text-decoration-color: rgb(255, 255, 255);

font-style: italic;
    color: rgb(255, 255, 255);
   font-size: 120%;
    text-align: center;
    margin-left: 20%;
    margin-right: 20%; 



  transition: 0s;
    } 
    @font-face {
        font-family: 'Cormorant Garamond';
        src: url(font/Cormorant_Garamond/CormorantGaramond-Light.ttf) format(truetype);
    }
.hl{
    margin-top: 5%;
    box-shadow: 0px 3px 20px rgb(215, 215, 215);
    padding-bottom: 30px;
}
    .highlight{
       
        font-weight: 900;
        font-size: 130%;
    text-align: center;
        
        text-decoration: underline;
        
    }
    .bcontact{
        
        font-weight: 900;
        font-size: 130%;
        margin-left: auto;
        margin-right: auto; 
        margin-top: 3%;
        text-decoration: underline;
    }
    .bemail{
 
        margin-left: auto;
        margin-right: auto; 
        
        
        text-align: center;
        font-size: 130%;
        
        cursor: pointer;
    }
    .bemail:hover{
        font-size: 135%;
        text-decoration: underline;
            opacity: 0.5;
        transition: 0.5s;
        }
        .bemail:active{
            opacity: 1;
            transition: 0s;
        } 
    
     
            .btel{
                margin-left: auto;
                margin-right: auto; 
                margin-top: 1%;
                
                text-align: center;
                font-size: 130%;
                
                cursor: pointer;
            }
            .btel:hover{
                font-size: 135%;
                text-decoration: underline;
                    opacity: 0.5;
                transition: 0.5s;
                }
                .btel:active{
                    opacity: 1;
                    transition: 0s;
                } 
                
                .binsta{
                    margin-left: auto;
                    margin-right: auto; 
                    margin-top: 1%;
                    
                    text-align: center;
                    font-size: 130%;
                    
                    ;
                    cursor: pointer;
                }
                .binsta:hover{
                    font-size: 135%;
                    text-decoration: underline;
                        opacity: 0.5;
                    transition: 0.5s;
                    }
                    .binsta:active{
                        opacity: 1;
                        transition: 0s;
                    } 
                    .btiktok{
                        margin-left: auto;
                        margin-right: auto; 
                        margin-top: 1%;
                        
                        text-align: center;
                        font-size: 130%;
                       
                        cursor: pointer;
                    }
                    .btiktok:hover{
                        font-size: 135%;
                        text-decoration: underline;
                            opacity: 0.5;
                        transition: 0.5s;
                        }
                        .btiktok:active{
                            opacity: 1;
                            transition: 0s;
                        } 
                    
                        .bline{
                            margin-left: auto;
                            margin-right: auto; 
                            margin-top: 1%;
                            
                            text-align: center;
                            font-size: 130%;
                            
                            cursor: pointer;
                        }
                        .bline:hover{
                            font-size: 135%;
                            text-decoration: underline;
                                opacity: 0.5;
                            transition: 0.5s;
                            }
                            .bline:active{
                                opacity: 1;
                                transition: 0s;
                            } 



                            .imgdiv{
                                
                                display: grid;
                              grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
                              gap: 15px;
                            }
                            .imgdiv img{
                                margin-top: 15px;
                                width: 100%;
                                height: 500px;
                                object-fit: contain;
                            }

 .copy{
    font-size: 30%;
    left: 1%;
   
    bottom: 1%;
  }

  @media (max-width: 900px){

    .quote{
       
        font-size: 200%;
        
    }
.quote2{
    font-size: 90%;
}
.contact{
                            
    position: fixed;
    font-size: 12px;
    font-weight: 200;
    top: 1%;
    left: 1%;
                            
                            
         }
         .email:hover{
            font-size: 13px;
            text-decoration: underline;
                opacity: 0.5;
            transition: 0.5s;
            }
            .email:active{
                opacity: 1;
                transition: 0s;
            } 
        
            .tel:hover{
                font-size: 13px;
                text-decoration: underline;
                    opacity: 0.5;
                transition: 0.5s;
                }
                .tel:active{
                    opacity: 1;
                    transition: 0s;
                } 
                .insta:hover{
                    font-size: 13px;
                    text-decoration: underline;
                        opacity: 0.5;
                    transition: 0.5s;
                    }
                    .insta:active{
                        opacity: 1;
                        transition: 0s;
                    } 
                    .facebook:hover{
                        font-size: 13px;
                        text-decoration: underline;
                            opacity: 0.5;
                        transition: 0.5s;
                        }
                        .facebook:active{
                            opacity: 1;
                            transition: 0s;
                        } 
                    .line:hover{
                        font-size: 13px;
                        text-decoration: underline;
                            opacity: 0.5;
                        transition: 0.5s;
                        }
                        .line:active{
                            opacity: 1;
                            transition: 0s;

                       } 

                       .logodiv{

                        position: fixed;
                       left: 50%;
                       
                       
                       top: 1%;
                       transform: translate(-50%);
                       
                       
                     }
                     
                     
                     
                     .logo{
                     
                         width: 60px;
                         
                     }
                  


                      
                         
                     .product{
                        font-size: 14px;
                    }
                    .product:hover{
                        font-size: 15px;
                        text-decoration: underline;
                            opacity: 0.5;
                        transition: 0.5s;
                        }
                        .product:active{
                            opacity: 1;
                            transition: 0s;
                        }   
                        .location{
                            font-size: 14px;
                        }
                        .location:hover{
                            font-size: 15px;
                            text-decoration: underline;
                                opacity: 0.5;
                            transition: 0.5s;
                            }
                            .location:active{
                                opacity: 1;
                                transition: 0s;
                            } 
                            
                            
                     
                     .home{
                             font-size: 18px;
                             font-weight: 500;
                             opacity: 0.5;
                         }
                         
                         
                         
                        
                         .food{
                             font-size: 14px;
                         }
                         .food:hover{
                             font-size: 15px;
                             text-decoration: underline;
                                 opacity: 0.5;
                             transition: 0.5s;
                             }
                             .food:active{
                                 opacity: 1;
                                 transition: 0s;
                             } 
                         
                         
                         
                     
                      
                         
                         
                       
                             .fashion{
                             font-size: 14px;
                         }
                         .fashion:hover{
                             font-size: 15px;
                             text-decoration: underline;
                                 opacity: 0.5;
                             transition: 0.5s;
                             }
                             .fashion:active{
                                 opacity: 1;
                                 transition: 0s;
                             } 

                          

                             .video{
                                font-size: 14px;
                            }
                            .video:hover{
                                font-size: 15px;
                                text-decoration: underline;
                                    opacity: 0.5;
                                transition: 0.5s;
                                }
                                .video:active{
                                    opacity: 1;
                                    transition: 0s;
                                } 


  }

  @media (max-width: 600px)
  {



    .quote{
       
        font-size: 150%;
        
    }
    .quote2{
        font-size: 80%;
    }
    .contact{
                        
        position: fixed;
        font-size: 9px;
        font-weight: 200;
        top: 1%;
        left: 1%;
                                
                                
             }
             .email:hover{
                font-size: 10px;
                text-decoration: underline;
                    opacity: 0.5;
                transition: 0.5s;
                }
                .email:active{
                    opacity: 1;
                    transition: 0s;
                } 
            
                .tel:hover{
                    font-size: 10px;
                    text-decoration: underline;
                        opacity: 0.5;
                    transition: 0.5s;
                    }
                    .tel:active{
                        opacity: 1;
                        transition: 0s;
                    } 
                    .insta:hover{
                        font-size: 10px;
                        text-decoration: underline;
                            opacity: 0.5;
                        transition: 0.5s;
                        }
                        .insta:active{
                            opacity: 1;
                            transition: 0s;
                        } 
                        .facebook:hover{
                            font-size: 10px;
                            text-decoration: underline;
                                opacity: 0.5;
                            transition: 0.5s;
                            }
                            .facebook:active{
                                opacity: 1;
                                transition: 0s;
                            } 
                        .line:hover{
                            font-size: 10px;
                            text-decoration: underline;
                                opacity: 0.5;
                            transition: 0.5s;
                            }
                            .line:active{
                                opacity: 1;
                                transition: 0s;
    
                           } 
    
                           .logodiv{
    
                            position: fixed;
                           left: 50%;
                           
                           
                           top: 1%;
                           transform: translate(-50%);
                           
                           
                         }
                         
                         
                         
                         .logo{
                         
                             width: 40px;
                             
                         }
                      
    
    
                          
                             
                         .product{
                            font-size: 12px;
                        }
                        .product:hover{
                            font-size: 13px;
                            text-decoration: underline;
                                opacity: 0.5;
                            transition: 0.5s;
                            }
                            .product:active{
                                opacity: 1;
                                transition: 0s;
                            } 
                            .location{
                                font-size: 12px;
                            }
                            .location:hover{
                                font-size: 13px;
                                text-decoration: underline;
                                    opacity: 0.5;
                                transition: 0.5s;
                                }
                                .location:active{
                                    opacity: 1;
                                    transition: 0s;
                                } 
                        
                         
                         
                         .home{
                                 font-size: 14px;
                                 font-weight: 500;
                                 opacity: 0.5;
                             }
                             
                             
                             
                            
                             .food{
                                 font-size: 12px;
                             }
                             .food:hover{
                                 font-size: 13px;
                                 text-decoration: underline;
                                     opacity: 0.5;
                                 transition: 0.5s;
                                 }
                                 .food:active{
                                     opacity: 1;
                                     transition: 0s;
                                 } 
                             
                             
                             
                    
                             
                           
                                 .fashion{
                                 font-size: 12px;
                             }
                             .fashion:hover{
                                 font-size: 13px;
                                 text-decoration: underline;
                                     opacity: 0.5;
                                 transition: 0.5s;
                                 }
                                 .fashion:active{
                                     opacity: 1;
                                     transition: 0s;
                                 } 
    
    
                               
    
                                 .video{
                                    font-size: 12px;
                                }
                                .video:hover{
                                    font-size: 13px;
                                    text-decoration: underline;
                                        opacity: 0.5;
                                    transition: 0.5s;
                                    }
                                    .video:active{
                                        opacity: 1;
                                        transition: 0s;
                                    } 
  }