/* Fonts: Barlow & Lexend Deca */ 
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lexend+Deca:wght@100..900');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Variables */
:root {
    --navy: #21345C;
    --blue: #2E48A0;
    --gray: #E6E9EF;
    --orange: #E03400;
    --black: #212026;
    --border-gray: #C4C4C4;
}

/* CSS RESET */
body, html {
    padding: 0px;
    margin: 0px;
    font-family: 'Poppins', sans-serif; 
    font-weight: 300; 
    letter-spacing: 0.04em;
    max-width: 100vw; 
    overflow-x: hidden; 
} 
body {
    line-height: 1.3;
    position: relative; 
}
* {
    margin: 0;
}
 *, *::before, *::after {
    box-sizing: border-box;
} 
input, button, textarea, select {
    font: inherit;
}
p {
    padding: 0px; 
    margin: 0px;
}
img {
    max-width: 100%; 
    width: 100%; 
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word; 
} 
a {
    text-decoration: none;
    color: inherit; 
    padding: 0; 
    margin: 0; 
}

li, ul {
    margin: 0; 
    padding: 0; 
}

/* Typography */ 
h1 {
    font-weight: 700; 
    font-size: 3.3vw; 
    width: 50vw; 
    text-transform: Capitalize;
}

.h1 {
    font-weight: 500; 
    font-size: 3.5vw;
    text-transform: Capitalize;
}

.breadcrumbs {
    display: inline-block; 
    font-weight: 200; 
    font-size: 2vw;
    margin-left: 20px; 
}

h2 {
    font-weight: 600; 
    font-size: 3vw;
    text-transform: uppercase;
    display: inline-block; 
}

.h2 {
    font-weight: 500; 
    font-size: 3vw;
    text-transform: capitalize;
} 

/* Card Numbers */
.numbers {
    font-family: "Barlow", sans-serif; 
    font-size: 5vw;
    font-weight: 600; 
    color: var(--orange); 
    margin-bottom: -5px; 
}

h3 {
    font-family: "Barlow", sans-serif; 
    font-size: 1.1vw;
    font-weight: 700;  
    text-transform: uppercase;
}

/* Buttons */ 
.small_button {
    background: var(--orange); 
    color: white; 
    border-radius: 5px;
    width: fit-content; 
    height: fit-content;
    padding: 10px 35px 10px 35px;
    display: inline-block; 
}

.small_button p { 
    font-size: 20px;
    font-family: "Barlow", sans-serif;
    font-weight:  400;
    position: relative; 
    z-index: 10; 
}

.small_button:hover {
   opacity: 0.7; 
   cursor: pointer; 
}

.large_button {
    background: var(--orange); 
    color: white;
    width: fit-content; 
    border-radius: 50px; 
    font-size: 18px;
    font-family: "Barlow", sans-serif;
    font-weight:  400;
    letter-spacing: 0.04em;
    padding: 8px 60px 10px 60px;
    position: relative; 
    z-index: 10; 
}

.large_button:hover {
    opacity: 0.7; 
    cursor: pointer; 
}

/* Background Colors */
.black_background {
    background: var(--black); 
    color: white; 
}

.white_background {
    background: white; 
    color: var(--navy); 
}

.navy_background {
    background: var(--navy); 
    color: white; 
}

.gray_background {
    background: var(--gray); 
    color: var(--navy);  
}

.orange_background {
    background: var(--orange); 
    color: white; 
}

/* Sections */
section {
    padding: 50px 17vw 50px 17vw;
    max-width: 100vw; 
    box-sizing: border-box; 
}

/* Border */
.border {
    border: 2px solid var(--border-gray); 
}

/* MENU */ 
.menu {
    position: absolute;
    top: 0; 
    padding-left: 19vw; 
    padding-right: 20vw; 
    color: white; 
    width: 100vw; 
    max-width: 100vw; 
    display: grid; 
    grid-template-columns: 1fr min-content min-content max-content 8vw; 
    gap: 4vw; 
    align-items: center; 
    box-sizing: border-box; 
    padding-top: 15px; 
}

.menu a {
    font-size: 1.2vw; 
    font-weight: 300; 
    font-family: 'Barlow', sans-serif; 
}

.menu a:hover {
    font-weight: 600; 
    cursor: pointer; 
}

.menu .small_button {
    font-size: 0.9vw; 
    font-weight: 600; 
    text-decoration: none; 
    padding: 7px 25px 7px 25px;
}

.menu .small_button:hover {
    text-decoration: none; 
}

.menu .active {
    font-weight: 500; 
    opacity: 1; 
    color: white; 
}

.menu .active:hover {
    text-decoration: none; 
    font-weight: 500; 
}

.logo {
    max-width: 14vw; 
    padding-top: 7px; 
    opacity: 0.9; 
}

.services_pos {
    position: relative;
    width: min-content; 
}

.services_dropdown {
    display: none; 
    list-style-type: none; 
    position: absolute; 
    width: fit-content; 
    padding-bottom: 10px; 
    padding-top: 10px;
    z-index: 50; 
}

.services_dropdown a {
    text-decoration: none; 
    font-size: 1.1vw; 
    width: 170%; 
    display: block; 
    line-height: 1.9; 
    background-color: var(--navy); 
    padding-left: 15px; 
    padding-right: 10px; 
    margin-left: -15px; 
    color: rgba(255, 255, 255, 0.749); 
}

