:root {
    --bg:#fafafa; 
    --bg2:#f1f1f1;
    --bg-tertiary: #ffffff;
    --text-primary:#121212;
    --text-secondary:#545454;
    --text-tertiary:#b0b0b0;
    --accent:#FF3C00;
    --green:#03ffb9;
    --cursor_pointer: url(https://www.furione.com/cur/pointer-light.svg);
    --cursor_link: url(https://www.furione.com/cur/link-light.svg);
    --blur: -5px;
    --noise: rgba(255,255,255,0.95);
    --company: rgba(255,255,255,0.7);
}

:root.darkMode {
    --bg:#131419;
    --bg2:#0b0b0f;
    --bg-tertiary: #15171d;
    --text-primary:#ffffff;
    --text-secondary:#9d9d9d;
    --text-tertiary:#545454;
    --accent:#FF3C00;
    --cursor_pointer: url(https://www.furione.com/cur/pointer-dark.svg);
    --cursor_link: url(https://www.furione.com/cur/link-dark.svg);
    --noise: rgba(0, 0, 0, 0.95);
    --company: rgba(0, 0, 0, 0.7);
}

        /* GENERAL              */
html {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: calc(16px + 1 * ((100vw - 320px) / 680));
}


*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
  }
  
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    cursor: var(--cursor_pointer), default;
}

img {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
}

.gap3 {
    margin-top: 3rem;
}


.quote {
    padding-right: 1.8rem;
    font-size: 1.7rem;
    letter-spacing: -2px;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.2;
    margin-top: 0;
    margin-right: 0;
    border-right: 3px solid var(--accent);
    text-align: right;
}

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

.right {
    text-align: right;
}


/* GRID */


        
        .row:before,
        .row:after {
            content: " ";
            display: table;
        }

        .row:after {
            clear: both;
        }

        .column {
            position: relative;
            float: left;
            display: block;
        }

        .column+.column {
            margin-left: 1.6%;
        }

        .column-1 {
            width: 6.86666666667%;
        }

        .column-2 {
            width: 15.3333333333%;
        }

        .column-3 {
            width: 23.8%;
        }

        .column-4 {
            width: 32.2666666667%;
        }

        .column-5 {
            width: 40.7333333333%;
        }

        .column-6 {
            width: 49.2%;
        }

        .column-7 {
            width: 57.6666666667%;
        }

        .column-8 {
            width: 66.1333333333%;
        }

        .column-9 {
            width: 74.6%;
        }

        .column-10 {
            width: 83.0666666667%;
        }

        .column-11 {
            width: 91.5333333333%;
        }

        .column-12 {
            width: 100%;
            margin-left: 0;
        }

        /* GRID MOBILE*/

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

            .column-1,
            .column-2,
            .column-3,
            .column-4,
            .column-5,
            .column-6,
            .column-7,
            .column-8,
            .column-9,
            .column-10,
            .column-11,
            .column-12 {
                float: none;
                width: auto;
            }

            .column+.column {
                margin-left: 0;
            }
        }

        .column {
            padding: 4%;
            text-align: left;
        }

        .row {
            margin-left: 30px;
            margin-right: 75px;
            text-align: left;
        }




        /*FONTS STYLE           MOBILE STYLE */
        p {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5;
            margin: 0;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        a {
            color: var(--text-primary);
            text-decoration: none;
            cursor: var(--cursor_link), default;
        }

        a:hover {
            color: var(--accent);
            transition: 0.8s;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-bottom: 10px;
        }


        h1 {
            font-size: 44px;
            color: var(--accent);
            line-height: 1;
            margin-top: 0;
            letter-spacing: -1px;
        }

        h2 {
            font-size: 40px;
            color: var(--text-secondary);
            line-height: 1;
            font-weight: 700;
            letter-spacing: -1px;
        }



        h3 {
            font-size: 2rem;
            font-weight: 300;
            color: var(--text-primary);
            text-align: left;
            line-height: 1;
            letter-spacing: -1px;
            margin-bottom: 2rem;
        }

        h4 {
            font-size: .75rem;
            color: var(--text-primary);
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.0575rem;
            margin-bottom: 3rem;
            text-transform: uppercase;
        }

        h4::before {
            content: "";
            width: 2rem;
            margin-bottom: 5px;
            display: inline-block;
            height: 3px;
            margin-right: 10px;
            background-color: var(--accent);
        }

        h5 {
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 0.75rem;
            padding-top: 2rem;
            color: var(--text-secondary);
        }



        /* SECTION COLOR */
        * {
            transition: background-color 0.4s ease, color 1s ease;
        }

        main {
            position: relative;
            z-index: 2;
            margin-left: -20px;
            box-shadow: 3px 2px 2px 0px var(--text-tertiary);
        }

        section {
            position: relative;
            margin: 0;
            align-items: stretch;
            width: 100%;
            min-height: 90vh;
            overflow: hidden;
        }
.pad7 {
    padding-top: 5rem;
}
        #home {
            background-color: var(--bg);
        }

        #about {
            background-color: var(--bg2);
        }

        #portfolio {
            background-color: var(--bg);
        }


        #work {
            background-color: var(--bg2);
        }


        #services {
            background-color: var(--bg2);

        }

        #design-system {
            background-color: var(--bg);
        }


        #blog {
            background-color: var(--bg2);
        }

        #contact {
            padding-top: 7rem;
            background-color: var(--bg2);
        }


        /* 1 HOME PAGE          MOBILE STYLE*/ 
        #home h4 {
            color: var(--text-primary);
            padding-top: 5rem;
            margin-bottom: 1rem;
        }

        #home h4::before {
            display: none;
        }

        .cta:hover {
            opacity: .5;
            transition: .5s;
        }

                /*NEW BUTTONS HOME PAGE */

                .hp-cta {
                    position: relative;
                    font-size: 18px;
                    display: inline-block;
                    margin-bottom: 30px;
                    margin-top: 1rem;
                    padding: 1.2rem;
                    margin-left: 30px;
                    color: var(--text-primary);
                    font-weight: 600;
                    text-decoration: none;
                    cursor: var(--cursor_link), default;
                    outline: none;
                    transition: all 0.5s ease;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                }
        
                .hp-cta:before {
                    content: "";
                    position: absolute;
                    top: 10px;
                    left: -10px;
                    display: block;
                    border-radius: 60px;
                    background: var(--accent);
                    width: 60px;
                    height: 60px;
                    transition: all 0.4s ease;
                }
        
                .hp-cta span {
                    position: relative;
                    font-weight: 500;
                    letter-spacing: -0.025rem;
                    line-height: 1;
                    color: var(--text-primary);
                    top: 8px;
                }
        
                .hp-cta:hover:before {
                    width: 100%;
                    background: var(--accent);
                }
        
                .hp-cta:active {
                    transform: scale(0.9);
                }
        
        
        

        /* NAVIGATION           MOBILE STYLE*/ 
        .navbar {
            position: fixed;
            width: 100%;
            background-color: var(--bg);
            opacity: 0.9;
            color: var(--text-primary);
            height: 65px;
            font-size: 1rem;
            padding-top: 15px;
            padding-left: 30px;
            top: 0;
            left: 0;
            z-index: 10;
        }

        .navbar a {
            text-decoration: none;
            color: var(--text-primary);
        }

        .navbar a.navbar-logo {
            display: inline-block;
            padding-top: 1rem;
            padding-left: 30px;
            font-weight: 500;
            margin-top: 10px;
        }

        .navbar a.navbar-logo span {
            font-size: 1rem;
            font-weight: 400;
        }

        .navbar ul {
            float: right;
            list-style: none;
            height: inherit;
            line-height: inherit;
            padding: 0 70px;
        }

        .navbar ul li {
            display: inline-block;
        }

        /* DA cambiare 15px oriz con variable che calcoli lo spazio */
        .navbar ul li a {
            display: block;
            text-align: center;
            padding: 7px 15px;
            font-size: 1rem;
        }

        .navbar ul li a:hover {
            color: var(--accent);
        }

        .navbar .navbar-toggler {
            display: none;
        }

        /*--------------------------------- OPENED NAVBAR BELOW: */

        @media (max-width: 48em) {

            .row,
            .column {
                padding: 2%;
                box-sizing: border-box;
            }


            .navbar ul li a {
                min-width: 100px;
                padding: 0 20px;
            }

            .navbar {
                padding: 0;
            }

            .navbar ul {
                width: 100%;
                margin-top: 0px;
                padding: 0px 10px;
                background-color: var(--bg2);
                /* height: auto; */
                height: 100vh;
                max-height: 0;
                overflow: hidden;
                transition: all ease-in-out 0.3s;
            }

            .navbar ul.open {
                max-height: 90vh;
            }

            .navbar ul li {
                width: 100%;
            }

            .navbar ul li a {
                padding: 0;
                text-align: right;
                margin-right: 60px;
                margin-top: 20px;
                font-weight: 300;
                font-size: 2rem;
            }

            .navbar .navbar-toggler {
                display: block;
                position: absolute;
                height: 40px;
                top: 15px;
                right: 50px;
                background-color: transparent;
                color: var(--text-primary);
                font-weight: 400;
                border: none;
                /* border-radius: 4px; */
                outline: none;
                padding: 0 4px;
                cursor: var(--cursor_pointer), default;
            }

            .navbar .navbar-toggler span,
            .navbar .navbar-toggler span::before,
            .navbar .navbar-toggler span::after {
                display: block;
                content: "";
                background-color: var(--text-primary);
                height: 3px;
                width: 28px;
                border-radius: 4px;
                transition: all ease-in-out 0.3s;
            }

            .navbar .navbar-toggler span::before {
                transform: translateY(-8px);
            }

            .navbar .navbar-toggler span::after {
                transform: translateY(5px);
            }

            .navbar .navbar-toggler.open-navbar-toggler span {
                /* transform: rotate(90deg); */
                background-color: transparent;
                /* transform: scale(0.85) rotate(270deg); */
            }

            .navbar .navbar-toggler.open-navbar-toggler span::before {
                transform: translateY(0px) rotate(45deg);
                /* transform: translateY(0px) scale(0.75) rotate(45deg); */
            }

            .navbar .navbar-toggler.open-navbar-toggler span::after {
                transform: translateY(-3px) rotate(-45deg);
                /* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
            }

            .hp-cta {
            margin-left:20px;
        }

        }


        /* SIDE BAR  */
        .side {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            width: 50px;
            border-left: 1px dashed var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.0875rem;
            font-size: 10px;
            cursor: var(--cursor_link), default;

        }

        .side .top,
        .side .middle,
        .side .bottom {
            position: absolute;
            left: 0;
            transform: rotate(90deg) perspective(1px);
            transform-origin: 0 50px;
            height: 50px;
            line-height: 50px;
            white-space: nowrap;
            word-spacing: 0.5rem;
        }

        .side .top {
            top: 50px;
            text-align: left;
            color: var(--text-primary)
        }

        .side .middle {
            top: 35%;
            text-align: left;
            color: var(--text-primary)
        }

        .side .middle:hover {
            font-weight: 600;
        }


        .side .bottom {
            top: auto;
            bottom: 20%;
        }

        .side .bottom a:hover {
            font-weight: 600;
        }

        .side .bottom p {
            display: inline-block;
            color: var(--text-primary);
            font-size: 10px;
            letter-spacing: 0.0875rem;
        }

        .button-lang {
            color: var(--text-primary);
            font-size: 10px;
            letter-spacing: 0.0875rem;
            background-color: transparent;
            height: 2rem;
            width: 2rem;
            text-decoration: none;
            border: none;
            cursor: var(--cursor_link), default;
            margin-right: 30px;
        }


        /* BUTTON TRANSLATION  */
        
        .button-lang:hover {
            color: var(--accent);
            font-weight: 600;
        }
        /*  TRANSLATION INSTRUCTIONS */

        body.it :lang(en) {
            display: none;
        }

        body.en-GB :lang(it) {
            display: none;
        }

        .desktop-only {
            display:none;
        }


        /* PROGRESSION BAR TOP  */
        
        .header-bar {
            position: fixed;
            top: 0;
            z-index: 13;
            width: 100%;
            background-color: var(--bg);
        }

        .progress-container {
            width: 100%;
            height: 3px;
            background: var(--bg);
        }

        .progress-bar {
            height: 4px;
            position: absolute;
            background: linear-gradient(60deg, #f53803, #F11D28, #FD3A2D, #FE612C, #FF872C, #FFA12C, #f5d020, #ffdd00);
            background-size: 1800% 1800%;
            -webkit-animation: prog 28s ease infinite;
            -z-animation: prog 28s ease infinite;
            -o-animation: prog 28s ease infinite;
            animation: prog 28s ease infinite;
        }

        @-webkit-keyframes prog {
            0% {
                background-position: 0% 82%;
            }

            50% {
                background-position: 100% 19%;
            }

            100% {
                background-position: 0% 82%;
            }
        }

        @-moz-keyframes prog {
            0% {
                background-position: 0% 82%;
            }

            50% {
                background-position: 100% 19%;
            }

            100% {
                background-position: 0% 82%;
            }
        }

        @-o-keyframes prog {
            0% {
                background-position: 0% 82%;
            }

            50% {
                background-position: 100% 19%;
            }

            100% {
                background-position: 0% 82%;
            }
        }

        @keyframes prog {
            0% {
                background-position: 0% 82%;
            }

            50% {
                background-position: 100% 19%;
            }

            100% {
                background-position: 0% 82%;
            }
        }


        /* DARK MODE TOGGLE  */
        .right-dot {
            height: 1rem;
            width: 1rem;
            border-radius: 1rem;
            border: 0.12rem solid var(--text-primary);
            position: fixed;
            -webkit-appearance: none;
            outline: none;
            cursor: var(--cursor_link), default;
            top: 16px;
            right: 16px;
        }

        .right-dot {
            animation-name: right-dot;
            animation-duration: 1s;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-direction: alternate;
            z-index: 1000;
        }

        @keyframes right-dot {
            from {
                transform: scale(0.8);
                background: var(--text-primary);
            }

            to {
                transform: scale(1.1);
                background: var(--bg);
            }
        }

        .right-dot:hover {
            transition: 0.3s;
            background-color: var(--text-primary);
        }

        .right-dot:checked {
            transition: 1s;
            background-color: var(--bg);
        }

        /** HIGHLIGHT EFFECT ON SCROLL  **/

        .highlight {
            position: relative;
        }

        .highlight:before {
            position: absolute;
            content: '';
            z-index: 5;
            top: -2px;
            left: -5px;
            right: -5px;
            bottom: -2px;
            background-color: rgba(5, 255, 184, 0.7);
            mix-blend-mode: difference;
            transform-origin: 0;
            transition: transform 0.8s ease;
            transform: scaleX(0);
        }

        .in-view .highlight:before {
            transform: scaleX(1);
        }


                /* CIRCLE TEXT HOME PAGE */

                .roto {
                    font-size: 0.7rem;
                    font-weight: 600;
                    color: var(--bg);
                    background-color: var(--text-primary);
                    position: absolute;
                    top: 62%;
                    left: 70%;
                    border-radius: 150px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    margin: 0;
                    width: 90px;
                    height: 90px
                }
        
                div.circleText {
                    transform: translateX(50%);
                    width: 80px;
                    height: 80px;
                    --start: -90;
                    /* Start of the arc (in degrees) */
                    --end: 270;
                    /*  End  of the arc (in degrees) */
                }
        
                .roto {
                    animation: rotate 10s linear infinite;
                }
        
                @keyframes rotate {
                    0% {
                        transform: rotateZ(0deg);
                    }
        
                    100% {
                        transform: rotateZ(360deg);
                    }
                }
        
        

/* BOUNCING BALL */

.ball {
    background-color: var(--text-primary);
    border-radius: 10px;
    height: 10px;
    position: absolute;
    top: 77%;
    right: 20px;
    width: 10px;
  }
  
  .ball-bouncing .ball {
    animation: ballBouncing 1.2s ease-in infinite;
    bottom: 2.1rem;
    transform-origin: bottom;
  }
  
  @keyframes ballBouncing {
    0%,
    100% {
      transform: scale(1.5, 0.5);
    }
    20% {
      transform: scaleY(1.2);
    }
    40%,
    80% {
      transform: translateY(-7rem);
    }
    70% {
      transform: translateY(-8rem);
    }
    90% {
      transform: translateY(0);
    }
  }
  



        /* 2 ABOUT              MOBILE STYLE */

        .list ul {
            list-style: none;
            list-style-type: none;
        }

        .list li {
            display: inline-block;
            border: 1px solid var(--text-primary);
            font-size: 0.8rem;
            border-radius: 1rem;
            background-color: transparent;
            color: var(--text-primary);
            padding: 8px 10px;
            margin: 5px;
        }

        .list li:hover {
            background-color: var(--text-primary);
            border: 1px solid var(--text-primary);
            color: var(--accent);
            transition: .5s;
        }

        .right-cite {
            font-size: 0.8rem;
            letter-spacing: -0.2px;
            color: var(--text-tertiary);
            text-align: right;
            padding-right: 1.8rem;
            padding-top: 1rem;
            padding-bottom: 2.2rem;
        }


        /* 3 PORTFOLIO          MOBILE STYLE */

        .grid {
            padding-left: 0;
            padding-right: 0;
        }


        .text1-portfolio {
            margin-top: 5px;
            font-size: 10px;
            font-weight: 600;
            line-height: 1.5;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.0875rem;
        }

        .text2-portfolio {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.0875rem;
        }
        .accent {
        color: var(--accent);

        }

        /* 4 WORK               MOBILE STYLE */
        #work h4 {
            margin-top: 2rem;
            margin-bottom: 15px;
        }

        #work h4:first-child {
            margin-top: 0;
        }

        .skills ul {
            list-style: none;
            list-style-type: none;
        }

        
        .skills li {
            color: var(--bg);
            background: var(--text-secondary);
            border-radius: 5px;
            border-color: transparent;
            display: inline-block;
            list-style: none;
            margin: 7px 0 0 0;
            font-size: 0.75rem;
            padding: 7px;
            text-align: justify;
        }

        .skills li:hover {
            background-color: var(--text-primary);
            color: var(--accent);
            transition: .5s;
        }

        .where {
            display: inline-block;
            color: var(--text-primary);
            font-weight: 500;
            padding-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .what {
            color: var(--text-secondary);
            line-height: 1.5;
            padding-bottom: 7rem;
            font-size: 0.8rem;
            letter-spacing: -0.2px;
        }



        /* 5 SERVICES           MOBILE STYLE */

        .dotted-bg {
            background: linear-gradient(90deg, var(--bg) 4px, transparent 2%) center,
                linear-gradient(var(--bg) 4px, transparent 2%) center, var(--text-tertiary);
            background-size: 5px 5px;

        }


        .numbers {
            position: absolute;
            display: inline-block;
            background-clip: text;
            font-size: 300px;
            font-weight: 900;
            background: transparent;
            -webkit-background-clip: text;
            -webkit-text-stroke: 2px var(--text-secondary);
            color: var(--text-secondary);
            letter-spacing: -25px;
            z-index: 0;
            opacity: .1;
            -webkit-transform: translate(-30px, -80px);
            transform: translate(-30px, -80px);
            line-height: 1;
            z-index: 0;
        }

        .grey {
            letter-spacing: 0;
            font-size: .75rem;
            color: var(--accent);
            font-weight: 600;
            line-height: 1;
            margin-top: .5px;
            margin-bottom: 3rem;
            text-transform: uppercase;

        }


        /* 5 COMPANIES         MOBILE STYLE */
        
        .companies-img {
            max-height: 50px;
            margin-left: 20px;
            margin-right: 50px;
        }
        .companies-bg {
            padding-top: 3rem;
            width: 100%;
            height: auto;
            padding-bottom: 3rem;
            padding-left: 30px;
            padding-right: 30px;
            background: var(--company);
            background-image: url("../img/noise1.png");
            background-blend-mode: overlay;
        }


        .companies-bg {
            /* The image used */
            background-image: url('../img/companies.jpg');
          
            /* Full height */
            height: 100%; 
          
            /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }
          
          /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
          @media only screen and (max-device-width: 1366px) {
            .parallax {
              background-attachment: scroll;
            }
          }
          
          

        /* 6 DESIGN SYSTEM      MOBILE STYLE */
        
        #design-system .quote{
            padding-right: 1.8rem;
            margin-top: -20px;
        }
        #design-system  .side-by-side {
        width: 100%;
        }

        .stamp {
            width: auto;
            max-width: 120px;
            margin-top: 1.5rem;
            margin-bottom: 20px;
            margin-left: 38%;
            text-align: right;
            mix-blend-mode: revert;
            -webkit-transform: rotate(-5deg);
            -moz-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            -o-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }

        .stamp:hover {
            opacity: 1;
        }


        /* 8 CONTACT            MOBILE STYLE */ 

        .stamp3 {
            width: 150px;
            height: auto;
            position: relative;
            top: 50px;
            left: 20%;
            -webkit-transform: rotate(-5deg);
            -moz-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            -o-transform: rotate(-5deg);
            transform: rotate(-5deg);
            background-image: url(../img//Af.svg);
        }


#contact p, h4{
    margin-bottom: 50px;
}

        form {
            max-width: 550px;
            padding: 10px;
            margin: 0 auto;
            line-height: 1;
        }

        input,
        textarea {
            width: 90%;
            height: 28px;
            padding: 0.6rem;
            border: 0;
            border-bottom: solid 1px var(--text-primary);
            background-color: transparent;
            color: var(--text-primary);
            margin: 8px 0;
            resize: none;
            outline: none;
            overflow: auto;
            font-size: 1rem;
            font-family: inherit;
        }

        input[type="submit"] {
            color: var(--text-primary);
            background-color: var(--text-primary);
            color: var(--bg);
            border-color: transparent transparent transparent;
            padding: 10px 30px;
            font-size: 14px;
            line-height: 1;
            border-radius: 30px;
            display: inline-block;
            max-width: 150px;
            margin-top: 20px;
            height: 35px;
        }


        input[type="submit"]:hover {
            background-color: var(--text-primary);
            color: var(--accent);
            opacity: .7;
            transition: .4s;
            }

        span {
            margin-right: 0.85rem;
            color: var(--bg);

        }
        ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: var(--text-secondary);
            font-size: 12px;
            text-transform: uppercase;
            opacity: 1; /* Firefox */
          }
          
          :-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: var(--text-primary);
            font-size: .8rem;

          }
          
          ::-ms-input-placeholder { /* Microsoft Edge */
            color: var(--text-primary);
            font-size: .8rem;

          }

        *,
        *:after,
        *:before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

