@font-face {
    font-family: 'MonaSansFont';
    src: url('fonts/mona_sans_light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'MonaSansFont';
    src: url('fonts/mona_sans_medium.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'MonaSansFont';
    src: url('fonts/mona_sans_bold.ttf') format('truetype');
    font-weight: 700;
}



body {
    font-family: 'MonaSansFont', sans-serif;
    font-weight: 400; /* وزن معمولی */
}

h1 {
    font-family: 'MonaSansFont', sans-serif;
    font-weight: 700; /* وزن بولد */
}

.light {
    font-family: 'MonaSansFont', sans-serif;
    font-weight: 300; /* وزن نازک */
}

section.top{
    padding-top : 3%;
}

top-header {
    background: #f8f9fa;
    padding-top: 100px 0;
}

h1, h2,h3,p {
    color: #343a40;
}


.card {
    margin-bottom: 20px;
}





h1.head {
    margin-bottom: -5%;
    
}
.purple {
    color: #7319C5;
}
.purple-gradiant {
    background: linear-gradient(45deg, #7319C5,#7319C5,#AC37E4, #AC37E4);
    -webkit-background-clip: text;
    color: transparent;
}
.btn-gradient {
    background: linear-gradient(45deg, #7319C5, #AC37E4);
    color: white;
    border-radius: 50px; /* گوشه‌های گردتر */
    padding: 10px 20px;
    font-size: 14px;
    transition: box-shadow 0.6s ease;
    box-shadow: 0 0px 5px #ac81bf;
}

.purple-bouble {
    background: #E5D0F8;
    border-radius: 50px;
}

a.btn-gradient:hover {
    background: linear-gradient(90deg, #7319C5, #AC37E4);
    color: yellow;
    box-shadow: 0 0px 10px #ac81bf;
}

.point-text {
    display: flex;
    align-items: center;
}
.circle-point {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}
.point-text span{
    margin:0;
}
.purple-border {
    border: 2px solid #7319C5;
    border-radius: 50px;
}
.text-white{
    color:white;
}


.fliped {
    transform: scaleX(-1);
}

stack.stacked-images {
    position: relative;
    display: inline-block;
    height: 320px;
}

stack.stacked-images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px; /* عرض تصویر */
    height: auto; /* ارتفاع تصویر */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: transform 0.3s;
}

    stack.stacked-images img:nth-child(1) {
        opacity : 50%;
    }
    stack.stacked-images img:nth-child(2) {
        transform: translate(20px, 20px);
        opacity: 50%;
    }

    stack.stacked-images img:nth-child(3) {
        transform: translate(40px, 40px);
    }

    stack.stacked-images img:hover {
        /*        transform: translate(0, 0);*/
        transform: scale(1.1);
        z-index: 10;
        opacity: 100%;
    }

a:hover {
    color: #AC37E4;
}


.image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* یا عرض مشخص */
    height: 800px; /* یا ارتفاع مشخص */
    /*border: 1px solid #ccc;*/ /* برای نمایش بهتر */
}

    .image-container img {
        position: absolute;
        
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }

        .image-container img.frame {
            z-index: 1;
            max-width: 100%;
            max-height: 100%;
            width: 100%;
            height: auto;
        }

       


        .image-container img.phone {
            z-index: 2;
            max-width: 20%;
            max-height: 70%;
            width: auto;
            height: auto;
            transform: translate(-50%, calc(-50% + 20%));
        }


        .image-container img.pose-r {
            z-index: 3;
            max-width: 40%;
            max-height: 40%;
            width: auto;
            height: auto;
            transform: translate(55%,20%);
            filter : drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
            
        }
        .image-container img.pose-l {
            z-index: 4;
            max-width: 40%;
            max-height: 40%;
            width: auto;
            height: auto;
            transform: translate(-155%,20%);
            filter:drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
        }
        
        

@media (max-width: 1400px) {
    .image-container {
        height: 700px; /* تنظیم ارتفاع برای دستگاه‌های کوچکتر */
    }
}
@media (max-width: 1100px) {
    .image-container {
        height: 480px; /* تنظیم ارتفاع برای دستگاه‌های کوچکتر */
    }
}
@media (max-width: 768px) {
    .image-container {
        height: 300px; /* تنظیم ارتفاع برای دستگاه‌های کوچکتر */
    }
}


@media (max-width: 480px) {
    .image-container {
        height: 250px; /* تنظیم ارتفاع برای دستگاه‌های کوچکتر */
    }
    h1.head {
        margin-bottom: -18%;
        
    }
    section.top {
        padding-top: 0;
    }
}