/********************************
            Font style 
********************************/
@charset "utf-8";
@font-face { font-family: 'Noto Sans JP'; src: url('../fonts/NotoSansJP-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Noto Sans JP'; src: url('../fonts/NotoSansJP-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Noto Sans JP'; src: url('../fonts/NotoSansJP-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Noto Sans JP'; src: url('../fonts/NotoSansJP-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Noto Sans JP'; src: url('../fonts/NotoSansJP-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }

* { font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.1rem; color: var(--Black); font-weight: normal; line-height: 1.6em; font-display: swap; }
a { font-size: 15px; text-decoration: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; }
p, li { margin-bottom: 0; font-size: 16px;}
h4 span { font-size: 13px; }
a span { font-size: 12px; }
h2 { line-height: 1.6em; }
.h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 ,td ,p { letter-spacing: 0.02em;}


:root {
  --Light-Grey: #F4F4F4;
  --Light-Blue: #F1F5FA;
  --Blue: #2487E9;
  --Dark-Blue: #0C2141;
  --Darker-Blue: #111D2F;
  --white: #FFF;
  --Black: #464646;
  --Pink: #F6218F;
}


/********************************
            Navbar
********************************/
#navbar { position: fixed; z-index: 999; width: 100%; height: 80px; top: 0; transition: top 0.3s, background-color 0.8s ease; }
.navbar-default { background: var(--white); }
.navbar-collapse { justify-content: right; }
.navbar-nav { align-items: center; }
.navbar-toggler-icon { background-image: url('../images/navicon.svg'); background-size: contain; background-repeat: no-repeat; width: 20px; height: 20px; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-image: url('../images/navicon-close.svg'); }
.navbar-toggler:focus { box-shadow: none; }
.header-hidden #navbar { top: -10svh; }
nav { font-size: 12px; color: var(--Black); }
a.navbar-brand { width: 160px; margin: 0; }
.nav-link { color: var(--Black); letter-spacing: 0.02rem; margin-left: 15px; padding: 0; font-size: 13px; }
.nav-link:hover { color: var(--Pink); }
.header_btn { background: var(--Pink); border: 2px solid var(--Pink); border-radius: 50px; padding: 10px; padding-left: 15px !important; padding-right: 15px !important; color: var(--white); }
.header_btn:hover { background: #FFC9E5E5; border-color: #FFC9E5E5; color: var(--white); }
.navbar-nav.mobile { display: none; }
.navbar-expand-lg .navbar-nav .nav-link { padding-left: 0; }


/********************************
            Footer
********************************/
footer { padding: 80px; position: relative; z-index: 3; background: var(--Darker-Blue); }
.banner-fixed { position: fixed; bottom: 10px; right: 10px; display: flex; justify-content: right; align-items: end; z-index: 5; }
.banner-fixed-content { align-items: center; justify-content: center; background: #F6218F; border-radius: 143px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 20px; height: auto; padding: 30px 0; }
.banner-fixed-content img { width: 26px; }
.banner-fixed-text p { color: #FFFFFF; font-size: 20px; font-style: normal; font-weight: 700; letter-spacing: 0.1em; line-height: 1.15; writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; max-width: 100%; }
.footer_grid { display: flex; justify-content: space-between; }
footer .left { width: 30%; }
footer .left img { width: 70%; height: auto; filter: brightness(0) invert(1); }
footer .left p { color: #9e9e9e; font-size: 13px; padding-top: 40px; }
footer .right { width: 70%; display: flex; justify-content: right; flex-wrap: wrap; }
.navbar-nav.footer { flex-direction: row; width: 100%; justify-content: right; }
.footer_nav_link { color: var(--white); font-weight: 700; }


/********************************
            Global
********************************/
.sections_title { text-align: center; }
.sections_title p { color: var(--Blue); font-weight: 600; }
.sections_title h3 { font-size: 30px; font-weight: 600; }
.sections_title h4 { font-size: 20px; }
.sections_title.white p, .sections_title.white h3, .sections_title.white h4 { color: var(--white); }


/******************************** PAGES ********************************/


/********************************
            TOP
********************************/

/* TOP */
.top { padding: 140px 0 60px; min-height: 70vh; background: url(../images/top-bg2.jpg); background-attachment: scroll; background-position: top; background-repeat: no-repeat; background-size: cover; }
.top > .container { position: relative; max-width: 1280px; display: flex ; flex-wrap: wrap; justify-content:center; align-items:center; padding: 0 40px 40px; }
.top_left { width: 100%; }
.top_left p { background: #CAD8EE; width: fit-content; padding: 5px 10px; margin: 25px 0; }
.top_left img { width: auto; height: 50px; background: #fff; padding: 10px; }
.top_left h4 { font-weight: 600; font-size: 32px; color: var(--white); }
.top_left h4 span { font-weight: 600; font-size: 60px; color: var(--white); }
.top_right { width: 100%; position: relative; display: flex; justify-content: space-between; align-items: center; }
.top_right_btn { flex: 1; }
.top-right-image { flex: 1; text-align: right; }
.top-right-image img { width: 90%; height: auto; z-index: 1; }
.btn_top { background: var(--Pink); border-radius: 200px; border: 2px solid var(--Pink); color: #fff; padding: 15px 40px; margin-top: 10px; font-size: 24px; width: 100%; max-width: 400px; }
.btn_top:hover { background: #FFC9E5E5; border-color: #FFC9E5E5; color: var(--white); }
.btn-top-mobile { display: none; }
.btn_top.blue { background: #143788; border: 2px solid #4a5c88; }
.btn_top.blue:hover { background: #102b6b; color: #fff; }

/* Video */
.video { padding: 80px 0; background: var(--Darker-Blue); }
.video h4 { color: var(--white); }
.video p { color: var(--white); }
.video iframe { height: 60vh; width: 100%; padding-top: 30px; }
.video-grid { margin-top: 40px; }
.video-grid.revert { margin-top: -5px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.video-frame { width: 100%; height: 60vh; padding-top: 30px; object-fit: cover; }

/* About */
.about { padding: 80px 0; }
.about_title { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 50px; }
.about h4 { color: var(--Dark-Blue); display: flex ; justify-content: center; flex-wrap: wrap; width: 100%; }
.about hr { height: 2px; width: 10%; background: var(--Dark-Blue); margin: 5px 0 0; opacity: 1; }
.about h3 { color: var(--Dark-Blue); }
.about_bg p { margin-bottom: 50px; }
.about_bg { padding-top: 40px; }
.about_grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.about_grid.revert { flex-direction: row-reverse; } .about_image { flex: 1; }
.about_image img { width: 100%; }
.about_text { flex: 1; }
.about_text h4 { display: block; font-size: 20px; color: var(--Blue); font-weight: 700; margin: 0; }
.about_text h4 span { font-size: 40px; color: var(--Blue); font-weight: 700; }
.about_text h2 { font-size: 20px !important; padding: 10px 0; margin-bottom: 0; }
.about_text p { text-align: left; }

/* Series */
.series { background: var(--Darker-Blue); padding: 80px 0; }
.series h3 { width: 100%; color: var(--white); text-align: center; padding-bottom: 80px; font-size: 32px; }
.series_grid img { width: 100%; height: auto; }
.series_grid { display: flex; justify-content: center; }
.series_grid_content { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.series_grid_content img { width: auto; height: 150px; object-fit: contain; }
.series_grid_content p { font-weight: 600; color: var(--white); font-size: 16px; }

/* Case */
.case { padding: 80px 0; background: var(--white); }
.case-grid.revert { margin-top: -5px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.case-grid-content { display: flex; flex-wrap: wrap; padding-top: 40px; }
.case-grid-content p { width: auto; margin-top: 20px; }
.case-intro { padding-top: 40px; }
.case-grid-content-image { width: 100%; }
.case-grid-content-image img { width: 100%; height: auto; }
.case-grid-content-image-title { width: 100%; display: flex; align-items: baseline; gap: 20px; }
.case-grid-content-image-title h4 { display: block; font-size: 24px; font-weight: 700; margin: 0; }
.case-grid-content-image-title > .blue { color: var(--Blue);}
.case-grid-content-image-title h4 span { font-size: 40px; color: var(--Blue); font-weight: 700; }

/* Functions */
.functions { background: var(--Darker-Blue); padding: 80px 0; }
.functions-table { background: var(--white); margin-top: 65px; }
.functions-table th { background: var(--Light-Blue); }
.functions-table th, td { text-align: center; font-weight: 500; word-break: keep-all; }
.functions-table_cell { vertical-align: middle; }
.functions-table_cell td { width: 35%; }
.functions-table_cell p { margin-top: 10px; font-weight: 500; }
.functions-table_cell img { width: auto; height: 150px; margin: 20px 0 0; }
.btn_functions.blue-light { background: #004BFF; color: var(--white); padding: 8px 20px; border-radius: 50px; font-size: 15px; font-weight: 400; letter-spacing: 0.30px; text-decoration: none; display: inline-block; transition: background-color 0.3s ease; margin: 5px 0 15px; }
.btn_functions.blue-light:hover { background: #8AAAF7; color: var(--white); }

/* News */
.news { padding: 80px 0; background: var(--white); }
.news-grid { margin-top: -75px; }
.news_grid { margin-top: 50px;}
.news-grid-content { display: flex; align-items: center; border-bottom: 1px solid #AAAAAA; padding-bottom: 15px; margin-bottom: 30px; }
.news-grid-content > .date { width: 20%; }
.news-grid-content > .text { width: 60%; }
.news-grid-content > .btn { width: 20%; display: flex; justify-content: right; align-items: center; cursor: default; padding: 0; }
.news-grid-content > .btn a { width: 70px; height: 50px; display: flex; justify-content: right; align-items: center; }
.arrow { position: relative; display: inline-block; width: 40px; height: 2px; margin-top: 12.8px; border-radius: 9999px; background-color: var(--Darker-Blue); }
.arrow::before { content: ""; position: absolute; top: calc(50% - 1px); right: 0; width: 20px; height: 2px; border-radius: 9999px; background-color: var(--Darker-Blue); transform: rotate(45deg); transform-origin: calc(100% - 1px) 50%; }
.news_grid .view_all a { color: var(--Blue); font-size: 16px; font-weight: 700; }
.news_grid .view_all a img { margin-left: 10px; vertical-align: middle; height: 13px; width: auto; }
.news_grid .view_all a img::before { width: 16px; }
.view_all { padding-top: 30px; text-align: right; }
.date p { color: var(--Blue); font-weight: 600; }
.text a { color: var(--Black); font-weight: 600; }

/* Demo */
.demo { background: var(--Dark-Blue) url(../images/FooterImage.png); background-attachment: scroll; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; }
.demo-overlay { position: absolute; background: #00000085; width: 100%; height: 100%; background: linear-gradient(180deg, rgb(17 29 47 / 0%) 60%, rgba(17, 29, 47, 0.90) 86.48%, #111D2F 100%), url(<path-to-image>) #d3d3d300 -29.854px -200.832px / 108.81% 202.612% no-repeat; }
.demo-content { padding: 75px 0; position: relative; z-index: 2; }
.demo_title { margin-bottom: 25px; }
.demo h4 { color: var(--white);  }
.demo p { color: var(--white); padding-bottom: 50px; }
.demo_btn { display: flex; align-items: center; gap: 20px; }
.btn_footer { background: var(--Pink); border: 1px solid var(--white); border-radius: 50px; padding: 15px; padding-left: 40px !important; padding-right: 40px !important; color: var(--white); font-size: 16px; font-weight: 700; }
.btn_footer:hover { background: #FFC9E5E5; border-color: #FFC9E5E5; color: var(--white); }
.btn_footer.blue { background: var(--Blue); border: 1px solid var(--white);}
.btn_footer.blue:hover { background: #8AAAF7; border-color: #8AAAF7; color: var(--white); }
.demo-container { max-width: 900px; display: flex; justify-content: center; align-items: center; }


/********************************
            PAGES
********************************/
.pages { padding-top: 100px; }

/* News */
.pages-title{ display: flex; justify-content: space-between; }
.sections_title.pages-grid { display: flex; align-items: center; justify-content: space-between; }
.sections_title.pages_text { width: 60%; }
.sections_title.pages_image { width: 40%; }
.sections_title.pages_image img { width: 40%; height: auto; }
.news_box_page { padding-top: 50px; }
.pages_news_grid .date { width: 150px; }
.pages_news_grid .category { width: 150px; }
.pages_news_grid .category p { background: #CAD8EE; width: fit-content; padding: 5px 15px; }
.pages_news_grid .text { width: calc(80% - 300px); }
.pages_news_grid .btn { width: 20%; display: flex; justify-content: right; }
.pages_news_pagination ul { list-style: none; display: flex; justify-content: center; align-items: center; padding: 0; }
.pages_news_pagination li a { border: 2px solid #6C6969; height: 50px; width: 50px; color: #6C6969; display: flex; justify-content: center; align-items: center; border-radius: 50px; margin: 0 3px; }
.pages_news_pagination li span { background: #6C6969; border: 2px solid #6C6969; height: 50px; width: 50px; color: var(--white); display: flex; justify-content: center; align-items: center; border-radius: 50px; margin: 0 3px; }

/* News Single */
.pages.news_single { padding-top: 80px; }
.title_pages { background: var(--Light-Blue); padding-bottom: 50px; padding-top: 50px; }
.breadcrumb-item a { color: var(--Black); }
.title_pages_tags { display: flex; align-items: center; gap: 10px; }
.title_pages_tags .category p { background: #CAD8EE; width: fit-content; padding: 5px 15px; font-size: 13px; }
.single_post { padding-top: 70px; }
.single_post hr { height: 2px; opacity: 1; color: #000; margin: 70px 0; }
.single_post .back { text-align: center; padding:24px 0;}
.single_post .back a { color: var(--Black); font-size: 16px; }
.single_post .back a .arrow { height: 1px; margin-left: 10px; }
.single_post .back a .arrow::before { height: 1px; width: 16px; }

/* Contact */
.title_contact { text-align: center; padding: 50px 0 90px; }
.title_contact p { padding-top: 30px; }
.contact_grid { background: var(--Light-Blue); padding: 100px 120px; }
.contact_form { list-style: none; margin: 0; padding: 0; }
.contact_form p { display: flex; align-items: center; padding-bottom: 10px; }
.contact_form span { width: 100%; display: flex; align-items: center; justify-content: left; flex-wrap: wrap; margin: 0; }
.contact_form label { width: 155px; text-align: left; font-weight: 600; padding: 0px 18px 5px 0; }
.contact_form li { padding-bottom: 15px; }
.contact_form input, textarea { width: 100%; height: 40px; border: 2px solid #AFAFAF; background: transparent; border-radius: 5px; }
.contact_form textarea { height: auto; }
.contact_policy textarea { height: 150px; }
.wpcf7-list-item label { display: flex; justify-content: left; align-items: center; width: 100%; padding: 0; height: 27px; }
.wpcf7-list-item span { margin-left: 10px; }
.wpcf7-list-item input { width: auto; }
.wpcf7-list-item-label { width: auto !important; }
.contact_form_btn p { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.contact_btn { background: var(--Pink) !important; border: 2px solid var(--Pink) !important; height: auto !important; padding: 10px; padding-left: 15px !important; padding-right: 15px !important; color: var(--white); transition: all 0.3s; width: 200px !important; }
.contact_btn:hover { background: transparent !important; color: var(--Pink); }
.wpcf7-spinner { width: auto !important; }


/********************************
            MOBILE
********************************/
@media screen and (max-width: 1100px) {
  .video-grid { margin-top: 40px; }
}

@media screen and (max-width: 992px) {
  .top_left h2 { font-weight: 600; font-size: 35px; }
  .footer_grid { justify-content: center; flex-wrap: wrap; }
  footer .left { width: 100%; text-align: center; padding-bottom: 30px; }
  footer .right { width: 100%; text-align: center; justify-content: center; }
  .navbar-nav.footer { flex-direction: column; }
  .footer_nav_link { margin-left: 0; }
}

@media screen and (max-width: 991px) {
  #navbar { height: 60px; }
  .navbar-collapse { height: 0; width: 100%; padding-top: 0; background: var(--Light-Blue); transition: height 0.5s ease, padding-top 0.5s ease; position: absolute; top: 60px; left: 0; z-index: 0; overflow: hidden; /* Garante que o conteúdo não transborde */ }
  .navbar-collapse.show { height: calc(100vh - 56px); padding-top: 60px; }
  .navbar-nav.mobile { display: block; }
  .navbar-nav.web { display: none; }
  .nav-link { font-size: 17px; margin-bottom: 15px; font-weight: 500; }
  .navbar-bottom { position: absolute; top: 95%; left: 0; width: 100%; display: flex; align-items: center; gap: 10px; padding-left: 15px; }
  .navbar-bottom i { font-size: 25px; }
  .navbar-bottom img { width: 100px; height: auto; }
  .contact_form p { flex-wrap: wrap; }
  .contact_form label { width: 100%; }
  .contact_policy.text { padding-bottom: 0; }
  .contact_policy label { display: none; }
  .wpcf7-form-control-wrap label { display: flex; }
}

@media screen and (max-width: 767px) {
  a.navbar-brand { width: 140px; }
  .top { padding-top: 100px; }
  .top > .container { flex-wrap: wrap; padding: 0 20px 20px; }
  .top_left { width: 100%; }
  .top_left h2 { font-size: 30px; }
  .top_left h4 { font-size: 20px; display: flex; flex-wrap: wrap; align-items: end; margin: 0; }
  .top_left h4 span { font-size: 30px; margin-top: 10px; line-height: 35px; }
  .top_left h4 .large { font-size: 38px; }
  .top_left img { width: 100%; height: auto; margin-bottom: 30px; }
  .btn_top { font-size: 18px; }
  .btn_top.web { display: none; }
  .btn-top-mobile { display: block; width: 100%; text-align: center; padding-top: 30px; }
  .top_right { width: 100%; justify-content: right; flex-wrap: wrap; }
  .top_right_round_img { height: 280px; width: 280px; top: 20px; left: 0; background: var(--Dark-Blue) url(../images/xgrids-bg.png); background-attachment: scroll; background-position: right; background-repeat: no-repeat; background-size: contain; }
  .top-right-image { flex: auto; }
  .top-right-image img { width: 100%; padding-top: 70px; }
  .top_right_btn { display: none; }
  .video-grid img, .case-grid img, .news-grid img { height: 40px !important; }
  .about_title { margin-bottom: 30px; }
  .about h4 { font-size: 18px; }
  .about hr { width: 40%; }
  .about h3 { font-size: 20px; }
  .about_bg p { text-align: left; }
  .about_grid { display: block; }
  .about_grid h2 { text-align: left; }
  .series_grid { margin-bottom: 50px; }
  .series { padding: 100px 0 175px; }
  .case p { width: 100%; }
  .case-grid-content { flex-wrap: wrap; }
  .case-grid-content img { width: 100%; }
  .case-grid-content-image-title { flex-wrap: wrap; gap: 0; padding-bottom: 10px; }
  .news_grid { padding: 40px 20px 40px; }
  .news-grid-content { flex-wrap: wrap; padding-bottom: 0; }
  .news-grid-content > .date { width: 100%; padding-bottom: 10px; }
  .news-grid-content > .text { width: 100%; }
  .news-grid-content > .btn { width: 100%; }
  .demo { background-attachment: scroll; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
  .demo_btn_inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; }
  .btn_footer { width: 100%; padding-left: 10px !important; padding-right: 10px !important; }
  .banner-fixed a { display: flex; justify-content: right; align-items: end; width: 75%; }
  .sections_title.pages_text { width: 68%; }
  .sections_title h3 { font-size: 23px; font-weight: 600; }
  .sections_title.pages_image { width: 28%; }
  .sections_title.pages_image img { width: 100%; }
  .pages_news_grid .date { width: 35%; }
  .pages_news_grid .category { width: 65%; }
  .pages_news_grid .text { padding: 10px 0; }
  .pages.news_single { padding-top: 60px; }
  .breadcrumb-item, a { font-size: 13px; }
  .contact_grid { padding: 100px 20px; }
  footer .left img { width: 100%; }
  .footer_nav_link { margin-left: 0; font-size: 13px; }
  footer { padding: 80px 20px; }
}