@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url('./_buttons.css');
@import url('./_nav.css');


/* Breakpoints

1280
1024
900
580/480

@media only screen and (max-width: 1280px) {	
            
}

@media only screen and (max-width: 900px) {	
            
}

@media only screen and (max-width:1024px) {	
            
}

@media only screen and (max-width:480px) {	
            
}

*/


:root {
    --body-font: "Inter", serif;

    --dark: #343840;
    --darker: #2A2D33;
    --lighter: #f2f2f2;
    --light: #E0E0E0;
    --dark-alpha: rgba(52,56,64,0.5);
    --light-alpha: rgba(224,224,224,0.5);
    --accent: #009dff;
    --blue: #0071E3;

    --page-margin: 20px;
    --title-margin: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    font-family: var(--body-font);
    font-optical-sizing: auto;
    font-weight: 300;
    width: 100%;
    height: 100%;
    color: var(--dark);
    background: var(--light);
    overflow-x: hidden;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
    overscroll-behavior: none;
}

.accent { color: var(--accent); }
.blue { color: var(--blue); }

/* Implements mask effect for line SplitTypes */
.line { 
    overflow: hidden !important;

    span {
        display: inline-block;
        transform: translateY(0%);
    }
} 
.char { 
    overflow: hidden !important;

    span {
        display: inline-block;
        transform: translateY(0%);
    }
} 

#load-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--lighter);
    opacity: 1;
    transition: opacity 0.2s ease-out;
    z-index: 20;

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

    /*

    svg {
        width: 20vw;

        .text {
            fill: var(--dark);
        }
    }
*/
    #dotlottie-canvas {
        opacity: 1;
    }

}


#hero {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Scale the image to fit the container */
        height: 100%;
        object-fit: cover;

        &.bg-img-aerial {
            /*
            mask: url(#cursorMask);
            -webkit-mask: url(#cursorMask);
            */

            mask-image: radial-gradient(
                circle at 90% 80%,
                rgba(0,0,0,1) 0%,
                rgba(255, 255, 255, 0.1) 40%
            );
            -webkit-mask-size: 100% 100%;
            mask-repeat: no-repeat;
        }
    }
    /*
    svg {
        position: absolute;
        top: 0;
        left: 0;
    }
    #maskCircle {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none; 
    }
    #maskLayer2 {
        position: absolute;
        top: 200px;
        left: 400px;
    }
    */

    .hero-container {
        z-index: 1;
        width: calc(100% - (16 * var(--page-margin)));
        font-size: clamp(2.25rem, 5vw, 3rem); 
        font-weight: 300;


        .hero-lrg {
            font-size: clamp(2.25rem, 7vw, 9rem); 
            font-weight: 800;
            margin-bottom: 10vh;
            transition: color 0.3s ease-in-out;
            overflow: hidden;

            span {
                display: block;

            }
        }

        .group {
            display: block;  
        }

        #swap_wrapper {
            font-weight: 500;
        }
        

        @media only screen and (max-width: 1024px) {	
            font-size: clamp(2.25rem, 5vw, 2rem); 

            .hero-lrg {
                font-size: clamp(2.25rem, 10vw, 5rem); 
                font-weight: 800;
                margin-bottom: 10vh;
            }

            width: calc(100% - (4 * var(--page-margin)));
        }

        @media only screen and (max-width: 1024px) and (orientation: portrait) {	
            .hero-lrg {
                font-size: clamp(2.25rem, 10vw, 8rem); 
                font-weight: 800;
                margin-bottom: 10vh;
            }
        }

        @media only screen and (max-width:768px) {	
            font-size: clamp(1.5rem, 4vw, 2rem); 
        }

        @media only screen and (max-width: 480px) {	
            width: calc(100% - (2 * var(--page-margin)));
            font-size: 1.125rem; 
            
            .hero-lrg {
                font-size: 3rem;
                margin-bottom: 4vh;
            }
        }
    }
}

