:root {
    --PrimaryColor:#B80609;
    --PrimaryGradientColor:linear-gradient(to right, #000000, #B80609);
    --SecondaryColor: #B80609;
    --WhiteColor: #fff;
    --BlackColor: #000;
    --LightGrayColor: #ECECEC;
    --heading-text: #262626;

}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Regular.eot');
    src: url('../fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Regular.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Regular.woff') format('woff'),
        url('../fonts/SFProDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Semibold.eot');
    src: url('../fonts/SFProDisplay-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Semibold.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Semibold.woff') format('woff'),
        url('../fonts/SFProDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Thin.eot');
    src: url('../fonts/SFProDisplay-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Thin.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Thin.woff') format('woff'),
        url('../fonts/SFProDisplay-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Black.eot');
    src: url('../fonts/SFProDisplay-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Black.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Black.woff') format('woff'),
        url('../fonts/SFProDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Heavy.eot');
    src: url('../fonts/SFProDisplay-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Heavy.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Heavy.woff') format('woff'),
        url('../fonts/SFProDisplay-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Bold.eot');
    src: url('../fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Bold.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Bold.woff') format('woff'),
        url('../fonts/SFProDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Ultralight.eot');
    src: url('../fonts/SFProDisplay-Ultralight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Ultralight.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Ultralight.woff') format('woff'),
        url('../fonts/SFProDisplay-Ultralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Light.eot');
    src: url('../fonts/SFProDisplay-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Light.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Light.woff') format('woff'),
        url('../fonts/SFProDisplay-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Medium.eot');
    src: url('../fonts/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Medium.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Medium.woff') format('woff'),
        url('../fonts/SFProDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}




html {
    font-size: 16px;
}
html,
body {
    scroll-behavior: smooth; overflow-x: hidden;
}

body {
    color: #3a3a3a;
    font-family: 'SF Pro Display';
    font-weight: 400;
}
a {
    text-decoration: none;
    transition: all 0.2s ease;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.bg-soft {
    background: #F8F8F8;
}


.btn {
        font-size: 1rem;
        padding: 0.65rem 1.8rem;
        border-radius: 5px;
        line-height: 1.25rem;
        font-weight: 500;
        transition: all 0.2s ease; 
        display: inline-flex;
        align-items: center;
        gap: 0.5rem; text-align: center; justify-content: center; 
        position: relative;  transition: all 0.5s ease;
}
.btn span{display: block; position: relative; z-index: 2;}
.btn svg{
    width: 1.2rem;
}

.btn:before{
    width: 100%;
    left: 0;
    border-radius: 5px;
    background-color: var(--PrimaryColor); 
    height: 100%; 
    position: absolute;
    top: 0;
    transition: all 0.3s;
    content: "";

}
.btn:after{
    width: 0;
    left: 50%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    transform: translate(-50%, 0);
    z-index: 1;  
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.3s;
    content: "";

}
.btn:hover::before,
.btn:active::before,
.btn:focus::before {
    transform: scale(0, 1);
}

.btn:hover::after,
.btn:active::after,
.btn:focus::after {
    width: 100%;
    border-color: var(--PrimaryColor);
    transition-delay: 0.2s;
}


.btn:hover,
.btn:focus,
.btn.active {
    outline: none !important;
    box-shadow: none !important;
}


.btn-primary {
color: var(--WhiteColor);
background: none !important;
border:none !important;
}

.btn-primary:before{
 background-color: var(--PrimaryColor);
}
.btn-primary:hover::after,
.btn-primary:active::after,
.btn-primary:focus::after {
  border-color: var(--PrimaryColor);
}

.btn-gradient-primary {
   color: var(--WhiteColor);

}
.btn-gradient-primary:before{
   background: var(--PrimaryGradientColor);
}
.btn-gradient-primary:hover::after,
.btn-gradient-primary:active::after,
.btn-gradient-primary:focus::after {
  border-color: linear-gradient(to left, #000000, #B80609);
}

.btn-gradient-primary:hover,
.btn-gradient-primary:active,
.btn-gradient-primary:focus {
   color: var(--BlackColor);
}


.btn-white {
  color:#3B3B3B;
   border: solid 1px #fff;

}
.btn-white:before{
   background: var(--BlackColor);
}
.btn-white:hover::after,
.btn-white:active::after,
.btn-white:focus::after {
  border-color: var(--PrimaryColor);
}

.btn-white:hover,
.btn-white:active,
.btn-white:focus {
   color: var(--BlackColor);
}






.same-section {
    padding: clamp(5rem, 7vw, 5rem) 0;
}
.same-heading {margin-bottom: 4rem;}
.same-heading h2 {
    color: var(--BlackColor);
    font-size: 2.2rem;
    font-weight: 600;
    line-height:115%; margin-bottom: 1rem;
}

.same-heading h3 {
    color: var(--BlackColor);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4; margin-bottom: 0.6rem;
}

.same-heading p {
     color: #4E4E4E;
   font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.7;
}
.view-all{color: var(--PrimaryColor); font-size: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400;}

.same-heading .primary-text {font-size: 1rem; font-weight: 600; ; line-height: 1.2; margin-bottom: 0.5rem;}

.bg-gray{background: #F4F4F4;}

.max-wid-50{width: 100%; max-width: 60%;}
.max-wid-80{width: 100%; max-width: 80%;}
.same-heading.text-center .max-wid-50{margin:0 auto;}
.same-heading.text-center .max-wid-80{margin:0 auto;}
.same-heading.white-text :is( h2, p) {color: var(--WhiteColor);}

.same-section .section-bottom-btn{margin-top: 1.5rem;}
.section-bottom-btn{display: flex; gap: 1rem; align-items: center; }
.section-bottom-btn.text-center{justify-content: center;}


@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.header  {padding: 0.5rem 0; background: transparent; position: relative;  transition: all 0.3s ease; z-index: 99; position: relative;}
.header .navbar{padding: 0; }
.header .navbar  .nav {gap: 1.7rem;}
.header .navbar  .nav-link{position: relative; color: var(--BlackColor); font-size: 1rem; padding: 0.2rem 0.4rem; transform: all .2s ease; }

.header .navbar .nav-link::before{content: ""; position: absolute; left: 0;right: 0; bottom: -1px; width: 0%; margin: 0 auto; height: 2px; background-color: var(--PrimaryColor); transition: width 0.3s ease;}
.header .navbar-brand {padding: 0;}
.header .navbar-brand img {max-height: 6rem;}
.header .navbar  .nav-link:hover{color: var(--SecondaryColor);}
.header .navbar  .nav-link:hover:before{width: 100%;}
.header .navbar  .nav-link.active { color:var(--SecondaryColor)}
.header .navbar  .nav-link.active:before{width: 100%;}
.header .btn-gradient-primary{margin-left: 1rem;}
.header.headerFix { position: fixed; background: var(--WhiteColor); top: 0; left: 0; width: 100%;  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08); z-index: 9999;animation:headerfixdown 0.7s; } 
.header.headerFix .navbar-brand img{    max-height: 4.3rem;}



@keyframes headerfixdown {
    0% {
    opacity: 0;
    transform: translateY(-100%);
} 
100% {
    opacity: 0.9;
    transform: translateY(0);
    } 
}

.mobile-menu-toggle {background: var(--PrimaryColor);
    color: var(--WhiteColor);
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.2rem;
    border-radius: 50%;
    line-height: 0;
    border: solid 1px var(--PrimaryColor);
    font-size: 1rem;
    cursor: pointer;
    display: none;}
.mobile-menu-toggle svg{    width: 1.2rem;
    color: var(--WhiteColor);}

/*  header css */
.body-overlay.active{display: block;}
.mobile-sidemenu{position: fixed; display: none; top: 0; left: -100%; width: 22rem; height: 100%; background: var(--WhiteColor); box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2); transition: left 0.3s ease; z-index: 9999; gap: 1rem;}
.mobile-sidemenu .close-sidebarmenu{background: var(--PrimaryColor); color: var(--WhiteColor); width: 2.5rem; height: 2.5rem;display: flex; align-items: center; justify-content: center; margin-left: auto; padding: 0.2rem; border-radius: 50%; line-height: 0; border: solid 1px var(--PrimaryColor); font-size: 1rem; cursor: pointer;}
.mobile-sidemenu .close-sidebarmenu svg{width: 1.2rem; color: var(--WhiteColor);}
.mobile-sidemenu a:not(.btn){ color: var(--BlackColor); font-size: 1.2rem; font-weight: 400;  padding: 0.5rem 0; }
.mobile-sidemenu .mobile-sidemenu-head {
    display: flex;

    justify-content: space-between;
    padding: 1rem;
    gap: 1rem 1.5rem; 
    border-bottom: solid 1px #DFDFDF;
    margin-bottom: 1rem;
}
.mobile-sidemenu .mobile-sidemenu-middle{display: flex; align-items: self-start; flex-direction: column; padding: 0 1.5rem; gap: 0.5rem;}
.mobile-sidemenu.active {left: 0;}

.mobile-sidemenu a.logo{    width: 100%;
    max-width: 160px; }
.mobile-sidemenu a.logo img{max-height: 6rem;}
.mobile-sidemenu .btn{font-size: 1.2rem; margin-top: 1rem;}




.body-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1050; display: none;}
.primary-text{color: var(--PrimaryColor);}



.hero-banner{padding: 2rem 0 0; position: relative; }
.hero-banner .banner-content{text-align: center; margin-bottom: 2rem;}
.hero-banner h1{font-weight: 500; font-size: 6rem; line-height: 1.1; color: var(--BlackColor); }
.hero-banner .hero-sub{ font-weight: 400; font-size: 1.2rem;  color: #4E4E4E; width: 100%; max-width:50%; margin: 1rem auto 1rem; }
.hero-banner .banner-content{text-align: center; }
.hero-banner .banner-img{position: relative;}
.hero-banner .banner-img .mouse-icon{    position: absolute;
    left: 47%;
    bottom: 5rem;
    width: 100%;
    max-width: max-content;
    animation: mouseBounce 1.8s ease-in-out infinite;
    z-index: 4;
    cursor: pointer;}



@keyframes mouseBounce {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(0.6rem);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
} 


.one-system-section .app-card {background: #FFF3F3; padding: 2rem 1.5rem; height:100%; border-radius: 10px; display: flex; align-items: center; gap: 1.5rem;} 
.one-system-section .app-card .icon-img{flex-shrink: 0; width: 19%;}
.one-system-section .app-card .app-content{flex-grow: 1;}
.one-system-section .app-card h3{color: var(--BlackColor); font-size: 1.4rem; font-weight: 600;line-height: 115%; margin-bottom: 0.3rem;} 

.one-system-section .app-card p{color: #6A6A6A; font-size: 1rem; margin-bottom: 0.5rem; width: 100%; max-width: 80%; } 
.one-system-section .app-card .download-app-btn{color: var(--SecondaryColor); font-size: 1rem; display: flex; align-items: center; gap: 0.5rem;  } 
.one-system-section .app-card .download-app-btn svg{width: 0.9rem;} 
.one-system-section .bottom-note{text-align: center; color:var(--SecondaryColor) ; font-size: 1rem;  margin-top: 4rem; font-style: italic;} 





.identity-features-section .identity-feature-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;

}

.identity-features-section .feature-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    background: #FFEEEE;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--SecondaryColor);
}

.identity-features-section .feature-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.identity-features-section h3 {
   font-size: 1.4rem;
    color: var(--BlackColor);
    line-height: 1.5;font-weight: 500;
    margin-bottom: 0.5rem;
}

.identity-features-section .feature-text {
    font-size: 1rem;
    color: #595959;
    line-height: 1.5;
    margin: 0;
}


.what-you-can-do .identity-feature-card{text-align: left; border: solid 1px #E5E5E5;}
.what-you-can-do .identity-feature-card .feature-icon{margin-left: inherit;}

.how-it-works-section{background: var(--BlackColor);}


.how-it-works-section .how-it-works-steps {
    display: flex;
    justify-content: center;
    
}

.how-it-works-section .how-step-circle {
    width: 17rem;
    height: 17rem;
    border: 2px dashed var(--SecondaryColor);

    border-radius: 50%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; text-align: center; position: relative;    margin-right: -1.8rem;
}

.how-it-works-section .how-step-circle svg {
    width: 1.7rem;
    height: 1.7rem;
    color: var(--SecondaryColor);
    margin-bottom: 0.8rem;
}

.how-it-works-section .how-step-circle h3 {
    color: var(--SecondaryColor);
    font-size: 1rem; line-height: normal; font-weight: 600;
    margin-bottom: 0.4rem;
}

.how-it-works-section .how-step-circle p {
    font-size: 0.9rem;
    color: #9D9D9D;
    line-height: 1.4;
    margin-bottom: 0;
}

.how-it-works-section .how-step-number {
    font-size: 0.6rem;
    color: #9B9B9B; position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);

}

.gradinent-img-bx{    position: relative;}
.gradinent-img-bx:before {
    position: absolute;
    left: 0;
    height: 120px;
    width: 100%;
    background: linear-gradient(to top, #ffffff, #00000000);
    bottom: 0;
    content: '';
}




.nz-life-audience-section .nz-section h2 {
 font-weight: 400;

}

.nz-life-audience-section .same-heading  .nz-subtitle {
    font-size: 0.9rem;
    color: #555555; font-weight: 300;

}

/* LEFT LIST */
.nz-life-audience-section .nz-list {
    margin: 2rem 0 0 ;
}

.nz-life-audience-section .nz-list li {
    display: flex;
    align-items: center; gap: 0.7rem;
    background: var(--WhiteColor);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: var(--BlackColor);
}

.nz-life-audience-section .nz-list li .nz-icon svg {
    color: var(--SecondaryColor); width: 1.2rem;
}

/* RIGHT BADGES */
.nz-life-audience-section .nz-not-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; margin-top: 2rem;
}

.nz-life-audience-section .nz-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: transparent;
    border: 1px solid #D8D8D8;
    font-size: 0.85rem; font-weight: 300;
    color: var(--BlackColor);
}

.nz-life-audience-section .nz-badge svg {
    width: 14px;
    height: 14px;
    color: var(--SecondaryColor);
}

.life-pilot-section {    margin-bottom: -4rem;
    position: relative;
    z-index: 1;}
.life-pilot-section .life-pilot{background:  url(../images/circle-layer.png)no-repeat center center #000; padding: 3rem 2rem; border-radius: 10px; min-height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.life-pilot-section .life-pilot .same-heading p{color:#AFAFAF;}

.life-pilot-section .life-pilot .btn-white{background: transparent; color: var(--WhiteColor);}
.life-pilot-section .life-pilot .section-bottom-btn{margin-top: 2.8rem;}



.footer {background: #F2F2F2;}
.footer .footer-content{text-align: center; padding: 7rem 0 3rem; }
.footer .footer-content .footer-text{font-size: 1rem; color: #4C4C4C; width: 100%; max-width: 60%; margin: 2rem auto 0; }
.footer .copyright{border-top: solid 1px #C2C2C2; text-align: center; padding: 1rem 0; color: var(--BlackColor); font-weight: 400; }