body {
    background-color: #000;
    position: relative;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

.stripe-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   background-color: #020103;
    z-index: -2;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
}

/* Gradient overlay */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    z-index: -1;
}

/* Ambient light */
.ambient-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            to right,
            transparent 0px,
            rgba(255, 255, 255, 0.02) 40px,
            rgba(255, 255, 255, 0.02) 50px,
            transparent 90px
        );
    filter: blur(8px);
    z-index: -3;
}

/* Left splash effect */
.bg-shape-1 {
    position: absolute;
    top: 700px;
    left: 0;
    width: 758px;
    height: 405px;
    background-color: rgb(89, 87, 247);
    filter: blur(100px);
    border-right: 1px solid;
    border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
    z-index: -1;
}

/* Right splash effect */
.bg-shape-2 {
    position: absolute;
    top: 100px;
    right: 10px;
    width: 700px;
    height: 405px;
    background-color: rgba(133, 76, 255, 0.5);
    filter: blur(100px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-right: 1px solid;
    border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
    z-index: 0;
}

/* Get Started button - updated styles */
.get-started-button {
    width: 170px;
    height: 52px;
    padding: 14px 24px;
    gap: 10px;
    border-radius: 40px;
    border: 2px solid transparent;
    background: linear-gradient(black, black) padding-box, 
            linear-gradient(98.29deg, #3B82F6 0%, #1E40AF 100%) border-box;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0 auto; /* Centers the button horizontally */
}

@media (max-width: 1024px) {    .bg-shape-1, .bg-shape-2 {        width: 500px;        height: 300px;    }    .bg-shape-1 {        top: 600px;;    }    .bg-shape-2 {        top: 150px;    }}/* Adjustments for mobile screens */@media (max-width: 768px) {    .bg-shape-1, .bg-shape-2 {        width: 400px;        height: 250px;    }    .bg-shape-1 {        top: 500px;;    }    .bg-shape-2 {        top: 100px;    }}@media (max-width: 480px) {    .bg-shape-1, .bg-shape-2 {        width: 300px;        height: 200px;    }    .bg-shape-1 {        top: 400px;    }    .bg-shape-2 {        top: 50px;    }}

#dashboard-preview {
    width: 100%;
    height: auto;
    padding: 0 20px;
}

.dashboard-preview-img {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #dashboard-preview {
        padding: 0 10px;
    }
}