section {
    position: relative;
    width: 100%;
    height: fit-content;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.25s ease-in-out;

    .section-title {
        position: absolute;
        top: calc(4 * var(--page-margin));
        left: calc(4 * var(--page-margin));
        font-size: 1rem;
        font-weight: 300;
        z-index: 1;

        .slash {
            margin-left: var(--title-margin);
            margin-right: var(--title-margin);

            @media only screen and (max-width: 900px) {	
                margin-left: calc(var(--title-margin) / 2);
                margin-right: calc(var(--title-margin) / 4);
            }
        }

        @media only screen and (max-width:768px) {	
            font-size: 0.875rem;
        }

        @media only screen and (max-width: 480px) {	
            top: calc(2 * var(--page-margin));
            left: calc(2 * var(--page-margin));
            font-size: 0.875rem;
        }
    }

    .back-container {
        position: absolute;
        left: var(--page-margin);
        height: calc(100% - calc(2 * var(--page-margin)));
        width: calc(100% - calc(2 * var(--page-margin)));
        display: flex;
        justify-content: center;
        align-items: center;
        
        .content-container {
            position: relative;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;    

            .content-wrapper {
                position: relative;
                width: 100%;
                max-width: 1200px;
                display: flex;
                height: fit-content;
                left: calc(1 * var(--page-margin));

                @media only screen and (max-width:1024px) {	
                    width: calc(100% - (6 * var(--page-margin)));
                    max-width: 944px;
                    flex-direction: column;
                }

                .service-wrapper {
                    flex: 1;

                    .service-wrapper-links {
                        position: relative;
                        width: fit-content;


                        .service-link {
                            position: relative;
                            display: block;
                            text-decoration: none;
                            font-size: 1rem;
                            font-weight: 300;
                            line-height: 2rem;
                            padding: 0 96px 0 12px;
                            z-index: 0;
                            transform-origin: top;
                            overflow: hidden;
                            transition: color 0.2s ease-in-out;
                        
                            --trans-origin: bottom;
                            --trans-origin-hover: top;
                        
                            &:before {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                z-index: -1;
                                width: 100%;
                                height: 100%;
                                transform-origin: var(--trans-origin);
                                transform: scaleY(0);
                                transition: transform 0.2s ease-in-out;
                            }
                        
                            .slash {
                                margin-left: var(--title-margin);
                                margin-right: var(--title-margin);
                        
                                @media only screen and (max-width: 900px) {	
                                    margin-left: calc(var(--title-margin) / 2);
                                    margin-right: calc(var(--title-margin) / 4);
                                }
                            }
                        
                            .service-name {
                                font-weight: 600;
                            }

                            &[active] {                                    
                                &:before {
                                    transform-origin: var(--trans-origin-hover);
                                    transform: scaleY(1);
                                }
                            }
                        
                        
                            @media (hover: hover) {
                                &:hover {                                    
                                    &:before {
                                        transform-origin: var(--trans-origin-hover);
                                        transform: scaleY(1);
                                    }
                                }
                            }
                        }
                    }
                }

                .description-wrapper {
                    flex: 1;
                    position: relative;
                    font-size: 1.25rem;
                    font-weight: 300;
                    line-height: 2rem;
                    display: grid;
                    
                    .description {
                        grid-column: 1 / -1; /* Ensures all descriptions are in the same grid position */
                        grid-row: 1 / -1;
                        height: auto;

                        @media only screen and (max-width:1024px) {	
                            padding-top: 80px;
                        }

                        @media only screen and (max-width: 1024px) and (orientation: landscape) {	
                            padding-top: 40px;
                        }
                    }

                    @media only screen and (max-width: 1024px) and (orientation: landscape) {	
                        font-size: 1rem;
                        line-height: 1.75rem;
                    }
                    
                }
            }
        }

        .service-name-vertical {
            position: relative;
            width: 40px;
            height: calc(100% - (4 * var(--page-margin)));
            height: 100%;
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--dark);
            writing-mode: vertical-lr;
            text-orientation:sideways;
            transform: rotate(180deg);
            display: flex;
            align-items: center;
            transition: color 0.35s ease-in-out;
            overflow: hidden;

            span {
                position: absolute;
                top: calc(2 * var(--page-margin));
            }

            @media only screen and (max-width:768px) {	
                font-size: 1rem;
            }
        }


        @media only screen and (max-width: 480px) {	
            position: relative;
            left: 0;

            .content-container {
                .content-wrapper {
                    width: 100%;
                    left: 0;

                    .service-wrapper {
                        padding: var(--page-margin);

                        .service-wrapper-links {

                            .service-link {
                                padding: 0;
                                font-size: 0.75rem;
                                line-height: 2rem;

                                .slash {
                                    margin-left: 0;
                                    margin-right: 0;
                            
                                }
                            }
                        }
                    }

                    .description-wrapper {
                        display: none;
                    }
                }
            }

            .service-name-vertical {
                display: none;
            }
        }
    }

    .front-container {
        position: absolute;
        left: var(--page-margin);
        height: calc(100% - calc(2 * var(--page-margin)));
        width: calc(100% - calc(4 * var(--page-margin)));
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        overflow: visible;
        transition: background 0.3s ease-in-out;

        .text-wrapper {
            position: absolute;
            left: calc(50% + var(--page-margin));
            transform: translateX(-50%);
            width: 100%;
            max-width: 1200px;
            font-size: 2rem;
            font-weight: 300;
            line-height: 3rem;
            overflow: hidden;
            visibility: visible;

            @media only screen and (max-width:1024px) {	
                width: calc(100% - (4 * var(--page-margin)));
                max-width: 944px;
            }

            @media only screen and (max-width: 1024px) and (orientation: landscape) {	
                font-size: 1.5rem;
                line-height: 2rem;
            }

            @media only screen and (max-width:768px) {	
                font-size: 1.25rem;
                line-height: 2rem;
            }

            @media only screen and (max-width:480px) {	
                transform: translateX(0);
            }
        }

        &.closed {
            cursor: pointer;

            .text-wrapper {
                visibility: hidden;
            }

            @media (hover: hover) {
                &:hover {
                    background: var(--blue);
                }
            }
        }

        

        @media only screen and (max-width: 480px) {	
            position: relative;
            width: calc(100% - calc(2 * var(--page-margin)));
            left: 0;
            /*top: calc(2 * var(--page-margin));*/
            height: fit-content;
            padding: var(--page-margin);
            margin-top: calc(8 * var(--page-margin));

            .text-wrapper {
                position: relative;
                left: 0;
                width: 100%;
                font-size: 1.25rem;
                line-height: 1.75rem;
            }
        }
    }

    /* For Industries & Contact sections only */
    .inner-container {
        position: relative;
        width: calc(100% - (4 * var(--page-margin)));
        height: calc(100% - (4 * var(--page-margin)));
        display: flex;
        flex-direction: row;
        

        .content-container {
            flex: 1;
            display: flex;
            align-items: start;
            width: 100%;
                
            .text-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding-top: 120px;

                .content-wrapper {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    position: relative;
                    left: var(--page-margin);
                    width: calc(100% - (2 * var(--page-margin)));
                    max-width: 1200px;

                    .text-wrapper {
                        position: relative;
                        left: 0;
                        width: 50%;
                        font-size: 2rem;
                        font-weight: 300;
                        line-height: 3rem;;
                        color: var(--light);

                        @media only screen and (max-width: 1024px) and (orientation: landscape) {	
                            font-size: 1.5rem;
                            line-height: 2rem;
                        }

                        @media only screen and (max-width:768px) {	
                            font-size: 1.25rem;
                            line-height: 2rem;
                        }
                    }
                }
            }
        }
        
        .service-name-vertical {
            position: relative;
            width: 40px;
            height: calc(100% - (5 * var(--page-margin)));

            font-size: 1.25rem;
            font-weight: 500;
            color: var(--light);
            writing-mode: vertical-lr;
            text-orientation: sideways;
            transform: rotate(180deg);
            display: flex;
            align-items: center;
            transition: color 0.35s ease-in-out;

            @media only screen and (max-width:768px) {	
                font-size: 1rem;
            }
        }

        @media only screen and (max-width: 480px) {	
            width: calc(100% - (2 * var(--page-margin)));
            padding-top: 60px;

            .content-container {
                    
                .text-container {
    
                    .content-wrapper {
                        left: 0;

                        .text-wrapper {
                            width: 100%;
                            font-size: 1.25rem;
                            line-height: 1.75rem;
                        }
                    }
                }
            }

            .service-name-vertical {
                display: none;
            }
        }
    }

    &.light {
        background: var(--light);

        .section-title {
            color: var(--dark);
        }

        .back-container {  
            .content-container {
                .service-link {
                    color: var(--dark);
                
                    &:before {
                        content: '';
                        background: var(--dark);
                    }

                    &[active] {
                        color: var(--light);
                    }
                
                    @media (hover: hover) {
                        &:hover, &[active] {
                            color: var(--light);
                        }
                    }
                }

                
                .description-wrapper {
                    color: var(--dark);
                }
            }
    
            .service-name-vertical {
                color: var(--dark);
            }
        }

        .front-container {
            background: var(--lighter);

            .text-wrapper {
                color: var(--dark);
            }
        }
    }

    &.dark {
        background: var(--darker);

        .section-title {
            color: var(--light);
        }

        .back-container {  
            .content-container {
                .service-link {
                    color: var(--light);
                
                    &:before {
                        content: '';
                        background: var(--light);
                    }

                    &[active] {
                        color: var(--dark);
                    }
                
                    @media (hover: hover) {
                        &:hover, &[active] {
                            color: var(--dark);
                        }
                    }
                }

                .description-wrapper {
                    color: var(--light);
                }
            }
    
            .service-name-vertical {
                color: var(--light);
            }
        }

        .front-container {
            background: var(--dark);

            .text-wrapper {
                color: var(--light);
            }
        }
    }

    &.hovered {
        background: var(--blue);

        .back-container {
            .service-name-vertical {
                color: var(--light);
            }
        }
    }

    @media only screen and (max-width: 480px) {	
        flex-direction: column-reverse;
        height: fit-content;
        padding-bottom: 60px;

        .section-title {
            padding-top: 60px;
        }
    }
}


