/******************************************/
/** General                              **/
/******************************************/

:root {
   --primary: #00384E !important;
   --secondary: #FF6A02;
   --blueLight: #3CBEF1;
   --black: #000000;
   --gray: #555555;
   --light: #f2f2f2;
   --white: #ffffff;
   --textos: #687A80;
   --light-azure:#ECF9FE;
   --light-orange:#FFF0E6;
   --light-smoke:#F7F7F7;
   --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
   
}

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

@font-face {
   font-family: 'neo_sans_w1gregular';
   src: url('../fonts/fonnts.com-neo_sans_w1g-webfont.woff2') format('woff2'),
   url('../fonts/fonnts.com-neo_sans_w1g-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   
}

@font-face {
   font-family: 'neo_sans_w1gbold';
   src: url('../fonts/fonnts.com-neo_sans_w1g_bold-webfont.woff2') format('woff2'),
   url('../fonts/fonnts.com-neo_sans_w1g_bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   
}

@font-face {
   font-family: 'neo_sans_w1gmedium';
   src: url('../fonts/neo_sans_w1g_medium-webfont.woff2') format('woff2'),
   url('../fonts/neo_sans_w1g_medium-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   
}

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   font-family: 'neo_sans_w1gregular' !important;
   font-weight: 400;;
   color: var(--textos) !important;
   background-color: var(--white);
}


/* NAVBAR
---------------*/

header{
   /* z-index:9999 !important; */
   width: 100%;
   z-index: 1000;
   background: transparent;
   transition: all 0.3s ease;
}

.navbar-dark .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2030'%3E%3Cpath%20stroke='rgba(255,255,255,1)'%20stroke-width='2'%20stroke-linecap='round'%20stroke-miterlimit='10'%20d='M4%207h22M4%2015h22M4%2023h22'/%3E%3C/svg%3E") !important;
}

#mainNav{ background: transparent; transition: ease all .3s;}
/* .navbarShrink{ transition: ease all .3s; box-shadow: none;} */

.navbarTop {
   padding: 1rem;
   background: transparent;
   color: white;
   transition: all 0.3s ease;
}
.navbarMenu {
   padding: 2rem 0;
   background: transparent;
   transition: all 0.3s ease;
   box-shadow: none;
   text-align: center;
}


#mainNav.navbarShrink .navbarTop {
   background: #eeeeee !important;
   color: var(--primary) !important;
}

#mainNav.navbarShrink .navbarMenu {
   background: #ffffff;
   padding: 1rem 0;
   color: var(--primary) !important;
   box-shadow: var(--bs-box-shadow);
}
#mainNav.navbarShrink .navbarTop a, #mainNav.navbarShrink .navbarMenu a {
   color: var(--primary) !important;
}
#navbarMenu .nav-item a{
   color: var(--white) !important;
   font-size: 1rem !important;
   letter-spacing: 0.05em;
}
#navbarMenu .nav-item a:hover, #navbarMenu .nav-item a.active{
   color: var(--white) !important;
}

.nav-item .dropdown-menu{
   width: 690px;
}


#mainNav.navbarShrink .navbarMenu a.nav-link:hover{
   color: var(--blueLight) !important;
}
.nav-dropdown-title{
   color: var(--blueLight) !important;
}

.nav-dropdown-link:hover{
   background-color: var(--light-azure) !important;
}

.dropdown-item:focus, .dropdown-item:hover, .dropdown-item.active, .dropdown-item:active {
   color: var(--primary) !important;
   background-color: transparent !important;
}

/* Navbar item dropdown */
.custom-sub-menu:hover .dropdown-menu {
   display: block !important;
   border: 1px solid #E2E8F0;
}

.custom-sub-menu .dropdown-menu {
   left: 50% !important;
   transform: translateX(-50%) !important;
   min-width: 300px;
   max-width: 700px;
   width: auto !important;
}

.custom-sub-menu > div a:hover {
   background: var(--light);
}

/* Navbar Mobile */
#mobileNav {
   z-index: 1500;
   transform: translateX(110%);
   transition: .2s linear;
   -o-transition: .2s linear;
   -moz-transition: .2s linear;
   -webkit-transition: .2s linear
}

#mobileNav.open {
   transform: translateX(0)
}

/* Banner responsive */
.banner{
   margin-top: 134px;
}
@media (max-width: 990px){
   .banner{
      margin-top:44px !important;
   }
}

/* end ---*/

/* FOOTER
---------------*/
footer {
   background: var(--light) !important;
}

