/*==================================================
    Portfolio Style
    Aliasghar Nejad Najjar
==================================================*/


/*==========================
        VARIABLES
==========================*/

:root{

    --primary:crimson;
    --primary-dark:#e62247;

    --background:#09090b;
    --surface:#111827;
    --surface-light:#1f2937;

    --text:#f8fafc;
    --text-light:#cbd5e1;
    --text-muted:#94a3b8;

    --border:rgba(255,255,255,.08);

    --success:#22c55e;
    --danger:#ef4444;

    --radius:18px;

    --transition:.35s ease;

    --shadow:
        0 20px 60px rgba(0,0,0,.35);

}


/*==========================
        RESET
==========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}
.row{
    margin-left:0 !important;
    margin-right:0 !important;
}
body{

    font-family:monospace,"Inter",sans-serif;

    background:var(--background);

    color:var(--text);

    overflow-x:visible;

    line-height:1.8;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

    margin:0;

    padding:0;

}

button{

    border:none;

    outline:none;

}

input,
textarea{

    outline:none;

    border:none;

}
.hero-title{
    font-size: 1.3rem;
    /*font-family: math;*/
}
.hero-subtitle{
    font-size: 1.2rem;
    /*font-family: math;*/
}
/*==========================
        SELECTION
==========================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*==========================
        SCROLLBAR
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:#30363d;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}


/*==========================
        BACKGROUND
==========================*/

body::before{

    content:"";

    position:fixed;

    top:-250px;

    left:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

   background: rgb(255 255 255 / 18%);

    filter:blur(140px);

    pointer-events:none;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    right:-250px;

    bottom:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgb(246 92 92 / 12%);

    filter:blur(140px);

    pointer-events:none;

    z-index:-2;

}


/*==========================
        CONTAINER
==========================*/

.container{

    max-width:93%;

}


/*==========================
        SECTION
==========================*/

section{

    position:relative;

    padding:120px 0;

}

.section-padding{

    padding:120px 0;

}


/*==========================
        TITLES
==========================*/

.section-heading{

    margin-bottom:60px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 18px;

    border-radius:50px;

     background: rgb(246 59 59 / 12%);
    border: 1px solid rgb(246 59 59 / 20%);
    color: #ff8a8a;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.section-heading h2{

    font-size:52px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:20px;

}

.section-heading p{

    color:var(--text-muted);

    max-width:700px;

}


/*==========================
        BUTTONS
==========================*/

.btn{

    border-radius:14px;

    padding:15px 28px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background: white;
    color: black;

}

.btn-outline-light{ 
   
    border:1px solid var(--border);

    color:#fff;

}

.btn-outline-light:hover{

    background:#fff;

    color:#111;

}


/*==========================
        CARD
==========================*/

.card-glass{

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


/*==========================
        UTILITIES
==========================*/

.text-muted{

    color:var(--text-muted)!important;

}

.rounded-xl{

    border-radius:22px;

}

.shadow-lg{

    box-shadow:var(--shadow)!important;

}

.border-glass{

    border:1px solid var(--border);

}


/*==========================
        ANIMATION
==========================*/

.fade-up{

    opacity:0;

    transform:translateY(30px);

}

.fade-up.show{

    opacity:1;

    transform:none;

    transition:.7s;

}


/*==========================
        RESPONSIVE
==========================*/

@media(max-width:992px){

    section{

        padding:90px 0;

    }

    .section-heading{

        text-align:center;

    }

    .section-heading h2{

        font-size:38px;

    }

}

@media(max-width:576px){

    .section-heading h2{

        font-size:30px;

    }

    .btn{
        margin-top: 1rem;
        width:100%;

    }

}
/*==================================================
                    HEADER
==================================================*/

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    padding:20px 0;

    transition:.35s;

}

.site-header.scrolled{

    padding:12px 0;

}

.site-header.scrolled .navbar{

    background:rgba(9,9,11,.78);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.06);

    box-shadow:0 15px 40px rgba(0,0,0,1);

}


