*{
  margin: 0%;
  padding: 0px;
 
}



                          header {
                                  background-color: rgba(80, 79, 79, 0.701);
                                  top: 0%;
                                  width: 100%;
                                  position: fixed;
                                  z-index: 999;
                                 }


                              li {
                              list-style: none;
                                 }


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



                        .navbar {
                                  min-height: 70px;
                                  display: flex;
                                  justify-content: space-between;
                                  align-items: center;
                                  padding: 0 24px;
                                }






                        .nav-menu {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    gap: 60px;
                                    margin-right: 100px;
                                  } 



                        .nav-branding {
                                        font-size: 2rem;
                                      }

                                      
                        .nav-link {
                                    transition: 0.7s ease;
                                  }

                        .nav-link:hover {
                                          color: pink;
                                        }         



                        .hamburger {
                                    display: none;
                                    cursor: pointer;
                                   }


          
                                   
                                   /* HAMBURGER MENU */

                        .bar {
                              display: block;
                              width: 25px;
                              height: 3px;
                              margin: 5px;
                              margin-right: 30px;
                              -webkit-transition: all 0.3s ease-in-out;
                              transition: all 0.3s ease-in-out;
                              background-color: white;
                             }








                                /* ESTA ES LA BARRA PRINCIPAL DEL MENU 

                      nav {
                          these two properties make the navegation bar stay sticky on top
                              position: fixed;
                              z-index: 999;
                         
                              this (top) property keeps navegation bar with 0% marging at the top
                              top: 0%;
                              width: 100%;
                                                  
                              display: flex;
                              align-content: center;
                              justify-content: space-around;
                              align-items: center;
                              min-height: 5vh;
                              background-color: rgba(80, 79, 79, 0.701);
                              font-family: 'Courier New', Courier, monospace;
                          }

                                  */




/*BODY BACKGOUND WEBSITE PICTURE*/

.background-image {
  height: 100%;
  padding-top: 150px;
  
  background-image: url('/my-images/Hair\ 15.jpg');

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  width: auto;
                  }

           


                     
                    
                 .Amor_Logo {
                             background-color: rgba(80, 79, 79, 0.701);
                             width: 90%;
                            
                             margin: auto;
                             display: flex;
                             align-items: center;
                             justify-content: center;
                            }


                            .Amor_Image {
                                          width: 95%; 
                                          
                                          object-fit: contain;
                                          margin: auto;
                                          padding: 2%;
                                        
                                        }

                           
                            

             /*ACA EMPIEZAN LOS PARRAFOS*/    
                      /*GRID LAYOUT*/

                    .grid-container {
                        display: grid;
                        
                        /*ACA ESPECIFICA LA CANTIDAD DE COLUMNAS VERTICALES DEL GRID*/
                        grid-template-columns: 40% 40%;

                        /*ACA ME ESPECIFICA LA CANTIDAD DE FILAS O LINEAS HORIZONTALES DEL GRID*/
                        grid-template-rows: 17rem 17rem;
                        
                        grid-gap: 1rem;
                        justify-content: center;
                                      }
            
                
                    .item-1 {
                              background-color: #bea801;
                              width: 100%;
                              height: 100%;
                              margin: auto;
                             }
                    
                    .item-1 img {
                                  width: 100%;
                                  max-height: 100%;
                                  display: block;
                                  object-fit: cover;
                                  object-position: center;
                                }
                
                
                
                
                    .item-2 {
                              background-color: #AFFC82;
                              width: 100%;
                              height: 100%;
                              margin: auto;
                             }

                    .item-2 img {
                                  width: 100%;
                                  max-height: 100%;
                                  display: block;
                                  object-fit: cover;
                                  object-position: center;
                                }
                
                
                
                
                    .item-3 {
                              background-color: #575DB4;
                              width: 100%;
                              height: 100%;
                              margin: auto;
                             }

                    .item-3 img {
                                 width: 100%;
                                 max-height: 100%;
                                  display: block;
                                  object-fit: cover;
                                  object-position: center;
                                }
                
                    
                
                
                    .item-4 {
                              background-color: #F27C1F;
                              width: 100%;
                              height: 100%;
                              margin: auto;
                             }


                    .item-4 img {
                                  width: 100%;
                                  max-height: 100%;
                                  display: block;
                                  object-fit: cover;
                                  object-position: center;
                                }
                
            
                
          /* ACA EMPIEZA THE FONT STYLE PARA LOS PARRAFOS */   

          /* - Also, it talks about the problems of FOUT (Flash of unstyled text) 
          and the solution to overcome this by using font-display property of @font-face 
          along with values such as auto | block | swap | fallback | optional in css. */
          
          p {
              font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, Courier, monospace;
              font-display: swap;                            /* auto | block | swap | fallback | optional in css */
            }

                
         .bottom-paragraph-01 {
                                display: block;
                                margin: 10%; 
                                color: aliceblue;
                                text-align: justify;
                              }
                                







                            /*CSS STYLE FOR CONTACT TABLE*/
                              
                                      table, tr, th, td {
                                                         border: 2px solid aqua;
                                                         color: white;
                                                         text-align: center;
                                                         border-collapse: collapse;
                                                         width: 500px;
                                                         height: 50px;
                                                         }

                                              #contact-table {
                                                              margin-left: auto;
                                                              margin-right: auto;
                                                              text-align: center;
                                                              margin-top: 200px;
                                                              margin-bottom: 20px;
                                                              }
                              





                    
