/******************************************/
/** Fonts                              **/
/******************************************/
@font-face {
   font-family: 'Teko';
   src: url('/fonts/Teko/static/Teko-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
}

@font-face {
   font-family: 'Teko';
   src: url('/fonts/Teko/static/Teko-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Teko';
   src: url('/fonts/Teko/static/Teko-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'Teko';
   src: url('/fonts/Teko/static/Teko-SemiBold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
}

@font-face {
   font-family: 'Teko';
   src: url('/fonts/Teko/static/Teko-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
}
/******************************************/
/** General                              **/
/******************************************/

:root {
   --primary: #E52822;
   --secondary: #0095FF;
	--black: #000000;
   --dark: #111010;
   --gray: #555555;
   --texto: #888888;
   --light: #f2f2f2;
	--white: #ffffff;
   --ghost_white: #F9F9F9;
   --gray-medium: #B7B7B7;
   
}

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

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--texto);
   background-color: var(--white);
   font-family: 'Teko', "Roboto";
}
body {
   position: relative; /* referência para o absolute */
   min-height: 100vh;
}

/******************************************/
/** Helpers                              **/
/******************************************/

/* Colors */

.text-primary {color: var(--primary) !important;}
.text-black {color: var(--black) !important;}
.text-textos {color: var(--texto)!important;}
.text-gray-medium {color: var(--gray-medium) !important;}

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

.bg-primary {background-color: var(--primary) !important;}
.bg-dark {background-color: var(--dark) !important;}
.bg-ghost-white {background-color: var(--ghost_white) !important;}

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

/* Fonts */

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

.f-text{
   font-family: "Roboto" !important;
}
/* Sizes */

.button {padding: 15px 25px;}

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

/* Translates */
.translate-middle-y-md {
   transform: translateY(-50%);
}
@media (max-width: 767.98px) {
   .translate-middle-y-md {
         transform: none;
   }
}

/* 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;
}

/* Animations */

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

/******************************************/
/** 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;}

/* Sidebar */

.sidebar{
   height: 100%;
   position: fixed;
   z-index: 1100 !important;
   width: 100px;
   right: 0;
   top: 0;
   padding-top: 130px;
}

#top, footer {
   margin-right: 100px !important;
}

@media (max-width: 1279px) {
   .sidebar{
      display: none !important;
   }
   #top, footer{
      margin-right: 0px !important;
   }
}
/* Navbar */

#mainNav {
   background-color: var(--white) !important; /* sempre branco na borda */
}

#mainNav .container::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, var(--white) 50%, var(--dark) 50%);
   border-radius: 0 30px 0 0;
   z-index: -1;
}

#mainNav .nav-link{
   font-size: 16px;
   text-transform: uppercase;
   color: var(--white);
}

#mainNav .navbarTop .nav-link, #mainNav .navbarTop span{
   opacity: 0.7;
}

@media (max-width: 1279px) {
   #mainNav .container::before{
      border-radius: 0;
   }

}

.dropdown-menu-custom {
   position: absolute;
   background-color: var(--light);
   min-width: 270px;
   padding: 0;
   margin: 0;
   list-style: none;
   z-index: 999;
   top: 100%;
   left: 0;
   opacity: 0;
   transform: translateY(15px);
   overflow: hidden;
   pointer-events: none;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 20px;
   border-bottom: none;
   border-top: 3px solid var(--primary);
   transition: all 0.3s ease;
}

.custom-sub-menu{
   position: relative;
}
.custom-sub-menu:hover .dropdown-menu-custom {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

.dropdown-menu-custom li a {
   display: block;
   padding: 12px 20px;
   color: var(--black);
   text-decoration: none;
   border-bottom: 1px solid var(--light);
   transition: all 0.3s ease;
}

.dropdown-menu-custom li a:hover {
   background-color: var(--primary);
   color: var(--white);
   padding-left: 40px;
}
.navbar-nav.nav-item.nav-link {
   color: var(--white);
}
.navbar-nav .nav-item.active > .nav-link{
   color: var(--primary) !important;
   font-weight: 600;
}

/* Hero */

.heroTitle{
   font-family: 'Teko';
   font-style: normal;
   font-weight: 600;
   font-size: 150px;
   line-height: 215px;
   letter-spacing: 20px;
   text-transform: uppercase;
}

@media (max-width: 1279px) {
   .heroTitle {
      font-size: 120px;
      line-height: 150px; /* Ajuste proporcional */
      letter-spacing: 15px; /* Reduzindo o espaçamento */
   }
}

@media (max-width: 1024px) {
   .heroTitle {
      font-size: 100px;
      line-height: 120px;
      letter-spacing: 12px;
   }
}

@media (max-width: 768px) {
   .heroTitle {
      font-size: 80px;
      line-height: 70px;
      letter-spacing: 8px;
   }
}

@media (max-width: 480px) {
   .heroTitle {
      font-size: 50px;
      line-height: 50px;
      letter-spacing: 5px;
      text-align: center;
   }
}

/* Banner */

.bannerTitle{
   font-family: 'Teko';
   font-style: normal;
   font-weight: 600;
   font-size: 60px;
   line-height: 86px;
}

/* Imagem marca de agua */

.marca-agua {
   top: 10%;
   left: 5%;
   width: 460px;
   height: auto;
   opacity: 0.5;
   pointer-events: none;
}

.padding-top-marca-agua{
   padding-top: 200px;
}

@media (max-width: 768px) {
   .marca-agua {
      display: none;
   }
   .padding-top-marca-agua{
      padding-top: 0;
   }
}


/* Scroll button */

#scroll-button {
   opacity: 0;                  
   transform: translateY(50px);
   right: 30px;
   bottom: 20px;
   z-index: 1101;
   transition: all 0.5s ease-out;
   border: 3px solid var(--white);
}