.services_dropdown a:hover {
    font-weight: 400; 
    color: white; 
}

.p_b {
    padding-bottom: 5px; 
}

.menu_contact {
    position: absolute; 
    right: 19vw; 
    top: 19px; 
} 

.services_pos:hover .services_dropdown {
    display: block;
}

/* Footer */ 
footer {
    padding: 20px 12vw 0px 12vw;
    max-width: 100vw; 
    box-sizing: border-box; 
    min-height: 170px; 
}

footer .logo {
    max-width: 20vw; 
    display: inline-block; 
}

.NPT_info {
    text-align: right; 
    width: 50vw; 
    float: right; 
}

.NPT_info p {
    margin-bottom: 10px; 
    opacity: 0.8; 
    font-size: 1.3vw; 
}

.NPT_info .NPT_phone {
    display: inline; 
    opacity: 1; 
}

.small_icons {
    max-width: 15px; 
    display: inline-block; 
}

.foot {
    width: 100%;
    padding-left: 18%; 
    padding-right: 18%;  
    margin: auto; 
    display: grid;
    grid-template-rows: 1fr;  
    align-items: center; 
    justify-items: start; 
    padding-top: 15px; 
    padding-bottom: 20px; 
    border-top: 0.5px solid rgba(255, 255, 255, 0.325); 
}

.foot p {
    width: fit-content; 
    display: inline-block; 
    text-align: center; 
    justify-self: center; 
    align-self: center; 
    grid-row: 1/2; 
    padding-right: 25px; 
    font-size: 1.2vw; 
}

.foot img {
    max-width: 40px; 
    display: inline-block; 
    margin-right: 20px;
    margin-left: 20px;
    grid-row: 1/2; 
}

.foot a {
    display: inline-block; 
    height: fit-content; 
    width: fit-content; 
    grid-row: 1/2; 
    color: rgb(124, 185, 255); 
    font-weight: 500; 
}

.foot a:hover {
    opacity: 0.6; 
    cursor: pointer; 
}

/* Home Page */ 
.hero_section {
    background-image: url('images/HERO.webp'); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    background-color: #21345C;
    min-height: 30vmin; 
    height: auto; 
    padding-top: 150px; 
}

.NPT_summary {
    font-size: 1.3vw; 
    font-weight: 300; 
    color: var(--gray); 
    opacity: 0.8; 
    width: 40vw; 
    padding-bottom: 40px; 
    margin-top: 15px; 
}

/* Section 2 */ 
.section_2 {
    display: grid; 
    box-sizing: border-box; 
    grid-template-columns: 1fr 1fr 1fr;  
    grid-template-rows: 40% 60%; 
    grid-gap: 2vw; 
    margin-top: -10vw; 
}

/* Blue Stats Box */ 
.stats {
    grid-column: 3/4; 
    grid-row: 1/3; 
    padding: 40px; 
    display: grid; 
    grid-template-columns: min-content 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr; 
    column-gap: 20px; 
    align-items: center; 
    /* width: fit-content; */
    max-width: 25vw; 
}

.stats p {
    font-weight: 200; 
    color: var(--gray); 
    font-size: 1.2vw; 
    text-align: left; 
}

.stats .numbers {
    color: white !important;
    padding-bottom: 20px;
    font-size: 3.5vw; 
    font-weight: 500; 
    text-align: left; 
    margin-left: 0;  
}

/* Section 2 Cards */
.featured_a {
    margin-top: 8vw; 
}

.featured_section {
    grid-row: 2/3; 
}

.featured_section h3 {
    font-size: 1.1vw;
    font-weight: 700;  
    margin-bottom: 20px; 
}

.light_text {
    font-weight: 400; 
}

.words {
    position: relative; 
    display: flex;
    flex-wrap: wrap; 
    align-items: stretch;
    text-align: center; 
    flex-grow: 1; 
    justify-content: space-between; 
    margin-bottom: -2vw;   
}

.border_word {
    border: 0.1vw solid rgb(182, 191, 202); 
    color: #67757E; 
    padding: 0.3vw; 
    padding-left: 0.3vw; 
    padding-right: 0.3vw; 
    text-transform: uppercase; 
    font-size: 0.7vw; 
    font-weight: 500; 
    opacity: 1; 
    display: inline-block; 
    margin-top: 0px; 
    width: max-content; 
    justify-content: space-between; 
    margin-bottom: 8px; 
}

/* Services Section */ 
.services_section {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    grid-gap: 15px; 
    margin-top: 20px; 
}

.services_card {
    background-color: white; 
    padding: 1vw; 
    box-sizing: border-box;
}

.services_card ul {
    margin-top: 20px;
    margin-bottom: 20px; 
    padding-left: 0vw !important; 
    margin-left: 0.4vw !important; 
    font-size: 0.7vw; 
    line-height: 1.5; 
    font-weight: 400; 
}

.underline {
    text-decoration: underline; 
}

.underline:hover {
    color: black;
}

/* Client Section */ 
.clients {
    display: grid; 
    grid-template-columns: 15% 8% 15% 15% 8% 10%; 
    align-items: center; 
    grid-gap: 6%;  
    padding-top: 15px; 
    padding-bottom: 15px; 
}

