*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#fff;
  color:#222;
}
html{
    scroll-behavior:smooth;
}
/* =========================================
   GLOBAL
========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* =========================================
   NAVBAR
========================================= */

.navbar {
  width: 96%;

  margin: 42px auto 18px;

  background: #ffffff;

  border: 3px solid #d4af37;

  border-radius: 18px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px 32px;

  position: sticky;

  top: 10px;

  z-index: 999;

  /*
     IMPORTANTE:
     visible permite que el selector
     de idioma pueda salir del borde.
  */
  overflow: visible;

  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.14);
}


/* =========================================
   BANDERA USA
   FONDO DEL NAVBAR
========================================= */

.navbar::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 50%;
  height: 100%;

  background-image: url("/assets/usa-flag-navbar-D-LTQUL4.png");

  background-size: cover;

  background-position: left center;

  background-repeat: no-repeat;

  opacity: 0.35;

  pointer-events: none;

  z-index: 0;

  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 55%,
    rgba(0, 0, 0, 0.80) 68%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to right,
    black 0%,
    black 55%,
    rgba(0, 0, 0, 0.80) 68%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 100%
  );
}


/* =========================================
   CONTENIDO SOBRE LA BANDERA
========================================= */

.navbar > * {
  position: relative;

  z-index: 2;
}


/* =========================================
   LOGO
========================================= */

.logo {
  display: flex;

  align-items: center;

  gap: 15px;

  text-decoration: none;

  flex-shrink: 0;

  position: relative;

  z-index: 3;
}


.logo img {
  width: 105px;

  height: 105px;

  object-fit: contain;

  background: transparent;

  transition:
    transform 0.3s ease;
}


.logo img:hover {
  transform: scale(1.04);
}


.logo-text {
  display: flex;

  flex-direction: column;

  position: relative;

  z-index: 3;
}


.logo-text h1 {
  font-size: 58px;

  line-height: 55px;

  color: #071a35;

  font-family: "Cinzel", serif;

  font-weight: 700;

  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.8);
}


.logo-text span {
  font-size: 21px;

  color: #333333;

  letter-spacing: 2px;

  font-family: "Cormorant Garamond", serif;

  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.8);
}


/* =========================================
   MENU
========================================= */

.menu {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 17px;

  list-style: none;

  margin: 0;

  padding: 0;

  flex: 1;

  margin-left: 25px;

  margin-right: 15px;

  position: relative;

  z-index: 3;
}


.menu li {
  position: relative;
}


/* =========================================
   ENLACES
========================================= */

.menu li a {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-width: 70px;

  padding: 6px 5px 11px;

  color: #071a35;

  text-decoration: none;

  font-family: "Cormorant Garamond", serif;

  font-size: 17px;

  font-weight: 700;

  letter-spacing: 0.4px;

  white-space: nowrap;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


/* =========================================
   ICONOS
========================================= */

.menu-icon {
  width: 29px;

  height: 29px;

  color: #b28b16;

  stroke-width: 1.8;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


/* =========================================
   HOVER
========================================= */

.menu li a:hover {
  color: #b28b16;

  transform: translateY(-2px);
}


.menu li a:hover .menu-icon {
  color: #b28b16;

  transform: translateY(-2px);
}


/* =========================================
   LINEA DORADA
========================================= */

.menu li a::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 0;

  height: 2px;

  background: #d4af37;

  transform: translateX(-50%);

  transition:
    width 0.3s ease;
}


.menu li a:hover::after {
  width: 65%;
}


/* =========================================
   PAGINA ACTIVA
========================================= */

.menu li a.active {
  color: #b28b16;
}


.menu li a.active .menu-icon {
  color: #b28b16;
}


.menu li a.active::after {
  width: 65%;
}


/* =========================================
   BOTON ANTIGUO
========================================= */

.btn-apply {
  display: none;
}


/* =========================================
   SELECTOR DE IDIOMA
   FUERA DEL CUADRO PRINCIPAL
========================================= */

.language-dropdown {
  position: absolute;

  right: 18px;

  top: -27px;

  margin: 0;

  flex-shrink: 0;

  z-index: 1005;
}


/* =========================================
   BOTON PRINCIPAL IDIOMA
========================================= */

.language-current {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-width: 128px;

  padding: 10px 14px;

  background: #ffffff;

  border: 2px solid #d4af37;

  border-radius: 10px;

  color: #071a35;

  font-family: "Cormorant Garamond", serif;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.12);

  transition:
    all 0.25s ease;
}


.language-current:hover {
  background: #ffffff;

  border-color: #b28b16;

  color: #b28b16;

  box-shadow:
    0 7px 20px rgba(0, 0, 0, 0.16);

  transform: translateY(-1px);
}


/* =========================================
   TEXTO DEL IDIOMA
========================================= */

.language-current-text {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  line-height: 1.05;
}


/* =========================================
   CODIGO IDIOMA
========================================= */

.language-code {
  font-family: "Cinzel", serif;

  font-size: 19px;

  font-weight: 700;

  color: #071a35;
}


/* =========================================
   NOMBRE IDIOMA
========================================= */

.language-name {
  margin-top: 4px;

  font-size: 15px;

  letter-spacing: 0.3px;

  color: #666666;
}


/* =========================================
   FLECHA
========================================= */

.language-arrow {
  color: #071a35;

  font-size: 14px;

  line-height: 1;

  font-weight: 700;
}


/* =========================================
   MENU DESPLEGABLE
========================================= */

.language-options {
  position: absolute;

  top: calc(100% + 8px);

  right: 0;

  width: 170px;

  padding: 7px;

  background: #ffffff;

  border: 2px solid #d4af37;

  border-radius: 10px;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.15);

  opacity: 0;

  visibility: hidden;

  transform: translateY(-8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

  z-index: 1006;
}


/* =========================================
   MOSTRAR IDIOMAS
========================================= */

.language-dropdown:hover .language-options {
  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}


/* =========================================
   OPCIONES
========================================= */

.language-options button {
  display: flex;

  align-items: center;

  gap: 12px;

  width: 100%;

  padding: 11px 13px;

  border: 1px solid transparent;

  border-radius: 7px;

  background: transparent;

  color: #071a35;

  font-family: "Cormorant Garamond", serif;

  font-size: 16px;

  font-weight: 600;

  text-align: left;

  cursor: pointer;

  transition:
    all 0.2s ease;
}


/* =========================================
   CODIGO DE OPCION
========================================= */

.option-code {
  font-family: "Montserrat", sans-serif;

  font-size: 12px;

  font-weight: 800;

  color: #b28b16;
}


/* =========================================
   HOVER OPCION
========================================= */

.language-options button:hover {
  background: #faf6e8;

  border-color: #d4af37;

  color: #b28b16;
}


/* =========================================
   IDIOMA SELECCIONADO
========================================= */

.language-options button.selected {
  background: #faf6e8;

  border: 2px solid #d4af37;

  color: #b28b16;

  font-weight: 700;

  box-shadow:
    inset 0 0 0 1px rgba(
      212,
      175,
      55,
      0.08
    );
}


/* =========================================
   CHECK
========================================= */

.language-options button.selected::after {
  content: "✓";

  margin-left: auto;

  color: #b28b16;

  font-size: 17px;

  font-weight: 800;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1400px) {

  .navbar {
    padding: 16px 24px;
  }

  .menu {
    gap: 10px;

    margin-left: 15px;
  }

  .menu li a {
    min-width: 62px;

    font-size: 15px;
  }

  .menu-icon {
    width: 27px;

    height: 27px;
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1150px) {

  .navbar {
    margin-top: 38px;
  }

  .logo img {
    width: 85px;

    height: 85px;
  }

  .logo-text h1 {
    font-size: 46px;

    line-height: 44px;
  }

  .logo-text span {
    font-size: 17px;
  }

  .menu {
    gap: 5px;

    margin-left: 10px;

    margin-right: 8px;
  }

  .menu li a {
    min-width: 54px;

    font-size: 13px;
  }

  .menu-icon {
    width: 24px;

    height: 24px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 850px) {

  .navbar {
    padding: 12px 20px;

    margin-top: 18px;
  }

  .menu {
    display: none;
  }

  .language-dropdown {
    position: absolute;

    right: 15px;

    top: -27px;

    margin: 0;
  }

  .navbar::before {
    width: 65%;

    opacity: 0.25;
  }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

  .navbar {
    width: 94%;

    padding: 10px 15px;

    margin: 18px auto 10px;
  }

  .logo {
    gap: 8px;
  }

  .logo img {
    width: 65px;

    height: 65px;
  }

  .logo-text h1 {
    font-size: 34px;

    line-height: 34px;
  }

  .logo-text span {
    font-size: 14px;

    letter-spacing: 1px;
  }

  .language-dropdown {
    right: 8px;

    top: -25px;
  }

  .language-current {
    min-width: 95px;

    padding: 8px 9px;
  }

  .language-name {
    font-size: 13px;
  }

  .navbar::before {
    width: 70%;

    opacity: 0.20;
  }

}.footer{
    background:#071a35;
    color:white;
    text-align:center;
    padding:25px;
    font-size:15px;
}/* =========================================
   HERO
========================================= */

.hero {
    position: relative;

    width: 100%;
    min-height: 655px;
    height: 655px;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;

    overflow: hidden;
}


/* =========================================
   OSCURECER PARTE IZQUIERDA
========================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 19, 42, 0.98) 0%,
            rgba(3, 19, 42, 0.94) 28%,
            rgba(3, 19, 42, 0.75) 45%,
            rgba(3, 19, 42, 0.30) 62%,
            rgba(3, 19, 42, 0.00) 78%
        );
}


/* =========================================
   CONTENIDO
========================================= */

.hero-content {
    position: relative;

    z-index: 2;

    width: 650px;

    margin-left: 65px;

    color: #ffffff;

    text-align: left;
}


/* =========================================
   ETIQUETA SUPERIOR
========================================= */

.hero-tag {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 20px;

    margin-bottom: 25px;

    border: 1px solid #d4af37;

    border-radius: 30px;

    color: #f5c242;

    background: rgba(4, 20, 43, 0.30);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 21px;

    font-weight: 600;

    letter-spacing: 0.5px;
}


.cross {
    color: #f5c242;

    font-size: 25px;

    line-height: 1;
}


/* =========================================
   TITULO PRINCIPAL
========================================= */

.hero-content h1 {
    margin: 0 0 18px 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 70px;

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -1px;

    text-shadow:
        0 4px 15px rgba(0, 0, 0, 0.60);
}


/* =========================================
   SUBTITULO
========================================= */

.hero-content h2 {
    margin: 0 0 22px 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 35px;

    font-weight: 600;

    line-height: 1.25;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.60);
}


.hero-content h2 span {
    color: #f2b632;
}


/* =========================================
   DESCRIPCION
========================================= */

.hero-content p {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.55;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.70);
}


