@charset "UTF-8";

html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
font-optical-sizing: auto;
font-style: normal;
margin:0;
background-size: cover;
background-color: #EDF2F5;
font-family: "Open Sans", sans-serif;
}

a {
text-decoration: none;
color: #2E333B;
}

img {
width: 100%;
}

em {
font-size: 16px;
color: #008F56;
font-weight: 400;
line-height: 1.2em;
font-style: normal;
}

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.grid h1 {
font-size: 20px;
font-weight: 600;
color: #000000;  
}

.grid p {
font-size: 16px;
line-height: 1.5em;
font-weight: 400;
color: #000000;  
}

.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.grid-2 h1 {
font-size: 28px;
font-weight: 600;
color: #000000;  
}

.grid-2 p {
font-size: 16px;
line-height: 1.5em;
font-weight: 400;
color: #000000;  
}

.section-header h1{
font-size: 28px;
font-weight: 600;
}

.section-header p{
font-size: 16px;
font-weight: 400;
max-width: 50%;
line-height: 1.5em;
}

.column-sm {
padding-right: 20px;
}

.column-lg {
padding-right: 20px;
}

#pagesplitcontainer {
display: flex;
}

.quick-insight-tag {
display: inline-block;
background-color: #28a745; /* green */
color: #ffffff; /* white text */
font-size: 10px;
padding: 6px 12px;
border-radius: 9999px; /* fully rounded */
font-family: Arial, sans-serif;
margin-bottom: 12px;
}


#insights {
  margin-top: 32px;
}

.wrapper {
max-width: 1440px;
margin:0 auto;
}

.wrapper-left {
position: sticky;
top: 32px;
padding-left: 32px;
}

.wrapper-right {
padding: 24px;
margin-left: 0px;
margin-right: 0px;
display: grid;
}

.divider1 {
border-top: 1px solid #E0E8FA;
height: 2px;
margin-bottom: 32px;
margin-top: 32px;
}

.divider-color {
height: 4px;
background-image: url("../images/divider-color1@2x.png");
}

.portfoliopageheader h1 {
font-size: 64px;
color: #1A2B4F;
font-weight: 600;
text-align: left;
margin-top: 24px;
}

.portfoliopageheader img {
width: 100%;
margin: 0 auto;
text-align: center;
}

.videosection {
display: inline-flex;
margin:0 auto;
text-align: center;
}

.left {
width: 50%;
}

.right {
width: 40%;
}

.maingrid {
display: flex;
margin-bottom: 64px;
}

.description-lg .left .right{
padding-right: 16px;
}

.description-sm h2 {
font-weight: 600;
color: #1A2B4F;
}




.navlistcontainer img {
width: 24px; 
margin-right: 8px;
}

.navlistcontainer {
margin-right: 24px;
min-width: 140px;
padding-top: 16px;
}

.navlistcontainer ul {
padding: 0;
}

.navlistcontainer  li {
margin-top: 24px;
list-style: none;
display: flex;
align-items: end;
font-size: 13px;
font-weight: 500;
}

.navlistcontainer  ul a {
color: #1A2B4F;
}

.navlistcontainer  ul a:hover {
color: #EE3F5C;
}

.navlistcontainer svg {
padding-right: 8px;
}

.mobile-style {
visibility: hidden;
display: none;
}

#hiddennavigation {
visibility: hidden;
}

#hiddennavigation p {
margin:0;
}

.visiblenav {
visibility: visible !important;
height: 50px;
background-color: #fff;
width: 100px;
top:0;
float: right !important;
}

.menu-container {
position: relative;
display: inline-block;
float: right;
margin-top: 24px;
}

.menu-container img {
width: 24px; 
margin-right: 8px;
}

.menu-container  li {
display: flex; 
align-items: end; 
margin-bottom: 12px;
}

button {
background: none;
border: none;
cursor: pointer;
}

.dropdown-menu {
position: absolute;
top: 32px;
right: 0;
background: white;
border: 1px solid #ddd;
border-radius: 12px;
min-width: 200px;
display: none;
z-index: 100;
padding: 24px;
}