/* Project Portfolio Section */
.four_projects {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    gap: 8px; 
    margin-top: 20px; 
}

.project_box {
    border-radius: 7px; 
}

.four_projects  h3 {
    font-size: 0.9vw; 
    padding: 5px; 
    padding-top: 4px; 
    padding-bottom: 9px; 
    text-align: center; 
}

.four_projects  a {
    float: right;
    text-align: right; 
    grid-column: 4/5; 
    justify-self: right; 
}

/* On Site Product Development */
.two_columns {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-gap: 20px; 
}

.left_column p {
    opacity: 0.9; 
    margin-top: 30px; 
    font-size: 1.3vw; 
    padding-right: 20px; 
}

.left_column a {
    margin-top: 20px; 
}

.right_column {
    display: grid; 
    grid-template-rows: 1fr 1fr 1fr; 
    row-gap: 15px; 
} 

.featured_tool {
    height: fit-content; 
    display: grid; 
    grid-template-columns: 1fr min-content; 
    grid-template-rows: min-content 1fr; 
    border: 1px solid rgba(255, 255, 255, 0.382); 
}

.featured_tool h3 {
    grid-row: 1/2;
    padding-left: 20px;  
    padding-right: 10px; 
    padding-top: 1vw; 
    font-size: 1.4vw; 
}

.featured_tool p {
    grid-column: 1/2; 
    grid-row: 2/3; 
    padding-top: 10px; 
    padding-left: 20px; 
    padding-right: 10px; 
    justify-self: start; 
    align-self: start; 
    font-size: 1vw; 
}

.featured_tool img {
    grid-column: 2/3; 
    min-width: 11vw; 
    height: 100%; 
    grid-row: 1/3; 
}

.CTA_section {
    text-align: center; 
    padding-bottom: 7vw; 
}

.CTA_section .h2 {
    margin-bottom: 25px; 
    margin-top: 30px; 
}

/* Subpage Title Section */
.subpage_title {
    background-image: url('images/HERO.webp'); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    min-height: 15vmin; 
    padding-top: 140px; 
    text-align: center; 
    padding: 140px 17vw 40px 17vw;
}

.subpage_title h1 {
    width: 100%; 
}


/* Services Subpage */
.gray .services_card {
    background-color: var(--gray); 
}

.padding_bottom {
    padding-bottom: 0px; 
}

.four_projects .small_button { 
    font-size: 1.2vw; 
}

.page_hover:hover {
    opacity: 0.7; 
}

.services_template {
    display: grid; 
    grid-template-columns: 65% 30%; 
    grid-template-rows: min-content 1fr; 
    column-gap: 10%; 
    box-sizing: border-box; 
}

.services_template h3 {
    grid-column: 1/2; 
    grid-row: 1/2; 
}

.services_template p {
    grid-column: 1/2; 
    font-size: 1.1vw; 
    padding-top: 25px; 
    font-weight: 300; 
    opacity: 0.8; 
}

.services_template ul {
    grid-column: 2/3; 
    grid-row: 2/3; 
    line-height: 2; 
    font-size: 1.2vw; 
    padding-top: 3vw; 
}

.services_template li {
    line-height: 2; 
}

/* Work Subpage */
.left_text {
    text-align: left; 
}

.three_projects {
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 25px; 
}

.work_page .portfolio {
    padding-bottom: 0px; 
    margin-bottom: 5px; 
}

.work_page .four_projects h3 {
    margin-top: 5px; 
}

.work_page h2 {
    font-size: 2.4vw; 
}

.blue_overlay {
    display: block; 
    cursor: pointer; 
    position: relative; 
}

.blue_overlay img {
    display: block !important; 
    opacity: 0.9; 
    position: relative; 
    z-index: 1; 
}

.woojer img { 
    position: absolute; 
    max-width: 85%; 
    margin-left: 10%; 
    top: -2vw; 
}

.woojer_box {
    height: 19vw; 
}

.blue_overlay:hover {
    opacity: 1; 
}

.hover_words { 
    color: white; 
    position: absolute; 
    top: 10%; 
    left: 10%; 
    opacity: 0; 
    z-index: 10; 
}

.hover_words .border_word {
    border: 1.5px solid white; 
    color: white; 
    position: relative; 
    z-index: 11; 
    opacity: 1; 
}

.block {
    display: block; 
}

/* Product Page */ 
.product_page { 
    display: grid; 
    grid-template-columns: 20% 80%;
    gap: 20px;
}

.product_page p {
    grid-column: 2/3; 
}

.product_page img {
    grid-column: 1/2; 
    grid-row: 1/3; 
}

.product_page a {
    grid-column: 2/3; 
    justify-self: right; 
}

.policies {
    text-align: center; 
    font-size: 20px; 
}

.policies p {
    padding-bottom: 10px; 
}

.policies a {
    font-weight: 500; 
}

.policies a:hover {
    opacity: 0.5; 
    cursor: pointer; 
}

/* Warranty Terms & Privacy */ 
.small_page {
    min-height: 87vh; 
    padding: 0px; 
}

/* Contact Page */
.subpage_title p {
    max-width: 35vw; 
    text-align: left; 
    font-weight: 200;
    font-size: 16px; 
    margin-top: 15px; 
}