#contact section,
.row, .column{
    margin-top: 0;
    margin-bottom: 1rem;
    padding-top: 0;
    padding-bottom: 0;
}

#contact h4 {
    font-weight: 600;
}

        /* Mini Button Styles */
        #ball {
            color:var(--accent);
            height: 10px;
            width: 10px;
            border-radius: 10px;
            -webkit-appearance: none;
            outline: none;
            cursor: var(--cursor_link), default;
            margin-left: 4px;
            padding-right: 4px;
            animation-name: ball;
            animation-duration: .2s;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-direction: alternate;
            z-index: 1000;
        }

        @keyframes ball {
            from {
                transform: scale(0.8);
                background: var(--accent);
            }

            to {
                transform: scale(1);
                background: var(--bg);
            }
        }



        .minibutton {
            display: inline-flex;
            height: 20px;
            width: auto;
            border: 2px solid var(--accent);
            border-radius:2px;
            color: var(--accent);
            padding-right: 4px;
            background-color: var(--bg);
            text-transform: uppercase;
            text-decoration: none;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.1px;
            align-items: center;
            text-align: center;
            justify-content: center;
            overflow: hidden;
            position: absolute;
            top: 10px;
            right: 0;
            animation-name: mini;
            animation-duration: .2s;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-direction: alternate;
            z-index: 1000;
        }

        @keyframes mini {
            from {
                transform: scale(1);
                background: var(--bg);
            }

            to {
                transform: scale(1);
                background: var(--accent);
            }
        }