.socialIcons a{
   width: 56px !important;;
   height: 50px !important;;
}
.socialIcons a:before {
   position: absolute;
   z-index:0;
   content: '';
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background-color: var(--secondary);
   transition: all .3s ease;
}
.socialIcons a:hover:before {
   background-color: var(--primary) !important;
   width: 45px;
   height: 45px;
}

/* end ---*/

/* HOME
---------------*/

#hero {
   height: 90vh;
   height: 90dvh;
   max-height: 800px !important;
   position: relative;
}

@media (max-width: 767px){
   #hero{
      min-height: 85vh !important;
   }  
}

@media (max-width:565px){
   #hero{
      min-height: 95vh !important;
   }
   
}

@media (max-width: 767px){
   .heroContent{
      background-color: var(--light);
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
   }
   .heroText{
      font-size: 1rem !important;
      color: var(--primary) !important;
   }
   .heroName{
      color: var(--primary) !important;
   }
}

/* Banner Pagination */

.hero-pagination-container {bottom: 4em;}
@media (min-width: 992px) and (max-width: 1366px){
   .hero-pagination-container {bottom: 1.2em;}
}

.hero-pagination {color: var(--white);}

.hero-pagination.active {
   font-weight: 500;
   color: var(--secondary);
}

.hero-pagination > div {
   width: 100%;
   height: 4px;
   margin-bottom: .4rem;
   background-color: var(--border);
}

.hero-pagination.active > div {background-color: var(--primary);}



.splide__arrow {
   -ms-flex-align: center;
   align-items: center;
   background: var(--white) !important;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   display: -ms-flexbox;
   display: flex !important;
   height: 2em;
   -ms-flex-pack: center;
   justify-content: center;
   opacity: .7;
   padding: 0;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 2em;
   z-index: 1;
}

/* end ---*/



/* Products
---------------*/
.productCard:hover{
   box-shadow: var(--bs-box-shadow) !important;
}
/* end ---*/


/* Colors */


.text-primary {color: var(--primary) !important;}
.text-gray {color: var(--gray) !important;}
.text-blueLight {color: var(--blueLight) !important;}
.text-textos {color: var(--textos) !important;}
.text-secondary {color: var(--secondary) !important;}

.hover\:text-primary:hover {color: var(--primary) !important;}

.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-blueLight {background-color: var(--blueLight) !important;}
.bg-lightSmoke {background-color: var(--light-smoke) !important;}
.bg-cover{background-size:cover !important; background-repeat:no-repeat !important;}



/* Fonts */

.fs-7 {font-size: .95rem;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .7rem;}

/* Sizes */
.moreInfo:hover{
   padding: .25rem .5rem .25rem 1rem !important;
   background-color: #ffffff;
   color:var(--textos) !important;
}
.moreInfo .moreInfoArrowBg{
   background-color: var(--white) !important;
}

.moreInfo:hover .moreInfoArrowBg{
   background-color: var(--secondary) !important;
}
.moreInfo:hover .moreInfoArrowBg .svgStroke{
   stroke: var(--white);
}


/* .moreInfoSecondary .moreInfoArrowBg{
background-color: var(--secondary) !important;
}
.moreInfoSecondary-50 .moreInfoArrowBg{
background-color: #FFF0E6 !important;
}
.moreInfoSecondary-50 .moreInfoArrowBg .svgStroke{
stroke: var(--secondary) !important
}

.moreInfoSecondary:hover{
padding: .5rem 1rem .5em 1rem !important;
background-color: var(--secondary) !important;
color: var(--white) !important;
} */


.w-fit {width: fit-content;}
.w-screen {width: 100vw; width: 100dvw;}
.h-screen {height: 100vh; height: 100dvh;}

/* Opacity */

.opacity-60{
   opacity: .6;
}

/* Cols 5 */
@media (min-width: 1200px) {
   .col-lg-2-4 {
      flex: 0 0 auto;
      width: 20%; 
   }
}

.gradient-overlay {
   position: relative;
   display: inline-block;
}

.gradient-overlay::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, rgba(255,106,2,0.6), rgba(255,255,255,0.9));
}

.image-with-gradient::after {
   mix-blend-mode: multiply;
}

/* Components */

.icon-md {
   width: 30px;
   height: 30px;
   min-width: 30px;
   min-height: 30px;
}

.icon-lg {
   width: 40px;
   height: 40px;
   min-width: 40px;
   min-height: 40px;
}

/* Buttons */

