@font-face {
    font-family: 'Satoshi';
    src: url('/assets/fonts/Satoshi-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/assets/fonts/Satoshi-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/assets/fonts/Satoshi-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/assets/fonts/Satoshi-Black.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

*::-webkit-scrollbar {
    height: 10px;
    width: 8px;
}
*::-webkit-scrollbar-track {
border-radius: 5px;
background-color: var(--color-100);
}

*::-webkit-scrollbar-track:hover {
background-color: var(--color-150);
}

*::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: var(--color-300);
}

*::-webkit-scrollbar-thumb:hover {
background-color: var(--color-400);
}


/* Variables */
:root{
    --primary-color: #262424;
    --primary-color-light: #578E7E;
    --secondary-color: #F5ECD5;
    --secondary-color-light: #FFFAEC;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-black-same: #000000;
    --color-white-same: #ffffff;
    --color-200-same: #cfcccc; 
    --color-600-same: #524e4e; 
    --color-900-same: #131212; 

    --color-white-box-bg: #ffffff;
    --box-border-color: #dddddd;
    --bottom-nav-bg: rgba(255,255, 255, 0.6);
    --bottom-nav-border: #cfcccc; 

    --color-bg-img: rgba(82, 78, 78, 0.625);

    --bg-color: linear-gradient(to right, #ffffff 0%, #f5f5f5 100%);
    --floating-label-bg: #fafafa;

    --f-family-p: "Poppins", sans-serif;
    --f-family-i: "Inter", sans-serif;

    --px-main: 4rem;

    --rounded-20: 1.25rem;

    --transition-2s: all .2s ease-in-out;
    --transition-3s: all .3s ease-in-out;
    --transition-duration: 1s;


    --color-100: #e6e5e5; 
    --color-150: #dddddd;
    --color-200: #cfcccc; 
    --color-300: #b1aeae; 
    --color-400: #918e8e; 
    --color-500: #736f6f; 
    --color-600: #524e4e; 
    --color-700: #262424; 
    --color-800: #1d1b1b; 
    --color-900: #131212; 

    /* for Button */
    --edge-light: hsla(0, 3%, 23%, 0.8);
    --btn-gradient-color-1: hsl(0, 3%, 15%);
    --btn-gradient-color-2: hsla(0, 3%, 15%, 0.9);

    --main-circle-gradient-1: rgba(174, 253, 190, 0.6);
    --main-circle-gradient-2: rgba(250, 255, 190, 0.4);
    --main-circle-gradient-3: rgba(255, 255, 255, 0.8);

    --cursor-circle-gradient-1: rgba(174, 253, 190, 0.4);
    --cursor-circle-gradient-2: rgba(250, 255, 190, 0.2);

    --text-gradient-1: #7A5FFF;
    --text-gradient-2: #8b3b42;
    --text-gradient-3: #00C2FF;

    /* for About Section */
    --about-img-bg: #ccc;

    --project-box-bg-gradient: #000000;
}
body.dark{
    --primary-color: #24232b;

    --color-black: #FFFFFF;
    --color-white: #000000;

    --color-100: #131212; 
    --color-150: #1d1b1b; 
    --color-200: #1d1b1b; 
    --color-300: #262424; 
    --color-400: #524e4e; 
    --color-500: #b1b0b6; 
    --color-600: #d3d2d8; 
    --color-700: #e8e7eb; 
    --color-800: #f4f4f4; 
    --color-900: #fafafa; 
    
    --color-white-box-bg: #1f1e26;
    --box-border-color: #292830; 

    --bottom-nav-bg: rgba(85, 83, 98, 0.6);
    --bottom-nav-border: #524e4e;

    --color-bg-img: rgba(31, 30, 38, 0.625);

    --bg-color:  #17161e;
    --floating-label-bg: #17161e;

    /* for Button */
    --edge-light: hsla(0, 0%, 50%, 0.8);
    --btn-gradient-color-1: hsla(240, 40%, 50%, 1);
    --btn-gradient-color-2: hsla(240, 40%, 50%, 0.6);

    --main-circle-gradient-1: rgba(100, 0, 150, 0.6);
    --main-circle-gradient-2: rgba(0, 0, 80, 0.4);
    --main-circle-gradient-3: rgba(23, 22, 30, 0.8);

    --cursor-circle-gradient-1: rgba(100, 0, 150, 0.2);
    --cursor-circle-gradient-2: rgba(0, 0, 80, 0.1);

    --text-gradient-1: #c4a6ff;
    --text-gradient-2: #f16998;
    --text-gradient-3: #7734ff;

    /* for About Section */
    --about-img-bg: #24232b;

    --project-box-bg-gradient: #ffa500;
}

/* Resuable */
li{
    list-style-type: none;
}
a{
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color: var(--color-900);
}
button{
    -webkit-tap-highlight-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    background: none;
}
img {
    pointer-events: none;
    /* user-drag: none; */
    -webkit-user-drag: none;
}
strong{
    font-weight: 600;
}

.section:not(.home){
    padding: 2rem 0 4rem;
}
.box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--box-border-color);
    border-radius: var(--rounded-20);
    padding: 0.75rem 0;
    background: var(--color-white-box-bg);
}

