/*
TODO: add logo to mobile header
TODO: add socials to menu and mobile menu
TODO: GET STARTED NOW! on process ending

*/


/** STYLES BEGIN **/
:root {
    --primary-color: #f366ba;
    --secondary-color: #36C9C6;
    --aux-color:#04E762;
    --accent-color: #4D5382;
    --accent-light: #EDD4B2;
    --text-light: #FFFFFF;
    --text-dark: #222222;

    


}

/*theme 1 
:root {
    --background-color: #faeee7;
    --headline-color: #33272a;
    --paragraph-color: #594a4e;
    --button-color: #ff8ba7;
    --button-text: #33272a;

    --stroke-color: #33272a;
    --main-color: #fffffe;
    --highlight-color:#ff8ba7;
    --secondary-color:#ffc6c7;
    --tertiary-color:#c3f0ca;
    --tertiary-color-light:rgb(195, 240, 202, 0.4);
}
/*theme 1*/

/*theme 2 */
:root {
    --background-color: #eff0f3;
    --headline-color: #0d0d0d;
    --paragraph-color: #222222;
    --button-color: #d9376e;
    --button-color: #f366ba;
    --button-color-shade: #6d1c37;
    --button-text: #0d0d0d;

    --stroke-color: #0d0d0d;
    --main-color: #eff0f3;
    --light-color:#E6EBE0;
    --dark-color:#222222;
    --highlight-color:#36C9C6;
    --highlight-color:#677CEB;
    --secondary-color: #36C9C6;
    --secondary-color:#343E76;
    --secondary-light: rgba(52, 62, 118, 0.2);
    --tertiary-color:#F4F1BB;
    --tertiary-color-light:rgba(100, 55, 23, 0.4);

    --borderangle: 45deg;
    --borderopacity: 1;

    --background-color-alt:#FBD1EA;
}
/*theme 2 */

/*theme 3 
:root {
    --background-color: #fef6e4;
    --headline-color: #001858;
    --paragraph-color: #172c66;
    --button-color: #f582ae;
    --button-text: #001858;

    --stroke-color: #001858;
    --main-color: #f3d2c1;
    --highlight-color:#fef6e4;
    --secondary-color:#8bd3dd;
    --tertiary-color:#f582ae;
    --tertiary-color-light:rgb(245, 130, 174, 0.4);
}
/*theme 3 */

html {
    scroll-behavior: smooth;
}

body {
    background-color:#fff;
}

body, div {
    font-size: 18px;
    line-height:18px;
    /*background-color:var(--light-color);*/
}

h1, h2, h3, h4, h5, h6, nav {

  font-family: 'Taviraj', 'GeorgiaPre', 'Georgia Pro', Georgia, serif;
font-weight: 600;
letter-spacing:0em;

}

@media (min-width: 1040px) {
    h1, h2, h3, h4, h5, h6, nav {

        font-family: 'Taviraj', 'GeorgiaPre', 'Georgia Pro', Georgia, serif;
      font-weight: 600;
      letter-spacing:0.05em;
      
      }
}

html, body, div, p, a, ul, li, code
{
    font-family: 'Taviraj', 'GeorgiaPre', 'Georgia Pro', Georgia, serif;
    font-weight: 400;
}

body {
    width:100%;
    
}

h1, h2, h3, h4, h5, h6 {
    color: var(--headline-color);
}

body, div, p {
    color: var(--paragraph-color);
}

        h1 {
            font-size: 2em;
            font-weight:400;
            text-transform:capitalize;
        }
        h2 {
            font-size: 1.6em;
            font-weight:400;
        }
        h3 {
            font-size: 1.3em;
            font-weight:400;
        }
        h4 {
            font-size: 1em;
            font-weight:400;
        }
        h5 {
            font-size: 0.8em;
            font-weight:400;
        }
        h6 {
            font-size: 0.5em;
            font-weight:400;
        }

        @media (min-width: 1040px) {
            h1 {
                font-size: 2.3em;
                font-weight:400;
            }
            h2 {
                font-size: 2em;
                font-weight:400;
            }
            h3 {
                font-size: 1.6em;
                font-weight:400;
            }
            h4 {
                font-size: 1.3em;
                font-weight:400;
            }
            h5 {
                font-size: 1em;
                font-weight:400;
            }
            h6 {
                font-size: 0.8em;
                font-weight:400;
            }
        }

.n-content {
    padding:1em;
    margin:0;

    p {
        margin:0 0 1em;
        padding:0;
        font-size:1.1em;
    }
}

@media (min-width: 1040px) {
    .n-content {
        padding:1em;
        margin:0;

        p {
            margin:0 0 1em;
            padding:0;
            font-size:1.1em;
        }
    }

}
  

header {
    container-type: header / inline-size;
    position:fixed;
    top:0;
    left:0;
    margin:0;
    padding:1em 0;
    width:100%;
    background-color:#f9e6fa;
    background-color:var(--button-color);
    background:#fff;
    z-index:99;
    min-height: 3em;
    transition: all .35s;
    
    a.menu-home {

        background-color:white;
        border-radius:unset;

        img {
            display:inline-block;
            width:auto;
            height:32px;
            margin:0;
            padding:0;
        }
    }

    nav {
        display:flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:flex-start; 
        align-items: flex-start;
        align-content:flex-start;
        font-size:1.3em;
        text-transform:uppercase;
        margin-top:2em;

        a {
            display:block;
            color:tomato;
            margin:6px 0;
            padding: 2px 0;
            text-decoration:none;
        }
    }
}

@media (min-width: 1040px) {
    header {
        container-type: header / inline-size;
        position:fixed;
        top:0;
        left:0;
        margin:0;
        padding:1em 0;
        width:100%;
        background-color:#f9e6fa;
        background-color:var(--button-color);
        background:var(--button-color);
        z-index:99;
        min-height: 3em;
        transition: all .35s;
        
        a.menu-home {

            background-color:unset;
            border-radius:unset;

            img {
                display:none;
            }
        }

        nav {
            display:flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content:center; 
            align-items: flex-start;
            align-content:flex-start;
            font-size:1.3em;
            text-transform:uppercase;
            margin-top:2px;

            a {
                display:block;
                color:red;
                margin:0 1em;
                padding: 0 1em;
                text-decoration:none;
                font-weight:600;

            }
        }
    }
}

.menu-wrapper {
    a {
        color:var(--secondary-color);
        background-color: var(--secondary-light);
        border-radius:3px;
        padding:8px 12px;
        width:100%;
        text-transform:capitalize;
    }

    a.mklink {
        color:var(--button-color);
    }

    button.menu-toggle {
        color:var(--button-color);
    }

    body.menu-open button.menu-toggle {
        color:var(--button-color);
    }
}

/*menu scrolled styles*/
html:not([data-scroll='0']) {
    
    header {

        background-color:#fff;
        
      -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
    }

    .menu-wrapper {
        a {
            color:var(--secondary-color);
            text-transform:capitalize;
        }

        a.mklink {
            color:var(--button-color);
        }
    
        button.menu-toggle {
            color:var(--button-color);
            
        }

        body.menu-open button.menu-toggle {
            color:var(--button-color);
        }
        
      }
    
  }

