:root{--references-bg:linear-gradient(#dff8f1,#f4f7f9);--references-h1-bg:linear-gradient(90deg,#188149,#1380ba);--li-before-bg1:linear-gradient(180deg,transparent 20%,#f5c5d7);--li-before-bg2:linear-gradient(180deg,transparent 20%,#b5e76c);--li-before-bg3:linear-gradient(180deg,transparent 20%,#9dcdf7);--li-before-bg4:linear-gradient(180deg,transparent 20%,#f5cd9d);--li-before-bg5:linear-gradient(180deg,transparent 20%,#a3f2ef);--li-before-bg6:linear-gradient(180deg,transparent 20%,#6ee7b7);--li-before-bg7:linear-gradient(180deg,transparent 20%,#ddb8fa);--li-before-bg8:linear-gradient(180deg,transparent 20%,#ffcdcd)}html[data-theme=dark]{--references-bg:linear-gradient(90deg,#181b21,#181b21);--references-h1-bg:linear-gradient(90deg,#65c0f9,#34d07d);--li-before-bg1:none;--li-before-bg2:none;--li-before-bg3:none;--li-before-bg4:none;--li-before-bg5:none;--li-before-bg6:none;--li-before-bg7:none;--li-before-bg8:none}.reference-main{background:var(--references-bg);display:flex;justify-content:center;position:relative}.reference-main>.container{padding-bottom:120px;position:relative;width:80%}.reference-main>.container>.reference-header{display:flex;justify-content:center;margin-top:100px}.reference-main>.container>.reference-header>h1{-webkit-background-clip:text;background-image:var(--references-h1-bg);font-size:24px;font-weight:700;position:relative;text-align:center;z-index:100;-webkit-text-fill-color:transparent}.reference-main>.container>.reference-list{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-top:40px}.reference-main>.container>.reference-list>li{transition:all .2s linear}.reference-main>.container>.reference-list>li>a{background-color:var(--bg-white-black2);border:1px solid var(--border-silver-black1);border-radius:5px;box-shadow:0 2px 12px #0000001a;display:block;height:150px;position:relative;text-align:center;transition:all .2s linear;width:120px}.reference-main>.container>.reference-list>li>a:before{bottom:0;content:"";height:0;left:0;position:absolute;transition:all .2s linear;width:100%;z-index:1}.reference-main>.container>.reference-list>li>a:hover:before{height:100%}.reference-main>.container>.reference-list>li>a>img{height:70px;margin-top:15px;opacity:var(--img-opacity);position:relative;width:70px;z-index:2}.reference-main>.container>.reference-list>li>a>h2{font-size:16px;font-weight:700;position:relative;z-index:2}.reference-main>.container>.reference-list>li:hover{transform:scale(1.06)}.reference-main>.container>.reference-list>li:first-child>a:before{background:var(--li-before-bg1)}.reference-main>.container>.reference-list>li:nth-child(2)>a:before{background:var(--li-before-bg2)}.reference-main>.container>.reference-list>li:nth-child(3)>a:before{background:var(--li-before-bg3)}.reference-main>.container>.reference-list>li:nth-child(4)>a:before{background:var(--li-before-bg4)}.reference-main>.container>.reference-list>li:nth-child(5)>a:before{background:var(--li-before-bg5)}.reference-main>.container>.reference-list>li:nth-child(6)>a:before{background:var(--li-before-bg6)}.reference-main>.container>.reference-list>li:nth-child(7)>a:before{background:var(--li-before-bg7)}.reference-main>.container>.reference-list>li:nth-child(8)>a:before{background:var(--li-before-bg8)}@media screen and (min-width:576px){.reference-main>.container{padding-bottom:250px}.reference-main>.container>.reference-header{margin-top:120px}.reference-main>.container>.reference-header>h1{font-size:28px}.reference-main>.container>.reference-list{gap:50px;margin-top:70px}.reference-main>.container>.reference-list>li>a{height:180px;width:150px}.reference-main>.container>.reference-list>li>a>img{height:90px;width:90px}.reference-main>.container>.reference-list>li>a>h2{font-size:17px}}@media screen and (min-width:768px){.reference-main>.container:before{background-image:url(../imgs/sites/icons/shape-left.svg);height:145px;left:50px;width:95px}.reference-main>.container:after,.reference-main>.container:before{background-size:contain;content:"";opacity:.5;position:absolute;top:50px}.reference-main>.container:after{background-image:url(../imgs/sites/icons/shape-right.svg);height:152px;right:0;width:186px}}@media screen and (min-width:992px){.reference-main>.container>.reference-list>li>a{height:200px;width:160px}.reference-main>.container>.reference-list>li>a>img{height:100px;width:100px}}