/* =========================================
   BOTONES
========================================= */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 34px;
}


/* =========================================
   BOTON PRINCIPAL
========================================= */

.btn-primary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    min-width: 225px;

    padding: 18px 28px;

    background: #f5b82e;

    color: #071a35;

    border: 2px solid #f5b82e;

    border-radius: 7px;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 20px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.btn-primary:hover {
    transform: translateY(-3px);

    background: #ffc94f;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.30);
}


.arrow {
    font-size: 30px;

    line-height: 1;
}


/* =========================================
   BOTON SECUNDARIO
========================================= */

.btn-secondary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 245px;

    padding: 18px 28px;

    background: transparent;

    color: #ffffff;

    border: 2px solid #ffffff;

    border-radius: 7px;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 20px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}


.btn-secondary:hover {
    transform: translateY(-3px);

    background: #ffffff;

    color: #071a35;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .hero {
        min-height: 600px;

        height: 600px;

        background-position: 58% center;
    }


    .hero-content {
        width: 570px;

        margin-left: 45px;
    }


    .hero-content h1 {
        font-size: 58px;
    }


    .hero-content h2 {
        font-size: 29px;
    }


    .hero-content p {
        font-size: 19px;
    }

}


/* =========================================
   TABLET PEQUEÑA
========================================= */