@media (min-width: 1400px) {
    
    .menu-wrapper {
        a {
            color:var(--button-color);
            color:#fff;
            text-transform:capitalize;

            background-color: unset;
            border-radius:unset;
            padding:4px 12px;
            width:auto;
        }
    
        button.menu-toggle {
            color:var(--button-color);
            color:#fff;
        }
    
        body.menu-open button.menu-toggle {
            color:var(--button-color);
        }
    }

    html:not([data-scroll='0']) {
    
        header {
    
            background-color:var(--button-color);
          -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
        }
    
        .menu-wrapper {
            a {
              color: #fff;
              font-weight:600; /*6-1-2025*/
            }
        
            button.menu-toggle {
                color:#fff;
            }
    
            body.menu-open button.menu-toggle {
                color:var(--button-color);
            }
            
          }
        
      }
}

@media (min-width:1040px) and (max-width:1399px) {
    
    .menu-wrapper {
        a {
            color:var(--button-color);
            color:#fff;
            text-transform:capitalize;
            font-size:0.69em;

            background-color: unset;
            border-radius:unset;
            padding:4px 12px;
            width:auto;
        }
    
        button.menu-toggle {
            color:var(--button-color);
            color:#fff;
        }
    
        body.menu-open button.menu-toggle {
            color:var(--button-color);
        }
    }

    html:not([data-scroll='0']) {
    
        header {
    
            background-color:var(--button-color);
          -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
        }
    
        .menu-wrapper {
            a {
              color: #fff;
              font-weight:600; /*6-1-2025*/
            }
        
            button.menu-toggle {
                color:#fff;
            }
    
            body.menu-open button.menu-toggle {
                color:var(--button-color);
            }
            
          }
        
      }
}


div.nextpage {
    
    width:auto;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content:center; 
    align-items: center;
    align-content:flex-start;
    background-color:transparent;

    a {
        display:block;
        text-align:center;
        text-decoration:none;
        background:var(--tertiary-color-light);
        width:auto;
        font-size:1.4em;
        padding:0.6em 1em;
        color: var(--headline-color);
    }

    a.page-label {
        border-radius:0.5em;
        
    }

    a.page-indicator {
        border-top-left-radius:0;
        border-top-right-radius:0;
        border-bottom-right-radius:0.5em;
        border-bottom-left-radius:0.5em;

    }
}


section.home {
    position:relative;
    overflow:hidden;
    width:100%;
    margin:0;
    padding:4em 0 2em;

    background-color:#fff;

    div.home-bg {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        margin:0;
        padding:0;

        /*
        background-image:url("/assets/images/backgrounds/burn-4.jpg");
        background-position:-185px bottom;
        background-size:cover;
        background-repeat: no-repeat;*/

        #splideHome{
            width:100%;
            height:100%;

            div.splide__track {
                width:100%;
                height:100%;

                ul.splide__list {
                    width:100%;
                    height:100%;

                    li.splide__slide {
                    width:100%;
                    height:100%;

                        div.slide-contents {
                            width:100%;
                            height:100%;
                        }
                    }
                }
            }
        }
    }
}

div.slide-home-a {
    background-image: url("/assets/heros/wou-logo-portrait.webp");
    background-size:contain;
    background-position: center center;
    background-repeat:no-repeat;
}
div.slide-home-b {
    background-image: url("/assets/heros/wou-orig-portrait-sm.webp");
    background-size:contain;
    background-position: center center;
    background-repeat:no-repeat;
    background-color:#fff;
}
div.slide-home-c {
    background-image: url("/assets/images/backgrounds/burn-2a-portrait.jpg");
    background-size:cover;
    background-position: center top;
    background-repeat:no-repeat;
}
div.slide-home-d {
    background-image: url("/assets/images/backgrounds/burn-2b.jpg");
    background-size:cover;
    background-position: -930px 0px;
    background-repeat:no-repeat;
}
div.slide-home-e {
    background-image: url("/assets/images/backgrounds/burn-3.jpg");
    background-size:cover;
    background-position: bottom center;
    background-repeat:no-repeat;
}
div.slide-home-f {
    background-image: url("/assets/images/backgrounds/burn-3a.jpg");
    background-size:cover;
    background-position: -340px bottom;
    background-repeat:no-repeat;
}
div.slide-home-g {
    background-image: url("/assets/images/backgrounds/burn-4.jpg");
    background-size:cover;
    background-position: -200px bottom;
    background-repeat:no-repeat;
}

