:root{
    --primary: #f4f2f4;
    --secondary: #fdfdfa;
    --color-3: #eaea93;
    --color-4: #bf9480;
    --color-5: #707582;
    --background-hero: rgba(222, 225, 230, 0.7);
    --background-sections: rgba(234, 234, 147, 0.8);
    --footer-color:  #DE3B40FF;
}

body{
    background-color: var(--color-3);
    margin:0;
}
.pinyon-script-regular {
    font-family: "Pinyon Script", cursive;
    font-weight: 400;
    font-style: normal;
  }
  
header{
    width: 100%;
    background-color: var(--color-3);
    top: 0;
    position: fixed;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
}
header .logo, header .menu{
    width: 40%;
    display: flex;
    align-items: center;
    gap: 10px;
}
header .menu input{
    display: none;
}
header .menu label{
    display: none;
    align-content: center;
}
header .menu ul{
    display: flex;
    gap: 10px;
    align-items: center;
}
header .menu ul li{
    list-style-type: none;
    font-weight: bold;
    color: var(--color-5);
}
header .menu ul li a, header .menu ul li a:active, header .menu ul li a:visited{
    text-decoration: none;
    color: var(--color-5);
}
header div img{
    width: 80px;
    height: 80px;

}
.pinyon-script-regular {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-style: normal;
  color: var(--color-5);
}
.hero{
    height: 83vh;
    background-image: url(./media/pexels-thunderwolf-260670734-12802629.jpg);
    background-size: cover;        /* ajusta la imagen al contenedor */
    /*background-position: center center;  Ajusta la imagen donde se desea. */
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items:center;
}
.Banner{
    width: 57%;
    height: 57%;
    background-color: var(--background-hero);
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
}
.Bannertext{
    padding-top: 5%;
    font-weight: normal !important;
    color: black;
}
.Herobuttons{
    padding-top: 5%;
  }
.Herobuttons ul li{
    display: inline-block;
  }
.Herobuttons ul li button{
    color: #6E6E2CFF; /* secondary-800 */
    background: #FDFDFAFF; /* secondary-500 */
    opacity: 1; 
    border: none; 
    border-radius: 6px;
    padding: 0 12px; 
  }
  /* Hover */
.Herobuttons ul li button:hover {
    color: #6E6E2CFF; /* secondary-800 */
    background: #DCDCA8FF; /* secondary-600 */
  }
  /* Pressed */
.Herobuttons ul li button:hover:active {
    color: #6E6E2CFF; /* secondary-800 */
    background: #BBBB54FF; /* secondary-700 */
  }
  /* Disabled */
.Herobuttons ul li button:disabled {
    opacity: 0.4; 
  }
  h3, h4, h5, h6{
      font-weight: normal !important;
  }
  .info{
      display: flex;
      align-items: center;
      flex-direction: column;
  }
 .info h3{
      text-align: center;
  }
  .info div{
      width: 20%;
  }
  .info div img{
      width: 100%;
  }
.intro{
    height: 83vh;
    background: linear-gradient(var(--background-sections),
    var(--background-sections)), url(./media/2524601228_199a6f9600_b.jpg);
    background-size: cover;        /* ajusta la imagen al contenedor */
    background-position: center center;  /*Ajusta la imagen donde se desea.*/ 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}
.intro div{
    width: 50%;
}
.intro div h3{
    margin-left: 30px;
    text-align: justify;
}
.images_intro{
    width: 50%;
    display: flex;
    /* flex-flow: column; */ 
    flex-direction: column;  
  }
/*Selecciona todos los div que están directamente dentro de 
un elemento con la clase .images_intro*/
.images_intro > div{
    width: 50%;
    border-radius: 5px;
    padding: 8px;
  }
.item-1 { 
    /* flex:0 1 auto; */
    flex-grow:0;
    flex-shrink:1;
    align-self:flex-end;
  }
			
.item-2 { 
    /* flex:0 1 auto; */
    flex-grow:0;
    flex-shrink:1;
    align-self:center;
  }
