.screenshot-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5vw;
 }

 .screenshot {
     max-width: 30%;
     margin: 10px;
     border-radius: 40px;
     box-shadow: 0 0 50px 5px rgba(255, 255, 255, 0.1);
 }

body {
    background-color: rgba(0, 0, 0, 0.9);
    color: white !important;
}
.block-hero h1 {
    color: white;
}
.block-heading h2 {
    color: white;
}
.nav-link {
    color: white;
}
.nav-link:hover {
    color: dodgerblue;
    text-decoration: none;
}
.active {
    color: dodgerblue;
}
.cyber-title {
    color: white;
}
.section-hero {
    padding-top: 5vh;
}

.top-store-button {
    max-width: 15vw;
}

.block-hero h1 {
    max-width: 80vw;
    font-size: 4.15vw;
}

.main-sub {
    max-width: 80vw;
    font-size: 2vw;
}

.product-phone-image-holder {
    width: auto;
    max-width: 31vw;
}
.cyber-chart {
    filter: brightness(1) invert(1);
}
.td1 {
    max-width: 8vw;
    max-height: 8vw;
    right: -10vw;
    top: 25vh;
}
.td4 {
    left: -8vw;
    top: 35vh;
    max-width: 8vw;
    max-height: 8vw;
}

.td2, .td3 {
    display: none;
}


.sequence {
    background-color: rgb(100, 100, 100, 0.6);
}
.icon-sequence {
    object-fit: contain;
}
.icon-sequence-bg {
    background-color: transparent;
}
.heading-sequence {
    color: white;
    font-weight: 600;
}