.btn-secondary {
   --bs-btn-color: var(--white) !important;
   --bs-btn-bg: var(--secondary);
   --bs-btn-border-color: var(--secondary);
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--primary);;
   --bs-btn-hover-border-color: var(--primary);
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: var(--primary);
   --bs-btn-active-border-color: var(--primary);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--white);
   --bs-btn-disabled-bg: var(--white);
   --bs-btn-disabled-border-color: var(--white);
}

.btn-secondary:hover svg path[stroke="#FF6A02"] {
   stroke: var(--primary);
}


.btn-outline-primary {
   --bs-btn-color: var(--blueLight) !important;
   --bs-btn-bg: var(--white);
   --bs-btn-border-color: var(--white);
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--blueLight);;
   --bs-btn-hover-border-color: var(--white);
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: var(--blueLight);
   --bs-btn-active-border-color: var(--white);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--white);
   --bs-btn-disabled-bg: var(--white);
   --bs-btn-disabled-border-color: var(--white);
}

.btn-outline-light {
   --bs-btn-color: var(--primary) !important;
   --bs-btn-bg: var(--white);
   --bs-btn-border-color: var(--white);
   --bs-btn-hover-color: var(--primary) !important;
   --bs-btn-hover-bg: var(--light-azure);;
   --bs-btn-hover-border-color: var(--light-azure);
   --bs-btn-active-color: var(--primary) !important;
   --bs-btn-active-bg: var(--light-azure) !important;
   --bs-btn-active-border-color: var(--light-azure) !important;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--white);
   --bs-btn-disabled-bg: var(--white);
   --bs-btn-disabled-border-color: var(--white);
}

.btn-outline-secondary-light {
   --bs-btn-color: var(--primary) !important;
   --bs-btn-bg: var(--white);
   --bs-btn-border-color: var(--white);
   --bs-btn-hover-color: var(--primary) !important;
   --bs-btn-hover-bg: var(--light-orange);;
   --bs-btn-hover-border-color: var(--light-orange);
   --bs-btn-active-color: var(--primary) !important;
   --bs-btn-active-bg: var(--light-orange) !important;
   --bs-btn-active-border-color: var(--light-orange) !important;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--white);
   --bs-btn-disabled-bg: var(--white);
   --bs-btn-disabled-border-color: var(--white);
}

.btn-primary{
   --bs-btn-color: var(--white) !important;
   --bs-btn-bg: var(--blueLight);
   --bs-btn-border-color: var(--white);
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--primary);;
   --bs-btn-hover-border-color: var(--white);
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: var(--blueLight);
   --bs-btn-active-border-color: var(--white);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--textos);
   --bs-btn-disabled-bg: var(--white);
   --bs-btn-disabled-border-color: var(--white);
}

.btn-pagination{
   --bs-btn-color: var(--textos) !important;
   --bs-btn-bg: var(--white);
   --bs-btn-border-color: var(--white);
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--blueLight);;
   --bs-btn-hover-border-color: var(--white);
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: var(--blueLight);
   --bs-btn-active-border-color: var(--white);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--textos);
   --bs-btn-disabled-bg: var(--white);
   --bs-btn-disabled-border-color: var(--white);
}


.btn-video {
   background: rgba(255,255,255,0.2);
   backdrop-filter: blur(10px);
   border: 2px solid white;
   transition: all 0.3s ease;
}
.btn-video:hover {
   background: rgba(255,255,255,0.3);
   transform: scale(1.05);
}


/* Animations */

.transition-03 {
   transition: all linear .3s;
   -o-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -webkit-transition: all linear .3s;
}
.transition-02 {
   transition: all linear .2s;
   -o-transition: all linear .2s;
   -moz-transition: all linear .2s;
   -webkit-transition: all linear .2s;
}

/******************************************/
/** Forms                                **/
/******************************************/

.form-select,
.form-control,
.input-group {
   border-radius: 8px;
   border: 1px solid #D9D9D9;
}

.input-group:active,
.input-group:focus,
.input-group:focus-within,
.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
   box-shadow: none;
   border-color: var(--primary);
   background-color: transparent;
}

.input-group.disabled,
.form-control:disabled,
.form-select:disabled {
   border-color: #D9D9D9 !important;
   background-color: #D9D9D9 !important;
}

.form-check-input {
   min-width: 1em !important;
   min-height: 1em !important;
}

.form-check-input:checked {
   border-color: var(--primary) !important;
   background-color: var(--primary) !important;
}

.form-check-input:focus {
   box-shadow: none;
   border-color: #D9D9D9 !important;
}

::placeholder {
   opacity: 1;
   color: var(--gray) !important;
}
::-ms-input-placeholder {color: var(--gray) !important;}