.item-1 img{
    width: 80%;
    border-radius: 16px; /* border-xl */
  box-shadow: 0px 17px 35px #171a1f3D, 0px 0px 2px #171a1f1F; /* shadow-xl */
}
.item-2 img{
    width: 60%;
    border-radius: 16px; /* border-xl */
  box-shadow: 0px 17px 35px #171a1f3D, 0px 0px 2px #171a1f1F; /* shadow-xl */
}
.food{
    min-height: 83vh;
    background: linear-gradient(var(--background-sections),
    var(--background-sections)), url(./media/pope_eating.jpeg);
    background-size: cover;        /* ajusta la imagen al contenedor */
    background-position: center center;  /*Ajusta la imagen donde se desea.*/ 
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.food h3{
    width: 50%;
    text-align: center;
}
.food .pope-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;

  }
  
  .food .pope-grid div {
    width: 160px;
    height: 160px;
    text-align: center;
    margin-bottom: 80px;
  }
  
  .food .pope-grid div img {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  }
  .modal-content{
      background-color: var(--color-4) !important;
  }
.modal-header{
    border-bottom: none !important;
}
.modal-body{
    text-align: center;
}
.modal-body div{
    width: 100%;
}
.modal-body div img{
    width: 100%;
    border-radius: 50%;
    margin-bottom: 10px;
}
.modal-body div h5{
    font-weight: bold !important;
}
.visit{
    text-align: center;
}
/*Se pueden invocar diferentes clases dentro del CSS, que nunca se me olvide!*/ 
.custom-carousel .carousel-inner {
    max-height: 500px; /* Ajusta según lo que necesites */
    overflow: hidden;
  } 
.custom-carousel .carousel-item img {
    object-fit: cover;
    height: 500px;
    width: 100%;
  }
