File: /var/www/stg-everycred.com/wp-content/themes/everycred/header.php
<?php
/**
* The header.
*
* This is the template that displays all of the <head> section and everything up until main.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/
?>
<!doctype html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/assets/images/favicon.ico">
<meta charset="UTF-8">
<title><?php wp_title(''); ?></title>
<?php
if (is_front_page() || is_home()) {
$lcp_page_id = get_queried_object_id();
if (! $lcp_page_id) {
$lcp_page_id = (int) get_option('page_on_front');
}
$banner_image = get_field('banner_image', $lcp_page_id);
if ($banner_image && ! empty($banner_image['url'])) {
$img_id = $banner_image['ID'];
$img_srcset = wp_get_attachment_image_srcset($img_id, 'full');
$img_sizes = '(max-width: 991px) 400px, 50vw';
echo '<link rel="preload" as="image" href="' . esc_url($banner_image['url']) . '" fetchpriority="high" imagesrcset="' . esc_attr($img_srcset) . '" imagesizes="' . esc_attr($img_sizes) . '">';
}
}
if (is_page_template('templates/page-Industry-list.php')) {
$ind_banner = get_field('banner_image_ind', get_queried_object_id());
if ($ind_banner && ! empty($ind_banner['url'])) {
$img_id = $ind_banner['ID'];
$img_srcset = wp_get_attachment_image_srcset($img_id, 'full');
$img_sizes = '(max-width: 991px) 500px, 60vw';
echo '<link rel="preload" as="image" href="' . esc_url($ind_banner['url']) . '" fetchpriority="high" imagesrcset="' . esc_attr($img_srcset) . '" imagesizes="' . esc_attr($img_sizes) . '">';
}
}
echo '<link rel="preload" as="style" href="' . get_template_directory_uri() . '/assets/css/bootstrap.min.css?ver=1.1">';
$fonts_uri = get_template_directory_uri() . '/assets/fonts';
echo '<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="' . $fonts_uri . '/Urbanist-Bold.woff2">';
echo '<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="' . $fonts_uri . '/Urbanist-SemiBold.woff2">';
echo '<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="' . $fonts_uri . '/Urbanist-Regular.woff2">';
echo '<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="' . $fonts_uri . '/Urbanist-Medium.woff2">';
?>
<!-- <title>EveryCRED | Verifiable Credentials & Decentralized Identity</title> -->
<meta name="keywords" content="everycred">
<meta name="author" content="everycred">
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php echo get_template_directory_uri(); ?>/assets/css/aos.css" rel="stylesheet" media="print" onload="this.media='all'">
<noscript>
<link href="<?php echo get_template_directory_uri(); ?>/assets/css/aos.css" rel="stylesheet">
</noscript>
<?php if (is_singular('case_study')) : ?>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<?php endif; ?>
<!-- Google Tag Manager (Delayed) -->
<script>
let gtmLoaded = false;
function loadGTM() {
if (gtmLoaded) return;
gtmLoaded = true;
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-W2W5P8TV');
}
['scroll', 'mousemove', 'touchstart', 'click'].forEach(function(event) {
window.addEventListener(event, loadGTM, {
once: true,
passive: true
});
});
setTimeout(loadGTM, 5000); // Fallback
</script>
<!-- End Google Tag Manager -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Corporation",
"name": "EveryCRED",
"alternateName": "Verifiable Credential Platform",
"url": "https://everycred.com/",
"logo": "https://everycred.com/wp-content/uploads/2023/10/logo-1.svg",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "084889 64723",
"contactType": "sales",
"areaServed": "IN",
"availableLanguage": ["en", "Hindi"]
}
}
</script>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #0c0f18;
color: #fff;
}
@font-face {
font-family: "Urbanist";
src: url("<?php echo get_template_directory_uri(); ?>/assets/fonts/Urbanist-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Urbanist";
src: url("<?php echo get_template_directory_uri(); ?>/assets/fonts/Urbanist-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Urbanist";
src: url("<?php echo get_template_directory_uri(); ?>/assets/fonts/Urbanist-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Urbanist";
src: url("<?php echo get_template_directory_uri(); ?>/assets/fonts/Urbanist-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: optional;
}
.container {
width: 100%;
padding-right: var(--bs-gutter-x, .75rem);
padding-left: var(--bs-gutter-x, .75rem);
margin-right: auto;
margin-left: auto;
}
@media(min-width:576px) {
.container {
max-width: 540px;
}
}
@media(min-width:768px) {
.container {
max-width: 720px;
}
}
@media(min-width:992px) {
.container {
max-width: 960px;
}
}
@media(min-width:1200px) {
.container {
max-width: 1140px
}
}
@media(min-width:1400px) {
.container {
max-width: 1320px
}
}
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x))
}
.row>* {
box-sizing: border-box;
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y)
}
.col-12 {
flex: 0 0 auto;
width: 100%
}
@media(min-width:768px) {
.col-md-6 {
flex: 0 0 auto;
width: 50%
}
}
@media(min-width:992px) {
.col-lg-6 {
flex: 0 0 auto;
width: 50%
}
.col-lg-5 {
flex: 0 0 auto;
width: 41.6667%
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.3333%
}
}
.w-100 {
width: 100% !important;
}
.h-100 {
height: 100% !important;
}
.d-flex {
display: flex !important;
}
.flex-column {
flex-direction: column !important;
}
.d-none {
display: none !important;
}
.position-relative {
position: relative !important;
}
.position-fixed {
position: fixed !important;
}
.align-items-center {
align-items: center !important;
}
.justify-content-center {
justify-content: center !important;
}
.text-center {
text-align: center !important;
}
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.flex-column-reverse {
flex-direction: column-reverse !important;
}
.flex-row {
flex-direction: row !important;
}
@media(min-width:768px) {
.flex-md-row {
flex-direction: row !important;
}
.text-md-start {
text-align: left !important;
}
.mt-md-0 {
margin-top: 0 !important;
}
.mx-md-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.hero-img-col,
.hero-text-col {
min-height: 500px;
}
}
@media(min-width:992px) {
.flex-lg-row {
flex-direction: row !important
}
.text-lg-start {
text-align: left !important;
}
.mt-lg-0 {
margin-top: 0 !important;
}
.align-items-lg-center {
align-items: center !important;
}
.justify-content-lg-between {
justify-content: space-between !important;
}
.d-lg-block {
display: block !important;
}
}
.font-52 {
font-size: 52px;
line-height: 1.25;
margin-bottom: 24px;
}
.font-20 {
font-size: 20px;
line-height: 30px;
}
.font-16 {
font-size: 16px;
line-height: normal;
}
.font-18 {
font-size: 18px;
line-height: 30px;
}
.text-medium {
font-weight: 500;
}
.text-bold {
font-weight: 700;
}
.text-white {
color: #fff !important;
}
.text-black {
color: #000 !important;
}
.bg-black {
background-color: #0f0f0f !important;
}
@media(max-width:1024px) {
.font-52 {
font-size: 26px;
}
.font-20 {
font-size: 16px;
line-height: 24px;
}
.font-16 {
font-size: 13px;
line-height: 20px;
}
}
.py-120 {
padding: 5% 0;
}
@media screen and (max-width: 991px) {
.py-120 {
padding: 60px 0;
}
}
@media screen and (max-width: 767px) {
.py-120 {
padding: 30px 0;
}
}
.banner-section,
.product-banner,
.img-banner {
min-height: 500px;
display: flex;
align-items: center;
}
@media(min-width:992px) {
.banner-section,
.product-banner,
.img-banner {
min-height: 600px;
}
.about-everycred {
min-height: 500px;
}
}
@media(max-width:991px) {
.banner-section,
.product-banner,
.img-banner {
min-height: auto;
padding-bottom: 30px !important;
}
}
.mb-5 {
margin-bottom: 30px !important;
}
.my-5 {
margin: 30px 0 !important;
}
.mt-4 {
margin-top: 1.5rem !important;
}
@media(min-width:992px) {
.pb-lg-5 {
padding-bottom: 3rem !important;
}
}
a {
text-decoration: none !important;
color: inherit;
}
.dropdown-menu {
display: none;
}
@media (min-width: 992px) {
.dropdown-center:hover .dropdown-menu {
display: block !important;
}
}
.dropdown-menu.show {
display: block !important;
}
.navbar-collapse:not(.show) {
display: none;
}
.nav-list a,
.navbar-nav a {
color: #fff;
}
.white-btn {
background-color: #fff !important;
color: #0f1419 !important;
}
.white-btn:hover {
background-color: #0f1419 !important;
color: #fff !important;
}
.header {
z-index: 100;
height: 72px;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: .5rem;
padding-bottom: .5rem;
}
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
white-space: nowrap;
text-decoration: none;
}
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
cursor: pointer;
}
.navbar-toggler:focus {
outline: none;
box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
.collapse:not(.show) {
display: none;
}
@media(min-width:992px) {
.navbar-expand-lg {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-lg .collapse {
display: flex !important;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.d-lg-none {
display: none !important;
}
}
.banner-section .banner-img-wrap {
aspect-ratio: 1 / 1;
width: 100%;
max-width: 728px;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 1;
display: block;
min-height: 1px;
}
.img-banner-wrap {
position: relative;
overflow: hidden;
background: #0c101a;
z-index: 1;
display: block;
width: 100%;
max-width: none;
aspect-ratio: 3.2 / 1;
}
@media (max-width: 991px) {
.img-banner-wrap {
aspect-ratio: 16 / 9;
min-height: 300px;
}
}
.banner-img-wrap img,
.img-banner-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.img-banner .container {
position: relative;
z-index: 2;
}
.banner-section .banner-img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
@media (min-width: 992px) {
.banner-section .banner-img-wrap {
max-width: 100%;
}
}
@media (max-width: 991px) {
.banner-section .banner-img-wrap {
max-width: 400px;
}
.hero-img-col {
min-height: 400px;
}
.hero-text-col {
min-height: 200px;
}
}
.navbar-brand img {
aspect-ratio: 175 / 40;
width: 175px;
height: 40px;
}
.navbar-brand.d-lg-none img {
width: 40px !important;
height: 40px !important;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: left center;
}
.dropdown-menu img,
.nav-list a img {
width: 24px;
height: 24px;
flex-shrink: 0;
object-fit: contain;
}
.navbar-toggler img {
width: 30px;
height: 30px;
display: block;
}
.logo-box img {
aspect-ratio: 200 / 80;
}
.about-img img {
aspect-ratio: 1011 / 500;
}
.talk-btn {
width: fit-content;
height: 40px;
padding: 7px 16px;
border-radius: 1000px;
display: inline-flex;
align-items: center;
text-decoration: none;
transition: .3s;
}
.white-btn {
background-color: #fff;
color: #0f0f0f;
border: 1px solid #fff;
}
/* ── Scroll reveal ── */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.d1 {
transition-delay: .1s;
}
.d2 {
transition-delay: .2s;
}
.d3 {
transition-delay: .3s;
}
.d4 {
transition-delay: .4s;
}
/* ── Scrollbar ── */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #0c0f18;
}
::-webkit-scrollbar-thumb {
background: #0A3161;
border-radius: 3px;
}
/* ================================================================
HERO + OVERVIEW
================================================================ */
.hero-overview-wrap {
position: relative;
background: #0A3161;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ── Hero zone ── */
.hero-zone {
position: relative;
width: 100%;
height: 55vh;
min-height: 320px;
max-height: 480px;
overflow: hidden;
flex-shrink: 0;
}
.hero-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 20%;
background-repeat: no-repeat;
filter: grayscale(25%) brightness(0.6);
}
.hero-wash {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10, 49, 97, 0.18) 0%,
rgba(10, 49, 97, 0.50) 30%,
rgba(10, 49, 97, 0.82) 70%,
rgba(10, 49, 97, 1.00) 100%);
}
.hero-title-block {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 88px 24px 24px;
text-align: center;
}
.hero-title-block h1 {
color: #fff;
font-weight: 600;
line-height: 1.22;
font-size: clamp(1.9rem, 3.8vw, 3.2rem);
max-width: 820px;
margin: 0;
}
/* ── Overview zone ── */
.overview-section {
position: relative;
background: #0A3161;
/* Extra top padding on desktop to give shield badge breathing room */
padding: 48px 16px 40px;
display: flex;
justify-content: center;
}
/* ── Card ── */
.overview-card {
position: relative;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 52px rgba(0, 0, 0, 0.25);
padding: 40px 68px;
width: 100%;
max-width: 1011px;
/* Reserve space at top-right for the badge so it never overlaps text */
box-sizing: border-box;
}
/* ── Shield badge ── */
.shield-badge {
position: absolute;
top: -62px;
right: 50px;
pointer-events: none;
z-index: 30;
filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}
.shield-badge img {
width: 120px;
height: 172px;
object-fit: contain;
display: block;
}
/* ── Card heading ── */
.overview-heading {
color: #111111;
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
font-weight: 600;
text-align: center;
margin: 0 0 24px 0;
}
/* ── Description ── */
.overview-description {
color: #4b5563;
font-size: 15px;
line-height: 1.75;
text-align: center;
}
.overview-description p {
margin: 0 0 16px 0;
}
.overview-description p:last-child {
margin-bottom: 0;
}
/* ── Tablet: 769px – 1024px ── */
@media (max-width: 1024px) {
.hero-zone {
height: 48vh;
max-height: 400px;
}
.overview-card {
padding: 40px 40px;
}
.shield-badge {
width: 100px;
top: -52px;
right: 30px;
}
.shield-badge img {
width: 100px;
height: 150px;
}
}
/* ── Mobile: ≤ 768px ── */
@media (max-width: 768px) {
.hero-zone {
height: 42vh;
min-height: 260px;
}
.hero-title-block {
padding: 80px 20px 20px;
}
.hero-title-block h1 {
font-size: clamp(1.5rem, 5.5vw, 2rem);
}
.overview-section {
/* Push card down so badge has room above it */
padding: 56px 12px 32px;
}
.overview-card {
padding: 48px 20px 28px;
/* extra top padding inside card — badge floats above */
border-radius: 12px;
}
.shield-badge {
width: 80px;
top: -42px;
right: 16px;
}
.shield-badge img {
width: 80px;
height: 130px;
}
.overview-heading {
/* Shift heading left on mobile to avoid badge overlap on short headings */
padding-right: 70px;
text-align: left;
}
.overview-description {
font-size: 14px;
text-align: left;
}
}
/* ── Small mobile: ≤ 400px ── */
@media (max-width: 400px) {
.overview-section {
padding: 52px 8px 24px;
}
.overview-card {
padding: 44px 16px 24px;
border-radius: 10px;
}
.shield-badge {
width: 68px;
top: -36px;
right: 12px;
}
.shield-badge img {
width: 68px;
height: 110px;
}
.overview-heading {
font-size: 1.2rem;
padding-right: 60px;
}
}
/* ================================================================
SECTION BACKGROUNDS
================================================================ */
.sec-dark {
background: #0c0f18;
}
.sec-light {
background: #f3f4f6;
}
.sec-blue {
background: #0A3161;
}
.sec-white {
background: #fff;
}
.sec-conc {
background: #060c1a;
position: relative;
overflow: hidden;
}
/* ================================================================
CHALLENGE CARDS
================================================================ */
.ch-card {
background: rgba(255, 255, 255, .055);
border: 1px solid #DBDFE780;
border-radius: 10px;
padding: 26px 22px;
transition: transform .28s, background .28s;
height: 100%;
}
.ch-card:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, .09);
}
.icon-box {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
}
.icon-box img {
height: 100%;
width: 100%;
}
/* ================================================================
OBJECTIVE
================================================================ */
.chev-li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.chev-li svg {
flex-shrink: 0;
margin-top: 3px;
}
/* ================================================================
SOLUTIONS
================================================================ */
.sol-title {
color: #fff;
font-size: 1rem;
font-weight: 600;
margin-bottom: 8px;
}
.sol-desc {
color: rgba(255, 255, 255, .5);
font-size: .875rem;
line-height: 1.6;
}
/* Solutions desktop 3-col grid */
.sol-grid {
display: grid;
grid-template-columns: 1fr 240px 1fr;
grid-template-rows: auto auto auto;
gap: 0 56px;
}
.sol-left1 {
grid-column: 1;
grid-row: 1;
align-self: end;
padding-bottom: 40px;
}
.sol-shield {
grid-column: 2;
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
}
.sol-right1 {
grid-column: 3;
grid-row: 1;
align-self: end;
padding-bottom: 40px;
}
.sol-left2 {
grid-column: 1;
grid-row: 2;
padding-top: 40px;
}
.sol-right2 {
grid-column: 3;
grid-row: 2;
padding-top: 40px;
}
.sol-bottom {
grid-column: 1 / 4;
grid-row: 3;
text-align: center;
padding-top: 48px;
}
.sol-mobile-item {
border-left: 2px solid rgba(125, 211, 252, 0.5);
padding-left: 1.25rem;
}
/* ================================================================
VALUE PROP
================================================================ */
.vp-card {
background: rgba(255, 255, 255, .055);
border: 1px solid #DBDFE780;
border-radius: 10px;
padding: 28px 22px;
transition: transform .28s, background .28s;
height: 100%;
}
.vp-card:hover {
transform: translateY(-4px);
}
/* ================================================================
RESULTS
================================================================ */
.res-table {
max-width: 760px;
margin: 0 auto;
}
.res-row {
display: grid;
grid-template-columns: 220px 1fr 44px 1fr;
align-items: center;
gap: 0;
margin-bottom: 14px;
}
.res-label {
font-weight: 600;
font-size: 1rem;
color: #111;
}
.res-before {
border: 1px solid #d1d5db;
border-radius: 8px;
text-align: center;
padding: 18px 12px;
font-size: .88rem;
color: #374151;
}
.res-after {
background: #0A3161;
border-radius: 8px;
text-align: center;
padding: 18px 12px;
font-size: .88rem;
color: #fff;
font-weight: 500;
}
.res-arrow {
text-align: center;
color: #9ca3af;
font-size: 1.1rem;
}
/* Tablet */
@media (max-width: 768px) {
.res-row {
grid-template-columns: 140px 1fr 28px 1fr;
}
.res-label {
font-size: 0.88rem;
}
.res-before,
.res-after {
padding: 14px 8px;
font-size: 0.82rem;
}
.res-arrow {
font-size: 0.95rem;
}
}
/* Mobile */
@media (max-width: 480px) {
.res-row {
grid-template-columns: 85px 1fr 18px 1fr;
gap: 4px;
margin-bottom: 12px;
}
.res-label {
font-size: 0.72rem;
line-height: 1.3;
padding-right: 2px;
}
.res-before,
.res-after {
padding: 10px 6px;
font-size: 0.70rem;
border-radius: 6px;
}
.res-arrow {
font-size: 0.70rem;
}
}
/* ================================================================
CLIENT BRIEF
================================================================ */
.client-img-wrap {
position: relative;
min-height: 320px;
}
.client-img-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.client-img-gradient {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to right, rgba(10, 49, 97, 0.55), transparent);
}
/* ================================================================
CONTACT
================================================================ */
.contact-card {
background: #0A3161;
border-radius: 14px;
padding: 36px 32px;
color: #fff;
}
.contact-field {
width: 100%;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 11px 14px;
font-size: .9rem;
outline: none;
font-family: inherit;
margin-bottom: 1rem;
}
.contact-field:focus {
border-color: #0A3161;
box-shadow: 0 0 0 2px rgba(10, 49, 97, .18);
}
textarea.contact-field {
resize: vertical;
min-height: 100px;
margin-bottom: 1rem;
}
.btn-submit {
background: #0A3161;
color: #fff;
font-weight: 600;
font-size: .875rem;
padding: .7rem 2rem;
border-radius: 8px;
border: none;
transition: opacity .2s;
}
.btn-submit:hover {
opacity: .88;
}
/* ================================================================
FOOTER
================================================================ */
.site-footer {
background: #0A3161;
}
.footer-link {
color: rgba(255, 255, 255, .45);
font-size: .875rem;
text-decoration: none;
transition: color .2s;
}
.footer-link:hover {
color: #7dd3fc;
}
/* ================================================================
CONCLUSION SHIELD DECO
================================================================ */
.conc-shield-deco {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 320px;
display: flex;
align-items: center;
justify-content: center;
opacity: .10;
pointer-events: none;
}
@media (max-width: 992px) {
.conc-shield-deco {
display: none;
}
}
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W2W5P8TV"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
$logo = get_field('logo', 'option');
$footer_logo = get_field('footer_logo', 'option');
$talk_to_us = get_field('talk_to_us', 'option');
?>
<main>
<header class="header bg-black w-100 position-fixed top-0 left-0">
<div class="container h-100">
<nav class="navbar navbar-expand-lg navbar-light m-0 h-100 justify-content-between align-items-center p-0">
<?php if ($logo || $footer_logo) { ?>
<a class="navbar-brand h-100 m-0 p-0 me-auto d-flex align-items-center justify-content-start d-lg-none" href="<?php echo site_url(); ?>">
<img
src="<?php
if (wp_is_mobile()) {
echo esc_url($footer_logo['url']);
} else {
echo esc_url($logo['url']);
}
?>"
alt="<?php echo esc_attr($logo['alt']); ?>"
title="<?php echo esc_attr($logo['title']); ?>"
width="40"
height="40" />
</a>
<?php } ?>
<button class="navbar-toggler" id="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/menu.svg" alt="menu" width="30" height="30" class="menu-icon" id="menu-icon" />
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/close.svg" alt="close" width="30" height="30" class="menu-close-icon" id="menu-close-icon" style="display: none;" />
</button>
<div class="collapse navbar-collapse w-100 h-100 navbar-main" id="navbarTogglerDemo01">
<div class="container h-100">
<div class="d-flex flex-column flex-lg-row justify-content-lg-between justify-content-start align-items-lg-center align-items-start w-100 h-100">
<div class="left-header d-flex align-items-center">
<?php if ($logo || $footer_logo) { ?>
<a class="navbar-brand h-100 m-0 p-0 pe-5 d-none d-lg-block" href="<?php echo site_url(); ?>">
<img
src="<?php
if (wp_is_mobile()) {
echo esc_url($footer_logo['url']);
} else {
echo esc_url($logo['url']);
}
?>"
alt="<?php echo esc_attr($logo['alt']); ?>"
title="<?php echo esc_attr($logo['title']); ?>"
width="175"
height="40" />
</a>
<?php } ?>
<div class="navbar-collapse ps-5 pe-0" id="navbarText">
<?php // wp_nav_menu(array('menu' => 'Primary menu', 'container' => false, 'menu_class' => 'navbar-nav ms-auto' ));
?>
</div>
</div>
<?php $menuDetails = get_field('menu_detail', 'options'); ?>
<div class="d-flex align-items-start align-items-lg-center flex-column flex-lg-row nav-list h-100">
<?php foreach ($menuDetails as $menuDetail) :
$subMenu = $menuDetail['sub_menu_name'];
if ($subMenu) {
?>
<div class="dropdown-center mb-3 mb-lg-0 me-0 me-lg-3">
<button class="px-0 font-16 text-white bg-transparent border-0 dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<?php echo $menuDetail['main_menu_name']['title']; ?>
</button>
<div class="dropdown-menu">
<div class="container">
<div class="row align-items-center">
<?php foreach ($subMenu as $item) : ?>
<div class="col-12 col-lg-4 mt-3 mt-lg-0">
<a href="<?php echo $item['menu_title']['url']; ?>" class="d-flex align-items-center me-0 me-xl-5">
<img
src="<?php echo $item['sub_menu_icon']['url']; ?>"
alt="<?php echo esc_attr($item['menu_title']['title']); ?>"
width="24"
height="24" />
<div class="ms-3">
<p class="font-18 text-medium"><?php echo $item['menu_title']['title']; ?></p>
<p class="font-16 mt-1"><?php echo $item['menu_description']; ?></p>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<?php } else {
echo '<a href="' . $menuDetail['main_menu_name']['url'] . '" class="text-white font-16 me-lg-3 mb-3 mb-lg-0">' . $menuDetail['main_menu_name']['title'] . '</a>';
}
endforeach; ?>
</div>
<div class="right-header mt-3 mt-lg-0 d-flex align-items-center">
<div class="navbar-collapse pe-0" id="navbarText">
<ul class="navbar-nav ms-auto align-items-center">
<li class="me-0 me-lg-4">
<a href="https://github.com/EveryCRED" target="_blank" class="text-white font-16">GitHub <img src="<?php echo get_template_directory_uri(); ?>/assets/images/link-arrow.svg" alt="arrow" width="16" height="16" /></a>
</li>
<li class="nav-item position-relative mt-3 mt-lg-0">
<a href="" class="radius-40 font-16 white-btn text-semi talk-btn d-flex align-items-center justify-content-center" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/aditya-bhattacharya-viitor/30min'});return false;">Book a demo</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>