body {
    font-family: Arial, sans-serif;
    padding: 0;    
    margin: 0; /* Elimina el margen por defecto del body */    
       
}

.imgFondo{
	  position:fixed;
      height: 80%; /* Toda la altura de la ventana */
      width: 100%;	
      top: 0; /* Elimina el margen por defecto del body */
      left: 0;
      z-index: 0;
}


    .grid-container {
      margin: 0;
      height: 100%; /* Toda la altura de la ventana */
      width: 100%;
      display: grid;
      grid-template-areas:
        'header header'
        'widget-contacto widget-contacto'
        'widget-titulo widget-titulo'
        'widget-contactos widget-contactos'   
        'widget-comentario widget-mapa'     
        'widget-sucursales widget-sucursales'
        'widget-nota widget-nota'
        'widget-carrusel widget-carrusel'
        'logo  contacto'
        'footer footer'
        ;
        
      grid-template-rows: auto; /* Alturas de las filas */
      grid-template-columns: auto; /* Anchos de las columnas */

}

   	.grid-container > div,
	.grid-container .header,
	.grid-container .footer {
		padding: 0px;
	
	}

	    .grid-container .header {
	    grid-area: header;
	    height: 450px;
        display: flex;
        border: none;
        overflow: hidden;
        background-color: none;
        justify-content: space-between;
        z-index: 1;
    } 
  .grid-container .header .img{
			width: 170px; 
			height:170px;	
      } 
    
  .grid-container .widget-contacto{
            grid-area: widget-contacto;
            z-index: 2;
            background-color: white;			
            text-align: center;
            color: #6194b7 ;
      }
      


  .grid-container .widget-comentario{
            grid-area: widget-comentario;
            z-index: 2;
            background-color: white;			
            display: flex;
     		flex-direction: column;        
     		padding: 70px;    
      }
      
 .grid-container .widget-comentario form textarea,input,select{
    background-color: #f1f7f7;  
    border: none;
   	border-radius: 20px;
    margin:7px;
    width: 350px;
    
 }      
      
      
 .grid-container .widget-comentario form textarea{
	height: 140px; 
    width: 350px;
 }      
      
 .grid-container .widget-comentario form button{
	  background-color: #6194b7;
      color: white;
      padding: 8px 16px;
      border: none; 
      border-radius: 4px;
      cursor: pointer;
      width: 150px;
	
}

  .grid-container .widget-mapa{
            grid-area: widget-mapa;
            z-index: 2;
            background-color: white;			
            text-align: center;
      }
       
   .grid-container .widget-mapa iframe{     
            height: 450px;
            width: 550px;	

   }
      
      
      
  .grid-container .widget-titulo{
            grid-area: widget-titulo;
            z-index: 2;
            background-color: white;
   	        text-align: center;
      }


  .grid-container .widget-sucursales{
            grid-area: widget-sucursales;
            display: flex;
            z-index: 2;
            background-color: white;
            text-align: center;
             justify-content: space-between;
            padding: 100px;			
  }
 
   .grid-container .widget-contactos{
            grid-area: widget-contactos;
            display: flex;
            z-index: 2;
            background-color: white;
            text-align: center;
             justify-content: space-between;
            padding: 20px;			     
      
   }    
   .sucursal{
            padding: 50px; 
			text-align: center;
            border: 1px solid #6194b7;
			
  }
       
   .sucursal  h2{
     color: #6194b7 ;
  }
       
       
  .grid-container .widget-descripcion h1{
            color: #6194b7 ;
            text-decoration: underline;
      }
      
        
      
  .grid-container .widget-nota{
            grid-area: widget-nota;
            padding: 0 50px 0 50px;
            border-top: 1px solid grey;
            border-bottom: 1px solid grey;
            background-color: white;
            z-index: 2;
      }
      
  .grid-container .widget-carrusel {
		    grid-area: widget-carrusel;
	        border: none;
	        overflow: hidden;
	        background-color: white;
	        text-align: center;
	        color: #6194b7 ;
	        z-index: 2;
	        height: 250px;                
	    } 
      

    .grid-container .logo{
        grid-area: logo;
        padding-top: 60px;
        text-align: center;
        z-index: 2;
        background-color: white;
        border-top: 1px solid grey;
    }
    
  .grid-container .logo .img{
			width: 170px; 
			height:170px;	
      }    
    
    .grid-container .contacto{
        grid-area: contacto;
        display: flex;
        padding-right:130px;
        justify-content: space-between;
    	z-index: 2;       
        background-color: white;
        border-top: 1px solid grey;        

    }
    
    .grid-container .contacto ul{
            list-style: none;    	 
}    



    .grid-container .footer{
		grid-area: footer;
		bottom: 0;
		height: 150px;
	    z-index: 2;
	    background-color: #6194b7 ;
	    text-align: center;   
	}              
	
.imgFace, .imgInsta{
	cursor: pointer;
   } 
.imgWhats{
	
	position: fixed;
	background-color: none;
	z-index: 3;
    width: 70px;
	height: 70px;
	bottom: 30px;
	right: 30px;
	border-radius: 20px;
	cursor: pointer;
}    
      
      
      
  @media(max-width: 768px){
 	  .grid-container {
      margin: 0;
      height: 100%; /* Toda la altura de la ventana */
      width: 100%;
      display: grid;
      grid-template-areas:
         'header'
        'widget-contacto'
        'widget-titulo'
        'widget-contactos'
        'widget-mapa'
        'widget-comentario'
        'widget-sucursales'
        'widget-nota'
        'widget-carrusel'
        'logo'
        'contacto'
        'footer'
        ;
        
      grid-template-rows: auto; /* Alturas de las filas */
      grid-template-columns: auto; /* Anchos de las columnas */

}



  .grid-container .widget-contactos{
       display: block;
       padding: 10px;
  }

  .grid-container .widget-mapa {
            display: block;
      }

  .grid-container .widget-mapa iframe{          
	        width: 350px;
	        height: 250px;  
      }




  .grid-container .widget-sucursales{
       display: block;
       padding: 10px;
  }


.sucursal{
            margin: 50px;		
  }


  .grid-container .header {
   		display: flex;
   		flex-direction: column;
	    align-items: center;
  	    height: 530px;
     	z-index: 3;
  	
   } 

  .grid-container .header .img{
			width: 270px; 
			height:270px;	
      } 

  .grid-container .header .navbar{
       top: 0px;
	
   } 


  .grid-container .img-curso img{
            
	        width: 390px;
	        height: 310px;  
      } 

    .grid-container .img-curso{
  	    text-align: center;

	}


	
    .grid-container .logo{
   
   	    text-align: center;
        height: 300px;		    
}	
    .grid-container .contacto{
        padding: 0;
  	    text-align: center;
        display: block;
        justify-content: none;
        border-top: none;        
    }
.imgFondo{
      height: 100%; /* Toda la altura de la ventana */
      width: 100%;
      	
}
 .grid-container .widget-comentario form textarea,input,select{
    width: 250px;
 }      

  .grid-container .widget-comentario{
  padding: 45px;
}

 }