@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import './responsive.css';
:root {
    --primary-color: #9ACD32;
    --bg-color: #000101;
    --heading-color: #FFFFFF;
    --text-color: #FFFFFFB2;
    --text-white-color: #FFFFFF;
    --theme-font-family: 'Space Grotesk', sans-serif;
    --menu-font-size: 15px;
    --menu-font-weight: 400;
    --menu-active-font-weight: 600;
    --footer-bg-color: #081212;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--theme-font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.margin-top-active
{
    margin-top: 80px !important;
}
/*===========================
    Header 
===========================*/
.sz-header {
    background-color: var(--bg-color);
}
.sz-header-logo img
{
    margin-right: 20px;
}
.sz-header .nav {
    gap: 20px;
}
.sz-header .nav-link {
    font-family: var(--theme-font-family);
    font-size: var(--menu-font-size);
    font-style: normal;
    font-weight: var(--menu-font-weight);
    line-height: normal;
    color: var(--text-color);
}

.sz-header .nav-link:hover {
    color: var(--primary-color);
}

.sz-header .nav-link.active {
    background-color: transparent;
    color: var(--primary-color);
    font-weight: var(--menu-active-font-weight);
    border-bottom: 1px solid var(--primary-color);
    border-radius: 0px;
}
/*===========================
    Hero Section
===========================*/
.sz-hero 
{
    margin-bottom: 120px !important;
}
.sz-spacer{
    margin-top: 80px;
}
.sz-hero-content-container
{
    position: relative;
}
.sz-hero-content .sz-hero-title
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
     width: 536px;
}
.sz-hero-content .sz-hero-description
{
   color: var(--text-color);
    font-family: var(--theme-font-family);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 536px;
}
.sz-button-text-title
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 40px;
}
.sz-app-buttons
{
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.sz-app-button-group
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    text-decoration: none;
    padding: 5.787px 20.254px;
    flex-shrink: 0;
    border-radius: 6.751px;
    background: #141E1E;
    backdrop-filter: blur(4.822403907775879px);
}
.sz-app-button-group:hover
{
    background: var(--primary-color);
}
.sz-app-button-group:hover .sz-app-button-download-text,
.sz-app-button-group:hover .sz-app-button-branding-text-bold
{
    color: #000;
}
.sz-app-button-group:hover svg
{
    filter: invert(1);
}
.sz-app-button-text .sz-app-button-download-text
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 9.645px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.sz-app-button-text .sz-app-button-branding-text-bold
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 15.432px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.sz-hero-video-container
{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    aspect-ratio: 450 / 450; /* 16:9 aspect ratio */
    mask-image: url('../img/hero-video-mask.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;

    -webkit-mask-image: url('../img/hero-video-mask.svg');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.sz-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sz-hero-image-container
{
    position: absolute;
    top: 0px;
    overflow: hidden;
}
/*===========================
        Features Section
===========================*/
.sz-features{
    margin-top: 20px;
}
.sz-features .sz-features-title
{
    color: var(--text-white-color);
    text-align: center;
    font-family: var(--theme-font-family);
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
}
.sz-features .sz-features-para
{
    color: var(--text-color);
    text-align: center;
    font-family: var(--theme-font-family);
    font-size: 15.042px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 438px;
    margin:auto

}
.sz-features-content-list
{
    margin-bottom: 40px;
}
.sz-features-content-list .sz-features-list-title
{
    color: var(--text-color);
    font-family: var(--theme-font-family);
    font-size: 18.803px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 8px;
    opacity: 0.6;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.sz-features-content-list.sz-active-list .sz-features-list-title
{
    color:var(--text-white-color);
    opacity: 1;
}
.sz-features-content-list .sz-features-list-para
{
    color: var(--text-color);
    font-family: var(--theme-font-family);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 365.719px;
    opacity: 0.6;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.sz-features-content-list.sz-active-list .sz-features-list-para
{
    color:var(--text-white-color);
    opacity: 1;
}
/*===========================
        How it works  
===========================*/
.sz-steps-works
{
    margin-top: 150px;
    margin-bottom: 60px;
}
.sz-steps-works-title
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 29.157px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 30px;
}
.sz-steps-works-list li
{
    color: var(--text-color);
    font-family: var(--theme-font-family);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 25px;
}
.sz-steps-works-video {
    position: relative;
    top: -100px;
    width: 100%;
    aspect-ratio: 700 / 616; /* Maintains original ratio */
    
    mask-image: url('../img/step-video-mask.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;

    -webkit-mask-image: url('../img/step-video-mask.svg');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    overflow: hidden;
}

.sz-steps-works-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sz-steps-works-image
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*===========================
        Footer
===========================*/
.sz-footer {
    background-color: var(--footer-bg-color);
    color: var(--text-color);
    padding: 40px 0;
}
.sz-footer-divider-line1 {
    flex-grow: 1;
    height: 1px;
    background-color: var(--primary-color);
    opacity: 0.5;
    position: relative;
}
.sz-footer-divider-line1::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    transform: rotate(40deg);
}
.sz-footer-divider-line2 {
    flex-grow: 1;
    height: 1px;
    background-color: var(--primary-color);
    opacity: 0.5;
    position: relative;
}
.sz-footer-divider-line2::after {
    content: '';
    position: absolute;
    top: -4.5px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    transform: rotate(40deg);
}
.sz-footer-app-title
{
    color: var(--primary-color);
    font-family: var(--theme-font-family);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 15px;
} 
.sz-footer-app-branding {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sz-footer-app-branding-item
{
    display: flex;
    padding: 5.787px 20.254px;
    justify-content: center;
    align-items: center;
    gap: 10.369px;
    flex-shrink: 0;
    border-radius: 6.598px;
    background: #141E1E;
    backdrop-filter: blur(4.7131147384643555px);
    text-decoration: none;
}
.sz-footer-app-download-text
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 9.645px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.sz-footer-app-branding-text-bold
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 15.432px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.sz-footer-social-content
{
    margin-top: 40px;
}
.sz-footer-social-icons
{
    display: flex;
    gap: 20px;
}
.sz-footer-social-icon{
    text-decoration: none;
    display: flex;
    width: 49.43px;
    height: 49.43px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 49.43px;
    border: 0.989px solid rgba(255, 255, 255, 0.30);
}
.sz-footer-social-icon:hover {
    background-color: var(--primary-color);
    border: 0.989px solid rgba(255, 255, 255, 0.30);
}
.sz-footer-social-icon:hover svg {
   filter: invert(1);
}
.sz-quick-links
{
    list-style: none;
    padding: 0;
    margin: 0;
}
.sz-quick-links li {
    margin-bottom: 15px;
}
.sz-quick-links li a
{
    text-decoration: none;
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.sz-quick-links li a:hover {
    color: var(--primary-color);
}
.sz-footer-get-in-touch-title
{
    color: var(--primary-color);
    font-family: var(--theme-font-family);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 157%; /* 40.82px */
    margin-bottom: 10px;
}
.sz-footer-get-in-touch-list
{
    display: flex;
    gap: 2px;
    color: var(--text-color);
    font-family: var(--theme-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 157%; /* 25.12px */
}
.sz-footer-get-in-touch-small-title
{
    flex-shrink: 0;
}
.sz-footer-get-in-touch-list a
{
    text-decoration: none;
    color: var(--text-color);
    padding-left: 4px;
}
.sz-footer-get-in-touch-list a:hover
{
    color: var(--primary-color);
    text-decoration: underline;
}
.float-right
{
    float: right;
}
.sz-footor-bottom
{
    margin-top: 60px;
    margin-bottom: 15px;
}
.sz-footer-bottom-text, .sz-footer-bottom-text-para
{
    text-decoration: none;
    color: var(--text-color);
    font-family: var(--theme-font-family);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 157%; /* 20.41px */
}
.sz-footer-bottom-text:hover
{
    color: var(--primary-color);
}


/*===========================
   Privacy Policy
===========================*/
.sz-privacy-policy-content .sz-privacy-policy-title
{
    font-size: 30px;
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    margin-bottom: 20px;
}
.sz-privacy-policy-date
{
    margin-bottom: 5px;
}
.sz-privacy-policy-date strong
{
    color: var(--text-white-color);
}
.sz-privacy-policy-contact a
{
    text-decoration: none;
    color: var(--text-white-color);
}
.sz-privacy-policy-contact a:hover
{
    color: var(--primary-color);
    text-decoration: underline;
}
.sz-privacy-policy-content h2
{
    font-size: 22px;
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    margin-bottom: 15px;
}
.sz-privacy-policy-content p
{
    font-size: 16px;
}
.sz-privacy-policy-list-title
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 17px;
    font-weight: 500;
    line-height: normal;
}
.sz-privacy-policy-ul-list li
{
    margin-bottom: 5px;
}
/*===========================
Delete Your Account
==============================*/
.sz-delete-account-content .sz-delete-account-title
{
    font-size: 30px;
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    margin-bottom: 20px;
}
.sz-delete-account-date
{
    margin-bottom: 5px;
}
.sz-delete-account-date strong
{
    color: var(--text-white-color);
}
.sz-delete-account-contact a
{
    text-decoration: none;
    color: var(--text-white-color);
}
.sz-delete-account-contact a:hover
{
    color: var(--primary-color);
    text-decoration: underline;
}
.sz-delete-account-content h2
{
    font-size: 22px;
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    margin-bottom: 15px;
}
.sz-delete-account-content p
{
    font-size: 16px;
}
.sz-delete-account-list-title
{
    color: var(--text-white-color);
    font-family: var(--theme-font-family);
    font-size: 17px;
    font-weight: 500;
    line-height: normal;
}
.sz-delete-account-ul-list li
{
    margin-bottom: 5px;
}
.sz-delete-account-list-small-title
{
    color: var(--text-white-color) !important;
}
.sz-para-link
{
    text-decoration: none;
    color: var(--text-white-color) !important;
}
.sz-para-link:hover
{
    color: var(--primary-color) !important;
    text-decoration: underline;
}
.sz-para-content strong
{
    color: var(--text-white-color);
}