/*
Theme Name: Metrix New
Author: UWS
Description: Metrix Theme
Version: 2025
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: metrix
*/

@font-face {
    font-family: 'Conamore';
    font-style: normal;
    font-weight: 400;
    src: local('Conamore'), url('https://fonts.cdnfonts.com/s/28723/Conamore Regular.woff') format('woff');
}
@font-face {
    font-family: 'Conamore';
    font-style: normal;
    font-weight: 300;
    src: local('Conamore'), url('https://fonts.cdnfonts.com/s/28723/Conamore Light.woff') format('woff');
}
@font-face {
    font-family: 'Conamore';
    font-style: normal;
    font-weight: 600;
    src: local('Conamore'), url('https://fonts.cdnfonts.com/s/28723/Conamore Semi Bold.woff') format('woff');
}
@font-face {
    font-family: 'Conamore';
    font-style: normal;
    font-weight: 700;
    src: local('Conamore'), url('https://fonts.cdnfonts.com/s/28723/Conamore Bold.woff') format('woff');
}

:root {
    --site-width: 1200px;
    --primary-text-color: #1d184b;
    --primary-text-color-hover: #a8c1e4;
    --primary-bg-color: #1d184b;
    --alt-bg-color: #a8c1e4;
    --alt-bg-color-darker: #6883ba;
    --alt-button-text-color: #eea093;
    --alt2-button-text-color: #8ccfb0;
    --global-light-grey: #ccc;
    --color-accent-blue: #6883ba;
    --color-accent-lightblue: #98cbcb;
    --color-accent-yellow: #fae598;
    --color-accent-red: #eea093;
    --color-accent-purple: #d2c9e4;
    --color-accent-green: #8ccfb0;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


html { font-family: 'Conamore', Arial, sans-serif; }
body, html { overflow-x: hidden; }
.container, .wp-block-group__inner-container, .single-portfolio .entry-content,
.post-navigation, .wp-block-group.services, .tag-archive-grid, .category-archive-grid { max-width: var(--site-width); margin: 0 auto; padding: 1rem; }

h2 { margin-bottom: 1rem; font-size: 3.25rem; font-weight: bold; line-height: 1.25em; color: var(--primary-text-color); }
p { margin-bottom: 1rem; line-height: 1.5em; }
strong { font-weight: bold; }
@media(max-width: 50rem) {
    h2 { font-size: 2.5rem; }
}

.buttons { position: relative; z-index: 1; }
.buttons a, .button { display: inline-block; padding: .75rem 2rem; font-weight: bold; color: #fff; border-radius: 1.5rem; background-color: var(--primary-bg-color); text-decoration: none; text-transform: uppercase; }
.buttons a + a, .button + .button { margin-left: 1rem; }
.border-bottom { border-bottom: 2px solid var(--primary-bg-color); }
.full-width-element { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

#header { display: flex; gap: 2rem; align-items: center; padding-top: 2rem; padding-bottom: 2rem; }
#menu { margin-left: auto; }
#menu-bread-crumb { display: flex; gap: 2rem; }
#menu a { color: var(--primary-text-color); text-decoration: none; }
#menu .current-menu-item a { color: var(--primary-text-color-hover); }
#menu li:last-child a { padding: .25rem 1rem; color: #fff; border-radius: 1rem; background-color: var(--primary-text-color); }
@media(max-width: 44rem) {
    #header { flex-direction: column; }
    #header img { width: 160px; height: auto; }
    #menu { margin-left: 0; }
    #menu li:first-child { display: none; }
}


.entry-title { color: var(--primary-text-color); padding: 3.5rem; font-size: 4rem; font-weight: bold; background-color: var(--global-light-grey); text-align: center; }
.entry-title a { color: inherit; text-decoration: none; }
@media(max-width: 48rem) {
    .entry-title { padding: 2rem; font-size: 2.5rem;  }
}

.single-portfolio .entry-content .wp-block-embed { display: inline-block; padding: 1rem; }
.single-portfolio .entry-content p { margin-top: 4rem; }
.single-portfolio .entry-content p + p { margin-top: 0; }
.single-portfolio .entry-meta { display: block; padding: 2rem; text-align: center; }

.post-navigation { margin-top: 2rem; margin-bottom: 4rem; text-align: center; }
.nav-links { display: flex; gap: 4rem; justify-content: center; }


.footer-pattern { margin: 2rem 0; width: 100%; height: auto; }
#footer { padding: 4rem 1rem; background-color: var(--primary-bg-color); }
#footer .container { display: flex; color: #fff; }
#footer .container div { position: relative; }
#footer div + div { max-width: 10rem; margin-left: auto; text-align: center; }
#footer img { display: block; max-width: 8rem; height: auto; margin: 0 auto; }
#footer img + img { max-width: 100%; margin-top: 1rem; }
#footer address { font-size: 1.25rem; font-style: normal; font-weight: 600; line-height: 1.5em; }
.social-nav { margin-top: 8rem; }
#footer .social-nav a img { display: inline-block; width: 48px; height: 48px; margin-right: 1rem; }
@media(max-width: 44rem) {
    #footer .container { flex-direction: column; text-align: center; }
    #footer div + div { margin: 2rem auto 0 auto; }
    #footer .container > div:first-child:after { content: none; }
}

/* home */
.vp-portfolio__items-style-fade.vp-portfolio__items-show-overlay-hover .vp-portfolio__item:hover .vp-portfolio__item-overlay { opacity: 0; }
.home-trust .vp-portfolio__items-style-fade.vp-portfolio__items-show-overlay-hover .vp-portfolio__item:hover { filter: none; }

/* services */
.services-top { text-align: left; }
.services-top .wp-block-group__inner-container { background: url(src/services-top-2-people.png) 22rem 0 no-repeat; background-size: 70% 100%; }
.services-top h1 { max-width: 24rem; margin-bottom: 1.5rem; font-size: 3.25rem; line-height: 1em; }
.services-top p { max-width: 24rem; font-size: 1.25rem; }
.services-wrapper { background: url(src/Services_Pattern-Background.webp) var(--primary-bg-color) no-repeat; background-size: cover; }
.wp-block-group.services { padding: 4rem; gap: 4rem; }
.wp-block-group.services .wp-block-group { position: relative; display: block; padding: 2rem 2rem 1rem 2rem; color: #fff; background-color: var(--primary-bg-color); text-align: center; }
.wp-block-group.services .wp-block-group p { margin-top: 2rem; margin-bottom: 2.5rem; }
.wp-block-group.services .wp-block-group p + p { margin-bottom: 0; }
.wp-block-group.services .wp-block-group h2 { max-width: 340px; margin: 0 auto; font-size: 2.5rem; font-weight: bold; color: inherit; text-transform: uppercase; }
.wp-block-group.services .wp-block-group a { position: absolute; bottom: -1.5rem; left: 50%; margin-left: -102px; color: #000; background-color: var(--alt-bg-color); }
.wp-block-group.services .wp-block-group.title-fix-3 h2 { display: flex; align-items: center; min-height: 150px; }
.wp-block-group.services .wp-block-group.title-fix-3 p { margin-top: 1rem; }

.wp-block-group.services .wp-block-group.color-accent-lightblue h2 { color: var(--color-accent-lightblue); }
.wp-block-group.services .wp-block-group.color-accent-yellow h2 { color: var(--color-accent-yellow); }
.wp-block-group.services .wp-block-group.color-accent-green h2 { color: var(--color-accent-green); }
.wp-block-group.services .wp-block-group.color-accent-red h2 { color: var(--color-accent-red); }
.wp-block-group.services .wp-block-group.color-accent-purple h2 { color: var(--color-accent-purple); }
.wp-block-group.services .wp-block-group.alt-bg-color h2 { color: var(--alt-bg-color); }
.wp-block-group.services .wp-block-group.global-light-grey h2 { color: var(--global-light-grey); }

.wp-block-group.services .wp-block-group.color-accent-lightblue a { background-color: var(--color-accent-lightblue); }
.wp-block-group.services .wp-block-group.color-accent-yellow a { background-color: var(--color-accent-yellow); }
.wp-block-group.services .wp-block-group.color-accent-green a { background-color: var(--color-accent-green); }
.wp-block-group.services .wp-block-group.color-accent-red a { background-color: var(--color-accent-red); }
.wp-block-group.services .wp-block-group.color-accent-purple a { background-color: var(--color-accent-purple); }
.wp-block-group.services .wp-block-group.alt-bg-color a { background-color: var(--alt-bg-color); }
.wp-block-group.services .wp-block-group.global-light-grey a { background-color: var(--global-light-grey); }

@media(max-width: 48rem) {
    .services-top .wp-block-group__inner-container { background: none; }
    .services-top h1 { max-width: 100%; font-size: 2.5rem; }
    .services-top p { max-width: 100%; }
    .wp-block-group.services { padding: 1rem; }
    .wp-block-group.services .wp-block-group h2 { font-size: 2rem; }
    .wp-block-group.services .wp-block-group.title-fix-3 h2 { min-height: 0; }
}

.tag-archive-grid, .category-archive-grid {
    column-count: 3;
    column-gap: 1rem;
}
.tag-archive-grid .attachment-item, .category-archive-grid .attachment-item {
    break-inside: avoid;
    margin-bottom: 1rem;
    overflow: hidden;
}


/* about */
.page-id-22 h2 + p { font-size: 1.25rem; }

.about-promise h3, .about-promise p { padding-left: 60%; }
.about-promise h3 { margin-bottom: .5rem; padding-bottom: .5rem; font-size: 1.25rem; font-weight: bold; color: var(--color-accent-blue); border-bottom: 2px solid var(--color-accent-blue); }
.about-promise p { padding-right: 1rem; }
.about-promise + .about-promise h3 { border-bottom-color: var(--color-accent-yellow); }
.about-promise + .about-promise + .about-promise h3 { border-bottom-color: var(--color-accent-red); }
.about-promise + .about-promise + .about-promise + .about-promise h3 { border-bottom-color: var(--color-accent-purple); }
.about-promise + .about-promise + .about-promise + .about-promise + .about-promise h3 { border-bottom-color: var(--color-accent-green); }

.about-founding { margin-top: 4rem; }
.about-founding h2 { margin-bottom: 2rem; padding-bottom: .5rem; }
.about-founding figcaption { margin-top: 1rem; color: var(--color-accent-blue); }

@media(max-width: 47rem) {
    .about-promise h3, .about-promise p { padding-left: 0; }
}


/* contact */
.page-id-35 .header { display: none; }

.contact-top { position: relative; color: var(--primary-text-color); background: var(--global-light-grey); }
.contact-top h2 { max-width: 28rem; margin-top: 2rem; line-height: 1.125em; }
.contact-top h2 + p { max-width: 24rem; margin-bottom: 10rem; font-size: 1.25rem; font-weight: bold; }
.contact-top p.buttons { margin: 10rem 0 1rem 0; text-align: right; }
.contact-top p.buttons a { margin: 1rem; color: var(--alt-button-text-color); }
.contact-top p.buttons a + a { color: var(--alt2-button-text-color); }
.contact-top:before { content: ''; background: url('/wp-content/themes/metrix_new/src/pattern-compressed.webp') no-repeat; background-size: 112vw 12vw;
    position: absolute; top: 8rem; left: -6rem; width: 130vw; height: 100%; transform: rotate(-20deg) scale(1.1, .85); }
/* .contact-top:after { content: ''; display: block; height: 3rem; margin: 0 -2rem -2rem -2rem; background: #fff; } */
@media(min-width: 2000px) {
    .contact-top:before { top: 4rem; }
}
@media(min-width: 2200px) {
    .contact-top:before { transform: rotate(-20deg) scale(1, .75); }
}
@media(min-width: 2500px) {
    .contact-top:before { top: 0; transform: rotate(-20deg) scale(1, .5); }
}

.contact-message { position: relative; z-index: 1; text-align: center; }
.contact-message h3 { margin-top: 1rem; font-size: 2.5rem; font-weight: bold; color: var(--primary-text-color); }
.contact-message h3 + p { margin-top: 1rem; font-weight: bold; font-size: 1.25rem; }
.contact-message > div { max-width: 450px; }

.contact-form-wrapper { padding: 2rem; background: var(--global-light-grey); }
.wp-block-contact-form-7-contact-form-selector { max-width: 800px; margin: 0 auto; }
.wp-block-contact-form-7-contact-form-selector input, .wp-block-contact-form-7-contact-form-selector textarea { width: 100%; padding: .5rem; border: 0; }
.wp-block-contact-form-7-contact-form-selector input[type=submit] { display: block; width: 10rem; margin: 0 auto; padding: .625rem; font-size: 1.5rem; color: var(--color-accent-yellow); border-radius: 1rem; }

@media(max-width: 84rem) {
    .contact-top:before { top: 14rem; left: 0; }
}
@media(max-width: 50rem) {
    .contact-top { text-align: center; }
    .contact-top:before, .contact-top:after { content: none; }
    .contact-top h2 { max-width: 100%; }
    .contact-top h2 + p { max-width: 40rem; margin: 0 auto 2rem auto; }
    .contact-top p.buttons { margin: 1.5rem 0 0 0; text-align: center; }
    .contact-message h3 { font-size: 2rem; }
    .contact-message h3 + p { font-size: 1rem; }
}


.wp-block-cb-carousel-v2[data-cb-pagination=true] .swiper-horizontal { margin-bottom: 0; }