/*ACA EMPIEZA EL PIE DE PAGINA*/


  footer {
          background-color: black;
          color: bisque;
          padding: 0.5rem;
         }

  footer a {
          color: bisque;
          text-decoration: none;
          padding: 0px;
          transition: color 0.2s;
         }

  footer a:hover {
                color: #cccccc;
               }


               

.foot-container {
                  max-width: 800px;
                  margin: 0 auto;
                }


.footer-top {
              display: flex;
              margin-inline: 1rem;
              margin-bottom: 1rem;
              
            }                


.footer-column {
                flex-basis: 100px;
                flex-grow: 1;
                text-align: center;
                
               }


.footer-heading {
                  margin-bottom: 0.5rem;
                }


.footer-link {
                  display: block;
                  width: max-content;
                  padding: 5px 10px;
                  margin: 0 auto;
                  color: bisque;
                 }



.footer-bottom {
               display: flex;
               justify-content: center;
               font-size: 30px;
               margin: 10px;
               gap: 40px;
               }

               
               
.footer-bottom i {
                padding: 0.5rem;
                 }


.copyright {
            display: flex;
            justify-content: center;
            text-align: center;
            position: relative;
            height: 20px;
            right: 0px;
            left: 0px;
            padding: 0px;
            margin: 10px;
           }


.my-official-logo {
                    display:inline-block;
                    
                    bottom: 10px;
                    padding: 0px;
                    margin: 0px;
                    
                  }


.my-official-logo img { 
                        margin-top: 10px;
                        padding: 0px;
                        height: 120px;
                      }




/*THIS IS FOR RESPONSIVE MOBILE ONLY AND MUST BE DISABLED HERE*/
.footer-top-MOBILE { display: none; }

.footer-top-TABLET { display: none; }


.copyright-SEGUNDO { display: none; }




.my-official-logo-mobile { display: none;}





/*THIS TWO PROPERTIES ABOVE IS FOR MOBILES AND TABLETS ONLY */
 /*AND SHOULD ONLY BE ENABLED FOR MEDIA QUERY ONLY*/


/* ACA EMPIEZA THE MEDIA QUIERY PARA RESPONSIVE TABLETS Y CELULARES */



                                      /*TABLET RESPONSIVE BREAKING POINT*/

                              /* Use a media query to add a breakpoint at 872px: */

