.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;
}

.hero {
    padding: 20px 20px 50px 20px;
    background: #F2EDE6;
}

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

.herotitle {
    font-family: "inter-18pt";
    font-size: 60px;
    color: #000000;
    font-weight: 700;
    letter-spacing: 2px;
}

.herodevision {
    background: #D4571E;
    width: 20%;
    height: 1px;
}

.herodiscription {
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
    width: 80%;
    padding-top: 20px;
}

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

.oportunitysubtitle {
    font-family: "inter-18pt";
    font-size: 14px;
    letter-spacing: 2px;
    padding-top: 30px;
    color: rgba(255, 255, 255, 0.3);
}

.oportunitytitleone, .oportunitiestitletwo {
    font-family: "inter-18pt";
    font-weight: 700;
    font-size: 40px;
    line-height: 45px;
    padding-bottom: 20px;
}

.oportunitytitleone {
    color: #ffffff;
    padding-top: 30px;
}

.oportunitiestitletwo {
    color: #D4571E;
}

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

.oportunitysvg {
    width: 98%;
    padding-top: 40px;
}

.websitedevwrapper, .socialmediawrapper, .digitalmarketingwrapper {
    padding: 20px;
}

.websitedevwrapper, .digitalmarketingwrapper {
    background: #F2EDE6;
}

.digitalmarketingwrappersvg {
    width: 60%;
    margin-top: 30px;
}

.websitedevwrapper {
    padding-top: 10px;
}
.websitedevsubtitle {
    font-family: "inter-18pt";
    font-size: 14px;
    letter-spacing: 2px;
    color: #6B5F57;
}

#websitedevsubtitle {
    font-family: "inter-18pt";
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.06);
}

.servicewrappertitle {
    font-family: "inter-18pt";
    font-size: 40px;
    font-weight: 600;
    width: 80%;
    line-height: 45px;
    padding-top: 20px;
    color: #000000;
}

#servicewrappertitle {
    font-family: "inter-18pt";
    font-size: 40px;
    font-weight: 600;
    width: 80%;
    line-height: 45px;
    padding-top: 20px;
    color: white;
}

.servicewrapperdis {
    font-family: "inter-18pt";
    font-size: 16px;
    width: 93%;
    color: #6B5F57;
}

#servicewrapperdis {
    font-family: "inter-18pt";
    font-size: 16px;
    width: 93%;
    color: rgba(255, 255, 255, 0.7);
}

.servicesvg {
    padding-top: 20px;
    width: 100%;
}

.lightintegratedsection {
    padding: 40px 20px 20px 20px;
    background: #F8F5F0;
}


.integratedsubtitle {
    font-family: "inter-18pt";
    font-size: 12px;
    color: #6B5F57;
    letter-spacing: 2px;
}

.integratedtotle {
    font-family: "inter-18pt";
    font-size: 50px;
    width: 60%;
    font-weight: 700;
    line-height: 60px;
    margin-top: 15px;
}

.integratedsvg {
    width: 80%;
    margin-bottom: 50px;
}

#websitedevelopmentsvgimg {
    width: 125%;
    margin-left: -12.5%;
}

.servicesnextpagebutton {
    font-family: "inter-18pt";
    font-size: 14px;
    color: #D4571E;
    margin-top: -50px;
}

#servicesnextpagebutton {
    font-family: "inter-18pt";
    font-size: 14px;
    color: #D4571E;
    margin-top: 30px;
}

.servicesnextpagebuttonsvg {
    margin-right: 10px;
}

.socialmediawrapper {
    background: #0E1A28;
}

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

.websitepackagessubtitle {
    font-family: "inter-18pt";
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    padding-top: 40px;
}

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

.websitepackagestitle br {
    display: none;
}

.websitepackagestarter {
    padding-top: 60px;
}

.websitepackagegrwth, .websitepackagepremium {
    padding-top: 20px;
}

.websitepackagestarter, .websitepackagegrwth, .websitepackagepremium {
    border-bottom: rgba(255, 255, 255, 0.4) solid 0.6px;
    padding-bottom: 20px;
}