.greetings-contact {
    color: var(--accent);
    font-size: 2rem;
}



.bg-black {
            background-color: var(--bg-tertiary);
            color: var(--text-primary);
            padding-bottom: 2rem;
            padding-left: 0px;
            padding-top: 2rem;
            width: 90%;
            height: auto;
          }
          
        /* 8 WEB DEV           MOBILE STYLE */ 
        .noise {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.0875rem;
            line-height: 1.2;
        }


        .noise-bg {
            padding-top: 3rem;
            padding-bottom: 3rem;
            padding-left: 30px;
            padding-right: 30px;
            background: var(--noise);
            background-image: url("../img/noise.png");
            background-blend-mode: overlay;
        }

        .web-dev {
            margin-top: 5px;
            font-size: 10px;
            font-weight: 600;
            line-height: 1.5;
            text-transform: uppercase;
            letter-spacing: 0.0875rem;
            color: var(--text-primary);
        }

        .web-dev span {
            color: #FF3C00;
            display: inline-block;
            padding-right: 2px;
            padding-left: 2px;
        }


        /* FOOTER               MOBILE STYLE */ 
        footer {
            text-align: right;
            bottom: 0;
            position: relative;
            margin-right: 50px;
            background-color: var(--accent);
            overflow: hidden;
            margin-bottom: 0;
            padding-top: 3rem;
            padding-bottom: .5rem;
            position: sticky;
            width: 100%;
        }

        footer h3 {
            color: var(--text-primary);
            font-size: 1.2rem;
            font-weight: 500;
            line-height: 1.2;
        }


        footer p {
            color: var(--text-primary);
            font-size: 0.65rem;
            line-height: 1.8;
            text-transform: uppercase;
        }

        footer a {
            color: #000;
            font-weight: 600;
            font-size: 0.65rem;
            line-height: 1.2;
        }

        footer a:hover {
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 600;
            transition: 0.5s;
        }

        footer h4 {
            font-size: .65rem;
            letter-spacing: .5px;
            font-weight: 600;
            line-height: 1.2;
            text-transform: uppercase;
        }

        footer h4::before {
            content: "";
            display: none;
        }

        /* HEART FOOTER */
        .pulse {
            color: rgb(0, 0, 0);
            position: inherit;
            display: inline-block;
            padding-right: 5px;
            padding-left: 5px;
            animation: animateHeart 1s infinite;
        }

        @keyframes animateHeart {
            0% {
                transform: scale(1.2);
            }

            50% {
                transform: scale(.9);
            }

            100% {
                transform: scale(1.2);
            }
        }