/*==========================
        NAVBAR
==========================*/

.navbar{

    background:transparent;

    border-radius:18px;

    transition:.35s;

    padding:18px 26px;

}

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:24px;

    font-weight:800;

    color:#fff;

}

.navbar-brand:hover{

    color:#fff;

}


/*==========================
        LOGO
==========================*/

.logo-circle{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:
        0 0 10px var(--primary),
        0 0 25px var(--primary);

    animation:logoPulse 2s infinite;

}

@keyframes logoPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}


/*==========================
        NAV LINKS
==========================*/

.navbar-nav{

    gap:10px;

}

.nav-link{

    position:relative;

    color:var(--text-light) !important;

    font-size:15px;

    font-weight:500;

    padding:10px 16px !important;

    transition:.3s;

}

.nav-link:hover{

    color:#fff;

}

.nav-link.active{

    color:#fff;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

    border-radius:10px;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:60%;

}


/*==========================
        BUTTONS
==========================*/

.navbar .btn{

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.navbar .btn-primary{

    padding:0 24px;

}

.navbar .btn-outline-light{

    width:46px;

    padding:0;

}


/*==========================
        TOGGLER
==========================*/

.navbar-toggler{

    width:48px;

    height:48px;

    border-radius:12px;

    background:#141414;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.navbar-toggler:focus{

    box-shadow:none;

}


/*==========================
        MOBILE MENU
==========================*/

@media(max-width:991px){

    .site-header{

        padding:15px 0;

    }

    .navbar{

        padding:16px 20px;

    }

    .navbar-collapse{

        margin-top:20px;

        padding-top:20px;

        border-top:1px solid rgba(255,255,255,.06);

    }

    .navbar-nav{

        gap:0;

        margin-bottom:20px;

    }

    .nav-link{
        text-align: center;
        padding:14px 0 !important;

    }

    .navbar .btn{

        width:100%;

    }

    .navbar .btn-outline-light{

        width:100%;
  

        margin-bottom:10px;

    }

}


/*==========================
        HEADER SPACE
==========================*/

body{

    padding-top:110px;

}
/*==========================
        RESPONSIVE
==========================*/

@media(max-width:1200px){

    .hero-title{

        font-size:1rem;

    }

}

@media(max-width:991px){

    .hero-section{
        overflow:hidden;
        text-align:center;

    }

    .hero-title{

        font-size:1rem;

    }

    .hero-description{

        margin:auto auto 40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-social{

        justify-content:center;

        margin-bottom:70px;

    }

    .hero-image-wrapper{

        width:340px;

    }

    .card-one{

        left:-20px;

    }

    .card-two{

        right:-20px;

    }

}

@media(max-width:576px){

    .hero-title{

        font-size:1rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .hero-image-wrapper{

        width:260px;

    }

    .floating-card{

        display:none;

    }

}
/*==================================================
                    ABOUT
==================================================*/

.about-section{

    position:relative;

}

.about-text{

    font-size:18px;

    color:var(--text-muted);

    line-height:2;

    max-width:700px;

}

.about-card{

    position:relative;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border-radius:20px;

    padding:35px;

    height:100%;

    overflow:hidden;

    transition:.35s;

}

.about-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background: linear-gradient(90deg, var(--primary), #5c0000);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.about-card:hover{

    transform: translateY(-8px);
    border-color: rgb(246 59 59 / 35%);
    box-shadow: 0 25px 60px rgb(162 162 162 / 35%);

}

.about-card:hover::before{

    transform:scaleX(1);

}

.about-card i{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(59,130,246,.12);

    color:var(--primary);

    font-size:28px;

    margin-bottom:25px;

}

.about-card h5{

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

}

.about-card p{

    color:var(--text-muted);

    margin:0;

}



/*==================================================
                PROJECTS
==================================================*/

.projects-section{

    position:relative;

}

.project-card{

    position:relative;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    overflow:hidden;

    height:100%;

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-12px);

    border-color:rgb(246 59 59 / 35%);

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.project-card img{ 

    width:100%;

    height:310px;

    object-fit:cover;

    transition:.6s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-body{

    padding:30px;

}

.project-body h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:15px;

}

.project-body p{

    color:var(--text-muted);

    min-height:60px;

    margin-bottom:25px;

}

.project-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;

}

.project-tags span{

    padding:8px 16px;

    border-radius:30px;

    background: rgb(246 59 59 / 12%);
    border: 1px solid rgb(246 59 59 / 20%);
    color: #ff8a8a;

    font-size:13px;

    font-weight:600;

}

.project-body a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.project-body a:hover{

    color:var(--primary);

    gap:16px;

}



/*==========================
        FEATURED PROJECT
==========================*/

.featured-project{

    position:relative;

    margin-bottom:70px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    overflow:hidden;

}

.featured-project img{

    width:100%;

    height:450px;

    object-fit:cover;

}

.featured-content{

    padding:50px;

}

.featured-content h3{

    font-size:42px;

    font-weight:800;

    margin-bottom:20px;

}

.featured-content p{

    color:var(--text-muted);

    font-size:17px;

    line-height:2;

    margin-bottom:35px;

}

.featured-stack{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:35px;

}

.featured-stack span{

    padding:10px 20px;

    border-radius:50px;

    background:rgba(59,130,246,.12);

    border:1px solid rgba(59,130,246,.2);

    color:#8ab4ff;

    font-size:14px;

}

.featured-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}



/*==========================
      IMAGE OVERLAY
==========================*/

.project-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:310px;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.15)

    );

    pointer-events:none;

}