/*TABLET BRAKING POINT*/




                              @media screen and (max-width: 1300px){
                                                                        
                                    /*GRID CONTAINER HERE*/
  
  .grid-container {
    display: grid;
    
    /*ACA ESPECIFICA LA CANTIDAD DE COLUMNAS VERTICALES DEL GRID*/
    grid-template-columns: 40% 40%;
  
    /*ACA ME ESPECIFICA LA CANTIDAD DE FILAS O LINEAS HORIZONTALES DEL GRID*/
    grid-template-rows: 14rem 14rem;
    
    grid-gap: 1rem;
    justify-content: center;
                  }


                                    
                    .item-1 {
                            background-color: #161616;
                            width: 100%;
                            height: 100%;
                            margin: auto;
                            }
            
                    .item-1 img {
                                width: 100%;
                                max-height: 100%;
                                display: block;
                                object-fit: cover;
                                object-position: center;
                                }
        
        
        
        
                    .item-2 {
                            background-color: #161616;
                            width: 100%;
                            height: 100%;
                            margin: auto;
                            }

                    .item-2 img {
                            width: 100%;
                            max-height: 100%;
                            display: block;
                            object-fit: cover;
                            object-position: center;
                            }
        
        
        
        
                    .item-3 {
                            background-color: #161616;
                            width: 100%;
                            height: 100%;
                            margin: auto;
                            }

                    .item-3 img {
                            width: 100%;
                            max-height: 100%;
                            display: block;
                            object-fit: cover;
                            object-position: center;
                            }
        
            
        
        
                    .item-4 {
                            background-color: #161616;
                            width: 100%;
                            height: 100%;
                            margin: auto;
                            }

                    .item-4 img {
                            width: 100%;
                            max-height: 100%;
                            display: block;
                            object-fit: cover;
                            object-position: center;
                            }

                            }
  
  
  
      
                                   @media screen and (max-width: 1000px){
  
  
  /*GRID CONTAINER HERE*/
  
  .grid-container {
    display: grid;
    
    /*ACA ESPECIFICA LA CANTIDAD DE COLUMNAS VERTICALES DEL GRID*/
    grid-template-columns: 40% 40%;
  
    /*ACA ME ESPECIFICA LA CANTIDAD DE FILAS O LINEAS HORIZONTALES DEL GRID*/
    grid-template-rows: 11rem 11rem;
    
    grid-gap: 1rem;
    justify-content: center;
                  }
  
                    }
  
  
  
                            
  
                                  
                                        @media only screen and (max-width: 872px) {
  
   
  .hamburger {
              display: block;
             }



             .hamburger.active .bar:nth-child(2){
                                                  opacity: 0;
                                                }


             .hamburger.active .bar:nth-child(1){
                                                  transform: translateY(8px) rotate(45deg);
                                                }



             .hamburger.active .bar:nth-child(3){
                                                  transform: translateY(-8px) rotate(-45deg);
                                                }


               
             .nav-menu {
                        position: fixed;
                        left: -100%;
                        top: 70px;
                        gap: 0;
                        flex-direction: column;
                        background-color: rgba(80, 79, 79, 0.701);
                        width: 100%;
                        text-align: center;
                        transition: 0.3s;
                       }                                   




            .nav-item {
                        margin: 16px 0;
                      }



            .nav-menu.active {
                               left: 0;
                             }         



                           
  
  .background-image {
  height: 100%;
  padding-top: 150px;
                
                
  background-image: url('/my-images/Hair\ 15.jpg');    
              
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  width: auto;
                
  }
              
  

  
  
    /*GRID CONTAINER HERE*/
    
    .grid-container {
      display: grid;
      
      /*ACA ESPECIFICA LA CANTIDAD DE COLUMNAS VERTICALES DEL GRID*/
      grid-template-columns: 40% 40%;
    
      /*ACA ME ESPECIFICA LA CANTIDAD DE FILAS O LINEAS HORIZONTALES DEL GRID*/
      grid-template-rows: 7rem 7rem;
      
      grid-gap: 1rem;
      justify-content: center;
                    }
          
                 
          
          .background-image {
          height: 100%;
          padding-top: 150px;
                        
                        
          background-image: url('/my-images/Hair\ 15.jpg');    
                      
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          background-attachment: fixed;
          width: auto;
                        
          }
                      
    
          
          
             /*GRID CONTAINER HERE*/
            
            .grid-container {
              display: grid;
              
              /*ACA ESPECIFICA LA CANTIDAD DE COLUMNAS VERTICALES DEL GRID*/
              grid-template-columns: 40% 40%;
            
              /*ACA ME ESPECIFICA LA CANTIDAD DE FILAS O LINEAS HORIZONTALES DEL GRID*/
              grid-template-rows: 7rem 7rem;
              
              grid-gap: 1rem;
              justify-content: center;
                            }
            
                              
          
          /* TABLET BREAKING POINT */
        
          
          
                       /*FOOTER BOTTOM - SOCIAL MEDIA LINKS*/
            
          .footer-bottom a {
                            display: contents;
                           } 
          
          
          .footer-bottom i {
                             padding: 0.5rem;
                           }
          
          


        
          .my-official-logo-mobile {
                                    display: none;
                                   }
                 

          }
          

                                          /* FOOTER TOP - HEADING AND LINKS */
          
          
                                     @media only screen and (max-width: 600px) { 
          
            
          
            .footer-top { display: none;}   
            
          
             
            .footer-top-MOBILE {
              
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-inline: 1rem;
              margin-bottom: 1rem;
              
                              }  
            
          .footer-heading-MOBILE {
                                  margin-top: 10px;
                                  margin-bottom: 10px;
                                 }

          
            .footer-top-MOBILE a {
                                 color: bisque;
                                 display: contents;
                                 
                                }
            
            
            
            
                                /*FOOTER BOTTOM - SOCIAL MEDIA LINKS*/
            
            .footer-bottom a {
                               display: contents;
                             } 
            
          
            .footer-bottom i {
                            padding: 0.5rem;
                             }
      
          



          /* BREAKING POINT FOR MY OFFICIAL LOGO WEB DESIGN FOR MOBILES*/
          
 /* BREAING POINT FOR MY OFFICIAL LOGO */

 .my-official-logo-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 10px;
  padding: 0px;
  margin: 0px;
  
}


