/* =================================================
 * GENERAL STYLESHEET
 * ============================================== */

/*
BRANDING SETTINGS ==================================== */
/* Colors */
:root {
   /* Solid */
   --primary: #00269A;
   --dark: #464952;
   --white: #fff;
   --black: #000;

   --success: #9ED36B;
   --warning: #FECD56;
   --danger: #DF0155;
   --info: #46CDAC;

   /* RGB & RGBA */
   --primary_rgb: 0,38,154;
   --dark_rgb: 62,72,101;
   --white_rgb: 255,255,255;
   --black_rgb: 0,0,0;

   --danger_rgb: 223,1,85;

   /* Opacity */
   --opacity_100: 1;
   --opacity_75: .75;
   --opacity_50: .5;
   --opacity_25: .25;
   --opacity_0: 0;
}

/* Font Face */
@font-face {
   font-family: 'Outfit';
   src: url('../../static/fonts/Outfit-SemiBold.woff2') format('woff2'),
       url('../../static/fonts/Outfit-SemiBold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'Outfit';
   src: url('../../static/fonts/Outfit-Regular.woff2') format('woff2'),
        url('../../static/fonts/Outfit-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'Outfit';
   src: url('../../static/fonts/Outfit-ExtraBold.woff2') format('woff2'),
        url('../../static/fonts/Outfit-ExtraBold.woff') format('woff');
   font-weight: 800;
   font-style: normal;
   font-display: swap;
}

html body {
   font-family: 'Outfit';
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.5rem;
   letter-spacing: .2px;
   background-image: url('../../static/imgs/bg/waves_tl.png');
   background-position: top left;
   background-repeat: no-repeat;
   background-size: 100vw;
   color: var(--dark);
}

@media (min-width: 768px) {
   html body { background-size: 50vw auto; }
}
@media (min-width: 1025px) {
   html body { background-size: 35vw auto; }
}

body ul, body ol { padding-left: 1rem; }

/*
LAYOUT SETTINGS ==================================== */
/* Header */
.site_header {
   height: 80px;
   transition: all ease-in-out .5s;
}
.site_header.shrink { height: 60px !important; }

.site_brand {
   height: 2.5rem;
   width: 2.5rem;
}

@media (min-width: 1025px) {
   .site_header { height: 110px; }
   .site_brand { width: 12rem; }
}

@media (max-width: 991px) {
   .main_navigation .navbar-collapse {
      position: absolute;
      top: 100%;
      background: white;
      padding: 1rem;
      min-width: 200px;
   }
}

/* Footer */
.site_footer { padding: 4rem 0; }

.site_brand_footer img {
   width: 2.5rem;
   height: 2.5rem;
}

/* Headings and text */
body h1, body h2, body h3, body h4, body h5, body h6 {
   margin-bottom: 1.25rem;
   font-weight: 600;
}

.cta_box h2 { color: white; }

@media (min-width: 992px) {
   body h1 { font-size: 2.25rem; }
   body h2 { font-size: 1.625rem; }
   body h3 { font-size: 1.5rem; }
   body h4 { font-size: 1.375rem; }
   body h5 { font-size: 1.25rem; }
   body h6 { font-size: 1.125rem; }
}

strong, b { font-weight: 600; }

p { margin-bottom: 1.25rem; }

.sec_description { font-size: 1rem; }

/* Wrappers */
@media (min-width: 1200px) {
   .hero { min-height: 650px; }
}

.cta_box {
   max-width: 400px;
   padding: 1.5rem;
   position: relative;
   z-index: 2;
}

.ext_link .cta_box {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   z-index: 1;
}

.li_box_item {
   width: 2.75rem;
   height: 2.75rem;
   background-color: rgba(var(--primary_rgb), .12);
   padding: .5rem;
   text-align: center;
   border-radius: 10rem;
   display: inline-block;
   opacity: .75;
}

.parallax {
   background-image: url('../../static/imgs/bg/mfn_secretarias_fondo_sm.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: bottom center;
   background-size: cover;
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
   position: relative;
}
.parallax::before {
   content: '';
   position: absolute;
   width: 100%;
   top: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(var(--primary_rgb), .75);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   z-index: 1;
}
.parallax img {
   max-width: 5.125rem;
   margin-bottom: 1.25rem;
}
.parallax_content {
   position: relative;
   z-index: 1025;
}

@media (min-width: 992px) {
   .parallax {
      background-image: url('../../static/imgs/bg/mfn_secretarias_fondo_lg.jpg');
      min-height: 25rem;
   }
}

/* Buttons */
.back_top {
   position: fixed;
   z-index: 1025;
   right: 4rem;
   bottom: 4rem;
}


/* Utilities */
.bg_hero {
   background-image: url('../../static/imgs/bg/hero_bg-texture.png');
   background-position: top left;
   background-repeat: no-repeat;
   background-size: cover;
}
.bg_abstract {
   background-image: url('../../static/imgs/bg/section_bg-texture.png');
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover;
}

.bg_primary_trans { background-color: rgba(var(--primary_rgb), .06); }

@media (min-width: 768px) {
   .bg_hero {
      background-position: center center;
      background-size: contain;
   }
}

.vh100 { min-height: 100px; }

.m120 { margin-bottom: 7.5rem; }

.py60 {
   padding-top: 3.75rem;
   padding-bottom: 3.75rem;
}

.icon_box {
   width: 5rem;
   height: 5rem;
   margin-bottom: 1.25rem;
   object-fit: contain;
}

.ext_link { overflow: auto; }
.ext_link .ext_img {
   opacity: .2;
   transition: ease-in-out .5s;
}
.ext_link:hover .ext_img {
   filter: blur(1rem);
   transform: scale(1);
}

.custom-shape-divider-bottom-1663865658 {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
}
.custom-shape-divider-bottom-1663865658 svg {
   position: relative;
   display: block;
   width: calc(100% + 1.3px);
   height: 100px;
}
.custom-shape-divider-bottom-1663865658 .shape-fill {
   fill: #FFFFFF;
}

.cta_title {
   font-size: 2rem;
   font-weight: 800;
}
.cta_text {
   font-size: 1.125rem;
   line-height: initial;
}

@media (min-width: 1024px) {
   .cta_title { font-size: 2.5rem; }
   .cta_text { font-size: 1.25rem; }
}

.user_profile {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 1.25rem;
   border: 1px solid rgba(var(--primary_rgb), 0.25);
}

/*
COMPONENTS ==================================== */
/* Buttons */
.toggle_bar {
   width: 100%;
   display: block;
   margin: .25rem 0;
   transition: all ease-in-out .2s;
   position: relative;
   border-top: 2px solid var(--dark);
}

.button_toggle {
   width: 2.5rem;
   height: 2.5rem;
   border: transparent;
   background-color: white;
   padding: 0 .5rem;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   position: relative;
}
.button_toggle:not(.collapsed) .toggle_bar:first-child {
   transform: rotate(-45deg);
   top: calc(50% - 10px);
}
.button_toggle:not(.collapsed) .toggle_bar:last-child {
   transform: rotate(45deg);
   bottom: calc(50% - 10px);
}
.button_toggle:not(.collapsed) .toggle_bar:nth-child(2) { opacity: 0; }

@media (min-width: 992px) {
   .button_toggle { display: none; }
}

/* Links */
body a { text-decoration: none; }

body .btn.link_redirect {
   text-decoration: none;
   color: var(--primary);
}

/* Navbars */
.sm_link {
   font-size: 1.25rem;
   border: 1px solid rgba(var(--primary_rgb), .12);
   border-radius: 5rem;
   padding: .25rem;
   display: flex;
   transition: all ease-in-out .25s;
   color: var(--dark);
}
.sm_link:hover {
   background-color: var(--primary);
   border-color: var(--primary);
   color: var(--white);
}

/* Carousel */
body .carousel-indicators [data-bs-target] { background-color: var(--dark); }
body .carousel-control-prev, body .carousel-control-next { color: var(--dark); }

/*
OVERRIDES ==================================== */
/* Headings and text */
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
   margin-bottom: 1.25rem;
   font-weight: 600;
}

@media (min-width: 992px) {
   body .h1 { font-size: 2.25rem; }
   body .h2 { font-size: 1.625rem; }
   body .h3 { font-size: 1.5rem; }
   body .h4 { font-size: 1.375rem; }
   body .h5 { font-size: 1.25rem; }
   body .h6 { font-size: 1.125rem; }
}

/* Navbar */
body header .nav-link {
   border-radius: .125rem;
   color: var(--dark);
}
body .nav-link { color: var(--primary); }
body .nav-link:hover { background-color: rgba(var(--primary_rgb), .06); }

body .navbar-nav .show > body .nav-link,
body .navbar-nav .nav-link.active {
   background-color: var(--primary);
   color: white;
}

/* Buttons */
body .btn {
   transition: ease-in-out .25s;
   font-weight: 600;
}
body .btn:focus, body .btn:hover {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
   border-radius: 1rem;
   background-color: var(--primary) !important;
   border-color: var(--primary) !important;
   color: var(--white) !important;
}
body .btn-lg:focus, body .btn-lg:hover {
   padding-left: 1.75rem;
   padding-right: 1.75rem;
}

body .btn-primary {
   background-color: var(--primary);
   border-color: var(--primary);
}

body .btn-danger {
   background-color: var(--danger);
   border-color: var(--danger);
}

/* Cards */
body .card {
   border-radius: 2rem;
   border-color: rgba(var(--primary_rgb), .12);
}
body .card-body { padding: 1.25rem; }

/* Forms */
body .form-control,
body .form-select {
   border-radius: .125rem;
   border-color: rgba(var(--primary_rgb), .12);
   color: var(--dark);
}

body .form-control::placeholder { color: rgba(var(--primary_rgb), .5); }

body .form-floating > label { color: var(--primary);}

/* Utilities */
body .bg-primary { background-color: var(--primary) !important; }
body .bg-dark { background-color: var(--dark) !important; }

body .text-primary { color: rgba(var(--primary_rgb), var(--bs-text-opacity)) !important;
}

body .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(var(--primary_rgb), 0.075) !important; }
body .shadow { box-shadow: 0 0.5rem 1rem rgba(var(--primary_rgb), 0.075) !important; }
body .shadow-lg { box-shadow:  0 1rem 3rem rgba(var(--primary_rgb), 0.075) !important; }