.subpage_title .large_button {
   margin-bottom: 20px; 
   margin-top: 20px; 
   text-align: left; 
   display: block; 
   max-width: 30vw; 
}

.contact_info {
    width: 55%; 
}

.contact_info img {
    max-width: 35px; 
    display: inline-block; 
    width: 20px; 
    margin-bottom: -8px; 
    margin-top: 10px;
}

.contact_info p {
    font-size: 14px; 
    display: inline-block; 
} 

.contact_bold {
    font-weight: 700; 
}

.contact_section {
    position: relative; 
    /* min-height: 550px; */ 
}

.form_section {
    width: 33vw; 
    position: absolute; 
    top: -10vw; 
    right: 12vw; 
    padding: 20px; 
}

form p {
    margin-top: 20px; 
    padding-bottom: 5px; 
    font-weight: 600; 
    color: black;
    font-size: 13px; 
}

.message_sent {
    top: 20px; 
    right: 12vw; 
    text-align: center; 
    padding-bottom: 40px; 
}

.message_sent p {
    font-size: 22px; 
}

.message_sent img {
    width: 20%; 
    margin: auto;
    margin-top: 20px; 
}

input {
    display: block; 
    background-color: var(--gray); 
    border: 2px solid rgba(128, 128, 128, 0.25); 
    border-radius: 3px; 
    width: 100%; 
    padding: 5px; 
}

textarea {
    display: block; 
    background-color: var(--gray); 
    width: 100%; 
    border: 2px solid rgba(128, 128, 128, 0.25); 
    border-radius: 3px;
    margin-bottom: 15px; 
    padding: 5px; 
    padding-top: 10px; 
    min-height: 90px;
}

.form_button {
    background: var(--black); 
    color: rgba(255, 255, 255, 0.894); 
    width: 100%; 
    padding: 10px; 
    font-size: 15px; 
    border: none; 
    margin-top: 35px;     
}

.form_button:hover {
    cursor: pointer; 
    opacity: 0.6; 
}

.disclaimer {
    font-size: 11px; 
    padding: 10px; 
    padding-top: 25px; 
    padding-bottom: 10px; 
    opacity: 0.4;
}

.block {
    display: block; 
    text-align: center; 
    margin: auto; 
    margin-top: 38px; 
    margin-bottom: 50px; 
}

.product_link {
    text-align: center; 
    background-image: url('images/Footer\ Cover.png'); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}

.product_link h2 {
    font-weight: 400; 
    font-size: 45px; 
    margin-bottom: 10px; 
}

.product_link p {
    font-size: 18px; 
    max-width: 40vw; 
    margin: auto; 
    opacity: 0.8; 
}

.product_link .policies p {
    max-width: 80vw;
    font-size: 16px; 
    margin-top: 10px; 
    font-weight: 200;  
    opacity: 0.7; 
}

.tool_section {
    display: grid; 
    grid-template-columns: 35% 60%; 
    grid-template-rows: 1fr; 
    column-gap: 50px; 
}

.tool_section img {
    grid-column: 1/2; 
    grid-template-rows: 1/3; 
}

.tool_section h2 {
    grid-column: 1/3; 
    margin-bottom: 25px;  
}

.tool_section .tool_info {
    grid-column: 2/3; 
    font-size: 12px; 
}

.list_title {
    font-weight: 700; 
    margin-top: 30px; 
}

.tool_section ul {
    padding-left: 20px; 
    font-weight: 500; 
    padding-top: 10px; 
}

.three_column {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    margin-top: 30px; 
    gap: 20px; 
}

.center {
    text-align: center; 
}

.center .h2 {
    max-width: 40vw; 
    margin-bottom: 20px; 
}

.tool_category h3 {
    padding-left: 15px; 
    padding-top: 6px; 
    font-size: 17px; 
}

.three_column p {
    font-size: 13px; 
}

.tool_category p {
    padding-left: 15px; 
    padding-bottom: 15px; 
    font-size: 12px; 
}

.tool_cat {
    padding-bottom: 100px; 
}

.right {
    text-align: right; 
    margin-top: 20px; 
    display: block; 
    width: fit-content; 
    float: right; 
}

.mobile_menu {
    display: none; 
}

.design_img {
    max-width: 30vw; 
    width: 30vw; 
    margin-right: 0vw; 
    margin-top: -50px; 
    margin-bottom: -5vw; 
    margin-left: -3vw; 
}

.relative {
    position: relative; 
    display: grid;
    grid-template-columns: 50% 30%;
    grid-template-rows: min-content 1fr;
    column-gap: 10%;
    box-sizing: border-box;
}

.app_design {
    position: absolute; 
    top: -15vw; 
    max-width: 100vw; 
    width: 48vw;
    right: -12vw;  
    margin: 0; 
}

.extra_padding {
    padding-bottom: 8vw; 
}

.portfolio .small_button {
    margin-top: 20px; 
    float: right; 
}

.portfolio {
    margin-bottom: 50px; 
}

.contact_info .contact_bold {
    display: none; 
}

