/* reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-weight: normal; font-size: 100%; line-height: 1; list-style: none; outline: 0px; } /* root */ :root { --white: #FFF; --black: #000; --orange: #F57800; --orange-2: #F37821; --blue: #0150A7; --light-blue: #D7EBFF; --light-blue-2: #A1C2EA; --light-blue-3: #C4DEF8; --light-blue-4: #F4FAFF; --red: #FB6D6D; } /* fonts */ @font-face { font-family: 'Montserrat Light'; src: url('../fonts/Montserrat/static/Montserrat-Light.ttf'); } @font-face { font-family: 'Montserrat Regular'; src: url('../fonts/Montserrat/static/Montserrat-Regular.ttf'); } @font-face { font-family: 'Montserrat Medium'; src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf'); } @font-face { font-family: 'Montserrat Semibold'; src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf'); } @font-face { font-family: 'Montserrat Bold'; src: url('../fonts/Montserrat/static/Montserrat-Bold.ttf'); } @font-face { font-family: 'Lobster'; src: url('../fonts/Lobster-Regular.ttf'); } /* global class */ .container { display: block; width: auto; max-width: 1400px; height: auto; margin: 0px auto; padding: 0px 30px; } /* general config */ a { text-decoration: none; } p { font-size: 16px; } img { display: block; } html { background-color: var(--black); scroll-behavior: smooth; } body { background-color: var(--dark-blue); font-family: 'Montserrat Light', sans-serif; } /* area-banner */ /* #area-banner { background: url("../img/banner-home.jpg") no-repeat center; background-size: cover; height: 85vh; } */ #area-banner { background: url("https://nathor.com/wp-content/uploads/2025/06/banner-home-scaled.jpg") no-repeat center; background-size: cover; height: 85vh; } /* area-banner -> header */ .area-banner-header { background: url('../img/onde-comprar/white-bg.svg') no-repeat center bottom; background-size: cover; } .area-banner-header .container { position: relative; display: flex; align-items: center; justify-content: space-between; height: clamp(120px, 8vw, 145px); } .area-banner-header .container .area-banner-logo img { width: clamp(170px, 17vw, 315px); } .area-banner-header .container nav .menu-top-side { display: none; } .area-banner-header .container nav .area-banner-list { display: flex; align-items: center; } .area-banner-header .container nav .area-banner-list li { padding: 15px 20px 10px 20px; z-index: 1; } .area-banner-header .container nav .area-banner-list li.produtos { position: relative; cursor: pointer; border-radius: 10px 10px 0px 0px; } .area-banner-header .container nav .area-banner-list li.produtos:hover { background-color: var(--light-blue); } .area-banner-header .container nav .area-banner-list li.produtos .dropdown { position: absolute; left: 0; top: 41px; width: 100%; height: 0px; border-radius: 0px 0px 10px 10px; overflow: hidden; transition: all .5s ease; } .area-banner-header .container nav .area-banner-list li.produtos .dropdown ul { background-color: var(--light-blue); padding: 0px 17px 6px 17px; border-radius: 0px 0px 10px 10px; } .area-banner-header .container nav .area-banner-list li.produtos .dropdown ul li { padding: 10px 0px !important; } .area-banner-header .container nav .area-banner-list li.produtos .dropdown ul li a { color: var(--blue); font-family: 'Montserrat Regular', sans-serif; font-size: 14px; } .area-banner-header .container nav .area-banner-list li.produtos .dropdown ul li a:hover { font-family: 'Montserrat Bold', sans-serif; color: var(--orange-2); } .area-banner-header .container nav .area-banner-list li.produtos .dropdown ul li:not(:last-child) { border-bottom: 1px solid #a8a8a8a9; } .area-banner-header .container nav .area-banner-list li.produtos:hover .dropdown { height: 300px; } .area-banner-header .container nav .area-banner-list li a { color: var(--blue); font-family: 'Montserrat Semibold', sans-serif; font-size: 15px; text-wrap: nowrap; } .area-banner-header .container .area-banner-button { border: none; border-radius: 5px; padding: 12px 15px; font-size: 15px; background-color: var(--orange); } .area-banner-header .container .area-banner-button a { color: var(--white); font-family: 'Montserrat Semibold', sans-serif; font-size: 14px; text-wrap: nowrap; } .area-banner-logo, .area-banner-list, .area-banner-button { margin-bottom: 20px; } /* area-banner -> header -> hamburguer menu icon */ .menu-button { background-color: transparent; border: none; width: 48px; height: 48px; cursor: pointer; display: none; margin-bottom: 30px; } .menu-icon, .menu-icon::before, .menu-icon::after { background-color: var(--blue); width: 40px; height: 4px; border-radius: 5px; position: absolute; } .menu-icon::before, .menu-icon::after { content: ""; } .menu-icon::after { transform: translate(-20px, -12px); } .menu-icon::before { transform: translate(-20px, 12px); } /* area-banner -> texts */ #area-banner .area-banner-texts .container { position: relative; height: calc(85vh - 145px); } #area-banner .area-banner-texts .container .welcome { position: absolute; bottom: 21%; left: 60px; width: clamp(300px, 85vw, 465px); color: var(--white); } #area-banner .area-banner-texts .container .welcome h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(18px, 4vw,31px); margin-bottom: 12px; } #area-banner .area-banner-texts .container .welcome h2 span { font-family: 'Lobster', sans-serif; font-size: clamp(35px, 7vw, 56px); } #area-banner .area-banner-texts .container .welcome p { font-size: clamp(13px, 2vw, 16px); line-height: 1.7; } /* search-bar */ #search-bar { background-color: var(--light-blue); } #search-bar .container { position: relative; } /* search-bar -> popup */ #search-bar .container .popup { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); background-color: var(--light-blue-3); width: 857px; height: 0px; border-radius: 20px 20px 0px 0px; padding: 0px 45px; overflow: hidden; transition: all .3s ease; display: flex; align-items: center; justify-content: center; } #search-bar .container .popup > p { font-family: 'Montserrat Regular', sans-serif; color: var(--blue); line-height: 1.7; padding: 0px 30px 0px 55px; text-align: justify; } #search-bar .container .popup > p > strong { font-family: 'Montserrat Semibold', sans-serif; } #search-bar .container .popup .close-button { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } #search-bar .container .popup .close-button img { width: 165px; } #search-bar .container .popup .close-button > p { font-family: 'Montserrat Regular', sans-serif; position: absolute; left: 50%; top: 50%; transform: translateX(-52%); color: var(--blue); font-size: 13px; cursor: pointer; } /* search-bar -> section principal */ #search-bar .container .filter-box { display: flex; align-items: center; justify-content: space-between; height: 90px; } /* search-bar -> section principal -> bike-ideal */ #search-bar .container .filter-box .bike-ideal { cursor: pointer; display: flex; gap: 15px; width: 231.5px; } #search-bar .container .filter-box .bike-ideal h2 { font-family: 'Montserrat Bold', sans-serif; font-size: 25px; color: var(--blue); } /* search-bar -> section principal -> warning */ #search-bar .container .filter-box .warning { background-color: var(--red); border-radius: 15px; display: flex; align-items: center; gap: 20px; padding: 8px 40px; transform: translateX(-50px); } #search-bar .container .filter-box .warning p { font-family: 'Montserrat Semibold', sans-serif; color: var(--white); } #search-bar .container .filter-box .warning button { background-color: var(--red); border: 1px solid var(--white); color: var(--white); padding: 7px 20px; font-family: 'Montserrat Semibold', sans-serif; cursor: pointer; } #search-bar .container .filter-box .warning.first-box { display: none; } #search-bar .container .filter-box .warning.second-box { display: none; } /* search-bar -> section principal -> select-box */ #search-bar .container .filter-box .select-box { display: flex; align-items: center; gap: 30px; } #search-bar .container .filter-box .select-box .select-container { display: flex; align-items: center; gap: 10px; } #search-bar .container .filter-box .select-box .select-container .number { font-family: 'Montserrat Bold', sans-serif; font-size: 22px; color: var(--blue); text-align: center; } #search-bar .container .filter-box .select-box .select-container #altura-input, #search-bar .container .filter-box .select-box .select-container #altura-cavalo-input { width: 160px; } #search-bar .container .filter-box .select-box .select-container #altura-input::placeholder, #search-bar .container .filter-box .select-box .select-container #altura-cavalo-input::placeholder { font-family: 'Montserrat Semibold', sans-serif; font-size: 16px; color: var(--blue); letter-spacing: 0.02625rem; } #search-bar .container .filter-box .select-box .select-container #altura-input::-webkit-outer-spin-button, #search-bar .container .filter-box .select-box .select-container #altura-input::-webkit-inner-spin-button, #search-bar .container .filter-box .select-box .select-container #altura-cavalo-input::-webkit-outer-spin-button, #search-bar .container .filter-box .select-box .select-container #altura-cavalo-input::-webkit-inner-spin-button { -webkit-appearance: none; } #search-bar .container .filter-box .select-box .select-container #altura-input, #search-bar .container .filter-box .select-box .select-container #altura-cavalo-input { -moz-appearance: textfield; } #search-bar .container .filter-box .select-box .search-bar-question-icon { cursor: pointer; } /* search-bar -> section principal -> botao-de-busca */ #search-bar .container .filter-box .search-bar-button { border: none; border-radius: 5px; padding: 13px 30px; font-size: 15px; background-color: var(--blue); z-index: 9999; color: white; font-weight: bold; cursor: pointer; } #search-bar .container .filter-box .search-bar-button:hover { border: none; border-radius: 5px; padding: 13px 30px; font-size: 15px; background-color: white; z-index: 9999; color: var(--blue); cursor: pointer; } /* search-bar -> section principal -> dropdown dos botoes da barra */ .dropdown-options { display: none; position: absolute; background-color: white; border: 1px solid var(--light-blue); z-index: 1000; list-style: none; width: 200px; } .toggle-dropdown:checked + #select-button + .dropdown-options { display: block; } .alertas { position: absolute; right: 0; bottom: 0; } /* nathor-body */ #nathor-body { background: url("../img/body-background-1.png") no-repeat center; background-size: cover; /*max-height: 1425px;*/ } #nathor-body .container .bike-lists { padding: 80px 0px;} #nathor-body .container .bike-lists h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--blue); text-align: center; } /* nathor-body -> carousel */ #nathor-body .container .bike-lists .carousel { overflow: hidden; display: flex; position: relative; } #nathor-body .container .bike-lists .carousel .leftButton { position: absolute; top: 50%; left: 0; transform: translateY(-120%); cursor: pointer; z-index: 1; display: none; } #nathor-body .container .bike-lists .carousel .rightButton { position: absolute; top: 50%; right: 0; transform: translateY(-120%); cursor: pointer; z-index: 1; } #nathor-body .container .bike-lists .carousel .carousel-container { position: relative; height: 580px; width: 100%; display: flex; align-items: center; } #nathor-body .container .bike-lists .carousel ul { display: flex; align-items: center; gap: 50px; height: 580px; position: absolute; left: 50%; transform: translateX(-270px); transition: all .5s ease; } #nathor-body .container .bike-lists .carousel ul li { transition: all .6s ease; display: block !important; } #nathor-body .container .bike-lists .carousel ul li span { text-align: center; font-family: 'Montserrat Bold', sans-serif; color: var(--blue); } #nathor-body .container .bike-lists .carousel figure { width: 350px; height: 350px; display: grid; place-content: center; opacity: .5; transition: all .6s ease; pointer-events: none; } #nathor-body .container .bike-lists .carousel figure img { width: 100%; } #nathor-body .container .bike-lists .carousel .start figure { width: 540px; height: 450px; transition: all .6s ease; opacity: 1; pointer-events: auto; } .carousel ul li.start .product-title { display: block !important; } /* nathor-body -> bikes-list-bar */ #nathor-body .container .bike-lists .bikes-list-bar { display: flex; justify-content: center; } #nathor-body .container .bike-lists .bikes-list-bar ul { background-color: var(--light-blue-3); border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 14px; height: 50px; width: 95%; padding: 0px 30px; } #nathor-body .container .bike-lists .bikes-list-bar ul li { width: 108.13px; text-align: center; z-index: 1; position: relative; } #nathor-body .container .bike-lists .bikes-list-bar ul li a { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); text-wrap: nowrap; } #nathor-body .container .bike-lists .bikes-list-bar .orange-arrow { position: absolute; left: 50%; transform: translate(-50%, -63%); transition: all .5s ease; } /* nathor-body -> kids-cycling */ #nathor-body .container .kids-cycling { display: flex; padding: 80px 0px 65px; } #nathor-body .container .kids-cycling article:nth-of-type(1) { width: 50%; } #nathor-body .container .kids-cycling article:nth-of-type(1) h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 34px; color: var(--orange); margin-bottom: 25px; padding-right: 200px; } #nathor-body .container .kids-cycling article:nth-of-type(1) p { font-family: 'Montserrat Regular', sans-serif; color: var(--blue); line-height: 1.7; text-align: justify; } #nathor-body .container .kids-cycling article:nth-of-type(2) { width: 50%; padding: 125px 0px 0px 100px; } #nathor-body .container .kids-cycling article:nth-of-type(2) h2 { font-family: 'Lobster', sans-serif; font-size: 46px; color: var(--blue); } #nathor-body .container .kids-cycling article:nth-of-type(2) span { display: inline-block; margin-top: 85px; position: relative; } #nathor-body .container .kids-cycling article:nth-of-type(2) span a { font-family: 'Montserrat Bold', sans-serif; font-size: 22px; color: var(--blue); } #nathor-body .container .kids-cycling article:nth-of-type(2) span a::before { position: absolute; content: ''; background: url('../img/caret-right-fill.svg') no-repeat; background-size: contain; width: 40px; height: 40px; right: -45px; top: -8px; } /* nathor-body -> factory */ #factory { background: url('../img/fabrica.jpg') no-repeat center left fixed; background-size: cover; height: 600px; } /* nathor-body -> brands */ #brands { background: url('../img/body-background-2.png') no-repeat center; background-size: cover; min-height: 897px; } #brands .container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 80px 30px; } #brands .container section { width: 55%; } #brands .container section h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 34px; color: var(--orange); margin-bottom: 25px; width: 780px; } #brands .container section p { font-family: 'Montserrat Regular', sans-serif; color: var(--blue); line-height: 1.7; } #brands .container section ul { display: flex; align-items: center; gap: clamp(5px, 5vw, 40px); margin-top: 90px; } #brands .container section span { display: block; margin-top: 100px; position: relative; text-align: end; } #brands .container section span a { font-family: 'Montserrat Bold', sans-serif; font-size: 22px; color: var(--blue); margin-right: 100px; text-wrap: nowrap; } #brands .container section span a::before { position: absolute; content: ''; background: url('../img/caret-right-fill.svg') no-repeat; background-size: contain; width: 40px; height: 40px; right: 56px; top: -8px; } #brands .container figure { display: grid; place-content: center; } /* footer */ #footer { background-color: var(--orange-2); padding: 80px 30px; height: 400px; } #footer .container { height: 100%; display: flex; flex-direction: column; justify-content: center; } #footer .container .informations { display: flex; align-items: center; justify-content: space-between; gap: 40px; } #footer .container .informations .address { font-family: 'Montserrat Regular', sans-serif; color: var(--white); line-height: 1.3; } #footer .container .informations .address span { font-family: 'Montserrat Bold', sans-serif; font-size: 26px; line-height: 2.0; } #footer .container .informations .contacts { font-family: 'Montserrat Bold', sans-serif; font-size: 18px; color: var(--white); line-height: 1.7; } #footer .container .informations .contacts .social-media { display: flex; align-items: center; flex-direction: column; gap: 15px; } #footer .container .informations .contacts .social-media .social-media-box { display: flex; gap: 20px; } #footer .container .informations .contacts .social-media .social-media-box img { width: 35px; } #footer .container .informations .links { display: flex; gap: 40px; } #footer .container .informations .links li { padding: 5px 0px; } #footer .container .informations .links li a { font-family: 'Montserrat Semibold', sans-serif; font-size: 13px; color: var(--white); } #footer .container .nathor-rights { font-family: 'Montserrat Medium', sans-serif; color: var(--white); margin-top: 40px; } /* PÁGINA PRODUTOS */ /* area-banner-produtcs */ #area-banner-products { background: url("../img/produtos-resultado/header-background.png") no-repeat center; background-size: cover; height: 85vh; } /* area-banner-products -> texts */ #area-banner-products .area-banner-texts .container { position: relative; height: calc(85vh - 145px); } #area-banner-products .area-banner-texts .container .welcome { position: absolute; top: 50%; transform: translateY(-65px); width: 490px; color: var(--white); text-align: center; } #area-banner-products .area-banner-texts .container .welcome h2 { font-family: 'Montserrat Bold', sans-serif; font-size: 65px; margin-bottom: 16px; } #area-banner-products .area-banner-texts .container .welcome p { font-family: 'Lobster', sans-serif; font-size: 49px; line-height: .9; } #area-banner-products .area-banner-texts .container .bikes { position: absolute; right: 0; top: 50%; transform: translateY(-200px); } #area-banner-products .area-banner-texts .container .bikes figure img { width: 800px; } /* search-bar */ #search-bar .container .bikes-categories { display: flex; align-items: center; justify-content: center; height: 65px; position: relative; } #search-bar .container .bikes-categories .orange-arrow { position: absolute; top: 0; left: 50%; transform: translate(-50%, -24.7px); z-index: 1; } #search-bar .container .bikes-categories .orange-arrow img { height: 64.5px; } #search-bar .container .bikes-categories li { position: relative; width: 100%; text-align: center; } #search-bar .container .bikes-categories li:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; height: 40px; width: 1px; background-color: var(--white); transform: translateY(-50%); } #search-bar .container .bikes-categories li a { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); text-align: center; } /* search-area */ #search-area { background-color: var(--white); padding: 80px 0px; } #search-area .container { display: flex; } /* search-area -> filter */ #search-area .container .filter { width: 200px; } #search-area .container .filter .filtros header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } #search-area .container .filter .filtros header h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 22px; color: var(--blue); } #search-area .container .filter .filtros .search-blue-bar { display: flex; align-items: center; gap: 20px; } #search-area .container .filter .filtros .search-blue-bar h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 22px; color: var(--blue); display: none; } #search-area .container .filter .filtros .search-blue-bar input { border-radius: 20px; height: 38px; border: none; background-color: var(--light-blue); color: var(--blue); padding: 0px 20px; width: 100%; transform: translateX(-10px); } #search-area .container .filter .filtros .search-blue-bar input::placeholder { color: var(--blue); font-family: 'Montserrat Regular', sans-serif; } /* search-area -> filter -> categoria */ #search-area .container .filter .categoria { margin-top: 40px; padding-bottom: 18px; border-bottom: 1px solid var(--light-blue-2); } #search-area .container .filter .categoria h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 16px; color: var(--blue); margin-bottom: 10px; } #search-area .container .filter .categoria .aleatorio li a { display: block; padding: 8px 12px; width: fit-content; font-family: 'Montserrat Regular', sans-serif; color: var(--blue); border-radius: 5px; cursor: pointer; } #search-area .container .filter .categoria .aleatorio li a:hover { background-color: var(--light-blue); } #search-area .container .filter .categoria .aleatorio .categoria-checkbox { font-family: 'Montserrat Regular', sans-serif; width: fit-content; border-radius: 5px; color: var(--blue); cursor: pointer; display: block; padding: 8px 12px; } #search-area .container .filter .categoria .aleatorio .categoria-checkbox:hover { background-color: var(--light-blue); } #search-area .container .filter .categoria .aleatorio .categoria-checkbox input { display: none; } #search-area .container .filter .categoria .aleatorio .categoria-checkbox:has(input:checked) { background-color: var(--light-blue); } /* search-area -> filter -> temas e coleções */ #search-area .container .filter .temas-e-colecoes { padding: 20px 0px; border-bottom: 1px solid var(--light-blue-2); } #search-area .container .filter .temas-e-colecoes h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 16px; color: var(--blue); margin-bottom: 10px; } #search-area .container .filter .temas-e-colecoes ul li { padding: 6px 0px; display: flex; align-items: center; } #search-area .container .filter .temas-e-colecoes ul li .custom-checkbox { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(14px, 2vw, 18px); color: var(--blue); display: flex; align-items: center; cursor: pointer; } #search-area .container .filter .temas-e-colecoes ul li .custom-checkbox input[type="checkbox"] { display: none; } #search-area .container .filter .temas-e-colecoes ul li .custom-checkbox .checkmark { width: 20px; height: 20px; background-color: var(--light-blue); border-radius: 4px; display: inline-block; position: relative; margin-right: 10px; } #search-area .container .filter .temas-e-colecoes ul li .custom-checkbox .checkmark::after { content: ""; position: absolute; display: none; left: 6px; top: 1px; width: 6px; height: 11px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); } #search-area .container .filter .temas-e-colecoes ul li .custom-checkbox input[type="checkbox"]:checked + .checkmark::after { display: block; } /* search-area -> filter -> cores */ #search-area .container .filter .cores { padding: 20px 0px; } #search-area .container .filter .cores h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 16px; color: var(--blue); margin-bottom: 15px; } #search-area .container .filter .cores ul { display: flex; flex-wrap: wrap; gap: 5px; width: 90px; } #search-area .container .filter .cores ul li label { cursor: pointer; } #search-area .container .filter .cores ul li label input[type="checkbox"] { display: none; } /* search-area -> filter -> limpar-fitro */ #search-area .container .filter .limpar-filtro { padding: 20px 0px; } #search-area .container .filter .limpar-filtro a { border: none; border-radius: 6px; background-color: var(--blue); padding: 8px 20px; color: var(--white); font-family: 'Montserrat Medium', sans-serif; font-size: 14px; cursor: pointer; } /* search-area -> results */ #search-area .container .results { flex: 1; padding: 0px 100px; } #search-area .container .results .title { text-align: center; color: var(--orange-2); font-family: 'Montserrat Bold', sans-serif; font-size: 34px; } #search-area .container .results .order { display: flex; align-items: center; justify-content: flex-end; gap: 8px; cursor: pointer; } #search-area .container .results .order span { font-family: 'Montserrat Regular', sans-serif; font-size: 15px; color: var(--blue); } #search-area .container .results header { display: flex; align-items: center; gap: 15px; } #search-area .container .results article { padding: 40px 0px; } #search-area .container .results article .product-row { display: flex; flex-wrap: wrap; column-gap: 20px; padding: 30px 0px; } #search-area .container .results article .product-row .product-item { text-align: center; width: 300px; } #search-area .container .results article .product-row .product-item .product-image a { height: 210px; display: flex; justify-content: center; } #search-area .container .results article .product-row .product-item .product-image a img { width: auto; } #search-area .container .results article .product-row .product-item .product-title { margin: 15px 0px 7px; } #search-area .container .results article .product-row .product-item .product-title a { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); font-size: 16px; display: block; height: 32px; text-transform: uppercase; } #search-area .container .results article .product-row .product-item .product-details { font-family: 'Montserrat Semibold', sans-serif; color: gray; font-size: 13px; margin-bottom: 18px; line-height: 1.3; } #search-area .container .results article .product-row .product-item .product-details-image { display: flex; justify-content: center; gap: 5px; } #search-area .container .results article .product-row .divider { border-top: 1px solid rgba(109, 109, 109, 0.2); margin-top: 30px; width: 100%; } #search-area .container .results article .category-header { display: flex; align-items: center; gap: 20px; } #search-area .container .results article .category-header h4 { text-transform: uppercase; } #search-area .container .results article .category-header .category-divider { border: 1px solid var(--orange-2); flex: 1; height: 0px; } #search-area .container .results #products-list .linha-header { display: flex; align-items: center; } #search-area .container .results #products-list .linha-header h4 { color: var(--orange-2); font-family: 'Montserrat Bold', sans-serif; position: relative; margin-right: 10px; text-wrap: nowrap; } #search-area .container .results #products-list .linha-header .orange-line { border: 1px solid var(--orange-2); width: 100%; } #search-area .container .results #products-list .product-listing .divider-line { width: 100%; border: 1px solid #E6E6E6; } #search-area .container .results #products-list .product-listing .divider-line:last-of-type { border: none; } /* PÁGINA PRODUTO-DETALHE */ /* search-area-detail */ #search-area-detail { background-color: var(--white); padding: 80px 0px 20px; } #search-area-detail .container { display: flex; } /* search-area-detail -> filter */ #search-area-detail .container .filter { width: 200px; } /* search-area-detail -> filter -> filtros */ #search-area-detail .container .filter .filtros header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } #search-area-detail .container .filter .filtros header h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 22px; color: var(--blue); } #search-area-detail .container .filter .filtros .search-blue-bar { display: flex; align-items: center; gap: 20px; } #search-area-detail .container .filter .filtros .search-blue-bar h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 22px; color: var(--blue); display: none; } #search-area-detail .container .filter .filtros .search-blue-bar input { border-radius: 20px; height: 38px; border: none; background-color: var(--light-blue); color: var(--blue); padding: 0px 20px; width: 100%; transform: translateX(-10px); } #search-area-detail .container .filter .filtros .search-blue-bar input::placeholder { color: var(--blue); font-family: 'Montserrat Regular', sans-serif; } /* search-area-detail -> filter -> categoria */ #search-area-detail .container .filter .categoria { margin-top: 40px; padding-bottom: 18px; border-bottom: 1px solid var(--light-blue-2); } #search-area-detail .container .filter .categoria h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); margin-bottom: 10px; } #search-area-detail .container .filter .categoria .aleatorio li span { font-family: 'Montserrat Regular'; font-size: clamp(13px, 2vw, 16px); color: var(--blue); } /* search-area-detail -> filter -> idade */ #search-area-detail .container .filter .idade { padding: 20px 0px; font-family: 'Montserrat Regular', sans-serif; border-bottom: 1px solid var(--light-blue-2); } #search-area-detail .container .filter .idade h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 16px; color: var(--blue); margin-bottom: 10px; } #search-area-detail .container .filter .idade ul li a { display: block; padding: 8px 12px; width: 80%; font-family: 'Montserrat Regular', sans-serif; color: var(--blue); border-radius: 5px; cursor: pointer; } #search-area-detail .container .filter .idade ul li a:hover { background-color: var(--light-blue); } /* search-area-detail -> filter -> temas e coleções */ #search-area-detail .container .filter .temas-e-colecoes { padding: 20px 0px; font-family: 'Montserrat Regular', sans-serif; border-bottom: 1px solid var(--light-blue-2); } #search-area-detail .container .filter .temas-e-colecoes h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); margin-bottom: 10px; } #search-area-detail .container .filter .temas-e-colecoes ul li:not(:last-child) { padding-bottom: 7px; } #search-area-detail .container .filter .temas-e-colecoes ul li span { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); } /* search-area-detail -> filter -> cores */ #search-area-detail .container .filter .cores { padding: 20px 0px; } #search-area-detail .container .filter .cores h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); margin-bottom: 15px; } #search-area-detail .container .filter .cores ul { display: flex; flex-wrap: wrap; gap: 5px; width: 90px; } /* search-area-detail -> filter -> back-button */ #search-area-detail .container .filter .back-button { padding: 20px 0px; display: flex; align-items: center; } #search-area-detail .container .filter .back-button img { width: 25px; margin-right: 4px; } #search-area-detail .container .filter .back-button a { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(15px, 2vw, 20px); color: var(--orange); } /* search-area-detail -> results */ #search-area-detail .container .results { flex: 1; padding-left: 3%; } #search-area-detail .container .results .title { text-align: center; color: var(--orange-2); font-family: 'Montserrat Bold', sans-serif; font-size: 34px; } #search-area-detail .container .results .order { display: flex; align-items: center; justify-content: flex-end; gap: 8px; cursor: pointer; } #search-area-detail .container .results .order span { font-family: 'Montserrat Regular', sans-serif; font-size: 15px; color: var(--blue); } #search-area-detail .container .results header { display: flex; align-items: center; justify-content: space-around; gap: 15px; } #search-area-detail .container .results header .route { font-family: 'Montserrat Medium', sans-serif; color: #808080; font-size: 13px; } #search-area-detail .container .results .bike-detail { padding: 80px 0px; } #search-area-detail .container .results .bike-detail > figure { width: 100%; display: flex; justify-content: center; position: relative; } #search-area-detail .container .results .bike-detail a { display: flex; justify-content: center; } #search-area-detail .container .results .bike-detail > figure img { width: clamp(300px, 50vw, 100%) !important; } #search-area-detail .container .results .bike-detail > figure > .bike-detail-age { position: absolute; top: 35px; left: 77.5%; height: 130px; width: clamp(30px, 11vw, 84px); border-radius: 10px; z-index: 900; } /* #search-area-detail .container .results .bike-detail > figure > .bike-detail-age > .linha-idade-recomendada > img { width: clamp(50px, 20vw, 100%) !important; } */ #search-area-detail .container .results .bike-detail > span { display: block; text-align: center; font-family: 'Montserrat Bold', sans-serif; font-size: clamp(18px, 3vw, 30px); color: var(--blue); margin-top: 40px; } #search-area-detail .container .results .bike-detail #inmetro_description { text-align: center; color: var(--blue); font-family: 'Montserrat Regular', sans-serif; line-height: 1.5; font-size: clamp(10px, 2vw, 13px); padding-top:10px; text-transform: uppercase; font-style: italic } #search-area-detail .container .results .bike-detail .bike-detail-info { display: flex; padding: 40px 10px 30px; } #search-area-detail .container .results .bike-detail .bike-detail-info .texts { border-right: 2px solid #e2ebf4; padding-right: 35px; } #search-area-detail .container .results .bike-detail .bike-detail-info .texts p { color: var(--blue); font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); line-height: 1.4; } #search-area-detail .container .results .bike-detail .bike-detail-info .texts p:not(:last-child) { margin-bottom: 20px; } #search-area-detail .container .results .bike-detail .bike-detail-info .buttons { padding-left: 35px; } #search-area-detail .container .results .bike-detail .bike-detail-info .buttons ul li { position: relative; } #search-area-detail .container .results .bike-detail .bike-detail-info .buttons ul li:not(:last-child) { margin-bottom: 18px; } #search-area-detail .container .results .bike-detail .bike-detail-info .buttons ul li a { font-family: 'Montserrat Bold', sans-serif; font-size: 14px; color: var(--blue); background-color: var(--light-blue); width: 232px; padding: 14px 0px 14px 54px; border-radius: 5px; cursor: pointer; display: block; } #search-area-detail .container .results .bike-detail .bike-detail-info .buttons ul li.diferenciais a::before { position: absolute; content: ''; background: url('../img/medalha-icon.png') no-repeat center; background-size: contain; top: 50%; left: 13px; width: 28px; height: 28px; transform: translateY(-50%); } #search-area-detail .container .results .bike-detail .bike-detail-info .buttons ul li.onde-comprar a::before { position: absolute; content: ''; background: url('../img/venda-icon.png') no-repeat center; background-size: contain; top: 50%; left: 16px; width: 23px; height: 28px; transform: translateY(-50%); } #search-area-detail .container .results .bike-detail .bike-detail-info .buttons ul li.video-montagem a::before { position: absolute; content: ''; background: url('../img/ferramenta-icon.png') no-repeat center; background-size: contain; top: 50%; left: 16px; width: 23px; height: 28px; transform: translateY(-50%); } #search-area-detail .container .results .bike-detail .bike-detail-info .buttons ul li.manual a::before { position: absolute; content: ''; background: url('../img/manual-icon.png') no-repeat center; background-size: contain; top: 50%; left: 14px; width: 28px; height: 27px; transform: translateY(-50%); } #search-area-detail .container .results .bike-detail .bike-detail-info .informacoes-produto {padding-top: 15px} #search-area-detail .container .results .bike-detail .bike-detail-info .informacoes-produto p {color: var(--blue); font-family: 'Montserrat Regular', sans-serif; line-height: 1.5; font-size: 13px;} #search-area-detail .container .results .bike-detail .bike-detail-bar { background-color: var(--light-blue); padding: 15px 20px; border-radius: 15px; margin: 50px 0px 70px; } #search-area-detail .container .results .bike-detail .bike-detail-bar ul { display: flex; align-items: center; justify-content: space-around; gap: 20px; height: 100%; } #search-area-detail .container .results .bike-detail .bike-detail-bar ul li { font-family: 'Montserrat Medium', sans-serif; font-size: clamp(13px, 2vw, 18px); color: var(--blue); width: 220px; text-align: center; position: relative; display: flex; align-items: center; justify-content: center; height: 100%; } #search-area-detail .container .results .bike-detail .bike-detail-bar ul li .white-arrow { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); transition: all .5s ease; } #search-area-detail .container .results .bike-detail .bike-detail-bar ul li .white-arrow img { height: 48px; } #search-area-detail .container .results .bike-detail .bike-detail-bar ul li.characteristics { font-family: 'Montserrat Bold', sans-serif; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions { padding: 0px 60px; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article { display: flex; align-items: center; gap: 40px; position: relative; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article:not(:last-child)::after { content: ''; border-bottom: 1px solid var(--light-blue-2); width: 100%; position: absolute; bottom: 0; right: 0; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article:not(:first-child) { padding-top: 20px; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article:not(:last-child) { padding-bottom: 20px; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article figure { width: clamp(50px, 22vw, 200px); display: flex; align-items: center; justify-content: center; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article figure img { width: 85%; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article .description { width: calc(100% - 240px); position: relative; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article .description h4 { font-family: 'Montserrat Bold', sans-serif; font-size: clamp(15px, 2vw, 18px); color: var(--blue); margin-bottom: 15px; } #search-area-detail .container .results .bike-detail .bike-detail-descriptions article .description p { color: var(--blue); line-height: 1.6; font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); } #search-area-detail .container .results .bike-detail .bike-detail-descriptions > p { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); padding-left: 60px; } #search-area-detail .container .results .bike-detail .technical-information { display: none; } #search-area-detail .container .results .bike-detail .technical-information ul { padding: 0px 60px; } #search-area-detail .container .results .bike-detail .technical-information ul li { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); padding: 8px 0px; } #search-area-detail .container .results .bike-detail .technical-information ul li > span { font-weight: bold; } #search-area-detail .container .results .bike-detail .technical-information > p { font-family: 'Montserrat Semibold'; font-size: clamp(13px, 2vw, 16px); color: var(--blue); padding-left: 60px; margin-top: 15px; } #search-area-detail .container .results .bike-detail .product-dimensions { display: none; } #search-area-detail .container .results .bike-detail .product-dimensions .nathor-dimensions-image { padding: 0px 20px; } #search-area-detail .container .results .bike-detail .product-dimensions .nathor-dimensions-image img { width: 100%; } #search-area-detail .characteristics, #search-area-detail .information, #search-area-detail .dimensions { cursor: pointer; z-index: 1; } /* Menu-principal (nativo do Wordpress) */ .menu-principal-whatsapp a { display: flex; align-items: center; padding: 5px; position: relative; } .menu-principal-whatsapp a:before { content: ''; background-image: url('https://nathor.com/wp-content/themes/nathor/assets/img/whatsapp-icon.png'); background-size: contain; background-repeat: no-repeat; display: inline-block; margin-right: 5px; width: 25px; height: 25px; } .menu-principal-whatsapp a span, .menu-principal-whatsapp a { text-indent: -9999px; overflow: hidden; white-space: nowrap; } /* PÁGINA ONDE COMPRAR */ /* area-banner-where-buy */ #area-banner-where-buy { background: url("../img/onde-comprar/banner.png") no-repeat center center; background-size: cover; height: 85vh; } /* area-banner-where-buy -> texts */ #area-banner-where-buy .area-banner-texts .container { position: relative; height: calc(85vh - 145px); } #area-banner-where-buy .area-banner-texts .container article { position: absolute; right: 0%; top: 50%; transform: translate(-10%, -50%); color: var(--white); display: flex; flex-direction: column; align-items: center; gap: 4px; } #area-banner-where-buy .area-banner-texts .container article h2 { font-family: 'Lobster', sans-serif; font-size: clamp(35px, 7vw, 65px); text-wrap: nowrap; } #area-banner-where-buy .area-banner-texts .container article p { font-family: 'Montserrat Medium', sans-serif; font-size: clamp(22px, 4vw, 28px); color: var(--orange-2); text-align: justify; line-height: 1.7; text-wrap: nowrap; } /* search-bar-where-buy */ #search-bar-where-buy { background-color: var(--light-blue); } #search-bar-where-buy .container .list { display: flex; align-items: center; height: 65px; font-family: 'Montserrat Bold', sans-serif; color: var(--blue); text-align: center; } #search-bar-where-buy .container .list .list-item { display: flex; align-items: center; gap: 20px; padding: 0px 20px; position: relative; cursor: pointer; } #search-bar-where-buy .container .list .list-item > span { text-wrap: nowrap; } #search-bar-where-buy .container .list .list-item:not(:first-child)::before { position: absolute; left: 0; content: ''; height: 40px; border: 1px solid var(--white); } #search-bar-where-buy .container .list .list-item.three::after { position: absolute; content: ''; right: -8px; background: url('../img/caret-right-fill.svg') no-repeat center; background-size: contain; width: 20px; height: 20px; } #search-bar-where-buy .container .list .list-item .select-box { display: flex; align-items: center; gap: 15px; width: 0px; overflow: hidden; transition: all 1s ease; } #search-bar-where-buy .orange-arrow { position: absolute; left: 50%; transform: translateX(-50%); } #search-bar-where-buy .orange-arrow-2 { position: absolute; left: 65px; display: none; } #search-bar-where-buy .orange-arrow img, #search-bar-where-buy .orange-arrow-2 img { height: 65px; } .contato-loja-anchor-telefone { text-wrap: nowrap; } /* revendas-nathor */ #revendas-nathor { background: url("../img/onde-comprar/banner-body.png") no-repeat top; background-size: 100% auto; background-color: var(--white); } #revendas-nathor .container { padding: 120px 30px; } /* revendas-nathor -> revendas */ #revendas-nathor .container .revendas { width: min(100%, 555px); margin-bottom: 100px; } #revendas-nathor .container .revendas h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--orange-2); margin-bottom: 25px; } #revendas-nathor .container .revendas p { line-height: 1.5; color: var(--blue); font-size: clamp(13px, 2vw, 18px); } #revendas-nathor .container .revendas p:first-of-type { margin-bottom: 30px; font-family: 'Montserrat Regular', sans-serif; } #revendas-nathor .container .revendas p:last-of-type { font-family: 'Montserrat Semibold', sans-serif; } /* revendas-nathor -> revendas-online */ #revendas-nathor .container .revendas-online h2 { font-family: 'Montserrat Bold', sans-serif; font-size: clamp(22px, 3vw, 27px); color: var(--blue); padding-bottom: 20px; border-bottom: 1px solid var(--blue); width: min(100%, 600px); margin-bottom: 80px; } /* revendas-nathor -> revendas-online -> lojas */ #revendas-nathor .container .revendas-online .lojas { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 300px)); gap: 80px; } #revendas-nathor .container .revendas-online .lojas .lojas-container { text-align: center; } #revendas-nathor .container .revendas-online .lojas .lojas-container img { width: 100%; height: 150px; margin-bottom: 35px; } #revendas-nathor .container .revendas-online .lojas .lojas-container .titulo { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; } #revendas-nathor .container .revendas-online .lojas .lojas-container .titulo a { color: var(--blue); } #revendas-nathor .container .revendas-online .lojas .lojas-container .cidade { font-family: 'Montserrat Semibold'; color: var(--orange-2); font-size: 13px; } /* revendas-nathor -> lojas-fisicas */ #revendas-nathor .container .lojas-fisicas { display: none; } #revendas-nathor .container .lojas-fisicas > h2 { font-family: 'Montserrat Bold', sans-serif; font-size: clamp(22px, 3vw, 27px); color: var(--blue); padding-bottom: 20px; border-bottom: 1px solid var(--blue); width: min(100%, 600px); margin-bottom: 55px; } #revendas-nathor .container .lojas-fisicas > h2 > span { color: var(--orange-2); } #revendas-nathor .container .lojas-fisicas .lojas-fisicas-container { display: flex; align-items: center; margin-bottom: 30px; } #revendas-nathor .container .lojas-fisicas .lojas-fisicas-container .endereco-container { padding: 0px 20px 0px 35px; border-right: 2px solid var(--blue); position: relative; } #revendas-nathor .container .lojas-fisicas .lojas-fisicas-container .endereco-container::before { position: absolute; left: -3px; content: ''; background: url('../img/onde-comprar/geo-alt-fill.svg') no-repeat center; background-size: contain; width: 30px; height: 30px; } #revendas-nathor .container .lojas-fisicas .lojas-fisicas-container .endereco-container .nome-loja { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); } #revendas-nathor .container .lojas-fisicas .lojas-fisicas-container .endereco-container .endereco { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); } #revendas-nathor .container .lojas-fisicas .lojas-fisicas-container a { font-family: 'Montserrat Semibold', sans-serif; color: var(--orange-2); padding: 0px 20px; } /* PÁGINA REVENDEDOR */ /* area-banner-resale */ #area-banner-resale { background: url("../img/banner_revenda.jpg") no-repeat center; background-size: cover; height: 85vh; } /* area-banner-resale -> texts */ #area-banner-resale .area-banner-texts .container { position: relative; height: calc(85vh - 145px); } #area-banner-resale .area-banner-texts .container article { position: absolute; left: 0%; top: 50%; transform: translate(10%, -35%); color: var(--white); display: flex; flex-direction: column; align-items: center; gap: 4px; } #area-banner-resale .area-banner-texts .container article h2 { font-family: 'Lobster', sans-serif; font-size: clamp(35px, 7vw, 65px); } #area-banner-resale .area-banner-texts .container article p { font-family: 'Montserrat Medium', sans-serif; font-size: clamp(22px, 4vw, 28px); color: var(--orange-2); text-align: justify; line-height: 1.7; } /* revenda */ #revenda {background-color: var(--white); } #revenda .container { display: flex; padding: 90px 30px; } #revenda .container section { width: 45%; } #revenda .container .revenda-nathor { padding-right: 117px; padding-top: 65px; } #revenda .container .revenda-nathor h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--orange-2); margin-bottom: 25px; } #revenda .container .revenda-nathor p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); margin-bottom: 25px; line-height: 1.5; } #revenda .container .revenda-nathor .porque { margin-top: 75px; } #revenda .container .revenda-nathor .porque h2 { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: clamp(22px, 4vw, 28px); padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--blue); text-transform: uppercase; } #revenda .container .revenda-nathor .porque strong { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); } #revenda .container .cadastro { background-color: var(--light-blue); padding: 80px 85px; } #revenda .container .cadastro h2 { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: clamp(20px, 3vw, 25px); padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--blue); text-transform: uppercase; } #revenda .container .cadastro p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.5; } #revenda .container .cadastro .strong { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); margin-top: 30px; } #revenda .container .cadastro form { margin-top: 50px; display: flex; flex-direction: column; gap: 10px; } #revenda .container .cadastro form input { border: none; border-radius: 20px; padding: 9px 12px; } #revenda .container .cadastro form input::placeholder, #revenda .container .cadastro form textarea::placeholder { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); } #revenda .container .cadastro form .box-autorizacao { display: flex; margin-top: 20px; } #revenda .container .cadastro form .box-autorizacao input { align-self: flex-start; margin: 3px 10px; width: 52px; height: 22px; } #revenda .container .cadastro form .box-autorizacao label { font-style: italic; } #revenda .container .cadastro form button { border: none; border-radius: 5px; padding: 13px 30px; font-size: 15px; background-color: var(--blue); color: var(--white); font-family: 'Montserrat Semibold', sans-serif; font-size: 18px; width: fit-content; text-align: center; margin: 0 auto; cursor: pointer; margin-top: 20px; } #revenda .container .cadastro form button:hover { background-color: var(--white); color: var(--blue); } /* revenda -> sucesso */ #revenda .container .sucesso { background-color: var(--light-blue); padding: 80px 85px; display: none; } #revenda .container .sucesso h2 { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: 25px; padding-bottom: 15px; margin-bottom: 20px; text-transform: uppercase; border-bottom: 1px solid var(--blue);} #revenda .container .sucesso p:nth-of-type(1) {font-family: 'Montserrat Regular', sans-serif; color: var(--blue); margin-bottom: 25px; line-height: 1.5; } #revenda .container .sucesso .strong {font-family: 'Montserrat Bold', sans-serif; color: var(--blue); margin-top: 30px; } #revenda .container .sucesso .icone {position: absolute; height: 250px;} #revenda .container .sucesso .icone img {height: 100%; position: relative; left:50%; transform: translate(-10%); } /* PÁGINA CONTATO */ /* area-banner-contact */ #area-banner-contact { background: url("../img/contato/contato-banner.png") no-repeat center; background-size: cover; height: 85vh; } /* area-banner-contact -> texts */ #area-banner-contact .area-banner-texts .container { position: relative; height: calc(85vh - 145px); } #area-banner-contact .area-banner-texts .container article { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--white); display: flex; flex-direction: column; align-items: center; gap: 4px; } #area-banner-contact .area-banner-texts .container article h2 { font-family: 'Lobster', sans-serif; font-size: clamp(35px, 7vw, 65px); text-wrap: nowrap; } #area-banner-contact .area-banner-texts .container article p { font-family: 'Montserrat Medium', sans-serif; font-size: clamp(22px, 4vw, 28px); color: var(--orange-2); text-align: justify; line-height: 1.7; text-wrap: nowrap; } /* search-bar-contact */ #search-bar-contact { background-color: var(--light-blue); } #search-bar-contact .container section { position: relative; } #search-bar-contact .container section .list { display: flex; align-items: center; justify-content: center; height: 65px; font-family: 'Montserrat Bold', sans-serif; color: var(--blue); text-align: center; } #search-bar-contact .container section .list .list-item { display: flex; align-items: center; gap: 20px; padding: 0px 35px; position: relative; cursor: pointer; } #search-bar-contact .container section .list .list-item:not(:first-child)::before { position: absolute; left: 0; content: ''; height: 40px; border: 1px solid var(--white); } #search-bar-contact .container section .orange-arrow { position: absolute; left: 50%; transform: translateX(-50%); } #search-bar-contact .container section .orange-arrow img { height: 65px; } /* fale-conosco */ #fale-conosco { background-color: var(--white); } #fale-conosco .container { padding: 120px 30px; display: flex; align-items: center; gap: 200px; } /* fale-conosco -> fale */ #fale-conosco .container .fale { width: 532px; } #fale-conosco .container .fale h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--orange-2); margin-bottom: 25px; } #fale-conosco .container .fale > p { line-height: 1.5; color: var(--blue); font-size: clamp(13px, 2vw, 16px); font-family: 'Montserrat regular', sans-serif; } #fale-conosco .container .fale > p > strong { font-family: 'Montserrat Semibold', sans-serif; } /* fale-conosco -> fale -> numeros-contato */ #fale-conosco .container .fale .numeros-contato { margin-top: 35px; position: relative; } #fale-conosco .container .fale .numeros-contato::after { position: absolute; content: ''; left: 0px; bottom: -35px; border-bottom: 2px solid var(--light-blue); width: 85%; } #fale-conosco .container .fale .numeros-contato p { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(15px, 3vw, 22px); color: var(--orange-2); line-height: 1.2; } #fale-conosco .container .fale .numeros-contato p strong { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: clamp(13px, 2vw, 18px); } /* fale-conosco -> fale -> horarios-atendimento */ #fale-conosco .container .fale .horarios-atendimento { margin-top: 50px; } #fale-conosco .container .fale .horarios-atendimento h4 { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); line-height: 1.7; } #fale-conosco .container .fale .horarios-atendimento p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(14px, 2vw, 16px); color: var(--blue); line-height: 1.7; } /* fale-conosco -> enderecos -> siga */ #fale-conosco .container .enderecos .siga h4 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(18px, 3vw, 22px); color: var(--orange-2); line-height: 1.2; } #fale-conosco .container .enderecos .siga figure { display: flex; align-items: center; gap: 10px; margin-top: 5px; } /* fale-conosco -> enderecos -> endereco */ #fale-conosco .container .enderecos .endereco { margin-top: 35px; } #fale-conosco .container .enderecos .endereco h4 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(18px, 3vw, 22px); color: var(--orange-2); line-height: 1.2; } #fale-conosco .container .enderecos .endereco p { font-family: 'Montserrat Regular', sans-serif; color: var(--blue); font-size: clamp(14px, 2vw, 16px); line-height: 1.7; } /* map */ #map {height: 500px; overflow: hidden; } #map iframe {height: 100%; width: 100%; border: none;} /* assistencia-tecnica */ #assistencia-tecnica {background-color: var(--white); display: none;} #assistencia-tecnica .container { display: flex; padding: 90px 30px; } #assistencia-tecnica .container section { width: 45%; } #assistencia-tecnica .container .assistencia-nathor { padding-right: 163px; padding-top: 65px; } #assistencia-tecnica .container .assistencia-nathor h2 { font-family: 'Lobster', sans-serif; font-size: 46px; color: var(--orange-2); margin-bottom: 25px; } #assistencia-tecnica .container .assistencia-nathor p { font-family: 'Montserrat Regular', sans-serif; color: var(--blue); margin-bottom: 25px; line-height: 1.5; } #assistencia-tecnica .container .assistencia-nathor .numeros-contato p { font-family: 'Montserrat Semibold', sans-serif; font-size: 22px; color: var(--orange-2); line-height: 1.2; margin-bottom: 0px; } #assistencia-tecnica .container .assistencia-nathor .numeros-contato p strong { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: 18px; } #assistencia-tecnica .container .envie-solicitacao { background-color: var(--light-blue); padding: 65px 85px; } #assistencia-tecnica .container .envie-solicitacao h2 { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: clamp(20px, 3vw, 25px); padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--blue); text-transform: uppercase;} #assistencia-tecnica .container .envie-solicitacao p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.5; } #assistencia-tecnica .container .envie-solicitacao form { margin-top: 50px; display: flex; flex-direction: column; gap: 10px; } #assistencia-tecnica .container .envie-solicitacao form input { border: none; border-radius: 20px; padding: 9px 12px; } #assistencia-tecnica .container .envie-solicitacao form input::placeholder, #assistencia-tecnica .container .envie-solicitacao form textarea::placeholder { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); } #assistencia-tecnica .container .envie-solicitacao form textarea { border: none; border-radius: 20px; padding: 12px 12px; height: 200px; } #assistencia-tecnica .container .envie-solicitacao form .titulo-anexo { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); padding: 0px 12px; } #assistencia-tecnica .container .envie-solicitacao form .detalhes { font-style: italic; } #assistencia-tecnica .container .envie-solicitacao form input[type="file"] { border: 1px solid var(--blue); border-radius: initial; } #assistencia-tecnica .container .envie-solicitacao form button { border: none; border-radius: 5px; padding: 13px 30px; font-size: 15px; background-color: var(--blue); color: var(--white); font-family: 'Montserrat Semibold', sans-serif; font-size: 18px; width: fit-content; text-align: center; margin: 0 auto; cursor: pointer; margin-top: 20px; } #assistencia-tecnica .container .envie-solicitacao form button:hover { background-color: var(--white); color: var(--blue); } /* assistencia-tecnica -> sucesso */ #assistencia-tecnica .container .sucesso { background-color: var(--light-blue); padding: 80px 85px; display: none; width: 603px; height: 943.96px;} #assistencia-tecnica .container .sucesso h2 { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: 25px; padding-bottom: 15px; margin-bottom: 20px; text-transform: uppercase; border-bottom: 1px solid var(--blue);} #assistencia-tecnica .container .sucesso p:nth-of-type(1) {font-family: 'Montserrat Regular', sans-serif; color: var(--blue); margin-bottom: 25px; line-height: 1.5; } #assistencia-tecnica .container .sucesso .strong {font-family: 'Montserrat Bold', sans-serif; color: var(--blue); margin-top: 30px; } #assistencia-tecnica .container .sucesso .icone {position: absolute; height: 250px;} #assistencia-tecnica .container .sucesso .icone img {height: 100%; position: relative; left:50%; transform: translate(-10%); } /* trabalhe-conosco */ #trabalhe-conosco { background-color: var(--white); display: none; } #trabalhe-conosco .container { display: flex; padding: 90px 30px; } #trabalhe-conosco .container section { width: 45%; } #trabalhe-conosco .container .trabalhe-na-nathor { padding-right: 163px; padding-top: 65px; } #trabalhe-conosco .container .trabalhe-na-nathor h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--orange-2); margin-bottom: 25px; } #trabalhe-conosco .container .trabalhe-na-nathor p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 18px); color: var(--blue); margin-bottom: 25px; line-height: 1.5; } #trabalhe-conosco .container .trabalhe-na-nathor h4 { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); margin-bottom: 10px; } #trabalhe-conosco .container .envie-curriculo { background-color: var(--light-blue); padding: 65px 85px; } #trabalhe-conosco .container .envie-curriculo h2 { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: clamp(20px, 3vw, 25px); padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--blue); } #trabalhe-conosco .container .envie-curriculo p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.5; } #trabalhe-conosco .container .envie-curriculo form { margin-top: 50px; display: flex; flex-direction: column; gap: 10px; } #trabalhe-conosco .container .envie-curriculo form input { border: none; border-radius: 20px; padding: 9px 12px; } #trabalhe-conosco .container .envie-curriculo form input::placeholder, #trabalhe-conosco .container .envie-curriculo form textarea::placeholder { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); } #trabalhe-conosco .container .envie-curriculo form textarea { border: none; border-radius: 20px; padding: 12px 12px; height: 200px; } #trabalhe-conosco .container .envie-curriculo form .titulo-anexo { font-family: 'Montserrat Semibold', sans-serif; color: var(--blue); padding: 0px 12px; } #trabalhe-conosco .container .envie-curriculo form .detalhes { font-style: italic; } #trabalhe-conosco .container .envie-curriculo form input[type="file"] { border: 1px solid var(--blue); border-radius: initial; } #trabalhe-conosco .container .envie-curriculo form button { border: none; border-radius: 5px; padding: 13px 30px; font-size: 15px; background-color: var(--blue); color: var(--white); font-family: 'Montserrat Semibold', sans-serif; font-size: 18px; width: fit-content; text-align: center; margin: 0 auto; cursor: pointer; margin-top: 20px; } #trabalhe-conosco .container .envie-curriculo form button:hover { background-color: var(--white); color: var(--blue); } .custom-file-upload, .custom-file-upload-curriculo { position: relative; display: inline-block; background-color: var(--light-blue); color: white; padding: 10px 20px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 14px; border: 1px solid var(--blue); border-radius: initial; } #custom-file-label-assistencia, #custom-file-label-curriculo { display: inline-block; cursor: pointer; font-family: 'Montserrat Regular', sans-serif; color: var(--blue); line-height: 1.5; } #anexo { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; } .custom-file-upload::before { /*content: 'Adicione o arquivo aqui';*/ display: inline-block; font-family: 'Montserrat Regular', sans-serif; color: var(--blue); line-height: 1.5; } #anexo:focus + label, #anexo + label:hover { background-color: #4f8cf5; } /* trabalhe-conosco -> sucesso */ #trabalhe-conosco .container .sucesso { background-color: var(--light-blue); padding: 80px 85px; display: none; } #trabalhe-conosco .container .sucesso h2 { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: 25px; padding-bottom: 15px; margin-bottom: 20px; text-transform: uppercase; border-bottom: 1px solid var(--blue);} #trabalhe-conosco .container .sucesso p:nth-of-type(1) {font-family: 'Montserrat Regular', sans-serif; color: var(--blue); margin-bottom: 25px; line-height: 1.5; } #trabalhe-conosco .container .sucesso .strong {font-family: 'Montserrat Bold', sans-serif; color: var(--blue); margin-top: 30px; } #trabalhe-conosco .container .sucesso .icone {position: absolute; height: 250px;} #trabalhe-conosco .container .sucesso .icone img {height: 100%; position: relative; left: 50%; transform: translate(-10%); } /* pagina FAQ'S */ #perguntas-frequentes { background-color: var(--white); } #perguntas-frequentes .container { max-width: 1200px; padding: 120px 30px; display: flex; align-items: center; flex-direction: column; gap: 50px; } #perguntas-frequentes .container .faq h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--orange-2); margin-bottom: 25px; } #perguntas-frequentes .container .faq > p { line-height: 1.5; color: var(--blue); font-size: clamp(13px, 2vw, 16px); font-family: 'Montserrat regular', sans-serif; } #perguntas-frequentes .faq-section { width: 100%; } #perguntas-frequentes .faq-question { max-width: 1200px; background-color: #cce7ff; padding: 15px; cursor: pointer; margin: 10px 0; border: none; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-radius: 20px; transition: background-color 0.3s ease;} #perguntas-frequentes .faq-question > strong { font-family: 'Montserrat Bold', sans-serif; color: var(--blue); font-size: clamp(13px, 2vw, 16px); padding-left: 15px; } #perguntas-frequentes .faq-question:hover { background-color: #b3d9ff; } #perguntas-frequentes .faq-answer { font-style: normal; display: none; padding: 10px 30px; background-color: #fff; line-height: 1.6 !important; margin-bottom: 15px; } #perguntas-frequentes .faq-answer h5 { line-height: 1.5; color: var(--blue); font-size: clamp(13px, 2vw, 16px); font-family: 'Montserrat Regular', sans-serif; margin-bottom: 10px; } #perguntas-frequentes .faq-answer p { margin-bottom: 15px; line-height: 1.5; color: var(--blue); font-size: clamp(13px, 2vw, 16px); font-family: 'Montserrat Regular', sans-serif; } #perguntas-frequentes .faq-answer tbody { color: var(--blue); } #perguntas-frequentes .faq-answer tbody td { color: var(--blue); font-size: clamp(13px, 2vw, 16px); font-family: 'Montserrat Regular', sans-serif; } #perguntas-frequentes .arrow { transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease; } #perguntas-frequentes .arrow-right { width: 10px; height: 15px; } /* Dimensões da seta para a direita */ #perguntas-frequentes .arrow-down { width: 15px; height: 10px; } /* Dimensões da seta para baixo */ /* Media Query para tablets (largura entre 768px e 1024px) */ /* @media (max-width: 1024px) { .container { width: 90%; } header { flex-direction: column; align-items: flex-start; } nav ul { flex-direction: column; width: 100%; } nav ul li { margin: 10px 0; } } */ /* Media Query para smartphones (largura abaixo de 768px) */ /* @media (max-width: 768px) { .container { width: 95%; } #perguntas-frequentes .container .faq > h2 { font-size: 36px;} #perguntas-frequentes .container .faq > p { font-size: 14px;} #perguntas-frequentes .faq-section strong { padding: 0 8px 0 4px; font-size: 14px;} #perguntas-frequentes .faq-section { max-width: 300px; margin: auto; line-height: 1.5; color: var(--blue); font-size: 12px; font-family: 'Montserrat regular', sans-serif;} #perguntas-frequentes .faq-question { width: 300px; background-color: #cce7ff; cursor: pointer; border: none; display: flex; justify-content: space-between; align-items: center; } } */ /* PÁGINA SOBRE */ /* area-banner-about */ #area-banner-about { background: url("../img/sobre/nathor-logo-2.png") no-repeat center; background-size: cover; height: 85vh; } /* area-banner-about -> texts */ #area-banner-about .area-banner-texts .container { position: relative; height: calc(85vh - 145px); } #area-banner-about .area-banner-texts .container article { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--white); display: flex; flex-direction: column; align-items: center; gap: 4px; } #area-banner-about .area-banner-texts .container article h2 { font-family: 'Lobster', sans-serif; font-size: clamp(35px, 7vw, 65px); text-wrap: nowrap; } #area-banner-about .area-banner-texts .container article p { font-family: 'Montserrat Medium', sans-serif; font-size: clamp(22px, 4vw, 28px); color: var(--orange-2); text-align: justify; line-height: 1.7; } /* search-bar-about */ #search-bar-about { background-color: var(--light-blue); } #search-bar-about .container section { position: relative; } #search-bar-about .container section .list { display: flex; justify-content: center; height: 65px; font-family: 'Montserrat Bold', sans-serif; color: var(--blue); text-align: center; } #search-bar-about .container section .list .list-item { display: flex; align-items: center; gap: 20px; padding: 0px 35px; position: relative; cursor: pointer; } #search-bar-about .container section .list .list-item:not(:first-child)::before { position: absolute; left: 0; content: ''; height: 40px; border: 1px solid var(--white); } #search-bar-about .container section .orange-arrow { position: absolute; left: 50%; transform: translateX(-50%); } #search-bar-about .container section .orange-arrow img { height: 65px; } /* quem somos */ #quem-somos { background-color: var(--white); background: url('../img/sobre/white-bg.png') no-repeat center; background-size: cover; } #quem-somos .container { padding: 80px 30px 0px; } /* quem somos -> marca */ #quem-somos .container .marca h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--blue); text-align: center; margin-bottom: 50px; } #quem-somos .container .marca p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.7; text-align: justify; } /* quem somos -> industria */ #quem-somos .container .industria { display: flex; padding: 80px 0px 65px; } #quem-somos .container .industria article:nth-of-type(1) { width: 50%; } #quem-somos .container .industria article:nth-of-type(1) h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 34px; color: var(--orange); margin-bottom: 25px; padding-right: 100px; } #quem-somos .container .industria article:nth-of-type(1) p { font-family: 'Montserrat Regular', sans-serif; color: var(--blue); line-height: 1.7; text-align: justify; margin-bottom: 25px; } #quem-somos .container .industria article:nth-of-type(2) { width: 50%; padding: 180px 0px 0px 160px; } #quem-somos .container .industria article:nth-of-type(2) h2 { font-family: 'Lobster', sans-serif; font-size: 46px; color: var(--blue); } /* image */ #image { background: url('../img/sobre/body-banner.png') no-repeat center left; background-size: cover; height: 325px; } /* about-brands */ #about-brands { background-color: var(--white); } #about-brands .container { display: flex; justify-content: space-between; padding: 80px 30px 100px; } #about-brands .container section h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: 34px; color: var(--orange); margin-bottom: 25px; width: 780px; } #about-brands .container section p { font-family: 'Montserrat Regular', sans-serif; color: var(--blue); line-height: 1.7; } #about-brands .container section ul { display: flex; align-items: center; gap: clamp(5px, 5vw, 40px); margin-top: 90px; } /* cultura-filosofia */ #cultura-filosofia { background-color: var(--white); background: url('../img/sobre/white-bg.png') no-repeat center; background-size: cover; } #cultura-filosofia .container { padding: 80px 30px 0px; } /* cultura-filosofia -> marca */ #cultura-filosofia .container .marca h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--blue); text-align: center; margin-bottom: 50px; } #cultura-filosofia .container .marca p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.7; text-align: justify; } /* cultura-filosofia -> industria */ #cultura-filosofia .container .industria { display: flex; padding: 80px 0px 65px; } #cultura-filosofia .container .industria article:nth-of-type(1) { width: 50%; } #cultura-filosofia .container .industria article:nth-of-type(1) h2 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(20px, 3vw, 34px); color: var(--orange); margin-bottom: 25px; } #cultura-filosofia .container .industria article:nth-of-type(1) p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.7; text-align: justify; } #cultura-filosofia .container .industria article:nth-of-type(1) p:not(:last-of-type) { margin-bottom: 45px; } #cultura-filosofia .container .industria article:nth-of-type(2) { width: 50%; padding: 80px 0px 0px 60px; } #cultura-filosofia .container .industria article:nth-of-type(2) h2 { font-family: 'Lobster', sans-serif; font-size: 46px; color: var(--blue); text-align: center; } #cultura-filosofia .container .industria article:nth-of-type(2) h3 { font-family: 'Montserrat Semibold', sans-serif; font-size: 34px; color: var(--orange); padding: 120px 0 30px 0; } #cultura-filosofia .container .industria article:nth-of-type(2) p { font-family: 'Montserrat Regular', sans-serif; color: var(--blue); line-height: 1.7; text-align: justify; margin-bottom: 25px; } #cultura-filosofia .container .industria article:nth-of-type(2) img { width: clamp(150px, 40vw, 685px); } #cultura-filosofia .container .industria strong { font-weight: bold; } /* cultura-filosofias -> background-azul */ #cultura-filosofia .background-azul { background-color: var(--light-blue); padding-bottom:30px } /* cultura-filosofias -> background-azul -> compromisso */ #cultura-filosofia .background-azul .compromisso h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--blue); text-align: left; margin-bottom: 30px;} #cultura-filosofia .background-azul .compromisso h3 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(18px, 4vw, 28px); color: var(--blue); margin-bottom: 5%; text-align: left; line-height: 1.2; } #cultura-filosofia .background-azul .compromisso h4 { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(20px, 4vw, 28px); color: var(--blue); margin-bottom: 25px; text-align: left; } #cultura-filosofia .background-azul .compromisso p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.7; text-align: justify; margin-bottom: 40px; } #cultura-filosofia .background-azul .compromisso strong { font-weight: bold; } #cultura-filosofia .background-azul .compromisso .row { display: flex; gap: 80px; } #cultura-filosofia .background-azul .compromisso .row .column a { font-family: 'Montserrat Semibold', sans-serif; font-size: clamp(13px, 2vw, 18px); text-transform: uppercase; color: var(--orange-2); padding: 10px 20px; background-color: var(--white); border-radius: 5px;} #cultura-filosofia .background-azul .compromisso .row .column a:hover { background-color: var(--light-blue-3); } #cultura-filosofia .background-azul .compromisso .column { flex: 1; padding: 30px 0;} /* nossa-historia */ #nossa-historia { background-color: var(--white); background: url('../img/sobre/white-bg.png') no-repeat center; background-size: cover; } #nossa-historia .container { padding: 80px 30px 0px; } /* nossa-historia -> marca */ #nossa-historia .container .marca h2 { font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--blue); text-align: center; margin-bottom: 50px; } #nossa-historia .container .marca p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.7; text-align: justify; } /* nossa-historia -> anos-historia */ #nossa-historia .container #anos-historia {display:grid; grid-template-columns: repeat(auto-fit, minmax(100px, 300px)); grid-gap:25px; margin-top: 50px; padding: 20px 0px} #nossa-historia .container #anos-historia .anos-grid {padding: 15px} #nossa-historia .container #anos-historia .anos-grid h2{ font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: var(--orange); text-align: left; margin-bottom: 5px; } #nossa-historia .container #anos-historia .anos-grid p { font-family: 'Montserrat Regular', sans-serif; font-size: clamp(13px, 2vw, 16px); color: var(--blue); line-height: 1.7; text-align: left; } /* nossa-historia -> futuro-saudavel */ #futuro-saudavel {padding-top: 40px} #futuro-saudavel h2 {font-family: 'Lobster', sans-serif; font-size: clamp(32px, 9vw, 46px); color: #9ac2ee; text-align: center; margin-bottom: 5px; } #futuro-saudavel img {width: 100%; display: block; margin: 0 auto; padding-top: 20px;}