:root{

    --primary-black: rgb(0, 0, 0);
    --primary-red: rgb(237, 59, 59);
    --primary-red-soft: rgb(237, 59, 59);
    --primary-red-light: rgb(255, 203, 203);
    --primary-blue: rgb(31, 166, 255);
    --primary-base: rgb(255, 255, 255);
    --primary-base-light: rgb(240,240,240);
    --primary-base-superlight: rgb(250,250,250);

    --primary-base-mid: rgb(180, 180, 180);
    --primary-base-dark: rgb(150, 150, 150);
    --primary-base-darkest: rgb(28, 28, 28);
    --shadow: rgba(0,0,0,0.25)

}

html{
    margin: 0;
    padding: 0;
}
*{
    touch-action: manipulation;
    font-family: helvetica;
}
*::-webkit-scrollbar {
    display: none;
}

body{
    padding: 0;
    margin: 0;
    background-color: var(--primary-base-light);
}

header{
    position: fixed;
    left: 0;      /* ADDED */
    top: 0;       /* ADDED */
    width: 100%;  /* ADDED */
    z-index: 99;
    margin: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 20px;
    padding-right: 10vw;
    background-color: var(--primary-base-light);
}

button{
    background-color: var(--primary-red);
    padding: 18px;
    margin: 4px;
    padding-inline: 26px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: 0;
    border-radius: 8px;
}

.secondary-cta{
    background-color: var(--primary-base-darkest);
}

.terciary-cta{
    background-color: var(--primary-base-darkest);
    color: var(--primary-base-superlight);
    padding: 12px;
    padding-inline: 18px;
}

.ghost-cta{
    background-color: transparent;
    border: 1px solid var(--primary-base-mid);
    color: var(--primary-base-dark);
}

#main-cont{
    background-color: white;
    margin: 0px;
    border-radius: 20px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-bottom: 0px;
}

#marquee{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-inline: 10px;
}

#mockup{
    border: 0px solid red;
    width: 100%;
    height: 500px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items:center;
    background-image:  linear-gradient(to bottom, rgba(255,255,255,0), 90%,
    rgba(255, 255, 255, 0)),
    url('3d mockup.png'); 
    background-attachment: fixed;
    background-size: cover;   
    background-repeat:no-repeat;
    background-position: center 0px;
}

#mockup2{
    border: 0px solid red;
    width: 100%;
    height: 800px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items:center;
    background-image:  linear-gradient(to bottom, rgba(255,255,255,1), 0%,
    rgba(255, 255, 255, 0)),
    url('Shot Overlaps.png'); 
    background-repeat: no-repeat;
    background-size: cover;   
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-position: center 100px;
}

#mockup3{
    border: 0px solid red;
    width: 100%;
    height: 90vh;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items:center;
    background-image:  linear-gradient(to bottom, rgba(255,255,255,1), 0%,
    rgba(255, 255, 255, 0)),
    url('iPad Mockup Light2.png'); 
    background-attachment: fixed;
    background-size: cover;   
    background-repeat:no-repeat;
    background-position: 0px -50vw;

}

@media (max-width: 500px) {
    #mockup{
        height: 70vh;
        background-attachment: scroll;
        background-position:center;
        border-radius:20px;
        background-image:  linear-gradient(to bottom, rgba(255, 255, 255, 1), 0%,
        rgba(255, 255, 255, 0.0),50%,rgba(255,255,255,1)),
        url('Shot Hero.png'); 
        background-size: cover;   
    }
    #mockup2{
        height: 60vh;
        background-attachment: scroll;
        background-position: center;
        border-radius:0px;
        background-image:  linear-gradient(to bottom, rgba(255, 255, 255, 1), 0%,
        rgba(255, 255, 255, 0.0),90%,rgba(255,255,255,1)),
        url('Shot Overlaps.png'); 
        background-size: cover;   
    }
    #mockup3{
        height: 400px;
        background-attachment: scroll;
        background-position: 0px 0px;
        border-radius:0px;
        background-image:  linear-gradient(to bottom, rgba(255, 255, 255, 1), 0%,
        rgba(255, 255, 255, 0.0),100%,rgba(255,255,255,1)),
        url('iPad Mockup Light2.png'); 
        background-size: cover;   
    }
}
footer{
    margin-top: 0px;
    background-color: var(--primary-base-darkest);
    color: white;
    padding: 20px;
    padding-bottom: 50px;
}

#whatsapp{
    padding: 16px;
    position: fixed;
    z-index: 100;
    right: 2%;
    top: 90dvh;
    border-radius: 40px;
    background-color: rgb(32, 202, 32);
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 2px 0px 8px rgba(0,0,0,0.3);
}
.w-link{
    padding: 0;
    margin: 0;
    margin-top: 0px;
    color: white;
    font-weight: bold;
    text-decoration: none;
}