/* Update gradient colors */
.gradient-prevent {
    background: linear-gradient(to right, #3B82F6, #60A5FA);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-respond {
    background: linear-gradient(to left, #2563EB, #60A5FA);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dashboard-image {
    width: 748px;
    height: 443px;
    padding: 20px 0 0 0;
    gap: 20px;
    border-radius: 8px 0 0 0;
    border: 1px solid rgba(0, 0, 0, 1);
    opacity: 0;
    background: rgba(255, 255, 255, 0.2);
}

















.bg-shape-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 405px;
    background-color: rgba(80, 77, 255, 1);
    filter: blur(100px);
    border-right: 1px solid;
    border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
    z-index: 99;
}

/* Right splash effect - reduced opacity to 0.15 */
.bg-shape-4 {
    position: absolute;
    top: 232px;
    right: 0;
    width: 758px;
    height: 405px;
    background-color: rgba(173, 138, 248, 0.5);
    filter: blur(100px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-right: 1px solid;
    border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
    z-index: -1;
}

.bg-shape-9{
    position: absolute;
    top: 232px;
    right: 0;
    width: 10%;
    height: 405px;
    background-color: rgba(173, 138, 248, 0.5);
    filter: blur(100px);
    border-right: 1px solid;
    border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
    z-index: 0;
    border-radius: 0 0 200px 200px;
}


/* 
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-color: #020103;
} */

.phishing-background {
    background-color: #020103;
  }
  
.bg-shape-11 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100px;
      height: 405px;
      background-color: rgba(80, 77, 255, 1);
      filter: blur(100px);
      border-right: 1px solid;
      border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
      z-index: -1;
}
  
  /* Right splash effect - reduced opacity to 0.15 */
.bg-shape-12 {
      position: absolute;
      top: 232px;
      right: 0;
      width: 758px;
      height: 405px;
      background-color: rgba(173, 138, 248, 0.5);
      filter: blur(100px);
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      border-right: 1px solid;
      border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
      z-index: -1;
}

  .custom-shadow {
   
    border-radius: 26px; /* Your desired border-radius */
    background: linear-gradient(rgba(21, 21, 21, 0.4), rgba(21, 21, 21, 0.4)) padding-box,
                linear-gradient(120.17deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 24.2%) border-box;
    border: 2px solid transparent;
}


































































































































.bg-shape-55 {
    position: absolute;
    bottom: -13;
    left: 0;
    width: 200px;
    height: 305px;
    background-color: rgb(68, 65, 197);
    filter: blur(100px);
    border-right: 1px solid;
    border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
    z-index: -1;
}











.bg-shape-34 {
    position: absolute;
    top: 732px;
    right: 0;
    width: 30%;
    height: 300px;
    background-color: rgba(173, 138, 248, 0.5);
    filter: blur(90px);
    border-right: 1px solid;
    border-image-source: linear-gradient(180deg, #504DFF 0%, #854CFF 100%);
    z-index: 0;
    border-radius: 0 0 150px 150px; /* Adjusted for semi-circle shape */
}

.gradient-features {
    background: linear-gradient(90.85deg, #9795FF 43.52%, #FFFFFF 49.65%, #BE9FFF 59.33%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-facts {
    background: linear-gradient(90.85deg, #9795FF 10.52%, #FFFFFF 63.65%, #BE9FFF 80.33%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* .content-section {
    padding-right: 15px !important;
    padding-left: 15px !important;
} */



@media (min-width: 1001px) and (max-width: 1024px) {
    .custom-width-50 {
        width: 45%;
    }
}

@media screen and (max-width: 1000px) {
    .about-section .hide-vector {
        display: none !important;
    }
    .hide-vector {
        display: none !important;
    }
    .about-section .content-section {
        padding-left: 0 !important;
    }
    .about-section {
        padding-bottom: 30px !important;
    }
    .content-section {
        padding-right: 15px !important;
        padding-left: 15px !important;

    }
    .about-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    
}


@media screen and (max-width: 768px) {
    .padding-left-responsive {
        padding-left: 5 !important;
    }
    .about-section .content-section {
        padding-left: 0 !important;
        width: 100%;
    }
    .about-section {
        padding-bottom: 30px !important;
    }
    .content-section {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    .about-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media screen and (max-width: 763px) {
    .content-section {
        width: 100%;
        padding-left: 0; /* Adjust padding as needed */
        padding-right: 15px;

        
    }
}

@media screen and (max-width: 460px) {
    .about-section .hide-vector {
        display: none !important;
    }
    .about-section .content-section {
        padding-left: 0 !important;
    }
    .about-section {
        padding-bottom: 30px !important;
    }
    .content-section {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-right: 15px !important;
        padding-left: 15px !important;

    }
    .about-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Add glassmorphism effect for mobile menu background */
.mobile-glass-bg {
    background: rgba(32, 0, 69, 0.9);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(6.5px);
    -webkit-backdrop-filter: blur(6.5px);
    /* border: 1px solid rgba(255, 255, 255, 0.18); */
}

/* Update the mobile menu styles - remove transitions */
.menu-backdrop {
    opacity: 0;
    background: rgba(32, 0, 69, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(6.5px);
    -webkit-backdrop-filter: blur(6.5px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Style for active menu */
#mobileMenu.active {
    display: block;
}

#mobileMenu.active .menu-backdrop {
    opacity: 1;
    background: #200045;
}


.features-section-heading {
    margin-top: 40px; /* Default for smallest screens */
}

.facts-section-heading {
    margin-top: 0px;
}



@media screen and (min-width: 460px) {
    .features-section-heading {
        margin-top: 100px;

    }
    .facts-section-heading {
        margin-top: 0px;
    }
}

@media screen and (min-width: 630px) {
    .features-section-heading {
        margin-top: 200px;
    }
    .facts-section-heading {
        margin-top: 10px;
    }
}

/* Since 1024px is larger than 630px, this rule will take effect */
@media screen and (min-width: 1024px) {
    .features-section-heading {
        margin-top: 240px; /* No need to redefine if it's the same as 630px */
    }
    .facts-section-heading {
        margin-top: 50px;
    }
}



@media screen and (min-width: 1280px) {
    .features-section-heading {
        margin-top: 270px;
    }
    .facts-section-heading {
        margin-top: 100px;
    }
}


@media screen and (min-width: 1440px) {
    .features-section-heading {
        margin-top: 300px;
    }
    .facts-section-heading {
        margin-top: 120px;
    }
}


@media screen and (min-width: 1600px) {
    .features-section-heading {
        margin-top: 350px;
    }
    .facts-section-heading {
        margin-top: 140px;
    }
}

/* Base Typography System */
:root {
    /* Font size variables for different breakpoints */
    --hero-title-mobile: 2.5rem;      /* 40px */
    --hero-title-tablet: 3.5rem;      /* 56px */
    --hero-title-desktop: 4.5rem;     /* 72px */
    --hero-title-large: 5rem;         /* 80px */

    --hero-subtitle-mobile: 1.25rem;   /* 20px */
    --hero-subtitle-tablet: 1.5rem;    /* 24px */
    --hero-subtitle-desktop: 1.75rem;  /* 28px */
    --hero-subtitle-large: 2rem;       /* 32px */

    --section-title-mobile: 1.8rem;      /* 32px */
    --section-title-tablet: 2.5rem;    /* 40px */
    --section-title-desktop: 3rem;     /* 48px */
    --section-title-large: 3.5rem;     /* 56px */

    --section-subtitle-mobile: 1.125rem;  /* 18px */
    --section-subtitle-tablet: 1.25rem;   /* 20px */
    --section-subtitle-desktop: 1.5rem;   /* 24px */
    --section-subtitle-large: 1.75rem;    /* 28px */

    --feature-title-mobile: 1.25rem;    /* 20px */
    --feature-title-tablet: 1.5rem;     /* 24px */
    --feature-title-desktop: 1.5rem;   /* 28px */
    --feature-title-large: 1.5rem;        /* 32px */

    --feature-text-mobile: 1rem;        /* 16px */
    --feature-text-tablet: 1.125rem;    /* 18px */
    --feature-text-desktop: 1.125rem;    /* 20px */
    --feature-text-large: 1.125rem;     /* 22px */

    --stats-number-mobile: 2.5rem;      /* 40px */
    --stats-number-tablet: 3.5rem;      /* 56px */
    --stats-number-desktop: 4rem;       /* 64px */
    --stats-number-large: 4.5rem;       /* 72px */

    --stats-text-mobile: 1rem;          /* 16px */
    --stats-text-tablet: 1.125rem;      /* 18px */
    --stats-text-desktop: 1.25rem;      /* 20px */
    --stats-text-large: 1.375rem;       /* 22px */
}

/* Base styles (mobile first) */
.hero-title {
    font-size: var(--hero-title-mobile);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: var(--hero-subtitle-mobile);
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 2rem;
}

.section-title {
    font-size: var(--section-title-mobile);
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.section-subtitle {
    font-size: var(--section-subtitle-mobile);
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 2rem;
}

.feature-title {
    font-size: var(--feature-title-mobile);
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 1rem;
}

.feature-text {
    font-size: var(--feature-text-mobile);
    line-height: 1.6;
    font-weight: 400;
}

.stats-number {
    font-size: var(--stats-number-mobile);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.stats-text {
    font-size: var(--stats-text-mobile);
    line-height: 1.5;
    font-weight: 400;
}

/* Tablet (md) breakpoint */
@media screen and (min-width: 768px) {
    .hero-title {
        font-size: var(--hero-title-tablet);
    }

    .hero-subtitle {
        font-size: var(--hero-subtitle-tablet);
    }

    .section-title {
        font-size: var(--section-title-tablet);
    }

    .section-subtitle {
        font-size: var(--section-subtitle-tablet);
    }

    .feature-title {
        font-size: var(--feature-title-tablet);
    }

    .feature-text {
        font-size: var(--feature-text-tablet);
    }

    .stats-number {
        font-size: var(--stats-number-tablet);
    }

    .stats-text {
        font-size: var(--stats-text-tablet);
    }
}

/* Desktop (lg) breakpoint */
@media screen and (min-width: 1024px) {
    .hero-title {
        font-size: var(--hero-title-desktop);
    }

    .hero-subtitle {
        font-size: var(--hero-subtitle-desktop);
    }

    .section-title {
        font-size: var(--section-title-desktop);
    }

    .section-subtitle {
        font-size: var(--section-subtitle-desktop);
    }

    .feature-title {
        font-size: var(--feature-title-desktop);
    }

    .feature-text {
        font-size: var(--feature-text-desktop);
    }

    .stats-number {
        font-size: var(--stats-number-desktop);
    }

    .stats-text {
        font-size: var(--stats-text-desktop);
    }
}

/* Large Desktop (xl) breakpoint */
@media screen and (min-width: 1280px) {
    .hero-title {
        font-size: var(--hero-title-large);
    }

    .hero-subtitle {
        font-size: var(--hero-subtitle-large);
    }

    .section-title {
        font-size: var(--section-title-large);
    }

    .section-subtitle {
        font-size: var(--section-subtitle-large);
    }

    .feature-title {
        font-size: var(--feature-title-large);
    }

    .feature-text {
        font-size: var(--feature-text-large);
    }

    .stats-number {
        font-size: var(--stats-number-large);
    }

    .stats-text {
        font-size: var(--stats-text-large);
    }
}

/* Additional typography utilities */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.font-heading {
    font-family: 'Roboto', sans-serif;
}

.font-body {
    font-family: 'Inter', sans-serif;
}

/* Social Media Icons responsive sizes */
.social-icon {
    width: 1.25rem;  /* 20px for mobile */
    height: 1.25rem;
}

/* Tablet and up */
@media screen and (min-width: 768px) {
    .social-icon {
        width: 1.5rem;  /* 24px */
        height: 1.5rem;
    }
}

/* Desktop and up */
@media screen and (min-width: 1024px) {
    .social-icon {
        width: 1.75rem;  /* 28px */
        height: 1.75rem;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .content-section {
        gap: 4rem;
    }
    
    .custom-width-50 {
        width: 45%;
    }
}

/* Modal styles */
#modalOverlay {
    backdrop-filter: blur(5px);
}

#modalContent {
    margin: 1rem;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal responsive adjustments */
@media screen and (max-width: 768px) {
    #modalContent {
        width: 95%;
        margin: 1rem auto;
    }

    .left-side-text h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    #contactForm button {
        margin-left: 0;
        width: 100%;
    }
}

/* Ensure modal is above mobile menu */
#modalOverlay {
    z-index: 100;
}

/* Fix button alignment on mobile */
@media screen and (max-width: 640px) {
    #contactForm button {
        margin-left: auto;
        margin-right: auto;
    }
}