#section-hero {
    visibility: hidden;
    pointer-events: none;



    @media only screen and (max-width: 480px) {	
        height: 100vh;
    }
}


#section-industries {
    .inner-container {

        .content-container {
                
            .text-container {

                .content-wrapper {

                    .list-wrapper {
                        padding-top: 60px;
                        padding-bottom: 60px;


                        .industry {
                            position: relative;
                            display: flex;
                            align-items: center;
                            border-top: thin dashed var(--light);
                            font-size: 1rem;
                            font-weight: 500;
                            color: var(--light);
                            line-height: 3rem;
                            padding-right: 16px;
                            cursor: default;
                            z-index: 0;
                            transition: color 0.2s ease-in-out;

                            --trans-origin: bottom;
                            --trans-origin-hover: top;

                            &:before {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                z-index: -1;
                                width: 100%;
                                height: 100%;
                                transform-origin: var(--trans-origin);
                                transform: scaleY(0);
                                transition: transform 0.2s ease-in-out;
                                background: var(--light);
                            }
                        
                            &:last-child {
                                border-bottom: thin dashed var(--light);
                            }

                            svg {
                                height: 24px;
                                position: relative;
                                top: 8px;
                                left: 8px;
                                margin-right: 24px;
                                transition: fill 0.2s ease-in-out;
                                transform-origin: center center;

                                fill: var(--light);
                            }

                            @media (hover: hover) {
                                &:hover {      
                                    color: var(--dark);

                                    &:before {
                                        transform-origin: var(--trans-origin-hover);
                                        transform: scaleY(1);
                                    }

                                    svg {
                                        fill: var(--dark);
                                    }
                                }
                            }
                        }

                        @media only screen and (max-width:768px) {	
                            .industry {
                                font-size: 0.875rem;

                                svg {
                                    top: 7px;
                                    height: 20px;
                                }
                            }

                            
                        }

                        @media only screen and (max-width: 480px) {	
                            width: 100%;

                            .industry {
                                width: 100%;
                                font-size: 0.75rem;
                                line-height: 2.5rem;
                                padding-right: 16px;
    
                                svg {
                                    height: 16px;
                                    position: relative;
                                    top: 5px;                                    
                                }
                            }
                        }
                    }
                }
            }
        }

        .service-name-vertical {
            align-self: center;
        }
    }
}

