/* Basic styling for the parent container */
.parent_video_gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* child */
.child_video_gallery {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    opacity: 0;
    transform: translateX(-80px); /* شروع از سمت چپ برای انگلیسی */
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.child_video_gallery.show {
    opacity: 1;
    transform: translateX(0);
}

.child_video_gallery img {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
    border-radius: 4px;
}

/* Medium screens */
@media (max-width: 1023px) {
    .parent_video_gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
}

/* Small screens */
@media (max-width: 767px) {
    .parent_video_gallery {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }

    .child_video_gallery {
        padding: 8px;
    }

    .child_video_gallery img {
        max-width: 95%;
    }
}













/* ==========================================
   Beauty Video Gallery Stylesheet
   Base Name: video_gallery_beauty
   ========================================== */

/* Basic styling for the parent container */
.parent_video_gallery_beauty {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns for large screens */
    gap: 24px; /* Space between child elements */
    padding: 24px; /* Optional padding around the gallery */
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px; /* Limit max width */
    margin: 0 auto; /* Center the gallery */
    justify-content: center; /* Center-aligned elements */
}

/* Styling for child elements (Beauty card style) */
/* حالت اولیه - تصویر از ابتدا کاملاً نمایان است */
.child_video_gallery_beauty {
    background-color: #fffaf9; /* Warm off-white/nude background */
    border: 1px solid #f3e5e2; /* Soft rose-nude border */
    border-radius: 16px; /* Smooth rounded corners for luxury look */
    padding: 12px;
    box-sizing: border-box;
    aspect-ratio: 9 / 16; /* نسبت ابعاد مناسب ویدیوهای عمودی (ریلز/استوری زیبایی) */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally and vertically */
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(229, 201, 194, 0.2); /* Soft warm shadow */

    /* حذف افکت پنهان‌سازی اولیه برای نمایش مستقیم تصاویر */
    opacity: 1;
    transform: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* افکت هاور ملایم برای کارت‌های زیبایی */
.child_video_gallery_beauty:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(229, 201, 194, 0.4);
    border-color: #e5c9c2;
}

/* استایل برای تصاویر داخل child - مخصوصاً کاور ویدیوهای اسکین‌کر */
.child_video_gallery_beauty img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* پر کردن کامل فضای کارت بدون دفرمه شدن تصویر */
    display: block; /* حذف فضای اضافی زیر تصویر */
    border-radius: 10px; /* گوشه‌های گرد برای تصویر هماهنگ با کارت */
    transition: transform 0.5s ease;
}

/* افکت زوم ملایم روی تصویر هنگام هاور روی کارت */
.child_video_gallery_beauty:hover img {
    transform: scale(1.03);
}

/* ==========================================
   Responsive Adjustments (Mobile-First / Tablets)
   ========================================== */

/* Medium screens: 2 columns (e.g., tablets) */
@media (max-width: 1023px) {
    .parent_video_gallery_beauty {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px;
    }
}

/* Small screens: 1 column (e.g., mobiles) */
@media (max-width: 767px) {
    .parent_video_gallery_beauty {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .child_video_gallery_beauty {
        padding: 8px; /* Adjust padding for smaller screens */
        border-radius: 12px; /* Slightly smaller radius for mobile */
    }

    /* تنظیم اضافی برای تصاویر در صفحه‌های کوچک */
    .child_video_gallery_beauty img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

















/* Speech bubble (English version) */

.speech-bubble {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    background:
            radial-gradient(circle at 20% 80%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 100%),
            linear-gradient(135deg, #a2a0a0 0%, #fdf9f9 70%);
    border: 3px solid #494343;
    border-radius: 8px;
    padding: 15px 20px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    color: #000000;
    line-height: 1.6;
    direction: ltr;
    text-align: left;
    box-sizing: border-box;
    box-shadow:
            0 14px 25px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* tail on the right side, pointing right */
.speech-bubble::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 18%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 13px solid #FFFFFF;
}

/* border tail */
.speech-bubble::before {
    content: '';
    position: absolute;
    right: -20px;
    top: 18%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid #494343;
}



/* Speech bubble (Modern Quote Box - No Tail) */
.speech-bubble-bottom {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 40px auto;
    min-height: 250px;

    /* فقط دو لایه گیومه در پس‌زمینه نگه می‌داریم */
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 24 24'%3E%3Cpath fill='%237cc7ff' d='M11.2 15.8c0 2-1.6 3.6-3.6 3.6S4 17.8 4 15.8C4 11.9 7.2 8.7 11.1 8.7v2.1c-2.8 0-5 2.2-5 5h5.1v.0zM20.8 15.8c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6c0-3.9 3.2-7.1 7.1-7.1v2.1c-2.8 0-5 2.2-5 5h5.1v.0z'/%3E%3C/svg%3E"), /* گیومه باز */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 24 24'%3E%3Cpath fill='%237cc7ff' d='M12.8 8.2c0-2 1.6-3.6 3.6-3.6S20 6.2 20 8.2c0 3.9-3.2 7.1-7.1 7.1v-2.1c2.8 0 5-2.2 5-5h-5.1v.0zM3.2 8.2c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6c0 3.9-3.2 7.1-7.1 7.1v-2.1c2.8 0 5-2.2 5-5H3.2v.0z'/%3E%3C/svg%3E"), /* گیومه بسته */
            url('../../photo2/dr-hamidreza-hosnani-quote200.png'), /* عکس دکتر */
            radial-gradient(circle at 20% 80%, rgba(123, 199, 255, 0.15) 0%, rgba(255, 255, 255, 0.9) 100%),
            linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);

    background-position:
            25px 25px,               /* گیومه باز */
            right 40px bottom 125px, /* گیومه بسته */
            bottom right,            /* عکس دکتر */
            center,
            center;

    background-repeat: no-repeat;
    background-size: 40px, 40px, auto, cover, cover;

    border: 1px solid #e1f2ff;
    border-radius: 15px;
    padding: 70px 60px 140px;

    font-family: "Georgia", serif;
    font-style: italic;
    font-size: 17px;
    color: #3e4b55;
    line-height: 1.8;
    direction: ltr;
    text-align: left;
    box-sizing: border-box;
    box-shadow: 0 15px 35px rgba(180, 210, 230, 0.2);
}

/* این بخش برای حذف قطعی آن گیومه اضافی گوشه بالا است */
.speech-bubble-bottom::before,
.speech-bubble-bottom::after {
    content: none !important;
    display: none !important;
}