.custom-carousel .carousel-caption {
    background-color: var(--background-hero) !important;
    border-radius: 20px;
    color: black;
    padding: 10px;
}
.final{
    height: 53vh;
    background: linear-gradient(var(--background-sections),
    var(--background-sections)), url(./media/Blessing.jpeg);
    background-size: cover;        /* ajusta la imagen al contenedor */
    /*background-position: center center;  Ajusta la imagen donde se desea. */
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items:center;
}
.final h1{
    width: 50%;
    text-align: center;
}
footer{
    padding-top: 10px;
    background-color: var(--footer-color);
    display: flex;
    align-items: center;
    flex-direction: column;
}
footer img{
    width: 5%;
}
footer p{
    color: var(--secondary);
    text-align: center;
}
.facts{
    background: linear-gradient(var(--background-sections),
    var(--background-sections)), url(./media/saco_de_roma.jpeg);
    /*Aqui, separado por comas, se les puede dar atributos a las capas, el 100 
    quiere decir que el gradiente ocupa el 100% del contenedor y la jmagen solo el 70%*/
    background-size: 100% 100%, 100% 70%;        /* ajusta la imagen al contenedor */
    background-position: bottom, top;  /*el color solido abajo, la imagen arriba*/ 
    background-repeat: no-repeat;
    text-align: center;
}
.facts-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
}
.facts-grid div{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.facts-grid div p{
    font-size: 30px;
    font-style: italic;
    background-color: #bf9480;
    width: 60%;
    padding: 20px;
    background: #CECE90FF; 
    border-radius: 16px; /* border-xl */
    box-shadow: 0px 17px 35px #171a1f3D, 0px 0px 2px #171a1f1F; /* shadow-xl */
}
.facts-grid div img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .swiss_guard{
      width: 80% !important;
      height: 80% !important;
      border-radius: 50% !important;
  }

  /*Media queries para 992px*/
  @media (max-width: 992px){
    header{
        width: 100%;
        background-color: var(--color-3);
        top: 0;
        position: fixed;
        display: flex;
        justify-content: space-between;
        z-index: 1000;
    }
    /*El contenedor del logo ocupara una parte y media*/
    header .logo{
        flex: 1.5;
    }
    /*El contenedor del menu ocupara dos partes.*/
    header .menu{
        flex: 2;
    }
    @media (max-width: 867px){
        .logo .pinyon-script-regular{
            display: none;
        }
        /*El contenedor del logo ocupara una parte y media*/
        header .logo{
            flex: 1;
        }
        /*El contenedor del menu ocupara dos partes.*/
        header .menu{
            flex: 2;
        }
    }
    @media (max-width: 768px){
        .facts-grid{
            display: flex;
            flex-direction: column;
        }
        .swiss_guard{
            width: 50% !important;
            height: 50% !important;
            border-radius: 50% !important;
        } 
        .intro{
            height: 83vh;
            background: linear-gradient(var(--background-sections),
            var(--background-sections)), url(./media/2524601228_199a6f9600_b.jpg);
            background-size: cover;        /* ajusta la imagen al contenedor */
            background-position: center center;  /*Ajusta la imagen donde se desea.*/ 
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .intro div{
            width: 100%;
        }
        .intro div h3{
            text-align: center;
        }
        .images_intro{
            width: 50%;
            display: flex;
            /* flex-flow: column; */ 
            flex-direction: column;  
          }
        /*Selecciona todos los div que están directamente dentro de 
        un elemento con la clase .images_intro*/
        .images_intro > div{
            width: 50%;
            border-radius: 5px;
            padding: 8px;
          }
        .item-1 { 
            /* flex:0 1 auto; */
            flex-grow:0;
            flex-shrink:1;
            align-self:flex-end;
          }
                    
        .item-2 { 
            /* flex:0 1 auto; */
            flex-grow:0;
            flex-shrink:1;
            align-self:center;
          }
        .item-1 img{
            width: 80%;
            border-radius: 16px; /* border-xl */
          box-shadow: 0px 17px 35px #171a1f3D, 0px 0px 2px #171a1f1F; /* shadow-xl */
        }
        .item-2 img{
            width: 60%;
            border-radius: 16px; /* border-xl */
          box-shadow: 0px 17px 35px #171a1f3D, 0px 0px 2px #171a1f1F; /* shadow-xl */
        }    
    }
    @media (max-width: 743px){
        header .logo{
            flex: 0.5;
        }
        header .menu{
            flex: 2;
            justify-content: flex-end;
        }
        header .menu label{
            display: block;
        }
        header .menu ul{
            flex-direction: column;
            position: absolute;
            height: 100vh;
            width: 70%;
            right: -70%;
            top: 60px;
            background-color: var(--color-3);
            transition: all 300ms linear;
        }
        /*Quiere decir, que todo lo que esta dentro del div de menu, cuando se presione
        el checked de la entrada, y este presente el label y finalmente el ul del menu,
        lo haga visible.*/
        input:checked + label + ul{
            right: 0;
          }
        .Banner{
            width: 57%;
            height: auto;
            background-color: var(--background-hero);
            text-align: center;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 20px;
        }
        .Bannertext{
            padding-top: 5%;
            font-weight: normal !important;
            color: black;
        }
        .Herobuttons{
            padding-top: 5%;
          }
        .Herobuttons ul li{
            display: block;
            margin-top: 10px;
          }
    }
    @media (max-width: 610px){
        .Banner{
            width: auto;
            height: auto;
            padding: 20px;
            background-color: var(--background-hero);
            text-align: center;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 20px;
        }
        .facts-grid div p{
            font-size: 20px;
            font-style: italic;
            background-color: #bf9480;
            width: 60%;
            padding: 20px;
            background: #CECE90FF; 
            border-radius: 16px; /* border-xl */
            box-shadow: 0px 17px 35px #171a1f3D, 0px 0px 2px #171a1f1F; /* shadow-xl */
        }
    }
    @media (max-width: 450px){
        .intro{
            height: 95vh;
            background: linear-gradient(var(--background-sections),
            var(--background-sections)), url(./media/2524601228_199a6f9600_b.jpg);
            background-size: cover;        /* ajusta la imagen al contenedor */
            background-position: center center;  /*Ajusta la imagen donde se desea.*/ 
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
        }
        .intro div h3{
            margin: 10px;
            text-align: justify;
        }
        .images_intro{
            width: 50%;
            display: flex;
            /* flex-flow: column; */ 
            flex-direction: column;  
          }
        /*Selecciona todos los div que están directamente dentro de 
        un elemento con la clase .images_intro*/
        .images_intro > div{
            width: 50%;
            border-radius: 5px;
            padding: 8px;
          }
        .item-1 { 
            /* flex:0 1 auto; */
            flex-grow:0;
            flex-shrink:1;
            align-self:center;
          }
                    
        .item-2 { 
            /* flex:0 1 auto; */
            flex-grow:0;
            flex-shrink:1;
            align-self:center;
          }
        .item-1 img{
            width: 80%;
            border-radius: 16px; /* border-xl */
          box-shadow: 0px 17px 35px #171a1f3D, 0px 0px 2px #171a1f1F; /* shadow-xl */
        }
        .item-2 img{
            width: 80%;
            border-radius: 16px; /* border-xl */
          box-shadow: 0px 17px 35px #171a1f3D, 0px 0px 2px #171a1f1F; /* shadow-xl */
        }
        .facts h1{
            padding-top: 20px;
        }    

    }
  }