/* Global Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'satoshi', sans-serif;
}
/* Body */
body{
    background: var(--bg-color);
    cursor: none;
}

/* ########## custom cursor ############ */

#custom-cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    background-color: var(--color-900);
    clip-path: polygon(0% 0%, 70% 70%, 30% 70%, 0% 100%);
    pointer-events: none; 
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, width 0.1s, height 0.1s, background-color 0.2s, opacity 0.2s;
    z-index: 9999;
}

.hover-effect {
    width: 32px !important;
    height: 32px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 50% !important;
    clip-path: none !important;
}

.click-effect {
    transform: translate(-50%, -50%) scale(0.8);
}

.hidden-cursor {
    opacity: 0;
}

@media (max-width: 768px) {
    body{
        cursor: auto;
    }
    #custom-cursor {
        display: none;
    }
}


/*  ###### Container ####### */
.container{
    position: relative;
}

.wrapper{
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--px-main);
    overflow: hidden;
}
nav{
    position: relative;
    z-index: 10;
}
.top-nav{                    
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    text-wrap: nowrap;
}
.nav-center{
    display: flex;
    align-items: center;
    gap: 24px;
    border: 1px solid var(--box-border-color);
    border-radius: var(--rounded-20);
    height: 50px;
    padding-inline: 8px;
}
.nav-logo.main-logo{
    display: none;
}
.nav-logo{
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-img{
    width: 32px;
    height: 32px;
}
.nav__logo-text{
    font-size: 18px;
    font-weight: 600;
}

.nav-separator{
    height: 25px;
    border-right: 1px solid #ddd;
}

.nav-menu{
    display: flex;
    align-items: center;
}
.nav__link{
    padding: 6px 20px;
    border-radius: 12px;
    color: var(--color-900);
    transition: var(--transition-3s);
}
.active{
    background-color: var(--primary-color);
    color: var(--color-white-same);
}
.nav__link.active:hover{
    color: var(--color-white-same);
}
.nav__link:hover{
    color: var(--color-500);
}
.nav-right{
    display: flex;
    align-items: center;
}
.nav-right .theme-toggle{
    position: relative;
    height: 50px;
    width: 50px;
}

body.dark .theme-toggle:hover.theme-toggle svg{
    color: var(--color-black);
}
.switch__icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transition: var(--transition-3s);
    height: 20px;
    width: 20px;
}
.moon{
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.sun{
    transform: translate(-50%, -50%) rotate(90deg) scale(0);
}
body.dark .moon{
    transform: translate(-50%, -50%) rotate(90deg) scale(0);
}
body.dark .sun{
    color: var(--color-white-same);
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.sunlay {
    transform-origin: center;
    opacity: 0;
    transform: scale(0.8);
}
.sunlay-animate{
    animation: sunLayAnimation 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}   
@keyframes sunLayAnimation {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.sunlay-1 { animation-delay: 50ms; }
.sunlay-2 { animation-delay: 150ms; }
.sunlay-3 { animation-delay: 250ms; }
.sunlay-4 { animation-delay: 350ms; }
.sunlay-5 { animation-delay: 450ms; }
.sunlay-6 { animation-delay: 550ms; }
.sunlay-7 { animation-delay: 650ms; }
.sunlay-8 { animation-delay: 750ms; }

.sun-circle{
    transform: translate(0, 0) scale(1);
}
.sun:hover .sun-circle{
    animation: sunHoverAnimation 1s;
}

@keyframes sunHoverAnimation {
    50%{
        transform: translate(5%, 5%) scale(0.9);
    }
}

/* ####### bottom nav ######## */
.bottom-nav{
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 120%);
    width: 100%;
    max-width: 350px;
    display: flex;
    align-items: center;
    background: var(--bottom-nav-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--bottom-nav-border);
    border-radius: var(--rounded-20);
    padding: 0.25rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    z-index: 100;
    transition: transform 0.4s ease-in-out;
}
.bottom-nav.show {
    transform: translate(-50%, 0);
  }
.bottom-nav__menu{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bottom-nav__link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
    border-radius: 16px;
}
.bottom-nav__link:hover{
    background-color: var(--color-100);
}
.bottom-nav__link.bottom-nav__active{
    background-color: var(--primary-color);
    color: var(--color-white-same);
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}
.bottom-nav__active .botton-nav__icon{
    color: var(--color-white-same);
}
.botton-nav__icon{
    color: var(--color-900);
    font-size: 20px;
    transition: transform var(--transition-duration) ease;
}
.botton-nav__text{
    font-size: 14px;
    font-weight: 500;
    color: var(--color-white-same);
    width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all .6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bottom-nav__link.bottom-nav__active .botton-nav__text{
    opacity: 1;
    width: auto;
}

@media screen and (max-width: 810px){
    .nav-center{
        display: none;
    }
    .nav-logo.main-logo{
        display: flex;
    }
}


/* ######## Main container ############ */
.grid{
    display: grid;
    gap: 2rem;
}

/* ------ Hero Section -------- */
.hero-container{
    grid-template-columns: 116px repeat(2, 1fr);
    grid-template-areas: "social content image";
    padding-top: 5.5rem;
    column-gap: 2rem;
    align-items: center;
}

/* ----- Home Social Icons ----- */
.home__social{
    grid-area: social;
    display: grid;
    grid-template-columns: max-content;
    row-gap: 1rem;
}
.social__icon{
    font-size: 1.25rem;
    color: var(--color-500);
    transition: var(--transition-3s);
}
.social__link{
    padding: .5rem;
}
.social__link:hover{
    transform: rotate(0deg);
    animation: iconAnimation .6s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes iconAnimation {
    20%{
        transform: rotate(5deg);
    }
    40%{
        transform: rotate(-5deg);
    }
    60%{
        transform: rotate(2.5deg);
    }
    80%{
        transform: rotate(-2.5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.social__link:hover .social__icon{
    color: var(--color-800);
}

/* ------- Home Content ------ */
.home__content{
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    line-height: 1.4;
}

.home__title{
    font-size: 32px;
    font-weight: 600;
    color: var(--color-800);
}

.gradient-text {
    background: linear-gradient(90deg,  var(--text-gradient-1), var(--text-gradient-2), var(--text-gradient-3));
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 3s infinite alternate;
  }
  
  @keyframes gradientMove {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }
.home__subtitle{
    font-size: 24px;
    font-weight: 600;
    color: var(--color-700);
}

.home__description{
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--color-600);
}

.btn {
    position: relative;
    overflow: hidden;
    height: 4rem;
    width: fit-content;
    padding: 0 2rem;
    font-family: 'poppins';
    font-size: 16px;
    font-weight: 500;
    border-radius: var(--rounded-20);
    text-wrap: nowrap;
    color: var(--color-white-same);

    background: linear-gradient(
        140deg,
        var(--btn-gradient-color-1) min(2em, 20%),
        var(--btn-gradient-color-2) min(8em, 100%)
      );
    box-shadow: inset 0.4px 1px 4px var(--edge-light);
}  
.btn:hover::before {
    transform: scaleX(1);
}
  
.btn-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 1;
}
.btn-icon{
    width: 24px;
    fill: var(--color-white-same);
}
.btn--rotate{
    transform: rotate(-45deg);
}
  
.btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: 0 50%;
width: 100%;
height: inherit;
border-radius: inherit;
background-color: var(--btn-gradient-color-1);
transition: all 0.475s;
}
  
/* ------ Home Image ------- */
.home__img{
    position: relative;
    grid-area: image;
    display: flex;
    justify-content: end;
}
.home__img-box{
    position: relative;
    width: 400px;
    height: 400px;
    overflow: hidden;
    border-radius: 46% 54% 34% 66% / 54% 61% 39% 46%;
    background-color: var(--color-bg-img);
    backdrop-filter: blur(3px);
    animation: borderRadiusAnimate 10s ease-in-out infinite;
    z-index: 10;
}
@keyframes borderRadiusAnimate{
    50%{
        border-radius: 58% 42% 66% 34% / 35% 58% 42% 65%;
    }
}
.home__img-src{
    width: 100%;
    object-fit: cover;
}
.bg-gradient-lines{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 1;
}
/* Home Scroll Down */
.home__scroll{
    display: flex;
    justify-content: center;
    padding: 5rem 0 4rem;
}
.home__scroll-content{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.home__scroll-icon {
    width: 30px;
    height: 40px;
}

.scroll-line {
    animation: scrollAnimation 2.5s infinite ease-in-out;
}

@keyframes scrollAnimation {
0% {
    d: path("M12 6v4"); 
}
50% {
    d: path("M12 8v6");
}
100% {
    d: path("M12 6v4");

}
}

.home__scroll-arrow-icon{
    width: 18px;
    height: 18px;
    animation: scrollArrowAnimation 5s infinite ease-in-out;
}  
@keyframes scrollArrowAnimation {
    0% {
        transform: translateY(0);   
    }
    50% {
        transform: translateY(5px); 
    }           
    100% {
        transform: translateY(0);
    }
}
@media screen and (max-width: 992px) {
    .wrapper{
        padding-inline: var(--px-main);
    }
    .hero-container{
        grid-template-columns: min-content repeat(2, 1fr);
    }
    .home__img-box{
        width: 300px;
        height: 300px;
    }
}

@media screen and (max-width: 768px){
:root{
    --text-lg: 1.5rem;
    --text-md: 1.25rem;
    --text-xm: 1.15rem;
    --text-sm: 1rem;
    --text-xs: 0.875rem;
}
    .hero-container{
        grid-template-columns: max-content 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "social image"
                             "content content";
        row-gap: 2rem;
        column-gap: 1rem;
        padding-top: 2rem;
    }
    .home__img{
        width: 100%;
        justify-content: center;
    }
    .home__img-box{
        width: 240px;
        height: 240px;
    }
    .bg-gradient-lines{
        transform: translate(-50%, -50%) scale(0.8);
    }

}
@media screen and (max-width: 576px){
    :root{
        --px-main: 1.25rem;
    }
}

/* --------- Section Titles ---------- */
.section__title-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 4rem;
}
.section__title{
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-700);
}
.section__subtitle{
    color: var(--color-500);
}

/* ######### About Section ######### */
.about{
    padding: var(--px-main);
}

.about__content{
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
}

@media screen and (max-width: 992px){
    .about__content{
        grid-template-columns: 1fr;
        place-items: center;
        gap: 2rem;
    }
}

.about__img-box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    /* border-radius: 65% 35% 38% 62% / 49% 30% 70% 51%; */
    border-radius: 10% 90% 10% 90% / 90% 10% 90% 10%;
    background-color: var(--about-img-bg);
    overflow: hidden;

}
.about__img-gradient{
    position: absolute;
    bottom: -30%;
    width: 120%;
    z-index: 1;
}
.about__img{
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
}

@media screen and (max-width: 992px){
    .about__img-box{
        width: 200px;
        height: 200px;
    }
}
.about__data{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about__info{
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.about__info-icon{
    font-size: 24px;
    color: var(--color-700);
}
.about__info-title{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-600);
}
.about__info-name{
    font-size: 0.65rem;
    text-align: center;
    color: var(--color-500);
}
.about__description{
    text-align: center;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-600);
}
.about-box{
    flex: 1;
    max-width: 140px;
}
.about__buttons{
    display: flex;
    justify-content: center;
}

/* ###### Tech Stack ####### */

.tech-stack__content{   
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    justify-content: center;
}
@media screen and (max-width: 768px){   
    .about__info{
        gap: 0.5rem;
    }
    .tech-stack__content{
        place-content: center;
        grid-template-columns: 1fr;
    }
    .tech-stack__data{
        align-items: center;
    }
    .tech-stack__info{
        justify-content: center;
    }
}
.tech-stack__data{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.tech-stack__title{
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-700);
}
.tech-stack__info{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.tech-stack-box{
    justify-content: center;
    width: 120px;
    height: 120px;
}
.tech-stack__info-icon{
    width: 44px;
}
.tech-stack__info-title{
    font-size: 14px;
    color: var(--color-600);
}
.tech-stack__progess{
    width: 60%;
    max-height: 1px;
    background-color: var(--color-150);
    border-radius: 5px;
}
.tech-stack__progess-bar{
    height: 1px;
    background-color: var(--primary-color);
    border-radius: 5px;
}
/* ##### Projects ##### */
.projects__container{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding-top: 2rem;
}
.projects__toggle-buttons{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.btn-sm{
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 12px;
    color: var(--color-700);
    background-color: var(--color-100);
    transition: var(--transition-3s);
}
.btn-sm.active-tab{
    color: var(--color-white-same);
    background-color: var(--primary-color);
}
.btn-sm.btn--black{
    background-color: var(--color-900);
    color: var(--color-white);
}
.web-app{
    position: relative;
    padding: 4px;
    background: var(--box-border-color) !important;
    border: none !important;
    transition: border var(--transition-3s);
    overflow: hidden;
}

.web-app::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 19px;
    transform: translate(-50%, -50%);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: var(--color-white-box-bg);
    z-index: 1;
}
.box-blur-object{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: var(--project-box-bg-gradient);
    filter: blur(100px);
    border-radius: 50%;
    pointer-events: none; 
    transform: translate(-50%, -50%);
    transition: transform 0.1s linear;
    opacity: 0; 
    pointer-events: none; 
}

.project__img, .project__content, .project__buttons{
    position: relative;
    z-index: 10;
}
.project__img{
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.project__content{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}
.project__title{
    color: var(--color-700);
}
.project__description{
    font-size: 1rem;
    color: var(--color-500);
}
.project__buttons{
    display: flex;
    gap: 0.75rem;
    width: 100%;
    padding: 0 1rem 1rem;
}

.graphic-design__img{
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 1rem;
}
.graphic-design__content{
    columns: 300px;
}

/* ##### Contact me ###### */

.contact__container{
    grid-template-columns: 0.5fr 1fr;
    gap: 2rem;
}

.contact__info{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: #020605;
    color: var(--color-white-same);
    border-radius: var(--rounded-20);
    padding: 2rem;
    overflow: hidden;
}
.contact__img-gradient{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.contact__info .contact_title-white{
    color: var(--color-white-same);
}
.contact__info-box{
    position: relative;
    display: flex;
    gap: 1rem;
    background-color: rgba(35, 40, 36, 0.5);
    backdrop-filter: blur(4px);
    border-radius: var(--rounded-20);
    padding: 14px;
    z-index: 10;
}
.contact__info-data{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
}
.contact__info-icon-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #020605;
    border-radius: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}
.contact__info-icon{
    font-size: 1.25rem;
}
.contact__info-title{
    font-size: 1rem;
}
.contact__info-subtitle{
    font-size: 0.875rem;
    color: var(--color-200-same);
}
.contact__info-email{
    color: inherit;
}

/* ------ contact form container */
.contact__form{
    padding: 2rem;
}
.contact__title{
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--color-700);
    margin-bottom: 1.5rem;
}
.form__container{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.form__two-cols{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
    row-gap: 1.5rem;
}

@media screen and (max-width: 992px){
    .form__two-cols{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 768px){
    .contact__container{
        grid-template-columns: 1fr;
    }
    .contact__info{
        order: 2;
    }
    .contact__form{
        order: 1;
    }
    .contact__title{
        text-align: center;
    }
    .contact__info, .contact__form{
        padding: 1rem;
    }
}
.form__group{
    position: relative;
}
.form__input{
    width: 100%;
    height: 60px;
    padding: 1.5rem;
    border-radius: var(--rounded-20);
    border: 1px solid var(--color-300);
    background-color: transparent;
    font-size: 16px;
    color: var(--color-700);
    outline: none;
}
.form__label{
    position: absolute;
    top: 18px;
    padding-inline: 8px;
    left: 16px;
    font-size: 1rem;
    color: var(--color-600);
    border-radius: 20px;
    transition: all .2s ease;
    cursor: text;
}
.form__input:focus ~ .form__label,
.form__input:valid ~ .form__label{
    top: -9px;
    background: var(--floating-label-bg);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-600);
}
.form__input.textarea{
    height: 240px;
    resize: none ;
}

/* ##### Footer #### */
.footer{
    position: relative;
    padding: 2.5rem 2rem 8rem;
    background-color: var(--color-white);
    text-align: center;
    font-size: 1rem;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(122, 95, 255, 0.2);
    pointer-events: none;
    animation: float 15s infinite ease-in-out;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0) translateX(0);
      opacity: 0;
    }
    25% {
      opacity: 0.8;
    }
    75% {
      opacity: 0.6;
    }
    50% {
      transform: translateY(-150px) translateX(40px);
      opacity: 1;
    }
  }

.footer__container{
    position: relative;
    display: grid;
    justify-content: center;
    gap: 2.5rem;
    z-index: 10;
}
.footer__logo-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.footer__logo-img{
    font-size: 2rem;
}
.footer__logo-text{
    font-size: 1.5rem;
    font-weight: 600;
}
.footer__social{
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.footer__social-link{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-200);
    height: 45px;
    width: 45px;
    border-radius: 16px;
}

.footer__social-link:hover .footer__social-icon{
    animation: iconAnimation .6s ease-in-out;
}
.footer__social-icon{
    font-size: 1.4rem;
    color: var(--color-700);
}
.footer__rights{
    color: var(--color-700);
}

/* #### Blurry object ###### */
.blur-circle {
    position: fixed;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--cursor-circle-gradient-1) 0%, var(--cursor-circle-gradient-2) 70%);
    filter: blur(50px);
    border-radius: 50%;
    pointer-events: none; 
    transform: translate(-50%, -50%);
    transition: transform 0.1s linear;
    z-index: -1;
}