.my-official-logo-mobile img { 
      margin-top: 10px;
      padding: 0px;
      height: 120px;
      width: 120px;
    }




          
          /*GRID CONTAINER HERE*/
            
          .grid-container {
            display: grid;
            
            /*ACA ESPECIFICA LA CANTIDAD DE COLUMNAS VERTICALES DEL GRID*/
            grid-template-columns: 40% 40%;
          
            /*ACA ME ESPECIFICA LA CANTIDAD DE FILAS O LINEAS HORIZONTALES DEL GRID*/
            grid-template-rows: 5rem 5rem;
            
            grid-gap: 1rem;
            justify-content: center;
                          }






/*CSS STYLE FOR CONTACT TABLE*/
                              
table, tr, th, td {
  border: 2px solid aqua;
  color: white;
  text-align: center;
  border-collapse: collapse;
  width: 80%;
  height: 50px;
  }

#contact-table {
       margin-left: auto;
       margin-right: auto;
       text-align: center;
       margin-top: 200px;
       margin-bottom: 20px;
       }

                            }
          
          
          
              /* LAST BREAKING POINT FOR MOBILE DEVICES UNDER 450px */
          
          @media only screen and (max-width: 450px) {
      
          
          .my-official-logo { display: none; }
          
          
          
          footer a {
                    color: bisque;
                    text-decoration: none;
                    padding: 0px;
                    transition: color 0.2s;
                   }
          
                   
          footer a:hover {
                           color: #cccccc;
                         }
            
                            }
          
          
         
                            /*LOS CUADROS DE grid*/
          
          @media only screen and (max-width: 400px) {
          
            /*GRID CONTAINER HERE*/
            
          .grid-container {
            display: grid;
            
            /*ACA ESPECIFICA LA CANTIDAD DE COLUMNAS VERTICALES DEL GRID*/
            grid-template-columns: 40% 40%;
          
            /*ACA ME ESPECIFICA LA CANTIDAD DE FILAS O LINEAS HORIZONTALES DEL GRID*/
            grid-template-rows: 3rem 3rem;
            
            grid-gap: 1rem;
            justify-content: center;
                          }
          
                }