@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

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

body{
    background: url('img/bg.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ⬅ قبلاً 80vh بود */
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.title1{
    width: 100%;  
    margin-top: 40px;
    text-align: center;
    font-family: 'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(22px, 5vw, 30px); /* ⬅ ریسپانسیو فونت */
    font-weight: bold;
    color: white;
}

.main{
    width: 100%;
    height: auto; /* ⬅ آزاد شد */
    text-align: center;
    display: flex;
    margin: auto;
}

.main2{
    width: min(90vw, 320px);   /* ⬅ ریسپانسیو */
    height: min(90vw, 320px);
    display: flex;
    margin: auto;
    position: relative;
}

.circle{
    background: conic-gradient(rgb(0, 110, 255) 0%,
    rgb(0, 110, 255) 40%,
    rgb(255, 255, 255) 40%,
    rgb(255, 255, 255) 60%,
    rgb(45, 92, 66) 60%,
    rgb(45, 92, 66) 100%
    );
    width: 100%;          /* ⬅ قبلاً 300px */
    height: 100%;
    border-radius: 100%;
    margin: auto;
    align-items: center;
    display: flex;
    color: white;
    font-family: 'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    transition: transform 1s ease; /* نرم‌تر شدن انیمیشن */
}

.circle2{
    background-color: rgb(14, 0, 41);
    width: 88%;           /* ⬅ نسبت‌دار */
    height: 88%;
    border-radius: 100%;
    margin: auto;
    align-items: center;
    display: flex;
    color: white;
    font-family: 'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    padding: 10px;
}

.text1{
    width: 100%;
    text-align: center;
    font-size: clamp(16px, 4vw, 22px); /* ⬅ متن تطبیقی */
}

.pointer{
    width: 100%;
    height: 100%;
    position: absolute;
    animation: charkhesh 5s linear infinite;
    transform: rotate(45deg);
}

.maah{
    width: clamp(15px, 4vw, 30px); /* ⬅ اندازه تطبیقی */
    height: clamp(15px, 4vw, 30px);
    background-color: white; 
    position: absolute;
    border-radius: 100%;
}

/* Animation states */
.dam{
    animation: step1 2s linear infinite;
}

.hold{
    transform:scale(1.2);
}

.bazdam{
    animation: step2 2s linear infinite;
}

/* Keyframes */
@keyframes charkhesh {
    from{ transform: rotate(45deg); }
    to{ transform: rotate(405deg); }
}

@keyframes step1 {
    from{ transform: scale(1); }
    to{ transform: scale(1.2); }
}

@keyframes step2 {
    from{ transform: scale(1.2); }
    to{ transform: scale(1); }
}

/* 📱 موبایل‌های خیلی کوچک */
@media (max-width: 350px){
    .title1{ margin-top: 20px; }
    .main2{ width: 95vw; height: 95vw; }
}