@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin:0;
    box-sizing: border-box;
}

body{
    display: flex;
    width: calc(100vw - (100vw - 100%));
    flex-direction: column;
    overflow-x:hidden;
}

:root{
    --Darkest-Purple:#1D043A;
    --medium-purple-3: #DF84EF;
    --Medium-purple-4: #BD8AF7;
    --Bright-Blue-2: #70D7FE;
    --White: #FFF;

    --gradient-hero: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.00) 12%, rgba(255, 255, 255, 0.00) 83.65%, var(--Darkest-Purple, rgba(29, 4, 58, 0.80)) 100%);
    --gradient-hero-home: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.00) 12%, rgba(255, 255, 255, 0.00) 20%, var(--Darkest-Purple, rgba(29, 4, 58, 0.80)) 90%, var(--Darkest-Purple, rgba(29, 4, 58, 1)) 100%);
    --gradient-2---blue: linear-gradient(180deg, var(--Darkest-Purple, #1D043A) 66%, var(--Bright-Blue-2, #70D7FE) 89.42%, var(--White, #FFF) 100%);
    --gradient2-purple: linear-gradient(180deg, var(--Darkest-Purple, #1D043A) 66%, var(--medium-purple-3, #DF84EF) 89.42%, var(--White, #FFF) 100%);
    --gradient3-purple: linear-gradient(180deg, var(--Darkest-Purple, #1D043A) 66%, var(--Medium-purple-4, #BD8AF7) 89.42%, var(--White, #FFF) 100%);
    --gradient-button: linear-gradient(95deg, var(--White, #FFF) 0%, var(--Medium-purple-4, #BD8AF7) 7%, var(--Darkest-Purple, #1D043A) 55%);

    --buttontext: 400 1.375rem "Urbanist", sans-serif;
    --body1: 300 1.375rem "Urbanist", sans-serif;
    --body2-extralight: 200 1.25rem "Manrope", sans-serif;
    --body2-smaller: 200 1rem "Manrope", sans-serif;
}

a{
    text-decoration:none;
}

h1{
    font: 400 3rem "Urbanist", sans-serif;
}

h2{
    font: 700 1.5rem "Manrope", sans-serif;
}

.buttonText{
    font-family: Urbanist;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    color: var(--White);
}

button{
    display: flex;
    height: 3.75rem;
    padding: 1.5rem 2.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    white-space:nowrap;

    border-radius: 0.625rem;
    border: 2px solid #FFF;
    background: var(--gradient-button);

    transition: transform 0.3s ease;
}

button:hover{
    transform: scale(1.05);
}

img{
    object-fit:cover;
}

.avatar-ring {
  width: 15rem;
  height: 15rem;
  padding: 2px;
  border-radius: 50%;
  background: var(--Bright-Blue-2);
  align-self: center;
  justify-self:center;
  object-fit: cover;
  display: block;
  flex-shrink:2;
  aspect-ratio: 1/1;
}

.logo{
    height: 6rem;
    padding: 10px 0px;
}

strong{
    font-weight:700;
}


/*HEADER*/
/*Navigation Bar*/
nav{
    display: flex;
    max-width: calc(100vw - (100vw - 100%));
    height: 4.6875rem;
    padding: 1.25rem clamp(50px, 3.75rem, 3.75rem);
    justify-content: space-between;
    align-items: center;
    z-index:100;

    background: var(--Darkest-Purple, #1D043A);
}

.navDropdown1{
    display: none;
}

@media screen and (max-width:800px){
    .navDropdown1{
    display: flex;
    position:absolute;
    width: calc(100vw - (100vw - 100%));
    padding: 1.25rem 3.75rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.875rem;
    z-index:100;

    background: var(--Darkest-Purple, #1D043A);
    }

    .hidden {
    display: none !important;
    }
}

    .headerText{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 3.125rem;
    }

        .headerText a{
            color: var(--White, #FFF);
            text-align: center;
        }

        #packagesNav:hover, #contactNav:hover, a[href^="tel"]:hover, a[href^="tel"]:active{
            color: var(--Bright-Blue-2);
            transition: 0.3s ease-in-out;
        }

        #processNav:hover, a[href^="mailto"]:hover, a[href^="mailto"]:active{
            color: var(--medium-purple-3);
            transition: 0.3s ease-in-out;
        }

        #homeNav:hover, #featuredNav:hover{
            color: var(--Medium-purple-4);
            transition: 0.3s ease-in-out;
        }

    #hamburgerMenu{
        display:none;
    }

@media screen and (max-width:800px){
    .headerText{
        display:none;
    }
    
    #hamburgerMenu{
        display:block;
        width: 3.125rem;
        height: 2.0625rem;
        aspect-ratio: 50/33;
        fill: var(--White, #FFF);
        flex-shrink:0;
    }
}

@media screen and (max-width:600px){
    nav{
        padding: 1.25rem clamp(5%, 5%, 3.75rem);
    }
}

/*Hero*/
.heroContainer {
    position: relative; /*Needed for blending*/
    width: calc(100vw - (100vw - 100%));
    height: 31.25rem;
    overflow: hidden;
}

.heroContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-hero);/* Gradient overlay */
    z-index: 1; /* Ensure it is above the image */
}

.heroContainerHome{
    position: relative; /*Needed for blending*/
    width: calc(100vw - (100vw - 100%));
    height: 31.25rem;
    overflow: hidden;
}

.heroContainerHome::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-hero-home);/* Gradient overlay */
    z-index: 1; /* Ensure it is above the image */
}

  .hero{
    width: calc(100vw - (100vw - 100%));
    height: 31.25rem;
  }

/*MAIN*/
/*Sections*/
.section1A{
    color: var(--Bright-Blue-2, #70D7FE);
    background: var(--gradient-2---blue, linear-gradient(180deg, var(--Darkest-Purple, #1D043A) 66%, var(--Bright-Blue-2, #70D7FE) 89.42%, var(--White, #FFF) 100%));
    position: relative; /*needed for proper blending of .package*/
    isolation: isolate; /*needed for proper blending of .package*/
}

    .package{
        display: flex;
        width: clamp(200px, 24.0625rem, 80vw);
        padding: clamp(50px, 3.125rem, 3.125rem);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: clamp(50px, 3.125rem, 3.125rem);

        border-radius: 1.875rem;
        /*background colour is applied to pseudo-element*/
        position: relative; /* Ensures the pseudo-element is positioned relative to this element */
    }

    .package::before {
        content: ""; /* Required for the pseudo-element */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--Bright-Blue-2, #70D7FE);
        border-radius: inherit; /* Match the border-radius of the parent */
        mix-blend-mode: screen; /* Apply blend mode to the background */
        z-index: -1; /* Position it below the content */
    }

        .package-intro{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: clamp(25px, 1.5625rem, 1.5625rem);
            align-self: stretch;
        }

            .package-intro h2, .package-intro p{
                text-align: center;
            }

        .package-included{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 0.625rem;
        }

            .package-included-item{
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                gap: clamp(25px, 1.5625rem, 1.5625rem);
            }

            @media screen and (max-width: 600px){
                .package-included-item svg{
                    flex-shrink:auto;
                }
            }

                .package-included-item svg{
                    width: 1.875rem;
                    height: 1.875rem;
                    aspect-ratio: 1/1;
                    flex-shrink:0;

                    fill: var(--Darkest-Purple, #1D043A);
                }

.section1B{
    color: var(--medium-purple-3);
    background: var(--gradient2-purple, linear-gradient(180deg, var(--Darkest-Purple, #1D043A) 66%, var(--medium-purple-3, #DF84EF) 89.42%, var(--White, #FFF) 100%));
    position: relative; /*needed for proper blending of .stage*/
    isolation: isolate; /*needed for proper blending of .stage*/
}

    .stage{
        box-sizing: border-box;
        display: flex;
        width: 17.625rem;
        height: 17.625rem;

        padding: 4.6875rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5625rem;
        aspect-ratio: 1/1;

        font: var(--body2-smaller);
        border-radius: 9.375rem;
        /*background colour is applied to pseudo-element*/
        text-align: center;
        position: relative; /* Ensures the pseudo-element is positioned relative to this element */
    }

    .stage::before {
        content: ""; /* Required for the pseudo-element */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--medium-purple-3, #DF84EF);
        border-radius: inherit; /* Match the border-radius of the parent */
        mix-blend-mode: screen; /* Apply blend mode to the background */
        z-index: -1; /* Position it below the content */
    }

        .processIcon{
            width: 4.6875rem;
            height: 4.6875rem;
            flex-shrink: 0;
            aspect-ratio: 1/1;

            fill: var(--Darkest-Purple, #1D043A);
        }

        .stage-description{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            align-self: stretch;
        }

.section1C{
    color: var(--Medium-purple-4);
    background: var(--gradient3-purple, linear-gradient(180deg, var(--Darkest-Purple, #1D043A) 66%, var(--Medium-purple-4, #BD8AF7) 89.42%, var(--White, #FFF) 100%));
    position: relative; /*needed for proper blending of portfolio items*/
    isolation: isolate; /*needed for proper blending of portfolio items*/
}

.section1{
    display: flex;
    padding: clamp(50px, 6.25rem, 6.25rem) clamp(50px, 10%, 7.5rem);
    flex-direction: column;
    align-items: center;
    gap: clamp(50px, 4.6875rem, 4.6875rem);
}

@media screen and (max-width:400px){
    .section1{
        padding: clamp(50px, 6.25rem, 6.25rem) 5% !important;
    }
}

    .section1-header{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.75rem;
    }

        .section1-header h1{
            text-align: center;
        }

        .section1-header p{
            font: var(--body1);

            color: var(--White, #FFF);
            text-align: center;
        }

        #disclaimer1{
            font: var(--body2-smaller);
            color: var(--Darkest-Purple);
            text-align:center;
            max-width: 700px;
            margin-top:-1.87rem;
        }

        #featured .translateY:nth-child(2) { 
            transform: translateY(-97%); 
            box-shadow: 0px 0px 15px 0px var(--Darkest-Purple);
        }

        #featured .translateY:nth-child(3) { 
            transform: translateY(-194%); 
            box-shadow: 0px 0px 15px 0px var(--Darkest-Purple);
        }

        /*#featured .translateY:nth-child(2) { transform: translateY(-97%); box-shadow: 0px 0px 15px 0px var(--Darkest-Purple);}*/
        /*#featured .translateY:nth-child(3) { transform: translateY(-194%); box-shadow: 0px 0px 15px 0px var(--Darkest-Purple);}*/

        .workSample{
            display: flex;
            width: 78.4375rem;
            max-width: 79.375rem;
            height: 18.75rem;
            padding: 3.125rem 3.125rem 3.125rem 0;
            align-items: center;
            gap: 3.125rem;
            overflow:hidden;

            border-radius: 1.875rem;

            /*background colour is applied to pseudo-element*/
            position: relative; /* Ensures the pseudo-element is positioned relative to this element */
        }

        .workSample::before {
            content: ""; /* Required for the pseudo-element */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--Medium-purple-4, #BD8AF7);
            border-radius: inherit; /* Match the border-radius of the parent */
            mix-blend-mode:screen; /* Apply blend mode to the background */
            z-index: -1; /* Position it below the content */
        }

            .workSample-left{
                width: 45%;
                max-width: 48.4375rem;
                min-height:18.75rem;
                aspect-ratio: 257/193;

                background: var(--White);
            }

            .workSample-right{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                align-self: stretch;
                gap: clamp(25px, 1.5625rem, 1.5625rem);
            }

                .workSample-right-blurb{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: clamp(25px, 1.5625rem, 1.5625rem);
                }

                    .invisible1{
                        visibility:none;
                    }
        
        @media screen and (max-width: 900px){
            .workSample{
                flex-direction: column;
                height: auto;
                min-height: 18.75rem;
                width: clamp(200px, 37.22rem, 80vw);
                padding: 0 0 0 0;
                gap: clamp(50px, 3.125rem, 3.125rem);
            }

                .workSample-left{
                    min-height: 65%;
                    width: 100%;
                }

                .workSample-right{
                    flex-direction:row;
                    padding: 0 3.125rem 3.125rem 3.125rem;
                    justify-content: space-between;
                }

                    .workSample-right-blurb{
                        gap: 1rem;
                    }

                    .workSample button{
                        align-self:flex-end;
                    }
        }

        @media screen and (max-width: 600px){
                .workSample-right{
                    flex-direction: column;
                }

                    .workSample button{
                        align-self: center;
                    }
        }

    .section1-grid{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        align-self: stretch;
        gap: 3rem;
        
        font: var(--body2-extralight);
        color: var(--Darkest-Purple);
    }

@media screen and (max-width:600px){
    .section1-grid{
        justify-content:center;
        gap: clamp(25px, 2vw, 3rem) !important;
    }
}

.section2{
    display: flex;
    width: calc(100vw - (100vw - 100%));
    justify-content: space-between;
    align-items: center;

    background: var(--White, #FFF);
    color: var(--Darkest-Purple, #1D043A);
}

    .section2 img:not(.avatar-ring){
        width: 37.625rem;
        max-width: 40%;
        align-self: stretch;
    }

    .section2A-right{
        display: flex;
        padding: clamp(50px, 6.25rem, 6.25rem) clamp(50px, 7.5rem, 7.5rem) clamp(50px, 6.25rem, 6.25rem) clamp(50px, 10rem, 10rem);
        
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(50px, 3.125rem, 3.125rem);
        align-self: stretch;
    }

        .section2A-right p,.section2A-right ul{
            font: var(--body1);
            color: black;
        }

@media screen and (max-width: 1300px){
    .section2BwProfile{
        flex-direction:column;
    }
}

    .section2B-left{
        display: flex;
        padding: clamp(50px, 6.25rem, 6.25rem) clamp(50px, 7.5rem, 7.5rem) clamp(50px, 6.25rem, 6.25rem) clamp(50px, 10rem, 10rem);
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(50px, 3.125rem, 3.125rem);
        align-self: stretch;
    }

        #profile{
            display: flex;
            flex-direction: row;
            align-items:flex-start;
            gap: clamp(50px, 6.25rem, 6.25rem);   
        }

@media screen and (max-width: 800px){
        #profile{
            flex-direction:column;
        }
}

        #profile h1{
            align-self: stretch;
        }

        .section2B-left p,.section2A-right ul{
            font: var(--body1);
            color: black;
        }

    .section2B-right{
        display: flex;
        padding: clamp(50px, 6.25rem, 6.25rem) clamp(50px, 7.5rem, 7.5rem) clamp(50px, 6.25rem, 6.25rem) clamp(50px, 7.5rem, 7.5rem);

        flex-direction: column;
        align-items: flex-start;
        gap: clamp(50px, 3.125rem, 3.125rem);
        align-self: stretch;

        background: var(--Darkest-Purple, #1D043A);
    }

        #section2B-right-h1Version2{
            width: auto;
        }

        .section2B-right h1{
            width: 14.563rem;

            color: var(--medium-purple-3, #DF84EF);
        }

        .section2B-right p{
            align-self: stretch;
            font: var(--body1);
            color: var(--White, #FFF);
        }

@media screen and (max-width:1020px){
    .section2{
        flex-direction: column;
    }

    .section2A{
        flex-direction:column-reverse;
    }

        .section2 img:not(.avatar-ring){
            width: calc(100vw - (100vw - 100%));
            max-width: 100%;
        }

        .section2A-right, .section2B-left, .section2B-right{
            padding: clamp(50px, 80%, 6.25rem) clamp(50px, 80%, 7.5rem) !important;
        }
}

@media screen and (max-width:600px){
        .section2A-right, .section2B-left, .section2B-right{
            padding: clamp(5%, 10%, 6.25rem) clamp(5%, 10%, 7.5rem) !important;
        }
}

@media screen and (max-width:400px){
            #myEmail{
                font: var(--body2-smaller);
            }
}


            a[href^="tel"] ,a[href^="mailto"] {
            color: inherit;
            }

/*FOOTER*/
footer{
    display: flex;
    height: 4.6875rem;
    padding: 1.25rem 3.75rem;
    justify-content: center;
    align-items: center;
    gap: clamp(50px, 3.125rem, 3.125rem);

    border-top: 3px solid var(--White, #FFF);
    background: var(--Darkest-Purple, #1D043A);
}

footer p{
    color: var(--White, #FFF);
    text-align: center;
    font: var(--body2-smaller);
}