@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {  /* Base tokens */
--clr-gray-700:#4E4E4E; 
--clr-gray-400:#9D9D9D; 
--clr-red-600:#BD1818; 
--clr-green-500:#75D653; 
--clr-orange-500:#FF9416; 
--clr-teal-500:#0DBDBD; 
--clr-blue-500:#1B3954; 
--font-01:"Poppins", sans-serif; 
--font-02:"Raleway", sans-serif;
 }

.font-01 { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }
.font-01-bold { font-family: "Poppins", sans-serif; font-weight: 800; font-style: normal; }
.font-02 { font-family: "Raleway", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }

h2 { font-family: var(--font-01); font-weight: 600; line-height: 28px; color: var(--clr-gray-700); margin-top: 35px;}
h3 { font-family: var(--font-01); font-weight: 600; line-height: 23px; font-size: 1.4em; color: var(--clr-orange-500); margin-bottom: 35px;  }


/* Nav System */ 
.nav-item .nav-link { color:white !important; padding-left: 15px !important; padding-right: 15px !important; font-size: 0.9em !important; }


.nav-item .nav-link  { border-radius: 50px; border: 1px solid var(--clr-orange-500); margin-right: 20px;}
.nav-item .nav-link.active { background-color: white; color: #9d9d9d !important; border: 1px solid black; }
.navbar-nav li:last-child { margin-right: 0px; }

/* Cards */
.card-product-flex { display: flex; flex-wrap: wrap; justify-content: center; }
.card-product-flex a { text-decoration: none; }

.card-product-homepage {
    background: url(../images/background_homepage_Contents.svg);
    position: relative;
    top: -47px;
    padding-top: 63px;
    padding-bottom: 46px;
    background-repeat: no-repeat;
    background-size: cover;
}

.card-link:hover { transform: scale(1.05,1.05); transition: 0.3s all;   }

.card-link-alternative { margin-top: 20px; margin-bottom: -20px;}
.card-link-alternative .card-product-wrap { background: none; border: 1px solid var(--clr-orange-500); border-radius: 5px; padding: 5px 20px; width: unset; height: unset; box-shadow: 0px 5px 5px #00000026; }
.card-link-alternative .card-product-wrap .title-group { display: flex; align-items: center; gap:20px}
.card-link-alternative .card-product-wrap .title-group .icon img { height: 40px;}
.card-link-alternative .card-product-wrap .link { position: relative; margin-inline: auto; margin: 20px auto; } 

.card-product-wrap { width: 300px; height: 300px; background: url(../images/icon_Square.png) no-repeat; background-size: contain; padding: 24px 40px 0px 20px; font-family: var(--font-01); position:relative; margin-bottom: 30px; }
.card-product-wrap .category { color: var(--clr-gray-700); font-weight: bold; font-size: 1em; line-height: 21px; text-transform: uppercase; }
.card-product-wrap .title { font-size: 1.5em; font-family: var(--font-01); font-weight: 700; line-height: 23px; color: var(--clr-green-500); }
.card-product-wrap .icon { display: flex; align-items: center; justify-content: center; padding: 20px 0px; }
.card-product-wrap .icon img { height: 90px; }
.card-product-wrap .description { text-align: center; font-size: 0.9em; line-height: 18px; color: var(--clr-gray-400); font-weight: 500; }
.card-product-wrap .link { position: absolute; bottom: -8px; left: 0; right: 0; width: max-content; margin-inline: auto; background-color: var(--clr-blue-500); border-radius: 20px; padding: 3px 14px; color: var(--clr-orange-500); font-weight: 500; }
.card-product-wrap .link a { color: var(--clr-orange-500); text-decoration: none; }

#theme-page-navigation .nav-item-sub-opener:after { font-family: "bootstrap-icons" ; content: "\F279"; }
.navbar-brand { color: white !important }

/* Detail Page */
.content-background {  

    height: calc(100vh - 76px);
    margin-block-end: calc(-100vh + 190px);

    /* Define a “altura” uma vez (podes trocar por px/rem/vw/clamp) */
     /* usa svh/dvh p/ mobile, ou põe 48rem, 60vw, etc. */
      /* -60 de 80 = -0.75 */ 
    /* --h: min(80svh, 500px);     
    height: var(--h);
    margin-block-end: calc(-0.75 * var(--h)); 
    background-attachment: fixed; */
    }

.content-background-wrap { margin-inline: auto; top: 0px; height: fit-content; padding: 20px 0px; transition: 0.5s all;  }


.content-header {display: flex;align-items: center;}
.content-header .icon {background-color: white;border-radius: 100%;width: 100px;height: 100px;padding: 21px;display: flex;align-items: center;justify-content: center;margin-right: 20px;}
.content-header .icon img {width: 100%;}
.content-header .title-group {display: flex;align-items: flex-start;flex-direction: column;font-family: var(--font-01);font-weight: 700;line-height: 23px;color: var(--clr-green-500);text-shadow: 0px 4px 3px #00000026;}
.content-header .categoria {font-weight: bold;line-height: 30px;text-transform: uppercase;color: white;font-size: 1.2em;}
.content-header .titulo {font-size: 1.5em;font-family: var(--font-01);font-weight: 700;line-height: 48px;color: white;font-size: 3em;/* font-family: var(--font-01); */}

/* Container */

.contents-background { background-color: #ffffffb0; backdrop-filter: blur(10px); border-radius: 10px; }
.container-infobox { background-color: white; padding: 50px; border-radius: 5px; box-shadow: 0 0 19px #ff94167d; margin-top: 20px; }

.container-product-service-wrap { font-family: var(--font-01); gap:25px 0px; margin-bottom: 40px; }
.container-product-service-wrap .product { }
.container-product-service-wrap .icon img { height: 80px; }
.container-product-service-wrap .title { font-size: 1.3em; font-weight: 600; color: var(--clr-gray-700);}
.container-product-service-wrap .contents {
    padding: 20px;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 9px;
    gap: 20px;
    min-height: 150px;}

.container-product-service-wrap .description strong { color:var(--clr-teal-500) }
figure.effect-zoom { border-radius: 10px; aspect-ratio: 1.8;}

.footer-company { display: flex;align-items: flex-start;flex-direction: column;}
.footer-company span:first-child { color: #ffffff;font-weight: 500;font-size: 1.6em;line-height: 19px;font-style: italic;}
.footer-company span:last-child  { color: rgb(216 184 130);font-family: var(--font-02);font-size: 0.9em;font-weight: 700;}

.theme-footer-imprint  { text-align: center;    line-height: 12px;    margin: 16px 0px;  }
.theme-footer-imprint a { text-decoration: none; font-size: 0.8em !important; }
.theme-footer-imprint a:hover { color:var(--clr-orange-500) !important }

.theme-page-breadcrumb { padding: 20px; }

.footer-phone {display: flex;align-items: center;flex-direction: column;}
.footer-phone a {background-color: var(--clr-orange-500);color:black;border-radius: 20px;padding: 8px 20px;text-decoration: none;font-weight: bold;}
.footer-phone span {color: var(--clr-gray-400);font-size: 0.7em;}

@media (min-width: 1400px) {
    html body form#Form .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 1200px) {
    #theme-page-navigation .logo {
        height: 50px;
    }
}

@media only screen and (max-width: 600px) {

    #theme-page-main { margin: 10px;}

    .content-background-wrap { padding: 20px 20px; }
    .content-header .icon { width: 80px; height: 80px; padding: 15px; margin-right: 20px; }
    .content-background { background-position: center !important; margin-block-end: calc(-0.9 * var(--h)); }

    .content-header .titulo     { font-size: 1.8em; line-height: 40px; }
    .content-header .categoria  { line-height: 0px; color: white; font-size: 1em; }

    .card-product-homepage { background: none; top: 0px; padding-top: 30px; padding-bottom: 46px; background-color: var(--clr-orange-500); }
    .card-product-flex { margin-top: 40px; }
    .card-product-wrap {margin-bottom: 50px;}

    .container-infobox { background-color: white; padding: 24px; margin-inline: auto; width: 95%; margin-bottom: 30px; }

    .content-header .icon { width: 60px; height: 60px; padding: 12px; margin-right: 20px; } 
    .content-header .icon img { width: 35px; }

    #theme-page-navigation .navbar-nav > .nav-item { border-bottom: 1px solid #e5e5e529; padding: 20px; }
    #theme-page-navigation .nav-item-sub-opener { top: 22px; right: 59px; background: transparent; }
    #theme-page-navigation .nav-item-sub-opener:after { font-family: "bootstrap-icons"; content: "\F279"; color: black; font-weight: 600; }
    #theme-page-navigation .nav-item-sub-opener.show:after { content: "\F27C"; color: black; font-weight: 600; }
    #theme-page-navigation .offcanvas-body .dropdown-menu { background-color: transparent; border: 0px; text-align: center; }
    #theme-page-navigation .offcanvas-body .dropdown-menu .nav-item { border-bottom: 1px solid var(--bs-primary); border-radius: 50px; background-color: transparent; margin: 10px 0px; }
    #theme-page-navigation .offcanvas-body .dropdown-menu .nav-item .dropdown-item:hover, 
    #theme-page-navigation .offcanvas-body .dropdown-menu .nav-item .dropdown-item.active { border-radius: 50px; text-align: center; } 
    #theme-page-navigation .offcanvas-body .navbar-nav .nav-item .nav-link { font-size: 1.4em !important; padding-left: 1rem; text-align: center; font-family: var(--font-01); }

    .navbar-toggler { background-color: var(--clr-orange-500); border-radius: 50px; }   



    .offcanvas-header {
        background-color: var(--clr-blue-500);
    }

}