/*==========================
      RESPONSIVE
==========================*/

@media(max-width:992px){

    .featured-content{

        padding:35px;

    }

    .featured-content h3{

        font-size:34px;

    }

}

@media(max-width:768px){

    .project-card img{

        height:310px;

    }

    .featured-project img{

        height:260px;

    }

    .featured-content{

        padding:30px;

    }

    .featured-content h3{

        font-size:28px;

    }

    .project-body{

        padding:22px;

    }

}

@media(max-width:576px){

    .about-card{

        padding:28px;

    }

    .project-body h4{

        font-size:22px;

    }

    .featured-buttons .btn{

        width:100%;

    }

}
/*==================================================
                    SKILLS
==================================================*/

.skills-section{

    position:relative;

}

.skill-card{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

    height:100%;

}

.skill-card:hover{

    transform:translateY(-10px);

    border-color:rgb(246 59 59 / 35%);

    box-shadow:0 25px 60px rgb(137 137 137 / 35%);

}

.skill-card i{

    font-size:50px;

    color:var(--primary);

    margin-bottom:25px;

}

.skill-card h5{

    font-size:22px;

    font-weight:700;

    margin-bottom:10px;

}

.skill-card span{

    color:var(--text-muted);

    font-size:15px;

}



/*==================================================
                TIMELINE
==================================================*/

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:30px;

    top:0;

    bottom:0;

    width:2px;

    background:rgba(255,255,255,.08);

}

.timeline-item{

    position:relative;

    padding-left:90px;

    margin-bottom:70px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-year{

    position:absolute;

    left:0;

    top:0;

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    box-shadow:0 10px 30px rgb(246 59 59 / 35%);

}

.timeline-content{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:30px;

    transition:.35s;

}

.timeline-content:hover{

    transform:translateX(10px);

    border-color:rgb(246 59 59 / 35%);

}

.timeline-content h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:15px;

}

.timeline-content p{

    color:var(--text-muted);

    margin:0;

}



/*==================================================
                    STATS
==================================================*/

.stats-section{

    position:relative;

}

.stat-card{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    text-align:center;

    padding:25px 20px;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:rgb(246 59 59 / 35%);

}

.stat-card h2{

    font-size:56px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:15px;

}

.stat-card p{

    color:var(--text-muted);

    margin:0;

}



/*==================================================
                    CONTACT
==================================================*/