.feature {
    background-color: rgba(0, 0, 0, 0.447);
    color: white;
    border-radius: 30px;
    background-image: linear-gradient(160deg, #000000d5 0%, rgba(123, 123, 123, 0.623) 100%);
}

.heading, .one-head {
    font-size: 4.15vw
}

.image-feature {
    width: 35vw;
    height: auto;
}

.class-text {
    font-size: 2vw;
    max-width: 26vw;
}

.reprivacy {
    margin-bottom: 1.2vh;
}

.contendt .main-heading {
    color: white;
    font-size: 4.15vw;
}
.victims-para {
    font-size: 2vw;

}

.main-heading2 {
    font-size: 4.1vw;
    color: white;
    max-width: 85vw;
}

.custom-footer {
    background-color: rgba(0, 0, 0, 0.85);
    padding-top: 17vh;
    padding-bottom: 8vh;
}

.logo-footer {
    filter: brightness(0) invert(1);
    max-width: 40vw;
    height: auto;
}

.footer-social {
    max-width: 40vw;
    height: auto;
}

.store-button {
    max-width: 15vw;
}

.action-stack {
    position: relative;
    margin-top: 35vh;
}

.action-call {
    position: absolute;
    top: -34vh;
    /* left: 9.5vw;
    right: 9.5vw; */
    left: 0vw;
    right: 0vw;
    max-width: 65vw;
    margin: auto;
    text-align: center;
    padding-top: 10vh;
    padding-bottom: 10vh;
    border-radius: 3vw;
    background: #3663FF;
    background: linear-gradient(90deg, #3663FF 0%, #368FCC 100%);;
}

.action-call h3 {
    color: white;
    text-align: center;
    margin: auto;
    font-size: 4vw;
    max-width: 65vw;
}

.footer-text {
    text-align: center;
    align-self: center;
    font-size: 2vw;
}

.navbar {
    background-color: transparent;
}
.navbar-bg {
    background-color: transparent;
}


.job-post-card {
    background-color: rgba(65, 65, 65,0.5);
}
.job-post-container {
    background-color: rgba(65, 65, 65,0.5);
}
.form-container {
    border: none;
    background-color: rgba(65, 65, 65,0.5);
}

.input.w-input {
    background-color: transparent;
    color: white;
}

label {
    color: gainsboro;
}
textarea.w-input {
    background-color: transparent;
    color: white;
}
.submit-button {
    background-color: dodgerblue;
}

.heading-sequence {
    font-weight: 600;
}
.sequence {
    background-color: rgba(125, 125, 125, 0.3)
}

.job-category-title {
    color: white;
}
.sidebar-title {
    color: white;
}
img.company-logo.job-card {
    max-width: 4vw;
}
img.company-logo.job-post {
    max-width: 5vw;
}
.job-card-title {
    color: white;
}
.job-post-title {
    color: white;
}
.job-post.w-button {
    background-color: #3663FF;
}
.job-post-subtitle {
    color: white;
}

.services-content {
    max-width: 80vw;
}

.nav-menu, .w-nav-menu {
    background-color: black;
}


/* DESKTOP AND BIG SCREENS */
@media only screen and (min-width: 1024px) {
    .screenshot {
        flex: 1;
        max-width: 30%;
    }
    .nav-menu, .w-nav-menu {
        background-color: transparent;
    }
    .block-hero h1 {
        max-width: 69vw;
        font-size: 2.9vw;
    }
    .heading, .one-head {
        font-size: 2.9vw;
    }
    .paragraph-large, .main-sub {
        max-width: 59vw;
        font-size: 1.4vw;
    }
    .services-content {
        max-width: 70vw;
    }
    .seq2 {
        max-width: 70vw;
    }
    .class-section {
        width: 70vw;
        align-self: center;
    }
    .class-text {
        max-width: 18vw;
    }
    .top-store-button {
        max-width: 10.7vw;
    }
    .product-phone-image-holder {
        max-width: 23vw;
    }
    .image-feature {
        width: 20vw;
    }
    .contendt .main-heading {
        font-size: 2.9vw;
    }
    .victims-para {
        font-size: 1.4vw;
    }
    .cyber-s {
        display: none;
    }
    .cyber-title {
        font-size: 2.9vw;
        color: white;
        margin-left: 10vw;
        margin-top: 10vh;
        text-align: start;
    }
    .cyber-cards {
        margin-top: -7vh;
    }
    .cyber-phone {
        width: 20vw;
    }
    .cyber-tab {
        margin-top: 30vh;
        margin-left: 2vw;
        width: 35vw;
    }
    .cyber-chart {
        margin-left: 20vw;
        margin-top: -7vh;
        width: 25vw;
    }
    .incognito {
        max-width: 11vw;
        margin-top: 8vh;
    }

    .main-heading2 {
        font-size: 2.9vw;
        max-width: 68vw;
    }
    .action-call {
        max-width: 70vw;
    }
    .action-call h3 {
        color: white;
        font-size: 2.5vw;
        max-width: 42vw;
    }
    .store-button {
        max-width: 10vw;
    }
    .footer-social {
        max-width: 23vw;
    }
   .logo-footer {
        max-width: 21vw;
        height: auto;
   }
   .footer-text {
    font-size: 1.03vw;
   }
}

/* SMALL SCREENS */
@media only screen and (max-width: 1023px) {
    .screenshot {
        flex: 1;
        max-width: 100%;
    }
    .block-hero h1 {
        max-width: 80vw;
        font-size: 6vw;
    }
    .heading, .one-head {
        font-size: 6vw;
    }
    .section-hero {
        padding-top: 1vh;
    }
    .paragraph-large, .main-sub {
        max-width: 80vw;
        font-size: 3.5vw;
    }
    .top-store-button {
        max-width: 30vw;
    }
    .product-phone-image-holder {
        max-width: 60vw;
    }
    .class-section {
        width: 80vw;
        align-self: center;
    }
    .image-feature {
        width: 64vw;
        height: auto;
    }
    .class-text {
        font-size: 3.5vw;
        max-width: 45vw;
    }
    .contendt .main-heading {
        color: white;
        font-size: 6vw;
    }
    .cyber {
        display: none;
    }
    .cyber-s {
        display: block;
    }
    .cyber-phone {
        max-width: 50vw;
    }
    .cyber-tab {
        max-width: 80vw;
    }
    .incognito {
        max-width: 25vw;
    }
    .cyber-title {
        font-size: 6vw;
        text-align: start;
    }
    .cyber-s-heading {
        display: flex;
        justify-content: space-between;
        max-width: 80vw;
        padding-top: 2vh;
        margin: auto;
    }
    .cyber-chart {
        max-width: 80vw;
    }
    .main-heading2 {
        font-size: 6vw;
        color: white;
        max-width: 80vw;
    }
    .seq2 {
        max-width: 80vw;
    }
    .action-call {
        max-width: 80vw;
        top: -50vw
    }
    .action-call h3 {
        font-size: 5vw;
        max-width: 66vw;
    }
    .text-logo {
        max-width: 32vw;
    }
    .store-button {
        max-width: 30vw;
    }
    .footer-social {
        max-width: 55vw;
        height: auto;
    }
    .logo-footer {
        max-width: 55vw;
        height: auto;
    }
    .footer-text {
        font-size: 2.7vw;
    }
    .personal {
        margin-top: 5vh;
    }
    .td1 {
        right: -40vw;
        max-width: 14vw;
        max-height: 14vw;
    }
    .td4 {
        top: 45vh;
        left: -20vw;
        max-width: 14vw;
        max-height: 14vw;
    }
}