.hero {
    padding: 20px;
    background: #0E1A28;
}

.herosubtitle {
    padding-top: 20px;
    font-family: "inter-18pt";
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
}

.herotitle {
    padding-top: 10px;
    font-family: "inter-18pt";
    font-size: 50px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    line-height: 40px;
}

.herotitlecontinuation {
    font-family: "inter-18pt";
    font-size: 50px;
    letter-spacing: 1px;
    color: #D4571E;
    font-weight: 700;
}

.herodis {
    font-family: "inter-18pt";
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    padding-top: 10px;
}

.herosmalldis {
    font-family: "inter-18pt";
    color: rgba(255, 255, 255, 0.6);
    padding-top: 5px;
    width: 95%;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.opportunitymarquee {
    display: inline-block;
    white-space: nowrap;
    padding: 15px 0;
    animation: marquee 20s linear infinite;
    font-family: 'inter-18pt';
    color: #ffffff;
    font-size: 14px;
    background: #0E1A28;
    border-top: rgba(255, 255, 255, 0.4) solid 0.5px;
    border-bottom: rgba(255, 255, 255, 0.4) solid 0.5px;
}

.projectone {
    background: #0E1A28;
    padding: 20px;
}

.projectnumber {
    padding-top: 20px;
    font-family: "inter-18pt";
    font-size: 12px;
    letter-spacing: 1px;
    color: #D4571E;
}

.projecttitle {
    margin-top: -5px;
    font-family: "inter-18pt";
    font-size: 45px;
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
}

.projectdis {
    padding-top: 5px;
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

.portfolioconect {
    font-family: "inter-18pt";
    color: #ffffff;
    background: #D4571E;
    border: none;
    padding: 5px 10px;
    margin-top: 20px;
}

.portfolioprojectsvg {
    width: 120%;
    display: block;
    margin-left: -10%;
}

.projectchalangewrapper {
    margin-top: -70px;
}

.projectchallange {
    border-left: #D4571E solid 2px;
    padding-left: 10px;
    margin-top: 20px;
}

.projectatitle {
    font-family: "inter-18pt";
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    letter-spacing: 2px;
}

.projectadis {
    font-family: "inter-18pt";
    color: #6B5F57;
    font-size: 12px;
    padding-top: 5px;
    width: 95%;
}

.projectonelight {
    background: #F2EDE6;
    padding: 20px;
}

.projectnumberlight {
    padding-top: 20px;
    font-family: "inter-18pt";
    font-size: 12px;
    letter-spacing: 1px;
    color: #D4571E;
}

.projecttitlelight {
    margin-top: -5px;
    font-family: "inter-18pt";
    font-size: 45px;
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
}

.projectdislight {
    padding-top: 5px;
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(0, 0, 0, 0.6);
}

.portfolioconectlight {
    font-family: "inter-18pt";
    color: #ffffff;
    background: #D4571E;
    border: none;
    padding: 5px 10px;
    margin-top: 20px;
}

.portfolioprojectsvglight {
    width: 115%;
    display: block;
    margin-left: -7.5%;
}

.projectchalangewrapperlight {
    margin-top: -30px;
}

.projectchallangelight {
    border-left: #D4571E solid 2px;
    padding-left: 10px;
    margin-top: 20px;
}

.projectatitlelight {
    font-family: "inter-18pt";
    color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    letter-spacing: 2px;
}

.projectadislight {
    font-family: "inter-18pt";
    color: #6B5F57;
    font-size: 12px;
    padding-top: 5px;
    width: 95%;
}

.portfolioprojectsvgtwo {
    width: 105%;
    display: block;
    margin-left: -2.5%;
}

.projectchalangewrappertwo {
    margin-top: 0px;
}

.contactus {
    padding: 20px;
    background: #D4571E;
    position: relative;
    overflow: hidden;
}

.contactusbubbledecora {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: white;
    opacity: 0.1;

    top: -40px;
    left: -60px;
}

.contactussub {
    font-family: "inter-18pt";
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.25);
}

.contactustitle {
    font-family: "inter-18pt";
    color: white;
    font-size: 50px;
    font-weight: 700;
    width: 70%;
    line-height: 50px;
}

.contactusdiscription {
    padding-top: 25px;
    font-family: "inter-18pt";
    font-size: 16px;
    width: 93%;
    color: rgba(255, 255, 255, 0.7);
}

.contactusemail {
    padding-top: 15px;
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
}

.contactusbuttonwrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
}

.contactusbuttonwrapper button {
    padding: 15px;
    font-family: "inter-18pt";
    font-size: 16px;
    font-weight: 600;
}

.contactusstart {
    background: #0E1A28;
    border: none;
    color: #ffffff;
}

.contactusconsultation {
    background: none;
    border: #ffffff solid 1.5px;
    color: #ffffff;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.herotabletsvg, .projectonetabletsvg, .projectonetabletsvgtwo {
        display: none;
    }


@media (min-width: 650px) and (max-width: 1023px) {
    
    .hero {
        display: grid;
        grid-template-columns: 
        1.5fr
        1fr;
        gap: 40px;
    }

    .herodis, .herosmalldis {
        width: 90%;
    }

    .herotabletsvg {
        display: block;
        margin-top: auto;
    }

    .portfolioprojectsvg {
        display: none;
    }

    .projectonetabletsvg, .projectonetabletsvgtwo {
        display: block;
    }

    .projectonetabletsvgtwo {
        width: 90%;
    }

    .projectone {
        display: flex;
    }

    .projectchalangewrapper, .projectchalangewrapperlight {
        margin-top: 0px;
    }

    .portfolioprojectsvglight {
        display: none;
    }

    .projectonelight {
        display: flex;
        gap: 20px;
    }

    .portfolioprojectsvgtwo {
        display: none;
    }

    .projectfivetabletsvg {
        display: none;
    }

    .contactus {
        display: grid;
        grid-template-columns: 
        1.2fr
        0.5fr;
    }

    .contactusbuttonwrapper {
        gap: 10px;
        justify-content: end;
    }

    .contactustitle {
        width: 90%;
    }

    .contactusdiscription {
        width: 60%;
    }
}