@media screen and (min-width: 2500px) {
    section {
        padding-left: calc(50vw - 750px); 
        padding-right: calc(50vw - 750px); 
    }
    .menu {
        padding-left: calc(50vw - 750px); 
        padding-right: calc(50vw - 750px); 
        grid-template-columns: 1fr min-content min-content min-content 340px; 
    }
    .design_img {
        max-width: 100%; 
        width: 100%; 
        margin: 0; 
    }
    .large_button {
        font-size: 18px; 
        padding-left: 55px; 
        padding-right: 55px; 
    }
    .hero_section {
        padding-bottom: 50px; 
    }
    .logo {
        max-width: 250px; 
    }
    /* Undoing VW for large screens */ 
    h1 {
        font-size: 70px; 
        width: 80%; 
    }
    .h1 {
        font-size: 60px;

    }
    .breadcrumbs { 
        font-size: 30px;
    }
    h2 {
        font-size: 40px;
    }
    .h2 {
        font-size: 40px;
    } 
    .numbers {
        font-size: 70px;
    }
    h3 {
        font-size: 28px;
    }
    .stats p {
        font-size: 18px; 
    }
    .stats .numbers {
        font-size: 55px; 
    }
    .section_2 {
        margin-top: -100px;  
    }
    .featured_a {
        margin-top: 100px;  
    }
    .NPT_summary {
        font-size: 24px; 
        width: 50%;
    }
    .services_card ul {
        font-size: 12px; 
        padding-left: 8px !important; 
        line-height: 1.7; 
    }
    .services_card {
        padding: 10px; 
        padding-left: 17px;
    }
    .featured_section h3 {
        font-size: 27px; 
    }
    .menu a {
        font-size: 27px; 
    }
    .menu .small_button {
        font-size: 18px; 
        padding: 12px 25px 14px 25px; 
        font-weight: 400; 
        top: 18px; 
    }
    .four_projects h3 {
        font-size: 19px; 
        padding-left: 5px; 
        padding-right: 5px; 
    }
    .featured_tool img {
        min-width: 0px;
        width: 100%;
        height: auto;
    }
    .featured_tool h3 {
        padding-top: 35px;
        font-size: 24px;  
    }
    .featured_tool p {
        font-size: 16px; 
    }
    .left_column p {
        font-size: 23px; 
        font-weight: 300; 
    }
    .NPT_info p {
        font-size: 18px; 
    }
    .two_columns {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-gap: 20px;
    }
    .featured_tool {
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: min-content 1fr;
    }
    .foot {
        padding-left: calc(50vw - 400px); 
        padding-right: calc(50vw - 400px);
    }
    footer {
        padding-left: calc(50vw - 750px); 
        padding-right: calc(50vw - 750px);
    }
    .NPT_info {
        width: 500px;
    }
    footer .logo {
        max-width: 300px;
    }
    .subpage_title {
        padding-left: calc(50vw - 750px); 
        padding-right: calc(50vw - 750px);
    }
    .services_template {
        display: grid;
        grid-template-columns: 73% 25%;
        grid-template-rows: min-content 1fr;
        column-gap: 10%;
        box-sizing: border-box;
    }
    .services_template p {
        font-size: 19px; 
    }
    .services_template ul {
        font-size: 16px; 
        padding-top: 50px; 
    }
    .four_projects .small_button { 
        font-size: 16px; 
        margin-top: 8px; 
    }
    .work_page h2 {
        font-size: 30px; 
    }
    .hover_words .border_word {
        font-size: 18px; 
    }
    .menu_contact {
        right: calc(50vw - 470px); 
        top: 24px; 
    }
    .words {
        margin-top: 20px;
        margin-bottom: -40px;  
    }
    .border_word {
        font-size: 17px; 
        padding: 5px; 
        padding-left: 10px; 
        padding-right: 10px; 
    }
    .subpage_title p {
        max-width: 50%; 
        font-size: 20px; 
    }
    .form_section {
        width: 500px; 
        position: absolute; 
        top: -70px; 
        right: calc(50vw - 500px); 
        padding: 25px; 
    }
    form p {
        margin-top: 10px;
        padding-bottom: 2px;
    }
    .form_button {
        padding: 10px;
        font-size: 16px;
        margin-top: 25px;
    }
    .disclaimer {
        font-size: 12px;
    }
    .contact_info {
        width: 55%;  
    }
    .app_design {
        position: absolute; 
        top: -230px; 
        max-width: 650px; 
        width: 1100px;
        right: -200px;  
    }
    .relative {
        position: relative; 
        display: grid;
        grid-template-columns: 60% 30%;
        grid-template-rows: min-content 1fr;
        column-gap: 10%;
        box-sizing: border-box;
    }
    .extra_padding {
        padding-bottom: 150px; 
    }
    .contact_info p {
        font-size: 20px; 
        display: inline-block; 
    }
    .work_page .portfolio {
        padding-bottom: 10px;
        padding-top: 50px; 
        margin-bottom: 20px; 
    }
    .services_dropdown a {
        font-size: 15px;
    }
    .contact_info .contact_bold {
        display: inline-block; 
    }
    .foot p {
        font-size: 18px; 
    }
}