.main-gradient-bg {
    position: fixed;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--main-circle-gradient-1), var(--main-circle-gradient-2), var(--main-circle-gradient-3));
    filter: blur(100px);
    z-index: -1;
    transition: transform 0.1s ease-out;
  }
/* ---------- contact form ------------ */

.error-message {
    color: red;
    font-size: 12px;
    display: block;
    margin-top: 5px;
}

.message-box {
    margin-block: 15px 20px;
    padding: 0.875rem;
    border-radius: 4px;
    display: none;
}

.message-box.success {
    background-color: rgba(0, 128, 0, 0.1);
    color: green;
    display: block;
}

.message-box.error {
    background-color: rgba(255, 0, 0, 0.1);
    color: rgb(231, 33, 33);
    display: block;
}

.spinner {
    display: none;
    position: relative;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0.75rem;
    z-index: 1;
}

.form--loading .btn-content {
    display: none;
}

.form--loading .spinner {
    display: grid;
}

  /* ----------- Loading... ---------  */

  .loading-container {
    --uib-size: 45px;
    --uib-color: #fff;
    --uib-speed: 1.75s;
    display: flex;
    align-items: flex-end;
    padding-bottom: 20%;
    justify-content: space-between;
    width: var(--uib-size);
    height: calc(var(--uib-size) * 0.6);
  }
  
  .loading-cube {
    flex-shrink: 0;
    width: calc(var(--uib-size) * 0.2);
    height: calc(var(--uib-size) * 0.2);
    animation: jump var(--uib-speed) ease-in-out infinite;
 }
  
  .cube__inner {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 25%;
    background-color: var(--uib-color);
    transform-origin: center bottom;
    animation: morph var(--uib-speed) ease-in-out infinite;
    transition: background-color 0.3s ease;
  }
  
  .loading-cube:nth-child(2) {
    animation-delay: calc(var(--uib-speed) * -0.36);
  
    .cube__inner {
      animation-delay: calc(var(--uib-speed) * -0.36);
    }
  }
  .loading-cube:nth-child(3) {
    animation-delay: calc(var(--uib-speed) * -0.2);
  
    .cube__inner {
      animation-delay: calc(var(--uib-speed) * -0.2);
    }
  }
  
  @keyframes jump {
    0% {
      transform: translateY(0px);
    }
  
    30% {
      transform: translateY(0px);
      animation-timing-function: ease-out;
    }
  
    50% {
      transform: translateY(-200%);
      animation-timing-function: ease-in;
    }
  
    75% {
      transform: translateY(0px);
      animation-timing-function: ease-in;
    }
  }
  
  @keyframes morph {
    0% {
      transform: scaleY(1);
    }
  
    10% {
      transform: scaleY(1);
    }
  
    20%,
    25% {
      transform: scaleY(0.6) scaleX(1.3);
      animation-timing-function: ease-in-out;
    }
  
    30% {
      transform: scaleY(1.15) scaleX(0.9);
      animation-timing-function: ease-in-out;
    }
  
    40% {
      transform: scaleY(1);
    }
  
    70%,
    85%,
    100% {
      transform: scaleY(1);
    }
  
    75% {
      transform: scaleY(0.8) scaleX(1.2);
    }
  }