.contact-box{

    max-width:900px;

    margin:auto;

    padding:70px;

    text-align:center;

    border-radius:30px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

}

.contact-box h2{

    font-size:48px;

    font-weight:800;

    margin:20px 0;

}

.contact-box p{

    color:var(--text-muted);

    max-width:650px;

    margin:0 auto 40px;

}

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.social-links{

    display:flex;

    justify-content:center;

    gap:20px;

}

.social-links a{

    width:60px;

    height:60px;

    border-radius:16px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    transition:.35s;

}

.social-links a:hover{

    background:var(--primary);

    transform:translateY(-6px);

}



/*==================================================
                    FOOTER
==================================================*/

.footer{

    padding:100px 0 40px;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-logo{

    font-size:28px;

    font-weight:800;

    color:#fff;

}

.footer-description{

    margin-top:20px;

    color:var(--text-muted);

}

.footer-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:25px;

}

.footer-links li{

    margin-bottom:14px;

}

.footer-links a{

    color:var(--text-muted);

    transition:.3s;

}

.footer-links a:hover{

    color:#fff;

    padding-left:8px;

}

.footer-mail{

    color:var(--primary);

    font-weight:600;

}

.footer hr{

    margin:60px 0 30px;

    border-color:rgba(255,255,255,.08);

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--text-muted);

}



/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:992px){

    .timeline::before{

        left:25px;

    }

    .timeline-item{

        padding-left:80px;

    }

    .contact-box{

        padding:45px;

    }

}

@media(max-width:768px){

    .contact-box h2{

        font-size:34px;

    }

    .footer-bottom{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

}

@media(max-width:576px){

    .timeline-year{

        width:50px;

        height:50px;

        font-size:14px;

    }

    .timeline-item{

        padding-left:70px;

    }

    .timeline-content{

        padding:22px;

    }

    .stat-card h2{

        font-size:40px;

    }

    .contact-box{

        padding:30px 25px;

    }

}
/*==================================================
                MOUSE GLOW
==================================================*/

.cursor-glow{

    position:fixed;

    width:450px;

    height:450px;

    left:0;

    top:0;

    border-radius:50%;

    pointer-events:none;

    z-index:-1;

    opacity:.35;

    transform:translate(-50%,-50%);

    background:radial-gradient(circle,

        rgba(59,130,246,.35) 0%,

        rgba(59,130,246,.15) 30%,

        rgba(59,130,246,.05) 60%,

        transparent 75%

    );

    transition:

        transform .08s linear,

        opacity .3s;

}



/*==================================================
                GRID BACKGROUND
==================================================*/

.grid-background{

    position:fixed;

    inset:0;

    z-index:-3;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:60px 60px;

    mask-image:radial-gradient(circle at center,

        rgba(0,0,0,1),

        rgba(0,0,0,.2));

}



/*==================================================
                SCROLL REVEAL
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

.reveal-left{

    opacity:0;

    transform:translateX(-70px);

    transition:.8s;

}

.reveal-left.active{

    opacity:1;

    transform:none;

}

.reveal-right{

    opacity:0;

    transform:translateX(70px);

    transition:.8s;

}

.reveal-right.active{

    opacity:1;

    transform:none;

}

.reveal-scale{

    opacity:0;

    transform:scale(.9);

    transition:.8s;

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}



/*==================================================
                IMAGE HOVER
==================================================*/

.image-hover{

    overflow:hidden;

    border-radius:24px;

}

.image-hover img{

    transition:.6s;

}

.image-hover:hover img{

    transform:scale(1.08);

}



/*==================================================
                SHINE EFFECT
==================================================*/

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:skewX(-25deg);

}

.shine:hover::before{

    animation:shine 1s;

}

@keyframes shine{

    to{

        left:160%;

    }

}



/*==================================================
                GLASS PANEL
==================================================*/

.glass{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.35);

}



/*==================================================
                FLOAT
==================================================*/

.float{

    animation:float 4s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}



/*==================================================
                GRADIENT TEXT
==================================================*/