.packagesubtitle {
    font-family: "inter-18pt";
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.packageprice {
    font-family: "inter-18pt";
    font-size: 35px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 0px;
    margin-top: 15px;
}

.packageplan {
    font-family: "inter-18pt";
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    margin-top: 5px;
}

.packagepricesvg path {
    display: none;
}

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

.packagedis {
    font-family: "inter-18pt";
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    margin-top: 5px;
    width: 80%;
} 

.packagewhoisitfor {
    font-family: "inter-18pt";
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    margin-top: 10px;

} 

.howithappens {
    padding: 40px 20px;
    background: #E4DDD5;
}

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

.howithappenstitle {
    font-family: "inter-18pt";
    font-size: 40px;
    font-weight: 700;
    width: 50%;
    letter-spacing: 2px;
    line-height: 45px;
}

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

.contactuscircle {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.04;

    top: -135px;
    left: -50px;
}

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

.contactustitle {
    font-family: "inter-18pt";
    font-size: 40px;
    font-weight: 800;
    width: 40%;
    letter-spacing: 2px;
    line-height: 45px;
    margin-top: 10px;
}

.contactusdis {
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(14, 26, 40, 0.75);
    margin-top: 10px;
}

.contactusemail {
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(14, 26, 40, 1);
    margin-top: 10px;
}

.contactusbuttonwrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

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

.contactusstartbutton {
    background: #0E1A28;
    color: #ffffff;
}

.contactusconsultationbutton {
    border: #0E1A28 solid 2px;
    color: #0E1A28;
    font-family: "inter-18pt";
    font-weight: 700;
}

.contactuscirclebottom {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.04;

    bottom: -115px;
    right: -50px;
}

.digitalmarketngtabletwrapperpricetavbletsvg {
    display: none;
}

.integratedrighttabletsection {
    display: none;
}

.integratedsvgtablet {
    display: none;
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

#websitedevelopmentbuttontablet, #digitalmarketingmentbuttontablet, .websiteservicesvgfortablet, #servicesnextpagebuttontabletnone, .oportunitysvgtablet,#servicesnextpagebuttontablet, .integratedsvgtablettext, .websitepackagestable, #websitedevelopmentbuttontablettwo, .websitepackagesforcomputer  {
    display: none;
}

.howithappenstabletsvg {
    display: block;
}

.herocomputersvg, .oportunitysvgcomputer {
    display: none;
}

.lightintegratedsectioncomputer {
    display: none;
}

@media (min-width: 650px) and (max-width: 1023px) {

    .oportunity {
        display: flex;
    }

    .oportunitysubtitle {
        display: none;
    }

    .oportunitysvg {
        display: none;
    }

    #websitedevelopmentbutton {
        display: none;
    }

    #websitedevelopmentbuttontablet, #websitedevelopmentbuttontablet {
        display: block;
    }

    #websitedevelopmentsvgimg {
        display: none;
    }

    .websiteservivestabletsvgwrap {
        display: block;
    }

    .websitedevwrapper, .socialmediawrapper {
        display: flex;
        gap: 20px;
    }

    .websiteservivestabletsvgwrap {
        display: flex;
        flex-direction: column;
    }

    .digitalmarketingwrapper {
        display: grid;
        grid-template-columns: 
        2.5fr
        1.5fr;
        flex: 1;
    }

    .servicewrapperdis {
        padding-top: 10px;
    }

    #servicesnextpagebutton {
        display: none;
    }

    .websiteservicesvgfortablet, #digitalmarketingmentbuttontablet, #servicesnextpagebuttontabletnone {
        display: block;
    }

    #socialmediamobilesvg {
        display: none;
    }

    #digitalmarketingmentbutton {
        display: none;
    }

    #servicesnextpagebuttontabletnone {
        font-family: "inter-18pt";
        font-size: 14px;
        color: #D4571E;
        margin-top: 10px;
    }

    .digitalmarketingwrappersvg {
        display: none;
    }

    .servicesnextpagebuttonsvg {
        margin-top: 80px;
    }

    .websitedevsubtitle {
        padding-top: 0px;
    }

    .servicewrappertitle {
        padding-top: 20px;
    }

    .servicewrapperdis {
        padding-top: 10px;
        width: 80%;
    }

    .digitalmarketngtabletwrapperpricetavbletsvg {
        display: block;
        margin-top: 10%;
        width: 90%;
    }
    
    .digitalmarketngtabletwrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .integratedsvg {
        display: none;
    }

    .integratedtotle {
        width: 80%;
    }

    .integratedsvgtablet {
        display: block;
        margin-top: 40px;
    }

    .integratedsvgtablettext {
        display: block;
        font-family: "inter-18pt";
        font-size: 16px;
        color: rgba(0, 0, 0, 0.6);
        width: 80%;
        padding-top: 20px;
    }

    .websitepackagestitle br {
        display: none;
    }

    .howithappensmobilesvg {
        display: none;
    }

    .howithappenstabletsvg {
        display: block;
        margin-top: 20px;
    }

    .contactus {
        display: grid;
        grid-template-columns: 
        3fr
        2fr;
    }

    .contactustitle {
        width: 80%;
    }

    .contactusdis {
        width: 70%;
        padding-top: 20px;
    }

    .contactusemail {
        color: rgba(255, 255, 255, 0.8);
    }

    .contactusbuttonwrapper {
        margin-top: auto;
    }
}