#scroll-button.show {
   opacity: 1;
   transform: translateY(0);
}

/* Footer */
footer{
   background-color: var(--dark) !important;
   border-radius: 0 80px 0 0;
   position: relative;
   z-index: 1;  
}
@media (max-width: 1279px) {
   footer{
      border-radius: 0 !important;
   }
}

/* Contacte nos component */
.background-element {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 600px;
   background-color: var(--primary);
   z-index: 0;
   border-radius: 0 80px 0 0;
}

.background-element::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 650px;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M0,128L48,117.3C96,107,192,85,288,112C384,139,480,213,576,224C672,235,768,181,864,160C960,139,1056,149,1152,165.3C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
   background-size: cover;
   opacity: 0.3;
   pointer-events: none;
}

/* Footer background */
.footer-background {
   position: absolute;
   bottom: 0;
   left: 0;
   width: calc(100% - 100px);
   height: 320px;
   background-color: var(--ghost_white);
   z-index: 0;
   margin-right: 100px;
}

.footer-contactar{
   padding-bottom: 350px !important;
}

@media (max-width: 1279px) {
   .background-element{
      border-radius: 0;
   }
}
@media (max-width: 767.98px) {
   .footer-contactar{
      padding-bottom: 20px !important;
   }
   .background-element{
      display: none;
   }
}

/* Breadcrumb */

.custom-breadcrumb{
   --bs-breadcrumb-divider: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9' fill='none' viewBox='0 0 6 9'><path d='M1 8.5L5 4.5L1 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.breadcrumb-item a{
   transition: color 0.3s ease;
}

.breadcrumb-item a:active, .breadcrumb-item a:hover{
   color: var(--primary)!important;
}


.breadcrumb-item a:active, .breadcrumb-item a:hover{
   color: var(--primary)!important;
}

/* Buttons */
.btn-primary {
   --bs-btn-font-weight: 500 !important;
   --bs-btn-color: var(--white) !important;
   --bs-btn-bg: var(--primary) !important;
   --bs-btn-border-color: transparent !important;
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: #c8231b !important;
   --bs-btn-hover-border-color: transparent !important;
   --bs-btn-focus-shadow-rgb: 229, 40, 34 !important;
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: #b21e17 !important;
   --bs-btn-active-border-color: transparent !important;
}

.btn-primary-outline {
   --bs-btn-font-weight: 500 !important;
   --bs-btn-color: var(--primary) !important;
   --bs-btn-bg: var(--white) !important;
   --bs-btn-border-color: var(--primary) !important;
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--primary) !important;
   --bs-btn-hover-border-color: var(--primary) !important;
   --bs-btn-focus-shadow-rgb: 229, 40, 34 !important;
   --bs-btn-active-color: var(--primary) !important;
   --bs-btn-active-bg: #b21e17 !important;
   --bs-btn-active-border-color: var(--primary) !important;
}

.btn-secondary {
   --bs-btn-font-weight: 500 !important;
   --bs-btn-color: var(--gray-medium) !important;
   --bs-btn-bg: 'transparent' !important;
   --bs-btn-border-color: var(--gray-medium) !important;
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--primary) !important;
   --bs-btn-hover-border-color: var(--primary) !important;
   --bs-btn-focus-shadow-rgb: 229, 40, 34 !important;
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: var(--primary) !important;
   --bs-btn-active-border-color: var(--primary) !important;
}

.btn-hover{
   border-radius: 0px 20px 0px 0px;
   transition: border-radius 0.4s ease-in-out;
}

.btn-hover:hover{
   border-radius: 0px;
}

.btn-hover-back{
   border-radius: 20px 0px 0px 0px;
   transition: border-radius 0.4s ease-in-out;
}
.btn-hover-back:hover{
   border-radius: 0px;
}

.btn-download > svg path{
   fill: var(--primary)!important;
}

.btn-download:hover > svg path{
   fill: var(--white)!important;
}

.btn-primary-outline > svg{
   stroke: var(--primary)!important;
}

.btn-primary-outline:hover > svg{
   stroke: var(--white)!important;
}