html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: white;
}

.header {
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 120px;
  background-color: white;
  top: 0%;
  z-index: 5;
}

.header img {
  padding-top: 10px;
  width: 120px;
}

.nav {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 100%;
  height: 50px;
  top: 75%;
  z-index: 5;
}

.nav ul{
  list-style: none
}

.nav li {
  float: left;
  position: relative;
  width: auto;
}
.nav a {
  background: ;
  color: #3648A4;
  display: block;
  font: 600 18px/20px Candara;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

main {
  width: 100%;
  height: 100%;
}

.somos {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  background-color:;
}

.somos h1 {
  color: #3648A4;
  font: 900 90px/20px  Candara;
  text-align: center;
  padding-top:;
  line-height: 1;
}


.somos p {
  color: #3648A4;
  font: 20px/20px  Candara;
  text-align: center;
  padding-left: 300px;
  padding-right: 300px;
}

.contacto {
  width: 100%;
  margin-bottom: ;
}

.contacto h2 {
  color: #3648A4;
  font: 900 20px/20px  Candara;
  top: 0;
  line-height: 1;
}




.mision {
  margin-top: 0px;
  
}

.mision h1 {
  color: #3648A4;
  font: 900 100px/20px  Candara;
  text-align: center;
  padding-top: 0px;
}

.mision p {
  color: #3648A4;
  font: 20px/20px  Candara;
  text-align: center;
  padding-left: 300px;
  padding-right: 300px;
}

.menu {
  background-color: white;
  display: flex;
  margin: 0 auto;
  padding-top: px;
  padding-bottom: 30px;
  flex-wrap: wrap;
  width: 100%;
}

.galeria h1 {
  color: #3648A4;
  font: 900 100px/20px  Candara;
  text-align: center;
  padding-top: 100px;
}

.card {
  background: url(https://cdn.glitch.global/9a357997-c721-4619-8b51-c5bb42844312/fotografia-de-las-tres-grandes-piramides-en-la-llanura-de-giza_56999db0_230308100940_1280x831.jpg?v=1687541816134);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 500px;
  flex: 350px;
  height: 300px;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  transform: translate(0px, 0px);
  transition: 1s ease;
}

.card:hover {
  box-shadow: 10px 10px 20px gray;
  transform: translate(-10px, -10px);
  transition: 0.3s ease;
  
}

.card::after {
  content: "";
  font-size: 2vh;
  font-family: century;
  font-weight: 900;
  text-align: center;
  color: white;
  background-color: #16456198;
  position: absolute;
  height: 100%;
  margin-top: ;
  inset: 0;
  display: grid;
  place-items: center;
  clip-path: circle(0% at center);
  transition: 0.5s ease;
}

.card:hover::after {
  clip-path: circle(100% at center);
  transition: 1s ease;
  transition-delay: 0.1s;
}

.covercard {
  font-size: 2vh;
  font-family: century;
  font-weight: 900;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color:;
  z-index: 19;
  transition: 0.5s ease;
  opacity: 0;
}

.covercard:hover {
  opacity: 1;
  transition: 1.2s ease;
  transition-delay: 0.1s;
}

.covercard p {
  padding: 10%;
}

footer {
  background-color: #3648A4;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  font: 15px/20px  Candara;
}

footer img {
  position: relative;
  bottom: 0;
  height: 100%;
}

@media (max-width: 1200px){
  .mision {
  margin-top: 350px;
  }
    .mision p {
    padding-left: 50px;
    padding-right: 50px;
  }
  
  .somos {
    flex-wrap: wrap;
    text-align: center;
  }
  
  .somos p {
    padding-left: 50px;
    padding-right: 50px;
  }
  
  .card {
    min-width: 300px;
  }
  
  footer {
    flex-wrap: wrap;
  }
}

.copy {
  background-color: #4E4E4F;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}


.cover {
  font-family: arial;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  object-fit: cover;
  height: 600px;
  color: white;
  background-size: cover;
  background-position: center;
  overflow: hidden;
} 

.title {
  font-family: arial;
  font-size: 100px;
  font-weight: bold;
}

.square {
  background-color: red;
  height: 400px;
  margin-top: 5mm;
  margin-bottom:;
}

.title1 {
  font-family: arial;
  font-size: 100px;
  font-weight: bold;
  color: white;
  margin-left: 20mm;
  margin-top: ;
}

.image2 {
  max-width: 200%;
  margin-left: 260mm;
  margin-top: 80mm;
}

.square2 {
  background-color: black;
  height: 1000px
}

.titlebig {
  color: white;
  font-size: 100px
}