@media (min-width: 800px) and (max-width: 1023px) {

    .oportunitysvgtablet {
        display: block;
        gap: 30px;
        width: 90%;
        max-width: 300px;
        padding: 40px;
    }
}

@media (min-width: 1024px) {

    .hero {
        display: flex;
        justify-content: space-between;
    }

    .herosubtitle {
        font-size: 16px;
    }

    .herodiscription {
        padding-bottom: 20px;
    }

    .heroleftcomputersidesvg {
        margin-top: -20px;
        width: 400px;
        height: 36.7px;
    }

    .herocomputersvg {
        width: 20%;
        margin-right: 3%;
    }

    .herocomputersvg {
        display: block;
    }

    .oportunity {
        display: flex;
        gap: 50px;
    }

    .oportunitysubtitle {
        display: block;
    }

    .oportunitytitleone {
        line-height: 40px;
    }

    .oportunitydiscription {
        width: 50%;
    }

    .oportunitysvg {
        display: none;
    }

    #oportunitysubtitle {
        display: none;
    }

    .oportunitysvgcomputer {
        display: block;
        width: 500px;
        align-self: center;
        margin-right: -3%;
    }

    .websitedevwrapper {
        display: flex;
    }

    #websitedevelopmentbutton, #websitedevelopmentsvgimg {
        display: none;
    }

    #websitedevelopmentbuttontablet {
        display: block;
        width: 80%;
    }

    #websitedevelopmentbuttontablettwo {
        display: block;
        width: 60%;
    }

    .websiteservicesvgfortablet {
        display: block;
        width: 25%;
        max-width: 400px;
        position: relative;
        margin-left: auto;
        align-self: center;
    }

    #servicewrapperdis {
        padding-top: 0px;
        width: 80%;
    }

    .servicesnextpagebutton {
        margin-top: 0px;
        padding-bottom: 20px;
    }
    
    #websitedevsubtitle {
        padding-top: 20px;
        font-family: "inter-18pt";
        font-size: 12px;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.8);
    }

    .socialmediawrapper {
        display: flex;
        gap: 80px;
    }

    #digitalmarketingsvgcomputer {
        display: none;
    }

    .servicesnextpagebutton {
        margin-top: 20px;
    }
    
    #socialmediamobilesvg, #servicesnextpagebutton, #digitalmarketingmentbutton, .websitepackagesforcomputer {
        display: none;
    }

    .servicewrapperdis {
        width: 80%;
    }

    #digitalmarketingmentbuttontablet {
        display: block;
        width: 90%;
    }

    .digitalmarketingwrapper {
        display: flex;
    }

    .digitalmarketingwrappersvg {
        max-width: 300px;
    }

    .servicesvg {
        width: 50%;
        max-width: 300px;
        margin-right: 0px;
    }

    .integratedsvg {
        display: none;
    }

    .integratedtotle {
        width: 80%;
    }

    .integratedsvgtablet {
        display: block;
        margin-top: 40px;
    }

    .howithappensmobilesvg {
        display: none;
    }

    .howithappenstabletsvg {
        display: block;
        margin-top: 20px;
    }

    .contactus {
        display: grid;
        grid-template-columns: 
        3fr
        2fr;
    }

    .contactustitle {
        width: 80%;
    }

    .contactusdis {
        width: 70%;
        padding-top: 20px;
    }

    .contactusemail {
        color: rgba(255, 255, 255, 0.8);
    }

    .contactusbuttonwrapper {
        margin-top: auto;
    }

    .lightintegratedsection {
        display: none;
    }

    .lightintegratedsectioncomputer {
        display: flex;
        flex-direction: row;
        background: #F2EDE6;
    }

    .lightintegratedsectioncomputerleft, .lightintegratedsectioncomputerright {
        width: 50svw;
        padding: 20px;
    }

    .lightintegratedsectioncomputerleft {
        background: #F2EDE6;
    }

    .lightintegratedsectioncomputerright {
        background: #0E1A28;
        height: 46svw;
    }

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

    .lightintegratedsectioncomputerlefttitle {
        font-family: "inter-18pt";
        font-size: 60px;
        color: #000000;
        font-weight: 600;
        line-height: 60px;
        letter-spacing: 2px;
        padding: 10px 0px;
    }

    .lightintegratedsectioncomputerleftdis {
        font-family: "inter-18pt";
        font-size: 16px;
        color: rgba(0, 0, 0, 0.6);
        width: 80%;
        padding-top: 20px;
    }

    .lightintegratedsectioncomputersvg {
        width: 210%;
        margin-top: 20px;
    }

    .lightintegratedsectioncomputerrightdivsion {
        width: 10%;
        height: 2px;
        background: #D4571E;
        margin-top: 30px;
    }

    .lightintegratedsectioncomputerrighttitle {
        font-family: "inter-18pt";
        font-size: 60px;
        color: #ffffff;
        font-weight: 600;
        line-height: 60px;
        letter-spacing: 2px;
        width: 80%;
        padding: 10px 0px;
    }

    .lightintegratedsectioncomputerrightdis {
        font-family: "inter-18pt";
        font-size: 16px;
        color: rgba(255, 255, 255, 0.6);
        width: 80%;
        padding-top: 20px;
    }

    .lightintegratedsectioncomputerrightsvg {
        margin-top: 20px;
    }

   .websitepackages {
        background: #F2EDE6;
    }

    .websitepackagessubtitle {
        color: rgba(0, 0, 0, 0.6);
    }

    .websitepackagestitle {
        color: #000000;
        border-bottom: #000000 solid 1.5px;
        padding-bottom: 20px;
    }

    .websitepackagestable {
        display: grid;

        grid-template-columns:
            1.2fr
            0.8fr
            1.5fr
            0.7fr;

        font-family: "inter-18pt";
        font-size: 14px;

        color: rgba(0, 0, 0, 0.6);

        padding: 10px 0;

        border-bottom: rgba(0, 0, 0, 0.4) solid 0.5px;
    }

    .websitepackagestablelist {
        display: flex;
        align-items: center;
    }

    #websitepackagestablelist {
        justify-content: center;
    }

    .websitepackagestablelist:nth-child(3) {
        padding-left: 15px;
    }

    .websitepackagestablelist:last-child {
        justify-content: flex-end;
    }

    .packagesubtitle,
    .packageprice,
    .packageplan,
    .packagelist,
    .packagewhoisitfor {
        display: none;
    }

    .websitepackagestarter,
    .websitepackagegrwth,
    .websitepackagepremium {
        display: none;
    }

    .websitepackagesforcomputer {
        display: grid;

        grid-template-columns:
            1.2fr
            0.8fr
            1.5fr
            0.7fr;

        font-family: "inter-18pt";

        padding: 20px 0;

        border-bottom: rgba(0, 0, 0, 0.4) solid 0.5px;
    }

    .websitepackagesforcomputerlistwrapper {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .websitepackagesforcomputerlistwrapper:nth-child(2) {
        padding-left: 10px;
        padding-right: 10px;
    }

    .websitepackagesforcomputerlistwrapper:nth-child(3) {
        padding-left: 15px;
        padding-right: 15px;
    }

    .websitepackagesforcomputerlistpackagetitle {
        font-weight: 600;
        font-size: 35px;
    }

    .websitepackagesforcomputerlistpackagedis {
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.6);
        max-width: 95%;
    }

    .websitepackagesforcomputerlistpricetitle {
        font-weight: 700;
        font-size: 30px;

        text-align: center;
        white-space: nowrap;
    }

    .websitepackagesforcomputerlistpricedis {
        font-weight: 400;
        font-size: 14px;

        color: rgba(0, 0, 0, 0.6);

        text-align: center;

        max-width: 100%;
    }

    .websitepackagesforcomputerkeytitle {
        font-weight: 500;
        font-size: 16px;
    }

    .websitepackagesforcomputerkeydis {
        font-weight: 400;
        font-size: 14px;

        color: rgba(0, 0, 0, 0.6);

        max-width: 95%;
    }

    .websitepackagesforcomputertimetitle {
        font-weight: 500;
        font-size: 16px;

        display: flex;

        align-items: center;
        justify-content: flex-end;

        gap: 5px;

        white-space: nowrap;
    }

    .websitepackagesforcomputerlistwrapper:last-child {
        justify-self: end;
    }

    .websitepackagesforcomputertimetitle svg {
        width: 10px;
        height: 10px;

        flex-shrink: 0;
    }
}