@media (max-width: 850px) {

    .hero {
        min-height: 620px;

        height: 620px;

        align-items: flex-end;

        padding-bottom: 50px;

        background-position: 65% center;
    }


    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 19, 42, 0.95) 0%,
                rgba(3, 19, 42, 0.75) 55%,
                rgba(3, 19, 42, 0.35) 100%
            );
    }


    .hero-content {
        width: 90%;

        margin-left: 30px;
    }


    .hero-content h1 {
        font-size: 48px;
    }


    .hero-content h2 {
        font-size: 26px;
    }


    .hero-content p {
        font-size: 18px;
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

    .hero {
        min-height: 650px;

        height: 650px;

        padding: 35px 20px;

        align-items: flex-end;

        background-position: 65% center;
    }


    .hero-content {
        width: 100%;

        margin-left: 0;
    }


    .hero-tag {
        font-size: 15px;

        padding: 8px 15px;

        margin-bottom: 18px;
    }


    .hero-content h1 {
        font-size: 42px;

        line-height: 1.05;
    }


    .hero-content h2 {
        font-size: 23px;

        line-height: 1.25;
    }


    .hero-content p {
        font-size: 17px;

        line-height: 1.45;
    }


    .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 25px;
    }


    .btn-primary,
    .btn-secondary {
        width: 100%;

        min-width: 0;
    }

}.values{

    background:#071a35;

    display:flex;

    justify-content:space-around;

    align-items:center;

    padding:28px 60px;

    color:white;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.value{

    display:flex;

    align-items:center;

    gap:18px;

    width:20%;

    padding:0 15px;

    border-right:1px solid rgba(255,255,255,.15);

}

.value:last-child{

    border-right:none;

}

.value-icon{

    font-size:54px;

    color:#d4af37;

    min-width:54px;

}

.value h3{

    color:#ffffff;

    font-size:24px;

    font-weight:700;

    margin-bottom:6px;

    text-transform:uppercase;

}

.value p{

    color:#f0f0f0;

    font-size:16px;

    line-height:1.5;

}

.value:hover .value-icon{

    transform:scale(1.15);

    transition:.3s;

}

.value:hover h3{

    color:#d4af37;

}.verse-banner{

    width:100%;

    background:#071a35;

}

.verse-banner-image{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

}.about-menu{
  position:relative;
  overflow:hidden;
  padding:72px 3.2% 78px;
  background:linear-gradient(135deg,#fff 0%,#f7f9fc 58%,#eef3f8 100%);
  color:#071a35;
}
.about-menu::before{content:"";position:absolute;left:0;top:0;width:7px;height:100%;background:#d4af37}
.about-menu-head{max-width:1420px;margin:0 auto 38px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.about-menu-copy{text-align:left}
.about-menu h4{color:#b28b16;font-size:14px;font-weight:800;letter-spacing:4px;text-transform:uppercase;margin-bottom:12px}
.about-menu h2{color:#071a35;font-size:56px;line-height:1.05;margin-bottom:12px;font-family:"Cinzel",serif}
.about-menu .about-tagline{font-family:"Cormorant Garamond",serif;color:#b28b16;font-size:25px;font-weight:700;margin:0 0 18px}
.about-menu .about-description{max-width:760px;margin:0;color:#39475c;font-size:17px;line-height:1.75}
.about-menu-visual{position:relative;min-height:330px;border-radius:22px;overflow:hidden;box-shadow:0 22px 55px rgba(7,26,53,.18);border:1px solid rgba(212,175,55,.45)}
.about-menu-visual img{width:100%;height:100%;min-height:330px;display:block;object-fit:cover}
.about-quote{position:absolute;left:11%;right:11%;top:50%;transform:translateY(-50%);padding:28px 32px;background:rgba(255,255,255,.91);border-left:4px solid #d4af37;text-align:center;box-shadow:0 15px 35px rgba(0,0,0,.12)}
.about-quote strong{display:block;font-family:"Cinzel",serif;font-size:24px;line-height:1.25;font-style:italic;color:#071a35}
.about-quote span{display:block;margin-top:13px;font-size:12px;letter-spacing:2px;font-weight:800;color:#8b6c12}
.about-grid{max-width:1420px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.about-card{background:#fff;border:1px solid #d8e0ea;border-radius:16px;padding:28px 25px 24px;min-height:285px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 10px 28px rgba(7,26,53,.07);transition:.3s ease}
.about-card:hover{transform:translateY(-7px);border-color:#d4af37;box-shadow:0 18px 40px rgba(7,26,53,.13)}
.about-icon{width:54px;height:54px;padding:14px;border-radius:50%;background:#071a35;color:#d4af37;font-size:26px;margin-bottom:18px}
.about-card h3{color:#071a35;font-family:"Cinzel",serif;font-size:24px;line-height:1.25;margin-bottom:10px}
.about-card p{color:#5a6574;font-size:15px;line-height:1.65;margin:0 0 18px;flex:1}
.about-card-link,.about-card a{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:auto;padding:11px 18px;background:#071a35;color:#fff;border:1px solid #071a35;border-radius:8px;text-decoration:none;font-family:"Cormorant Garamond",serif;font-size:18px;font-weight:700;cursor:pointer;transition:.25s ease}
.about-card-link:hover,.about-card a:hover{background:#d4af37;color:#071a35;border-color:#d4af37;transform:translateY(-2px)}
.about-page{max-width:1420px;margin:0 auto;padding:72px 3.2%;display:grid;grid-template-columns:1fr;gap:35px;background:#fff}
.about-page-content{max-width:980px;margin:0 auto;padding:48px;border:1px solid #d8e0ea;border-radius:20px;box-shadow:0 15px 40px rgba(7,26,53,.08);position:relative}
.about-page-content::before{content:"";display:block;width:65px;height:4px;background:#d4af37;margin-bottom:18px}
.about-page-content>span{display:inline-block;color:#b28b16;font-size:13px;font-weight:800;letter-spacing:3px;margin-bottom:12px}
.about-page-content h2{font-family:"Cinzel",serif;color:#071a35;font-size:46px;line-height:1.15;margin-bottom:22px}
.about-page-content h3{font-family:"Cinzel",serif;color:#071a35;font-size:25px;margin:28px 0 12px}
.about-page-content p{color:#4d5968;font-size:17px;line-height:1.85;margin:0 0 15px}
.about-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:24px;padding:13px 22px;background:#071a35;color:#fff;border:1px solid #071a35;border-radius:8px;font-family:"Cormorant Garamond",serif;font-size:18px;font-weight:700;cursor:pointer;transition:.25s ease}
.about-btn:hover{background:#d4af37;color:#071a35;border-color:#d4af37;transform:translateY(-2px)}
.mission-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0}
.mission-pillar{background:#f7f8fa;border:1px solid rgba(212,175,55,.45);border-radius:14px;padding:24px 18px;text-align:center;transition:.3s ease}
.mission-pillar:hover{transform:translateY(-5px);border-color:#d4af37;box-shadow:0 12px 28px rgba(0,0,0,.10)}
.mission-pillar-icon{width:55px;height:55px;margin:0 auto 15px;display:flex;align-items:center;justify-content:center;background:#071a35;color:#d4af37;border-radius:50%;font-size:22px}
.mission-pillar h3{font-size:21px;margin:0 0 10px}.mission-pillar p{font-size:15px;line-height:1.65;margin:0}
@media(max-width:1050px){.about-menu-head{grid-template-columns:1fr}.about-menu h2{font-size:45px}.about-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.about-menu{padding:55px 20px}.about-menu h2{font-size:36px}.about-menu .about-tagline{font-size:21px}.about-grid{grid-template-columns:1fr}.about-page{padding:45px 18px}.about-page-content{padding:28px 22px}.about-page-content h2{font-size:34px}.mission-pillars{grid-template-columns:1fr}.about-menu-visual,.about-menu-visual img{min-height:280px}.about-quote{left:7%;right:7%;padding:20px}.about-quote strong{font-size:20px}}
/* =========================================================
   WHY CHOOSE SECTION
========================================================= */

.whychoose {

    display: grid;

    grid-template-columns: 2fr 1fr 1.5fr;

    gap: 50px;

    padding: 100px 80px;

    background: #071a35;

    color: #fff;

}


/* =========================================================
   LEFT COLUMN
========================================================= */

.why-left span {

    color: #d4af37;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.why-left h2 {

    font-family: "Cinzel", serif;

    font-size: 56px;

    line-height: 1.1;

    margin: 20px 0 45px;

}


/* =========================================================
   FEATURES
========================================================= */

.feature {

    display: flex;

    align-items: flex-start;

    gap: 22px;

    margin-bottom: 35px;

}


.feature-icon {

    font-size: 60px;

    color: #d4af37;

    min-width: 60px;

    margin-top: 5px;

}


.feature h3 {

    color: #d4af37;

    font-size: 28px;

    margin-bottom: 8px;

}


.feature p {

    color: #d7d7d7;

    font-size: 18px;

    line-height: 1.8;

}


/* =========================================================
   CENTER STATISTICS
========================================================= */

.why-center {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

}


.stat {

    background: #0b2348;

    border: 1px solid rgba(212,175,55,.35);

    border-radius: 18px;

    text-align: center;

    padding: 40px 25px;

    transition: .35s;

}


.stat:hover {

    transform: translateY(-8px);

    border-color: #d4af37;

    box-shadow: 0 20px 40px rgba(0,0,0,.40);

}


.stat-icon {

    font-size: 60px;

    color: #d4af37;

    margin-bottom: 18px;

}


.stat h1 {

    color: #d4af37;

    font-size: 54px;

    margin-bottom: 10px;

}


.stat p {

    color: #fff;

    font-size: 20px;

}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.why-right {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

}


.chapel-image {

    width: 100%;

    height: 520px;

    object-fit: cover;

    border-radius: 18px;

    border: 3px solid #d4af37;

    display: block;

    box-shadow: 0 20px 45px rgba(0,0,0,.45);

    transition: .4s;

}


.chapel-image:hover {

    transform: scale(1.02);

}


/* =========================================================
   EXPLORE OUR MISSION LINK
========================================================= */

.mission-link {

    display: block;

    width: 82%;

    margin-top: -75px;

    position: relative;

    z-index: 5;

    padding: 18px;

    background: #071a35;

    color: #fff;

    border: 2px solid #d4af37;

    border-radius: 12px;

    text-align: center;

    text-decoration: none;

    font-size: 20px;

    font-weight: 700;

    cursor: pointer;

    transition: .35s;

}


.mission-link:hover {

    background: #d4af37;

    color: #071a35;

    transform: translateY(-3px);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .whychoose {

        grid-template-columns: 1fr;

    }


    .why-center {

        grid-template-columns: repeat(2, 1fr);

    }


    .why-right {

        max-width: 850px;

        width: 100%;

        margin: 0 auto;

    }

}


@media (max-width: 768px) {

    .whychoose {

        padding: 60px 25px;

        gap: 35px;

    }


    .why-left h2 {

        font-size: 40px;

    }


    .feature {

        gap: 15px;

    }


    .feature-icon {

        font-size: 42px;

        min-width: 42px;

    }


    .stat-icon {

        font-size: 42px;

    }


    .stat h1 {

        font-size: 42px;

    }


    .chapel-image {

        height: 400px;

    }


    .mission-link {

        width: 90%;

        font-size: 17px;

        padding: 15px;

        margin-top: -65px;

    }

}


@media (max-width: 500px) {

    .why-center {

        grid-template-columns: 1fr;

    }


    .why-left h2 {

        font-size: 34px;

    }


    .mission-link {

        width: 92%;

    }

}/* =========================================================
   PRESIDENT HOME SECTION
========================================================= */

.president-section {

    padding: 100px 80px;

    background: #f8f9fb;

}


.president-content {

    max-width: 1000px;

    margin: 0 auto;

    padding: 65px 70px;

    background: #ffffff;

    border: 2px solid rgba(212,175,55,.55);

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 20px 45px rgba(0,0,0,.10);

}


.president-eyebrow {

    display: block;

    color: #d4af37;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 18px;

}


.president-content h2 {

    color: #071a35;

    font-family: "Cinzel", serif;

    font-size: 48px;

    line-height: 1.25;

    margin-bottom: 20px;

}


.president-line {

    width: 90px;

    height: 3px;

    margin: 25px auto;

    background: #d4af37;

}


.president-content > p {

    max-width: 800px;

    margin: 0 auto 30px;

    color: #555;

    font-size: 19px;

    line-height: 1.9;

}


.president-read-link {

    display: inline-block;

    margin-top: 10px;

    padding: 16px 32px;

    background: #071a35;

    color: #ffffff;

    border: 2px solid #d4af37;

    border-radius: 10px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .35s;

}


.president-read-link:hover {

    background: #d4af37;

    color: #071a35;

    transform: translateY(-3px);

}


@media (max-width: 900px) {

    .president-section {
        padding: 70px 30px;
    }

    .president-content {
        padding: 50px 40px;
    }

    .president-content h2 {
        font-size: 40px;
    }

}


@media (max-width: 600px) {

    .president-section {
        padding: 55px 20px;
    }

    .president-content {
        padding: 40px 25px;
        border-radius: 15px;
    }

    .president-eyebrow {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .president-content h2 {
        font-size: 32px;
    }

    .president-content > p {
        font-size: 17px;
        line-height: 1.8;
    }

    .president-read-link {
        width: 100%;
        text-align: center;
    }

}.library{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    padding:100px 70px;

    background:#ffffff;

    align-items:center;

}

.library-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.library-content span{

    color:#d4af37;

    font-weight:bold;

    letter-spacing:2px;

}

.library-content h2{

    color:#071a35;

    font-size:44px;

    margin:18px 0;

}

.library-content p{

    color:#666;

    font-size:18px;

    line-height:1.8;

    margin-bottom:25px;

}

.library-content ul{

    list-style:none;

    padding:0;

    margin-bottom:35px;

}

.library-content li{

    margin-bottom:15px;

    color:#333;

    font-size:17px;

}

.library-content button{

    background:#071a35;

    color:white;

    border:none;

    padding:18px 35px;

    border-radius:8px;

    cursor:pointer;

    font-size:17px;

    transition:.3s;

}

.library-content button:hover{

    background:#d4af37;

    color:#071a35;

}/* =========================================================
   PROGRAMS PAGE
========================================================= */

.programs {
    padding: 0;
    background: #f7f9fc;
}


/* =========================================================
   PROGRAMS HERO
========================================================= */

.program-hero {

    position: relative;

    min-height: 720px;

    background:
        linear-gradient(
            90deg,
            rgba(5, 20, 45, 0.92) 0%,
            rgba(5, 20, 45, 0.78) 38%,
            rgba(5, 20, 45, 0.45) 70%,
            rgba(5, 20, 45, 0.30) 100%
        ),
        url("/assets/programs-hero-DuwSATuY.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    align-items: center;

    padding: 120px 8% 90px;

    color: white;
}


.program-overlay {

    max-width: 720px;

    color: white;

}


/* =========================================================
   HERO SUBTITLE
========================================================= */

.hero-subtitle {

    display: inline-block;

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 18px;

}


/* =========================================================
   HERO TITLE
========================================================= */

.program-overlay h1 {

    font-family: "Cinzel", serif;

    font-size: 84px;

    line-height: 1.1;

    color: white;

    margin: 0 0 18px;

}


/* =========================================================
   GOLD LINE
========================================================= */

.hero-line {

    width: 220px;

    height: 3px;

    background: #d4af37;

    margin: 25px 0;

}


/* =========================================================
   HERO SECONDARY TITLE
========================================================= */

.program-overlay h3 {

    font-family: "Cinzel", serif;

    font-size: 44px;

    line-height: 1.3;

    color: #d4af37;

    margin: 0 0 25px;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.program-overlay p {

    max-width: 620px;

    color: #f5f5f5;

    font-size: 20px;

    line-height: 1.9;

    margin: 0 0 45px;

}


/* =========================================================
   DEGREE TABS
========================================================= */

.program-tabs {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

}


.program-tabs button {

    padding: 17px 30px;

    background: white;

    color: #071a35;

    border: 2px solid #d4af37;

    border-radius: 12px;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;

}


.program-tabs button:hover {

    transform: translateY(-4px);

    background: #071a35;

    color: #d4af37;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .20);

}


.program-tabs button.active {

    background: #071a35;

    color: #d4af37;

    border-color: #d4af37;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);

}


/* =========================================================
   PROGRAM BODY
========================================================= */

.program-body {

    position: relative;

    z-index: 5;

    background: #f8f8f8;

    padding: 55px 0 90px;

}


/* =========================================================
   PROGRAM CONTENT
========================================================= */

.program-content {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 24px;

    box-sizing: border-box;

}


/* =========================================================
   DEGREE CARD

   IMPORTANT:
   No background, no border and no overflow hidden.
   This allows the blue header and white content
   to remain visually separated.
========================================================= */

.degree-card {

    background: transparent;

    border: none;

    border-radius: 0;

    margin: 0 0 24px;

    padding: 0;

    overflow: visible;

    box-shadow: none;

}


/* =========================================================
   BLUE DEGREE HEADER
========================================================= */

.degree-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    box-sizing: border-box;

    background: #071a35;

    color: white;

    padding: 20px 28px;

    border: 2px solid #d4af37;

    border-radius: 12px;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    margin: 0 0 16px;

    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.degree-header:hover {

    background: #0d2d5a;

    transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);

}


/* =========================================================
   WHITE PROGRAM CONTENT

   This is now visually separated from the blue header.
========================================================= */

.degree-body {

    width: 100%;

    box-sizing: border-box;

    background: #ffffff;

    color: #555;

    padding: 30px 34px;

    border: 2px solid #d4af37;

    border-radius: 12px;

    margin: 0 0 24px;

    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);

}


/* =========================================================
   PROGRAM BODY TITLES
========================================================= */

.degree-body h4 {

    color: #071a35;

    font-size: 24px;

    margin: 24px 0 14px;

    font-weight: 700;

}


.degree-body h4:first-child {

    margin-top: 0;

}


/* =========================================================
   PROGRAM BODY TEXT
========================================================= */

.degree-body p {

    color: #555;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 22px;

}


/* =========================================================
   PROGRAM LISTS
========================================================= */

.degree-body ul {

    margin: 0 0 25px;

    padding-left: 25px;

}


.degree-body li {

    color: #555;

    font-size: 16px;

    line-height: 1.7;

    margin-bottom: 9px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .program-hero {

        min-height: auto;

        padding: 100px 30px 70px;

    }


    .program-overlay {

        max-width: 100%;

    }


    .program-overlay h1 {

        font-size: 52px;

    }


    .program-overlay h3 {

        font-size: 30px;

    }


    .program-overlay p {

        font-size: 18px;

        line-height: 1.7;

    }


    .program-tabs {

        flex-direction: column;

        align-items: stretch;

    }


    .program-tabs button {

        width: 100%;

    }


    .program-body {

        padding: 40px 0 70px;

    }


    .program-content {

        padding: 0 18px;

    }


    .degree-header {

        padding: 17px 20px;

        font-size: 16px;

    }


    .degree-body {

        padding: 25px 22px;

    }


    .degree-body h4 {

        font-size: 21px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

    .program-hero {

        padding: 85px 20px 55px;

        background-position: center;

    }


    .program-overlay h1 {

        font-size: 40px;

    }


    .program-overlay h3 {

        font-size: 24px;

    }


    .hero-subtitle {

        font-size: 12px;

        letter-spacing: 3px;

    }


    .program-overlay p {

        font-size: 16px;

    }


    .degree-header {

        font-size: 15px;

        padding: 16px;

    }


    .degree-body {

        padding: 22px 18px;

    }

}
/* =========================================
   BOTÓN VOLVER AL MENÚ
   ========================================= */

.program-back-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 22px;
  margin-bottom: 22px;

  padding: 10px 22px;

  background: rgba(7, 28, 58, 0.88);

  border: 1px solid #d4af37;
  border-radius: 30px;

  color: #ffffff;

  font-family: inherit;
  font-size: 15px;
  font-weight: 600;

  letter-spacing: 0.3px;

  cursor: pointer;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.program-back-arrow {
  font-size: 19px;
  line-height: 1;

  transition:
    transform 0.3s ease;
}

.program-back-button:hover {
  background: #d4af37;

  color: #071c3a;

  border-color: #f1d56a;

  transform: translateY(-2px);

  box-shadow:
    0 6px 18px rgba(212, 175, 55, 0.25);
}

.program-back-button:hover .program-back-arrow {
  transform: translateX(-4px);
}

.program-back-button:active {
  transform: translateY(0);
}/* =========================================================
   RESEARCH PAGE
========================================================= */

.research-page {
    background: #f7f8fa;
    color: #071a35;
}


/* =========================================================
   RESEARCH HERO
========================================================= */

.research-hero {

    min-height: 620px;

    display: flex;

    align-items: center;

    padding: 110px 8%;

    background:
        linear-gradient(
            90deg,
            rgba(5, 20, 45, .92) 0%,
            rgba(5, 20, 45, .78) 45%,
            rgba(5, 20, 45, .45) 100%
        ),
        url("/assets/programs-hero-DuwSATuY.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.research-hero-overlay {

    max-width: 760px;

    color: white;

}


.research-eyebrow {

    display: inline-block;

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 18px;

}


.research-hero h1 {

    font-family: "Cinzel", serif;

    font-size: 72px;

    line-height: 1.1;

    color: white;

    margin: 0 0 20px;

}


.research-line {

    width: 210px;

    height: 3px;

    background: #d4af37;

    margin: 25px 0;

}


.research-hero h2 {

    font-family: "Cinzel", serif;

    font-size: 38px;

    line-height: 1.35;

    color: #d4af37;

    margin-bottom: 25px;

}


.research-hero p {

    max-width: 650px;

    font-size: 19px;

    line-height: 1.9;

    color: #f4f4f4;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.research-intro {

    max-width: 900px;

    margin: 0 auto;

    padding: 90px 25px 60px;

    text-align: center;

}


.research-intro > span {

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

}


.research-intro h2 {

    font-family: "Cinzel", serif;

    font-size: 48px;

    color: #071a35;

    margin: 18px 0 22px;

}


.research-intro p {

    color: #555;

    font-size: 19px;

    line-height: 1.9;

}


/* =========================================================
   RESEARCH AREAS
========================================================= */

.research-areas {

    max-width: 1200px;

    margin: 0 auto;

    padding: 30px 25px 100px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}


.research-card {

    background: white;

    padding: 38px 32px;

    border: 1px solid rgba(212, 175, 55, .45);

    border-radius: 16px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .07);

    transition: .35s ease;

}


.research-card:hover {

    transform: translateY(-7px);

    border-color: #d4af37;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .13);

}


.research-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #071a35;

    color: #d4af37;

    border-radius: 50%;

    font-size: 25px;

    margin-bottom: 22px;

}


.research-card h3 {

    font-family: "Cinzel", serif;

    font-size: 23px;

    color: #071a35;

    margin-bottom: 15px;

}


.research-card p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   SCHOLARLY ACTIVITIES
========================================================= */

.research-activities {

    background: #071a35;

    padding: 90px 25px 100px;

}


.research-activities-header {

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

}


.research-activities-header span {

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

}


.research-activities-header h2 {

    font-family: "Cinzel", serif;

    color: white;

    font-size: 48px;

    margin: 18px 0;

}


.research-activities-header p {

    color: #d9dee8;

    font-size: 18px;

    line-height: 1.8;

}


.research-activity-grid {

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}


.research-activity {

    padding: 30px;

    border: 1px solid rgba(212, 175, 55, .55);

    border-radius: 12px;

    background: rgba(255, 255, 255, .04);

}


.research-activity h3 {

    color: #d4af37;

    font-family: "Cinzel", serif;

    font-size: 21px;

    margin-bottom: 15px;

}


.research-activity p {

    color: #d9dee8;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   CALL TO ACTION
========================================================= */

.research-cta {

    text-align: center;

    padding: 90px 25px;

    background: #f7f8fa;

}


.research-cta span {

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

}


.research-cta h2 {

    font-family: "Cinzel", serif;

    color: #071a35;

    font-size: 48px;

    margin: 18px 0;

}


.research-cta p {

    max-width: 750px;

    margin: 0 auto 30px;

    color: #555;

    font-size: 18px;

    line-height: 1.8;

}


.research-cta button {

    background: #071a35;

    color: white;

    border: 2px solid #d4af37;

    padding: 16px 32px;

    border-radius: 10px;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}


.research-cta button:hover {

    background: #d4af37;

    color: #071a35;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .research-areas {

        grid-template-columns: repeat(2, 1fr);

    }


    .research-activity-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .research-hero h1 {

        font-size: 55px;

    }

}


@media (max-width: 700px) {

    .research-hero {

        min-height: 560px;

        padding: 90px 25px;

    }


    .research-hero h1 {

        font-size: 42px;

    }


    .research-hero h2 {

        font-size: 28px;

    }


    .research-hero p {

        font-size: 17px;

    }


    .research-intro h2 {

        font-size: 36px;

    }


    .research-areas {

        grid-template-columns: 1fr;

    }


    .research-activity-grid {

        grid-template-columns: 1fr;

    }


    .research-activities-header h2 {

        font-size: 36px;

    }


    .research-cta h2 {

        font-size: 36px;

    }

}
/* =========================================================
   RETURN TO MENU
========================================================= */

.research-return {

    text-align: center;

    padding: 60px 25px 80px;

    background: #f7f8fa;

}


.research-return button {

    background: #071a35;

    color: white;

    border: 2px solid #d4af37;

    padding: 16px 32px;

    border-radius: 10px;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}


.research-return button:hover {

    background: #d4af37;

    color: #071a35;

    transform: translateY(-3px);

}/* =========================================================
   LIBRARY PAGE
========================================================= */

.library-page {
    background: #f7f8fa;
    color: #071a35;
}


/* =========================================================
   LIBRARY HERO
========================================================= */

.library-hero {

    min-height: 620px;

    display: flex;

    align-items: center;

    padding: 110px 8%;

    background:
        linear-gradient(
            90deg,
            rgba(5, 20, 45, .93) 0%,
            rgba(5, 20, 45, .80) 45%,
            rgba(5, 20, 45, .45) 100%
        ),
        url("/assets/programs-hero-DuwSATuY.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.library-hero-overlay {

    max-width: 760px;

    color: white;

}


.library-eyebrow {

    display: inline-block;

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 18px;

}


.library-hero h1 {

    font-family: "Cinzel", serif;

    font-size: 68px;

    line-height: 1.12;

    color: white;

    margin: 0 0 20px;

}


.library-line {

    width: 210px;

    height: 3px;

    background: #d4af37;

    margin: 25px 0;

}


.library-hero h2 {

    font-family: "Cinzel", serif;

    font-size: 38px;

    line-height: 1.35;

    color: #d4af37;

    margin-bottom: 25px;

}


.library-hero p {

    max-width: 650px;

    font-size: 19px;

    line-height: 1.9;

    color: #f4f4f4;

}


/* =========================================================
   SEARCH
========================================================= */

.library-search-section {

    text-align: center;

    max-width: 950px;

    margin: 0 auto;

    padding: 90px 25px 70px;

}


.library-search-section > span {

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

}


.library-search-section h2 {

    font-family: "Cinzel", serif;

    font-size: 48px;

    color: #071a35;

    margin: 18px 0;

}


.library-search-section p {

    color: #555;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 35px;

}


.library-search {

    display: flex;

    max-width: 800px;

    margin: 0 auto;

    background: white;

    border: 2px solid #d4af37;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);

}


.library-search input {

    flex: 1;

    border: none;

    outline: none;

    padding: 18px 22px;

    font-size: 17px;

    color: #071a35;

}


.library-search input::placeholder {

    color: #999;

}


.library-search button {

    border: none;

    background: #071a35;

    color: white;

    padding: 0 32px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}


.library-search button:hover {

    background: #d4af37;

    color: #071a35;

}


/* =========================================================
   LIBRARY CATEGORIES
========================================================= */

.library-categories {

    max-width: 1200px;

    margin: 0 auto;

    padding: 30px 25px 100px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}


.library-card {

    background: white;

    padding: 38px 32px;

    border: 1px solid rgba(212, 175, 55, .45);

    border-radius: 16px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .07);

    transition: .35s ease;

}


.library-card:hover {

    transform: translateY(-7px);

    border-color: #d4af37;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .13);

}


.library-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #071a35;

    color: #d4af37;

    border-radius: 50%;

    font-size: 24px;

    margin-bottom: 22px;

}


.library-card h3 {

    font-family: "Cinzel", serif;

    font-size: 22px;

    color: #071a35;

    margin-bottom: 15px;

}


.library-card p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   LIBRARY SERVICES
========================================================= */

.library-services {

    background: #071a35;

    padding: 90px 25px 100px;

}


.library-services-header {

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

}


.library-services-header span {

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

}


.library-services-header h2 {

    font-family: "Cinzel", serif;

    color: white;

    font-size: 48px;

    margin: 18px 0;

}


.library-services-header p {

    color: #d9dee8;

    font-size: 18px;

    line-height: 1.8;

}


.library-services-grid {

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}


.library-service {

    padding: 30px;

    border: 1px solid rgba(212, 175, 55, .55);

    border-radius: 12px;

    background: rgba(255, 255, 255, .04);

}


.library-service h3 {

    color: #d4af37;

    font-family: "Cinzel", serif;

    font-size: 20px;

    margin-bottom: 15px;

}


.library-service p {

    color: #d9dee8;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   RETURN TO MENU
========================================================= */

.library-return {

    text-align: center;

    padding: 60px 25px 80px;

    background: #f7f8fa;

}


.library-return button {

    background: #071a35;

    color: white;

    border: 2px solid #d4af37;

    padding: 16px 32px;

    border-radius: 10px;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}


.library-return button:hover {

    background: #d4af37;

    color: #071a35;

    transform: translateY(-3px);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .library-categories {

        grid-template-columns: repeat(2, 1fr);

    }


    .library-services-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .library-hero h1 {

        font-size: 54px;

    }

}


@media (max-width: 700px) {

    .library-hero {

        min-height: 560px;

        padding: 90px 25px;

    }


    .library-hero h1 {

        font-size: 42px;

    }


    .library-hero h2 {

        font-size: 28px;

    }


    .library-hero p {

        font-size: 17px;

    }


    .library-search-section h2 {

        font-size: 36px;

    }


    .library-search {

        flex-direction: column;

    }


    .library-search input {

        width: 100%;

        box-sizing: border-box;

    }


    .library-search button {

        padding: 16px;

    }


    .library-categories {

        grid-template-columns: 1fr;

    }


    .library-services-grid {

        grid-template-columns: 1fr;

    }


    .library-services-header h2 {

        font-size: 36px;

    }

}.convenios-page{background:#f7f8fa;color:#071a35}
.convenios-hero{min-height:570px;display:flex;align-items:center;padding:105px 8%;background:linear-gradient(90deg,rgba(5,20,45,.94),rgba(5,20,45,.78) 48%,rgba(5,20,45,.42)),url("/assets/programs-hero-DuwSATuY.jpg") center/cover no-repeat}
.convenios-hero-overlay{max-width:820px;color:#fff}
.convenios-eyebrow,.convenios-intro>span,.convenios-purpose-content>span,.convenios-closing>span{display:inline-block;color:#d4af37;font-size:14px;font-weight:700;letter-spacing:4px;margin-bottom:16px}
.convenios-hero h1{font-family:"Cinzel",serif;font-size:68px;line-height:1.1;color:#fff;margin:0 0 18px}
.convenios-line{width:190px;height:3px;background:#d4af37;margin:24px 0}
.convenios-hero h2{font-family:"Cinzel",serif;font-size:34px;line-height:1.35;color:#d4af37;margin:0 0 22px}
.convenios-hero p{max-width:730px;font-size:18px;line-height:1.85;color:#f4f4f4}
.convenios-intro{max-width:930px;margin:0 auto;padding:85px 25px 55px;text-align:center}
.convenios-intro h2,.convenios-purpose h2,.convenios-closing h2{font-family:"Cinzel",serif;color:#071a35}
.convenios-intro h2{font-size:46px;margin:10px 0 20px}
.convenios-intro p{color:#555;font-size:18px;line-height:1.9;margin:0}
.convenios-partners{max-width:1180px;margin:0 auto;padding:25px 25px 90px;display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.convenio-card{background:#fff;border:1px solid rgba(212,175,55,.45);border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.08);transition:.3s ease}
.convenio-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.13);border-color:#d4af37}
.convenio-logo-wrap{height:260px;background:#fff;display:flex;align-items:center;justify-content:center;padding:22px;border-bottom:1px solid #eee}
.convenio-logo-wrap img{max-width:82%;max-height:220px;object-fit:contain}
.convenio-card-content{padding:32px 34px 38px}
.convenio-number{color:#d4af37;font-weight:800;letter-spacing:3px;font-size:13px}
.convenio-card h3{font-family:"Cinzel",serif;font-size:26px;margin:10px 0 15px;color:#071a35}
.convenio-card p{color:#5c6470;font-size:16px;line-height:1.8}
.convenio-card ul{margin:18px 0 22px;padding-left:21px;color:#4f5865}
.convenio-card li{margin:7px 0;line-height:1.55}
.convenio-card a{display:inline-block;color:#071a35;font-weight:800;text-decoration:none;border-bottom:2px solid #d4af37;padding-bottom:3px}
.convenios-purpose{background:#071a35;padding:90px 25px}
.convenios-purpose-content{max-width:1100px;margin:0 auto;text-align:center}
.convenios-purpose h2{color:#fff;font-size:44px;margin:8px 0 20px}
.convenios-purpose-content>p{max-width:850px;margin:0 auto;color:#d9dee8;font-size:18px;line-height:1.9}
.purpose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:45px;text-align:left}
.purpose-grid>div{border:1px solid rgba(212,175,55,.35);border-radius:15px;padding:26px;background:rgba(255,255,255,.035)}
.purpose-grid strong{font-family:"Cinzel",serif;color:#d4af37;font-size:20px}
.purpose-grid p{color:#d9dee8;line-height:1.75;margin:12px 0 0}
.convenios-closing{max-width:900px;margin:0 auto;padding:80px 25px 95px;text-align:center}
.convenios-closing h2{font-size:40px;margin:8px 0 20px}
.convenios-closing p{color:#555;font-size:18px;line-height:1.9;margin:0}
@media(max-width:900px){.convenios-hero{min-height:520px;padding:85px 30px}.convenios-hero h1{font-size:52px}.convenios-hero h2{font-size:28px}.convenios-partners{grid-template-columns:1fr}.purpose-grid{grid-template-columns:1fr}.convenios-purpose h2{font-size:36px}}
@media(max-width:600px){.convenios-hero{padding:75px 20px 60px}.convenios-hero h1{font-size:40px}.convenios-hero h2{font-size:24px}.convenios-hero p{font-size:16px}.convenios-intro h2{font-size:34px}.convenio-card-content{padding:28px 24px 32px}.convenios-closing h2{font-size:32px}}
.admissions-page{background:#f7f8fa;color:#071a35}
.admissions-hero{min-height:570px;display:flex;align-items:center;padding:105px 8%;background:linear-gradient(90deg,rgba(5,20,45,.94),rgba(5,20,45,.78) 48%,rgba(5,20,45,.4)),url("/assets/chapel-DQnpDynu.jpg") center/cover no-repeat}
.admissions-hero-overlay{max-width:820px;color:#fff}.admissions-hero-overlay>span,.admissions-intro>span,.admissions-preparation-inner>span,.admissions-steps>span{display:inline-block;color:#d4af37;font-size:14px;font-weight:700;letter-spacing:4px;margin-bottom:16px}
.admissions-hero h1{font-family:"Cinzel",serif;font-size:68px;line-height:1.1;color:#fff;margin:0 0 18px}.admissions-line{width:190px;height:3px;background:#d4af37;margin:24px 0}.admissions-hero h2{font-family:"Cinzel",serif;font-size:34px;line-height:1.35;color:#d4af37;margin:0 0 22px}.admissions-hero p{max-width:730px;font-size:18px;line-height:1.85;color:#f4f4f4}
.admissions-primary{display:inline-block;margin-top:25px;background:#d4af37;color:#071a35;padding:14px 24px;border-radius:8px;font-weight:800;text-decoration:none}.admissions-intro{max-width:920px;margin:0 auto;padding:85px 25px 50px;text-align:center}.admissions-intro h2,.admissions-preparation h2,.admissions-steps h2{font-family:"Cinzel",serif}.admissions-intro h2{font-size:45px;margin:8px 0 20px}.admissions-intro p{color:#555;font-size:18px;line-height:1.9;margin:0}
.admissions-levels{max-width:1180px;margin:0 auto;padding:25px 25px 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.admission-level-card{background:#fff;border:1px solid rgba(212,175,55,.45);border-radius:18px;padding:34px;box-shadow:0 12px 30px rgba(0,0,0,.07);transition:.3s}.admission-level-card:hover{transform:translateY(-6px);border-color:#d4af37}.admission-icon{width:58px;height:58px;border-radius:50%;background:#071a35;color:#d4af37;display:flex;align-items:center;justify-content:center;margin-bottom:22px}.admission-level-card>span{color:#9a7b18;font-size:13px;font-weight:800;letter-spacing:2px}.admission-level-card h3{font-family:"Cinzel",serif;font-size:25px;margin:10px 0 14px}.admission-level-card p{color:#5d6570;line-height:1.8;font-size:16px;min-height:130px}.admission-link{display:inline-flex;align-items:center;gap:8px;color:#071a35;font-weight:800;text-decoration:none;border-bottom:2px solid #d4af37;padding-bottom:3px}
.admissions-preparation{background:#071a35;padding:90px 25px}.admissions-preparation-inner{max-width:1100px;margin:0 auto;text-align:center}.admissions-preparation h2{color:#fff;font-size:44px;margin:8px 0 20px}.admissions-preparation-inner>p{max-width:850px;margin:0 auto;color:#d9dee8;font-size:18px;line-height:1.9}.prep-points{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px;text-align:left}.prep-points>div{border:1px solid rgba(212,175,55,.35);border-radius:15px;padding:25px}.prep-points strong{color:#d4af37;font-family:"Cinzel",serif;font-size:19px}.prep-points p{color:#d9dee8;line-height:1.7;margin:10px 0 0}.admissions-steps{max-width:1100px;margin:0 auto;padding:85px 25px 100px;text-align:center}.admissions-steps h2{font-size:42px;margin:8px 0 40px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;text-align:left}.steps-grid>div{background:#fff;border-radius:15px;border:1px solid #e3e5e9;padding:28px}.steps-grid b{color:#d4af37;font-size:25px}.steps-grid h3{font-family:"Cinzel",serif;font-size:21px}.steps-grid p{color:#606773;line-height:1.7}
@media(max-width:900px){.admissions-hero{min-height:520px;padding:85px 30px}.admissions-hero h1{font-size:52px}.admissions-hero h2{font-size:28px}.admissions-levels,.prep-points,.steps-grid{grid-template-columns:1fr}.admission-level-card p{min-height:0}.admissions-preparation h2{font-size:36px}}
@media(max-width:600px){.admissions-hero{padding:75px 20px 60px}.admissions-hero h1{font-size:40px}.admissions-hero h2{font-size:24px}.admissions-hero p{font-size:16px}.admissions-intro h2{font-size:34px}.admissions-steps h2{font-size:32px}}
.admissions-program-list{background:#fff;padding:85px 25px 95px}.admissions-program-list-inner{max-width:1180px;margin:0 auto;text-align:center}.admissions-program-list-inner>span{display:inline-block;color:#d4af37;font-size:14px;font-weight:700;letter-spacing:4px;margin-bottom:16px}.admissions-program-list h2{font-family:"Cinzel",serif;font-size:42px;margin:8px 0 18px;color:#071a35}.admissions-program-list-inner>p{max-width:820px;margin:0 auto;color:#606773;font-size:17px;line-height:1.8}.career-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px;text-align:left}.career-columns>div{border-top:3px solid #d4af37;background:#f7f8fa;border-radius:12px;padding:25px}.career-columns h3{font-family:"Cinzel",serif;color:#071a35;font-size:20px;margin:0 0 17px}.career-columns ul{margin:0;padding-left:20px}.career-columns li{color:#59616c;line-height:1.55;margin-bottom:9px}
@media(max-width:900px){.career-columns{grid-template-columns:1fr}.admissions-program-list h2{font-size:36px}}
/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page {
    background: #f7f8fa;
    color: #071a35;
}


/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {

    min-height: 620px;

    display: flex;

    align-items: center;

    padding: 110px 8%;

    background:
        linear-gradient(
            90deg,
            rgba(5, 20, 45, .93) 0%,
            rgba(5, 20, 45, .80) 45%,
            rgba(5, 20, 45, .42) 100%
        ),
        url("/assets/programs-hero-DuwSATuY.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.contact-hero-overlay {

    max-width: 760px;

    color: white;

}


.contact-eyebrow {

    display: inline-block;

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 18px;

}


.contact-hero h1 {

    font-family: "Cinzel", serif;

    font-size: 72px;

    line-height: 1.1;

    color: white;

    margin: 0 0 20px;

}


.contact-line {

    width: 210px;

    height: 3px;

    background: #d4af37;

    margin: 25px 0;

}


.contact-hero h2 {

    font-family: "Cinzel", serif;

    font-size: 38px;

    line-height: 1.35;

    color: #d4af37;

    margin-bottom: 25px;

}


.contact-hero p {

    max-width: 650px;

    font-size: 19px;

    line-height: 1.9;

    color: #f4f4f4;

}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-information {

    max-width: 1200px;

    margin: 0 auto;

    padding: 80px 25px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

}


.contact-info-card {

    background: white;

    padding: 35px 25px;

    text-align: center;

    border: 1px solid rgba(212, 175, 55, .45);

    border-radius: 16px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .07);

    transition: .35s ease;

}


.contact-info-card:hover {

    transform: translateY(-7px);

    border-color: #d4af37;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .13);

}


.contact-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    background: #071a35;

    color: #d4af37;

    border-radius: 50%;

    font-size: 23px;

}


.contact-info-card h3 {

    font-family: "Cinzel", serif;

    color: #071a35;

    font-size: 20px;

    margin-bottom: 15px;

}


.contact-info-card p {

    color: #666;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form-section {

    background: #071a35;

    padding: 90px 25px 100px;

}


.contact-form-header {

    max-width: 850px;

    margin: 0 auto 50px;

    text-align: center;

}


.contact-form-header span {

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 4px;

}


.contact-form-header h2 {

    font-family: "Cinzel", serif;

    color: white;

    font-size: 48px;

    margin: 18px 0;

}


.contact-form-header p {

    color: #d9dee8;

    font-size: 18px;

    line-height: 1.8;

}


.contact-form {

    max-width: 900px;

    margin: 0 auto;

}


.contact-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px;

}


.contact-field {

    display: flex;

    flex-direction: column;

    margin-bottom: 22px;

}


.contact-field label {

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 9px;

}


.contact-field input,
.contact-field textarea,
.contact-field select {

    width: 100%;

    box-sizing: border-box;

    padding: 16px 18px;

    background: white;

    color: #071a35;

    border: 2px solid transparent;

    border-radius: 9px;

    outline: none;

    font-family: inherit;

    font-size: 16px;

    transition: .3s;

}


.contact-field textarea {

    resize: vertical;

    min-height: 150px;

}


.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {

    border-color: #d4af37;

}


.contact-field input::placeholder,
.contact-field textarea::placeholder {

    color: #999;

}


.contact-field select {

    appearance: auto;

    cursor: pointer;

}


.contact-submit {

    display: block;

    margin: 10px auto 0;

    padding: 16px 34px;

    background: #d4af37;

    color: #071a35;

    border: 2px solid #d4af37;

    border-radius: 10px;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}


.contact-submit:hover {

    background: transparent;

    color: white;

}


/* =========================================================
   RETURN TO MENU
========================================================= */

.contact-return {

    text-align: center;

    padding: 60px 25px 80px;

    background: #f7f8fa;

}


.contact-return button {

    background: #071a35;

    color: white;

    border: 2px solid #d4af37;

    padding: 16px 32px;

    border-radius: 10px;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}


.contact-return button:hover {

    background: #d4af37;

    color: #071a35;

    transform: translateY(-3px);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .contact-information {

        grid-template-columns: repeat(2, 1fr);

    }


    .contact-hero h1 {

        font-size: 55px;

    }

}


@media (max-width: 700px) {

    .contact-hero {

        min-height: 560px;

        padding: 90px 25px;

    }


    .contact-hero h1 {

        font-size: 42px;

    }


    .contact-hero h2 {

        font-size: 28px;

    }


    .contact-hero p {

        font-size: 17px;

    }


    .contact-information {

        grid-template-columns: 1fr;

        padding: 60px 20px;

    }


    .contact-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .contact-form-header h2 {

        font-size: 36px;

    }

}/* =========================================
   MISSION PAGE
========================================= */

.mission-page {
    width: 100%;
    background: #f8f9fb;
    color: #071a35;
}


/* =========================================
   HERO
========================================= */

.mission-hero {

    min-height: 620px;

    display: flex;

    align-items: center;

    padding: 100px 8%;

    background:
        linear-gradient(
            rgba(5, 20, 45, .76),
            rgba(5, 20, 45, .76)
        ),
        url("/assets/campus-CuXseEUu.jpg");

    background-size: cover;

    background-position: center;

}


.mission-hero-overlay {

    max-width: 850px;

    color: white;

}


.mission-hero-overlay span {

    color: #d4af37;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 4px;

}


.mission-hero-overlay h1 {

    font-family: "Cinzel", serif;

    font-size: 76px;

    line-height: 1.1;

    margin: 22px 0;

    color: white;

}


.mission-line {

    width: 180px;

    height: 3px;

    background: #d4af37;

    margin: 25px 0;

}


.mission-hero-overlay p {

    max-width: 700px;

    color: #f3f3f3;

    font-size: 21px;

    line-height: 1.8;

}


/* =========================================
   INTRODUCTION
========================================= */

.mission-introduction {

    max-width: 1250px;

    margin: 0 auto;

    padding: 100px 40px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}


.mission-image img {

    width: 100%;

    height: 520px;

    object-fit: cover;

    border-radius: 18px;

    border: 3px solid #d4af37;

    box-shadow: 0 20px 45px rgba(0,0,0,.18);

}


.mission-text span,
.mission-section-header span,
.mission-approach-content span,
.mission-final span {

    color: #d4af37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 3px;

}


.mission-text h2 {

    font-family: "Cinzel", serif;

    font-size: 46px;

    line-height: 1.2;

    margin: 20px 0 30px;

}


.mission-text p {

    color: #555;

    font-size: 18px;

    line-height: 1.9;

    margin-bottom: 20px;

}


/* =========================================
   GENERAL SECTION
========================================= */

.mission-section {

    padding: 100px 8%;

    background: white;

}


.mission-section-header {

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

}


.mission-section-header h2 {

    font-family: "Cinzel", serif;

    font-size: 48px;

    line-height: 1.2;

    margin: 18px 0;

}


.mission-section-content {

    max-width: 1000px;

    margin: auto;

}


.mission-section-content p {

    color: #555;

    font-size: 18px;

    line-height: 1.9;

    margin-bottom: 22px;

}


/* =========================================
   ACADEMIC PURPOSE
========================================= */

.mission-academic {

    padding: 100px 8%;

    background: #f8f9fb;

}


.mission-academic-grid {

    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

}


.mission-academic-card {

    background: white;

    padding: 35px 30px;

    border-radius: 16px;

    border: 2px solid rgba(212,175,55,.45);

    box-shadow: 0 12px 30px rgba(0,0,0,.07);

    transition: .35s;

}


.mission-academic-card:hover {

    transform: translateY(-7px);

    border-color: #d4af37;

    box-shadow: 0 20px 40px rgba(0,0,0,.12);

}


.mission-academic-card h3 {

    color: #071a35;

    font-family: "Cinzel", serif;

    font-size: 25px;

    margin-bottom: 15px;

}


.mission-academic-card p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================
   VALUES
========================================= */

.mission-values-section {

    padding: 100px 8%;

    background: white;

}


.mission-values-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}


.mission-value-card {

    padding: 35px 28px;

    background: #f8f9fb;

    border: 2px solid rgba(212,175,55,.35);

    border-radius: 16px;

    text-align: center;

    transition: .35s;

}


.mission-value-card:hover {

    transform: translateY(-7px);

    background: #071a35;

    border-color: #d4af37;

}


.mission-value-icon {

    width: 65px;

    height: 65px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #071a35;

    color: #d4af37;

    border-radius: 50%;

    font-size: 25px;

}


.mission-value-card:hover .mission-value-icon {

    background: #d4af37;

    color: #071a35;

}


.mission-value-card h3 {

    color: #071a35;

    font-family: "Cinzel", serif;

    font-size: 23px;

    margin-bottom: 12px;

}


.mission-value-card:hover h3 {

    color: white;

}


.mission-value-card p {

    color: #666;

    font-size: 15px;

    line-height: 1.7;

}


.mission-value-card:hover p {

    color: #e5e5e5;

}


/* =========================================
   EDUCATIONAL APPROACH
========================================= */

.mission-approach {

    padding: 110px 8%;

    background:

        linear-gradient(
            rgba(7,26,53,.94),
            rgba(7,26,53,.94)
        ),

        url("/assets/campus-CuXseEUu.jpg");

    background-size: cover;

    background-position: center;

}


.mission-approach-content {

    max-width: 950px;

    margin: auto;

    text-align: center;

    color: white;

}


.mission-approach-content h2 {

    color: white;

    font-family: "Cinzel", serif;

    font-size: 52px;

    margin: 20px 0 30px;

}


.mission-approach-content p {

    color: #e2e2e2;

    font-size: 19px;

    line-height: 1.9;

    margin-bottom: 20px;

}


/* =========================================
   FINAL SECTION
========================================= */

.mission-final {

    padding: 110px 8%;

    text-align: center;

    background: #f8f9fb;

}


.mission-final h2 {

    font-family: "Cinzel", serif;

    font-size: 52px;

    color: #071a35;

    margin: 20px 0 30px;

}


.mission-final p {

    max-width: 900px;

    margin: 0 auto 20px;

    color: #555;

    font-size: 19px;

    line-height: 1.9;

}


.mission-final-line {

    max-width: 700px;

    margin: 45px auto 0;

    padding: 22px;

    border-top: 2px solid #d4af37;

    border-bottom: 2px solid #d4af37;

    color: #071a35;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .mission-hero-overlay h1 {

        font-size: 55px;

    }


    .mission-introduction {

        grid-template-columns: 1fr;

    }


    .mission-academic-grid {

        grid-template-columns: 1fr;

    }


    .mission-values-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 700px) {

    .mission-hero {

        min-height: 500px;

        padding: 80px 25px;

    }


    .mission-hero-overlay h1 {

        font-size: 42px;

    }


    .mission-hero-overlay p {

        font-size: 18px;

    }


    .mission-introduction {

        padding: 70px 25px;

    }


    .mission-image img {

        height: 380px;

    }


    .mission-text h2 {

        font-size: 36px;

    }


    .mission-section,
    .mission-academic,
    .mission-values-section {

        padding: 70px 25px;

    }


    .mission-section-header h2 {

        font-size: 36px;

    }


    .mission-values-grid {

        grid-template-columns: 1fr;

    }


    .mission-approach {

        padding: 80px 25px;

    }


    .mission-approach-content h2 {

        font-size: 38px;

    }


    .mission-final {

        padding: 80px 25px;

    }


    .mission-final h2 {

        font-size: 38px;

    }

}
/* =========================================
   RETURN TO MAIN MENU
========================================= */

.mission-back-button {

    display: inline-block;

    margin-top: 45px;

    padding: 16px 34px;

    background: #071a35;

    color: white;

    border: 2px solid #d4af37;

    border-radius: 10px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;

    transition: .35s;

}


.mission-back-button:hover {

    background: #d4af37;

    color: #071a35;

    transform: translateY(-3px);

}/* =========================================================
   PRESIDENT PAGE
========================================================= */

.president-page {

    width: 100%;

    background: #f8f9fb;

}


/* =========================================================
   PRESIDENT HERO
========================================================= */

.president-hero {

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 90px 30px;

    background: #071a35;

    border-bottom: 4px solid #d4af37;

}


.president-hero-content {

    max-width: 950px;

}


.president-hero-content > span {

    color: #d4af37;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 4px;

}


.president-hero-content h1 {

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 58px;

    line-height: 1.2;

    margin: 22px 0;

}


.president-page .president-line {

    width: 90px;

    height: 3px;

    margin: 25px auto;

    background: #d4af37;

}


.president-hero-content p {

    max-width: 800px;

    margin: 0 auto;

    color: #d9dee7;

    font-size: 19px;

    line-height: 1.8;

}


/* =========================================================
   PRESIDENT MESSAGE
========================================================= */

.president-message {

    padding: 90px 80px;

    background: #ffffff;

}


.president-message-content {

    max-width: 1050px;

    margin: 0 auto;

}


.president-message-content > span {

    display: block;

    color: #d4af37;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 15px;

}


.president-message-content h2 {

    color: #071a35;

    font-family: "Cinzel", serif;

    font-size: 48px;

    line-height: 1.25;

    margin-bottom: 35px;

}


.president-message-content h3 {

    color: #071a35;

    font-family: "Cinzel", serif;

    font-size: 30px;

    margin-top: 55px;

    margin-bottom: 20px;

    padding-left: 18px;

    border-left: 4px solid #d4af37;

}


.president-message-content > p {

    color: #555;

    font-size: 19px;

    line-height: 1.9;

    margin-bottom: 25px;

}


/* =========================================================
   PRESIDENT SIGNATURE
========================================================= */

.president-signature {

    margin-top: 60px;

    padding: 35px 40px;

    background: #071a35;

    border-left: 5px solid #d4af37;

    border-radius: 12px;

}


.president-signature p {

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 24px;

    margin-bottom: 20px;

}


.president-signature strong {

    display: block;

    color: #d4af37;

    font-size: 18px;

    margin-bottom: 10px;

}


.president-signature span {

    display: block;

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

}


.president-signature small {

    display: block;

    color: #c9ced7;

    font-size: 15px;

    margin-top: 5px;

}


/* =========================================================
   RETURN TO MAIN MENU
========================================================= */

.president-back-button {

    display: block;

    width: fit-content;

    margin: 50px auto 0;

    padding: 16px 34px;

    background: #071a35;

    color: #ffffff;

    border: 2px solid #d4af37;

    border-radius: 10px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;

    transition: .35s;

}


.president-back-button:hover {

    background: #d4af37;

    color: #071a35;

    transform: translateY(-3px);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .president-hero {

        min-height: 380px;

        padding: 70px 25px;

    }


    .president-hero-content h1 {

        font-size: 44px;

    }


    .president-message {

        padding: 65px 25px;

    }


    .president-message-content h2 {

        font-size: 38px;

    }

}


@media (max-width: 600px) {

    .president-hero {

        min-height: 350px;

        padding: 60px 20px;

    }


    .president-hero-content > span {

        font-size: 13px;

        letter-spacing: 2px;

    }


    .president-hero-content h1 {

        font-size: 34px;

    }


    .president-hero-content p {

        font-size: 16px;

    }


    .president-message {

        padding: 50px 20px;

    }


    .president-message-content h2 {

        font-size: 31px;

    }


    .president-message-content h3 {

        font-size: 25px;

    }


    .president-message-content > p {

        font-size: 17px;

        line-height: 1.8;

    }


    .president-signature {

        padding: 28px 22px;

    }


    .president-signature p {

        font-size: 20px;

    }


    .president-back-button {

        width: 100%;

        text-align: center;

    }

}.directors-page { width: 100%; background: #f8f9fb; }
.directors-hero { min-height: 360px; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 30px; background:#071a35; border-bottom:4px solid #d4af37; }
.directors-hero-content { max-width:950px; }
.directors-hero-content > span { color:#d4af37; font-size:16px; font-weight:700; letter-spacing:4px; }
.directors-hero-content h1 { color:#fff; font-family:"Cinzel",serif; font-size:58px; line-height:1.2; margin:22px 0; display:none; }
.directors-line { width:90px; height:3px; margin:25px auto; background:#d4af37; }
.directors-hero-content p { max-width:800px; margin:0 auto; color:#d9dee7; font-size:19px; line-height:1.8; }
.directors-section { padding:80px 60px; background:#fff; }
.directors-container { max-width:1200px; margin:0 auto; }
.directors-table-wrap { overflow-x:auto; }
.directors-table { width:100%; border-collapse:collapse; min-width:850px; }
.directors-table th { background:#071a35; color:#fff; text-align:left; padding:18px 20px; font-size:15px; letter-spacing:1px; }
.directors-table td { color:#444; padding:24px 20px; border-bottom:1px solid #e5e7eb; vertical-align:top; line-height:1.7; font-size:16px; }
.directors-table tbody tr:hover { background:#fafafa; }
.directors-table td:first-child { color:#071a35; font-weight:700; }
@media (max-width: 768px) {
  .directors-hero { padding:70px 20px; }
  .directors-hero-content h1 { font-size:42px; }
  .directors-section { padding:55px 20px; }
  .directors-table { min-width:0; }
  .directors-table thead { display:none; }
  .directors-table, .directors-table tbody, .directors-table tr, .directors-table td { display:block; width:100%; }
  .directors-table tr { margin-bottom:22px; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
  .directors-table td { border:0; border-bottom:1px solid #eee; padding:14px 16px; }
  .directors-table td:last-child { border-bottom:0; }
  .directors-table td::before { content:attr(data-label); display:block; color:#071a35; font-weight:700; font-size:12px; letter-spacing:1px; margin-bottom:5px; }
}

/* Directors / Authorities layout */
.directors-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
.director-card{position:relative;display:flex;gap:24px;min-height:245px;padding:30px 32px;background:#fff;border:1px solid #e5e8ed;border-top:3px solid #071a35;border-radius:12px;box-shadow:0 10px 28px rgba(7,26,53,.07);transition:transform .2s ease,box-shadow .2s ease;}
.director-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(7,26,53,.11);}
.director-number{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #d4af37;border-radius:50%;color:#b48608;font-weight:700;font-size:15px;}
.director-content{flex:1;min-width:0;}
.director-content h2{margin:2px 0 0;color:#071a35;font-family:Cinzel,Georgia,serif;font-size:21px;line-height:1.4;}
.director-divider{width:42px;height:2px;margin:15px 0 17px;background:#d4af37;}
.director-position{margin:0;color:#3f4651;font-size:15.5px;line-height:1.7;}
.director-nationality{margin:18px 0 0;padding-top:14px;border-top:1px solid #edf0f3;color:#69717d;font-size:13.5px;line-height:1.55;}
.director-nationality span{color:#071a35;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
@media (max-width:900px){.directors-grid{grid-template-columns:1fr;}}
@media (max-width:768px){.director-card{min-height:0;padding:25px 22px;gap:17px;}.director-number{flex-basis:42px;width:42px;height:42px;}.director-content h2{font-size:18px;}}