@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");:root{--clr:#fff}.bottombar-container{position:fixed;bottom:0;left:0;right:0;height:108px;background:#fff;border-radius:5px 5px 0 0;z-index:1099;will-change:transform;transform:translateZ(0)}.navigation{width:100%;padding-top:50px;height:70px;background:#000;position:fixed;bottom:0;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;border-radius:20px 20px 0 0}.navigation ul{display:flex;width:350px}.navigation ul li{position:relative;list-style:none;width:70px;height:70px;z-index:1}.navigation ul li a{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;text-align:center;font-weight:500}.navigation ul li a .icon{position:relative;display:block;line-height:75px;font-size:1.5em;text-align:center;transition:.5s;color:#fff}.navigation ul li.active a .icon{transform:translateY(-36px);color:#fff;left:3px}.navigation ul li a .text{position:absolute;color:var(--clr);font-weight:500;font-size:.75em;letter-spacing:.05em;transition:.5s;opacity:0;transform:translateY(20px)}.navigation ul li.active a .text{opacity:1;transform:translateY(10px)}.indicator{position:absolute;top:-52%;width:75px;height:75px;background:#b77dc4;border-radius:50%;border:6px solid var(--clr);transition:.5s;color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.indicator:before{left:-22px;border-top-right-radius:20px;box-shadow:1px -10px 0 0 #fff}.indicator:after,.indicator:before{content:"";position:absolute;top:50%;width:20px;height:20px;background:transparent}.indicator:after{right:-22px;border-top-left-radius:20px;box-shadow:-1px -10px 0 0 var(--clr)}.navigation ul li:first-child.active~.indicator{transform:translateX(calc(70px * 0))}.navigation ul li:nth-child(2).active~.indicator{transform:translateX(calc(70px * 1))}.navigation ul li:nth-child(3).active~.indicator{transform:translateX(calc(70px * 2))}.navigation ul li:nth-child(4).active~.indicator{transform:translateX(calc(70px * 3))}.navigation ul li:nth-child(5).active~.indicator{transform:translateX(calc(70px * 4))}.bottombar-container.section1-style{background-color:#000;transition:background-color .3s ease,color .3s ease}.bottombar-container.section2-style{background-color:#fff;transition:background-color .3s ease,color .3s ease}.bottombar-container.section3-style{background-color:#381d61;transition:background-color .3s ease,color .3s ease}.indicator.section1-style{border:6px solid #000;transition:border-color .3s ease}.indicator.section3-style{border:6px solid #381d61;transition:border-color .3s ease}.indicator.section1-style:after{box-shadow:-1px -10px 0 0 #000}.indicator.section1-style:after,.indicator.section3-style:after{background:transparent;border-top-left-radius:20px;transition:all .3s ease}.indicator.section3-style:after{box-shadow:-1px -10px 0 0 #381d61}.indicator.section1-style:before{box-shadow:1px -10px 0 0 #000}.indicator.section1-style:before,.indicator.section3-style:before{background:transparent;border-top-right-radius:20px;transition:all .3s ease}.indicator.section3-style:before{box-shadow:1px -10px 0 0 #381d61}.navigation.section1-style,.navigation.section3-style{background-color:#fff;transition:background-color .3s ease,color .3s ease}.navigation.section1-style .icon,.navigation.section1-style .text,.navigation.section3-style .icon,.navigation.section3-style .text{color:#000}