@media (min-width: 1024px) {

    .hero {
        display: grid !important;
        grid-template-columns: 1.2fr 0.8fr;
        column-gap: 60px;
        padding: 50px 20px 100px 50px;
        align-items: center;
    }

    .herosubtitle, 
    .herotitle, 
    .herotitlecontinuation, 
    .herodis, 
    .herosmalldis {
        grid-column: 1;
        width: 100%;
    }

    .herosubtitle { padding-top: 0; font-size: 13px; letter-spacing: 2px; }
    .herotitle { font-size: 72px; line-height: 56px; padding-top: 15px; }
    .herotitlecontinuation { font-size: 72px; }
    .herodis { font-size: 20px; line-height: 28px; padding-top: 20px; }
    .herosmalldis { font-size: 15px; line-height: 24px; padding-top: 15px; }

    .herotabletsvg {
        display: block !important;
        grid-column: 2;
        grid-row: 1 / span 5; /* Stretches alongside the layout text */
        width: 60%;
    }

    .opportunitymarquee {
        padding: 20px 0;
        font-size: 16px;
    }

    .projectone {
        display: grid !important;
        grid-template-columns: 0.95fr 1.05fr; /* Left Text info vs Right Graphic info */
        column-gap: 80px;
        padding: 20px 50px 40px 50px;
        align-items: start;
    }

    .projectnumber, .projecttitle, .projectdis, .portfolioconect {
        grid-column: 1;
    }

    .projectnumber { grid-row: 1; padding-top: 0; font-size: 14px; }
    .projecttitle { grid-row: 2; font-size: 64px; line-height: 68px; margin-top: 10px; }
    .projectdis { grid-row: 3; font-size: 18px; padding-top: 10px; }
    
    .portfolioconect {
        grid-row: 4;
        justify-self: start; 
        padding: 12px 24px;
        margin-top: 35px;
        font-size: 14px;
        cursor: pointer;
    }

    .portfolioprojectsvg {
        display: none !important;
    }

    .projectonetabletsvg {
        display: block !important;
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-left: 0;
    }

    .projectchalangewrapper {
        grid-column: 2;
        grid-row: 3 / span 2;
        margin-top: 35px; /* Clean break spacing below the vector image */
        width: 100%;
    }

    .projectonelight {
        display: grid !important;
        grid-template-columns: 0.95fr 1.05fr;
        column-gap: 80px;
        padding: 40px 70px 40px 75px;
        align-items: start;
    }

    .projectfivetabletsvg {
        display: none;
    }

    .projectnumberlight, .projecttitlelight, .projectdislight, .portfolioconectlight {
        grid-column: 1;
    }

    .projectnumberlight { grid-row: 1; padding-top: 0; font-size: 14px; }
    .projecttitlelight { grid-row: 2; font-size: 64px; line-height: 68px; margin-top: 10px; }
    .projectdislight { grid-row: 3; font-size: 18px; padding-top: 10px; }
    
    .portfolioconectlight {
        grid-row: 4;
        justify-self: start;
        padding: 12px 24px;
        margin-top: 35px;
        font-size: 14px;
        cursor: pointer;
    }

    .portfolioprojectsvglight, .portfolioprojectsvgtwo {
        display: none !important;
    }

    .projectonetabletsvgtwo {
        display: block !important;
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 100%;
        margin-left: 0;
    }

    .projectchalangewrapperlight, .projectchalangewrappertwo {
        grid-column: 2;
        grid-row: 3 / span 2;
        margin-top: 35px;
        width: 100%;
    }

    .projectchallange, .projectchallangelight {
        margin-top: 30px;
        padding-left: 15px;
    }

    .projectatitle, .projectatitlelight { font-size: 13px; letter-spacing: 2px; }
    .projectadis, .projectadislight { font-size: 15px; line-height: 24px; padding-top: 8px; width: 100%; }


    .contactus {
        display: grid;
        grid-template-columns: 
        1.2fr
        0.5fr;
    }

    .contactusbuttonwrapper {
        gap: 10px;
        justify-content: end;
    }

    .contactustitle {
        width: 90%;
    }

    .contactusdiscription {
        width: 60%;
    }

    .contactussub, .contactustitle, .contactusdiscription, .contactusemail {
        grid-column: 1;
        width: 100%;
    }

    .contactusbubbledecora {
        width: 450px;
        height: 450px;
        top: -150px;
        left: -100px;
    }

    .contactustitle { font-size: 64px; line-height: 68px; }
    .contactusdiscription { padding-top: 20px; font-size: 18px; line-height: 26px;}
    .contactusemail { padding-top: 20px; font-size: 18px; }

    
    .contactusbuttonwrapper {
        grid-column: 2;
        grid-row: 1 / span 5; 
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;
        max-width: 320px;
        justify-self: end;
    }

    .contactusbuttonwrapper button {
        width: 100%;
        padding: 18px;
        font-size: 15px;
        cursor: pointer;
    }

    .projectonetabletsvg {
        width: 60%;
        margin-left: auto;
    }

    .projectonetabletsvgtwo {
        width: 40%;
        margin-top: 40px;
        margin-left: auto;
    }
}