.gradient-text{

    background:linear-gradient(

        90deg,

        #3b82f6,

        #8b5cf6,

        #06b6d4

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/*==================================================
                SECTION DIVIDER
==================================================*/

.section-divider{

    width:120px;

    height:4px;

    border-radius:30px;

    margin:25px auto 0;

    background:linear-gradient(

        90deg,

        #3b82f6,

        #8b5cf6

    );

}



/*==================================================
                LOADER
==================================================*/

.page-loader{

    position:fixed;

    inset:0;

    background:#09090b;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.6s;

}

.loader-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.08);

    border-top-color:#3b82f6;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}



/*==================================================
                CUSTOM BADGE
==================================================*/

.badge-modern{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(59,130,246,.12);

    border:1px solid rgba(59,130,246,.2);

    color:#8ab4ff;

    font-size:14px;

    font-weight:600;

}



/*==================================================
                ICON BOX
==================================================*/

.icon-box{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.icon-box:hover{

    background:#3b82f6;

    transform:rotate(6deg);

}



/*==================================================
                SCROLL TOP
==================================================*/

.scroll-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:none;

    color:#dc143c;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:100;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

}

.scroll-top:hover{

    transform:translateY(-5px);

}
/*==========================
        HERO IMAGE
==========================*/

.hero-image-wrapper{

    position:relative;

    width:430px;

    margin:auto;

}

.hero-image{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:50%;

    border:7px solid rgb(255 255 255);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 80px rgba(59,130,246,.15);

    transition:.5s;

}


.hero-image-wrapper::before{

    content:"";

    position:absolute;

    inset:-15px;

    border-radius:50%;

    border:2px dashed rgb(220 20 60 / 46%);

    animation:rotateRing 30s linear infinite;

}

@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

    border-radius:16px;

    background:rgba(17,24,39,.88);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:15px;

    font-weight:600;

    box-shadow:0 15px 35px rgba(0,0,0,.35);

    animation:floatCard 4s ease-in-out infinite;

}

.floating-card i{

    color:crimson;

    font-size:23px;

}
.card-one{

    top:20px;

    left:-70px;

}

.card-two{

    top:180px;

    right:-80px;

    animation-delay:1s;

}

.card-three{

    left:20px;

    bottom:15px;

    animation-delay:2s;

}
@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}
@media(max-width:992px){

    .hero-image-wrapper{

        width:330px;

        margin-top:60px;

    }

    .card-one{

        left:-20px;

    }

    .card-two{

        right:-20px;

    }

}

@media(max-width:576px){

    .hero-image-wrapper{

        width:min(260px,75vw);

    }

    .floating-card{

        display:none;

    }

}
/*==================================
        HERO SOCIAL
==================================*/

.hero-social{

    display:flex;

    align-items:center;

    gap:18px;

}

.hero-social a{

    position:relative;

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    color:#ffffff;

    font-size:22px;

    overflow:hidden;

    transition:.35s;

}

.hero-social a::before{

    content:"";

    position:absolute;

    inset:0;

    background:crimson;

    opacity:0;

    transition:.35s;

}

.hero-social a i{

    position:relative;

    z-index:2;

}

.hero-social a:hover{

    transform:translateY(-8px);

    border-color:transparent;

    box-shadow:
        0 15px 35px rgba(59,130,246,.35);

}

.hero-social a:hover::before{

    opacity:1;

}

.hero-social a:hover i{

    color:#fff;

    transform:scale(1.15);

}

.hero-social a:nth-child(1):hover{

    box-shadow:0 15px 35px rgb(255 255 255 / 68%);

}

.hero-social a:nth-child(2):hover{

    box-shadow:0 15px 35px rgb(0 136 204 / 68%);

}

.hero-social a:nth-child(3):hover{

    box-shadow:0 15px 35px rgb(0 136 204 / 68%);

}

.hero-social a:nth-child(4):hover{

    box-shadow:0 15px 35px rgba(225,48,108,.45);

}
.stat{
        justify-content: center;
}