:root {
            --blueAdw: #005db5;
            --darkblueAdw: #004C95;
            --blackAdw: #000000;
        }
        
        @font-face {
            font-family: Avenir;
            src: url(../font/Avenir/AvenirLTPro-Black.otf);
            src: url(../font/Avenir/AvenirLTPro-BlackOblique.otf);
            src: url(../font/Avenir/AvenirLTPro-Book.otf);
            src: url(../font/Avenir/AvenirLTPro-BookOblique.otf);
            src: url(../font/Avenir/AvenirLTPro-Heavy.otf);
            src: url(../font/Avenir/AvenirLTPro-HeavyOblique.otf);
            src: url(../font/Avenir/AvenirLTPro-Light.otf);
            src: url(../font/Avenir/AvenirLTPro-LightOblique.otf);
            src: url(../font/Avenir/AvenirLTPro-Medium.otf);
            src: url(../font/Avenir/AvenirLTPro-MediumOblique.otf);
            src: url(../font/Avenir/AvenirLTPro-Oblique.otf);
            src: url(../font/Avenir/AvenirLTPro-Roman.otf);
        }
        * {
            font-family: 'Avenir', sans-serif;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            color: var(--blackAdw);
            background-image: url("../images/menu-background.min.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            min-height: 600px;
            overflow: hidden;
        }

        #color, 
        #typhography{
            background-color: #f5fbff;
        }
        .text-danger{
            color: #AC3835 !important;
        }
        
        .menu p {
            font-size: 20px;
        }
        
        .logo-container {
            width: 90px;
        }
        .navbar{
            margin-right: 15px;
        }
        .navbar svg path{
            transition: all .2s ease;
        }

        .navbar.scrolling-active{
            transition: all .2s ease;
        }

        .navbar.scrolling-active svg path{
            fill: #fff;
        }
        body.small svg path{
            fill: #fff !important;
        }

        .navbar.scrolling-active .menu__btn>span,
        .navbar.scrolling-active .menu__btn>span::before,
        .navbar.scrolling-active .menu__btn>span::after {
            background-color: #3a3a3a;
        }
        .menu__btn>span::before{
            width: 80% !important;
        }
        .menu__btn>span::after{
            width: 60% !important;
        }
        body.small .menu__btn>span::before{
            width: 100% !important;
        }
        body.small .menu__btn>span::after{
            width: 100% !important;
        }

        
        .navbar.mobile{
            background-color: #ffffff;
            box-shadow: 0 1px 5px #00000010;
        }
        .navbar.mobile .menu__btn>span,
        .navbar.mobile .menu__btn>span:before,
        .navbar.mobile .menu__btn>span:after{
            background-color: #3a3a3a;
        }
        body.small .navbar.mobile .menu__btn>span,
        body.small .navbar.mobile .menu__btn>span:before,
        body.small .navbar.mobile .menu__btn>span:after{
            background-color: white;
        }
        body.small .navbar.mobile{
            background-color: transparent;
            box-shadow: none;
        }
        
        #menu__toggle {
            opacity: 0;
        }
        
        #menu__toggle:checked~.menu__btn>span {
            transform: rotate(45deg);
        }
        
        #menu__toggle:checked~.menu__btn>span::before {
            top: 0;
            transform: rotate(0);
        }
        
        #menu__toggle:checked~.menu__btn>span::after {
            top: 0;
            transform: rotate(90deg);
        }
        
        .menu__btn {
            display: flex;
            align-items: center;
            position: fixed;
            top: 20px;
            right: 45px;
            width: 26px;
            height: 26px;
            cursor: pointer;
            z-index: 1;
        }
        
        .menu__btn>span,
        .menu__btn>span::before,
        .menu__btn>span::after {
            display: block;
            position: absolute;
            right: 0;
            width: 100%;
            height: 3px;
            background-color: white;
            transition-duration: .25s;
            border-radius: 5px;
        }
        
        .menu__btn>span::before {
            content: '';
            top: -8px;
        }
        
        .menu__btn>span::after {
            content: '';
            top: 8px;
        }
        body.small .menu__btn>span,
        body.small .menu__btn>span::before,
        body.small .menu__btn>span::after{
            background-color: white;
        }
        main{
            background-color: white;
            overflow: auto;
            height: 100vh;
            min-height: 600px;
            position: relative;
            transition: all .2s ease;
            z-index: 999;
            scroll-behavior: smooth;
            display: block;
        }
        body.small main{
            transform: perspective(1300px) rotateY(20deg) translateZ(400px) scale(0.5);
            transform-style: preserve-3d;
            height: 100vh;
            transform-origin: left;
            overflow: hidden;
        }
        .shadow {
            position: absolute;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
            transform-style: preserve-3d;
            transform-origin: left;
            transition: 0.5s;
            background-color: white;
            
            min-height: 600px !important;
        }
          
        .shadow.one {
            z-index: -1;
            opacity: 0.15;
        }
        
        .shadow.two {
            z-index: -2;
            opacity: 0.1;
        }
        body.small .shadow.one {
            animation: shadow-one 0.6s ease-out;
            transform: perspective(1300px) rotateY(20deg) translateZ(315px) scale(0.5);
        }
        @keyframes shadow-one {
            0% {
              transform: translate(0);
            }
          
            5% {
              transform: perspective(1300px) rotateY(20deg) translateZ(410px) scale(0.5);
            }
          
            100% {
              transform: perspective(1300px) rotateY(20deg) translateZ(315px) scale(0.5);
            }
        }

        body.small  .shadow.two {
            animation: shadow-two 0.6s ease-out;
            transform: perspective(1300px) rotateY(20deg) translateZ(220px) scale(0.5);
          }
          
        @keyframes shadow-two {
            0% {
                transform: translate(0);
            }
            
            20% {
                transform: perspective(1300px) rotateY(20deg) translateZ(410px) scale(0.5);
            }
            
            100% {
                transform: perspective(1300px) rotateY(20deg) translateZ(220px) scale(0.5);
            }
        }
        
        #hero {
            height: calc(110vh - 75.5px);
            min-height: 600px;
            background-image: url('../images/landing-bg-min.jpg');
            background-size: cover  ;
            background-repeat: no-repeat;
            background-position: bottom;
        }
        
        .leaves-background {
            position: absolute;
            right: 0;
            top: 0;
            width: 900px;
            z-index: 1;
            -webkit-user-drag: none;
        }
        
        img {
            -webkit-user-drag: none;
            -webkit-user-select: none;
        }
        
        .blue-ornament-about {
            width: 100%;
            -webkit-user-drag: none;
        }
        
        .hero-text {
            width: 1000px;
            padding-left: 100px;
            padding-right: 100px;
        }
        
        .hero-text p:nth-of-type(1) {
            color: var(--blueAdw);
            margin-bottom: 0;
            font-size: 35px;
            font-weight: 800;
        }
        
        .hero-text h1 {
            font-weight: 800;
            font-size: 120px;
            color: #ffffff90;
        }

        main .menu{
            position: relative;
            z-index: 9;
        }
        
        .py-menu {
            padding-bottom: 150px;
            padding-top: 150px;
        }
        
        #about {
            color: #000000;
        }
        
        #about .menu-text {
            background-color: #f5fbff;
            background-image: url('../images/light-ray.png');
            background-repeat: no-repeat;
            background-size: 40%;
            background-position: left top;
            width: 100%;
        }
        
        #about .menu-text * {
            width: 800px;
        }
        
        .menu-text {
            width: 1000px;
            padding-right: 125px;
            padding-left: 125px;
        }
        
        .menu-number {
            font-size: 75px;
            font-weight: 800;
            filter: opacity(.5);
        }
        
        .menu-title {
            font-size: 100px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .menu-title.small{
            font-size: 56px;
        }

        .menu-bg{
            /* background: #ffffff url("../images/bg-menu.png"); */
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top;
        }
        
        #personality {
            background-image: url("../images/leaf-bg-1-min.jpg");
            background-size: cover;
            color: white;
        }
        
        .menu-text:not(:last-of-type) {
            margin-bottom: 70px;
        }
        
        .menu-number {
            color: var(--blueAdw);
        }
        #about .menu-number {
            color: var(--blueAdw);
        }
        #personality .menu-number {
            color: white;
        }
        
        #sidebar {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            z-index: 9999;
        }
        
        #sidebar ul li a {
            text-align: right;
            color: #005db5;
            font-size: 26px;
            font-weight: 600;
            text-decoration: none;
            transition: all .2s ease-in;
        }
        
        #sidebar ul li.active  a{
            background-color: transparent;
        }
        
        #sidebar .nav-pills .nav-item {
            display: flex;
            justify-content: right;
            align-items: center;
            overflow: hidden;
        }
        
        .nav-indicator {
            height: 50px;
            width: 3px;
            background-color: var(--blueAdw);
            opacity: .3;
        }
        
        #sidebar ul li.active  a .nav-indicator {
            opacity: 1;
        }
        
        .nav {
            position: relative;
        }
        
        .nav-text {
            position: absolute;
            white-space: nowrap;
            left: 0;
            top: 50%;
            opacity: 1;
            display: flex;
            flex-direction: column;
            justify-content: right;
            transition: none;
            transform: translate(100px, -70%);
        }
        
        #sidebar ul li.active  a .nav-text {
            transform: translate(-100%, -50%);
            opacity: 1;
        }
        
        .nav-line {
            width: 40px;
            height: 3px;
            background-color: var(--blueAdw);
            margin-left: auto;
            transition: .2s all ease;
        }
        
        .nav-number,
        .nav-name {
            font-size: 32px;
            font-weight: bold;
            transition: .2s all ease;
        }
        
        .nav-number {
            opacity: .5;
        }

        body.small .nav-indicator,
        body.small .nav-line
        {
            display: none;
        }
        body.small .nav-number{
            margin-right: 20px;
        }
        body.small .nav-number,
        body.small .nav-name{
            font-size: 40px;
            color: white !important;
            text-align: left;
        }
        body.small .nav-text{
            opacity: .5;
            position: static;
            transform: translate(0%,0%);
            flex-direction: row;
        }
        body.small #sidebar ul li.active  a .nav-text{
            opacity: 1;
            transform: translate(0%,0%);
        }
        body.small .nav-item{
            justify-content: left !important;
        }

        /* .nav-small{
            display: none;
        }
        body.small .nav-pills{
            display: none !important;
        }
        body.small .nav-small{
            display: block;
        }
        .nav-small .nav-item{
            text-align: left !important;
        }
        .nav-small .nav-link{
            text-align: left !important;
            font-size: 40px !important;
            font-weight: bold !important;
            color: white !important;
        }
         */
        .logo-item {
            display: flex;
            align-items: center;
        }   
        .text-box {
            width: 250px !important;
            background-color: #e5e5e5;
            padding: 15px;
            margin-bottom: 0;
            height: 100%;
            border-radius: 10px;
            font-size: 16px !important;
            display: flex;
            align-items: center;
        }

        .pallete-container{
            display: flex;
            flex-wrap: wrap;
            margin-left: -1.2rem;
        }
        .pallete{
            background-color: #F4F5F7;
            flex: 0 0 185px;
            margin:0 0 1.2rem 1.2rem;
            height: 200px;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 0 8px #DCDDDE;
        }
        .pallete:not(:last-of-type){
            margin-right: 15px;
        }
        .pallete p{
            font-size: 10px;
            margin-bottom: 0;
        }
        .pallete-white{
            background-color: #fff;
            border: 1px solid #e3e3e3;
        }
        .pallete-black{
            background-color: #3A3A3A;
        }
        .pallete-black p{
            color: #fff;
        }
        .pallete-ocean{
            background-color: #005db5;
        }
        .pallete-ocean p{
            color: #fff;
        }
        .pallete-dullgreen{
            background-color: #4B8D38;
        }
        .pallete-dullgreen p{
            color: black;
        }
        .pallete-dullorange{
            background-color: #B28416;
        }
        .pallete-dullorange p{
color: white;
        }
        .pallete-orange{
            background-color: #E5AA1C;
        }
        .pallete-orange p{
color: white;
        }
        .pallete-mono{
            margin-right: 0 !important;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        .pallete-mono p{
            font-size: 10px !important;
        }
        .color-area{
            height: 90px;
            padding: 10px;
            position: relative;
        }
        .color-area .circle{
            position: absolute;
            left: 10px;
            bottom: 10px;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background-color: white;
        }
        .color-area .circle-dark{
            position: absolute;
            left: 10px;
            bottom: 10px;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background-color: #00284E;
        }
        .text-area{
            height: 110px;
            padding: 20px;
            font-size: 10px;
        }
        .text-area > div{
            display: flex;
            margin-top: 10px;
        }
        .text-area > div p{
            flex: 0 0 50%;
        }
        .pallete-blue-10{
            background-color: #003669;
            color: white;
        }
        .pallete-blue-9{
            background-color: #023E78;
            color: white;
        }
        .pallete-blue-8{
            background-color: #02519B;
            color: white;
        }
        .pallete-blue-7{
            background-color: #005DB5;
            color: white;
        }
        .pallete-blue-6{
            background-color: #1074D2;
            color: white;
        }
        .pallete-blue-5{
            background-color: #24A3F2;
            color: white;
        }
        .pallete-blue-4{
            background-color: #55BDFC;
            color: white;
        }
        .pallete-blue-3{
            background-color: #85D1FF;
            color: white;
        }
        .pallete-blue-2{
            background-color: #AADEFE;
            color: white;
        }
        .pallete-blue-1{
            background-color: #C1E8FF;
            color: white;
        }

        .pallete-orange-10{
            background-color: #332401;
            color: white;
        }
        .pallete-orange-9{
            background-color: #664700;
            color: white;
        }
        .pallete-orange-8{
            background-color: #946700;
            color: white;
        }
        .pallete-orange-7{
            background-color: #B78000;
            color: white;
        }
        .pallete-orange-6{
            background-color: #DE9B00;
            color: white;
        }
        .pallete-orange-5{
            background-color: #FFB406;
            color: white;
        }
        .pallete-orange-4{
            background-color: #FFC130;
            color: white;
        }
        .pallete-orange-3{
            background-color: #FFD063;
            color: white;
        }
        .pallete-orange-2{
            background-color: #FCDD95;
            color: white;
        }
        .pallete-orange-1{
            background-color: #FFE7AF;
            color: white;
        }
        .pallete-green-5{
            background-color: #4B8D38;
            color: white;
        }
        .pallete-green-4{
            background-color: #61B548;
            color: white;
        }
        .pallete-green-3{
            background-color: #6CCA51;
            color: white;
        }
        .pallete-green-2{
            background-color: #89D473;
            color: white;
        }
        .pallete-green-1{
            background-color: #F0F9ED;
            color: white;
        }
        .pallete-red-5{
            background-color: #AC3835;
            color: white;
        }
        .pallete-red-4{
            background-color: #DD4C45;
            color: white;
        }
        .pallete-red-3{
            background-color: #F6554D;
            color: white;
        }
        .pallete-red-2{
            background-color: #F77670;
            color: white;
        }
        .pallete-red-1{
            background-color: #FEEEEE;
            color: white;
        }
        .pallete-neutral-6{
            background-color: #000000;
            color: white;
        }
        .pallete-neutral-5{
            background-color: #474747;
            color: white;
        }
        .pallete-neutral-4{
            background-color: #565656;
            color: white;
        }
        .pallete-neutral-3{
            background-color: #BBBBBB;
            color: white;
        }
        .pallete-neutral-2{
            background-color: #DCDDDE;
            color: white;
        }
        .pallete-neutral-1{
            background-color: #FFFFFF;
            color: white;
        }

        .background-container{
            display: flex;
            flex-wrap: wrap;
        }
        .column{
            flex:25%;
            max-width: 25%;
            padding: 0 4px;
        }
        .column img{
            margin-top: 8px;
            vertical-align: middle;
            width: 100%;
            -webkit-user-drag: auto;
            user-select: auto;
            transition: all .8s cubic-bezier(0.16, 1, 0.29, 0.5);
        }
        .column img:hover{
            transform: scale(1.05) !important;
            box-shadow: 0 0 5px 2px #00000020;
            position: relative;
            z-index: 99;
        }

        .font-style{
            display: flex;
        }
        .font-style:not(:last-of-type){
            margin-bottom: 8px;
        }
        .font-style > div:first-child{
            flex: 50%;
            max-width: 50%;
        }
        .font-style > div:last-child{
            flex: 50%;
            max-width: 50%;
        }
        .font-weight-medium{
            font-weight: 600;
        }
        .font-weight-black{
            font-weight: 900;
        }
        .type-scale{
            display: flex;
        }
        .type-scale-contoh{
            display: flex;
        }
        .type-scale > div:first-child{
            flex: 60%;
            max-width: 60%;
        }
        .type-scale > div:last-child{
            flex: 40%;
            max-width: 40%;
        }
        .type-scale-contoh > div:first-child{
            flex: 50%;
            max-width: 50%;
        }
        .type-scale-contoh > div:last-child{
            flex: 50%;
            max-width: 50%;
        }

        .box{
            padding: 20px;
            border-radius: 10px;
            height: 100%;
        }
        .box p:first-child{
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .text-green{
            color: #89D473;
        }
        .text-red{
            color: #F77670;
        }
        .box p:last-child{
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 0;
        }
        .box-green{
            background-color: #F0F9ED;
        }
        .box-red{
            background-color: #FEEEEE;
        }

        .tipografi{
            display: flex;
            padding: 30px 0;
        }
        .tipografi:not(:last-of-type){
            border-bottom: 1px solid #e8e8e8;
        }
        .tipografi > div:first-child{
            flex: 30%;
            max-width: 30%;
            padding-right: 20px;
        }
        .tipografi > div:first-child *{
            font-size: 14px;
            text-align: left;
            font-weight: 600;
            margin-bottom: 0;
        }
        .tipografi > div:first-child strong{
            font-weight: 800;
        }
        .tipografi > div:last-child{
            flex: 70%;
            max-width: 70%;
            display: flex;
            align-items: center;
        }
        .tipografi > div:last-child *{
            margin-bottom: 0;
        }
        .tipografi > div:last-child .hero{
            font-size: 48px;
            font-weight:900;
        }
        .tipografi > div:last-child h1{
            font-size: 32px;
            font-weight:900;
        }
        .tipografi > div:last-child h2{
            font-size: 24px;
            font-weight:900;
        }
        .tipografi > div:last-child h3{
            font-size: 20;
            font-weight:900;
        }
        .tipografi > div:last-child h4{
            font-size: 16px;
            font-weight:600;
        }
        .tipografi > div:last-child h5{
            font-size: 14px;
            font-weight:900;
        }
        .tipografi > div:last-child p{
            font-size: 14px;
            font-weight: 600;
        }
        .tipografi > div:last-child .body-lg{
            font-size: 14px;
            line-height: 20px;
        }
        .tipografi > div:last-child .body-semibold{
            font-size: 14px;
            line-height: 22px;
            font-weight: 700;
        }
        .tipografi > div:last-child .body{
            font-size: 14px;
            line-height: 22px;
        }
        .tipografi > div:last-child .body-s{
            font-size: 12px;
            line-height: 18px;
        }
        .tipografi > div:last-child .body-xs{
            font-size: 10px;
            line-height: 14px;
        }
        .tipografi > div:last-child .caption-s{
            font-size: 10px;
            line-height: 14px;
            font-weight: 800;
            text-transform: uppercase;
        }

        footer{
            background-color: #004d95;
            color: white;
            padding: 16px 24px;
        }
        footer p{
            margin-bottom: 0;
        }
        footer ul {
            list-style-type: none;
            margin-bottom: 0;
            margin-right: -5px;
            padding: 0;
        }
        footer ul li{
            margin: 5px;
        }
        footer ul li img{
            width: 30px;
            height: 30px;
        }

        #greet{
            padding-top: 150px;
            background-color: white;
        }
        #greet p:first-of-type{
            font-size: 100px;
            font-weight: bold;
            margin-bottom: 0;
            color:#005db5;
        }
        #greet p:last-of-type{
            font-size: 28px;
            font-weight: medium;
            margin-bottom: 0;
            color:#005db5;
        }
        #greet p:last-of-type a{
            color: #005db5;
            font-weight: bold;
        }
        #greet {
            background-image: url("../images/Intersect.png");
            background-position: bottom;
            background-size: 100%;
            position: relative;
            background-repeat: no-repeat;
        }
        #greet img{
            width: 100%;
            margin-top: 150px;
        }
    @media screen and (max-width:1366px) {
        body.small .nav-number, body.small .nav-name{
            font-size:30px;
        }
    }
    @media screen and (max-width:1200px) {
        .menu-title {
            font-size: 80px;
        }
        .menu-title.small{
            font-size: 48px;
        }
        .menu-text{
            width: 100%;
            padding-right: 320px;
        }
        #about .menu-text *{
            width:100%;
        }
        body.small main{
            transform: perspective(1300px) rotateY(20deg) translateZ(400px) translateX(-200px) scale(0.5);
        }
        body.small .shadow.one {
            animation: shadow-one 0.6s ease-out;
            transform: perspective(1300px) rotateY(20deg) translateZ(315px) translateX(-200px) scale(0.5);
        }
        @keyframes shadow-one {
            0% {
              transform: translate(0);
            }
          
            5% {
              transform: perspective(1300px) rotateY(20deg) translateZ(410px) translateX(-200px) scale(0.5);
            }
          
            100% {
              transform: perspective(1300px) rotateY(20deg) translateZ(315px) translateX(-200px) scale(0.5);
            }
        }
        body.small  .shadow.two {
            animation: shadow-two 0.6s ease-out;
            transform: perspective(1300px) rotateY(20deg) translateZ(220px) translateX(-200px) scale(0.5);
          }
        @keyframes shadow-two {
            0% {
                transform: translate(0);
            }
            
            20% {
                transform: perspective(1300px) rotateY(20deg) translateZ(410px) translateX(-200px) scale(0.5);
            }
            
            100% {
                transform: perspective(1300px) rotateY(20deg) translateZ(220px) translateX(-200px) scale(0.5);
            }
        }
    }
    @media screen and (max-width:991px) {
        .nav-number, .nav-name{
            font-size:18px;
        }
        .menu-text {
            padding-right: 150px;
        }
        .text-box{
            width: 100% !important;
        }
        .logo-item{
            margin-bottom: 1rem;
        }

        /* .hero-text{
            margin-top: 100px;
        } */
        .hero-text p:nth-of-type(1) {
            font-size: 24px;
        }
        .hero-text h1 {
            font-size: 80px;
        }
        .hero-text svg {
            width: 125px;
            height: 125px;
        }

        .menu p {
            font-size: 16px;
        }

        .menu-title {
            font-size: 56px;
        }
        .menu-title.small{
            font-size: 36px;
        }

        .nav-link{
            padding: 5px;
        }
        .nav-indicator{
            height: 30px;
        }
    }
    @media screen and (max-width:856px) {
        .pallete{
            flex: 0 0 45%;
        }
        #greet p:first-of-type{
            font-size: 62px;
        }
        #greet p:last-of-type{
            font-size: 20px;
        }
    }
    @media screen and (max-width:800px) {
        body.small main{
            transform: perspective(1300px) rotateY(20deg) translateZ(400px) translateX(-300px) scale(0.5);
        }
        body.small .shadow.one {
            animation: shadow-one 0.6s ease-out;
            transform: perspective(1300px) rotateY(20deg) translateZ(315px) translateX(-300px) scale(0.5);
        }
        /* footer{
            padding: 16px 24px;
        } */
        @keyframes shadow-one {
            0% {
              transform: translate(0);
            }
          
            5% {
              transform: perspective(1300px) rotateY(20deg) translateZ(410px) translateX(-300px) scale(0.5);
            }
          
            100% {
              transform: perspective(1300px) rotateY(20deg) translateZ(315px) translateX(-300px) scale(0.5);
            }
        }
        body.small  .shadow.two {
            animation: shadow-two 0.6s ease-out;
            transform: perspective(1300px) rotateY(20deg) translateZ(220px) translateX(-300px) scale(0.5);
          }
        @keyframes shadow-two {
            0% {
                transform: translate(0);
            }
            
            20% {
                transform: perspective(1300px) rotateY(20deg) translateZ(410px) translateX(-300px) scale(0.5);
            }
            
            100% {
                transform: perspective(1300px) rotateY(20deg) translateZ(220px) translateX(-300px) scale(0.5);
            }
        }
        #sidebar{
            display: none !important;
        }
        body.small #sidebar{
            display: block !important;
        }
        .menu-text {
            padding-right: 125px;
        }

        #logos .menu-text > .d-flex{
            flex-direction: column;
            align-self: center !important;
        }
        #logos .menu-text > .d-flex img{
            width: 200px;
        }
        #logos .menu-text > .d-flex p{
            padding-right: 0 !important;
            padding-left: 0 !important;
            padding-top: 3em;
        }
    }
    @media screen and (max-width:725px){
        .hero-text h1 {
            font-size: 60px;
        }
        .hero-text svg {
            width: 90px;
            height: 90px;
        }
    }
    @media screen and (max-width:675px) {
        .menu-title {
            font-size: 42px;
        }
        .menu-title.small{
            font-size: 24px;
        }
    }
    @media screen and (max-width:640px) {
        .menu-text {
            padding-left: 10px;
            padding-right: 30px;
        }
        .hero-text{
            padding-left: 10px;
            padding-right: 30px;
        }
        .navbar.scrolling-active svg path{
            fill: #005db5;
        }
        .navbar.scrolling-active .menu__btn>span,
        .navbar.scrolling-active .menu__btn>span::before,
        .navbar.scrolling-active .menu__btn>span::after {
            background-color: #3a3a3a;
        }
        #greet{
            padding-top: 70px;
        }
        #greet p:first-of-type{
            font-size: 42px;
        }
        #greet p:last-of-type{
            font-size: 14px;
        }
        #greet img{
            margin-top: 70px;
        }
    }
    @media screen and (max-width : 568px) {
        footer > .row > .col-12 > .d-flex{
            flex-direction: column !important;
        }
        footer > .row > .col-12 > .d-flex > div:first-of-type{
            margin-bottom: 5px;
        }
    }
    @media screen and (max-width:500px) {
        body.small main{
            transform: perspective(1300px) rotateY(20deg) translateZ(400px) translateX(-1000px) scale(0.5);
            opacity: 0;
        }
        body.small .shadow.one {
            animation: shadow-one 0.6s ease-out;
            transform: perspective(1300px) rotateY(20deg) translateZ(315px) translateX(-1000px) scale(0.5);
        }
        @keyframes shadow-one {
            0% {
              transform: translate(0);
            }
          
            5% {
              transform: perspective(1300px) rotateY(20deg) translateZ(410px) translateX(-1000px) scale(0.5);
            }
          
            100% {
              transform: perspective(1300px) rotateY(20deg) translateZ(315px) translateX(-1000px) scale(0.5);
              opacity: 0;
            }
        }
        body.small  .shadow.two {
            animation: shadow-two 0.6s ease-out;
            transform: perspective(1300px) rotateY(20deg) translateZ(220px) translateX(-1000px) scale(0.5);
          }
        @keyframes shadow-two {
            0% {
                transform: translate(0);
            }
            
            20% {
                transform: perspective(1300px) rotateY(20deg) translateZ(410px) translateX(-1000px) scale(0.5);
            }
            
            100% {
                transform: perspective(1300px) rotateY(20deg) translateZ(220px) translateX(-1000px) scale(0.5);
                opacity: 0;
            }
        }
        body.small #sidebar{
            width: 100%;
            right: 0;
            padding: 50px;
        }
        .hero-text h1 {
            font-size: 50px;
        }
    }
    
    @media screen and (max-width:402px) {
        body.small #sidebar{
           width: 100%;
           right: 0;
       }
        body.small .nav-number, body.small .nav-name{
            font-size:24px;
        }
        .pallete{
            flex: 0 0 100%;
        }
        footer p{
            font-size: 12px;
        }
        footer ul li img{
            width: 25px;
            height: 25px;
        }
    }
    @media screen and (max-height:550px){
        body.small #sidebar{
            top: 100px;
            transform: translateY(0);
            height: 65%;
            overflow: auto;
        }
        body.small #sidebar::-webkit-scrollbar {
            width: 3px;
        }
        body.small #sidebar::-webkit-scrollbar-thumb {
            background: rgb(199, 199, 199);
            border-radius: 5px;
        }
        
        body.small #sidebar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
    }
    @media screen and (max-height:550px){
        .nav-indicator{
            display: none;
        }
    }