@media screen and (min-width: 1400px) and (max-width: 2499px) {
    section {
        padding-left: calc(50vw - 500px); 
        padding-right: calc(50vw - 500px); 
    }
    .menu {
        padding-left: calc(50vw - 500px); 
        padding-right: calc(50vw - 500px); 
        grid-template-columns: 1fr min-content min-content min-content 150px; 
    }
    .design_img {
        max-width: 100%; 
        width: 100%; 
        margin-right: 0; 
    }
    .large_button {
        font-size: 18px; 
        padding-left: 55px; 
        padding-right: 55px; 
    }
    .hero_section {
        padding-bottom: 50px; 
    }
    .logo {
        max-width: 250px; 
    }
    /* Undoing VW for large screens */ 
    h1 {
        font-size: 50px; 
        width: 80%; 
    }
    .h1 {
        font-size: 40px;

    }
    .breadcrumbs { 
        font-size: 30px;
    }
    h2 {
        font-size: 40px;
    }
    .h2 {
        font-size: 40px;
    } 
    .numbers {
        font-size: 70px;
    }
    h3 {
        font-size: 18px;
    }
    .stats p {
        font-size: 14px; 
    }
    .stats .numbers {
        font-size: 55px; 
    }
    .section_2 {
        margin-top: -100px;  
    }
    .featured_a {
        margin-top: 100px;  
    }
    .NPT_summary {
        font-size: 18px; 
        width: 50%;
    }
    .services_card ul {
        font-size: 12px; 
        padding-left: 8px !important; 
        line-height: 1.7; 
    }
    .services_card {
        padding: 10px; 
        padding-left: 17px;
    }
    .featured_section h3 {
        font-size: 20px; 
    }
    .menu a {
        font-size: 18px; 
    }
    .menu .small_button {
        font-size: 14px; 
        padding: 8px 20px 10px 20px; 
    }
    .four_projects h3 {
        font-size: 14px; 
        padding-left: 5px; 
        padding-right: 5px; 
    }
    .featured_tool img {
        min-width: 0px;
        width: 100%;
        height: auto;
    }
    .featured_tool h3 {
        padding-top: 1.5vw;
        font-size: 17px;  
    }
    .featured_tool p {
        font-size: 12px; 
    }
    .left_column p {
        font-size: 16px; 
    }
    .NPT_info p {
        font-size: 18px; 
    }
    .two_columns {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-gap: 20px;
    }
    .featured_tool {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: min-content 1fr;
    }
    .foot {
        padding-left: calc(50vw - 400px); 
        padding-right: calc(50vw - 400px);
    }
    footer {
        padding-left: calc(50vw - 500px); 
        padding-right: calc(50vw - 500px);
    }
    .NPT_info {
        width: 500px;
    }
    footer .logo {
        max-width: 300px;
    }
    .subpage_title {
        padding-left: calc(50vw - 500px); 
        padding-right: calc(50vw - 500px);
    }
    .services_template {
        display: grid;
        grid-template-columns: 73% 25%;
        grid-template-rows: min-content 1fr;
        column-gap: 10%;
        box-sizing: border-box;
    }
    .services_template p {
        font-size: 15px; 
    }
    .services_template ul {
        font-size: 16px; 
        padding-top: 50px; 
    }
    .four_projects .small_button { 
        font-size: 16px; 
        margin-top: 8px; 
    }
    .work_page h2 {
        font-size: 30px; 
    }
    .hover_words .border_word {
        font-size: 11px; 
    }
    .menu_contact {
        right: calc(50vw - 470px); 
        top: 24px; 
    }
    .words {
        margin-top: 20px;
        margin-bottom: -40px;  
    }
    .border_word {
        font-size: 11px; 
        padding: 5px; 
        padding-left: 5px; 
        padding-right: 5px; 
    }
    .subpage_title p {
        max-width: 50%; 
        font-size: 16px; 
    }
    .form_section {
        width: 400px; 
        position: absolute; 
        top: -100px; 
        right: calc(50vw - 500px); 
        padding: 15px; 
    }
    form p {
        margin-top: 10px;
        padding-bottom: 2px;
    }
    .form_button {
        padding: 10px;
        font-size: 16px;
        margin-top: 25px;
    }
    .disclaimer {
        font-size: 12px;
    }
    .contact_info {
        width: 55%; 
    }
    .app_design {
        position: absolute; 
        top: -230px; 
        max-width: 650px; 
        width: 1100px;
        right: -200px;  
    }
    .relative {
        position: relative; 
        display: grid;
        grid-template-columns: 60% 30%;
        grid-template-rows: min-content 1fr;
        column-gap: 10%;
        box-sizing: border-box;
    }
    .extra_padding {
        padding-bottom: 150px; 
    }
    .contact_info p {
        font-size: 17px; 
        display: inline-block; 
    }
    .work_page .portfolio {
        padding-bottom: 10px;
        padding-top: 50px; 
        margin-bottom: 20px; 
    }
    .services_dropdown a {
        font-size: 15px;
    }
    .contact_info .contact_bold {
        display: inline-block; 
    }
    .foot p {
        font-size: 17px; 
    }
}


