/*==================================================
                    HERO
==================================================*/

/*====================================
        Math Pattern
====================================*/

.hero{

    position: relative;

    padding: 50px 0 70px;

    background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);

    overflow: hidden;

}

.hero-pattern{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.hero-pattern span{

    position:absolute;

    font-size:42px;

    color:#0d6efd;

    opacity:.035;

    font-weight:bold;

    user-select:none;

}
.hero-pattern span:nth-child(1){

    top:8%;

    left:10%;

}

.hero-pattern span:nth-child(2){

    top:18%;

    right:12%;

}

.hero-pattern span:nth-child(3){

    top:45%;

    left:5%;

}

.hero-pattern span:nth-child(4){

    bottom:18%;

    right:8%;

}

.hero-pattern span:nth-child(5){

    bottom:28%;

    left:22%;

}

.hero-pattern span:nth-child(6){

    top:65%;

    right:28%;

}

.hero-pattern span:nth-child(7){

    top:32%;

    left:42%;

}

.hero-pattern span:nth-child(8){

    bottom:10%;

    left:55%;

}

.hero-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/*==============================
        متن
==============================*/
/*====================================
        Hero Background
====================================*/

.hero-wrapper{

    position:relative;

}

.hero-shape{

    position:absolute;

    border-radius:50%;

    z-index:0;

}

.hero-shape-1{

    width:320px;

    height:320px;

    background:#dbeafe;

    top:-120px;

    right:-120px;

    opacity:.35;

    filter:blur(30px);

}

.hero-shape-2{

    width:250px;

    height:250px;

    background:#bfdbfe;

    bottom:-80px;

    left:-80px;

    opacity:.30;

    filter:blur(30px);

}

.hero-shape-3{

    width:180px;

    height:180px;

    background:#93c5fd;

    top:180px;

    left:180px;

    opacity:.25;

    filter:blur(25px);

}
.hero-content{
    flex: 1;
    position:relative;
    z-index:2;
}

.hero-badge{
    display: inline-block;
    padding: 8px 18px;
    background: #e8f1ff;
    color: #0d6efd;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 600;
}

.hero-content h1{
    font-size: 42px;
    font-weight: 800;
    color: #222;
    margin-bottom: 15px;
    line-height: 1.5;
}

.hero-content h1 span{
    color: #0d6efd;
}

.hero-content h2{
    font-size: 26px;
    color: #555;
    margin-bottom: 25px;
    font-weight: 600;
}

#typing-text{
    color: #0d6efd;
}

.hero-content p{
    color: #666;
    line-height: 2.1;
    font-size: 17px;
    margin-bottom: 35px;
}

/*==============================
        دکمه‌ها
==============================*/

.hero-buttons{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-primary-custom{

    background: #0d6efd;
    color: #fff;
    padding: 14px 30px;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
}

.btn-primary-custom:hover{

    background: #0b5ed7;
    transform: translateY(-3px);
    color: #fff;
}

.btn-outline-custom{

    border: 2px solid #0d6efd;
    color: #0d6efd;
    padding: 14px 30px;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
}

.btn-outline-custom:hover{

    background: #0d6efd;
    color: #fff;
}

/*==============================
        تصویر
==============================*/

.hero-image{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

}

.hero-photo{

    width:420px;

    max-width:100%;

    border-radius:24px;

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

    transition:.35s;

}

.hero-photo:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 60px rgba(13,110,253,.20);

}
/*==============================
        کارت‌های شناور
==============================*/

.floating-card{

    position: absolute;

    background: #fff;

    padding: 12px 18px;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0,0,0,.08);

    font-weight: bold;

    animation: float 4s ease-in-out infinite;
    border:1px solid #eef3ff;

    color:#0d6efd;

    font-size:15px;

    transition:.35s;
}
.floating-card:hover{

    transform:translateY(-8px);

}

.card-python{

    top: 30px;
    right: 0;
}

.card-django{

    left: 0;
    top: 120px;
}

.card-math{

    right: 40px;
    bottom: 70px;
}

.card-exp{

    left: 20px;
    bottom: 0;
}

/*==============================
        آمار
==============================*/

.statistics{

    margin-top: 20px;
    padding-bottom: 70px;
}

.statistics-wrapper{

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 25px;
}

.stat-box{

    background: #fff;

    border-radius: 18px;

    padding: 30px;

    text-align: center;

    box-shadow: 0 8px 25px rgba(0,0,0,.06);

    transition: .3s;
}

.stat-box:hover{

    transform: translateY(-8px);
}

.stat-box h3{

    color: #0d6efd;

    font-size: 34px;

    margin-bottom: 10px;
}

.stat-box span{

    color: #666;
}

/*==============================
        Animation
==============================*/

@keyframes float{

    0%{

        transform: translateY(0);

    }

    50%{

        transform: translateY(-12px);

    }

    100%{

        transform: translateY(0);

    }

}

/*==================================================
                Responsive
==================================================*/

@media(max-width:991px){

    .hero{

        padding-top: 60px;
    }

    .hero-wrapper{

        flex-direction: column-reverse;

        text-align: center;
    }

    .hero-buttons{

        justify-content: center;
    }

    .statistics-wrapper{

        grid-template-columns: repeat(2,1fr);
    }

    .floating-card{

        display:none;
    }

}

@media(max-width:576px){

    .hero-content h1{

        font-size:34px;
    }

    .hero-content h2{

        font-size:22px;
    }

    .hero-content p{

        font-size:15px;
    }

    .statistics-wrapper{

        grid-template-columns:1fr;
    }

    .btn-primary-custom,
    .btn-outline-custom{

        width:100%;

        justify-content:center;

        text-align:center;
    }

}




/* شمارشگر */
.stat-card {
  cursor: default;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.stat-icon {
  line-height: 1;
}
.stat-number {
  font-family: 'Vazir', Tahoma, sans-serif;
  color: #222;
  letter-spacing: 1px;
}
.stat-label {
  font-family: 'Vazir', Tahoma, sans-serif;
}