#spline-globe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  

    display: none;

    @media only screen and (max-width: 480px) {	
        display: none;
    }
}

.slogan-container {
    position: absolute;
    top: calc(4 * var(--page-margin));
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;

    .slogan-wrapper {   
        width: 100%;
        max-width: 1200px;

        .slogan {
            font-size: 4em;
            color: var(--light);
            font-weight: 600;
        }

        &:first-child {
            display: none;
        }
    }

    @media only screen and (max-width: 1024px) {	
        left: calc( 2 * var(--page-margin));
        width: calc(100% - (4 * var(--page-margin)));
    }

    @media only screen and (max-width:768px) {	
        top: calc(6 * var(--page-margin));

        .slogan-wrapper {
            .slogan {
                font-size: 3rem;
            }
        }
    }

    @media only screen and (max-width: 480px) {	
        top: calc(6 * var(--page-margin));
        left: var(--page-margin);
        flex-direction: column;
        width: calc(100% - (2 * var(--page-margin)));

        .slogan-wrapper {

            .slogan {
                font-size: 2em;
            }

            &:first-child {
                display: block;
            }

            &:last-child {
                padding-top: calc(1 * var(--page-margin));
            }
        }
    }
}

#section-map {
    position: relative;
    height: auto !important;
    min-height: 100vh !important;

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
    }
    svg {
        position: relative;
        width: 100%;
        height: 100%;

        #slogan-text {
            font-family: var(--body-font);
            font-weight: 600;
            font-size: 240px;
            fill: white;

            /*filter: blur(1em);*/
        }
    }



    #path {
        stroke: var(--blue);
        opacity: 1;
        stroke-width: 0.5em;

        @media only screen and (max-width: 480px) {	
            stroke-width: 1.5em;
        }
    }

    #circle {
        fill: var(--blue);
        opacity: 1;
        r: 10;
        cursor: pointer;

        @media only screen and (max-width: 480px) {	
            r: 40;

        }
    }

    #circle-pulse {
        fill: var(--blue);
    }


    #pin {
        fill: var(--blue);
        transform-origin: center;
        transform: scale(1);

        @media only screen and (max-width: 480px) {	
            transform: scale(1);
        }
    }

    
    @media only screen and (max-width: 480px) {	
        display: none;
    }
    
}

