@charset "utf-8";

/* ----------------------------------
Name: global.css
Version: 1.0.0
Autor: Fragmenta Soluciones Digitales
Website: https://www.fragmenta.mx
----------------------------------- */

/* ===================================
    Reset
====================================== */
*,
*::before,
*::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html { font-size: 16px !important;}
body {
     font-family: 'Geologica', sans-serif !important;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 300;
     line-height: auto;
     color:#323232;
     background-color: #fff;
     margin: 0px;
}
body, html {height: 100%; -moz-osx-font-smoothing: grayscale;}

section{
  position: relative;
   overflow-x:clip;
}


a, a:active, a:focus { color: #2F254D;; text-decoration: none;transition:all .5s ease;}
a:hover, a:active{color: #2F254D; text-decoration: none; cursor: pointer;transition:all .5s ease;}
/*a:focus, a:active, button:focus, button:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none; box-shadow: none; } */

/*footer a, footer a:active, footer a:focus { color: #ffffff; text-decoration: none; font-size: 12px; line-height: 20px;}*/
/*footer a:hover, footer a:active{color: #1158A0; text-decoration: none; cursor: pointer;}
footer a:focus, footer a:active, footer button:focus, footer button:active, footer .btn.active.focus, footer .btn.active:focus, footer .btn.focus, footer .btn:active.focus, footer .btn:active:focus,footer  .btn:focus {outline: none; box-shadow: none; }

/*img {max-width:100%; height:auto; }*/


/* ===================================
    Typography
====================================== */
b, strong{font-weight: 500;}

/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'Geologica', sans-serif; letter-spacing: 0;color: #323232;}

h1, .h1 {font-size:2.125rem; line-height:130%; font-weight: 400;}
h2, .h2 {font-size:1.5rem; line-height:130%; font-weight: 400;}
h3, .h3 {font-size:1.375rem; line-height:130%; font-weight: 400;}
h4, .h4 {font-size:1rem; line-height:130%; font-weight: 400;}
h5, .h5 {font-size:0.875rem; line-height:130%; font-weight: 400;}
h6, .h6 {font-size:0.75rem; line-height:150%; font-weight: 400;}

p {font-size:0.875rem;font-weight: 300;line-height:150%;}
.small {font-size:0.75rem;font-weight: 400;line-height:150%;}

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {}
/* md  */ @media (min-width: 768px) {

h1, .h1 {font-size:2.375rem; line-height:130%; font-weight: 400;}
h2, .h2 {font-size:1.75rem; line-height:130%; font-weight: 400;}
h3, .h3 {font-size:1.625rem; line-height:130%; font-weight: 400;}
h4, .h4 {font-size:1.25rem; line-height:130%; font-weight: 400;}
h5, .h5 {font-size:1rem; line-height:130%; font-weight: 400;}
h6, .h6 {font-size:0.875rem; line-height:150%; font-weight: 400;}

p {font-size:1rem;font-weight: 300;line-height:150%;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

h1, .h1 {font-size:2.625rem; line-height:130%; font-weight: 400;}
h2, .h2 {font-size:2rem; line-height:130%; font-weight: 400;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}


.text-alt{color: #FF5C35;}
.text-main{color:#001E6B;}

/* ===================================
    Background color
====================================== */

.bg-main{background: #001E6B;}
.bg-alt{background: #E2EBF2B2;}

/* ===================================
    Covers
====================================== */


/* ===================================
    Button
====================================== */

/* Boton con circulo */
.btn-main {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
}

.btn-text {
  background: linear-gradient(267.9deg, #FF5C35 5.27%, #FF7F0E 99.26%);
  color: #fff;
  padding: 8px 30px;
  border-radius: 32px;
  transition: transform 0.3s ease;
  font-size: 16px;
}

.btn-circle {
  width: 36px!important;
  height: 36px!important;
   aspect-ratio: 1 / 1!important;
  background-color:#001E6B;
  border-radius: 50%;
  margin-left: 5px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-circle i{color: #fff;}

/* Hover effect */
.btn-main:hover .btn-text {
  transform: translateX(5px);
}

.btn-main:hover .btn-circle {
  transform: translateX(5px) scale(1.1);
  background-color: #003399;
}

.bg-btn-cta{
  background: #fff;
  color: #001E6B;
}

/*Boton main*/



.btn-main-alt {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 30px;
  min-width: 150px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  background: linear-gradient(267.9deg, #FF5C35 5.27%, #FF7F0E 99.26%);
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;

  border-radius: 32px;
}

.btn-main-alt p{
  font-weight: 600!important;
}

.btn-main-alt:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #001E6B;
  border-radius: 32px;
  z-index: -1;
}

.btn-main-alt:hover, .btn-main:focus {
  color: #fff;
}

.btn-main-alt:hover:before, .btn-main:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.btn-main-alt:active {
  transform: scale(0.9);
}


/*Link Flecha*/

.main-link a{color:#FF5C35; text-decoration: none; font-size: 16px;font-weight: 600;}

.main-link a {
  -webkit-transition: ease-in-out 0.7s !important;
  -moz-transition: ease-in-out 0.7s !important;
  -ms-transition: ease-in-out 0.7s !important;
  -o-transition: ease-in-out 0.7s !important;
  transition: ease-in-out 0.7s !important;

}

.main-link i{color: #FF5C35;font-size: 16px;transition: ease-in-out 0.7s !important;}


.main-link a:hover {
  margin-left: 20px;
  color: #F0780F;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
  text-decoration: underline;
}

.main-link a:hover i{color: #001E6B;transition: ease-in-out 0.7s !important;}

/* ===================================
    Galerias
====================================== */

/* ===================================
    Numeralia
====================================== */


/* ===================================
    Iconos
====================================== */

/* ===================================
    hover
====================================== */

.image{
  transition-duration: 5s;
}

.hover-zoom:hover .image,
.parent:hover .hover-zoom .image {
	transform: scale(1.1);
	transition-duration: 5s;
}

.hover-zoom-rotate:hover .image,
.parent:hover .hover-zoom-rotate .image {
	transform: scale(1.1) rotate(3deg);
	transition-duration: 7s;
}


/* ===================================
    Call to action
====================================== */

.cta{
  background: #FF5C2F;
  border-radius: 12px;
  width: 100%;
  min-height: 250px;
  overflow: hidden;
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
}

.cta .content-cta{
  width: 100%;
  height: 100%;
  padding: 50px 25px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  gap:20px;
}

.bg-cta-inicio{
  background-image:url('../../assets/img/inicio/footer-banner-inicio.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}

.bg-cta-nosotros{
  background-image:url('../../assets/img/nosotros/footer-banner.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}

.bg-cta-servicios{
  background-image:url('../../assets/img/servicios/footer-banner.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}

.bg-top-cta{
  background: #001E6B;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0px;
}
.bg-bottom-cta{
  background: #EBF1F6;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.bg-top-cta-nosotros{
  background: #000C2B;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0px;
}



/* ===================================
    Paginador
====================================== */


.pagination{
  align-items: center;
}

.page-link{
  background: transparent;
  border: 0px solid #BB2026;
  color: #001E6B;
  opacity: 0.5;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  cursor: pointer;
}

.page-link:hover{
  background: transparent;
  color: #FF5C35!important;
  opacity: 1;
}

.page-link:focus{
  box-shadow: 0 0 0 0rem rgba(13, 110, 253, .25);
}


.pagination .active{
  width: 35px;
height: 35px;
background: transparent;
border-color: transparent;
color: #001E6B;
text-decoration: none;
opacity: 1;
}
.first .page-link{
  color:#FF5C35;
  border-radius: 0px ;
  border: 1px solid transparent !important;
  width: auto;
  height: auto;
  margin: 0px;
  opacity: 1;
}

.pagination .disabled{
  opacity: .35;
cursor: auto;
pointer-events: none;
}



.pagination .disabled:focus{
  border: 0px;
}

.last .page-link{
  color:#FF5C35;
  border-radius: 0px;
  border: 1px solid transparent;
  width: auto;
  height: auto;
  margin: 0px;
  opacity: 1;
}

.prev .page-link{
  color: #FF5C35;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
  opacity: 1;
}

.next .page-link{

  color: #FF5C35;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
  opacity: 1;
}

.prev .page-link:hover{
  color: #001E6B!important;
}


.next .page-link:hover{
  color: #001E6B!important;
}

.last .page-link:hover{
  color: #001E6B!important;
  background: transparent !important;

}

.first .page-link:hover{
  color: #001E6B!important;
  background: transparent !important;

}

.pagination li {
  list-style: none;
  margin: 0 4px;
}

.pagination li.dots span {
  padding: 6px 10px;
  color: #999;
  font-weight: 600;
  user-select: none;
}

/*Focus*/


.pagination a:focus{
outline: none; box-shadow: none;
}

.next a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}
.prev a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}

.last a:focus{
outline: none; box-shadow: none;
background: transparent;
}

.first a:focus{
outline: none; box-shadow: none;
background: transparent;
}

/* ===================================
    Grid
====================================== */

.grid-1fr{grid-template-columns: 1fr;}
.grid-50{grid-template-columns: 1fr 1fr}
.no-gap{gap:0px;}
.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-50{gap:50px;}

/* ===================================
    Alertas
====================================== */

.noti-info{
  color:#fff;
  padding-bottom: 20px;
}

.noti-info-vacante{
  background: #EBF1F6;
  color:#FF5C35;
  padding: 15px;
  width: 100%;
  transition: 0.7s ease all;
  border-radius: 5px;
  margin-bottom: 30px;
  font-weight: 600;
}

/* ===================================
    Forms
====================================== */



/* ===================================
    borders
====================================== */

.border-bottom{
  border-bottom: 1px solid #888888;
}

/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {


} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {



/*Grid*/
.sm-grid-80{grid-template-columns: 80% 1fr;}
.sm-grid-75{grid-template-columns: 75% 1fr;}
.sm-grid-70{grid-template-columns: 70% 1fr;}
.sm-grid-65{grid-template-columns: 65% 1fr;}
.sm-grid-60{grid-template-columns: 60% 1fr;}
.sm-grid-55{grid-template-columns: 55% 1fr;}
.sm-grid-50{grid-template-columns: 1fr 1fr;}
.sm-grid-45{grid-template-columns: 45% 1fr;}
.sm-grid-35{grid-template-columns: 35% 1fr;}
.sm-grid-30{grid-template-columns: 30% 1fr;}
.sm-grid-3fr{grid-template-columns: repeat(3,1fr);}
.sm-no-gap{gap:0px;}
.sm-gap-10{gap:10px;}
.sm-gap-20{gap:20px;}
.sm-gap-30{gap:30px;}
.sm-gap-40{gap:40px;}
.sm-gap-50{gap:50px;}



}
/* md  */ @media (min-width: 768px) {



/*Grid*/
.md-grid-80{grid-template-columns: 80% 1fr;}
.md-grid-75{grid-template-columns: 75% 1fr;}
.md-grid-70{grid-template-columns: 70% 1fr;}
.md-grid-65{grid-template-columns: 65% 1fr;}
.md-grid-60{grid-template-columns: 60% 1fr;}
.md-grid-55{grid-template-columns: 55% 1fr;}
.md-grid-50{grid-template-columns: 1fr 1fr;}
.md-grid-45{grid-template-columns: 45% 1fr;}
.md-grid-40{grid-template-columns: 40% 1fr;}
.md-grid-35{grid-template-columns: 35% 1fr;}
.md-grid-30{grid-template-columns: 30% 1fr;}
.md-grid-3fr{grid-template-columns: repeat(3,1fr);}
.md-no-gap{gap:0px;}
.md-gap-10{gap:10px;}
.md-gap-20{gap:20px;}
.md-gap-30{gap:30px;}
.md-gap-40{gap:40px;}
.md-gap-50{gap:50px;}

/*Call to action*/
.cta .content-cta{
  padding: 50px 50px;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap:30px;
}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

/*Grid*/
.lg-grid-80{grid-template-columns: 80% 1fr;}
.lg-grid-75{grid-template-columns: 75% 1fr;}
.lg-grid-70{grid-template-columns: 70% 1fr;}
.lg-grid-65{grid-template-columns: 65% 1fr;}
.lg-grid-60{grid-template-columns: 60% 1fr;}
.lg-grid-55{grid-template-columns: 55% 1fr;}
.lg-grid-50{grid-template-columns: 1fr 1fr;}
.lg-grid-45{grid-template-columns: 45% 1fr;}
.lg-grid-40{grid-template-columns: 40% 1fr;}
.lg-grid-35{grid-template-columns: 35% 1fr;}
.lg-grid-30{grid-template-columns: 30% 1fr;}
.lg-grid-3fr{grid-template-columns: repeat(3,1fr);}
.lg-no-gap{gap:0px;}
.lg-gap-10{gap:10px;}
.lg-gap-20{gap:20px;}
.lg-gap-30{gap:30px;}
.lg-gap-40{gap:40px;}
.lg-gap-50{gap:50px;}


} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}