@media (min-width: 1040px) {
    section.home {
        
        padding:2em 0;

        div.home-bg {

            
            background-position:bottom center;
            background-size:100% auto;
            background-repeat: no-repeat;

            #splideHome{
                width:100%;
                height:100%;
    
                div.splide__track {
                    width:100%;
                    height:100%;
    
                    ul.splide__list {
                        width:100%;
                        height:100%;
    
                        li.splide__slide {
                        width:100%;
                        height:100%;
    
                            div.slide-contents {
                                width:100%;
                                height:100%;
                            }
                        }
                    }
                }
            }
        }
    }


    div.slide-home-a {
        background-image: url("/assets/heros/wou-logo-landscape.webp");
        background-size:cover;
        background-position: center 0px;
        background-repeat:no-repeat;
    }
    div.slide-home-b {
        background-image: url("/assets/heros/wou-orig-landscape.webp");
        background-size:auto;
        background-position: center center;
        background-repeat:no-repeat;
        background-color:#fff;
    }
    div.slide-home-c {
        background-image: url("/assets/images/backgrounds/burn-2a.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
    div.slide-home-d {
        background-image: url("/assets/images/backgrounds/burn-2b.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
    div.slide-home-e {
        background-image: url("/assets/images/backgrounds/burn-3.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
    div.slide-home-f {
        background-image: url("/assets/images/backgrounds/burn-3a.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
    div.slide-home-g {
        background-image: url("/assets/images/backgrounds/burn-4.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
}

@media (min-width: 1500px) {
    div.slide-home-a {
        background-image: url("/assets/heros/wou-logo-landscape.webp");
        background-size:cover;
        background-position: center 16px;
        background-repeat:no-repeat;
    }
    div.slide-home-b {
        background-image: url("/assets/heros/wou-orig-landscape.webp");
        background-size:auto;
        background-position: center center;
        background-repeat:no-repeat;
        background-color:#fff;
    }
    div.slide-home-c {
        background-image: url("/assets/images/backgrounds/burn-2a.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
    div.slide-home-d {
        background-image: url("/assets/images/backgrounds/burn-2b.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
    div.slide-home-e {
        background-image: url("/assets/images/backgrounds/burn-3.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
    div.slide-home-f {
        background-image: url("/assets/images/backgrounds/burn-3a.jpg");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
    div.slide-home-g {
        background-image: url("/assets/images/backgrounds/quote-1.png");
        background-size:cover;
        background-position: bottom center;
        background-repeat:no-repeat;
    }
}


section.services {
    container-type: inline-size;
    
    /*-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.407);
    -moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.407);
    box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.407);*/
    padding:2rem 0 2em;
    background-color:#fff;
    min-height:400px;
}

div.services-container {
    container-type: services / inline-size;
    display: flex;
    justify-content:space-around; 
    align-items: flex-start; 
    /* flex-flow: row nowrap; */ 
    flex-direction: column; 
    flex-wrap: wrap; 
    align-content:flex-start;
    width:90%;
    max-width:1800px;
    margin:24px auto;
    background-color:rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    border-radius:1.8rem;
    
}

div.services-first {
   
    width:100%;

    a {
        align-items: center;
        display: inline-flex;
        height: 5rem;
        /*padding: .75rem;*/
        transform-origin: center;
        transition-duration:500ms;
        transition-property: background-color,transform;
        vertical-align: top;
        justify-content: center;
        position: relative;
        overflow:hidden;
        text-decoration:none;
        border:none;

        img {
            border-radius: .25rem;
            height: auto;
            max-width: 100%;
        }
    }

    a:hover {
        border-radius: .2rem;
        box-shadow: 0 .25rem .5rem rgba(0,0,0,.2);
        transform: scale(1.2);
        z-index: 1;
    }
}

div.services-second {
    width:100%;
    container-type: inline-size;
    margin:0;
    padding:0;

}

div.services-third {
    width:100%;
    container-type: inline-size;
    margin:0;
    padding:0;

}

    div.services-content {
        padding: 0 0 0 0em;
        
        h2 {
            margin:0 0 16px 0;
            padding:0;
            border-bottom:1px solid var(--highlight-color);
            font-size:1.1em;
            font-weight:600;
            width:auto;
            display:block;
        }

        p {
            margin:0em 0em 3em 0em;     
        }

        p.service-deets {
            font-size:0.9em;
            color:#333;
            display:none;
        }

        ul {
            list-style-type: disc;
            margin-top:0;
            margin-bottom:2em;
            padding-top:0;
            font-size:1em;

            li {
                margin:2px 0;
                list-style-position:outside;
            }
        }
    }

    p.areas {
        display:block;
        margin:2em auto 3em;
        width:90%;
        font-size:1.4em;
        text-align: center;
    }

    .card{
        margin: 2em auto;
        padding: 2em;
        width: 70%;
        background: var(--light-color);
        text-align: center;
        
        border-radius: 8px;
        position: relative;
      }
      
      @property --angle{
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }
      
      .card::after, .card::before{
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: -1;
        padding: 8px;
        border-radius: 8px;
        animation: 3s spin linear infinite;
        box-sizing: unset;  /*important for my setup */
      }
      .card::before{
        filter: blur(0.5rem);
        opacity: 0.5;
      }
      @keyframes spin{
        from{
          --angle: 0deg;
        }
        to{
          --angle: 360deg;
        }
      }

      .cardtwo{
        margin: 2em auto;
        padding: 2em;
        width: 90%;
        background: var(--light-color);
        text-align: center;
        
        border-radius: 8px;
        position: relative;
      }
      
      @property --angle{
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }
      
      .cardtwo::after, .cardtwo::before{
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: conic-gradient(from var(--angle), var(--light-color), var(--light-color), var(--light-color), var(--button-color), var(--light-color));
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: -1;
        padding: 4px;
        border-radius: 8px;
        animation: 9s spin linear infinite;
        box-sizing: unset;  /*important for my setup */
      }
      .cardtwo::before{
        filter: blur(0.5rem);
        opacity: 0.5;
      }
      @keyframes spintwo{
        from{
          --angle: 0deg;
        }
        to{
          --angle: 360deg;
        }
      }

      

    @media (min-width: 1040px) {
        section.services {
            /*  */

        }

        div.services-first, div.services-second {
            width:33%;
            margin:0;
        }

        div.services-second {
            width:33%;
            container-type: inline-size;
            margin:0;
            padding:0;
        
        }

        div.services-third {
            width:33%;
            container-type: inline-size;
            margin:0;
            padding:0;
        
        }

        div.services-content {
                padding: 0 1em 0 1em;
                
                h2 {
                    margin:0 0 16px 0;
                    padding:0;
                    border-bottom:6px solid var(--primary-color);
                    font-size:1.2em;
                    font-weight:400;
                    width:auto;
                    display:inline-block;
                }
        
                p {
                    margin:0em 0em 3em 0em;
                }
                
                ul {
                    list-style-type: disc;
                    margin-top:0;
                    padding-top:0;
                    font-size:1em;
    
                    li {
                        margin:4px 0;
                        list-style-position:outside;
                    }
                }
        }

        div.services-container {
            flex-direction:row;
            width:70%;
            max-width:1800px;
        }

    }





  section.carousel {
    position:relative;
    min-height:70vh;
    padding:2em 0 6em;
    margin:0;
    background-color:#fff;

    div.carousel-container {
        position:relative;
        margin:0 auto;
        max-width:80%;
        height:70vh;
        border-radius:0.4em;
        overflow:hidden;
        border:4px solid var(--secondary-color);

        div.splide {
            width:100%;
            height:100%;

            div.splide__track {
                width:100%;
                height:100%;

                ul.splide__list {
                    width:100%;
                    height:100%;

                    li.splide__slide {
                    width:100%;
                    height:100%;

                        div.slide-contents {
                            width:100%;
                            height:100%;
                        }
                    }
                }
            }
        }
    }
  }

  div.slide-a {
    background-image: url("/assets/images/carousel/organize-workspace-portrait-16-9.webp");
    background-size:cover;
    background-position: bottom center;
  }
  div.slide-b {
    background-image: url("/assets/images/carousel/shelving-portrait-16-9.webp");
    background-size:cover;
    background-position: bottom center;
  }
  div.slide-c {
    background-image: url("/assets/images/carousel/basement-1-portrait-16-9.webp");
    background-size:cover;
    background-position: bottom center;
  }
  div.slide-d {
    background-image: url("/assets/images/carousel/basement-2-portrait-16-9.webp");
    background-size:cover;
    background-position: bottom center;
  }
  div.slide-e {
    background-image: url("/assets/images/carousel/containers-portrait-16-9.webp");
    background-size:cover;
    background-position: bottom center;
  }
  div.slide-f {
    background-image: url("/assets/images/carousel/shelving-additional-portrait-16-9.webp");
    background-size:cover;
    background-position: bottom center;
  }
  div.slide-g {
    background-image: url("/assets/images/carousel/quote-1-portrait.png");
    background-size:cover;
    background-position: bottom center;
    background-repeat:no-repeat;
  }
  div.slide-h {
    background-image: url("/assets/images/carousel/quote-2-portrait.png");
    background-size:cover;
    background-position: bottom center;
    background-repeat:no-repeat;
  }
  div.slide-i {
    background-image: url("/assets/images/carousel/quote-3-portrait.png");
    background-size:cover;
    background-position: bottom center;
    background-repeat:no-repeat;
  }
  div.slide-j {
    background-image: url("/assets/images/carousel/quote-4-portrait.png");
    background-size:cover;
    background-position: bottom center;
    background-repeat:no-repeat;
  }
  div.slide-k {
    background-image: url("/assets/images/carousel/11.webp");
    background-size:cover;
    background-position: bottom center;
  }
  div.slide-l {
    background-image: url("/assets/images/carousel/12.webp");
    background-size:cover;
    background-position: bottom center;
  }
  div.slide-m {
    background-image: url("/assets/images/carousel/13.webp");
    background-size:cover;
    background-position: bottom center;
  }

  img.carousel-img {
    width:100%;
    height:auto;
  }

  @media (min-width: 1040px) {
    section.carousel {
        position:relative;
        min-height:70vh;
        padding:2em 0 4em;
        margin:0;
        background-color:#fff;
    
        div.carousel-container {
            position:relative;
            margin:0 auto;
            max-width:80%;
            height:70vh;
            border-radius:0.4em;
            overflow:hidden;
            border:2px solid #000;
    
            div.splide {
                width:100%;
                height:100%;
    
                div.splide__track {
                    width:100%;
                    height:100%;
    
                    ul.splide__list {
                        width:100%;
                        height:100%;
    
                        li.splide__slide {
                        width:100%;
                        height:100%;
    
                            div.slide-contents {
                                width:100%;
                                height:100%;
                            }
                        }
                    }
                }
            }
        }
      }
    
      div.slide-a {
        background-image: url("/assets/images/carousel/organize-workspace-landscape-16-9.webp");
        background-size:cover;
        background-position: bottom center;
      }
      div.slide-b {
        background-image: url("/assets/images/carousel/shelving-landscape-16-9.webp");
        background-size:cover;
        background-position: bottom center;
      }
      div.slide-c {
        background-image: url("/assets/images/carousel/basement-1-landscape-16-9.webp");
        background-size:cover;
        background-position: bottom center;
      }
      div.slide-d {
        background-image: url("/assets/images/carousel/basement-2-landscape-16-9.webp");
        background-size:cover;
        background-position: bottom center;
      }
      div.slide-e {
        background-image: url("/assets/images/carousel/containers-landscape-16-9.webp");
        background-size:cover;
        background-position: bottom center;
      }
      div.slide-f {
        background-image: url("/assets/images/carousel/shelving-additional-landscape-16-9.webp");
        background-size:cover;
        background-position: bottom center;
      }
      div.slide-g {
        background-image: url("/assets/images/carousel/quote-1.png");
        background-size:contain;
        background-position: bottom center;
        background-repeat:no-repeat;
      }
      div.slide-h {
        background-image: url("/assets/images/carousel/quote-2.png");
        background-size:contain;
        background-position: bottom center;
        background-repeat:no-repeat;
      }
      div.slide-i {
        background-image: url("/assets/images/carousel/quote-3.png");
        background-size:contain;
        background-position: bottom center;
        background-repeat:no-repeat;
      }
      div.slide-j {
        background-image: url("/assets/images/carousel/quote-4.png");
        background-size:contain;
        background-position: bottom center;
        background-repeat:no-repeat;
      }
      div.slide-k {
        background-image: url("/assets/images/carousel/11.webp");
        background-size:cover;
        background-position: bottom center;
      }
      div.slide-l {
        background-image: url("/assets/images/carousel/12.webp");
        background-size:cover;
        background-position: bottom center;
      }
      div.slide-m {
        background-image: url("/assets/images/carousel/13.webp");
        background-size:cover;
        background-position: bottom center;
      }
    
      img.carousel-img {
        width:100%;
        height:auto;
      }
  }

section.intro {
    position:relative;
    overflow:hidden;
    width:100%;
    margin:0;
    padding:2rem 0 2rem;
    
    background-color:#fff;
    text-align:center;
}

section.about {
    position:relative;
    overflow:hidden;
    width:100%;
    margin:0;
    padding:2rem 0 2rem;
    min-height:100dvh;
    background-color:var(--background-color-alt);

    /*
    --s: 116px;
        --c1: rgba(46,139,87, 0.1);
        --c2: #ffffff;
        
        --_g: #0000 90deg,var(--c1) 0;
        background: 
          conic-gradient(from 90deg at 2px 2px,var(--_g)),
          conic-gradient(from 90deg at 1px 1px,var(--_g)),
          var(--c2);
        background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
    */

    p.about-intro {
        display:block;
        width:auto;
        max-width:76ch;
        margin:0 1em;
        text-wrap:pretty;
    }

}

div.about-container {
        display: flex;
        justify-content:space-around; 
        align-items: flex-start; 
        /* flex-flow: row nowrap; */ 
        flex-direction: column; 
        flex-wrap: wrap; 
        align-content:flex-start;
        width:90%;
        max-width:1800px;
        margin:3rem auto 24px;
   


        div.about-content {
            width:100%;
        }
        
    }


    @media (min-width: 1040px) {
        section.about {
            padding:2rem 0;
            min-height:100dvh;

            p.about-intro {
                display:block;
                width:auto;
                max-width:76ch;
                margin:0 auto;
            }
        }

        div.about-container {
            justify-content:space-around; 
            align-items: flex-start; 
            /* flex-flow: row nowrap; */ 
            flex-direction: row; 
            flex-wrap: nowrap; 
            align-content:flex-start;
            width:90%;
    
            div.about-content {
                width:50%;
            }
        }
    }

section.photos {
    position:relative;
    overflow:hidden;
    width:100%;
    margin:0;
    padding:6em 0 2em;
    height:100dvh;
    background-color:var(--background-color);

    .photos-container {
        container-type: photos / inline-size;
        display: flex;
        justify-content:space-around; 
        align-items: flex-start; 
        /* flex-flow: row nowrap; */ 
        flex-direction: column-reverse; 
        flex-wrap: wrap; 
        align-content:flex-start;
        width:90%;
        max-width:1800px;
        margin:0 auto;
        padding-top:4em;
        padding-bottom:4em;

        div.photos-gallery {
            display: grid;
            gap: 0;
            grid-template-columns: repeat(auto-fit,minmax(10rem,1fr));
            margin: 0 auto;
            width:100%;
        
            a {
                align-items: center;
                display: inline-flex;
                height: 5rem;
                /*padding: .75rem;*/
                transform-origin: center;
                transition-duration:500ms;
                transition-property: background-color,transform;
                vertical-align: top;
                justify-content: center;
                position: relative;
                overflow:hidden;
                text-decoration:none;
                border:none;
        
                img {
                    border-radius: .25rem;
                    height: auto;
                    max-width: 100%;
                }
            }
        
            a:hover {
                border-radius: .2rem;
                box-shadow: 0 .25rem .5rem rgba(0,0,0,.2);
                transform: scale(1.2);
                z-index: 1;
            }
        }

        div.photos-compare {
            width:100%;
            container-type: inline-size;
            margin:0 auto;
            padding:0 1em 0 1em;
        
        }
    }
}
    

@media (min-width: 1040px) {
    section.photos {
        
        div.photos-container {

            display: flex;
            justify-content:space-around; 
            align-items: flex-start; 
            /* flex-flow: row nowrap; */ 
            flex-direction: row; 
            flex-wrap: nowrap; 
            align-content:flex-start;

            div.photos-gallery {
                width:50%;
                margin:0;
            }
            
            div.photos-compare {
                width:48%;
                margin:0 1%;
            }
        }
    }    
    
}

/*TEAM*/
div.person {
    position:relative;
    width:100%;
    margin-bottom:4rem;
    
    

    div.img-container {
        position:relative;
        width:100%;
        height:18em;
        overflow:hidden;
        display:flex;
        border-bottom:4px solid var(--highlight-color);
    }

    img.person-img {
        position:absolute;
        bottom:-10px;
        left:20%;
        width:12em;
        transform: translateY(20px) scale(1.15);
        transform-origin: 50% bottom;
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        
    }

    div.person-photo {
        width:100%;
        position:relative;
        overflow:hidden;
        border-top-left-radius:16px;
        border-top-right-radius:16px;
        padding-bottom:0px;
        margin-bottom:0px;
        

        img {
            width:100%;
            height:auto;
            display:block;
        }
    }

    div.person-about {
        width:100%;
        position:relative;
        padding:1em;
        background-color:rgba(255,255,255,0.5);
        backdrop-filter: blur(5px);
        border-bottom-left-radius: 1em;
        border-bottom-right-radius: 1em;
        -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
    }
}

div.person:hover {
    
    img.person-img {
        /*scale: 1.1;
        transform: scale(1.1);*/
        transform: translateY(0) scale(1.2);
    }
}

@media (min-width: 1040px) {
    div.person {
        position:relative;
        width:100%;
        
        
        

        div.img-container {
            position:relative;
            width:80%;
            height:18em;
            overflow:hidden;
            display:flex;
            border-bottom:4px solid var(--highlight-color);
        }

        img.person-img {
            position:absolute;
            bottom:-10px;
            left:40%;
            width:12em;
            transform: translateY(20px) scale(1.15);
            transform-origin: 50% bottom;
            transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
            
        }

        div.person-photo {
            width:80%;
        }

        div.person-about {
            width:80%;
            position:relative;
            margin-top:0px;
            padding:1em;
            background-color:rgba(255,255,255,0.5);
            backdrop-filter: blur(5px);
            border-bottom-left-radius: 1em;
            border-bottom-right-radius: 1em;
            -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
        }
    }

    div.person:hover {
        
        img.person-img {
            /*scale: 1.1;
            transform: scale(1.1);*/
            transform: translateY(0) scale(1.2);
        }
    }
}

section.contact {
    position:relative;
    overflow:hidden;
    width:100%;
    margin:0;
    padding:2em 0 2em;
    background:var(--background-color-alt);
    
    /* wavy pattern
    --s: 100px; 
    --c1: #F8B195;
    --c2: #355C7D;
    
    --_g: 
        var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
        var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
    background:
        radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
        radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
        var(--c1);
    background-size: var(--s) var(--s);
    */
   /*
        --s: 116px; /* control the size*//*
        --c1: rgba(46,139,87, 0.1);
        --c2: #ffffff;
        
        --_g: #0000 90deg,var(--c1) 0;
        background: 
          conic-gradient(from 90deg at 2px 2px,var(--_g)),
          conic-gradient(from 90deg at 1px 1px,var(--_g)),
          var(--c2);
        background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
*/
        div.contact-container {
            display: flex;
            justify-content:space-around; 
            align-items: flex-start; 
            /* flex-flow: row nowrap; */ 
            flex-direction: column; 
            flex-wrap: wrap; 
            align-content:flex-start;
            width:100%;
            max-width:1800px;
            margin:0 auto;

            div.contact-welcome {
                width:100%;
                margin:0;
                padding:0;
            }

            div.contact-details {
                width:100%;
                margin:0;
                padding:0;

            }
        }
      
}

@media (min-width: 1040px) {
    section.contact {
        
        div.contact-container {
            display: flex;
            justify-content:space-around; 
            align-items: stretch; 
            /* flex-flow: row nowrap; */ 
            flex-direction: row; 
            flex-wrap: nowrap; 
            align-content:flex-start;
            width:90%;
            max-width:1800px;
            margin:0 auto;

            div.contact-welcome {
                width:50%;
                margin:0;
                padding:0;
            }

            div.contact-details {
                width:50%;
                margin:0;
                padding:0;

            }
        }


    }
}

.background-a {
    background-color:rgba(255,255,255,0.01);
    backdrop-filter: blur(2px);
    border-radius:0.4em;
}

.boldy { font-weight:600; }

footer {
    container-type: inline-size;
    margin:0;
    padding:4em 1em;
    background-color:#fff;
    color: #000;
}

div.footer-content {
    display: flex;
    justify-content:space-around; 
    align-items: flex-start; 
    /* flex-flow: row nowrap; */ 
    flex-direction: column; 
    flex-wrap: wrap; 
    align-content:flex-start;
    width:100%;
    max-width:1800px;
    font-size:1.2em;

    div.footer-logo {
        text-align:center;
        width:100%;
        order:1;
        margin:2em 0 3em 0;

        h4 {
            color: var(--dark-color);
            margin:-1em 0 0 0;
            padding:0 0 0 8rem;
            font-style:italic;
            font-size:1em;
        }
    }

    div.footer-addl {
        width:100%;
        color: var(--dark-color);
        order:2;
    }

    div.footer-social {
        order:3;
        width:100%;
        p {
            color: var(--dark-color);
        }

        a {
            color: var(--dark-color);
        }
    }
}


@media (min-width: 1040px) {
    div.footer-content {
        justify-content:flex-start; 
        flex-direction: row;
        flex-wrap: nowrap;
        align-items:center;

        div.footer-logo {
            width:33%;
            order:1;
            
        }

        div.footer-addl {
            width:33%;
            color: var(--dark-color);
            order:2;
        }

        div.footer-social {
            width:33%;
            order:3;

            p {
                color: var(--dark-color);
            }

            a {
                color: var(--dark-color);
            }
        }
    }
}

div.footer-addl {
    text-align:center;
    color: var(--dark-color);

    ul {
        
        list-style-type: disc;
        margin:0 0 3em 0;
        padding:0;

        li {
            margin:6px 0;
            
        }
    }
}

p.tagline-footer
{ 
    font-style:italic;
    font-size:1.5em;
    font-weight:400;
}


/*custom shapes */
.custom-shape-divider-top-1730229329 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1730229329 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.custom-shape-divider-top-1730229329 .shape-fill {
    fill: var(--background-color);
}

/** For mobile devices **/
@media (max-width: 767px) {
    .custom-shape-divider-top-1730229329 svg {
        width: calc(100% + 1.3px);
        height: 72px;
    }
}


section.process-c {
    width:100%;
    margin:0;
    padding:2em 0 1em;
    position:relative;
    background:var(--background-color-alt);
}

div.process-c-container {
    width:90%;
    margin:0 auto;

    div.process-c-step {
        position:relative;
        padding:8px 0 0;
        margin:0 auto 2em;
        width:100%;
        text-align:center;
        display:flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content:flex-start; 
        align-items: flex-start;
        align-content:flex-start;
        
        
        color: var(--headline-color);
        min-width: 1em;
        border-radius: 10px;
        overflow:hidden;

        h2 {
            
            color:var(--headline-color);
            margin:0;
            padding:12px 0 6px;
            text-transform:uppercase;
            font-size:1em;

        }

        p {
            padding:1em 2em;
        }
    }

    div.process-c-step-icon {
        padding-right:1em;
        color:var(--highlight-color);
    }

    div.process-c-details {
        margin-left:0em;
        /*border-left:2px solid var(--button-color-shade);*/

        div.process-c-details-title {
            text-align:left;
            /*border-bottom:2px solid var(--button-color);*/
            margin:0;
            padding:8px 8px 12px;
            font-size:1.3em;
        }
            
        div.process-c-details-desc {
            margin:0;
            padding:0;
            text-align:left;

            p {
                padding:0.3em 0 1em 0;
                color:var(--headline-color);
                text-align:left;
                font-size:1.1em;
            }
        }
    }

  }

  ul.process-ul {
    margin:0 0 0 1.8em;
    padding:0;
    list-style-type:disc;
    list-style-position: outside;

    li {
        margin:4px 0;
        padding:0 1em 4px 0.5em;
        /*border-bottom:2px solid var(--highlight-color);*/
        list-style-position: outside;
        font-size:1.1em;
    }
    li::marker {
        color: var(--highlight-color);
      }
  }

  div.step-deets-small { display: block; margin-bottom:3em; }
  div.step-deets-large { display: block; }
  @media (min-width: 1040px) {
    div.step-deets-small { display: none; }
    div.step-deets-large { display: block; }
  }

  
  @media (min-width: 1040px) {
    section.process-c {
        width:100%;
        margin:0;
        padding:2em 0 1em;
        position:relative;
        background:var(--background-color-alt);
    }
    
    div.process-c-container {
        width:90%;
        margin:0 auto;
    
        div.process-c-step {
            position:relative;
            padding:0;
            margin:0 auto 3em;
            width:72ch;
            text-align:center;
            display:flex;
            flex-wrap: nowrap;
            flex-direction: row;
            justify-content:flex-start; 
            align-items: flex-start;
            align-content:flex-start;
            
            
            color: var(--headline-color);
            min-width: 1em;
            border-radius: 10px;
            overflow:hidden;
            width:62ch;
    
            h2 {
                
                color:var(--headline-color);
                margin:0;
                padding:12px 0 6px;
                text-transform:uppercase;
                font-size:1em;
    
            }
    
            p {
                padding:1em 2em;
            }
        }
    
        div.process-c-step-icon {
            padding-right:1em;
            color:var(--highlight-color);
        }
    
        div.process-c-details {
            margin-left:0em;
            /*border-left:2px solid var(--button-color-shade);*/
    
            div.process-c-details-title {
                text-align:left;
                /*border-bottom:2px solid var(--button-color);*/
                margin:0;
                padding:8px;
                font-size:1.3em;
                line-height:1em;
            }
                
            div.process-c-details-desc {
                margin:0;
                padding:0;
                text-align:left;
    
                p {
                    padding:0.3em 0 1em 0;
                    color:var(--dark-color);
                    text-align:left;
                    font-size:1.1em;
                }
            }
        }
    
      }
  }


  /*global styles */
  p.section-intro {
    display:block;
    margin:0 auto;
    width:90%;
    font-size:1.1em;
    padding:12px 4px;
  }

  @media (min-width: 1040px) {
        /*global styles */
        p.section-intro {
            display:block;
            margin:0 auto 2em;
            width:70%;
            font-size:1.1em;
            padding:12px 4px;
        }
  }


div.icond-link-container {
    display: flex;
    justify-content:center; 
    align-items: center; 
    /* flex-flow: row nowrap; */ 
    flex-direction: row; 
    flex-wrap: nowrap; 
    align-content:flex-start;
    margin-bottom:1.2em;
    

    div a {
        color: var(--dark-color);
        
        text-decoration:none;
        border:none;
        font-size:1.1em;
        font-weight:600;

        img {
            height:2em;
        }
    }
}

#hire {
    font-size: 0.9em;
    padding: 0.4em;
    background-color: var(--button-color);
    color: var(--main-color);
    display: block;
    text-align: center;
    margin:0;
    width:100%;
}
a#hire:hover {
    
}

div.nav-icond-link-container {
    display: flex;
    justify-content:center; 
    align-items: center; 
    /* flex-flow: row nowrap; */ 
    flex-direction: row; 
    flex-wrap: nowrap; 
    align-content:flex-start;
    margin-bottom:0.8em;
    

    div a {
        color: var(--button-color);
        background-color:transparent;
        text-decoration:none;
        border:none;
        font-size:1.1em;
        font-weight:600;
        padding:0;
        margin:0;

        img {
            height:2em;
        }
    }
}

span.bogor {
    font-weight:600;
}

a.linky {
    color:var(--secondary-color);
    text-decoration:none;
    font-weight:600;
}
a.linky:hover {
    color:var(--highlight-color)
}




/*icons*/
.fluent--phone-chat-28-regular {
    display: inline-block;
    width: 5em;
    height: 5em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23000' d='M7 4.75A2.75 2.75 0 0 1 9.75 2h8.5A2.75 2.75 0 0 1 21 4.75v8.266a7.6 7.6 0 0 0-1.5.05V4.75c0-.69-.56-1.25-1.25-1.25h-8.5c-.69 0-1.25.56-1.25 1.25v18.5c0 .69.56 1.25 1.25 1.25h3.77l-.44 1.5H9.75A2.75 2.75 0 0 1 7 23.25zM27 20.5a6.5 6.5 0 0 1-9.647 5.688l-2.717.791a.5.5 0 0 1-.62-.62l.795-2.713a6.5 6.5 0 1 1 12.19-3.146M18 19a.5.5 0 0 0 0 1h5a.5.5 0 1 0 0-1zm-.5 2.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 1 0 0-1H18a.5.5 0 0 0-.5.5'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .fluent--form-28-regular {
    display: inline-block;
    width: 5em;
    height: 5em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23000' d='M6 12.5a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m2.5-1a1 1 0 1 0 0 2a1 1 0 0 0 0-2m0 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5m-1 2.5a1 1 0 1 1 2 0a1 1 0 0 1-2 0m5.5-7.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1-.75-.75m.75 6.25a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5zM6 7.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 7.25M6.75 3A3.75 3.75 0 0 0 3 6.75v14.5A3.75 3.75 0 0 0 6.75 25h14.5A3.75 3.75 0 0 0 25 21.25V6.75A3.75 3.75 0 0 0 21.25 3zM4.5 6.75A2.25 2.25 0 0 1 6.75 4.5h14.5a2.25 2.25 0 0 1 2.25 2.25v14.5a2.25 2.25 0 0 1-2.25 2.25H6.75a2.25 2.25 0 0 1-2.25-2.25z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .fluent--building-home-24-regular {
    display: inline-block;
    width: 5em;
    height: 5em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.75 3.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25H9V18H3.75A1.75 1.75 0 0 1 2 16.25V3.75C2 2.784 2.784 2 3.75 2h5.5c.966 0 1.75.784 1.75 1.75v3c0 .138.112.25.25.25h1c.966 0 1.75.784 1.75 1.75v.072l-1.5 1.4V8.75a.25.25 0 0 0-.25-.25h-1A1.75 1.75 0 0 1 9.5 6.75v-3a.25.25 0 0 0-.25-.25zM6 5.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0M5.25 9.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M6 11.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0M7.75 6.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m.75 2.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m-.75 3.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m9.444-3.061a1.75 1.75 0 0 0-2.388 0l-4.25 3.966a1.75 1.75 0 0 0-.556 1.28V20.5a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5V18h2v2.5a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5v-5.815a1.75 1.75 0 0 0-.556-1.28zm-1.365 1.096a.25.25 0 0 1 .342 0l4.25 3.967a.25.25 0 0 1 .079.183V20.5h-2V18a1.5 1.5 0 0 0-1.5-1.5h-2a1.5 1.5 0 0 0-1.5 1.5v2.5h-2v-5.815a.25.25 0 0 1 .08-.183z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }


  .fluent--apps-32-regular {
    display: inline-block;
    width: 5em;
    height: 5em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M24.808 2.954a3.25 3.25 0 0 0-4.596 0l-3.213 3.213A3.25 3.25 0 0 0 13.75 3h-7.5A3.25 3.25 0 0 0 3 6.25v19.5A3.25 3.25 0 0 0 6.25 29h19.5A3.25 3.25 0 0 0 29 25.75v-7.5a3.25 3.25 0 0 0-3.158-3.249l3.209-3.208a3.25 3.25 0 0 0 0-4.596zM19.176 15H17v-2.176zm2.45-10.632a1.25 1.25 0 0 1 1.768 0l4.242 4.243a1.25 1.25 0 0 1 0 1.768l-4.242 4.242a1.25 1.25 0 0 1-1.768 0l-4.243-4.242a1.25 1.25 0 0 1 0-1.768zM15 6.25V15H5V6.25C5 5.56 5.56 5 6.25 5h7.5c.69 0 1.25.56 1.25 1.25M5 25.75V17h10v10H6.25C5.56 27 5 26.44 5 25.75M17 17h8.75c.69 0 1.25.56 1.25 1.25v7.5c0 .69-.56 1.25-1.25 1.25H17z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .fluent--checkmark-starburst-16-regular {
    display: inline-block;
    width: 5em;
    height: 5em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m11.334 2.064l.077.153l.576 1.533c.045.12.14.216.261.261l1.48.556c.65.243.999.937.826 1.594l-.042.13l-.688 1.523a.45.45 0 0 0 0 .37l.654 1.44a1.34 1.34 0 0 1-.544 1.71l-.153.077l-1.533.576a.45.45 0 0 0-.26.261l-.556 1.48a1.34 1.34 0 0 1-1.595.826l-.13-.042l-1.523-.688a.45.45 0 0 0-.37 0l-1.439.654a1.34 1.34 0 0 1-1.71-.544l-.077-.153l-.577-1.533a.45.45 0 0 0-.261-.26l-1.48-.556a1.34 1.34 0 0 1-.826-1.595l.042-.13l.689-1.523a.45.45 0 0 0 0-.37L1.52 6.375a1.34 1.34 0 0 1 .543-1.71l.153-.077L3.75 4.01a.45.45 0 0 0 .261-.261l.556-1.48a1.34 1.34 0 0 1 1.594-.826l.13.042l1.523.689a.45.45 0 0 0 .37 0l1.44-.654a1.34 1.34 0 0 1 1.71.543m-5.931.52l-.555 1.48a1.34 1.34 0 0 1-.784.784l-1.48.555l-.098.051a.45.45 0 0 0-.152.552l.654 1.439c.16.352.16.756 0 1.108l-.66 1.454l-.027.091a.45.45 0 0 0 .283.497l1.48.556c.362.136.648.421.784.784l.555 1.48l.051.098c.12.174.352.242.552.151l1.439-.653a1.34 1.34 0 0 1 1.108 0l1.454.66l.091.026a.45.45 0 0 0 .497-.282l.556-1.48a1.34 1.34 0 0 1 .784-.784l1.48-.556l.098-.05a.45.45 0 0 0 .151-.552l-.653-1.44a1.34 1.34 0 0 1 0-1.108l.66-1.453l.026-.092a.45.45 0 0 0-.282-.497l-1.48-.555a1.34 1.34 0 0 1-.784-.784l-.556-1.48l-.05-.098a.45.45 0 0 0-.552-.152l-1.44.654a1.34 1.34 0 0 1-1.108 0l-1.44-.654l-.027-.012a.447.447 0 0 0-.575.262m1.574 6.762l3.186-3.64a.447.447 0 0 1 .725.514l-.053.073l-3.5 4a.45.45 0 0 1-.578.082l-.074-.06l-1.5-1.5a.447.447 0 0 1 .562-.689l.07.057zl3.186-3.64z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .fluent--number-circle-1-16-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m1 4.25v5.25a.5.5 0 0 1-1 0V6.986a3.6 3.6 0 0 1-1.043.72a.5.5 0 1 1-.414-.911a2.7 2.7 0 0 0 1.174-1.046a3 3 0 0 0 .3-.628v-.005A.5.5 0 0 1 9 5.25'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .fluent--number-circle-2-16-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M6.9 6.052a.5.5 0 0 1-.8-.602a2.7 2.7 0 0 1 .504-.48c.313-.227.79-.47 1.396-.47a2 2 0 0 1 2 2c0 .548-.275 1.006-.59 1.373c-.308.36-.71.696-1.073.998l-.017.014c-.383.32-.723.605-.972.895q-.099.115-.168.22H9.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5c0-.548.275-1.005.59-1.371c.308-.36.709-.694 1.07-.996l.02-.016c.383-.32.723-.605.971-.895C8.9 6.932 9 6.702 9 6.5a1 1 0 0 0-1-1c-.331 0-.605.132-.807.28c-.1.072-.177.145-.228.198c-.038.04-.066.074-.066.074'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }


  .fluent--number-circle-3-16-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m5.703-1.994c.061-.055.154-.13.276-.207A1.9 1.9 0 0 1 8 5.5c.766 0 1.251.517 1.251 1s-.485 1-1.25 1h-.5a.5.5 0 0 0 0 1H8c.765 0 1.25.517 1.25 1s-.485 1-1.251 1a1.9 1.9 0 0 1-1.02-.3a2 2 0 0 1-.276-.206c-.046-.04-.078-.074-.078-.074a.5.5 0 1 0-.749.662c.041.046.084.09.16.158c.096.086.235.198.414.31c.357.222.885.45 1.549.45c1.168 0 2.25-.826 2.25-2c0-.621-.302-1.145-.76-1.5c.458-.355.761-.879.761-1.5c0-1.174-1.083-2-2.25-2a2.9 2.9 0 0 0-1.55.45a3 3 0 0 0-.414.31a2 2 0 0 0-.16.158a.5.5 0 1 0 .75.662s.031-.034.077-.074M6.625 9.92l-.001-.001'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }


  .fluent--number-circle-4-16-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m8-2.622c0-.755-.99-1.037-1.387-.396L5.07 9.084a.6.6 0 0 0 .51.916H8v1a.5.5 0 0 0 1 0v-1h.5a.5.5 0 0 0 0-1H9zm-1 .877V9H6.3z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }



  .fluent--number-circle-5-16-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m6.443-2H9.25a.5.5 0 0 0 0-1H7a.5.5 0 0 0-.496.438l-.25 2A.5.5 0 0 0 6.758 8h.003a38 38 0 0 1 1.144 0l.188.006c.708.034 1.248.719 1.15 1.418a1.25 1.25 0 0 1-2.313.464a.5.5 0 0 0-.86.51a2.25 2.25 0 1 0 2.248-3.377c-.161-.022-.582-.025-.906-.025h-.094z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .fluent--testerino {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m6.443-2H9.25a.5.5 0 0 0 0-1H7a.5.5 0 0 0-.496.438l-.25 2A.5.5 0 0 0 6.758 8h.003a38 38 0 0 1 1.144 0l.188.006c.708.034 1.248.719 1.15 1.418a1.25 1.25 0 0 1-2.313.464a.5.5 0 0 0-.86.51a2.25 2.25 0 1 0 2.248-3.377c-.161-.022-.582-.025-.906-.025h-.094z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .getstarted-home {
    max-width:770px;
    margin:0 auto;
    padding:0 0.3em 3em;
  }

  button.getstarted {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    cursor:pointer;
    padding:1em;
    font-size:1.4em;
    border:none;
    border-radius:6px;
    font-weight:600;
    letter-spacing:1px;
    color:var(--light-color);
  }

  @keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/*action buttons */
a.getgoing {
    margin: 2em auto;
    padding: 2em;
    background: var(--light-color);
    text-align: center;
    display:block;
    border-radius: 8px;
    z-index:0;
    position: relative;
  }
  
  @property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  
  a.getgoing::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -2;
    padding: 8px;
    border-radius: 8px;
    animation: 3s spinah linear infinite;
    box-sizing: unset;  /*important for my setup */
  }
  a.getgoing::before{
    /*filter: blur(0.5rem);
    opacity: 0.5;*/
  }
  @keyframes spinah {
    from{
      --angle: 0deg;
    }
    to{
      --angle: 360deg;
    }
  }

  .rainbow {
    width:90%;
    border-radius: 10px;
    padding: 1rem;
    margin: 0 auto 2em;
    color:#FFF;
    text-decoration:none;
    display: grid;
    place-content: center;
    text-align: center;
    font-weight:600;
    font-size: 1.1em;
  
    --border-size: 4px;
    border: var(--border-size) dotted transparent;
    background-image: linear-gradient(
        to right,
        rgb(103 125 235 / var(--opacity)),
        rgb(103 125 235 / var(--opacity))
      ),
      /*conic-gradient(
        from var(--angle),
        #d53e33 0deg 90deg,
        #fbb300 90deg 180deg,
        #377af5 180deg 270deg,
        #399953 270deg 360deg*/
        conic-gradient(
        from var(--angle),
        var(--highlight-color) 0deg 90deg,
        var(--highlight-color) 90deg 180deg,
        var(--secondary-color) 180deg 270deg,
        var(--highlight-color) 270deg 360deg
      );
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  .rainbow.inline {
    display:inline-block;
  } 
  
  @property --opacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
  }
  
  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  
  @keyframes opacityChange {
    to {
      --opacity: 1;
    }
  }
  
  @keyframes rotate {
    to {
      --angle: 360deg;
    }
  }
  
  .rainbow {
    /*animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;*/
    animation: rotate 8s linear infinite;
  }

  @media (min-width: 1040px) {
    .rainbow {
        max-width:50%;
        border-radius: 10px;
        padding: 0.5rem;
    }
  }

  a.inline-link {
    display:inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap:8px;
    background:var(--highlight-color);
    border-radius:4px;
    padding:4px 12px;
    text-decoration:none;
    height:2em;

    span {
        color:var(--light-color);
        display:flex;
    }

    span img {
        height:1em;
        width:auto;
    }
  }

  a.block-link {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap:8px;
    border-radius:4px;
    padding:4px 12px;
    text-decoration:none;
    height:4em;

    span {
        color:#FFF;
        display:flex;
        font-size:1.2em;
    }

    span img {
        height:1.2em;
        width:auto;
    }
  }

  a.big-inline-link {
    display:inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap:8px;
    border-radius:4px;
    padding:4px 12px;
    text-decoration:none;
    height:4em;
    

    span {
        color:#FFF;
        display:flex;
        font-size:1.2em;
    }

    span img {
        height:1.2em;
        width:auto;
    }
  }

  .grad-border {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.25turn, var(--secondary-color), var(--background-color-alt), var(--background-color-alt));
    border-image-slice: 1;
    width:100%;
}

.grad-border-menu {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.25turn, var(--secondary-color), var(--highlight-color), var(--button-color));
    border-image-slice: 1;
    width:100%;
    margin-bottom:14px;
    text-transform:capitalize;
}


.header-icon {

    margin:1em auto 0;
    text-align:center;

    img {
        width:auto;
        height:2.6rem;
    }
}


@media (min-width: 1040px) {
    .grad-border-menu {
        border-bottom: none;
        border-image: none;
        border-image-slice: unset;
        width:auto;
        margin-bottom:0;
        text-transform:uppercase;
    }
}

.getstarted-now {
    cursor:pointer;
}

.credits {
    text-align:center;
    font-size:0.7em;

    a, a:visited, a:active {
        color:grey;
        text-decoration:none;
    }

    a:hover {
        text-decoration:underline;
        color:#f366ba;
    }
}


.quotes {
    display:flex;
    width:90%;
    flex-direction:column;
    justify-content: start;
    gap:2rem;
    margin:1rem;
    overflow:hidden;

    .quote {
        width:100%;
        flex:1;
    }
}


div.aquote-alt {
  width: 100%;
  height:100%;
  padding: 10px;
  border: 1px solid #f366ba;
  background-size: cover;
	background-clip: content-box;
  background-color: #fafafa;
  box-sizing: border-box;
  position: relative;
  margin: auto;
  top: 0px; 

  div.quote-text {
    
    padding:16px 24px ;
    overflow:hidden;

    p {
        font-size:1em;
        line-height:1.6em;
        color:#222;
        text-wrap:stable;
    }

    p:first-letter {
        font-weight:600;
        font-size:1.2em;
    }
  }
}

div.aquote-alt:after {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
  border-bottom: 50px solid #fefefe;
  bottom: -60px;
  left: -65px;
  box-shadow: 0px 7px 6px -9px black;
  transform: rotate(225deg);
}

div.aquote-alt:before {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
  border-top: 50px solid #fefefe;
  top: -60px;
  right: -65px;
  box-shadow: 0px -7px 6px -9px black;
  transform: rotate(225deg);
}


@media (min-width: 1040px) {
    .quotes {
        display:flex;
        width:100%;
        flex-direction:row;
        justify-content: start;
        gap:1rem;
        max-width:1400px;
        margin:1rem auto 0;

        .quote {
            flex:1;
            padding:1em;
        }
    }


    div.aquote-alt {
        width: 100%;
        height:100%;
        padding: 10px;
        border: 1px solid #f366ba;
        background-size: cover;
            background-clip: content-box;
        background-color: #fafafa;
        box-sizing: border-box;
        position: relative;
        margin: auto;
        top: 0px; 

        div.quote-text {
            overflow:hidden;
            padding:16px 24px ;

            p {
                font-size:1em;
                line-height:1.6em;
                color:#222;
                text-wrap:stable;
                padding-bottom:0.625em;
            }

            p:first-letter {
                font-weight:600;
                font-size:1.2em;
            }
        }

        div.aquote-alt:after {
        content: "";
        display: block;
        position: absolute;
        border: 50px solid transparent;
        border-bottom: 50px solid #fefefe;
        bottom: -60px;
        left: -65px;
        box-shadow: 0px 7px 6px -9px black;
        transform: rotate(225deg);
        }

        div.aquote-alt:before {
        content: "";
        display: block;
        position: absolute;
        border: 50px solid transparent;
        border-top: 50px solid #fefefe;
        top: -60px;
        right: -65px;
        box-shadow: 0px -7px 6px -9px black;
        transform: rotate(225deg);
        }
    }
}

.byline {
    text-align:right;
    margin-top:1.6em;
    margin-bottom:1em;
}


.fancy {
  position: relative;
  white-space: nowrap;
  &:after {
    --deco-height: 0.5125em;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--deco-height) * -0.625);
    height: var(--deco-height);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%23343E76' stroke-width='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: auto 100%;
    background-repeat: round;
    background-position: 0em;
  }
}