/* 501-850 */
@media screen and (min-width: 650px) and (max-width:900px) {
    .menu {
        grid-template-columns: 18vw min-content min-content max-content 8vw;
        padding-top: 15px;
    }
    .menu a {
        font-size: 1.8vw;
        padding-top: 5px; 
    }
    .menu .small_button {
        font-size: 1.6vw;
        padding: 7px 15px 7px 15px;
    }
    h1 {
        font-size: 5.5vw; 
        width: 100%; 
    }
    .NPT_summary {
        font-size: 2vw;
        width: 60vw;
    }
    .section_2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 30px;
        margin-top: 0vw;
    }
    .featured_a {
        margin-top: 10vw;
        grid-row: 1/2; 
        margin-top: 10px; 
    }
    .stats {
        display: none; 
    }
    .featured_section h3 {
        font-size: 2.3vw;
        font-weight: 700;
        margin-bottom: 20px;
    }
    h3 {
        font-size: 2.9vw;
    }
    .border_word {
        font-size: 1.3vw; 
    }
    .services_section {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr; 
    }
    .services_card ul {
        font-size: 1.5vw;
        padding-left: 15px !important;
    }
    .services_card {
        padding-left: 15px; 
    }
    .four_projects {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr; 
        grid-auto-flow: column;
        position: relative; 
    }
    .project_box {
        width: 100%; 
        grid-column: auto; 
    }
    .four_projects h3 {
        font-size: 2vw;
    }
    .featured_tool {
        grid-template-columns: 75% 25%; 
    }
    .four_projects .small_button {
        font-size: 12px;
        position: absolute; 
        bottom: 10px; 
        right: 17vw; 
    }
    .three_column p {
        font-size: 11px;
    }
    .CTA_section .h2 {
        margin-top: 0px;
    }
    .left_column p {
        font-size: 16px;
    }
    .featured_tool h3 {
        font-size: 17px; 
        padding-top: 20px; 
    }
    .featured_tool p {
        font-size: 14px; 
    }
    .form_section {
        width: 100%; 
        position: relative;
        top: 0; 
        right: 0; 
        margin-bottom: 30px; 
    }
    .woojer img { 
        position: absolute; 
        max-width: 85%; 
        margin-left: 10%; 
        top: -2vw; 
    }
    .woojer_box {
        height: 29vw; 
    }
    .contact_info .contact_bold {
        display: inline-block; 
    }
    .contact_info {
        width: 100%;
    }
    .contact_info p {
        font-size: 14px;
        display: inline-block;
    }
    .subpage_title p {
        max-width: 50vw;
        text-align: left;
        font-weight: 200;
        font-size: 16px;
        margin-top: 15px;
    }
    .two_columns {
        display: block;
    }
    .right_column {
        margin-top: 30px; 
    }
    .foot p {
        font-size: 17px; 
    }
}