#section-contact {
    height: 80vh !important;
    max-height: 80vh !important;
    min-height: unset;
    overflow: hidden;
    /*background: var(--blue);*/


    .inner-container {
        visibility: hidden;
        
        .content-container {
            justify-content: center;
            align-items: center;  
 
            .text-container {
      
                padding-top: 0;

                .content-wrapper {
 

                    .text-wrapper {
                        width: 100%;

                        .line:last-child {
                            margin-top: 0px;

                            @media only screen and (max-width: 480px) {	
                                margin-top: 12px;
                            }
                        }
                    }
                }
            }
        }
        .service-name-vertical {
            position: relative;
            width: 40px;
            height: calc(100% - (1 * var(--page-margin)));
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--light);
            writing-mode: vertical-lr;
            text-orientation: sideways;
            transform: rotate(180deg);
            display: flex;
            align-items: center;
            transition: color 0.35s ease-in-out;

            @media only screen and (max-width:768px) {	
                font-size: 1rem;
            }
        }
    }

    .expander {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        background: var(--blue);
        transform-origin: center;
    }

    @media only screen and (max-width: 480px) {	
        background: var(--blue);

        .inner-container {
            visibility: visible;

            .content-container {
                justify-content: center;
                align-items: center;  
     
                .text-container {
                    align-self: end;

                    .content-wrapper {
    
                        .text-wrapper {
                            width: 100%;
    
                            .line:last-child {
                                margin-top: 0px;
    
                                @media only screen and (max-width: 480px) {	
                                    margin-top: 12px;
                                }
                            }
                        }
                    }
                }
            }
    
            .service-name-vertical {
                display: none;
            }
        }

        .expander {
            display: none;
        }     
    }
}