.dropdown-menu a {
display: block;
padding: 10px;
font-size: 15px;
color: #121F3A;
font-weight: 500;
list-style: none;
}

.dropdown-menu ul li {
}

.dropdown-menu a:hover {
background-color: #f5f5f5;
}
.navhidden {
visibility: hidden;
}

#navhidden {
position: sticky;
top: 100px; 
}

/* START IMAGES CONTAINER */
#imagescontainer {
display: flex;
margin-top: 32px;
margin-bottom: 32px;
}

#imagescontainer img {
width: 100%;
}

.imagesconatinerheader h1 {
font-size: 18px;
color: #121F3A;
margin-top: 24px;
}

#imagescontainer p {
font-size: 13px ;
color: #121F3A ;
font-weight: 400;
margin-top: 12px;
padding-left: 4px;
}
/* END IMAGES CONTAINER */


/* START METRIC TILE STYLES */
#metric {
display: flex;
width: 100%;
}

.metriccontainer {
padding: 20px;
background: #DDF9EF;
border-radius: 8px;
border: 1px dashed #C1E9D8;
}

.metriccontainer h1 {
font-size: 14px !important;
color: #1B5542 !important;
font-weight: 500;
line-height: 1.5em;
font-style: normal;
margin-bottom: 0px !important;
margin-top: 4px;
}

.metriccontainer p {
font-size: 14px !important;
color: #1B5542 !important;
font-weight: 600;
line-height: 1.5em;
font-style: normal;
margin-bottom: 0px !important;
margin-top: 4px;
}
/* END METRIC TILE STYLES */






.top-bar {
width: 100%;
padding-bottom: 16px;
padding-left: 24px;
padding-top: 32px;
position: sticky;
top: 5px;
background-color: #EDF2F5;
  z-index: 9999;
backdrop-filter: blur(10px);
}

.top-bar-left {
  width: 100%;
  display: flex;
  align-items: center;
}

.top-bar-right {
  width: 50%;
}


.companyname {
  display: flex;
  gap: 4px;
}
.companyname p {
  width: 100%;
  font-size: 18px !important;
}
.companyname img {
  width: 25%;
}
/* START RESPONSIVE STYLES */
/* START RESPONSIVE STYLES */
@media (min-width: 320px) and (max-width: 815px) {

body {
font-style: normal;
margin:0;
padding:20px;
background-size: cover;
background-color: #EDF2F5;
}

video {
max-width: 320px;
}

img {
width: 100%;
}
#navhidden {
display: none;
}
.grid {
grid-template-columns: 1fr;
}

#imagescontainer {
display: inline-grid;
margin-top: 32px;
margin-bottom: 32px;
}

.maingrid {
display: grid;
width: 100%;
} 

.description-lg {
width: 100%;
padding-right: 0px;
}

.description-sm {
width: 100%;
padding-right: 0px;
}

.videosection {
display: flex;
max-width: 340px !important;
}

#pagesplitcontainer {
display: grid;
padding: 0px;
}



.wrapper-left {
display: none !important;
}

.wrapper-right {
padding: 0px;
border:none;
}

.left {
width: 100%;
}

.top-bar {
position: sticky;
overflow: visible;
max-width: 100%;
}

.stickyheader p {
font-size: 16px !important;
margin: 0 !important;
}

.right {
width: 100%;
display: flex;
align-content: center;
}

.right img {
width:100%;
}

}
/* END RESPONSIVE STYLES */
/* END RESPONSIVE STYLES */
/* END RESPONSIVE STYLES */
/* END RESPONSIVE STYLES */







/* BACK TO TOP BUTTON START */

  /* Button */
  #backToTop {
    position: fixed;
    right: 20px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 9999;
  }

  /* Show button */
  #backToTop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hover effect */
  #backToTop:hover {
    background: #333;
    transform: translateY(-3px);
  }
/* BACK TO TOP BUTTON END */




/* START BACK BUTTON  */
.tagback {
width: 50px;
    height: 50px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    pointer-events: none;
    transition: all 0.3s ease;
}

.tagback svg {
width: 20px;
height: 20px;
fill: none;
stroke: #fff;
stroke-width: 2;

}
/* END BACK BUTTON  */