@media screen and (max-width: 767px){
    .mobileIncomplete {
        display: block;
        background-color: #f8d7da; /* Light red background */
        color: #721c24; /* Dark red text color */
        padding: 10px;
        text-align: center;
        font-size: 16px;
        margin-bottom: 20px; /* Adds some space between the message and the content */
        border: 1px solid #f5c6cb; /* Border for emphasis */
    }
    
    .mobileIncomplete p {
        margin: 0; 
    }
    main{
        display: none;
    }
    footer{
        display: none;
    }

    /* could be useful */
    /* #infoBox {
        bottom: 20%;
        flex-direction: column;
        gap: 24px;
    }
    
    .logoIntro {
        width: 90%;
        text-align: center;
    } */
}
/* @media screen and (min-width: 768px) and (max-width: 1023px){
    tablet
    .mobile-incomplete {
        display: none;
    }
} */

@media screen and (min-width: 1024px){
    .mobileIncomplete {
        display: none; /* Hide the message on larger screens */
    }
    body{
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
        position: relative;
        /* background-image: url(images/newInfoBox.png);
        background-size: 500px 800px;
        background-position: 0px top; 
        background-repeat: no-repeat; */
    }
    .hero-content {
        top: 55%;
        left: 0px;/* align to page gutter */
        max-width: 1392px;
        z-index: 4;
        margin: 24px;
    }
    .logoIntro{
        display: flex;
        position: absolute;
        top: 50%;         
        left: 50%;         
        transform: translate(-100%, -100%);
        width: max-content;
        z-index: 4;
        margin: 0;
    }
    #logoimg{
        justify-items: center;
        align-content: center;
        margin-right: 16px;
    }
    #logotx h1, #logotx p{
        margin: 0px;
        width: 700px;
    }
    #infoBox{
        display: flex;
        flex-direction: row;
        gap: 100px;
        position: absolute;
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, 170%);
        width: max-content;
        z-index: 4;
        margin: 0;
    }
    #infoBox div{
        flex: content;
    }
    #infoBox h3, #infoBox p{
        margin: 0px;
    }
    main{
        margin: 0px 24px;
        box-sizing: border-box;
    }
    main h3{
        font-weight: 300;
    }
    main .smolP{
        margin: 0px;
    }
    main p{
        margin-top: 0px;
    }
    #query{
        width: 100%;
        margin: 0 auto; 
    }
    .spaceBtwn{
        margin-top: 150px;
        margin-bottom: 150px;
        opacity: 0;
        transition: opacity 1s ease;
        padding: 0.5rem;
    }
    .spaceBtwn.active{
        opacity: 1;
    }
    .data{
        display: flex;
        justify-content: space-between; 
        gap: 32px;
    }
    .data2{
        display: flex;
        justify-content: space-between; 
        gap: 8px;
    }
    .dataCallout{
        flex: 1;
    }
    .calloutCenter{
        text-align: center;
        white-space: nowrap;
        margin: auto auto 8px;
    }
    .dataCallout2{
        flex: content;
    }
    .callout2Center{
        text-align: center;
        width: 300px;
    }
    .dataCalloutText{
        width: 300px;
    }
    .dataimg{
        display: flex; 
        gap: 24px;
        align-items: center;
        justify-content: center;
        margin: auto;
    }
    .dataimgCallout{
        display: flex; 
        gap: 24px;
        align-items: center;
        justify-content: center;
        margin: auto 0px;
    }
    .datatext{
        flex: 4;
    }
    .data h2, h3{
        margin-top: 0px;
    }
    .data420{
        flex: 2.5;
        /* width: 420px;
        padding-right: 88px; */
    }
    .newMargin{
        margin-left: 170px; 
        margin-right: 170px;
    }
    #hmw{
        background: rgb(246, 246, 247);
        border: 1px solid rgb(196, 196, 196);
        padding: 16px 24px;
    }
    .callout{
        background-color: rgb(249, 251, 252);
        border: 2px solid rgb(211,231,231);
        border-radius: 20px;
        padding: 24px;
    }
    .callout h1{
        margin: 0px;
        margin-bottom: -5px;
    }
    .list{
        display: flex;
        align-items: center;
        gap: 16px; 
    }
    .lofiInsight{
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .lofiInsight h2, .lofiInsight p{
        margin: 0px;
    }
    .lightAquaText{
        color: rgb(211,231,231);
        margin: 0px 16px;
    }
    .aquaText{
        color: rgb(82,163,163);
    }
    hr{
        border: none;
        width: 100%;
        height: 2px; 
        background-color: rgb(236, 241, 244);
        margin: 8px auto 48px;
    }
    hr.vertical-line {
        border: none;
        width: 2px;
        height: 150px; 
        background-color: rgb(236, 241, 244);
        margin: 0; 
    }
    #backgroundColor{
        background-color: rgb(82,163,163, 0.2);
    }
    #amplfyvid{
        border-radius: 40px;
    }
    .dataLinks{
        display: flex;
        justify-content: space-between; 
        gap: 16px;
    }
    .dataLinks a{
        flex: 1;
    }
    #leftcsLink{
        padding: 16px;
        background-color: rgb(253,253,253);
        border: 1px solid rgb(237,237,240);
        border-radius: 20px;
    }
    #leftcsLink h2{
        margin-top: 0px;
        margin-bottom: 8px;
    }
    #leftcsLink:hover{
        background-color: rgb(50, 50, 50, 0.1);
        border: 1px solid rgb(50, 50, 50);
    }
    #rightcsLink{
        padding: 16px;
        background-color: rgb(253,253,253);
        border: 1px solid rgb(237,237,240);
        border-radius: 20px;
    }
    #rightcsLink h2{
        margin-top: 0px;
        margin-bottom: 8px;
    }
    #rightcsLink:hover{
        background-color: rgb(50, 50, 50, 0.1);
        border: 1px solid rgb(50, 50, 50);
    }
}