.module[data-id_page='35']{;background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:scroll;width:100%;max-width:100%;padding-top:128px;padding-bottom:128px;border-style:none;}.module[data-id_page='35']:hover{;}.module[data-id_page='35'] .new_admin_layer{;}.module[data-id_page='35']:hover .new_admin_layer{;}.module[data-id_page='35']{ position:relative; margin-right:auto !important; margin-left:auto !important; overflow:hidden !important; } .module[data-id_page='35'] > div{ position:relative; z-index:12; } .module[data-id_page='35']:hover .background-img { filter:none; } .module[data-id_page='35'] .background-img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; backdrop-filter: none; } .module[data-id_page='35'] .module[data-id_page='35'] .new_admin_layer{;}.module[data-id_page='35']:hover .new_admin_layer{;} .module[data-id_page='35'] .new_admin_layer { position: absolute; width: 100%; height: 100%; z-index: 10; transition: all 600ms ease; background-color: rgba(0,0,0,0); display: flex; right:0; top:0; } .module[data-id_page='35'] .layer_first_child { width: 100%; } .module[data-id_page='35']:hover .new_admin_layer { border-radius: 0 !important; background-color: rgba(0,0,0,0); } .module[data-id_page='35']{ background-image:url("https://tatotaj.ir/files/1784494194_b m 1.jpg"); } #module_new_medical_13 .mode1-size{ cursor:pointer; width:64px; height:64px; } #module_new_medical_13 .new_medical_description ul{ list-style-position:inside; } #module_new_medical_13 .content_str{ width:100%; } #module_new_medical_13 .mode2-size{ cursor:pointer; width:32px; height:32px; } #module_new_medical_13 .mode3-size{ cursor:pointer; width:48px; height:48px; } #module_new_medical_13 .mode4-size{ cursor:pointer; width:36px; height:36px; } #module_new_medical_13 .mode5-size{ cursor:pointer; width:20px; height:20px; } #module_new_medical_13 .mode6-size{ cursor:pointer; width:32px; height:32px; } #module_new_medical_13 .mode7-size{ cursor:pointer; display:flex; justify-content: center; align-items: center; } #module_new_medical_13 .mode7-size span{ width:100%; text-align:center; cursor:pointer; } .custom1{ color:; width:px; height:px; backdrop-filter: blur(0px); border:0px dotted ; } .custom1:hover{ color:; } .custom2{ color:; width:px; height:px; backdrop-filter: blur(0px); border:0px dotted ; } .custom2:hover{ color:; } #module_new_medical_13 .mode-btn1{ ; background: ; margin:0 0.5rem; border-radius:px; } #module_new_medical_13 .mode-btn1 svg{ width:100%; height:100%; fill:; } #module_new_medical_13 .mode-btn2{ ; background: ; margin:0 0.5rem; border-radius:px; } #module_new_medical_13 .mode-btn2 svg{ width:100%; height:100%; fill:; } #module_new_medical_13 .div-btn-title_main{ display: flex; justify-content: right; align-items: center; padding:0.5rem 0; } #module_new_medical_13 .new_medical_description a,#module_new_medical_13 .new_medical_description_main a{ color:#00AFEF!important; } #module_new_medical_13 .new_medical_description a:hover,#module_new_medical_13 .new_medical_description_main a:hover{ color:#00AFEF!important; } #module_new_medical_13 .swiper-pagination{ position: absolute; left: 50%; width:100%!important; transform: translate(-50%, -50%); height: max-content; } #module_new_medical_13 .swiper-pagination-bullet{ margin: 0 3px; } #module_new_medical_13 .new_medical_title_main h3{ font-weight:bold!important; } #module_new_medical_13 .new_medical_title_main h3{ font-size:48px!important; } #module_new_medical_13 .new_medical_title_main{color:#fff;font-weight:bold;font-size:48px;justify-content:center;text-align:center;margin-top:128px;margin-bottom:129px;line-height:48px;}.module[data-id_page='35']:hover .new_medical_title_main{}#module_new_medical_13 .new_medical_box_main{display:flex;flex-wrap:wrap;visibility:visible;border-style:none;}.module[data-id_page='35']:hover .new_medical_box_main{} #module_new_medical_13 .new_medical_box > div > div { width: 100%; } #module_new_medical_13 .new_medical_module{ width:1200px; position:relative; overflow:hidden; margin-left:px; margin-bottom:px; } #module_new_medical_13 .medical_box_main_animation_trigger{ margin-left:px; margin-bottom:px; } #module_new_medical_13 .new_medical_module:nth-child(1n){ margin-left:0; } #module_new_medical_13 .medical_box_main_animation_trigger:nth-child(1n){ margin-left:0; } #module_new_medical_13 .new_medical_box_main { display:flex; flex-wrap:wrap; } #module_new_medical_13 .new_medical_description_main a{ color:#00AFEF!important; } #module_new_medical_13 .new_medical_description_main a:hover{ color:#00AFEF!important; } #module_new_medical_13 .new_medical_box a{ cursor:pointer!important; } #module_new_medical_13 .new_medical_box a .new_medical_title{ cursor:pointer!important; } #module_new_medical_13 .read-more-less-des { width: fit-content; text-align: center; width: fit-content; margin-right: 50%; transform: translate(50%, 0); z-index: 1200000; position: relative; } .flex_row_revers{ flex-direction: row-reverse; } .flex_row{ flex-direction: row; } #module_new_medical_13{ overflow:hidden; min-width:1200px; } #module_new_medical_13 .new_medical_box{ margin:auto; overflow:hidden; position:relative; z-index:10; display:flex; height:100%; } #module_new_medical_13 .new_medical_box.dno{ display:none !important; } #module_new_medical_13 > .container-main{ position:relative; z-index:11; /*height:100%*/ } #module_new_medical_13 .new_medical_box{ height:100%; margin-right:auto; margin-left:auto; } #module_new_medical_13 .swiper-container{ width:1200px; } #module_new_medical_13 .top_layer_diagonal{ z-index:9 !important; } #module_new_medical_13 .right_layer_diagonal{ z-index:9 !important; } #module_new_medical_13 .left_layer_diagonal{ z-index:9 !important; } #module_new_medical_13 .bottom_layer_diagonal{ z-index:9 !important; } /* ======================================== SERVICE MODULE - RENDERBOX CMS COMPLIANT ======================================== */ /* Reset within root scope */ #ServiceModule_root__Sm9Kw, #ServiceModule_root__Sm9Kw *, #ServiceModule_root__Sm9Kw *::before, #ServiceModule_root__Sm9Kw *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ========== ROOT CONTAINER ========== */ #ServiceModule_root__Sm9Kw { font-family:Vazirmatn, "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; direction: rtl; } #ServiceModule_root__Sm9Kw.ServiceModule_container__Bx7Np { position: relative !important; width: 100% !important; overflow: hidden !important; padding: 3rem 1.5rem !important; background: transparent !important; } /* ========== DECORATIVE BACKGROUND BLOB ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_bgBlob__Qr3Ld { position: absolute !important; top: 0 !important; right: 0 !important; width: 600px !important; height: 600px !important; background: rgba(255, 107, 53, 0.05) !important; /* beautium-orange with opacity */ filter: blur(120px) !important; border-radius: 50% !important; transform: translate(33%, -50%) !important; z-index: 0 !important; pointer-events: none !important; } /* ========== INNER WRAPPER ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_innerWrap__Ty4Mx { position: relative !important; max-width: 1280px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1fr !important; gap: 4rem !important; align-items: center !important; } @media (min-width: 1024px) { #ServiceModule_root__Sm9Kw .ServiceModule_innerWrap__Ty4Mx { grid-template-columns: 58.33% 41.67% !important; /* 7/12 and 5/12 */ ; } } /* ========== TEXT COLUMN ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_textColumn__Hw8Pz { display: flex !important; flex-direction: column !important; justify-content: center !important; position: relative !important; } /* ========== SUBTITLE ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_subtitle__Jv2Qn { margin-bottom: 1.5rem !important; } #ServiceModule_root__Sm9Kw .ServiceModule_subtitleInner__Ks1Lp { display: flex !important; align-items: center !important; gap: 0.75rem !important; } #ServiceModule_root__Sm9Kw .ServiceModule_subtitleLine__Nm6Vt { height: 2px !important; width: 2rem !important; background: #540863!important; /* beautium-orange */ display: block !important; } #ServiceModule_root__Sm9Kw .ServiceModule_subtitleText__Pr9Xw { font-size: 0.75rem !important; color: #540863 !important; /* beautium-orange */ font-weight: 700 !important; letter-spacing: 0.25em !important; text-transform: uppercase !important; } @media (min-width: 768px) { #ServiceModule_root__Sm9Kw .ServiceModule_subtitleText__Pr9Xw { font-size: 0.875rem !important; } } /* ========== HEADING ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_heading__Zt8Hy { margin-bottom: 2.5rem !important; } #ServiceModule_root__Sm9Kw .ServiceModule_headingMain__Cv4Qs { line-height: 1.3 !important; letter-spacing: -0.025em !important; } #ServiceModule_root__Sm9Kw .ServiceModule_headingBold__Dx2Wt { display: block !important; font-size: 2.25rem !important; font-weight: 900 !important; color: #1a1a1a !important; /* beautium-black */ margin-bottom: 0.5rem !important; } #ServiceModule_root__Sm9Kw .ServiceModule_headingLight__Ey5Ru { display: block !important; font-size: 1.875rem !important; font-weight: 300 !important; color: #6b6b6b !important; /* beautium-grey */ } @media (min-width: 1024px) { #ServiceModule_root__Sm9Kw .ServiceModule_headingBold__Dx2Wt { font-size: 3.75rem !important; } #ServiceModule_root__Sm9Kw .ServiceModule_headingLight__Ey5Ru { font-size: 3rem !important; } } /* ========== BODY TEXT ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_bodyText__Az3Yx { max-width: 42rem !important; } #ServiceModule_root__Sm9Kw .ServiceModule_paragraph__Bw6Zv { font-size: 1.125rem !important; line-height: 1.8 !important; color: #6b6b6b !important; /* beautium-grey */ text-align: justify !important; font-weight: 300 !important; margin-bottom: 2rem !important; } #ServiceModule_root__Sm9Kw .ServiceModule_paragraph__Bw6Zv:last-child { margin-bottom: 0 !important; } #ServiceModule_root__Sm9Kw .ServiceModule_strong__Cp1Xt { font-weight: 700 !important; color: #1a1a1a !important; /* beautium-black */ } /* ========== COUNTERS WRAPPER ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_countersWrap__Dt8Uw { display: flex !important; flex-wrap: wrap !important; gap: 4rem !important; padding-top: 3rem !important; margin-top: 3rem !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } @media (min-width: 768px) { #ServiceModule_root__Sm9Kw .ServiceModule_countersWrap__Dt8Uw { gap: 6rem !important; } } /* ========== COUNTER ITEM ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_counterItem__Ev4Sy { position: relative !important; cursor: default !important; transition: transform 0.3s ease !important; } #ServiceModule_root__Sm9Kw .ServiceModule_counterItem__Ev4Sy:hover { transform: translateY(-4px) !important; } #ServiceModule_root__Sm9Kw .ServiceModule_counterInner__Fw2Qz { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding-right: 1rem !important; } /* ========== COUNTER NUMBER WRAP ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_counterNumWrap__Gx5Tx { position: relative !important; display: flex !important; flex-direction: row-reverse !important; /* RTL */ align-items: baseline !important; gap: 0.25rem !important; } #ServiceModule_root__Sm9Kw .ServiceModule_counterSuffix__Hy9Uv { font-size: 1.875rem !important; color: #b3b3b3 !important; /* beautium-light-grey */ font-weight: 500 !important; transition: all 0.5s ease-out !important; } @media (min-width: 768px) { #ServiceModule_root__Sm9Kw .ServiceModule_counterSuffix__Hy9Uv { font-size: 2.25rem !important; } } #ServiceModule_root__Sm9Kw .ServiceModule_counterItem__Ev4Sy:hover .ServiceModule_counterSuffix__Hy9Uv { color: #540863!important; /* beautium-orange */ transform: translateY(-4px) !important; } #ServiceModule_root__Sm9Kw .ServiceModule_counterNumber__Iz3Kw { font-size: 3.75rem !important; font-weight: 900 !important; color: #540863 !important; /* beautium-black */ transition: color 0.3s ease !important; font-family:Vazirmatn, serif !important; } @media (min-width: 768px) { #ServiceModule_root__Sm9Kw .ServiceModule_counterNumber__Iz3Kw { font-size: 4.5rem !important; line-height: 5rem; } } #ServiceModule_root__Sm9Kw .ServiceModule_counterItem__Ev4Sy:hover .ServiceModule_counterNumber__Iz3Kw { color: #540863 !important; /* beautium-orange */ } /* ========== COUNTER GLOW LINE ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_counterGlow__Jw7Ry { position: absolute !important; bottom: -0.5rem !important; right: 0 !important; width: 2rem !important; height: 4px !important; background: #540863 !important; /* beautium-orange */ border-radius: 9999px !important; opacity: 0 !important; transition: all 0.5s ease-out !important; } #ServiceModule_root__Sm9Kw .ServiceModule_counterItem__Ev4Sy:hover .ServiceModule_counterGlow__Jw7Ry { opacity: 1 !important; width: 100% !important; } /* ========== COUNTER LABEL ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_counterLabel__Kx1Sz { font-size: 1rem !important; color: #6b6b6b !important; /* beautium-grey */ font-weight: 500 !important; margin-top: 2rem !important; transition: all 0.3s ease !important; } #ServiceModule_root__Sm9Kw .ServiceModule_counterItem__Ev4Sy:hover .ServiceModule_counterLabel__Kx1Sz { color: #1a1a1a !important; /* beautium-black */ transform: translateX(0.25rem) !important; } /* ========== IMAGE COLUMN ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_imageColumn__Lz4Np { position: relative !important; display: flex !important; justify-content: center !important; } @media (min-width: 1024px) { #ServiceModule_root__Sm9Kw .ServiceModule_imageColumn__Lz4Np { justify-content: flex-end !important; } } #ServiceModule_root__Sm9Kw .ServiceModule_imageWrap__Mx8Qr { width: 100% !important; max-width: 28rem !important; padding: 1rem !important; } @media (min-width: 1024px) { #ServiceModule_root__Sm9Kw .ServiceModule_imageWrap__Mx8Qr { padding: 0 !important; } } /* ========== IMAGE CONTAINER WITH BORDERS ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_imageContainer__Nw3Ps { position: relative !important; } #ServiceModule_root__Sm9Kw .ServiceModule_imageBorder1__Ov6Qt { position: absolute !important; inset: -1rem !important; border: 1px solid rgba(26, 26, 26, 0.1) !important; border-radius: 2.5rem !important; transform: rotate(3deg) !important; transition: transform 0.7s ease !important; } #ServiceModule_root__Sm9Kw .ServiceModule_imageBorder2__Pw9Ru { position: absolute !important; inset: -1rem !important; border: 1px solid rgba(255, 107, 53, 0.2) !important; border-radius: 2.5rem !important; transform: rotate(-2deg) !important; transition: transform 0.7s ease !important; } #ServiceModule_root__Sm9Kw .ServiceModule_imageContainer__Nw3Ps:hover .ServiceModule_imageBorder1__Ov6Qt, #ServiceModule_root__Sm9Kw .ServiceModule_imageContainer__Nw3Ps:hover .ServiceModule_imageBorder2__Pw9Ru { transform: rotate(0deg) !important; } /* ========== IMAGE BOX ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_imageBox__Qx2Sv { position: relative !important; overflow: hidden !important; border-radius: 2rem !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important; background: #ffffff !important; } #ServiceModule_root__Sm9Kw .ServiceModule_imageOverlay__Ry5Tw { position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent) !important; opacity: 0 !important; transition: opacity 0.5s ease !important; z-index: 10 !important; } #ServiceModule_root__Sm9Kw .ServiceModule_imageContainer__Nw3Ps:hover .ServiceModule_imageOverlay__Ry5Tw { opacity: 1 !important; } #ServiceModule_root__Sm9Kw .ServiceModule_image__Sz8Ux { width: 100% !important; height: auto !important; display: block !important; object-fit: cover !important; transition: transform 1s ease-out !important; } #ServiceModule_root__Sm9Kw .ServiceModule_imageContainer__Nw3Ps:hover .ServiceModule_image__Sz8Ux { transform: scale(1.1) !important; } /* ========== ANIMATION STATES ========== */ #ServiceModule_root__Sm9Kw .ServiceModule_animateIn__Fx5Rw { opacity: 0 !important; transform: translateY(30px) !important; transition: opacity 0.6s ease, transform 0.6s ease !important; } #ServiceModule_root__Sm9Kw .ServiceModule_animateIn__Fx5Rw.ServiceModule_visible__Yx7Kp { opacity: 1 !important; transform: translateY(0) !important; } /* ========== MOBILE ADJUSTMENTS ========== */ @media (min-width: 768px) { #ServiceModule_root__Sm9Kw.ServiceModule_container__Bx7Np { padding: 4rem 3rem !important; } } @media (min-width: 1024px) { #ServiceModule_root__Sm9Kw.ServiceModule_container__Bx7Np { padding: 6rem 3rem !important; } } /* ========================================================================== RenderBox CMS Module Optimization: Services Section Module Root: #Services_root__T4j89 Brand Color: #540863 Master Guide v9.0 Strict Compliance ========================================================================== */ /* 1. Scoped CSS Reset */ #Services_root__T4j89, #Services_root__T4j89 *, #Services_root__T4j89 *::before, #Services_root__T4j89 *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2. Root Container */ #Services_root__T4j89 { position: relative !important; width: 100% !important; background-color: #f5f5f5 !important; border-top: 1px solid rgba(229, 229, 229, 0.6) !important; border-bottom: 1px solid rgba(229, 229, 229, 0.6) !important; padding: 4rem 1rem !important; /* py-16 px-4 */ overflow: hidden !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; direction: rtl !important; text-align: right !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 640px) { #Services_root__T4j89 { padding: 5rem 1.5rem !important; /* py-20 px-6 */ } } @media (min-width: 1024px) { #Services_root__T4j89 { padding-left: 2rem !important; padding-right: 2rem !important; } } /* 3. Ambient Glow (z-index: 1, position: absolute within relative root) */ #Services_root__T4j89 .Services_ambientGlow__T4j89 { position: absolute !important; top: 2.5rem !important; right: 50% !important; transform: translateX(50%) !important; width: 34rem !important; height: 18rem !important; background: radial-gradient(circle, rgba(84, 8, 99, 0.04) 0%, transparent 70%) !important; border-radius: 9999px !important; filter: blur(48px) !important; pointer-events: none !important; z-index: 1 !important; } /* 4. Inner Max Width Wrapper */ #Services_root__T4j89 .Services_innerWrap__T4j89 { position: relative !important; z-index: 10 !important; width: 100% !important; max-width: 80rem !important; /* 1280px */ margin-left: auto !important; margin-right: auto !important; } /* 5. Header Section */ #Services_root__T4j89 .Services_header__T4j89 { text-align: center !important; max-width: 48rem !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 3rem !important; } #Services_root__T4j89 .Services_title__T4j89 { font-size: 1.5rem !important; font-weight: 900 !important; color: #171717 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; line-height: 1.35 !important; text-align: center !important; } @media (min-width: 640px) { #Services_root__T4j89 .Services_title__T4j89 { font-size: 1.875rem !important; } } @media (min-width: 1024px) { #Services_root__T4j89 .Services_title__T4j89 { font-size: 2.25rem !important; } } #Services_root__T4j89 .Services_titleDivider__T4j89 { width: 6rem !important; height: 4px !important; background: linear-gradient(to right, transparent, #540863, transparent) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 9999px !important; margin-bottom: 1.25rem !important; } #Services_root__T4j89 .Services_subtitle__T4j89 { color: #404040 !important; font-size: 0.875rem !important; font-weight: 500 !important; line-height: 1.75 !important; max-width: 42rem !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } @media (min-width: 640px) { #Services_root__T4j89 .Services_subtitle__T4j89 { font-size: 1rem !important; } } /* 6. Responsive 3-Column Grid */ #Services_root__T4j89 .Services_grid__T4j89 { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; align-items: stretch !important; } @media (min-width: 768px) { #Services_root__T4j89 .Services_grid__T4j89 { grid-template-columns: repeat(2, 1fr) !important; gap: 1.75rem !important; } } @media (min-width: 1024px) { #Services_root__T4j89 .Services_grid__T4j89 { grid-template-columns: repeat(3, 1fr) !important; } } /* 7. Card Wrap with Drop Shadow */ #Services_root__T4j89 .Services_cardWrap__T4j89 { position: relative !important; width: 100% !important; display: flex !important; flex-direction: column !important; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.05)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.03)) !important; transition: filter 0.3s ease !important; } #Services_root__T4j89 .Services_cardWrap__T4j89:hover { filter: drop-shadow(0 10px 24px rgba(84, 8, 99, 0.12)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.04)) !important; } /* 8. Top-Right Number Circle Badge */ #Services_root__T4j89 .Services_badgeCircle__T4j89 { position: absolute !important; top: 0 !important; right: 0 !important; width: 60px !important; height: 60px !important; background-color: #ffffff !important; border-radius: 9999px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.5rem !important; font-weight: 800 !important; color: #171717 !important; z-index: 20 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.03) !important; pointer-events: none !important; transition: transform 0.3s ease, color 0.3s ease !important; } #Services_root__T4j89 .Services_cardWrap__T4j89:hover .Services_badgeCircle__T4j89 { transform: scale(1.06) !important; color: #540863 !important; } /* 9. Card Body (Clipped to Scooped Contour) */ #Services_root__T4j89 .Services_cardBody__T4j89 { width: 100% !important; height: 100% !important; background-color: #ffffff !important; padding: 1.5rem !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; position: relative !important; border-radius: 1.75rem !important; /* Fallback for browsers without clipPath */ transition: transform 0.3s ease, background-color 0.3s ease !important; } #Services_root__T4j89 .Services_cardWrap__T4j89:hover .Services_cardBody__T4j89 { transform: translateY(-4px) !important; } /* 10. Card Top Content (Title, Desc, Figure) */ #Services_root__T4j89 .Services_cardTopContent__T4j89 { width: 100% !important; } #Services_root__T4j89 .Services_cardTitle__T4j89 { font-size: 1.125rem !important; font-weight: 800 !important; color: #171717 !important; padding-right: 72px !important; /* Space clearing the top-right circle badge */ margin-bottom: 0.5rem !important; line-height: 1.35 !important; transition: color 0.25s ease !important; } @media (min-width: 640px) { #Services_root__T4j89 .Services_cardTitle__T4j89 { font-size: 1.25rem !important; } } #Services_root__T4j89 .Services_cardWrap__T4j89:hover .Services_cardTitle__T4j89 { color: #540863 !important; } #Services_root__T4j89 .Services_cardDesc__T4j89 { font-size: 0.75rem !important; color: #525252 !important; line-height: 1.65 !important; padding-right: 68px !important; margin-bottom: 1rem !important; font-weight: 400 !important; } @media (min-width: 640px) { #Services_root__T4j89 .Services_cardDesc__T4j89 { font-size: 0.875rem !important; } } /* 11. Image Figure */ #Services_root__T4j89 .Services_cardFigure__T4j89 { height: 180px !important; border-radius: 20px !important; overflow: hidden !important; position: relative !important; background-color: #f5f5f5 !important; margin-bottom: 1rem !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important; } @media (min-width: 640px) { #Services_root__T4j89 .Services_cardFigure__T4j89 { height: 195px !important; } } #Services_root__T4j89 .Services_cardImg__T4j89 { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.5s ease !important; } #Services_root__T4j89 .Services_cardWrap__T4j89:hover .Services_cardImg__T4j89 { transform: scale(1.05) !important; } /* 12. Card Footer & Action Button */ #Services_root__T4j89 .Services_cardFooter__T4j89 { padding-top: 0.5rem !important; border-top: 1px solid #f5f5f5 !important; display: flex !important; justify-content: center !important; } #Services_root__T4j89 .Services_actionBtn__T4j89 { width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 0.625rem 1rem !important; border-radius: 0.75rem !important; background-color: #540863 !important; color: #ffffff !important; font-size: 0.75rem !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; cursor: pointer !important; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } #Services_root__T4j89 .Services_actionBtn__T4j89:hover { background-color: #43064f !important; transform: scale(1.02) !important; box-shadow: 0 4px 14px rgba(84, 8, 99, 0.25) !important; } #Services_root__T4j89 .Services_actionBtn__T4j89:active { transform: scale(0.98) !important; } #Services_root__T4j89 .Services_btnText__T4j89 { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #Services_root__T4j89 .Services_btnIcon__T4j89 { width: 0.875rem !important; height: 0.875rem !important; flex-shrink: 0 !important; stroke: #ffffff !important; } /* 13. Hidden SVG Defs */ #Services_root__T4j89 .Services_clipSvgDef__T4j89 { position: absolute !important; pointer-events: none !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } /* ========================================================================== 14. Entry Animation States (RenderBox Class-Based Pattern - Section 10.5) ========================================================================== */ /* Hidden initial states */ #Services_root__T4j89 .Services_animate-in__T4j89 { opacity: 0 !important; } #Services_root__T4j89 .Services_slide-up__T4j89 { transform: translateY(30px) !important; } /* Active animated states */ #Services_root__T4j89 .Services_animate-in__T4j89.Services_animated__T4j89 { opacity: 1 !important; transform: translate(0, 0) !important; } /* Transitions on animated elements */ #Services_root__T4j89 .Services_header__T4j89 { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; } #Services_root__T4j89 .Services_cardWrap__T4j89 { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important; } /* ========================================================================== RenderBox CMS Module Optimization: Suitability Advisor Module Root: #Suitability_root__Sb8K2 Brand Color: #540863 Master Guide v9.0 Strict Compliance ========================================================================== */ /* 1. Scoped CSS Reset */ #Suitability_root__Sb8K2, #Suitability_root__Sb8K2 *, #Suitability_root__Sb8K2 *::before, #Suitability_root__Sb8K2 *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2. Root Container */ #Suitability_root__Sb8K2 { position: relative !important; width: 100% !important; max-width: 80rem !important; /* 1280px */ margin-left: auto !important; margin-right: auto !important; padding: 5rem 1rem !important; /* py-20 px-4 */ border-top: 1px solid rgba(245, 245, 245, 0.9) !important; overflow: hidden !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; direction: rtl !important; text-align: right !important; background: transparent !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } @media (min-width: 1024px) { #Suitability_root__Sb8K2 { padding-left: 2rem !important; padding-right: 2rem !important; } } /* 3. Ambient Blur (z-index: 1) */ #Suitability_root__Sb8K2 .Suitability_ambientBlur__Sb8K2 { position: absolute !important; top: 50% !important; left: 25% !important; transform: translateY(-50%) !important; width: 24rem !important; height: 24rem !important; background: rgba(84, 8, 99, 0.04) !important; border-radius: 9999px !important; filter: blur(48px) !important; pointer-events: none !important; z-index: 1 !important; } /* 4. Floating Orb Animation */ @keyframes Suitability_floatOrbAnim__Sb8K2 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.12; } 50% { transform: translate(20px, 0) scale(1.25); opacity: 0.25; } } #Suitability_root__Sb8K2 .Suitability_floatingOrb__Sb8K2 { position: absolute !important; top: -4rem !important; right: -4rem !important; width: 20rem !important; height: 20rem !important; background: linear-gradient(135deg, rgba(84, 8, 99, 0.15), rgba(244, 114, 182, 0.1)) !important; border-radius: 9999px !important; filter: blur(48px) !important; pointer-events: none !important; animation: Suitability_floatOrbAnim__Sb8K2 9s ease-in-out infinite !important; z-index: 1 !important; } /* 5. Main Card Container */ #Suitability_root__Sb8K2 .Suitability_mainCard__Sb8K2 { position: relative !important; width: 100% !important; background: linear-gradient(135deg, rgba(250, 245, 255, 0.5) 0%, #ffffff 50%, rgba(250, 245, 255, 0.25) 100%) !important; border: 1px solid rgba(84, 8, 99, 0.25) !important; border-radius: 1.5rem !important; padding: 1.5rem !important; box-shadow: 0 12px 40px -8px rgba(84, 8, 99, 0.08) !important; overflow: hidden !important; z-index: 2 !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_mainCard__Sb8K2 { padding: 2.5rem !important; } } @media (min-width: 1024px) { #Suitability_root__Sb8K2 .Suitability_mainCard__Sb8K2 { padding: 3rem !important; } } /* 6. Header */ #Suitability_root__Sb8K2 .Suitability_header__Sb8K2 { text-align: center !important; max-width: 48rem !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 2.5rem !important; position: relative !important; z-index: 10 !important; } #Suitability_root__Sb8K2 .Suitability_badgeWrapper__Sb8K2 { display: flex !important; justify-content: center !important; margin-bottom: 0.875rem !important; } #Suitability_root__Sb8K2 .Suitability_badge__Sb8K2 { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.375rem 0.875rem !important; border-radius: 9999px !important; background: rgba(84, 8, 99, 0.1) !important; border: 1px solid rgba(84, 8, 99, 0.2) !important; color: #540863 !important; font-size: 0.75rem !important; font-weight: 800 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; white-space: nowrap !important; } #Suitability_root__Sb8K2 .Suitability_badgeIcon__Sb8K2 { width: 0.875rem !important; height: 0.875rem !important; flex-shrink: 0 !important; stroke: #540863 !important; } #Suitability_root__Sb8K2 .Suitability_title__Sb8K2 { font-size: 1.5rem !important; font-weight: 900 !important; color: #171717 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; line-height: 1.35 !important; text-align: center !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_title__Sb8K2 { font-size: 1.875rem !important; } } @media (min-width: 1024px) { #Suitability_root__Sb8K2 .Suitability_title__Sb8K2 { font-size: 2.25rem !important; } } #Suitability_root__Sb8K2 .Suitability_titleDivider__Sb8K2 { width: 5rem !important; height: 4px !important; background: linear-gradient(to right, transparent, #540863, transparent) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 9999px !important; } /* 7. Content Box */ #Suitability_root__Sb8K2 .Suitability_contentBox__Sb8K2 { position: relative !important; z-index: 10 !important; width: 100% !important; max-width: 64rem !important; margin-left: auto !important; margin-right: auto !important; } /* 8. Inner Content Card */ #Suitability_root__Sb8K2 .Suitability_innerCard__Sb8K2 { padding: 1.5rem !important; border-radius: 1.5rem !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(229, 229, 229, 0.9) !important; box-shadow: 0 8px 30px -6px rgba(84, 8, 99, 0.06) !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; position: relative !important; overflow: hidden !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_innerCard__Sb8K2 { padding: 2.25rem !important; } } @media (min-width: 1024px) { #Suitability_root__Sb8K2 .Suitability_innerCard__Sb8K2 { padding: 2.75rem !important; } } #Suitability_root__Sb8K2 .Suitability_innerCard__Sb8K2:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 45px -10px rgba(84, 8, 99, 0.12) !important; border-color: rgba(84, 8, 99, 0.35) !important; } /* 9. Points List */ #Suitability_root__Sb8K2 .Suitability_pointsList__Sb8K2 { display: flex !important; flex-direction: column !important; gap: 1rem !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_pointsList__Sb8K2 { gap: 1.25rem !important; } } /* 10. Individual Point Cards */ #Suitability_root__Sb8K2 .Suitability_pointCard__Sb8K2 { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 0.875rem !important; padding: 1.25rem !important; border-radius: 1rem !important; background: linear-gradient(to right, #ffffff, rgba(250, 245, 255, 0.4), #ffffff) !important; border: 1px solid rgba(233, 213, 255, 0.8) !important; box-shadow: 0 4px 20px -4px rgba(84, 8, 99, 0.06) !important; position: relative !important; overflow: hidden !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_pointCard__Sb8K2 { flex-direction: row !important; align-items: flex-start !important; text-align: right !important; gap: 1.25rem !important; padding: 1.5rem !important; } } #Suitability_root__Sb8K2 .Suitability_pointCard__Sb8K2:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 30px -6px rgba(84, 8, 99, 0.12) !important; border-color: rgba(84, 8, 99, 0.4) !important; } /* 11. Right Border Colored Accent Indicator */ #Suitability_root__Sb8K2 .Suitability_cardAccentStrip__Sb8K2 { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 6px !important; background: linear-gradient(to bottom, #540863, #a855f7, #540863) !important; border-radius: 0 1rem 1rem 0 !important; pointer-events: none !important; } /* 12. Shimmer Sweep on Hover */ #Suitability_root__Sb8K2 .Suitability_shimmerSweep__Sb8K2 { position: absolute !important; inset: 0 !important; background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%) !important; transform: translateX(100%) !important; transition: transform 1s ease-out !important; pointer-events: none !important; } #Suitability_root__Sb8K2 .Suitability_pointCard__Sb8K2:hover .Suitability_shimmerSweep__Sb8K2 { transform: translateX(-100%) !important; } /* 13. Icon Box */ #Suitability_root__Sb8K2 .Suitability_iconBox__Sb8K2 { width: 3rem !important; height: 3rem !important; border-radius: 1rem !important; background: linear-gradient(135deg, #540863, #7a0c8f) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 4px 14px rgba(84, 8, 99, 0.25) !important; transition: transform 0.3s ease !important; margin: 0 auto !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_iconBox__Sb8K2 { margin: 0.125rem 0 0 0 !important; } } #Suitability_root__Sb8K2 .Suitability_pointCard__Sb8K2:hover .Suitability_iconBox__Sb8K2 { transform: scale(1.06) rotate(3deg) !important; } #Suitability_root__Sb8K2 .Suitability_pointCard__Sb8K2[data-point-index="1"]:hover .Suitability_iconBox__Sb8K2 { transform: scale(1.06) rotate(-3deg) !important; } #Suitability_root__Sb8K2 .Suitability_iconSvg__Sb8K2 { width: 1.25rem !important; height: 1.25rem !important; stroke: #ffffff !important; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)) !important; } /* 14. Card Body */ #Suitability_root__Sb8K2 .Suitability_cardBody__Sb8K2 { flex: 1 1 0% !important; position: relative !important; z-index: 10 !important; width: 100% !important; } #Suitability_root__Sb8K2 .Suitability_cardTagRow__Sb8K2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; margin-bottom: 0.5rem !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_cardTagRow__Sb8K2 { justify-content: flex-start !important; } } #Suitability_root__Sb8K2 .Suitability_cardTag__Sb8K2 { font-size: 0.75rem !important; font-weight: 900 !important; color: #540863 !important; letter-spacing: 0.025em !important; padding: 0.125rem 0.625rem !important; border-radius: 0.375rem !important; background: rgba(84, 8, 99, 0.1) !important; border: 1px solid rgba(84, 8, 99, 0.2) !important; display: inline-block !important; } #Suitability_root__Sb8K2 .Suitability_cardDesc__Sb8K2 { color: #3f3f46 !important; line-height: 1.7 !important; font-size: 0.875rem !important; font-weight: 400 !important; text-align: center !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_cardDesc__Sb8K2 { font-size: 1rem !important; text-align: right !important; } } /* 15. Bottom Highlight Box */ #Suitability_root__Sb8K2 .Suitability_highlightBox__Sb8K2 { margin-top: 1.5rem !important; padding: 1.5rem !important; border-radius: 1rem !important; background: linear-gradient(to right, rgba(84, 8, 99, 0.1) 0%, rgba(84, 8, 99, 0.05) 50%, rgba(243, 232, 255, 0.4) 100%) !important; border: 1px solid rgba(84, 8, 99, 0.3) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 1rem !important; transition: transform 0.2s ease !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_highlightBox__Sb8K2 { padding: 1.75rem !important; flex-direction: row !important; align-items: center !important; text-align: right !important; } } #Suitability_root__Sb8K2 .Suitability_highlightBox__Sb8K2:hover { transform: scale(1.01) !important; } #Suitability_root__Sb8K2 .Suitability_highlightIconBox__Sb8K2 { width: 3rem !important; height: 3rem !important; border-radius: 1rem !important; background: #540863 !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 4px 12px rgba(84, 8, 99, 0.2) !important; margin: 0 auto !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_highlightIconBox__Sb8K2 { margin: 0 !important; } } #Suitability_root__Sb8K2 .Suitability_highlightIconSvg__Sb8K2 { width: 1.5rem !important; height: 1.5rem !important; stroke: #ffffff !important; } #Suitability_root__Sb8K2 .Suitability_highlightTextCol__Sb8K2 { flex: 1 1 0% !important; } #Suitability_root__Sb8K2 .Suitability_highlightText__Sb8K2 { color: #171717 !important; font-weight: 700 !important; line-height: 1.7 !important; font-size: 0.875rem !important; text-align: center !important; } @media (min-width: 640px) { #Suitability_root__Sb8K2 .Suitability_highlightText__Sb8K2 { font-size: 1rem !important; text-align: right !important; } } /* ========================================================================== 16. Entry Animation States (RenderBox Class-Based Pattern - Section 10.5) ========================================================================== */ /* Hidden initial states */ #Suitability_root__Sb8K2 .Suitability_animate-in__Sb8K2 { opacity: 0 !important; } #Suitability_root__Sb8K2 .Suitability_slide-up__Sb8K2 { transform: translateY(30px) !important; } /* Active animated states */ #Suitability_root__Sb8K2 .Suitability_animate-in__Sb8K2.Suitability_animated__Sb8K2 { opacity: 1 !important; transform: translate(0, 0) !important; } /* Transitions on animated elements */ #Suitability_root__Sb8K2 .Suitability_mainCard__Sb8K2 { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important; } #Suitability_root__Sb8K2 .Suitability_header__Sb8K2 { transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important; } #Suitability_root__Sb8K2 .Suitability_pointCard__Sb8K2 { transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.25s ease, border-color 0.25s ease !important; } #Suitability_root__Sb8K2 .Suitability_highlightBox__Sb8K2 { transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important; } /* ========================================================================== RenderBox CMS Module: Tattoo Pricing Section Module Root: #TattooPricing_root__Kp7m3 Brand Color: #540863 Master Guide v9.0 - Using REAL DIVS instead of pseudo-elements ========================================================================== */ /* 1. Scoped CSS Reset */ #TattooPricing_root__Kp7m3, #TattooPricing_root__Kp7m3 *, #TattooPricing_root__Kp7m3 *::before, #TattooPricing_root__Kp7m3 *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2. Root Container */ #TattooPricing_root__Kp7m3 { position: relative !important; width: 100% !important; max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; padding: 4rem 1rem !important; border-top: 1px solid rgba(245, 245, 245, 0.9) !important; overflow: hidden !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; direction: rtl !important; text-align: right !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 { padding: 5rem 1.5rem !important; } } @media (min-width: 1024px) { #TattooPricing_root__Kp7m3 { padding: 5rem 2rem !important; } } /* 3. Ambient Background Blurs */ #TattooPricing_root__Kp7m3 .TattooPricing_ambientGlow1__Kp7m3 { position: absolute !important; top: 33% !important; right: 2.5rem !important; width: 24rem !important; height: 24rem !important; background: radial-gradient(circle, rgba(84, 8, 99, 0.035) 0%, transparent 70%) !important; border-radius: 9999px !important; filter: blur(48px) !important; pointer-events: none !important; z-index: 1 !important; } #TattooPricing_root__Kp7m3 .TattooPricing_ambientGlow2__Kp7m3 { position: absolute !important; bottom: 25% !important; left: 2.5rem !important; width: 24rem !important; height: 24rem !important; background: radial-gradient(circle, rgba(168, 85, 247, 0.035) 0%, transparent 70%) !important; border-radius: 9999px !important; filter: blur(48px) !important; pointer-events: none !important; z-index: 1 !important; } /* 4. 2-Column Responsive Grid */ #TattooPricing_root__Kp7m3 .TattooPricing_grid__Kp7m3 { position: relative !important; z-index: 10 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 1.75rem !important; align-items: stretch !important; } @media (min-width: 1024px) { #TattooPricing_root__Kp7m3 .TattooPricing_grid__Kp7m3 { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; } } /* 5. Column Wrapper */ #TattooPricing_root__Kp7m3 .TattooPricing_col__Kp7m3 { height: 100% !important; display: flex !important; flex-direction: column !important; } /* 6. Base Card */ #TattooPricing_root__Kp7m3 .TattooPricing_card__Kp7m3 { position: relative !important; overflow: hidden !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; border-radius: 1.5rem !important; padding: 1.5rem !important; cursor: pointer !important; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_card__Kp7m3 { padding: 2.25rem !important; } } @media (min-width: 1024px) { #TattooPricing_root__Kp7m3 .TattooPricing_card__Kp7m3 { padding: 2.75rem !important; } } #TattooPricing_root__Kp7m3 .TattooPricing_card__Kp7m3:hover { transform: translateY(-6px) !important; } /* 7. Morphing Circles - REAL DIVS (CRITICAL FIX FOR RENDERBOX) */ #TattooPricing_root__Kp7m3 .TattooPricing_morphCircle__Kp7m3 { position: absolute !important; width: 22% !important; height: 22% !important; min-width: 65px !important; min-height: 65px !important; max-width: 120px !important; max-height: 120px !important; border-radius: 50% !important; transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; } /* Top Right Circle */ #TattooPricing_root__Kp7m3 .TattooPricing_morphCircleTopRight__Kp7m3 { top: 0 !important; right: 0 !important; transform: translate(30%, -30%) !important; } /* Bottom Left Circle */ #TattooPricing_root__Kp7m3 .TattooPricing_morphCircleBottomLeft__Kp7m3 { bottom: 0 !important; left: 0 !important; transform: translate(-30%, 30%) !important; } /* Hover State - Expand circles to fill entire card */ #TattooPricing_root__Kp7m3 .TattooPricing_card__Kp7m3:hover .TattooPricing_morphCircle__Kp7m3 { width: 150% !important; height: 150% !important; min-width: 150% !important; min-height: 150% !important; max-width: 150% !important; max-height: 150% !important; border-radius: 50% !important; } #TattooPricing_root__Kp7m3 .TattooPricing_card__Kp7m3:hover .TattooPricing_morphCircleTopRight__Kp7m3 { transform: translate(30%, -30%) !important; } #TattooPricing_root__Kp7m3 .TattooPricing_card__Kp7m3:hover .TattooPricing_morphCircleBottomLeft__Kp7m3 { transform: translate(-30%, 30%) !important; } /* 8. Dark Card */ #TattooPricing_root__Kp7m3 .TattooPricing_cardDark__Kp7m3 { background: linear-gradient(145deg, #3c0448, #540863, #32023a) !important; border: 1px solid rgba(131, 23, 155, 0.6) !important; box-shadow: 0 12px 40px rgba(84, 8, 99, 0.25) !important; color: #ffffff !important; } #TattooPricing_root__Kp7m3 .TattooPricing_cardDark__Kp7m3:hover { box-shadow: 0 25px 60px rgba(84, 8, 99, 0.5) !important; border-color: rgba(131, 23, 155, 0.9) !important; } /* Dark Card - Circle Colors */ #TattooPricing_root__Kp7m3 .TattooPricing_cardDark__Kp7m3 .TattooPricing_morphCircleTopRight__Kp7m3 { background: linear-gradient(135deg, #8812a0, #620974) !important; box-shadow: 0 4px 20px rgba(136, 18, 160, 0.35) !important; } #TattooPricing_root__Kp7m3 .TattooPricing_cardDark__Kp7m3 .TattooPricing_morphCircleBottomLeft__Kp7m3 { background: linear-gradient(315deg, #9f1cbe, #540863) !important; box-shadow: 0 -4px 20px rgba(159, 28, 190, 0.35) !important; } #TattooPricing_root__Kp7m3 .TattooPricing_cardDark__Kp7m3:hover .TattooPricing_morphCircle__Kp7m3 { opacity: 0.9 !important; } /* 9. Light Card */ #TattooPricing_root__Kp7m3 .TattooPricing_cardLight__Kp7m3 { background: linear-gradient(145deg, #fbf7fc, #ffffff, #f7effa) !important; border: 1px solid rgba(84, 8, 99, 0.25) !important; box-shadow: 0 12px 40px -8px rgba(84, 8, 99, 0.08) !important; } #TattooPricing_root__Kp7m3 .TattooPricing_cardLight__Kp7m3:hover { box-shadow: 0 25px 60px -8px rgba(84, 8, 99, 0.25) !important; border-color: rgba(84, 8, 99, 0.5) !important; } /* Light Card - Circle Colors */ #TattooPricing_root__Kp7m3 .TattooPricing_cardLight__Kp7m3 .TattooPricing_morphCircleTopRight__Kp7m3 { background: linear-gradient(135deg, #e6c8f0, #dbb3e8) !important; box-shadow: 0 4px 15px rgba(84, 8, 99, 0.08) !important; } #TattooPricing_root__Kp7m3 .TattooPricing_cardLight__Kp7m3 .TattooPricing_morphCircleBottomLeft__Kp7m3 { background: linear-gradient(315deg, #ebd0f5, #d2a4e2) !important; box-shadow: 0 -4px 15px rgba(84, 8, 99, 0.08) !important; } #TattooPricing_root__Kp7m3 .TattooPricing_cardLight__Kp7m3:hover .TattooPricing_morphCircle__Kp7m3 { opacity: 0.7 !important; } /* 10. Card Inner Content */ #TattooPricing_root__Kp7m3 .TattooPricing_cardInnerTop__Kp7m3 { position: relative !important; z-index: 10 !important; width: 100% !important; } #TattooPricing_root__Kp7m3 .TattooPricing_cardInnerGrow__Kp7m3 { flex: 1 !important; display: flex !important; flex-direction: column !important; } #TattooPricing_root__Kp7m3 .TattooPricing_titleDark__Kp7m3 { font-size: 1.25rem !important; font-weight: 900 !important; color: #ffffff !important; margin-bottom: 1.25rem !important; line-height: 1.35 !important; letter-spacing: -0.025em !important; text-align: center !important; } #TattooPricing_root__Kp7m3 .TattooPricing_titleLight__Kp7m3 { font-size: 1.25rem !important; font-weight: 900 !important; color: #171717 !important; margin-bottom: 1.25rem !important; line-height: 1.35 !important; letter-spacing: -0.025em !important; text-align: center !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_titleDark__Kp7m3, #TattooPricing_root__Kp7m3 .TattooPricing_titleLight__Kp7m3 { font-size: 1.5rem !important; } } @media (min-width: 1024px) { #TattooPricing_root__Kp7m3 .TattooPricing_titleDark__Kp7m3, #TattooPricing_root__Kp7m3 .TattooPricing_titleLight__Kp7m3 { font-size: 1.875rem !important; } } /* 11. Dark Card Inner Elements */ #TattooPricing_root__Kp7m3 .TattooPricing_innerGlassCard__Kp7m3 { padding: 1.25rem !important; border-radius: 1rem !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; margin-bottom: 1.5rem !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_innerGlassCard__Kp7m3 { padding: 1.75rem !important; } } #TattooPricing_root__Kp7m3 .TattooPricing_textDark__Kp7m3 { color: rgba(250, 245, 255, 0.95) !important; line-height: 1.75 !important; font-size: 0.875rem !important; font-weight: 400 !important; margin-bottom: 1rem !important; } #TattooPricing_root__Kp7m3 .TattooPricing_textDark__Kp7m3:last-child { margin-bottom: 0 !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_textDark__Kp7m3 { font-size: 1rem !important; } } #TattooPricing_root__Kp7m3 .TattooPricing_highlightBox__Kp7m3 { position: relative !important; z-index: 10 !important; padding: 1.25rem !important; border-radius: 1rem !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_highlightBox__Kp7m3 { padding: 1.5rem !important; } } #TattooPricing_root__Kp7m3 .TattooPricing_highlightText__Kp7m3 { color: #ffffff !important; font-weight: 700 !important; line-height: 1.75 !important; font-size: 0.875rem !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_highlightText__Kp7m3 { font-size: 1rem !important; } } /* 12. Light Card Inner Elements */ #TattooPricing_root__Kp7m3 .TattooPricing_unifiedContentCard__Kp7m3 { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 1.5rem !important; border-radius: 1rem !important; background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(229, 229, 229, 0.9) !important; box-shadow: 0 4px 24px -4px rgba(84, 8, 99, 0.06) !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_unifiedContentCard__Kp7m3 { padding: 2rem !important; } } #TattooPricing_root__Kp7m3 .TattooPricing_textLight__Kp7m3 { color: #3f3f46 !important; line-height: 1.75 !important; font-size: 0.875rem !important; font-weight: 400 !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_textLight__Kp7m3 { font-size: 1rem !important; } } #TattooPricing_root__Kp7m3 .TattooPricing_divider__Kp7m3 { height: 1px !important; width: 100% !important; background: linear-gradient(to right, transparent, rgba(84, 8, 99, 0.15), transparent) !important; margin: 1rem 0 !important; } #TattooPricing_root__Kp7m3 .TattooPricing_textLightStrong__Kp7m3 { color: #27272a !important; line-height: 1.75 !important; font-size: 0.875rem !important; font-weight: 400 !important; } @media (min-width: 640px) { #TattooPricing_root__Kp7m3 .TattooPricing_textLightStrong__Kp7m3 { font-size: 1rem !important; } } #TattooPricing_root__Kp7m3 .TattooPricing_brandStrong__Kp7m3 { color: #540863 !important; font-weight: 700 !important; } /* 13. Entry Animation States */ #TattooPricing_root__Kp7m3 .TattooPricing_animate-in__Kp7m3 { opacity: 0 !important; } #TattooPricing_root__Kp7m3 .TattooPricing_slide-up__Kp7m3 { transform: translateY(28px) !important; } #TattooPricing_root__Kp7m3 .TattooPricing_animate-in__Kp7m3.TattooPricing_animated__Kp7m3 { opacity: 1 !important; transform: translate(0, 0) !important; } #TattooPricing_root__Kp7m3 .TattooPricing_col__Kp7m3 { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* ========================================================================== RenderBox CMS Module Optimization: Approach Section Module Root: #Approach_root__K8m2P Brand Color: #540863 Master Guide v9.0 Strict Compliance ========================================================================== */ /* 1. Scoped CSS Reset */ #Approach_root__K8m2P, #Approach_root__K8m2P *, #Approach_root__K8m2P *::before, #Approach_root__K8m2P *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2. Root Container */ #Approach_root__K8m2P { position: relative !important; width: 100% !important; max-width: 72rem !important; /* 1152px (max-w-6xl) */ margin-left: auto !important; margin-right: auto !important; padding: 4rem 1rem !important; /* py-16 px-4 */ border-top: 1px solid rgba(245, 245, 245, 0.9) !important; overflow: hidden !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; direction: rtl !important; text-align: right !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 640px) { #Approach_root__K8m2P { padding: 5rem 1.5rem !important; /* py-20 px-6 */ } } @media (min-width: 1024px) { #Approach_root__K8m2P { padding: 5rem 2rem !important; /* py-20 px-8 */ } } /* 3. Section Header */ #Approach_root__K8m2P .Approach_header__K8m2P { text-align: center !important; max-width: 48rem !important; /* max-w-3xl */ margin-left: auto !important; margin-right: auto !important; margin-bottom: 3.5rem !important; /* mb-14 */ } #Approach_root__K8m2P .Approach_title__K8m2P { font-size: 1.5rem !important; font-weight: 900 !important; color: #171717 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; line-height: 1.35 !important; text-align: center !important; } @media (min-width: 640px) { #Approach_root__K8m2P .Approach_title__K8m2P { font-size: 1.875rem !important; } } @media (min-width: 1024px) { #Approach_root__K8m2P .Approach_title__K8m2P { font-size: 2.25rem !important; } } #Approach_root__K8m2P .Approach_titleDivider__K8m2P { width: 5rem !important; /* w-20 */ height: 4px !important; /* h-1 */ background: linear-gradient(to right, transparent, #540863, transparent) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 9999px !important; } /* 4. 4 Pillars 2x2 Grid */ #Approach_root__K8m2P .Approach_grid__K8m2P { display: grid !important; grid-template-columns: 1fr !important; gap: 2.25rem !important; /* gap-9 */ padding: 0.5rem !important; align-items: stretch !important; } @media (min-width: 640px) { #Approach_root__K8m2P .Approach_grid__K8m2P { padding: 1rem !important; } } @media (min-width: 768px) { #Approach_root__K8m2P .Approach_grid__K8m2P { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1024px) { #Approach_root__K8m2P .Approach_grid__K8m2P { gap: 2.75rem !important; /* gap-11 */ } } /* 5. Pillar Card Wrap */ #Approach_root__K8m2P .Approach_cardWrap__K8m2P { position: relative !important; display: flex !important; flex-direction: column !important; cursor: pointer !important; } /* 6. Underneath Purple Layer */ #Approach_root__K8m2P .Approach_underneathCard__K8m2P { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; border-radius: 1rem !important; /* rounded-2xl */ background: linear-gradient(135deg, #540863 0%, #6a0b7d 50%, #3a0245 100%) !important; box-shadow: 0 8px 24px rgba(84, 8, 99, 0.22) !important; z-index: 1 !important; } /* 7. Foreground White Layer with Depth Offset */ #Approach_root__K8m2P .Approach_foregroundCard__K8m2P { position: relative !important; z-index: 10 !important; height: 100% !important; padding: 1.75rem !important; /* p-7 */ border-radius: 1rem !important; background-color: #ffffff !important; border: 1px solid rgba(243, 232, 255, 0.9) !important; box-shadow: 0 4px 16px rgba(84, 8, 99, 0.08) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; transform: translate(12px, 12px) !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important; } @media (min-width: 640px) { #Approach_root__K8m2P .Approach_foregroundCard__K8m2P { padding: 2rem !important; /* p-8 */ transform: translate(16px, 16px) !important; } } @media (min-width: 1024px) { #Approach_root__K8m2P .Approach_foregroundCard__K8m2P { padding: 2.25rem !important; /* p-9 */ } } /* Hover effect: moves slightly toward corner (depth settle) */ #Approach_root__K8m2P .Approach_cardWrap__K8m2P:hover .Approach_foregroundCard__K8m2P { transform: translate(8px, 8px) !important; box-shadow: 0 8px 24px rgba(84, 8, 99, 0.14) !important; } /* 8. Top Accent Shimmer Line */ #Approach_root__K8m2P .Approach_topShimmer__K8m2P { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(to right, transparent, rgba(84, 8, 99, 0.4), transparent) !important; opacity: 0 !important; border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; transition: opacity 0.3s ease !important; pointer-events: none !important; } #Approach_root__K8m2P .Approach_cardWrap__K8m2P:hover .Approach_topShimmer__K8m2P { opacity: 1 !important; } /* 9. Card Typography */ #Approach_root__K8m2P .Approach_cardContent__K8m2P { text-align: center !important; } #Approach_root__K8m2P .Approach_cardTitle__K8m2P { font-size: 1.125rem !important; /* text-lg */ font-weight: 900 !important; color: #171717 !important; margin-bottom: 0.75rem !important; line-height: 1.35 !important; text-align: center !important; transition: color 0.25s ease !important; } @media (min-width: 640px) { #Approach_root__K8m2P .Approach_cardTitle__K8m2P { font-size: 1.25rem !important; /* text-xl */ } } #Approach_root__K8m2P .Approach_cardWrap__K8m2P:hover .Approach_cardTitle__K8m2P { color: #540863 !important; } #Approach_root__K8m2P .Approach_cardDesc__K8m2P { font-size: 0.875rem !important; /* text-sm */ font-weight: 400 !important; color: #525252 !important; line-height: 1.75 !important; text-align: center !important; } @media (min-width: 640px) { #Approach_root__K8m2P .Approach_cardDesc__K8m2P { font-size: 1rem !important; /* text-base */ } } /* ========================================================================== 10. Entry Animation States (RenderBox Class-Based Pattern - Section 10.5) ========================================================================== */ /* Hidden initial states */ #Approach_root__K8m2P .Approach_animate-in__K8m2P { opacity: 0 !important; } #Approach_root__K8m2P .Approach_slide-up__K8m2P { transform: translateY(24px) !important; } /* Active animated states */ #Approach_root__K8m2P .Approach_animate-in__K8m2P.Approach_animated__K8m2P { opacity: 1 !important; transform: translate(0, 0) !important; } /* Smooth transitions */ #Approach_root__K8m2P .Approach_header__K8m2P { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; } #Approach_root__K8m2P .Approach_cardWrap__K8m2P { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* ========================================================================== RenderBox CMS Module Optimization: Care Guide Section Module Root: #CareGuide_root__C4r9G Brand Color: #540863 Master Guide v9.0 Strict Compliance ========================================================================== */ /* 1. Scoped CSS Reset */ #CareGuide_root__C4r9G, #CareGuide_root__C4r9G *, #CareGuide_root__C4r9G *::before, #CareGuide_root__C4r9G *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2. Root Container */ #CareGuide_root__C4r9G { position: relative !important; width: 100% !important; max-width: 72rem !important; /* 1152px (max-w-6xl) */ margin-left: auto !important; margin-right: auto !important; padding: 4rem 1rem !important; /* py-16 px-4 */ border-top: 1px solid rgba(245, 245, 245, 0.9) !important; overflow: hidden !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; direction: rtl !important; text-align: right !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 640px) { #CareGuide_root__C4r9G { padding: 5rem 1.5rem !important; /* py-20 px-6 */ } } @media (min-width: 1024px) { #CareGuide_root__C4r9G { padding: 5rem 2rem !important; /* py-20 px-8 */ } } /* 3. Section Header */ #CareGuide_root__C4r9G .CareGuide_header__C4r9G { text-align: center !important; max-width: 48rem !important; /* max-w-3xl */ margin-left: auto !important; margin-right: auto !important; margin-bottom: 3.5rem !important; /* mb-14 */ } #CareGuide_root__C4r9G .CareGuide_title__C4r9G { font-size: 1.5rem !important; font-weight: 900 !important; color: #171717 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; line-height: 1.35 !important; text-align: center !important; } @media (min-width: 640px) { #CareGuide_root__C4r9G .CareGuide_title__C4r9G { font-size: 1.875rem !important; } } @media (min-width: 1024px) { #CareGuide_root__C4r9G .CareGuide_title__C4r9G { font-size: 2.25rem !important; } } #CareGuide_root__C4r9G .CareGuide_titleDivider__C4r9G { width: 5rem !important; /* w-20 */ height: 4px !important; /* h-1 */ background: linear-gradient(to right, transparent, #540863, transparent) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 9999px !important; } /* 4. 3 Cards Grid */ #CareGuide_root__C4r9G .CareGuide_grid__C4r9G { display: grid !important; grid-template-columns: 1fr !important; gap: 1.75rem !important; /* gap-7 */ align-items: stretch !important; } @media (min-width: 768px) { #CareGuide_root__C4r9G .CareGuide_grid__C4r9G { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; /* lg:gap-8 */ } } /* 5. Card Component */ #CareGuide_root__C4r9G .CareGuide_card__C4r9G { position: relative !important; overflow: hidden !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 1.75rem !important; /* p-7 */ border-radius: 1.5rem !important; /* rounded-3xl */ background-color: rgba(225, 191, 237, 0.65) !important; /* #E1BFED/65 */ border: 1px solid rgba(210, 163, 226, 0.7) !important; /* #d2a3e2/70 */ box-shadow: 0 8px 28px -6px rgba(84, 8, 99, 0.08) !important; cursor: pointer !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important; } @media (min-width: 640px) { #CareGuide_root__C4r9G .CareGuide_card__C4r9G { padding: 2.25rem !important; /* sm:p-9 */ } } #CareGuide_root__C4r9G .CareGuide_card__C4r9G:hover { transform: translateY(-6px) !important; border-color: rgba(84, 8, 99, 0.4) !important; box-shadow: 0 20px 40px -10px rgba(84, 8, 99, 0.16) !important; } /* 6. Top Shimmer Highlight Line */ #CareGuide_root__C4r9G .CareGuide_topShimmer__C4r9G { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(to right, transparent, rgba(84, 8, 99, 0.4), transparent) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; pointer-events: none !important; } #CareGuide_root__C4r9G .CareGuide_card__C4r9G:hover .CareGuide_topShimmer__C4r9G { opacity: 1 !important; } /* 7. Card Body Typography */ #CareGuide_root__C4r9G .CareGuide_cardBody__C4r9G { position: relative !important; z-index: 10 !important; } #CareGuide_root__C4r9G .CareGuide_cardTitle__C4r9G { font-size: 1.125rem !important; /* text-lg */ font-weight: 900 !important; color: #000000 !important; margin-bottom: 0.75rem !important; line-height: 1.35 !important; } @media (min-width: 640px) { #CareGuide_root__C4r9G .CareGuide_cardTitle__C4r9G { font-size: 1.25rem !important; /* sm:text-xl */ } } #CareGuide_root__C4r9G .CareGuide_cardDesc__C4r9G { color: rgba(0, 0, 0, 0.85) !important; line-height: 1.75 !important; font-size: 0.875rem !important; font-weight: 400 !important; } @media (min-width: 640px) { #CareGuide_root__C4r9G .CareGuide_cardDesc__C4r9G { font-size: 1rem !important; } } /* 8. Card Footer */ #CareGuide_root__C4r9G .CareGuide_cardFooter__C4r9G { position: relative !important; z-index: 10 !important; margin-top: 2rem !important; /* mt-8 */ padding-top: 1.25rem !important; /* pt-5 */ border-top: 1px solid rgba(0, 0, 0, 0.1) !important; display: flex !important; align-items: center !important; gap: 0.625rem !important; /* gap-2.5 */ font-size: 0.75rem !important; /* text-xs */ font-weight: 700 !important; color: #000000 !important; } #CareGuide_root__C4r9G .CareGuide_footerIcon__C4r9G { width: 1rem !important; /* w-4 */ height: 1rem !important; /* h-4 */ flex-shrink: 0 !important; color: #000000 !important; } #CareGuide_root__C4r9G .CareGuide_footerText__C4r9G { color: #000000 !important; line-height: 1.4 !important; } /* ========================================================================== 9. Entry Animation States (RenderBox Class-Based Pattern - Section 10.5) ========================================================================== */ /* Hidden initial states */ #CareGuide_root__C4r9G .CareGuide_animate-in__C4r9G { opacity: 0 !important; } #CareGuide_root__C4r9G .CareGuide_slide-up__C4r9G { transform: translateY(24px) !important; } /* Active animated states */ #CareGuide_root__C4r9G .CareGuide_animate-in__C4r9G.CareGuide_animated__C4r9G { opacity: 1 !important; transform: translate(0, 0) !important; } /* Smooth transitions */ #CareGuide_root__C4r9G .CareGuide_header__C4r9G { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; } #CareGuide_root__C4r9G .CareGuide_card__C4r9G { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important; } /* ========================================================================== RenderBox CMS Module Optimization: Why Choose Us Section Module Root: #WhyChooseUs_root__W7h4R Brand Color: #540863 Master Guide v9.0 Strict Compliance ========================================================================== */ /* 1. Scoped CSS Reset */ #WhyChooseUs_root__W7h4R, #WhyChooseUs_root__W7h4R *, #WhyChooseUs_root__W7h4R *::before, #WhyChooseUs_root__W7h4R *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2. Root Container */ #WhyChooseUs_root__W7h4R { position: relative !important; width: 100% !important; max-width: 72rem !important; /* 1152px (max-w-6xl) */ margin-left: auto !important; margin-right: auto !important; padding: 4rem 1rem !important; /* py-16 px-4 */ border-top: 1px solid rgba(245, 245, 245, 0.9) !important; overflow: hidden !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; direction: rtl !important; text-align: right !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R { padding: 5rem 1.5rem !important; /* py-20 px-6 */ } } @media (min-width: 1024px) { #WhyChooseUs_root__W7h4R { padding: 5rem 2rem !important; /* py-20 px-8 */ } } /* 3. Ambient Center Blur */ #WhyChooseUs_root__W7h4R .WhyChooseUs_ambientGlow__W7h4R { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 44rem !important; /* ~700px */ height: 25rem !important; /* ~400px */ background: radial-gradient(circle, rgba(84, 8, 99, 0.04) 0%, rgba(192, 132, 252, 0.04) 50%, transparent 70%) !important; border-radius: 9999px !important; filter: blur(64px) !important; pointer-events: none !important; z-index: 1 !important; } /* 4. Section Header */ #WhyChooseUs_root__W7h4R .WhyChooseUs_header__W7h4R { position: relative !important; z-index: 10 !important; text-align: center !important; max-width: 48rem !important; /* max-w-3xl */ margin-left: auto !important; margin-right: auto !important; margin-bottom: 3.5rem !important; /* mb-14 */ } #WhyChooseUs_root__W7h4R .WhyChooseUs_badge__W7h4R { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.375rem 0.875rem !important; border-radius: 9999px !important; background: rgba(84, 8, 99, 0.1) !important; border: 1px solid rgba(84, 8, 99, 0.2) !important; color: #540863 !important; font-size: 0.75rem !important; font-weight: 700 !important; margin-bottom: 0.875rem !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_badgeIcon__W7h4R { width: 0.875rem !important; /* 14px */ height: 0.875rem !important; flex-shrink: 0 !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_title__W7h4R { font-size: 1.5rem !important; font-weight: 900 !important; color: #171717 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; line-height: 1.35 !important; text-align: center !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_title__W7h4R { font-size: 1.875rem !important; } } @media (min-width: 1024px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_title__W7h4R { font-size: 2.25rem !important; } } #WhyChooseUs_root__W7h4R .WhyChooseUs_titleDivider__W7h4R { width: 5rem !important; /* w-20 */ height: 4px !important; /* h-1 */ background: linear-gradient(to right, transparent, #540863, transparent) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 9999px !important; } /* 5. Main Grid (1 Col Mobile, 12 Cols Desktop) */ #WhyChooseUs_root__W7h4R .WhyChooseUs_grid__W7h4R { position: relative !important; z-index: 10 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 1.75rem !important; /* gap-7 */ align-items: stretch !important; } @media (min-width: 768px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_grid__W7h4R { grid-template-columns: repeat(12, 1fr) !important; gap: 2rem !important; /* lg:gap-9 */ } } /* 6. Columns */ #WhyChooseUs_root__W7h4R .WhyChooseUs_colBig__W7h4R { height: 100% !important; display: flex !important; flex-direction: column !important; } @media (min-width: 768px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_colBig__W7h4R { grid-column: span 6 !important; } } #WhyChooseUs_root__W7h4R .WhyChooseUs_colStacked__W7h4R { height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 1.75rem !important; } @media (min-width: 768px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_colStacked__W7h4R { grid-column: span 6 !important; } } /* 7. Tilt Card Wrapper */ #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R { position: relative !important; width: 100% !important; height: 100% !important; perspective: 1000px !important; cursor: pointer !important; } /* 8. Big Management Royal Dark Card */ #WhyChooseUs_root__W7h4R .WhyChooseUs_cardDark__W7h4R { position: relative !important; overflow: hidden !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; border-radius: 1.5rem !important; /* rounded-3xl */ padding: 1.75rem !important; /* p-7 */ background: linear-gradient(135deg, #470654 0%, #540863 50%, #2e0335 100%) !important; border: 1px solid rgba(216, 180, 254, 0.2) !important; box-shadow: 0 16px 40px rgba(84, 8, 99, 0.28) !important; color: #ffffff !important; transform-style: preserve-3d !important; will-change: transform !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardDark__W7h4R { padding: 2.5rem !important; /* sm:p-10 */ } } @media (min-width: 1024px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardDark__W7h4R { padding: 3rem !important; /* lg:p-12 */ } } /* Ambient floating subtle orbs inside dark card */ #WhyChooseUs_root__W7h4R .WhyChooseUs_orb1__W7h4R { position: absolute !important; top: -3rem !important; right: -3rem !important; width: 16rem !important; height: 16rem !important; background: radial-gradient(circle, rgba(244, 114, 182, 0.2), rgba(216, 180, 254, 0.1), transparent 70%) !important; border-radius: 9999px !important; filter: blur(32px) !important; pointer-events: none !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_orb2__W7h4R { position: absolute !important; bottom: -4rem !important; left: -4rem !important; width: 15rem !important; height: 15rem !important; background: radial-gradient(circle, rgba(157, 23, 77, 0.2), transparent 70%) !important; border-radius: 9999px !important; filter: blur(32px) !important; pointer-events: none !important; } /* Shimmer sweep on hover */ #WhyChooseUs_root__W7h4R .WhyChooseUs_shimmerSweep__W7h4R { position: absolute !important; inset: 0 !important; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent) !important; transform: translateX(-100%) !important; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important; pointer-events: none !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_shimmerSweep__W7h4R { transform: translateX(100%) !important; } /* Card Content Top */ #WhyChooseUs_root__W7h4R .WhyChooseUs_cardContentTop__W7h4R { position: relative !important; z-index: 10 !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_awardBadge__W7h4R { width: 3.5rem !important; /* 56px */ height: 3.5rem !important; border-radius: 1rem !important; background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.5rem !important; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; transition: transform 0.3s ease !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_awardBadge__W7h4R { transform: rotate(12deg) scale(1.08) !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_awardIcon__W7h4R { width: 1.75rem !important; /* 28px */ height: 1.75rem !important; color: #ffffff !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_cardTitleDark__W7h4R { font-size: 1.25rem !important; font-weight: 900 !important; margin-bottom: 1.25rem !important; line-height: 1.35 !important; letter-spacing: -0.025em !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardTitleDark__W7h4R { font-size: 1.5rem !important; } } @media (min-width: 1024px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardTitleDark__W7h4R { font-size: 1.875rem !important; } } #WhyChooseUs_root__W7h4R .WhyChooseUs_cardDescDark__W7h4R { color: rgba(243, 232, 255, 0.95) !important; line-height: 1.8 !important; font-size: 0.875rem !important; font-weight: 400 !important; margin-bottom: 2rem !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardDescDark__W7h4R { font-size: 1rem !important; } } #WhyChooseUs_root__W7h4R .WhyChooseUs_brandHighlight__W7h4R { color: #ffffff !important; font-weight: 900 !important; background: rgba(255, 255, 255, 0.15) !important; padding: 0.125rem 0.5rem !important; border-radius: 0.5rem !important; display: inline-block !important; margin: 0 0.125rem !important; } /* Card Footer Pillars */ #WhyChooseUs_root__W7h4R .WhyChooseUs_cardFooterDark__W7h4R { position: relative !important; z-index: 10 !important; padding-top: 1.25rem !important; border-top: 1px solid rgba(255, 255, 255, 0.15) !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0.75rem !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardFooterDark__W7h4R { grid-template-columns: repeat(2, 1fr) !important; } } #WhyChooseUs_root__W7h4R .WhyChooseUs_footerPill__W7h4R { display: flex !important; align-items: center !important; gap: 0.5rem !important; font-size: 0.75rem !important; font-weight: 700 !important; color: #ffffff !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_checkIcon__W7h4R { width: 1rem !important; /* 16px */ height: 1rem !important; flex-shrink: 0 !important; color: #ffffff !important; } /* 9. Stacked Light Cards */ #WhyChooseUs_root__W7h4R .WhyChooseUs_cardLight__W7h4R { position: relative !important; overflow: hidden !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 1.75rem !important; /* p-7 */ border-radius: 1.5rem !important; /* rounded-3xl */ background: linear-gradient(135deg, rgba(84, 8, 99, 0.08) 0%, rgba(250, 245, 255, 0.5) 50%, #ffffff 100%) !important; border: 1px solid rgba(84, 8, 99, 0.2) !important; box-shadow: 0 4px 24px -4px rgba(84, 8, 99, 0.08) !important; transform-style: preserve-3d !important; will-change: transform !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_cardLightComp__W7h4R { background: linear-gradient(135deg, #ffffff 0%, rgba(250, 245, 255, 0.6) 50%, rgba(84, 8, 99, 0.1) 100%) !important; border: 1px solid rgba(84, 8, 99, 0.25) !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardLight__W7h4R { padding: 2.25rem !important; /* sm:p-9 */ } } #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_cardLight__W7h4R { border-color: rgba(84, 8, 99, 0.55) !important; box-shadow: 0 16px 36px -6px rgba(84, 8, 99, 0.15) !important; } /* Top Active Gradient Border Indicators */ #WhyChooseUs_root__W7h4R .WhyChooseUs_topIndicator1__W7h4R { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3.5px !important; background: linear-gradient(to right, #540863, #ec4899, #540863) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; pointer-events: none !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_topIndicator2__W7h4R { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3.5px !important; background: linear-gradient(to right, #ec4899, #540863, #c084fc) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; pointer-events: none !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_topIndicator1__W7h4R, #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_topIndicator2__W7h4R { opacity: 1 !important; } /* Gentle Hover Glows inside Light Cards */ #WhyChooseUs_root__W7h4R .WhyChooseUs_glow1__W7h4R { position: absolute !important; top: 0 !important; left: 0 !important; width: 9rem !important; height: 9rem !important; background: rgba(84, 8, 99, 0.08) !important; border-radius: 9999px !important; filter: blur(24px) !important; pointer-events: none !important; transition: transform 0.5s ease !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_glow2__W7h4R { position: absolute !important; bottom: 0 !important; right: 0 !important; width: 9rem !important; height: 9rem !important; background: rgba(84, 8, 99, 0.09) !important; border-radius: 9999px !important; filter: blur(24px) !important; pointer-events: none !important; transition: transform 0.5s ease !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_glow1__W7h4R, #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_glow2__W7h4R { transform: scale(1.5) !important; } /* Header Row of Light Cards */ #WhyChooseUs_root__W7h4R .WhyChooseUs_headerRow__W7h4R { position: relative !important; z-index: 10 !important; display: flex !important; align-items: center !important; gap: 0.875rem !important; margin-bottom: 0.875rem !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_iconBadgeLight__W7h4R { width: 2.75rem !important; /* 44px */ height: 2.75rem !important; border-radius: 1rem !important; background: rgba(84, 8, 99, 0.1) !important; color: #540863 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; border: 1px solid rgba(84, 8, 99, 0.2) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_iconBadgeLight__W7h4R { background-color: #540863 !important; color: #ffffff !important; transform: rotate(8deg) scale(1.1) !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_iconLight__W7h4R { width: 1.25rem !important; /* 20px */ height: 1.25rem !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_cardTitleLight__W7h4R { font-size: 1.125rem !important; /* text-lg */ font-weight: 900 !important; color: #171717 !important; line-height: 1.35 !important; transition: color 0.25s ease !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardTitleLight__W7h4R { font-size: 1.25rem !important; /* text-xl */ } } #WhyChooseUs_root__W7h4R .WhyChooseUs_tiltWrap__W7h4R:hover .WhyChooseUs_cardTitleLight__W7h4R { color: #540863 !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_cardDescLight__W7h4R { position: relative !important; z-index: 10 !important; color: #404040 !important; line-height: 1.75 !important; font-size: 0.875rem !important; font-weight: 400 !important; } @media (min-width: 640px) { #WhyChooseUs_root__W7h4R .WhyChooseUs_cardDescLight__W7h4R { font-size: 1rem !important; } } /* ========================================================================== 10. Entry Animation States (RenderBox Class-Based Pattern - Section 10.5) ========================================================================== */ /* Hidden initial states */ #WhyChooseUs_root__W7h4R .WhyChooseUs_animate-in__W7h4R { opacity: 0 !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_slide-up__W7h4R { transform: translateY(28px) !important; } /* Active animated states */ #WhyChooseUs_root__W7h4R .WhyChooseUs_animate-in__W7h4R.WhyChooseUs_animated__W7h4R { opacity: 1 !important; transform: translate(0, 0) !important; } /* Smooth transitions */ #WhyChooseUs_root__W7h4R .WhyChooseUs_header__W7h4R { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_colBig__W7h4R { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important; } #WhyChooseUs_root__W7h4R .WhyChooseUs_colStacked__W7h4R { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* ========================================================================== RenderBox CMS Module Optimization: FAQ Section Module Root: #Faq_root__Q8u3X Brand Color: #540863 Master Guide v9.0 Strict Compliance ========================================================================== */ /* 1. Scoped CSS Reset */ #Faq_root__Q8u3X, #Faq_root__Q8u3X *, #Faq_root__Q8u3X *::before, #Faq_root__Q8u3X *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2. Root Container */ #Faq_root__Q8u3X { position: relative !important; width: 100% !important; max-width: 56rem !important; /* 896px (max-w-4xl) */ margin-left: auto !important; margin-right: auto !important; padding: 4rem 1rem !important; /* py-16 px-4 */ border-top: 1px solid rgba(245, 245, 245, 0.9) !important; overflow: hidden !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; direction: rtl !important; text-align: right !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 640px) { #Faq_root__Q8u3X { padding: 5rem 1.5rem !important; /* py-20 px-6 */ } } @media (min-width: 1024px) { #Faq_root__Q8u3X { padding: 5rem 2rem !important; /* py-20 px-8 */ } } /* 3. Section Header */ #Faq_root__Q8u3X .Faq_header__Q8u3X { text-align: center !important; max-width: 48rem !important; /* max-w-3xl */ margin-left: auto !important; margin-right: auto !important; margin-bottom: 3.5rem !important; /* mb-14 */ } #Faq_root__Q8u3X .Faq_title__Q8u3X { font-size: 1.5rem !important; font-weight: 900 !important; color: #171717 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; line-height: 1.35 !important; text-align: center !important; } @media (min-width: 640px) { #Faq_root__Q8u3X .Faq_title__Q8u3X { font-size: 1.875rem !important; } } @media (min-width: 1024px) { #Faq_root__Q8u3X .Faq_title__Q8u3X { font-size: 2.25rem !important; } } #Faq_root__Q8u3X .Faq_titleDivider__Q8u3X { width: 5rem !important; /* w-20 */ height: 4px !important; /* h-1 */ background: linear-gradient(to right, transparent, #540863, transparent) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 9999px !important; } /* 4. Accordion List */ #Faq_root__Q8u3X .Faq_list__Q8u3X { display: flex !important; flex-direction: column !important; gap: 1rem !important; /* space-y-4 */ } /* 5. Accordion Item */ #Faq_root__Q8u3X .Faq_item__Q8u3X { position: relative !important; overflow: hidden !important; border-radius: 1.5rem !important; /* rounded-3xl */ border: 1px solid rgba(229, 231, 235, 0.8) !important; /* border-neutral-200/80 */ background-color: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important; } #Faq_root__Q8u3X .Faq_item__Q8u3X:hover { border-color: rgba(84, 8, 99, 0.3) !important; } /* Open State */ #Faq_root__Q8u3X .Faq_item__Q8u3X.Faq_itemOpen__Q8u3X { border-color: rgba(84, 8, 99, 0.4) !important; background-color: #ffffff !important; box-shadow: 0 8px 30px rgba(84, 8, 99, 0.08) !important; outline: 1px solid rgba(84, 8, 99, 0.2) !important; } /* 6. Accordion Trigger Button */ #Faq_root__Q8u3X .Faq_trigger__Q8u3X { width: 100% !important; padding: 1.5rem !important; /* p-6 */ text-align: right !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; cursor: pointer !important; background: transparent !important; border: none !important; outline: none !important; font-family: inherit !important; } @media (min-width: 640px) { #Faq_root__Q8u3X .Faq_trigger__Q8u3X { padding: 1.75rem !important; /* sm:p-7 */ } } #Faq_root__Q8u3X .Faq_question__Q8u3X { font-size: 1rem !important; font-weight: 700 !important; color: #171717 !important; line-height: 1.4 !important; transition: color 0.25s ease !important; } @media (min-width: 640px) { #Faq_root__Q8u3X .Faq_question__Q8u3X { font-size: 1.125rem !important; /* sm:text-lg */ } } #Faq_root__Q8u3X .Faq_trigger__Q8u3X:hover .Faq_question__Q8u3X, #Faq_root__Q8u3X .Faq_itemOpen__Q8u3X .Faq_question__Q8u3X { color: #540863 !important; } /* 7. Chevron Wrap and Icon */ #Faq_root__Q8u3X .Faq_chevronWrap__Q8u3X { width: 2.25rem !important; /* 36px */ height: 2.25rem !important; border-radius: 1rem !important; /* rounded-2xl */ display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: rgba(84, 8, 99, 0.06) !important; color: #525252 !important; transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important; } #Faq_root__Q8u3X .Faq_trigger__Q8u3X:hover .Faq_chevronWrap__Q8u3X { background-color: #540863 !important; color: #ffffff !important; } #Faq_root__Q8u3X .Faq_itemOpen__Q8u3X .Faq_chevronWrap__Q8u3X { background-color: #540863 !important; color: #ffffff !important; transform: rotate(180deg) !important; box-shadow: 0 2px 8px rgba(84, 8, 99, 0.25) !important; } #Faq_root__Q8u3X .Faq_chevronIcon__Q8u3X { width: 1rem !important; /* 16px */ height: 1rem !important; } /* 8. Accordion Panel (Smooth and resilient expansion) */ #Faq_root__Q8u3X .Faq_panel__Q8u3X { display: block !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important; } #Faq_root__Q8u3X .Faq_item__Q8u3X.Faq_itemOpen__Q8u3X .Faq_panel__Q8u3X { max-height: 600px !important; opacity: 1 !important; } #Faq_root__Q8u3X .Faq_panelInner__Q8u3X { overflow: hidden !important; } #Faq_root__Q8u3X .Faq_answer__Q8u3X { padding: 1.25rem 1.5rem 1.75rem 1.5rem !important; border-top: 1px solid rgba(245, 245, 245, 0.9) !important; background: linear-gradient(to bottom, rgba(250, 245, 255, 0.25), transparent) !important; color: #404040 !important; /* text-neutral-700 */ font-size: 0.875rem !important; font-weight: 400 !important; line-height: 1.8 !important; } @media (min-width: 640px) { #Faq_root__Q8u3X .Faq_answer__Q8u3X { padding: 1.25rem 1.75rem 1.75rem 1.75rem !important; font-size: 1rem !important; } } /* ========================================================================== 9. Entry Animation States (RenderBox Class-Based Pattern - Section 10.5) ========================================================================== */ /* Hidden initial states */ #Faq_root__Q8u3X .Faq_animate-in__Q8u3X { opacity: 0 !important; } #Faq_root__Q8u3X .Faq_slide-up__Q8u3X { transform: translateY(20px) !important; } /* Active animated states */ #Faq_root__Q8u3X .Faq_animate-in__Q8u3X.Faq_animated__Q8u3X { opacity: 1 !important; transform: translate(0, 0) !important; } /* Smooth transitions */ #Faq_root__Q8u3X .Faq_header__Q8u3X { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; } #Faq_root__Q8u3X .Faq_item__Q8u3X { transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important; } /* ========================================================================== RenderBox CMS Module Optimization: Experience & Contact Section Module Root: #Experience_root__N7p4E Brand Color: #540863 Master Guide v9.0 Strict Compliance ========================================================================== */ /* 1. Scoped CSS Reset */ #Experience_root__N7p4E, #Experience_root__N7p4E *, #Experience_root__N7p4E *::before, #Experience_root__N7p4E *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2. Root Container */ #Experience_root__N7p4E { position: relative !important; width: 100% !important; max-width: 64rem !important; /* 1024px (max-w-5xl) */ margin-left: auto !important; margin-right: auto !important; padding: 4rem 1rem !important; /* py-16 px-4 */ border-top: 1px solid rgba(245, 245, 245, 0.9) !important; overflow: hidden !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; direction: rtl !important; text-align: right !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 640px) { #Experience_root__N7p4E { padding: 5rem 1.5rem !important; /* py-20 px-6 */ } } @media (min-width: 1024px) { #Experience_root__N7p4E { padding: 5rem 2rem !important; /* py-20 px-8 */ } } /* 3. Banner Wrap & Outer Container */ #Experience_root__N7p4E .Experience_bannerWrap__N7p4E { position: relative !important; border-radius: 1.75rem !important; /* 28px */ overflow: hidden !important; box-shadow: 0 10px 35px -8px rgba(84, 8, 99, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(84, 8, 99, 0.12) !important; } /* 4. Banner Inner with Ambient Gradient */ #Experience_root__N7p4E .Experience_bannerInner__N7p4E { position: relative !important; border-radius: 1.75rem !important; background: linear-gradient(135deg, #ffffff 0%, #faf5fc 50%, #f3e6f7 100%) !important; color: #171717 !important; padding: 1.75rem 1.25rem !important; /* p-7 on mobile */ overflow: hidden !important; } @media (min-width: 640px) { #Experience_root__N7p4E .Experience_bannerInner__N7p4E { padding: 3rem 2.5rem !important; /* sm:p-12 */ } } @media (min-width: 1024px) { #Experience_root__N7p4E .Experience_bannerInner__N7p4E { padding: 3.5rem 3.5rem !important; /* lg:p-14 */ } } /* Ambient Glow Circles */ #Experience_root__N7p4E .Experience_glowTop__N7p4E { position: absolute !important; top: -5rem !important; right: 25% !important; width: 24rem !important; height: 24rem !important; background-color: rgba(84, 8, 99, 0.06) !important; border-radius: 9999px !important; filter: blur(48px) !important; pointer-events: none !important; } #Experience_root__N7p4E .Experience_glowBottom__N7p4E { position: absolute !important; bottom: -5rem !important; left: 25% !important; width: 20rem !important; height: 20rem !important; background-color: rgba(121, 14, 144, 0.05) !important; border-radius: 9999px !important; filter: blur(48px) !important; pointer-events: none !important; } /* 5. Main Content Wrapper */ #Experience_root__N7p4E .Experience_content__N7p4E { position: relative !important; z-index: 10 !important; max-width: 48rem !important; /* max-w-3xl */ margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* 6. Section Header & Title */ #Experience_root__N7p4E .Experience_header__N7p4E { text-align: center !important; margin-bottom: 2.25rem !important; } #Experience_root__N7p4E .Experience_title__N7p4E { font-size: 1.5rem !important; font-weight: 900 !important; color: #171717 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; line-height: 1.35 !important; text-align: center !important; } @media (min-width: 640px) { #Experience_root__N7p4E .Experience_title__N7p4E { font-size: 1.875rem !important; } } @media (min-width: 1024px) { #Experience_root__N7p4E .Experience_title__N7p4E { font-size: 2.25rem !important; } } #Experience_root__N7p4E .Experience_titleDivider__N7p4E { width: 5rem !important; /* w-20 */ height: 4px !important; /* h-1 */ background: linear-gradient(to right, transparent, #540863, transparent) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 9999px !important; } /* 7. Grid for 2 Cards */ #Experience_root__N7p4E .Experience_grid__N7p4E { display: grid !important; grid-template-columns: 1fr !important; gap: 1.25rem !important; margin-bottom: 2.5rem !important; text-align: right !important; } @media (min-width: 768px) { #Experience_root__N7p4E .Experience_grid__N7p4E { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem !important; } } /* 8. Individual Feature Card */ #Experience_root__N7p4E .Experience_card__N7p4E { padding: 1.5rem !important; /* p-6 */ border-radius: 1rem !important; /* rounded-2xl */ background-color: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(84, 8, 99, 0.15) !important; box-shadow: 0 4px 20px -4px rgba(84, 8, 99, 0.08) !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important; } @media (min-width: 640px) { #Experience_root__N7p4E .Experience_card__N7p4E { padding: 1.75rem !important; /* sm:p-7 */ } } #Experience_root__N7p4E .Experience_card__N7p4E:hover { transform: translateY(-3px) !important; border-color: rgba(84, 8, 99, 0.35) !important; background-color: #ffffff !important; box-shadow: 0 8px 25px -4px rgba(84, 8, 99, 0.14) !important; } /* Card Header (Icon + Badge) */ #Experience_root__N7p4E .Experience_cardHeader__N7p4E { display: flex !important; align-items: center !important; gap: 0.625rem !important; /* gap-2.5 */ margin-bottom: 0.875rem !important; } #Experience_root__N7p4E .Experience_iconWrap__N7p4E { width: 2rem !important; /* 32px */ height: 2rem !important; border-radius: 0.75rem !important; /* rounded-xl */ background-color: rgba(84, 8, 99, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } #Experience_root__N7p4E .Experience_icon__N7p4E { width: 1rem !important; /* 16px */ height: 1rem !important; color: #540863 !important; } #Experience_root__N7p4E .Experience_badgeText__N7p4E { font-size: 0.75rem !important; /* text-xs */ font-weight: 700 !important; color: #540863 !important; line-height: 1.2 !important; } #Experience_root__N7p4E .Experience_cardParagraph__N7p4E { font-size: 0.875rem !important; /* text-sm */ font-weight: 400 !important; color: #404040 !important; /* neutral-700 */ line-height: 1.8 !important; text-align: right !important; } @media (min-width: 640px) { #Experience_root__N7p4E .Experience_cardParagraph__N7p4E { font-size: 0.9375rem !important; /* 15px */ } } #Experience_root__N7p4E .Experience_highlight__N7p4E { color: #540863 !important; font-weight: 900 !important; } /* 9. Action Area & Call Button */ #Experience_root__N7p4E .Experience_actionWrap__N7p4E { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; } #Experience_root__N7p4E .Experience_callBtn__N7p4E { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.625rem !important; padding: 0.75rem 2rem !important; /* py-3 px-8 */ border-radius: 0.875rem !important; /* rounded-xl */ background: linear-gradient(135deg, #540863 0%, #650977 50%, #540863 100%) !important; color: #ffffff !important; font-size: 0.9375rem !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 6px 20px rgba(84, 8, 99, 0.22) !important; cursor: pointer !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease !important; } @media (min-width: 640px) { #Experience_root__N7p4E .Experience_callBtn__N7p4E { padding: 0.875rem 2.5rem !important; font-size: 1rem !important; } } #Experience_root__N7p4E .Experience_callBtn__N7p4E:hover { transform: scale(1.03) !important; background: linear-gradient(135deg, #650977 0%, #790e90 100%) !important; box-shadow: 0 10px 28px rgba(84, 8, 99, 0.32) !important; color: #ffffff !important; } #Experience_root__N7p4E .Experience_callBtn__N7p4E:active { transform: scale(0.97) !important; } #Experience_root__N7p4E .Experience_callIcon__N7p4E { width: 1.125rem !important; height: 1.125rem !important; color: #ffffff !important; flex-shrink: 0 !important; } #Experience_root__N7p4E .Experience_btnLabel__N7p4E { letter-spacing: 0.025em !important; white-space: nowrap !important; } #Experience_root__N7p4E .Experience_subText__N7p4E { font-size: 0.75rem !important; /* text-xs */ font-weight: 500 !important; color: #525252 !important; text-align: center !important; line-height: 1.5 !important; } /* ========================================================================== 10. Entry Animation States (RenderBox Class-Based Pattern - Section 10.5) ========================================================================== */ /* Hidden initial states */ #Experience_root__N7p4E .Experience_animate-in__N7p4E { opacity: 0 !important; } #Experience_root__N7p4E .Experience_slide-up__N7p4E { transform: translateY(24px) !important; } /* Active animated states */ #Experience_root__N7p4E .Experience_animate-in__N7p4E.Experience_animated__N7p4E { opacity: 1 !important; transform: translate(0, 0) !important; } /* Smooth transitions */ #Experience_root__N7p4E .Experience_bannerWrap__N7p4E { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; } #Experience_root__N7p4E .Experience_card__N7p4E { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important; } body{ position: relative; } .dno{ display: none!important; } .public-header{ position: relative; transition:5s; } .absolute-container{ background-color: #ee273a; border-radius: 7px; position: fixed; top: 50%; left: 2%; transform: translateY(-50%); padding: 10px; z-index: 4900; } .social-absolute{ position: relative; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); box-sizing: content-box; width: 24px; height: 24px; } .social-absolute:last-child { border-bottom: none !important; } .social-absolute img{ width: 24px; height: 24px; } .absolute-tooltip{ position: relative; transition: all 0.5s; border-radius: 0 7px 7px 0; font-size: 14px; overflow: hidden; white-space: nowrap; } .absolute-tooltip > span{ padding: 10px 20px; display: block; } .tooltip-shake{ display: block; width: 100%; height: 100%; } .tooltip-shake:before, .tooltip-shake:after { position: absolute; content: ""; opacity: 0; transition: all 0.4s ease; color: #fff; font-weight: bold; } .tooltip-shake:before { content: attr(data-tooltip); background: #3c5059; width: 0; padding: 0; font-size: 0.9rem; top: 50%; left: calc(24px + 32px); border-radius: 5px; transform: translateY(-50%); overflow: hidden; white-space: nowrap; } .tooltip-shake:after { border-width: 8px 10px 8px 0; border-style: solid; border-color: transparent #3c5059 transparent transparent; top: 50%; left: calc(24px + 24px); transform: translateY(-50%); } .tooltip-shake:hover::before, .tooltip-shake:hover::after { opacity: 1; overflow: hidden; white-space: nowrap; transform: translate(0, -50%); } .tooltip-shake:hover::before { width: max-content; padding: 10px 25px; } @keyframes shake { 0% { transform: rotate(2deg); } 50% { transform: rotate(-3deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } } .social-absolute:hover { animation: shake 500ms ease-in-out forwards; } .public-header{ width: 100%; background: #540863; background-size: auto; background-repeat: no-repeat; } .adv-banner-container{ width: 100%; height: 10px; } .adv-banner-container .adv-item{ width: 100%; height: 100%; object-fit: cover; } .top-bar-container{ width: 100%; min-height: 40px; height: 40px; background: #222 ; display: flex; flex-direction: row; justify-content: center; align-items: center; } .top-bar{ width: 1200px; height: 100%; margin: auto; padding: 0 8px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .top-item{ height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .info-container{ flex-direction: row; justify-content: flex-start; align-items: center; } .info-container img{ width: 16px; height: 16px; } .info-container > span{ display: inline-flex; } .top-info, .top-social{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-social{ padding: 5px 0; } .top-social li a img{ width: 32px; height: 32px; } .top-social li a span{ font-size: 0px; font-weight: 200; color: #777; } .top-list{ width: max-content; display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0 0px; } .top-list:hover{ color: ; } .top-list:first-child{ margin-right : 0; } .top-list:last-child{ margin-left : 0; } .arrow-menu-container{ display: flex; flex-direction: row; justify-content: center; align-items: center; } .top-list a span, .top-list span{ color: #777; font-weight: bold; font-size: 14px; } .top-list a img, .top-list span img{ margin: 0 5px; width: 24px; height: 24px; object-fit: contain; } .top-list:first-child a img, .top-list:first-child span img{ margin-right: 0; } .top-navbar{ height: 100%; background: transparent; } .top-nav-list{ position: relative; height: 100%; padding: 0 20px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-nav-list a span, .top-nav-list span{ color: #000; font-size: 0px; font-weight: 200;search } .top-nav-list:hover{ background-color: #fff; } .top-nav-list .arrow-menu-container svg{ fill: #000; } .top-nav-list:hover a span, .top-nav-list:hover span, .top-nav-list:hover .arrow-menu-container svg{ color: #fff; fill: #fff; } .top-nav-list .icon-title-part{ padding-left: 5px; } .top-sub-nav > .top-sub-list a span, .top-sub-nav > .top-sub-list span{ color: #000; } .top-sub-nav > .top-sub-list:hover a span, .top-sub-nav > .top-sub-list:hover span{ color: #fff; } .top-sub-nav{ flex-direction: column; justify-content: center; align-content: flex-start; position: absolute; z-index: 4999; min-width: 150px; width: max-content; background: #2c3e50; clip: rect(1px, 1px, 1px, 1px); opacity: 0.1; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1); transform: translateY(-10px) scaleY(0.5); transform-origin: top; border-radius: 0; } .top-nav-list:hover > .top-sub-nav{ display: flex; top: 100%; clip: auto; opacity: 1; transform: translateY(0) scaleY(1); } .top-nav-list:hover > .top-sub-nav{ right: 0; } .top-sub-list{ border-left: 5px solid #f00; } .top-sub-list{ width: 100%; padding: 8px 20px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-sub-list:hover{ background: #fff; } .header-container{ display: grid; width: 1200px; margin: auto; height: auto; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 3fr 1fr; grid-template-areas: "top-1 top-2 top-3" "bottom-1 bottom-2 bottom-3"; padding-top: 16px; padding-bottom: -2px; padding-left: px; padding-right: px; } .top-section-1{ grid-area: top-1; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-section-2{ grid-area: top-2; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-section-3{ grid-area: top-3; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .logo-container{ display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 2px 2px; } .logo-container img{ display: block; width: 200px; height: 80px; max-width: 200px; max-height: 80px; object-fit: contain; } .nav-container{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; box-sizing: border-box; margin: 0 10px; } .nav-container > .navbar{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; background: #540863; box-sizing: border-box; border: px solid ; border-radius: 3px; padding: 0 !important; } .nav-container > .navbar{ margin-left: calc(0px + 10px); } .max-height{ height: 700px; overflow-x:hidden; overflow-y: auto; display:flex!important; flex-direction: column!important; justify-content: flex-start!important; } .nav-container .navbar .nav-list{ padding: 10px 18px; min-height: 45px; position: relative; list-style: none; display: flex; flex-direction: row; justify-content: space-between; align-content: center; box-sizing: border-box; } .nav-container .navbar .nav-list.active{ background-color: ; } .nav-container .navbar .nav-list.active a, .nav-container .navbar .nav-list.active span{ color: ; } .nav-container .navbar .nav-list .icon-title-part{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .nav-container .navbar .nav-list .icon-title-part img{ width: 24px; height: 24px; margin: 0 5px; } .nav-container .navbar .nav-list .overflow-menu{ justify-content: center !important; } .nav-container .navbar .nav-list:hover{ background-color: ; box-sizing: border-box; } .nav-container .navbar .nav-list:hover a, .nav-container .navbar .nav-list:hover span{ color: ; } .nav-container .navbar .nav-list img{ width: 32px; height: 32px; } .nav-container .navbar .nav-list a, .nav-container .navbar .nav-list span{ text-decoration: none; font-size: 17px; color: #fff; } .nav-container .navbar .nav-list.base-level:hover > .navbar.navbar-sub, .nav-container .navbar .nav-list:hover > .overflow-menu > .navbar.navbar-sub{ display: flex; top: 45px; clip: auto; opacity: 1; transform: translateY(0) scaleY(1); } .nav-container .navbar .nav-list:hover > .navbar.navbar-sub{ display: flex; right: calc(100% + 5px); top: 0; clip: auto; opacity: 1; transform: translateY(0) scaleY(1); } .nav-container .navbar.navbar-sub{ position: absolute; z-index: 4999; background: #fff; clip: rect(1px, 1px, 1px, 1px); opacity: 0.1; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1); transform: translateY(-10px) scaleY(0.5); transform-origin: top; border-radius: 0; } .nav-container .navbar.navbar-sub{ flex-direction: column; justify-content: center; align-content: flex-start; min-width: 150px; width: max-content; } .nav-container .navbar .nav-list.base-level:hover > .navbar.navbar-sub, .nav-container .navbar .nav-list:hover > .overflow-menu > .navbar.navbar-sub{ right: 0; } .nav-container .navbar .nav-list:hover > .navbar.navbar-sub{ right: calc(100% + 5px); } .nav-container .navbar.navbar-sub .nav-list{ width:200px; border-left: 5px solid #540863; } .arrow-icon-menu{ width: 8px; height: 8px; } .arrow-icon-menu.arrow-bottom{ transform: rotate(90deg); } .arrow-menu-container{ margin-right: 5px; } .arrow-icon-menu.arrow-right, .overflow-list .arrow-icon-menu.arrow-bottom{ transform: rotate(180deg); } .nav-container .navbar .nav-list:first-child:hover{ border-radius: 0 3px 3px 0; } .nav-container .navbar .nav-list:last-child:hover{ border-radius: 3px 0 0 3px; } .nav-container .navbar .nav-list.base-level svg, .nav-container .navbar .nav-list .overflow-menu svg{ fill: #fff; } .nav-container .navbar .nav-list.base-level:hover svg{ fill: ; } .sub-menu-container{ position: absolute; min-width: 150px; background-color: #fff; color: #fff; top: 32px; right: 0; z-index: 4999; /* display: none;*/ } /*.sub-navbar{ width: 100%; height: 100%; }*/ .nav-container .navbar.navbar-sub .nav-list img{ width: 16px; height: 16px; } .nav-container .navbar.navbar-sub .nav-list a, .nav-container .navbar.navbar-sub .nav-list span{ color: #540863; font-size: 17px; } .nav-list.with-sub-menu:hover .sub-menu-container{ display: block; } .nav-container .navbar.navbar-sub .nav-list .arrow-menu-container svg{ fill: #540863; } .active{ background-color: ; } .active a{ color: ; } .icon-container{ display: flex; flex-direction: row; justify-content: center; align-content: center; } .icon-container .icon-item{ display: flex; flex-direction: row; justify-content: center; align-content: center; box-sizing: border-box; min-height: 45px; margin: 0 5px; } .icon-container .icon-item:first-child{ margin-right: 0 !important; } .icon-container .icon-item:last-child{ margin-left: 0 !important; } .icon-container .icon-item a{ border: 0px solid ; } .icon-container .icon-item.basket-icon{ position: relative; color: #fff; min-width: 45px; min-height: 45px; outline: none; border-radius: 3px; background: #540863; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; margin: 0 10px; } .icon-container .icon-item .icon-shortcut{ color: #fff; min-width: 45px; min-height: 45px; margin: 0; outline: none; border-radius: 3px; background: #540863; display: flex; flex-direction: row; justify-content: center; align-items: center; transition: .4s; cursor: pointer; text-decoration: none; } .basket-shop{ display: flex; flex-direction: row; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 3px; } .icon-container .icon-item .icon-shortcut:hover svg, .icon-container .icon-item .icon-shortcut:hover .add-item-to-cart.open span { fill: #fff; color: #fff; } .icon-container .icon-item.basket-icon .add-item-to-cart{ color: #fff; border-radius: 3px; background: #540863; display: flex; flex-direction: row; justify-content: center; align-items: center; transition: .4s; cursor: pointer; box-sizing: content-box; border: 0px solid ; } .icon-container .icon-item.basket-icon .add-item-to-cart{ border-left: none !important; } .border-basket{ border-right: none !important; } .icon-container .icon-item:hover > span, .icon-container .icon-item.login-icon:hover span{ color: #fff; } .icon-container .icon-item.basket-icon .icon-shortcut:hover, .icon-container .icon-item.login-icon .icon-shortcut:hover, .icon-container .icon-item.basket-icon .icon-shortcut:hover .add-item-to-cart{ background: #540863; } .icon-container .icon-item.basket-icon .add-item-to-cart.open{ width: 45px; border-radius: 0 3px 3px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } .icon-container .icon-item.basket-icon:hover .add-item-to-cart.open{ background: #540863; } .icon-container .icon-item.basket-icon .add-item-to-cart.open:hover span{ color: #fff; } .icon-container .icon-item.basket-icon .add-item-to-cart.open + .icon-shortcut{ border-radius: 3px 0 0 3px; } .icon-container .icon-item.lang-icon .icon-shortcut:hover{ background: #540863; } .icon-container .icon-item.search-icon .icon-shortcut .search-container .search-btn:hover{ background: #540863; } .icon-container .icon-item svg{ width: 25px; height: 25px; fill: #fff; } .icon-container .icon-item.login-icon{ position: relative; } /*.icon-container .icon-item.login-icon .icon-shortcut{ width: 100%; height: 100%; }*/ .icon-container .icon-item.login-icon .icon-login{ width: 25px; height: 25px; } #div_profile_picture, #div_profile_picture_metro { display: block; width: 0 !important; height: 0 !important; line-height: unset !important; } #div_profile_picture .rShowLogin{ position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: -1000; } #div_profile_picture .login-container{ display: none !important; } #div_profile_picture #profile_picture, #div_profile_picture #profile_exit{ display: none !important; } .icon-container .icon-item.login-icon{ color: #fff; /*width: 90px !important;*/ min-height: 45px; outline: none; border-radius: 3px; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; box-sizing: content-box; border: 0px solid ; } .icon-container .icon-item.login-icon .status-user, .icon-container .icon-item.login-icon .icon-login{ display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; margin: 0 5px; font-size:14px; } .public-header .bottom-section-1{ grid-area: bottom-1; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .public-header .bottom-section-2{ grid-area: bottom-2; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .public-header .bottom-section-3{ grid-area: bottom-3; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .icon-container .icon-item{ width: unset; height: unset; } .search-icon{ position: relative; } .search-container { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; height: 100%; position: relative; border-radius: 3px; min-width: 45px; } .search-container > .search-btn svg, .search-container > .close-search-btn svg{ fill: #fff; } .search-container > .search-btn:hover svg, .search-container > .close-search-btn:hover svg{ fill: #fff; } .search-btn { color: #fff; width: 45px; height: 45px; margin: 0; outline: none; border-radius: 3px; background: #540863; display: flex; flex-direction: row; justify-content: center; align-items: center; transition: .8s; cursor: pointer; text-decoration: none; border: 0px solid transparent; } .icon-container .icon-item img{ width: 25px; height: 25px; object-fit:contain; } .search-container.open-search-box .search-btn{ border-radius: 3px 0 0 3px !important; } .search-container.open-search-box .close-search-btn{ border-radius: 0 3px 3px 0 !important; } .search-btn, .search-command, .close-search-btn{ box-sizing: content-box; } .search-btn > svg { fill: #fff; } .cls-pls::placeholder{ color: ; } .search-input { padding: 0; height: 100%; background: #540863; color: #fff; font-size: 14px; font-weight: normal; transition: all 1s ease-in-out; width: 0; position: absolute; top: 0; overflow: hidden; white-space: nowrap; border: 0px solid transparent; } .open-search-box > .search-input{ padding : 10px 48px; } .search-input { left: calc(0px + 45px); border-right: none; border-left: none; } .search-container.open-search-box .search-btn{ border-radius: 3px 0 0 3px !important; } .search-container.open-search-box .close-search-btn{ border-radius: 0 3px 3px 0 !important; } .search-container.open-search-box .search-input{ border-radius: 0 3px 3px 0 !important; } .close-search-btn{ position: absolute; color: #fff; width: 45px; height: 45px; margin: 0; outline: none; border-radius: 3px; background: #540863; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; box-sizing: border-box; } .close-search-btn svg{ fill: #fff; } .sticky{ width: 100vw; height: max-content; position: fixed; top: 0; right: 0; left: 0; z-index: 999; padding: 2vh 8vw; transition: .8s; background-color: #ddd !important; } .public_sticky{ width: 100%; height: max-content; position: fixed; top: 0; right: 0; left: 0; z-index: 1001; } .d-none{ display: none !important; } .border-left-n{ border-left: none !important; } .border-right-n{ border-right: none !important; } .w-1200px{ width: 1200px !important; margin: auto; } .lang-icon{ position: relative; } .language-container .lang-btn{ width: 25px; height: 25px; } .lang-list-container{ width: max-content; height: max-content; padding-top: 20px; position: absolute; top: 35px; left: 50%; clip: rect(1px, 1px, 1px, 1px); opacity: 0.1; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1); transform: translate(-50%, 0) scaleY(0.5); transform-origin: top; z-index: 100; } .lang-list{ position: relative; width: max-content; height: max-content; padding: 10px; background: #2f2f2f; border-radius: 3px; } .lang-list::after{ content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #2f2f2f; display: block; } .lang-nav{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .lang-nav .lang-li{ display: flex; flex-direction: row; justify-content: center; align-items: center; list-style: none; width: max-content; margin: 5px 0; } .lang-nav .lang-li a{ display: flex; flex-direction: row; justify-content: center; align-items: center; } .lang-nav .lang-li img{ width: 25px; height: 25px; object-fit: cover; margin: 0 4px; } .lang-nav .lang-li span{ text-transform: uppercase; line-height: 2.5; font-size: 14px; margin: 0 4px; color: #fff; } .lang-nav .lang-li a{ color: #fff; } .lang-nav .lang-li span:hover{ cursor: pointer; color: #fff; } .lang-nav .lang-li .lang-active{ font-weight: bold; color: #fff; } .icon-item.lang-icon:hover .lang-list-container{ clip: auto; opacity: 1; transform: translate(-50%, 0) scaleY(1); } /*---------------------------------------------------------------------------------*/ .link-profile-container{ width: max-content; height: max-content; padding-top: 20px; position: absolute; top: 35px; left: 50%; clip: rect(1px, 1px, 1px, 1px); opacity: 0.1; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1); transform: translate(-50%, 0) scaleY(0.5); transform-origin: top; z-index: 100; } .link-profile-container .link-wrapper{ position: relative; width: max-content; height: max-content; padding: 10px 25px; background: #2f2f2f; border-radius: 3px; } .link-profile-container .link-wrapper a{ color: #fff; } .link-profile-container .link-wrapper a:hover{ cursor: pointer; color: #fff; } .link-profile-container .link-wrapper::after{ content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #2f2f2f; display: block; } .icon-item.login-icon:hover .link-profile-container{ clip: auto; opacity: 1; transform: translate(-50%, 0) scaleY(1); } .backTop{ display: flex !important; } #back_to_top{ display: none; position: fixed; transition: 600ms; right: 25px; left: unset; bottom: 50px; z-index: 100; border-radius: 50%; border: 1px solid #000; padding: 0px; flex-direction: row; justify-content: center; align-items: center; background-color: #777 ; } #back_to_top svg{ width: 0px; height: 0px; fill: #fff ; } #back_to_top img{ width: 0px; height: 0px; fill: #fff ; object-fit:contain; } .search-btn img{ width: 25px; height: 25px; object-fit: contain; } .basket-shop img{ width: 25px; height: 25px; object-fit: contain; } .lang-btn img{ width: 25px; height: 25px; object-fit: contain; } .icon-login img{ width: 25px; height: 25px; object-fit: contain; } .header-container{ grid-template-rows: 1fr; grid-template-columns: 200px minmax(auto, 100%) 1fr; grid-template-areas: "top-1 top-2 top-3"; } .top-section-1{ justify-content: flex-start; } .top-section-2{ justify-content: flex-start; } .logo-container{ justify-content: flex-start; } .nav-container{ justify-content: flex-start; } .nav-container .navbar{ justify-content: flex-start; } .width-full{ width: 100% !important; } #module_footer_section_14{ ; width:100%; padding-top:4%; padding-right:2%; padding-bottom:2%; padding-left:2%; border-style:none; }#module_footer_column_14{ ; width:30%; margin-top:0px; padding-bottom:2vw; padding-left:1.5vw; border-style:solid; border-left-width:.015vw; border-color:#FFF; }#module_footer_items_53{ ; cursor:default; width:8vw; height:6vw; font-weight:400; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_53:hover{ ; }#module_footer_row_28{ ; padding-top:1.5vw; border-style:none; }#module_footer_items_54{ ; cursor:default; text-align:justify; line-height:1.8vw; color:#FFF; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_54:hover{ ; }#module_footer_column_15{ ; width:40%; margin-top:0px; padding-right:3vw; padding-left:3vw; border-style:solid; border-left-width:.015vw; border-color:#FFF; }#module_footer_items_56{ ; cursor:default; line-height:6vw; color:#FFF; font-weight:bold; font-size:1.1vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; }#module_footer_items_56:hover{ ; }#module_footer_row_31{ ; padding-top:1.5vw; border-style:none; }#module_footer_items_57{ ; cursor:default; width:1.5vw; height:1.5vw; background-color:#f5f5f5; font-weight:bold; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-top-left-radius:.25vw; border-top-right-radius:.25vw; border-bottom-right-radius:.25vw; border-bottom-left-radius:.25vw; border-style:none; margin-left:.5vw; padding-top:.25vw; padding-right:.25vw; padding-bottom:.25vw; padding-left:.25vw; }#module_footer_items_57:hover{ ; background-color:#fff; border-style:solid; border-top-width:.015vw; border-right-width:.015vw; border-bottom-width:.015vw; border-left-width:.015vw; border-color:#f5f5f5; }#module_footer_items_60{ ; cursor:default; line-height:1.5vw; color:#FFF; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-right:.5vw; }#module_footer_items_60:hover{ ; }#module_footer_row_33{ ; padding-top:1vw; border-style:none; }#module_footer_items_59{ ; cursor:default; width:1.5vw; height:1.5vw; background-color:#f5f5f5; font-weight:bold; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-top-left-radius:0.25vw; border-top-right-radius:0.25vw; border-bottom-right-radius:0.25vw; border-bottom-left-radius:0.25vw; border-style:none; margin-left:.5vw; padding-top:0.25vw; padding-right:0.25vw; padding-bottom:0.25vw; padding-left:0.25vw; }#module_footer_items_59:hover{ ; background-color:#fff; border-style:solid; border-top-width:.15vw; border-right-width:.15vw; border-bottom-width:.15vw; border-left-width:.15vw; border-color:#f5f5f5; }#module_footer_items_62{ ; cursor:default; line-height:1.5vw; color:#FFF; font-weight:400; font-size:0.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-right:.5vw; }#module_footer_items_62:hover{ ; }#module_footer_row_35{ ; padding-top:1vw; border-style:none; }#module_footer_items_65{ ; cursor:default; width:1.5vw; height:1.5vw; background-color:#f5f5f5; font-weight:bold; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-top-left-radius:0.25vw; border-top-right-radius:0.25vw; border-bottom-right-radius:0.25vw; border-bottom-left-radius:0.25vw; border-style:none; margin-left:.5vw; padding-top:0.25vw; padding-right:0.25vw; padding-bottom:0.25vw; padding-left:0.25vw; }#module_footer_items_65:hover{ ; width:1.5vw; height:1.5vw; background-color:#fff; border-style:solid; border-top-width:0.15vw; border-right-width:0.15vw; border-bottom-width:0.15vw; border-left-width:0.15vw; border-color:#f5f5f5; }#module_footer_items_119{ ; cursor:default; line-height:1.5vw; color:#FFF; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-right:.5vw; }#module_footer_items_119:hover{ ; }#module_footer_row_36{ ; padding-top:2vw; border-style:none; }#module_footer_items_67{ ; cursor:default; line-height:1.5vw; color:#FFF; font-weight:bold; font-size:1vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_67:hover{ ; }#module_footer_row_37{ ; padding-top:1vw; padding-bottom:1vw; border-style:none; }#module_footer_items_68{ ; cursor:default; width:2vw; height:2vw; font-weight:400; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_68:hover{ ; }#module_footer_items_69{ ; cursor:default; width:2vw; height:2vw; font-weight:400; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-right:1vw; }#module_footer_items_69:hover{ ; }#module_footer_items_114{ ; cursor:default; width:2vw; height:2vw; font-weight:400; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-right:1vw; }#module_footer_items_114:hover{ ; }#module_footer_items_115{ ; cursor:default; width:2.2vw; height:2.2vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-top-left-radius:5vw; border-top-right-radius:5vw; border-bottom-right-radius:5vw; border-bottom-left-radius:5vw; border-style:none; margin-top:.3vw; margin-right:1vw; }#module_footer_items_115:hover{ ; }#module_footer_items_186{ ; cursor:default; width:2vw; height:2vw; font-weight:400; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-right:1vw; }#module_footer_items_186:hover{ ; }#module_footer_column_16{ ; width:30%; margin-top:0vw; padding-right:1.5vw; padding-left:1.5vw; border-style:none; border-left-width:.015vw; border-color:#E1E1E1; }#module_footer_items_70{ ; cursor:default; line-height:6vw; color:#FFF; font-weight:bold; font-size:1.1vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_70:hover{ ; }#module_footer_row_39{ ; padding-top:1.5vw; border-style:none; }#module_footer_items_71{ ; cursor:default; width:40%; line-height:1.5vw; color:#FFF; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_71:hover{ ; }#module_footer_items_172{ ; cursor:default; width:50%; line-height:1.5vw; color:#000; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_172:hover{ ; }#module_footer_row_40{ ; padding-top:1vw; border-style:none; }#module_footer_items_72{ ; cursor:default; width:40%; line-height:1.5vw; color:#FFF; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_72:hover{ ; }#module_footer_items_173{ ; cursor:default; width:50%; line-height:1.5vw; color:#000; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_173:hover{ ; }#module_footer_row_41{ ; padding-top:1vw; border-style:none; }#module_footer_items_73{ ; cursor:default; width:40%; line-height:1.5vw; color:#FFF; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_73:hover{ ; }#module_footer_items_174{ ; cursor:default; line-height:1.5vw; color:#000; font-weight:400; font-size:.8vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_174:hover{ ; }#module_footer_section_15{ ; background-color:#540863; justify-content:center; padding-top:1vw; padding-right:2vw; padding-bottom:1vw; padding-left:2vw; border-style:none; }#module_footer_column_18{ ; justify-content:center; border-style:none; }#module_footer_row_57{ ; justify-content:center; border-style:none; }#module_footer_items_89{ ; cursor:default; text-align:center; line-height:1.5vw; color:#fff; font-weight:500; font-size:.9vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_89:hover{ ; }#public_footer_main_3{;background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:scroll;width:100%;max-width:100%;border-style:none;}#public_footer_main_3:hover{;} #public_footer_main_3{ position:relative; margin-right:auto !important; margin-left:auto !important; overflow:hidden !important; } #public_footer_main_3 > div{ position:relative; z-index:12; } #public_footer_main_3:hover .background-img { filter:none; } #public_footer_main_3 .background-img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; backdrop-filter: none; } #public_footer_main_3 #public_footer_main_3 .new_admin_layer { position: absolute; width: 100%; height: 100%; z-index: 10; transition: all 600ms ease; background-color: rgba(0,0,0,0); display: flex; right:0; top:0; } #public_footer_main_3 .layer_first_child { width: 100%; } #public_footer_main_3:hover .new_admin_layer { border-radius: 0 !important; background-color: rgba(0,0,0,0); } #public_footer_main_3{ background-image:url("https://tatotaj.ir/files/1771760638_فوتر.jpg") !important; } #msg_footer.msg_footer, #msg_footer_complete.msg_footer{ position: fixed; top: 50px; right: 10px; width: 400px; height: 50px; z-index: 10000; border-radius: 3px; } #msg_footer .d_flex, #msg_footer_complete .d_flex{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 100%; padding: 0 15px; } #msg_footer.green_msg_footer { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; } #msg_footer.red_msg_footer, #msg_footer_complete.red_msg_footer{ background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } #msg_footer .close_msg, #msg_footer_complete .close_msg{ cursor: pointer; font-size: 25px; padding-right: 15px; } #msg_footer .close_msg:hover, #msg_footer_complete .close_msg:hover{ color: #000; } .border_red{ border: 1px solid #e20000; } footer a{ color: inherit; } .dno{display:none!important;} #body_popup_1,#body_popup_2{ position:fixed; display:flex; text-align:center; top:0; bottom:0; right:0; left:0; z-index:99999; visibility:hidden; opacity: 0; background:rgba(0,0,0,0.5); } #body_popup_1.open-popup,#body_popup_2.open-popup{ visibility:visible; opacity: 1; } #body_popup_1 > div,#body_popup_2 > div{ display:block; background:#fff; padding:10px; margin:auto; transform:translateY(-150px); -webkit-transition:transform .3s;-moz-transition:transform .3s;-ms-transition:transform .3s;-o-transition:transform .3s;transition:transform .3s; text-align:center; border-radius:10px; position:relative; z-index:999999; } #body_popup_1.open-popup > div,#body_popup_1.open-popup > div{ transform:translateY(0); } #body_popup_1 .icon-close-popup{ position:absolute; font-size:30px; height:30px; width:30px; border-radius:50%; color:red; top:-10px; right:-10px; background-color:transparent; z-index:9999; } #body_popup_1 .icon-close-popup i{ position:absolute; top:0; right:0; } #body_popup_1 .container-html{ height:100%; overflow:auto; max-height:90vh; } #body_popup_1 .container-html::-webkit-scrollbar{ width:5px; height:100%; } #body_popup_1 .container-html::-webkit-scrollbar-track{ background-color:transparent; } #body_popup_1 .container-html::-webkit-scrollbar-thumb{ background-color:#777; border-radius:20%; } #body_popup_1 .icon-close-popup{ color:#fff; top:0; right:0; } #module_waiting_box{ position:fixed; background:rgba(256,256,256,0.8); width:100%; height:100%; -webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s; top:0; right:0; opacity:0; z-index:9999999999999; visibility:hidden; } #module_waiting_box.show-waiting{ visibility:visible; opacity:1; } #module_waiting_box .spinner { margin: 100px auto 0; width: 70px; text-align: center; } #module_waiting_box .spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } #module_waiting_box .spinner .bounce1 { -webkit-animation-delay: -0.35s; animation-delay: -0.35s; } #module_waiting_box .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 95%, 100% { -webkit-transform: scale(0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 95%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.0); transform: scale(1.0); } } body{direction: rtl;text-align: right;}