.elementor-2406 .elementor-element.elementor-element-373997a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-end;--gap:0px 0px;--background-transition:0.3s;}.elementor-2406 .elementor-element.elementor-element-373997a.e-con{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-2406 .elementor-element.elementor-element-373997a{--width:975px;}}@media(min-width:768px){.elementor-2406 .elementor-element.elementor-element-373997a{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-1ae39b0 */<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        @font-face {
          font-family: hezardastan;
          src: url('https://hezardastan.agency/wp-content/uploads/2024/12/ModamWeb-Regular.woff') format('woff2'),
         url('https://hezardastan.agency/wp-content/uploads/2024/12/ModamWeb-Regular.woff') format('woff');
        }

        body {
            font-family: hezardastan;
            display: flex;
            justify-content: left;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            background-size: 85%;
            background-position: right;
            background-repeat: no-repeat;
            transition: opacity 0.5s ease, background-image 0.5s ease;
            opacity: 1;
        }
        
        .layout {
            display: flex;
            width: 95%;
            height: 90%;
            border-radius: 10px;
            overflow: hidden;
            gap: 10px;
            position: relative;
        }

        .logo {
            position: absolute;
            margin: center;
            top: 12%;
            left: 5%;
            width: 318px;
            height: 300px;
        }
        
        
        .logo img {
            width: 900px;
            height: 150px;
            object-fit: cover;
        }
        
        
        .top-section {
        flex: 2;                    /* Keeping flex-grow property */
        display: flex;
        flex-direction: column;     /* Arrange items in a column */
        justify-content: left; /* Align items at the top */
        align-items: center;    /* Align items to the left */
        padding-right: 20px;         /* Keep some padding on the left for aesthetics */
        padding-top: 120px;          /* Add top padding if needed to move content down a bit */
        padding-bottom: 120px;
        margin-left: 50px;
    }

        .bottom-section {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        
        .title-text-and-button {
            min-height: 120px;  /* Adjust this height as necessary to maintain consistent space */
            text-align: center;
            transition: color 0.1s ease;
            margin-top: 170px;
            margin-left: 5%;
            width: 700px;
            height: 300px;
        }
        
        .title-text-and-button h1 {
            margin-bottom: 0px;
            color: #575757;
            font-size: 42px;
            text-align: left; /* تراز متن به چپ */
        }

        .title-text-and-button a{
            display: inline-block;
            background-color: #e6e6e6; /* رنگ پس‌زمینه دکمه */
            color: #b8006f; /* رنگ متن دکمه */
            font-size: 38px; /* اندازه متن */
            font-weight: bold; /* ضخامت متن */
            padding: 10px 20px; /* فضای داخلی دکمه */
            border-radius: 5px; /* گوشه‌های گرد */
            text-decoration: none; /* حذف خط زیر متن */
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* سایه زیر دکمه */
            transition: background-color 0.5s ease, transform 0.5s ease;
        }
        
        .title-text-and-button a:hover {
            background-color: #d4d4d4; /* تغییر رنگ پس‌زمینه هنگام هاور */
            transform: scale(1.05); /* کمی بزرگتر شدن دکمه هنگام هاور */
            box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3); /* افزایش سایه هنگام هاور */
        }
        
      .thumbnails {
        display: flex;
        justify-content: flex-start;  /* Ensure thumbnails are aligned to the left */
        gap: 10px;                    /* Adjust the gap if necessary */
        width: auto;                  /* Change width to auto */
        align-items: flex-start;
        padding-left: 10%;             /* Remove padding-left to have thumbnails flush to the left */
        
        }
        
        .thumbnail {
            width: 150px;                 
            display: inline-block;
            text-align: center;
            cursor: pointer;
            opacity: 1;
            z-index: 10;
        }
        .thumbnail .active {
            transition: transform 0.3s ease;
            opacity: 1;
            pointer-events: none;
        }
        
        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
        
        .thumbnail-text {
            margin-top: 10px;
            font-size: 14px;
            color: #000000;
            padding: 5px;
        }
        
        .thumbnail:hover {
            transform: scale(1.1);
        }
        
        .thumbnail.active {
            transform: scale(1.1);
            transition: transform 0.5s ease, opacity 0.5s ease;
        }
        
        .thumbnail.active {
            opacity: 0.5;
        }
        
        .thumbnail {
            opacity: 1;
        }
        
        .hand-icon {
            width: 100%;
            height: auto;
            opacity: 1;
            cursor: pointer;
            transition: transform 0.1s ease, opacity 0.5s ease;
        }
        
        .text-container {
            border-radius: 10px;
            display: inline-block;
            text-align: left; 
            margin: 10px; 
            box-sizing: border-box; 
            width: 100%; 
            padding: 10px;        
        }
        
        .text-container a {
            color: #b8006f;
            text-decoration: none;
            font-size: 18px;
            margin-top: 10px;
            display: inline-block;
            transition: color 0.3s ease;
            text-align: left;
            margin-left: 0; /* حذف فاصله اضافی از چپ */
        }
        
        .text-container p {
            padding: 10px;
            padding-left: 0;
            font-size: 24px;
            margin-bottom: 20px;
            color: #575757;
            font-size: 18px;
            line-height: 1.8; /* فاصله خطوط برای بهتر خوانا بودن */
            margin: 0;
            text-align: left; /* برای چپ‌چین */
    }
        
        .text-container a:hover {
            color: #b8006f;
        }
        



/* Small Screens (Mobile) */
@media (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
        direction: rtl;
        font-family: hezardastan;
        background-size: contain !important;
        background-position: center !important;
        height: 100vh;
        overflow: hidden;
    }

    .desktop {
        display: none !important;
    }

    .mobile {
        display: block !important;
        height: 100vh;
        width: 100%;
    }

    .mobile-content {
        display: flex;
        flex-direction: column;
        height: 100vh;
        position: relative;
    }

    .mobile-main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 5vh 20px 0 20px;
    }

    .left-column {
        position: fixed;
        left: 35px;
        top:30vh;
        bottom: 5vh;
        z-index: 100;
    }

    .thumbnails {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .thumbnail {
        width: 75px;
        height: 75px;
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.2s ease;
        opacity: 0.6;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-bottom: 0;
    }

    .thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin-bottom: -8px;
        padding-bottom: 0;
    }

    .thumbnail-text {
        display: block;
        font-size: 10px;
        color: #575757;
        text-align: center;
        padding: 0;
    }

    /* First page specific styles */
    .mobile-first-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 5vh;
        width: 100%;
    }

    .mobile-first-page .mobile-logo {
        width: 100%;
        max-width: 300px;
        margin-bottom: 2vh;
        margin-top: -8vh;
        margin-left: 5vw;
        display: block;
    }

    .mobile-first-page .mobile-button {
        font-size: 12px;
        padding: 6px 16px;
        background-color: #A9A9A9;
        color: #ffffff;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        margin-top: 0;
        display: block;
        text-align: center;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    /* Other pages styles */
    .mobile-other-pages {
        padding-top: 1vh;
        padding-right: 0vw;
        width: 100%;
        position: relative;
    }

    .mobile-other-pages .mobile-logo {
        position: fixed;
        top: 1vh;
        right: 25vw;
        width: 200px;
        margin: 0;
        z-index: 1000;
    }

    .mobile-content-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 60px;
        padding-right: 0;
        gap: 2px;
    }

    .mobile-title {
        font-size: 24px;
        color: #575757;
        margin: 5px 0;
        text-align: center;
        width: 85vw;
    }

    .mobile-text {
        font-size: 16px;
        color: #575757;
        text-align: right;
        width: 85vw;
    }

    .mobile-button {
        display: inline-block;
        padding: 8px 20px;
        background-color: rgba(230, 230, 230, 0.9);
        color: #b8006f;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        margin-top: 5px;
        align-self: flex-start;
        margin-right: 25vw;
        text-align: left;
    }

    .thumbnail.active {
        opacity: 1;
    }
}


</style>/* End custom CSS */