@property --α {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

:root {
       --primary-color: #c6a15b;
    --bg-color: hsl(from var(--primary-color) h s calc(l / 100));
    --border-radius: .5em;
    --transparency: .08;
    --icon-size: 2.5em;
}

* {
    box-sizing: border-box;
    transition: all .3s cubic-bezier(.445, .05, .55, .95)
}

a {
    appearance: none;
    color: inherit;
    text-decoration: none
}

@font-face {
    font-family: Shabnam;
    src: url(.//Shabnam-FD-BosHQoky.woff2);
    font-weight: 400
}

@font-face {
    font-family: Shabnam;
    src: url(.//Shabnam-Bold-FD-Dic6DtCy.woff2);
    font-weight: 700
}

@font-face {
    font-family: Shabnam;
    src: url(.//Shabnam-Thin-FD-DuCs3Jzs.woff2);
    font-weight: 100
}

@font-face {
    font-family: Shabnam;
    src: url(.//Shabnam-Light-FD-ChW8jQ8o.woff2);
    font-weight: 300
}

@font-face {
    font-family: Shabnam;
    src: url(.//Shabnam-Medium-FD-CnXy4CS2.woff2);
    font-weight: 500
}

body,
html {
    background: var(--bg-color);
    color: #fff;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    font-family: Shabnam
}

body {
    justify-content: center;
    align-items: center;
    display: flex
}

main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex
}

:is(h1, h2, h3, h4, h5, h6) {
    margin: 0
}

section {
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin-block: 5px;
    display: flex
}

.container {
    padding: 2px;
    position: relative
}

#pages.container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
    display: flex
}

@media screen and (width<=610px) {
    #pages.container {
        flex-direction: column
    }
}

.border-anim {
    border-radius: calc(var(--border-radius) * 2);
    border: 6px solid #0000
}

.border-anim:before,
.border-anim:after {
--full: conic-gradient(#c6a15b 0 0);
    border: inherit;
    border-radius: inherit;
    background: conic-gradient(from var(--α), #0000, #c6a15b, #0000 25%) border-box;
    -webkit-mask: var(--full) no-clip subtract, var(--full) padding-box;
    mask: var(--full) no-clip subtract, var(--full) padding-box;
    pointer-events: none;
    content: "";
    animation: 4s linear infinite α;
    position: absolute;
    inset: -6px;
    box-shadow: 0 0 6em #0000;
}

.border-anim:after {
    filter: blur(2em)
}

@keyframes α {
    to {
        --α: 1turn
    }
}

.card {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 1;
    background-color: rgba(255, 255, 255, var(--transparency));
    border-radius: var(--border-radius);
    outline-offset: 5px;
    color: #fff;
    border: 5px solid #0000;
    outline: 5px solid #0000;
    padding: 2em;
    box-shadow: 0 2px 11px -2px #000
}

#contact .card {
    min-width: 400px
}

.card.hover {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 180px;
    display: flex
}

.card:hover.hover {
    outline-color: var(--primary-color);
    position: relative
}

.card:hover.hover:after {
    border: 5px var(--primary-color) solid;
    filter: blur(1em);
    content: "";
    position: absolute;
    inset: -15px
}

.inverted-border {
    --r: var(--border-radius);
    --s: var(--border-radius);
    --x: 140px;
    --y: 110px;
    --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
    --_d: (var(--s) + var(--r));
    -webkit-mask: calc(var(--_d) + var(--x)) 100% var(--_m), 0 calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1 * var(--_d) - var(--y));
    mask: calc(var(--_d) + var(--x)) 100% var(--_m), 0 calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1 * var(--_d) - var(--y));
    padding-left: 200px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.icon-box {
    background-color: hsla(from #c6A15B h s l);
    z-index: 3;
    color: #fff;
    border-radius: var(--border-radius);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 120px;
    display: flex;
    position: absolute;
    bottom: 2px;
    left: 2px;
}
  
.gg--mouse {
    width: var(--icon-size);
    aspect-ratio: 1;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 5a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1'/%3E%3Cpath fill-rule='evenodd' d='M4 8a8 8 0 1 1 16 0v8a8 8 0 1 1-16 0zm14 0v8a6 6 0 0 1-12 0V8a6 6 0 1 1 12 0' clip-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: var(--svg);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    background-color: currentColor;
    display: inline-block;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.gg--arrow-down {
    width: var(--icon-size);
    aspect-ratio: 1;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 3.672h2V16.5l3.243-3.243l1.414 1.415L12 20.328l-5.657-5.656l1.414-1.415L11 16.5z'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--svg);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    background-color: currentColor;
    display: inline-block;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.logo {
    place-items: center start;
    gap: 1em;
    display: flex
}

.logo img {
    width: 100%;
    max-width: 300px
}

#contact .logo {
    flex-direction: column
}

a.content {
    display: block
}

#contact .content {
    border: 2px var(--primary-color) solid;
    border-color: rgba(255, 255, 255, var(--transparency));
    background-color: rgba(255, 255, 255, var(--transparency));
    border-radius: var(--border-radius);
    padding: 10px
}

#contact .content.center {
    text-align: center
}

#contact .footer {
    z-index: 10;
    background-color: rgba(255, 255, 255, var(--transparency));
    border-radius: var(--border-radius);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    padding: 10px;
    position: sticky;
    bottom: 10px
}

.card>div,
.card>a {
    margin-bottom: 1em
}

.cta {
    gap: 1.5em;
    margin-top: 1.8em;
    display: flex
}

.btn {
    background-color: #c6a15b;
    color: #fff;
    border-radius: .4em;
    padding: 1em;
    font-weight: 700;
    text-decoration: none;
    display: block;
    box-shadow: 0 2px 7px -3px #000;
}

.btn:hover {
    background-color: hsl(from var(--primary-color) h s calc(l - 10))
}

.btn.outline {
    background-color: #0000;
    border: 1px solid #fff
}

/* .network-background {
    z-index: 0;
    opacity: .12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 18h.01M10 18h.01M14 18h.01M18 18h.01M12 2v12M4 8v6M20 8v6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h.01'/%3E%3Cpath d='M7 15a10 10 0 0 1 10 0'/%3E%3Cpath d='M5 12a13 13 0 0 1 14 0'/%3E%3Cpath d='M3 9a17 17 0 0 1 18 0'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 11.19 18a19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.11 4.26 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='2' y='7' width='20' height='10' rx='2'/%3E%3Ccircle cx='6' cy='12' r='1'/%3E%3Ccircle cx='10' cy='12' r='1'/%3E%3Ccircle cx='14' cy='12' r='1'/%3E%3Ccircle cx='18' cy='12' r='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='8' y='2' width='8' height='10' rx='1'/%3E%3Cpath d='M12 12v10M9 22h6M10 2h4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Crect x='7' y='5' width='10' height='2'/%3E%3Crect x='7' y='10' width='10' height='2'/%3E%3Crect x='7' y='15' width='10' height='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='12' rx='1'/%3E%3Cpath d='M7 16v4h10v-4'/%3E%3Cpath d='M9 8h6v4H9z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Crect x='8' y='6' width='8' height='2'/%3E%3Crect x='8' y='10' width='8' height='2'/%3E%3Ccircle cx='12' cy='16' r='1.3'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Crect x='6' y='10' width='3' height='4'/%3E%3Crect x='10.5' y='10' width='3' height='4'/%3E%3Crect x='15' y='10' width='3' height='4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='10' rx='2'/%3E%3Crect x='6' y='9' width='2' height='2'/%3E%3Crect x='10' y='9' width='2' height='2'/%3E%3Crect x='14' y='9' width='4' height='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 17h.01M11 17h.01M15 17h.01M12 4v9'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M9 18a5 5 0 0 1 6 0'/%3E%3Cpath d='M7 15a8 8 0 0 1 10 0'/%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='6' y='3' width='12' height='18' rx='1'/%3E%3Cpath d='M8 7h8M8 12h8M8 17h8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1' fill='none' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='6' rx='1'/%3E%3Cpath d='M6 11h1M9 11h1M12 11h1M15 11h1M18 11h1'/%3E%3C/svg%3E");
    background-position: 8% 15%, 85% 22%, 20% 65%, 60% 80%, 75% 48%, 45% 20%, 90% 70%, 12% 82%, 40% 40%, 95% 85%, 28% 30%, 70% 10%, 5%, 55% 55%;
    background-repeat: no-repeat;
    background-size: 80px;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0
} */
.network-background {
    z-index: 0;
    opacity: 0.3; 
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 15 8 9 20 9 16 15 4 15'/%3E%3Cpolyline points='20 9 20 12 16 18 4 18 4 15'/%3E%3Cline x1='8' y1='9' x2='4' y2='15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 15 8 9 20 9 16 15 4 15'/%3E%3Cpolyline points='20 9 20 12 16 18 4 18 4 15'/%3E%3Cline x1='8' y1='9' x2='4' y2='15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 15 8 9 20 9 16 15 4 15'/%3E%3Cpolyline points='20 9 20 12 16 18 4 18 4 15'/%3E%3Cline x1='8' y1='9' x2='4' y2='15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 15 8 9 20 9 16 15 4 15'/%3E%3Cpolyline points='20 9 20 12 16 18 4 18 4 15'/%3E%3Cline x1='8' y1='9' x2='4' y2='15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 15 8 9 20 9 16 15 4 15'/%3E%3Cpolyline points='20 9 20 12 16 18 4 18 4 15'/%3E%3Cline x1='8' y1='9' x2='4' y2='15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
    background-position: 8% 15%, 85% 22%, 20% 65%, 60% 80%, 75% 48%, 45% 20%, 90% 70%, 12% 82%, 40% 40%, 28% 30%;
    background-repeat: no-repeat;
    background-size: 45px; 
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}
.icon {
    width: 100px;
    display: inline-block
}

@keyframes rotate {
    to {
        transform: translate(-50%, -50%)rotate(1turn)
    }
}

@media screen and (width<=768px) {
    .inverted-border {
        padding-bottom: 150px;
        padding-left: 2em
    }

    .logo img {
        width: 100%;
        max-width: 200px
    }

    #contact .card {
        min-width: 100%;
        margin-block: 10px
    }
}

ets