@media screen and (max-width: 650px) {
    .section_2 {
        display: block; 
        margin-top: 0px; 
    }
    .hero_section {
        padding-top: 120px; 
        padding-bottom: 50px; 
    }
    .featured_section {
        margin-bottom: 40px;  
    }
    .stats {
        width: 100%; 
        max-width: 100%;
    }
    .featured_a {
        margin-top: 0; 
    }
    /* Fixing font sizes */ 
    h1 {
        font-size: 10vw; 
        width: 100%; 
    }
    .h1 {
        font-size: 10vw;
    }
    .breadcrumbs { 
        font-size: 6vw;
    }
    h2 {
        font-size: 8vw;
        margin-top: 40px; 
    }
    .h2 {
        font-size: 9vw;
    } 
    .numbers {
        font-size: 10vw;
    }
    h3 {
        font-size: 8vw;
    }
    .stats p {
        font-size: 4vw; 
    }
    .stats .numbers {
        font-size: 12vw; 
    }
    .featured_a {
        margin-top: 0px;  
    }
    .NPT_summary {
        font-size: 4vw; 
        width: 100%;
    }
    .services_card ul {
        font-size: 4.5vw;  
        padding-left: 5vw !important; 
    }
    .featured_section h3 {
        font-size: 5vw; 
    }
    .services_section {
        display: block; 
    }
    .services_card {
        margin-bottom: 15px; 
        padding: 6vw;
    }
    section {
        padding: 5vw 8vw 12vw 8vw; 
    }
    .clients {
        grid-template-rows: 1fr 1fr; 
        grid-template-columns: 35% 15% 35%; 
        padding-bottom: 60px; 
    }
    .client {
        margin-bottom: -40px; 
    }
    .four_projects {
        display: block; 
    }
    .project_box {
        margin-bottom: 20px;
    }
    .four_projects h3 {
        font-size: 5vw; 
    }
    .two_columns {
        display: block; 
    }
    .left_column p {
        font-size: 4vw; 
    }
    .right_column {
        margin-top: 50px; 
    }
    .featured_tool h3 {
        padding-left: 15px;  
        padding-top: 10px; 
        font-size: 5vw; 
    }
    .featured_tool p {
        padding: 15px; 
        padding-top: 5px; 
        font-size: 15px; 
    }
    .featured_tool img {
        min-width: 30vw; 
    }
    .CTA_section {
        padding-bottom: 100px;  
    }
    .CTA_section .h2 {
        max-width: 70vw; 
        margin-bottom: 30px; 
    }
    footer {
        padding: 50px 10vw 50px 10vw;
    } 
    footer .logo {
       display: none; 
    } 
    .NPT_info {
        text-align: left; 
        display: block; 
        width: 100%; 
        float: none; 
    } 
    .NPT_info p {
        margin-bottom: 20px; 
        font-size: 5vw; 
    }
    .foot {
        width: 100%;
        padding-left: 10vw; 
        padding-right: 10vw;  
        display: block;
        padding-bottom: 50px; 
    }
    .foot p {
        width: 100%; 
        display: block;  
        padding-right: 0; 
    }
    .foot img {
        max-width: 40px; 
        display: block; 
        margin: auto; 
        padding-top: 20px; 
        padding-bottom: 30px; 
    }
    .foot a {
        display: block; 
        width: 100%; 
        text-align: center; 
    }
    .services_template {
        display: block;
    }    
    .services_template p {
        font-size: 4vw; 
    }
    .services_template ul {
        font-size: 4.5vw; 
        padding-top: 50px; 
        padding-left: 5vw; 
        width: 90vw; 
    }
    .four_projects .small_button {
        font-size: 5vw;
        margin-bottom: 0px; 
        float: none; 
    }
    .form_section {
        width: 100%;
        position: relative; 
        top: 0; 
        right: 0; 
        padding: 20px; 
        margin-bottom: 40px; 
    }
    .subpage_title .large_button {
        max-width: 80vw;
    }
    .subpage_title p {
        max-width: 80vw;
        font-size: 20px;
        margin-top: 35px;
    }
    .tool_section {
        display: block; 
    }
    .three_column {
        display: block; 
        grid-template-columns: 1fr 1fr 1fr; 
        margin-top: 30px; 
        gap: 35px; 
    }
    .three_column div {
        margin-top: 20px; 
    }
    .menu {
       display: none; 
    }
    .mobile_menu {
        display: block; 
        top: 5vw;
        position: absolute; 
        top: 0; 
        padding-left: 8vw; 
        padding-right: 8vw; 
        width: 100vw; 
    }
    .mobile_menu .logo {
        max-width: 34vw; 
        padding-top: 4vw; 
    }
    .hamburger {
        position: absolute;  
        top: 5vw;
        right: 8vw; 
        max-width: 8vw; 
        width: 8vw; 
        color: white;
    }
    .mobile_open {
        display: none; 
        color: white; 
        width: 100vw; 
        height: 100vh; 
        background-color: var(--navy); 
        position: absolute;  
        left: 0px; 
        z-index: 50; 
        padding-top: 10vh; 
    }
    .mobile_open a {
        text-align: center; 
        width: 100%; 
        display: inline-block;
        font-size: 40px; 
        padding-top: 5vh; 
        padding-bottom: 5vh;
        color: #C2D3FF; 
    }
    .mobile_open .active {
        font-weight: 500; 
        color: white; 
    }
    .border_word {
        font-size: 15px; 
        padding: 7px; 
    }
    .work_page h2 {
        font-size: 32px; 
    }
    .subpage_title {
        padding: 140px 8vw 40px 8vw; 
    }
    .contact_info p {
        font-size: 20px;
        display: block;
        padding-top: 5px;
        margin-bottom: -10px;
    }
    .contact_info .contact_bold {
        font-size: 25px;
        margin-bottom: 0px; 
    }
    .product_link p {
        font-size: 22px;
        max-width: 100%;
    }
    .product_link {
        text-align: left; 
    }
    .center .h2 {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .tool_info {
        margin-top: 15px; 
    }
    .product_page {
        display: block;
        grid-template-columns: 20% 80%;
        gap: 20px;
    }
    .product_page {
        text-align: center; 
    }
    .product_page p {
        text-align: left; 
        max-width: 70vw; 
        margin: auto; 
        margin-top: 20px; 
        margin-bottom: 20px; 
    }
    .product_page img {
        max-width: 50vw; 
        text-align: left; 
    }
    .product_page h2 {
        margin-top: 10px; 
    }
    .policies {
        text-align: left; 
    }
    .design_img {
        max-width: 100vw; 
        width: 100vw; 
        margin-left: -8vw; 
        margin-bottom: -13vw; 
        margin-top: 20px; 
    }
    .woojer img { 
        position: absolute; 
        max-width: 85%; 
        margin-left: 10%; 
        top: -7vw; 
    }
    .woojer_box {
        height: 65vw; 
    }
    .woojer {
        margin-top: 12vw; 
    }
    .app_design {
        position: absolute; 
        top: -45vw; 
        max-width: 120vw; 
        width: 120vw;
        right: -18vw;  
        margin: 0; 
    }
    .extra_padding {
        padding-bottom: 30vw; 
    }
    .relative {
        padding-top: 20vw; 
    }
    .contact_info {
        width: 100%;
    }
    .contact_info .contact_bold {
        display: inline; 
    }
    .contact_info p {
        padding-bottom: 20px; 
        font-size: 19px; 
    }
    .contact_info img {
        max-width: 8vw;
        display: inline-block;
        width: 8vw;
        margin-bottom: -8px;
        margin-top: 10px;
    }
    .tool_category h3 {
        font-size: 26px;
    }
    .tool_category p {
        font-size: 15px;
    }
    .three_column p {
        font-size: 15px;
    }
    .tool_section .tool_info {
        grid-column: 2/3;
        font-size: 16px;
    }
    .foot p {
        font-size: 20px; 
        padding-left: 0px; 
        padding-right: 0px; 
    }
}