/*************************************************************************************************************************************/
/*DIFFERENT STYLE USED IN DESKTOP BELOW*************************************************************************************************************************************/
/*************************************************************************************************************************************/



@media screen and (min-width: 48em) {

    section {
        position: relative;
        margin: 0;
        min-height: 90vh;
        width: 100%;
        overflow: hidden;
        padding-top: 5rem;
        }

    #home {
        height: 90%;
    }

    .row,
    .column {
        padding: 0;
        box-sizing: border-box;
    }

    .row:last-child .column:last-child {
        margin-bottom: 0;
    }

    main {
        padding-right: 0;
        margin-left: 0;

    }


    .hp-cta span {
        top: 2px;
    }

    /* Menu Underline */
    .underline {
        display: inline-block;
        vertical-align: text-bottom;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: none;
        position: relative;
        text-decoration: none;
    }

    .underline:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 10px;
        right: 100%;
        bottom: -2px;
        background: var(--text-primary);
        height: 2px;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .underline:hover:before,
    .underline:focus:before,
    .underline:active:before {
        right: 10px;
    }

    .navbar a.navbar-logo {
        display: inline-block;
        font-weight: 500;
        padding: 0 50px;
        font-size: 1rem;
    }


    .navbar ul {
        padding: 0 70px 0 0;
    }

    /* VERS 1 */

    .navbar ul li a.talk {
        background-color: var(--text-primary);
        color: var(--bg);
        padding: 10px 30px;
        line-height: 1;
        border-radius: 30px;
        display: inline-block;
    }

    li a.talk:hover {
        color: var(--accent);
        background-color: var(--text-primary);
        opacity: .7;
        transition: .4s;
    }

    b {
        font-weight: 600;
    }

    h1 {
        color: var(--accent);
        font-size: 3.8rem;
        letter-spacing: -3px;
        line-height: .95;
        margin-left: 50px;
    }

    h2 {
        font-size: 3.8rem;
        color: var(--text-secondary);
        letter-spacing: -3px;
        line-height: .95;
        margin-left: 50px;
    }

    h3 {
        padding-left: 50px;
    }

    #home h4 {
        margin-left: 50px;
        padding-top: 6rem;
    }


    #portfolio h4 {
        margin-top: 7rem;
        margin-bottom: 2rem;
    }

    #services h3 {
        margin-bottom: 0;
    }

    #services h4 {
        margin-top: 4rem;
        margin-bottom: 0;
    }


    #services {
        padding-left: 60px;
    }

    
    #services p {
        margin-right: 2rem;
    }

    #services h3 {
        padding-left: 0px;
        padding-top: 3rem;
    }

    .hp-cta:before {
        content: "";
        position: absolute;
        top: 5px;
        left: -5px;
        display: block;
        border-radius: 80px;
        background: var(--accent);
        width: 60px;
        height: 60px;
        transition: all 0.4s ease;
    }

    .right-dot {
        top: 12px;
        right: 15px;
    }

    .roto {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-primary);
        background-color: transparent;
        position: absolute;
        top: 15%;
        left: 87%;
        overflow: hidden;
        display: flex;
        /* Use 'flex' to centre on the screen */
        flex-direction: row;
        justify-content: center;
        /* Centre text  vertically  inside the logo */
        align-items: center;
        /* Centre text horizontally inside the logo */
        margin: 0;
        width: 90px;
        height: 90px
    }

    .numbers {
        -webkit-transform: translate(-50px, -50px);
        transform: translate(-80px, -80px);
    }

    .grid {
        padding-left: 50px;
        padding-right: 30px;
    }

    #design-system .quote{
    margin-right: 20px;
    margin-top: 0;
}

footer {
    padding-left:50px;
}

#date {
    margin-top: -20px;
}
}