@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

@font-face {
    font-family: 'martin';
    src: url('../fonts/martin.ttf');
    font-weight: 100;
}

:root {
    --loader-grad-1: linear-gradient(to left, #e2ff50, #f47927, #9a0d32);
    --loader-grad-2: linear-gradient(to right, #faffdf, #cccccc);
}

/* general setup ------------------------------------------------------------------------------------------ */

::-webkit-scrollbar {
    background-color: #111111;
    width: 8px;
    display: none;
}

::-webkit-scrollbar-thumb {
    background-color: #ffffff;
    border-radius: 10px;
}

::-moz-selection {
    background: #8cff00;
    color: white;
}

::selection {
    background: #8cff00;
    color: white;
}

:-webkit-any-link {
    color: #8cff00;
}

:-moz-any-link {
    color: #8cff00;
}

:any-link {
    color: #8cff00;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: url(../icons/cursor/cursor.png), auto;
}

body {
    background-color: #111111;
    scroll-behavior: smooth;
    height: max-content;
    overflow: hidden;
}

/* custom styles -------------------------------------------------------------------------------------------- */

.z-max-0 {
    z-index: 100000 !important;
}

.z-max-1 {
    z-index: 99999 !important;
}

.z-max-2 {
    z-index: 99998 !important;
}

.vh-90 {
    height: 90vh !important;
}

.vh-80 {
    height: 80vh !important;
}

.f-paytone {
    font-family: "Paytone One", system-ui !important;
}

.f-poppins {
    font-family: "Poppins", system-ui !important;
}

.f-martin {
    font-family: "martin", system-ui !important;
}

.fs-xxxl {
    font-size: 8rem !important;
}

.fs-xxl {
    font-size: 8vw !important;
}

@media (max-width: 768px) {
    .fs-xxl {
        font-size: 3rem !important;
    }
}

.fs-xl {
    font-size: 6rem !important;
}

.br-12 {
    border-radius: .75rem !important;
}

.translate-end-x {
    transform: translateX(-100%) !important;
}

.apply-grad {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text !important;
    color: transparent !important;
}

.txt-grad-1 {
    background: var(--loader-grad-1);
    background-size: 150%;
    background-position: left;
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    /* background-clip: text; */
    /* color: transparent; */
    animation: loader 3s ease-in-out;
}

.txt-grad-2 {
    background: var(--loader-grad-2);
    background-size: 150%;
    background-position: left;
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    /* background-clip: text; */
    /* color: transparent; */
    animation: loader 3s ease-in-out;
}

@keyframes loader {
    0% {
        opacity: 1;
        scale: 1;
        transform: translateY(0);
        filter: blur(0);
        background-position: right;
    }

    100% {
        background-position: left;
    }
}

:root {
    --social-icon-size: 16px;
    --social-icon-filter: invert(0);
}

/* alert styles ----------------------------------------------------------------------------------------------- */

.alert-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    color: #fff;
    background-color: #2525257b;
    border: 1px solid #4444447b;
    backdrop-filter: blur(20px);
    text-transform: initial;
    filter: blur(2px);
    margin-top: 1.8rem;
    padding-inline: 1rem;
    scale: 0.95;
    opacity: 0;
    visibility: hidden;
    transition: padding-inline 0.3s 0.05s ease,
        /* margin-top 0.3s ease, */
        scale 0.3s 0.1s ease,
        filter 0.3s ease,
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.alert-box-in {
    padding-inline: 1.5rem;
    /* margin-top: 2.5rem; */
    scale: 1;
    opacity: 1;
    filter: blur(0);
    visibility: visible;
}

.alert-box-out {
    padding-inline: 1rem;
    /* margin-top: 2.5rem; */
    scale: 0.95;
    opacity: 0;
    filter: blur(2px);
    visibility: hidden;
}

/* custom nav-link styles ------------------------------------------------------------------------------------- */

.custom-nav-link .nav-link-span {
    opacity: 0;
    margin-right: -20px;
    transition: opacity ease-in-out 0.2s, padding ease-in-out 0.4s, margin-right ease-in-out 0.2s;
}

.custom-nav-link:hover .nav-link-span {
    opacity: 1;
    margin-right: 0px;
    padding: 0 20px 0 5px !important;
}

.custom-nav-link:active .nav-link-span {
    padding: 0 12px 0 5px !important;
    transition: padding ease-in-out 0.2s;
}

.custom-nav-link {
    transition: background-color 0.3s ease-in-out;
}

.custom-nav-link:active {
    background-color: #fdfdfd !important;
}

.dp {
    z-index: 1;
    margin: 3px;
}

/* social links bar styles ------------------------------------------------------------------------------- */

.hero-section .socials-bar {
    padding: 3px;
    backdrop-filter: blur(15px);
    background-color: #ffffff;
    box-shadow: 0px 0px 30px 2px #00000030;
    transition: background-color 0.8s ease-in-out,
        opacity 0.3s ease-in-out,
        filter 0.3s ease-in-out,
        margin-bottom 0.3s ease-in-out,
        gap 0.3s ease-in-out;
}

.hero-section .socials-bar:hover {
    background-color: #ffffff;
}

.hero-section .socials-bar {
    gap: 4px;
}

.hero-section .socials-bar a {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding-inline: 8px;
    border-radius: 25px;
    border: solid 1px #111111;
    /* transition: margin-inline 0.4s ease-in-out 0.1s; */
}

.hero-section .socials-bar a i {
    color: #313131;
    font-size: 1.125rem;
}

/* .hero-section .socials-bar div a:hover {
    margin-inline: 10px;
} */

.i-github {
    background: url(../icons/social-icons/github.svg);
    background-size: contain;
    height: var(--social-icon-size);
    aspect-ratio: 1/1;
    filter: var(--social-icon-filter);
}

.i-google {
    background: url(../icons/social-icons/mail.svg);
    background-size: contain;
    height: var(--social-icon-size);
    aspect-ratio: 1/1;
    filter: var(--social-icon-filter);
}

.i-linkedin {
    background: url(../icons/social-icons/linkedin.svg);
    background-size: contain;
    height: var(--social-icon-size);
    aspect-ratio: 1/1;
    filter: var(--social-icon-filter);
}

.i-instagram {
    background: url(../icons/social-icons/instagram.svg);
    background-size: contain;
    height: var(--social-icon-size);
    aspect-ratio: 1/1;
    filter: var(--social-icon-filter);
}

.i-facebook {
    background: url(../icons/social-icons/facebook.svg);
    background-size: contain;
    height: var(--social-icon-size);
    aspect-ratio: 1/1;
    filter: var(--social-icon-filter);
}

.i-send {
    background: url(../icons/social-icons/send.svg);
    background-size: contain;
    height: var(--social-icon-size);
    aspect-ratio: 1/1;
}

.i-verified {
    background: url(../icons/social-icons/verified.svg);
    background-size: contain;
    height: var(--social-icon-size);
    aspect-ratio: 1/1;
    filter: var(--social-icon-filter);
}

.i-arrow-right {
    background: url(../icons/social-icons/arrow-right.svg);
    background-size: contain;
    height: var(--social-icon-size);
    aspect-ratio: 1/1;
    filter: var(--social-icon-filter);
}

.i-close {
    mask: url(../icons/social-icons/close.svg) no-repeat center;
    -webkit-mask: url(../icons/social-icons/close.svg) no-repeat center;
    background: var(--gradient-orange-crush),
        url('https://assets.codepen.io/16327/noise.png');
    background-size: contain;
    height: 22px;
    aspect-ratio: 1/1;
}

.socials-bar-hidden {
    opacity: 0;
    margin-bottom: 0rem !important;
    /* padding: 0 !important; */
    /* gap: 2px !important; */
    filter: blur(3px);
    pointer-events: none;
}

/* section title styles ----------------------------------------------------------------------------------- */
section .title-container {
    position: relative;
}

section .title-text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8rem;
    margin-bottom: 3rem;
    color: #111;
    background: var(--gradient-orange-crush),
        url('https://assets.codepen.io/16327/noise.png');
    background-blend-mode: color-dodge;
    font-family: 'Bricolage Grotesque', system-ui !important;
    font-size: 2.8rem;
    font-weight: bold;
    /* text-transform: capitalize; */
    overflow: hidden;
}

@media (max-width: 768px) {
    section .title-text {
        font-size: 2rem;
    }
}

.animate-letters span {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wght" var(--vfph-wght, 400), "opsz" var(--vfph-opsz, 9);
    transition: font-variation-settings 0.1s ease;
    display: inline-block;
    /* text-transform: capitalize; */
    /* white-space: pre-wrap; */
}

/* .letter-space {
    margin-right: 0.5em;
} */