/* ========================= هیرو صفحات نمایندگی طراحی جددی امید ========================= */ /* ========================================================= SNOWA AGENCY HERO PREMIUM DARK GLASS SYSTEM ========================================================= */ #header_hero_agancy_snowa { --snowa-blue: #04509c; --snowa-blue-light: #0875d1; --snowa-blue-dark: #023568; --snowa-gold: #fcc415; --snowa-gold-dark: #d99f00; --snowa-navy: #1b1f2e; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 50% 45%, rgba(4,80,156,.28), transparent 32% ), radial-gradient( circle at 85% 15%, rgba(4,80,156,.22), transparent 30% ), radial-gradient( circle at 15% 85%, rgba(252,196,21,.07), transparent 25% ), linear-gradient( 135deg, #0b101c 0%, #111827 42%, #1b1f2e 100% ); padding-top: 55px; padding-bottom: 55px; } .btn_snowa_call strong { font-family: 'Yekan-Body'; text-shadow: 2px 8px 12px #ecb40b; } /* ========================================================= BLUE AURORA ========================================================= */ #header_hero_agancy_snowa::before { content: ""; position: absolute; width: 750px; height: 750px; top: -330px; right: -220px; border-radius: 50%; background: radial-gradient( circle, rgba(4,80,156,.42), rgba(4,80,156,.16) 38%, transparent 72% ); filter: blur(55px); opacity: .85; pointer-events: none; z-index: -2; animation: snowaBlueAurora 16s ease-in-out infinite alternate; } @keyframes snowaBlueAurora { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-120px,100px) scale(1.15); } 100% { transform: translate(-220px,180px) scale(.95); } } /* ========================================================= GOLD AURORA ========================================================= */ #header_hero_agancy_snowa::after { content: ""; position: absolute; width: 600px; height: 600px; bottom: -350px; left: -180px; border-radius: 50%; background: radial-gradient( circle, rgba(252,196,21,.20), rgba(252,196,21,.06) 38%, transparent 72% ); filter: blur(70px); pointer-events: none; z-index: -2; animation: snowaGoldAurora 19s ease-in-out infinite alternate; } @keyframes snowaGoldAurora { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(130px,-80px) scale(1.15); } 100% { transform: translate(220px,-150px) scale(.95); } } #header_hero_agancy_snowa .sppb-container-inner { position: relative; z-index: 2; } #header_hero_agancy_snowa .sppb-container-inner::before { content: ""; position: absolute; inset: -100px; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 90px 90px; mask-image: radial-gradient( ellipse at center, black 20%, transparent 72% ); pointer-events: none; opacity: .45; animation: snowaGridMove 35s linear infinite; } @keyframes snowaGridMove { to { background-position: 90px 90px, 90px 90px; } } #header_hero_agancy_snowa .right_snowa_agancy_column { position: relative; z-index: 5; } #header_hero_agancy_snowa .right_snowa_agancy_column .show_tittle_blog_module { position: relative; margin-bottom: 24px; } /* ========================================================= SNOWA AGENCY - DYNAMIC HERO HEADING HTML FRIENDLY / NO TEXT CHANGE ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy { position: relative; width: 100%; padding: 8px 10px 22px; text-align: center; isolation: isolate; } /* ========================================================= AMBIENT LIGHT BEHIND HEADING ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy::before { content: ""; position: absolute; top: -70px; left: 50%; width: 360px; height: 180px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(4,80,156,.20) 0%, rgba(4,80,156,.08) 38%, transparent 72% ); filter: blur(22px); pointer-events: none; z-index: -1; } /* ========================================================= H1 ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display { position: relative; display: inline-block; margin: 0; padding: 4px 28px 18px; color: #ffffff; font-family: iranyekanxfanummedium, sans-serif; font-size: clamp( 27px, 3vw, 42px ); font-weight: 900; line-height: 1.65; letter-spacing: -.5px; text-align: center; text-shadow: 0 3px 18px rgba(0,0,0,.45), 0 0 25px rgba(255,255,255,.035); } /* ========================================================= LEFT / RIGHT BLUE LIGHT ACCENTS ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display::before { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 34px; transform: translateY(-50%); border-radius: 8px; background: linear-gradient( 180deg, #fff0a0, #fcc415 42%, #d99f00 ); box-shadow: 0 0 7px rgba(252,196,21,.80), 0 0 18px rgba(252,196,21,.32); } /* ========================================================= MAIN DECORATIVE LINE ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 190px; height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(8,117,209,.25), #0875d1, #fcc415, #0875d1, rgba(8,117,209,.25), transparent ); box-shadow: 0 0 7px rgba(4,80,156,.55), 0 0 18px rgba(4,80,156,.18); } /* ========================================================= CENTER GOLD LIGHT ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display::after { animation: headingLinePulse 4s ease-in-out infinite; } @keyframes headingLinePulse { 0%, 100% { opacity: .65; filter: brightness(.9); } 50% { opacity: 1; filter: brightness(1.35); } } /* ========================================================= SMALL GOLD POINT ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display { --heading-glow: rgba(252,196,21,.65); } /* Since ::before is already used for the vertical gold accent, create the center point through background decoration. */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display::after { border-radius: 20px; } /* ========================================================= SLOGAN WRAPPER ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 17px; } /* ========================================================= SLOGAN GLASS ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa .sppb-addon-title { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; margin: 0; padding: 9px 19px; max-width: 100%; border-radius: 999px; border: 1px solid rgba(75,181,255,.22); background: linear-gradient( 135deg, rgba(7,47,87,.28), rgba(2,17,35,.18) ); color: rgba(229,243,255,.84); font-family: tanharegular, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.9; text-align: center; box-shadow: 0 8px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.055); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .4s ease, background .4s ease, box-shadow .4s ease, transform .4s ease; } /* ========================================================= SLOGAN TOP LIGHT ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa .sppb-addon-title::before { content: ""; position: absolute; top: -1px; left: 18%; width: 64%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(71,185,255,.65), transparent ); opacity: .6; } /* ========================================================= SLOGAN ICON ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa .sppb-addon-title-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 70px; height: 70px; margin: 0; border-radius: 50%; border: 1px solid rgba(76, 181, 255, .55); background: linear-gradient(145deg, rgba(8, 117, 209, .34), rgba(2, 31, 61, .65)); color: #8bd7ff; font-size: 13px; box-shadow: 0 0 9px rgba(4, 80, 156, .42), 0 0 22px rgba(4, 80, 156, .16), inset 0 1px 2px rgba(255, 255, 255, .10); filter: drop-shadow(0 0 4px rgba(54, 184, 255, .50)); transition: transform .4s ease, box-shadow .4s ease; } /* GOLD MICRO DOT */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa .sppb-addon-title-icon::after { content: ""; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: #fcc415; box-shadow: 0 0 5px rgba(252,196,21,.9); animation: iconGoldPulse 3s ease-in-out infinite; } @keyframes iconGoldPulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.25); } } /* ========================================================= SLOGAN HOVER ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa .sppb-addon-title:hover { transform: translateY(-2px); border-color: rgba(76,181,255,.45); background: linear-gradient( 135deg, rgba(8,62,117,.38), rgba(2,20,40,.30) ); box-shadow: 0 12px 32px rgba(0,0,0,.20), 0 0 20px rgba(4,80,156,.15), inset 0 1px 0 rgba(255,255,255,.08); } #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa .sppb-addon-title:hover .sppb-addon-title-icon { transform: scale(1.08) rotate(-8deg); box-shadow: 0 0 12px rgba(4,80,156,.60), 0 0 28px rgba(4,80,156,.20); } /* ========================================================= HEADING REVEAL ========================================================= */ #header_hero_agancy_snowa .heading_hero_snowa_agancy { animation: snowaHeadingReveal .85s cubic-bezier(.22,1,.36,1) both; } @keyframes snowaHeadingReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991.98px) { #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display { font-size: 32px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767.98px) { #header_hero_agancy_snowa .heading_hero_snowa_agancy { padding: 5px 5px 18px; } #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display { padding: 3px 20px 16px; font-size: 26px; line-height: 1.7; } #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa .sppb-addon-title { padding: 8px 13px; font-size: 12px; line-height: 1.8; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display { padding-right: 16px; padding-left: 16px; font-size: 23px; } #header_hero_agancy_snowa .heading_hero_snowa_agancy .heading_for_module_display::before { width: 4px; height: 28px; } #header_hero_agancy_snowa .heading_hero_snowa_agancy .site_slogan_agency_snowa .sppb-addon-title { max-width: 95%; font-size: 11px; gap: 8px; } } #header_hero_agancy_snowa .right_snowa_agancy_column .heading_for_module_display { position: relative; display: inline-block; margin: 0; padding: 17px 28px; border-radius: 20px; color: #ffffff; font-family: iranyekanxfanummedium, sans-serif; font-size: clamp(22px, 2vw, 50px); font-weight: 900; line-height: 1.6; letter-spacing: -.4px; background: linear-gradient( 135deg, rgba(255,255,255,.09), rgba(255,255,255,.025) ); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); text-shadow: 0 2px 12px rgba(0,0,0,.35); overflow: hidden; } #header_hero_agancy_snowa .right_snowa_agancy_column .heading_for_module_display::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.15), transparent ); transform: rotate(25deg); animation: snowaHeadingShine 7s ease-in-out infinite; } @keyframes snowaHeadingShine { 0%, 55% { left: -80%; } 75%, 100% { left: 150%; } } #header_hero_agancy_snowa .heading_for_module_display span { color: #fcc415; text-shadow: 0 0 12px rgba(252,196,21,.35), 0 0 28px rgba(252,196,21,.15); } /*#header_hero_agancy_snowa .right_snowa_agancy_column .site_slogan_agency_snowa { position: relative; margin: 0 8px 30px; padding: 15px 20px; border-radius: 18px; background: linear-gradient( 135deg, rgba(4,80,156,.18), rgba(255,255,255,.035) ); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 15px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }*/ #header_hero_agancy_snowa .site_slogan_agency_snowa .sppb-addon-title { display: flex; align-items: center; gap: 13px; margin: 0; color: rgba(255,255,255,.82); font-family: tanharegular, sans-serif; font-size: 16px; font-weight: 400; line-height: 2; } #header_hero_agancy_snowa .site_slogan_agency_snowa .sppb-addon-title-icon { flex-shrink: 0; width: 70px; height: 70px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient( 145deg, #fcc415, #d99f00 ); color: #1b1f2e; font-size: 18px; box-shadow: 0 8px 25px rgba(252,196,21,.25), inset 0 1px 2px rgba(255,255,255,.5); animation: snowaToolPulse 4s ease-in-out infinite; } .site_slogan_agency_snowa span:before { content: "\E97F"; font-family: 'icons'; font-weight: 500; font-size: 50px; } /* ========================================================= SNOWA TRUST CARDS PREMIUM DARK GLASS + NEON BORDER ========================================================= */ #header_hero_agancy_snowa .farad-trust .trust-item { position: relative; background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(4,80,156,.035) 48%, rgba(0,0,0,.18) ); border: 1px solid rgba(89,171,255,.28); border-radius: 22px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 0 18px rgba(4,80,156,.12), inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(4,80,156,.12); overflow: hidden; transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease, box-shadow .45s ease; z-index: 3; } /* ========================================================= GRADIENT BORDER LIGHT ========================================================= */ #header_hero_agancy_snowa .farad-trust .trust-item { background-image: radial-gradient( circle at 0% 0%, rgba(61,164,255,.16), transparent 18% ), radial-gradient( circle at 100% 0%, rgba(61,164,255,.10), transparent 18% ), radial-gradient( circle at 100% 100%, rgba(252,196,21,.08), transparent 18% ), linear-gradient( 145deg, rgba(255,255,255,.075), rgba(4,80,156,.035) 48%, rgba(0,0,0,.18) ); } #header_hero_agancy_snowa .farad-trust .trust-item::before { content: ""; position: absolute; top: -1px; right: -1px; width: 75px; height: 75px; background: radial-gradient( circle at top right, rgba(72,178,255,.95) 0, rgba(72,178,255,.35) 8%, rgba(72,178,255,.12) 22%, transparent 55% ); pointer-events: none; z-index: 4; animation: snowaTrustCornerGlow 4s ease-in-out infinite; } @keyframes snowaTrustCornerGlow { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } } #header_hero_agancy_snowa .farad-trust .trust-item { } #header_hero_agancy_snowa .farad-trust .trust-item:hover { transform: translateY(-10px); border-color: rgba(70,174,255,.62); box-shadow: 0 35px 80px rgba(0,0,0,.42), 0 0 28px rgba(4,80,156,.28), 0 0 70px rgba(4,80,156,.12), inset 0 1px 0 rgba(255,255,255,.13); } #header_hero_agancy_snowa .farad-trust .trust-item:hover { box-shadow: 0 35px 80px rgba(0,0,0,.42), 0 0 25px rgba(4,80,156,.32), 0 12px 30px rgba(4,80,156,.12), inset 0 -2px 18px rgba(4,80,156,.16); } #header_hero_agancy_snowa .farad-trust .trust-icon { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient( circle, rgba(4,80,156,.22), rgba(4,80,156,.08) 55%, rgba(0,0,0,.12) 100% ); border: 1px solid rgba(68,171,255,.48); box-shadow: 0 0 18px rgba(4,80,156,.24), 0 0 40px rgba(4,80,156,.10), inset 0 1px 4px rgba(255,255,255,.12); overflow: hidden; transition: transform .45s ease, box-shadow .45s ease; } #header_hero_agancy_snowa .farad-trust .trust-icon::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 0 15px rgba(4,80,156,.18), 0 0 12px rgba(4,80,156,.10); z-index: 1; } #header_hero_agancy_snowa .farad-trust .trust-icon i { position: relative; z-index: 5; font-size: 60px; background: linear-gradient( 180deg, #9ddcff 0%, #42b5ff 28%, #0875d1 62%, #04509c 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 0 7px rgba(48,166,255,.55) ); transition: transform .4s ease, filter .4s ease; } #header_hero_agancy_snowa .farad-trust .trust-icon span { position: absolute; width: 35px; height: 35px; border-radius: 50%; background: radial-gradient( circle, rgba(52,175,255,.65), transparent 70% ); filter: blur(15px); opacity: .45; z-index: 0; animation: snowaIconGlow 3.5s ease-in-out infinite; } @keyframes snowaIconGlow { 0%, 100% { transform: scale(.75); opacity: .35; } 50% { transform: scale(1.5); opacity: .75; } } #header_hero_agancy_snowa .farad-trust .trust-item:hover .trust-icon { transform: translateY(-6px) scale(1.05); border-color: rgba(91,190,255,.75); box-shadow: 0 0 22px rgba(4,80,156,.45), 0 0 55px rgba(4,80,156,.22), inset 0 0 18px rgba(4,80,156,.12); } #header_hero_agancy_snowa .farad-trust .trust-number { font-family: iranyekanxfanummedium, sans-serif; font-size: 35px; font-weight: 900; background: linear-gradient( 180deg, #ffffff 0%, #70c6ff 28%, #0875d1 68%, #04509c 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 0 8px rgba(4,80,156,.30) ); text-shadow: none; } #header_hero_agancy_snowa .farad-trust .trust-item:hover .trust-icon i { transform: scale(1.1); filter: drop-shadow( 0 0 12px rgba(60,180,255,.85) ); } #header_hero_agancy_snowa .farad-trust .trust-number { font-family: iranyekanxfanummedium, sans-serif; font-size: 35px; font-weight: 900; background: linear-gradient( 180deg, #ffffff 0%, #70c6ff 28%, #0875d1 68%, #04509c 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 0 8px rgba(4,80,156,.30) ); text-shadow: none; } #header_hero_agancy_snowa .farad-trust .trust-number { font-family: iranyekanxfanummedium, sans-serif; font-size: 35px; font-weight: 900; background: linear-gradient( 180deg, #ffffff 0%, #70c6ff 28%, #0875d1 68%, #04509c 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 0 8px rgba(4,80,156,.30) ); text-shadow: none; } #header_hero_agancy_snowa .farad-trust .item2 .trust-number { background: linear-gradient( 180deg, #fff8cf, #fcc415 48%, #d99f00 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 0 10px rgba(252,196,21,.35) ); } #header_hero_agancy_snowa .farad-trust .trust-title { font-family: tanharegular, sans-serif; font-size: 15px; font-weight: 700; background: linear-gradient( 180deg, #ffffff, #d8eaff 75%, #9bcfff ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } #header_hero_agancy_snowa .farad-trust .trust-item::after { height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(4,80,156,.15) 15%, #0875d1 45%, #53b7ff 60%, rgba(4,80,156,.20) 85%, transparent 100% ); box-shadow: 0 0 8px rgba(4,80,156,.75), 0 0 20px rgba(4,80,156,.30); opacity: .9; animation: snowaTrustConnection 4s ease-in-out infinite; } @keyframes snowaTrustConnection { 0%, 100% { opacity: .45; filter: brightness(.8); } 50% { opacity: 1; filter: brightness(1.5); } } #header_hero_agancy_snowa .trust-center { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient( circle, rgba(4,80,156,.30), rgba(4,80,156,.12) 42%, transparent 72% ); box-shadow: 0 0 70px rgba(4,80,156,.38), 0 0 130px rgba(4,80,156,.18), inset 0 0 70px rgba(4,80,156,.15); z-index: 3; } #header_hero_agancy_snowa .trust-center::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 2px solid rgba(35,144,255,.55); box-shadow: 0 0 12px rgba(35,144,255,.75), 0 0 30px rgba(4,80,156,.55), 0 0 65px rgba(4,80,156,.25); animation: snowaMainBlueRing 9s linear infinite; } #header_hero_agancy_snowa .trust-center::after { content: ""; position: absolute; inset: -35px; border-radius: 50%; border: 1px dashed rgba(252,196,21,.65); box-shadow: 0 0 10px rgba(252,196,21,.25), 0 0 30px rgba(4,80,156,.18); animation: snowaMainGoldRing 18s linear infinite reverse; } @keyframes snowaMainBlueRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes snowaMainGoldRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes snowaToolPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(252,196,21,.38); } } #header_hero_agancy_snowa .farad-trust { position: relative; z-index: 5; } @keyframes snowaTrustRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes snowaTrustGoldRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes snowaTrustOrbPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035); } } #header_hero_agancy_snowa .trust-logo { position: relative; width: 265px; height: 265px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.80); box-shadow: 0 25px 60px rgba(0,0,0,.22), 0 0 45px rgba(4,80,156,.18), inset 0 2px 5px rgba(255,255,255,.95), inset 0 -10px 25px rgba(4,80,156,.06); overflow: hidden; } #header_hero_agancy_snowa .trust-logo::before { content: ""; position: absolute; width: 140%; height: 45%; top: -20%; left: -20%; background: linear-gradient( 180deg, rgba(255,255,255,.75), transparent ); transform: rotate(-15deg); filter: blur(8px); pointer-events: none; } #header_hero_agancy_snowa .trust-logo::before { content: ""; position: absolute; width: 140%; height: 45%; top: -20%; left: -20%; background: linear-gradient( 180deg, rgba(255,255,255,.75), transparent ); transform: rotate(-15deg); filter: blur(8px); pointer-events: none; } #header_hero_agancy_snowa .trust-logo::after { content: ""; position: absolute; width: 70px; height: 70px; right: 18px; bottom: 20px; border-radius: 50%; background: radial-gradient( circle, rgba(252,196,21,.35), transparent 70% ); filter: blur(10px); opacity: .65; animation: snowaLogoGoldGlow 4s ease-in-out infinite; } @keyframes snowaLogoGoldGlow { 0%, 100% { transform: scale(.8); opacity: .35; } 50% { transform: scale(1.25); opacity: .7; } } #header_hero_agancy_snowa .trust-logo img { position: relative; z-index: 5; display: block; width: 190px; height: auto; max-width: 75%; object-fit: contain; filter: drop-shadow( 0 7px 12px rgba(4,80,156,.16) ); } #header_hero_agancy_snowa .farad-trust .trust-item::after { height: 1px; background: linear-gradient( 90deg, transparent, rgba(4,80,156,.55), rgba(252,196,21,.75), transparent ); box-shadow: 0 0 10px rgba(4,80,156,.25); opacity: .65; } .trust-center { width: 380px; height: 380px; } @media (max-width: 767.98px) { #header_hero_agancy_snowa .trust-center { position: absolute; left: 76px; top: auto; transform: none; width: 250px; height: 250px; margin: 35px auto; } #header_hero_agancy_snowa .trust-logo { width: 185px; height: 185px; } #header_hero_agancy_snowa .trust-logo img { width: 135px; } } @media (max-width: 767.98px) { #header_hero_agancy_snowa .trust-center { animation: none; } } /* ========================================================= SNOWA DEVICE REPAIR GRID DARK GLASS / NEON BLUE / GOLD ========================================================= */ #header_hero_agancy_snowa .device_repair_snowa_agancy { width: 90%; margin: 0 auto; } /* --------------------------------------------------------- GRID --------------------------------------------------------- */ #header_hero_agancy_snowa .snowa-device-grid { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; } /* --------------------------------------------------------- DEVICE CARD --------------------------------------------------------- */ #header_hero_agancy_snowa .snowa-device-card { position: relative; min-width: 0; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none !important; background: linear-gradient( 145deg, rgba(10,31,62,.82), rgba(3,14,32,.94) ); border: 1px solid rgba(77,157,232,.38); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -15px 30px rgba(4,80,156,.07), 0 0 14px rgba(4,80,156,.08); overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease, background .4s ease; } /* --------------------------------------------------------- GLASS INNER HIGHLIGHT --------------------------------------------------------- */ #header_hero_agancy_snowa .snowa-device-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(255,255,255,.07), transparent 22%, transparent 72%, rgba(4,80,156,.08) ); pointer-events: none; z-index: -1; } /* --------------------------------------------------------- TOP LEFT NEON POINT --------------------------------------------------------- */ #header_hero_agancy_snowa .snowa-device-card::after { content: ""; position: absolute; top: -1px; left: 18px; width: 55px; height: 2px; background: linear-gradient( 90deg, transparent, #42b5ff, #0875d1, transparent ); box-shadow: 0 0 7px rgba(66,181,255,.95), 0 0 18px rgba(4,80,156,.65); opacity: .9; transition: width .45s ease, opacity .45s ease; } /* --------------------------------------------------------- HOVER CARD --------------------------------------------------------- */ #header_hero_agancy_snowa .snowa-device-card:hover { transform: translateY(-8px); border-color: rgba(77,177,255,.72); background: linear-gradient( 145deg, rgba(8,42,82,.92), rgba(3,15,34,.97) ); box-shadow: 0 28px 55px rgba(0,0,0,.38), 0 0 20px rgba(4,80,156,.25), 0 0 45px rgba(4,80,156,.12), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -12px 25px rgba(4,80,156,.12); } #header_hero_agancy_snowa .snowa-device-card:hover::after { width: 105px; opacity: 1; } /* ========================================================= GOLD BOTTOM LIGHT ========================================================= */ #header_hero_agancy_snowa .snowa-device-card .wave { position: absolute; left: 50%; bottom: -2px; width: 72px; height: 2px; transform: translateX(-50%); display: block; background: linear-gradient( 90deg, transparent, #d99f00 12%, #fcc415 35%, #fff0a3 50%, #fcc415 65%, #d99f00 88%, transparent ); box-shadow: 0 0 7px rgba(252,196,21,.75), 0 0 18px rgba(252,196,21,.38), 0 0 32px rgba(252,196,21,.16); opacity: .9; transition: width .45s ease, box-shadow .45s ease, opacity .45s ease; } /* GOLD LINE HOVER */ #header_hero_agancy_snowa .snowa-device-card:hover .wave { width: 125px; opacity: 1; box-shadow: 0 0 8px rgba(252,196,21,.95), 0 0 20px rgba(252,196,21,.65), 0 0 38px rgba(252,196,21,.30); } /* ========================================================= DEVICE ICON ========================================================= */ #header_hero_agancy_snowa .snowa-device-card .device-icon { position: relative; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; border-radius: 50%; background: radial-gradient( circle, rgba(4,80,156,.20), rgba(4,80,156,.05) 62%, transparent 72% ); transition: transform .45s ease, filter .45s ease; } /* --------------------------------------------------------- ICON RING --------------------------------------------------------- */ #header_hero_agancy_snowa .snowa-device-card .device-icon .ring { position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(54,174,255,.32); box-shadow: 0 0 12px rgba(4,80,156,.18), inset 0 0 12px rgba(4,80,156,.08); transition: border-color .45s ease, box-shadow .45s ease, transform .7s ease; } /* ICON HOVER */ #header_hero_agancy_snowa .snowa-device-card:hover .device-icon { transform: translateY(-4px) scale(1.06); filter: drop-shadow( 0 0 10px rgba(42,171,255,.38) ); } #header_hero_agancy_snowa .snowa-device-card:hover .device-icon .ring { border-color: rgba(67,185,255,.75); box-shadow: 0 0 15px rgba(4,80,156,.38), 0 0 28px rgba(4,80,156,.18), inset 0 0 15px rgba(4,80,156,.15); transform: rotate(180deg); } /* ========================================================= DEVICE ICON ITSELF ========================================================= */ #header_hero_agancy_snowa .snowa-device-card .device-icon i { position: relative; z-index: 5; font-size: 60px; font-style: normal; background: linear-gradient( 180deg, #c4ebff 0%, #65c7ff 25%, #0875d1 65%, #04509c 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 0 6px rgba(42,170,255,.55) ); transition: transform .4s ease, filter .4s ease; } #header_hero_agancy_snowa .snowa-device-card:hover .device-icon i { transform: scale(1.1); filter: drop-shadow( 0 0 8px rgba(74,191,255,.9) ) drop-shadow( 0 0 20px rgba(4,80,156,.45) ); } /* ========================================================= PARTICLES ========================================================= */ #header_hero_agancy_snowa .snowa-device-card .device-icon .particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #55c5ff; box-shadow: 0 0 6px rgba(55,183,255,.9), 0 0 12px rgba(4,80,156,.55); opacity: .45; transition: opacity .4s ease, transform .6s ease; } #header_hero_agancy_snowa .snowa-device-card .device-icon .p1 { top: 8px; right: 12px; } #header_hero_agancy_snowa .snowa-device-card .device-icon .p2 { bottom: 13px; left: 8px; } #header_hero_agancy_snowa .snowa-device-card .device-icon .p3 { top: 27px; left: 2px; } #header_hero_agancy_snowa .snowa-device-card:hover .device-icon .particle { opacity: 1; } #header_hero_agancy_snowa .snowa-device-card:hover .device-icon .p1 { transform: translate(5px,-5px) scale(1.5); } #header_hero_agancy_snowa .snowa-device-card:hover .device-icon .p2 { transform: translate(-4px,5px) scale(1.4); } #header_hero_agancy_snowa .snowa-device-card:hover .device-icon .p3 { transform: translate(-4px,0) scale(1.3); } /* ========================================================= ICON SHINE ========================================================= */ #header_hero_agancy_snowa .snowa-device-card .device-icon .shine { position: absolute; top: -20px; left: -60px !important; width: 19px; height: 250px; background: linear-gradient(180deg, transparent, rgb(255 255 255 / 18%), transparent); transform: rotate(35deg); opacity: 0 !important; z-index: 8; } #header_hero_agancy_snowa .snowa-device-card:hover .device-icon .shine { animation: snowaDeviceShine .8s ease forwards; } @keyframes snowaDeviceShine { 0% { left: -60px; opacity: 0; } 25% { opacity: 1; } 100% { left: 115px; opacity: 0; } } /* ========================================================= DEVICE TITLE ========================================================= */ #header_hero_agancy_snowa .snowa-device-card h5 { position: relative; z-index: 5; margin: 0; padding: 0 8px; font-family: iranyekanxfanummedium, tanharegular, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.7; text-align: center; color: #eef7ff; background: linear-gradient( 180deg, #ffffff, #dceeff ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: filter .4s ease, transform .4s ease; } #header_hero_agancy_snowa .snowa-device-card:hover h5 { transform: translateY(-2px); filter: drop-shadow( 0 0 6px rgba(72,181,255,.42) ); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1199.98px) { #header_hero_agancy_snowa .snowa-device-grid { gap: 12px; } #header_hero_agancy_snowa .snowa-device-card { height: 170px; } } @media (max-width: 991.98px) { #header_hero_agancy_snowa .snowa-device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 767.98px) { #header_hero_agancy_snowa .snowa-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #header_hero_agancy_snowa .snowa-device-card { height: 155px; border-radius: 13px; } #header_hero_agancy_snowa .snowa-device-card .device-icon { width: 68px; height: 68px; margin-bottom: 10px; } #header_hero_agancy_snowa .snowa-device-card .device-icon i { font-size: 37px; } #header_hero_agancy_snowa .snowa-device-card h5 { font-size: 13px; } } @media (max-width: 420px) { #header_hero_agancy_snowa .snowa-device-grid { gap: 9px; } #header_hero_agancy_snowa .snowa-device-card { height: 145px; } } /* ========================================================= SNOWA AGENCY HERO - SERVICE FORM DARK GLASS / BLUE NEON / GOLD ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column { position: relative; width: 100%; padding: 28px 28px 30px; border-radius: 22px; background: linear-gradient( 145deg, rgba(9, 29, 58, .72), rgba(2, 12, 29, .90) ); border: 1px solid rgba(99, 177, 255, .34); box-shadow: 0 30px 80px rgba(0,0,0,.34), 0 0 30px rgba(4,80,156,.10), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -30px 60px rgba(4,80,156,.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; isolation: isolate; } /* ========================================================= GLASS LIGHT ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(255,255,255,.07), transparent 18%, transparent 75%, rgba(4,80,156,.08) ); pointer-events: none; z-index: -1; } /* ========================================================= MOVING BLUE LIGHT ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column::after { content: ""; position: absolute; top: 20px; right: -90px; width: 180px; height: 420px; background: linear-gradient( 180deg, transparent, rgba(30,148,255,.18), rgba(30,148,255,.42), transparent ); filter: blur(25px); transform: rotate(12deg); opacity: .35; pointer-events: none; animation: snowaFormLight 7s ease-in-out infinite; z-index: -1; } @keyframes snowaFormLight { 0%, 100% { right: -120px; opacity: .20; } 50% { right: 90px; opacity: .42; } } /* ========================================================= TOP BLUE NEON LINE ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .form_snowa_service_agancy { position: relative; } #header_hero_agancy_snowa .left_snowa_agancy_column .form_snowa_service_agancy::before { content: ""; position: absolute; top: -29px; right: 18%; width: 80px; height: 2px; background: linear-gradient( 90deg, transparent, #0875d1, #55c5ff, transparent ); box-shadow: 0 0 7px rgba(55,181,255,.85), 0 0 18px rgba(4,80,156,.65); } /* ========================================================= FORM TITLE ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from { position: relative; margin-bottom: 22px; text-align: center; } #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from .sppb-addon-title { position: relative; display: inline-block; margin: 0 0 9px; padding: 0 0 13px; font-family: iranyekanxfanummedium, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.8; color: #ffffff; text-shadow: 0 0 10px rgba(255,255,255,.10); } /* GOLD ACCENT UNDER TITLE */ #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from .sppb-addon-title::after { content: ""; position: absolute; bottom: 0; right: 50%; width: 42px; height: 2px; transform: translateX(50%); background: linear-gradient( 90deg, transparent, #fcc415, transparent ); box-shadow: 0 0 7px rgba(252,196,21,.65), 0 0 18px rgba(252,196,21,.22); } /* GOLD VERTICAL MARK */ #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from .sppb-addon-title::before { content: ""; position: absolute; right: -14px; top: 50%; width: 5px; height: 28px; border-radius: 5px; transform: translateY(-50%); background: linear-gradient( 180deg, #fff1a5, #fcc415, #d99f00 ); box-shadow: 0 0 8px rgba(252,196,21,.75), 0 0 18px rgba(252,196,21,.28); } /* SUBTITLE */ #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from .sppb-addon-content { margin: 0; color: rgba(220,235,250,.68); font-family: tanharegular, sans-serif; font-size: 14px; line-height: 1.8; } /* ========================================================= FORM CONTAINER ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .rsformform-all-namayandegi { width: 100%; } #header_hero_agancy_snowa .left_snowa_agancy_column .rsformform-all-namayandegi .formContainer { width: 100%; } /* REMOVE BOOTSTRAP DEFAULT SPACING */ #header_hero_agancy_snowa .left_snowa_agancy_column .rsformform-all-namayandegi .row { margin-left: 0; margin-right: 0; } #header_hero_agancy_snowa .left_snowa_agancy_column .rsformform-all-namayandegi .formControls { width: 100%; padding-left: 0; padding-right: 0; } /* ========================================================= EACH FORM ROW ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .rsform-block { position: relative; margin-bottom: 13px !important; } #header_hero_agancy_snowa .left_snowa_agancy_column .rsform-block:last-child { margin-bottom: 0 !important; } /* ========================================================= INPUT WRAPPER ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon { position: relative; width: 100%; } /* ========================================================= INPUT / SELECT ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .form-control, #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .form-select, #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .rsform-select-box { width: 100%; height: 52px; padding: 0 52px 0 18px; border-radius: 13px; border: 1px solid rgba(91,174,245,.34); outline: none; background: linear-gradient( 135deg, rgba(9,35,68,.58), rgba(2,16,34,.72) ); color: #eaf6ff; font-family: iranyekanxfanummedium, sans-serif; font-size: 13px; text-align: right; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 -10px 25px rgba(4,80,156,.045), 0 5px 18px rgba(0,0,0,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .35s ease, box-shadow .35s ease, background .35s ease, transform .35s ease; } /* SELECT */ #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon select { cursor: pointer; appearance: auto; } /* PLACEHOLDER */ #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .form-control::placeholder { color: rgba(221,236,250,.60); opacity: 1; } /* ========================================================= INPUT HOVER ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon:hover .form-control, #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon:hover .form-select, #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon:hover .rsform-select-box { border-color: rgba(76,181,255,.65); background: linear-gradient( 135deg, rgba(9,42,80,.72), rgba(3,19,40,.82) ); } /* ========================================================= INPUT FOCUS ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .form-control:focus, #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .form-select:focus, #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .rsform-select-box:focus { border-color: #1688e8; background: linear-gradient( 135deg, rgba(8,42,80,.82), rgba(3,17,36,.90) ); box-shadow: 0 0 0 1px rgba(8,117,209,.18), 0 0 15px rgba(4,80,156,.24), 0 0 30px rgba(4,80,156,.08), inset 0 1px 0 rgba(255,255,255,.07); transform: translateY(-1px); } /* ========================================================= INPUT ICON ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon > i { position: absolute; top: 50%; right: 17px; z-index: 5; width: 22px; transform: translateY(-50%); font-size: 17px; text-align: center; pointer-events: none; background: linear-gradient( 180deg, #d9f3ff, #4dbbff 45%, #0875d1 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 0 5px rgba(54,181,255,.45) ); transition: transform .35s ease, filter .35s ease; } #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon:hover > i { transform: translateY(-50%) scale(1.12); filter: drop-shadow( 0 0 7px rgba(55,190,255,.85) ); } /* ========================================================= INPUT LIGHT LINE ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon::after { content: ""; position: absolute; right: 12px; bottom: 0; width: 35px; height: 1px; border-radius: 10px; background: linear-gradient( 90deg, transparent, rgba(75,190,255,.65), transparent ); opacity: .45; transition: width .4s ease, opacity .4s ease; } #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon:focus-within::after { width: 75px; opacity: 1; } /* ========================================================= SELECT OPTION ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column select option { background: #07182f; color: #eaf6ff; } /* ========================================================= VALIDATION ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .formValidation { display: block; margin-top: 4px; padding-right: 5px; font-family: tanharegular, sans-serif; font-size: 11px; color: #ff879a; } /* RSForm normally handles visibility. We don't force display:none here so validation functionality remains intact. */ /* ========================================================= SUBMIT BUTTON ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column #Submit { position: relative; width: 100%; height: 55px; margin-top: 3px; border: 1px solid rgba(255, 225, 108, .85) !important; border-radius: 13px !important; overflow: hidden; background: linear-gradient(135deg, #d99f00 0%, #fcc415 35%, #ffd84d 50%, #fcc415 65%, #d99f00 100%) !important; color: #07182d !important; font-family: iranyekanxfanummedium, sans-serif; font-size: 16px !important; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(252, 196, 21, .22), 0 0 14px rgba(252, 196, 21, .20), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -5px 12px rgba(174, 118, 0, .20); transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; } /* BUTTON SHINE */ #header_hero_agancy_snowa .left_snowa_agancy_column #Submit::before { content: ""; position: absolute; top: -80%; left: -30%; width: 35%; height: 260%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.72), transparent ); transform: rotate(25deg); opacity: .65; pointer-events: none; animation: snowaButtonShine 4.5s ease-in-out infinite; } @keyframes snowaButtonShine { 0% { left: -40%; } 55% { left: 120%; } 100% { left: 120%; } } /* BUTTON HOVER */ #header_hero_agancy_snowa .left_snowa_agancy_column #Submit:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 13px 30px rgba(252,196,21,.30), 0 0 18px rgba(252,196,21,.38), 0 0 42px rgba(252,196,21,.15), inset 0 1px 0 rgba(255,255,255,.65); } /* BUTTON ACTIVE */ #header_hero_agancy_snowa .left_snowa_agancy_column #Submit:active { transform: translateY(0) scale(.985); } /* ========================================================= FORM ERROR STATE ========================================================= */ #header_hero_agancy_snowa .left_snowa_agancy_column .formError .form-control, #header_hero_agancy_snowa .left_snowa_agancy_column .formError .form-select { border-color: rgba(255,92,117,.70); box-shadow: 0 0 12px rgba(255,92,117,.12); } /* ========================================================= DESKTOP SPACING ========================================================= */ @media (min-width: 992px) { #header_hero_agancy_snowa .left_snowa_agancy_column { padding: 30px 34px 34px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991.98px) { #header_hero_agancy_snowa .left_snowa_agancy_column { padding: 27px 25px 30px; border-radius: 20px; } #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from .sppb-addon-title { font-size: 20px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767.98px) { #header_hero_agancy_snowa .left_snowa_agancy_column { padding: 24px 18px 25px; border-radius: 18px; } #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from { margin-bottom: 18px; } #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from .sppb-addon-title { font-size: 18px; } #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .form-control, #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .form-select, #header_hero_agancy_snowa .left_snowa_agancy_column .input-icon .rsform-select-box { height: 50px; font-size: 12px; } #header_hero_agancy_snowa .left_snowa_agancy_column #Submit { height: 53px; font-size: 15px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { #header_hero_agancy_snowa .left_snowa_agancy_column { padding: 21px 14px 22px; } #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from .sppb-addon-title { font-size: 17px; } #header_hero_agancy_snowa .left_snowa_agancy_column .heding_beforemodule_from .sppb-addon-content { font-size: 13px; } } /* ========================================================= SNOWA CENTER CTA GLASS NEON / PREMIUM CALL BUTTON ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 190px; height: 70px; padding: 0 22px; overflow: hidden; border-radius: 999px; border: 1px solid rgba(76,181,255,.65) !important; background: linear-gradient( 135deg, rgba(8,53,104,.62), rgba(2,20,42,.78) ) !important; color: #eef8ff !important; font-family: iranyekanxfanummedium, sans-serif; font-size: 16px; font-weight: 700; text-decoration: none !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 14px rgba(4,80,156,.20), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 18px rgba(4,80,156,.08); transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .4s ease, background .4s ease, box-shadow .4s ease, color .4s ease; } /* ========================================================= GLASS HIGHLIGHT ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call::before { content: ""; position: absolute; top: 0; left: -85%; width: 55%; height: 100%; background: linear-gradient( 105deg, transparent, rgba(255,255,255,.18), rgba(255,255,255,.34), transparent ); transform: skewX(-20deg); opacity: .55; pointer-events: none; } /* ========================================================= BLUE NEON EDGE ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; border: 1px solid rgba(255,255,255,.055); box-shadow: inset 0 0 12px rgba(4,80,156,.12); pointer-events: none; } /* ========================================================= PHONE ICON ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call i { position: relative; z-index: 3; width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient( 145deg, #ffe36b, #fcc415 52%, #d99f00 ); color: #07182d !important; font-size: 40px; box-shadow: 0 0 10px rgba(252,196,21,.35), 0 0 22px rgba(252,196,21,.15), inset 0 1px 2px rgba(255,255,255,.65); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background .45s ease; } /* ========================================================= TEXT ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call { text-shadow: 0 0 8px rgba(180,225,255,.12); } /* ========================================================= HOVER ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call:hover { transform: translateY(-5px) scale(1.025); border-color: rgba(84,190,255,.95) !important; background: linear-gradient( 135deg, rgba(10,72,136,.78), rgba(3,27,56,.88) ) !important; color: #ffffff !important; box-shadow: 0 16px 35px rgba(0,0,0,.34), 0 0 18px rgba(4,80,156,.42), 0 0 42px rgba(4,80,156,.20), 0 0 70px rgba(4,80,156,.08), inset 0 1px 0 rgba(255,255,255,.17), inset 0 -8px 20px rgba(4,80,156,.12); } /* ========================================================= MOVING GLASS LIGHT ON HOVER ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call:hover::before { animation: snowaCallGlassShine .9s ease forwards; } @keyframes snowaCallGlassShine { 0% { left: -85%; } 100% { left: 145%; } } /* ========================================================= ICON HOVER ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call:hover i { transform: rotate(-12deg) scale(1.12); box-shadow: 0 0 12px rgba(252,196,21,.55), 0 0 28px rgba(252,196,21,.30), 0 0 45px rgba(252,196,21,.12), inset 0 1px 2px rgba(255,255,255,.75); } /* ========================================================= ACTIVE ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call:active { transform: translateY(-1px) scale(.985); } /* ========================================================= FOCUS ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call:focus-visible { outline: none; border-color: #fcc415 !important; box-shadow: 0 0 0 3px rgba(252,196,21,.12), 0 0 25px rgba(252,196,21,.25); } /* ========================================================= BUTTON WRAPPER ========================================================= */ #header_hero_agancy_snowa .center_snowa_agancy_column .sppb-button-wrapper { display: flex; justify-content: center; align-items: center; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575.98px) { #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call { min-width: 175px; height: 54px; font-size: 14px; gap: 10px; } #header_hero_agancy_snowa .center_snowa_agancy_column .btn_snowa_call i { width: 45px; height: 45px; font-size: 32px; } } /* ========================= اتمام بخش هیرو صفحات نمایندگی طراحی جددی امید ========================= */ /* ========================= سایدبار صفحات داخلی ========================= */ /* ========================================================= SNOWA SERVICE RIGHT SIDEBAR DARK GLASS / NEON BLUE / GOLD ========================================================= */ #sp-right { position: relative; direction: rtl; } /* ========================================================= SIDEBAR COLUMN ========================================================= */ #sp-right > .sp-column { position: relative; padding: 0 8px; } /* ========================================================= MODULE BASE ========================================================= */ #sp-right .sp-module { position: relative; margin-bottom: 22px; padding: 24px 20px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(80, 169, 255, .18); background: linear-gradient( 145deg, rgba(10, 35, 65, .72), rgba(3, 15, 31, .82) ); box-shadow: 0 18px 50px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .055), 0 0 25px rgba(4, 80, 156, .055); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease; } /* ========================================================= AMBIENT LIGHT INSIDE MODULE ========================================================= */ #sp-right .sp-module::before { content: ""; position: absolute; width: 180px; height: 100px; top: -65px; right: -45px; border-radius: 50%; background: radial-gradient( circle, rgba(8, 117, 209, .18), transparent 70% ); filter: blur(12px); pointer-events: none; } /* ========================================================= TOP LIGHT LINE ========================================================= */ #sp-right .sp-module::after { content: ""; position: absolute; top: 0; right: 24px; width: 75px; height: 1px; background: linear-gradient( 90deg, transparent, #0875d1, #53b7ff, transparent ); box-shadow: 0 0 8px rgba(8, 117, 209, .65), 0 0 18px rgba(8, 117, 209, .25); opacity: .8; } /* ========================================================= MODULE HOVER ========================================================= */ #sp-right .sp-module:hover { transform: translateY(-3px); border-color: rgba(48, 151, 235, .34); box-shadow: 0 25px 60px rgba(0, 0, 0, .28), 0 0 28px rgba(4, 80, 156, .10), inset 0 1px 0 rgba(255, 255, 255, .07); } /* ========================================================= MODULE TITLE ========================================================= */ #sp-right .sp-module-title { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 0 0 15px; color: #ffffff; font-family: iranyekanxfanummedium, sans-serif; font-size: 19px; font-weight: 800; line-height: 1.7; border-bottom: 1px solid rgba(255, 255, 255, .07); } /* GOLD ACCENT NEXT TO TITLE */ #sp-right .sp-module-title::before { content: ""; display: block; width: 4px; height: 27px; flex: 0 0 4px; border-radius: 8px; background: linear-gradient( 180deg, #fff2a6, #fcc415 45%, #d99f00 ); box-shadow: 0 0 7px rgba(252, 196, 21, .75), 0 0 18px rgba(252, 196, 21, .25); } /* ========================================================= TITLE BOTTOM LIGHT ========================================================= */ #sp-right .sp-module-title::after { content: ""; position: absolute; right: 0; bottom: -1px; width: 85px; height: 1px; background: linear-gradient( 90deg, #fcc415, #0875d1, transparent ); box-shadow: 0 0 8px rgba(252, 196, 21, .20); } /* ========================================================= TAG CLOUD ========================================================= */ #sp-right .tagscloud { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 2px 0; } /* TAG */ #sp-right .tagscloud .tag { display: inline-flex; margin: 0; } /* TAG LINK */ #sp-right .tagscloud .tag-name { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 8px 13px; border-radius: 12px; border: 1px solid rgba(62, 164, 245, .20); background: linear-gradient( 135deg, rgba(8, 117, 209, .13), rgba(255, 255, 255, .025) ); color: rgba(220, 239, 255, .88); font-family: 'Tanha'; font-size: 13px !important; line-height: 1.7; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 5px 15px rgba(0,0,0,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; } #sp-right .tagscloud .tag-name:hover { color: #ffffff; transform: translateY(-2px); border-color: rgba(75, 181, 255, .55); background: linear-gradient( 135deg, rgba(8, 117, 209, .30), rgba(4, 80, 156, .13) ); box-shadow: 0 8px 22px rgba(4, 80, 156, .20), 0 0 14px rgba(8, 117, 209, .12); } /* ========================================================= ARTICLES / CATEGORY LIST ========================================================= */ #sp-right .categories-module { list-style: none; margin: 0; padding: 0; } /* EACH ITEM */ #sp-right .categories-module > li { position: relative; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .055); } #sp-right .categories-module > li:last-child { border-bottom: 0; } /* CATEGORY LINK */ #sp-right .categories-module > li > a { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 10px 8px 10px 4px; color: rgba(221, 237, 250, .86); font-size: 14px; line-height: 1.8; text-decoration: none; transition: color .3s ease, padding-right .3s ease, background .3s ease; } /* BLUE ARROW */ #sp-right .categories-module > li > a::before { content: "←"; display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin-left: 9px; flex: 0 0 25px; border-radius: 50%; border: 1px solid rgba(8, 117, 209, .25); color: #58bfff; background: rgba(4, 80, 156, .10); font-size: 12px; transition: transform .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } /* HOVER */ #sp-right .categories-module > li > a:hover { padding-right: 13px; color: #ffffff; background: linear-gradient( 90deg, transparent, rgba(8,117,209,.055) ); } #sp-right .categories-module > li > a:hover::before { transform: translateX(-4px); color: #ffffff; border-color: rgba(72, 183, 255, .55); box-shadow: 0 0 10px rgba(8,117,209,.25); } /* ========================================================= SEARCH MODULE ========================================================= */ #sp-right .mod-finder-searchform { position: relative; margin: 0; } /* AWESOMEPLETE */ #sp-right .awesomplete { width: 100%; } /* SEARCH INPUT */ #sp-right .mod-finder-searchform input.js-finder-search-query { width: 100%; height: 54px; padding: 0 18px; border-radius: 15px; border: 1px solid rgba(67, 169, 242, .20); outline: none; background: linear-gradient( 135deg, rgba(5, 33, 62, .72), rgba(2, 17, 34, .62) ); color: #ffffff; font-family: tanharegular, sans-serif; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 20px rgba(0,0,0,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .35s ease, box-shadow .35s ease, background .35s ease; } /* PLACEHOLDER */ #sp-right .mod-finder-searchform input.js-finder-search-query::placeholder { color: rgba(190, 211, 230, .48); opacity: 1; } /* SEARCH FOCUS */ #sp-right .mod-finder-searchform input.js-finder-search-query:focus { border-color: rgba(48, 157, 239, .62); background: linear-gradient( 135deg, rgba(7, 45, 82, .82), rgba(2, 18, 37, .78) ); box-shadow: 0 0 0 3px rgba(8,117,209,.07), 0 0 22px rgba(8,117,209,.13), inset 0 1px 0 rgba(255,255,255,.07); } /* ========================================================= SEARCH ICON ========================================================= */ #sp-right .mod-finder-searchform { position: relative; } #sp-right .mod-finder-searchform::after { content: "\f002"; position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #79cfff; background: rgba(4,80,156,.14); border: 1px solid rgba(67,169,242,.18); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; pointer-events: none; box-shadow: 0 0 12px rgba(4,80,156,.12); } /* ========================================================= MODULE CONTENT ========================================================= */ #sp-right .sp-module-content { position: relative; z-index: 2; } /* ========================================================= STICKY WRAPPER ========================================================= */ #sp-right .inner-wrapper-sticky { position: relative; } /* ========================================================= FIRST MODULE - TAGS GOLD DETAIL ========================================================= */ #sp-right .sp-module:first-child .tagscloud .tag:nth-child(1) .tag-name { border-color: rgba(252,196,21,.25); } #sp-right .sp-module:first-child .tagscloud .tag:nth-child(1) .tag-name:hover { border-color: rgba(252,196,21,.65); box-shadow: 0 0 16px rgba(252,196,21,.12); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991.98px) { #sp-right > .sp-column { padding: 0 5px; } #sp-right .sp-module { padding: 22px 18px; border-radius: 20px; } } @media (max-width: 767.98px) { #sp-right .sp-module { margin-bottom: 18px; padding: 20px 16px; border-radius: 18px; } #sp-right .sp-module-title { font-size: 17px; margin-bottom: 17px; } #sp-right .tagscloud { gap: 7px; } #sp-right .tagscloud .tag-name { padding: 7px 10px; font-size: 12px !important; } #sp-right .categories-module > li > a { min-height: 47px; font-size: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #sp-right .sp-module, #sp-right .categories-module > li > a, #sp-right .categories-module > li > a::before, #sp-right .tagscloud .tag-name { transition: none !important; } } /* ========================= سایدبار صفحات داخلی ========================= */ /* ========================= ریسپانسیو امید رمضان ========================= */ @media only screen and (max-width: 767px) { .orderservice .sp-page-title { background-image: url(/images/background/mobile-bg-service-order.webp) !important; } .services-snowa-classpage .sp-page-title { background-image: url(https://snowaservise.ir/images/background/mobile-bg-service.webp)!important; } .font30 .sppb-addon-title { font-size: 30px !important; } .hero-shapes .shape.bg-lines, .project-shapes .shape, .footer-shapes .shape { max-width: 100% !important; } .footer-shapes .shape.one { bottom: 0 !important; } .raw-appliancess h5 { font-size: 15px; font-family: 'iranyekanxfanummedium' !important; } .feature-item .icon { font-size: 70px !important; } .feature-item { padding: 10px !important; } .hero-shapes .shape.two { right: 300px; } .project-slider-item .video { margin: 0 !important; transform: translate(0px)!important; } .right-container { display: flex; gap: 3px; flex-direction: column; align-items: center; } .footer-cta-inner h3.sppb-addon-title { text-align: center; } .tittle-snowa-service { padding: 5px !important; } .tittle-snowa-service h1.sppb-addon-title, .heading-style2-snowa h1.sppb-addon-title, #header-style3 h1.sppb-addon-title { font-size: 35px !important; } .tittle-snowa-service h2.sppb-addon-title, .bg-heading-snowastyle2 h2.sppb-addon-title, .send-tech-snowa h3.sppb-addon-title { font-size: 15px !important; } .col-service-form .sppb-addon-title, .article-details h3 { font-size: 20px !important; } .col-service-form p { font-size: 14px !important; } ul.modern-list li { font-size: 13px; } .article-details h1 { font-size: 25px !important; margin-bottom: 10px !important; } .article-details p, .article-details li { font-size: 14px !important; text-align: justify; } .article-details h2 { font-size: 22px !important; } .sppb-addon.sppb-addon-popover .sppb-marker { width: 20px !important; height: 20px !important; } .logo-image-phone { height: 40px !important; } #offcanvas-toggler { height: 80px !important; } #sp-header.headerstyle2 .logo, #sp-header.headerstyle2 { height: 80px !important; } .bg-heading-snowastyle2 { padding: 10px 5px; background: #fcc415; border-radius: 15px 5px; } div#header-style2, div#header-style3 { background: #04509c; border-radius: 5px 15px; } #header-style2 h1, #header-style3 h1 { color: #ffffff !important; } div#feature-style3 .sppb-media { flex-direction: column; } div#feature-style3 .sppb-feature-box-title { font-size: 18px; } div#feature-style3 .sppb-img-responsive { max-width: 100%; } .form-snowa-service #Submit { padding: 12px 15px !important; } } @media only screen and (max-width: 1366px) { .sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span { padding: 0 10px; line-height: 35px !important; font-size: 13px; } h4.sppb-snowa-title { font-size: 15px !important; padding: 10px 5px; } #top-section-servicess-snowa h1.sppb-addon-title { font-size: 35px !important; } #top-section-servicess-snowa h2.sppb-addon-title { font-size: 20px !important; } #top-section-servicess-snowa h3.sppb-addon-title { font-size: 20px !important; } .form-snowa-service .form-control, .form-snowa-service .form-select { font-size: 11px; padding: 12px 35px !important; } .input-icon i { font-size: 16px !important; } } /* ========================= H1 - عنوان اصلی مقاله ========================= */ .article-details h1 { font-weight: 900 !important; color: #04509c !important; position: relative; padding-right: 20px; margin-bottom: 30px; line-height: 1.6; } .article-details h1::before { content: ""; position: absolute; right: 0; top: 10px; width: 8px; height: 80%; background: linear-gradient(180deg, #fcc415, #04509c); border-radius: 10px; } /* ========================= H2 - زیرعنوان‌های مهم ========================= */ .article-details h2 { font-size: 28px; font-weight: 800 !important; color: #04509c !important; margin-top: 40px; margin-bottom: 20px; position: relative; padding-bottom: 10px; line-height: 1.6; } .article-details h2::after { content: ""; position: absolute; bottom: 0; right: 0; width: 70px; height: 4px; background-color: #fcc415; border-radius: 5px; transition: 0.4s; } .article-details h2:hover::after { width: 120px; } /* ========================= H3 - تیترهای داخلی ========================= */ .article-details h3 { font-size: 22px; font-weight: 700 !important; color: #04509c !important; margin-top: 25px; margin-bottom: 15px; position: relative; padding-right: 18px; } .article-details h3::before { content: "\f104"; /* فلش فونت اوسام */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 0; color: #fcc415; } .jfab_tooltip { font-family: 'tanha'; font-size: 18px; } .snowa-diagnosis-box { position: relative; margin: 30px 0; padding: 0; overflow: hidden; background: #fff; border: 1px solid #e5eaf0; border-radius: 16px; box-shadow: 0 8px 30px rgba(4, 80, 156, 0.08); } .snowa-diagnosis-box::before { content: ""; position: absolute; right: 0; top: 0; width: 5px; height: 100%; background: linear-gradient( 180deg, #fcc415 0%, #04509c 100% ); } .snowa-box-title { display: flex; align-items: center; gap: 11px; padding: 17px 22px; color: #fff; font-size: 18px; font-weight: 800; background: linear-gradient( 135deg, #04509c 0%, #0866b9 100% ); } .snowa-box-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: #fcc415; color: #04509c; font-size: 18px; font-weight: 900; } .snowa-diagnosis-content { padding: 22px 25px; } .snowa-diagnosis-content p { position: relative; margin: 0; padding: 10px 15px 10px 0; color: #39424e; font-size: 15px; line-height: 2; } .snowa-diagnosis-content p strong { color: #04509c; font-weight: 800; } .snowa-diagnosis-content p + p { border-bottom: 1px dashed #e4e9ee; } .snowa-diagnostic-table { position: relative; margin: 30px 0; overflow-x: auto; padding: 0; border: 1px solid #e4eaf1; border-radius: 15px; background: #fff; box-shadow: 0 7px 25px rgba(4, 80, 156, 0.07); } .snowa-diagnostic-table table { width: 100%; min-width: 680px; margin: 0; border-collapse: separate; border-spacing: 0; overflow: hidden; } .snowa-diagnostic-table th { padding: 16px 15px; background: #04509c; color: #fff; font-size: 15px; font-weight: 800; text-align: right; border: 0; } .snowa-diagnostic-table th:first-child { border-top-right-radius: 14px; } .snowa-diagnostic-table th:last-child { border-top-left-radius: 14px; } .snowa-diagnostic-table td { padding: 14px 15px; color: #424b57; font-size: 14px; line-height: 1.9; background: #fff; border-bottom: 1px solid #edf0f3; border-left: 1px solid #edf0f3; } .snowa-diagnostic-table tr:last-child td { border-bottom: 0; } .snowa-diagnostic-table tbody tr { transition: background 0.25s ease; } .snowa-diagnostic-table tbody tr:nth-child(even) td { background: #f8fafc; } .snowa-diagnostic-table tbody tr:hover td { background: #fff9df; } .snowa-diagnostic-table td:first-child { color: #04509c; font-weight: 700; } /* ========================================================= SNOWA TROUBLESHOOTING استاندارد فلوچارت عیب‌یابی اسنوا ========================================================= */ .snowa-troubleshooting { position: relative; margin: 35px 0; border: 1px solid #dfe7ef; border-radius: 18px; background: #f7fafd; overflow: hidden; box-shadow: 0 10px 30px rgba(4, 80, 156, 0.07); } /* ========================================================= TITLE ========================================================= */ .snowa-troubleshooting-title { position: relative; padding: 17px 24px; color: #fff; background: linear-gradient( 135deg, #04509c, #0868bb ); font-size: 18px; font-weight: 800; line-height: 1.8; text-align: right; } .snowa-troubleshooting-title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 85px; height: 4px; background: #fcc415; } /* ========================================================= FLOW ========================================================= */ .snowa-flow { padding: 28px 25px 35px; direction: rtl; text-align: center; } /* ========================================================= QUESTION ========================================================= */ .snowa-flow-question { width: min(100%, 620px); margin: 0 auto; padding: 15px 20px; box-sizing: border-box; border: 2px solid #04509c; border-radius: 12px; background: #f3f8fd; color: #04509c; font-size: 15px; font-weight: 800; line-height: 1.9; text-align: center; box-shadow: 0 5px 18px rgba(4, 80, 156, 0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* سوال اصلی */ .snowa-flow-question:first-child { background: #eef6ff; font-size: 16px; } /* Hover سؤال */ .snowa-flow-question:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(4, 80, 156, 0.10); } /* ========================================================= ARROW ========================================================= */ .snowa-flow-arrow { width: 34px; height: 42px; margin: 8px auto; display: flex; align-items: center; justify-content: center; color: #04509c; font-size: 21px; font-weight: 800; line-height: 1; } /* ========================================================= OPTIONS CONTAINER ========================================================= */ .snowa-flow-options { display: grid; width: 100%; margin: 18px auto 8px; gap: 14px; box-sizing: border-box; } /* ========================================================= 2 OPTIONS ========================================================= */ .snowa-flow-options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ========================================================= 3 OPTIONS ========================================================= */ .snowa-flow-options-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ========================================================= OPTION CARD ========================================================= */ .snowa-flow-option { position: relative; min-height: 92px; padding: 16px 17px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid #dfe7ef; border-radius: 12px; background: #fff; color: #424b56; font-size: 13px; line-height: 1.9; text-align: center; box-shadow: 0 5px 16px rgba(4, 80, 156, 0.05); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* ========================================================= STRONG INSIDE OPTION ========================================================= */ .snowa-flow-option strong { color: #04509c; font-weight: 800; } /* ========================================================= YES / NO VISUAL DIFFERENCE ========================================================= */ /* گزینه‌های بله و خیر همچنان همان option هستند. CSS متن آنها را تغییر نمی‌دهد. */ .snowa-flow-options-2 .snowa-flow-option:first-child { border-top: 3px solid #04509c; } .snowa-flow-options-2 .snowa-flow-option:last-child { border-top: 3px solid #fcc415; } /* ========================================================= HOVER OPTION ========================================================= */ .snowa-flow-option:hover { transform: translateY(-3px); border-color: #04509c; box-shadow: 0 9px 23px rgba(4, 80, 156, 0.09); } /* ========================================================= SPACE AFTER OPTIONS ========================================================= */ .snowa-flow-options { margin-bottom: 10px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .snowa-troubleshooting-title { padding: 15px 18px; font-size: 16px; } .snowa-flow { padding: 22px 15px 28px; } /* سؤال */ .snowa-flow-question { width: 100%; padding: 13px 15px; font-size: 14px; } .snowa-flow-question:first-child { font-size: 15px; } /* همه گزینه‌ها یک ستون */ .snowa-flow-options-2, .snowa-flow-options-3 { grid-template-columns: 1fr; } .snowa-flow-option { min-height: auto; padding: 14px; font-size: 13px; } .snowa-flow-arrow { height: 36px; margin: 6px auto; font-size: 19px; } } .snowa-flow-options-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1100px) { .snowa-flow-options-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .snowa-flow-options-5 { grid-template-columns: 1fr; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .snowa-troubleshooting { margin: 25px 0; border-radius: 14px; } .snowa-troubleshooting-title { padding: 13px 15px; font-size: 15px; } .snowa-flow { padding: 18px 12px 24px; } .snowa-flow-question { padding: 12px; font-size: 13px; } .snowa-flow-question:first-child { font-size: 14px; } .snowa-flow-option { padding: 12px; font-size: 12.5px; line-height: 1.85; } } .snowa-tech-tip { position: relative; margin: 32px 0; padding: 0; overflow: hidden; border: 1px solid #e5e9ee; border-radius: 15px; background: #fff; box-shadow: 0 7px 25px rgba(4, 80, 156, 0.07); } .snowa-tech-tip::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 5px; background: #fcc415; } .snowa-tech-tip-title { display: flex; align-items: center; gap: 10px; padding: 15px 22px; background: #f5f8fb; color: #04509c; font-size: 17px; font-weight: 800; } .snowa-tech-tip-title::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fcc415; color: #04509c; font-size: 15px; font-weight: 900; } .snowa-tech-tip-content { padding: 18px 24px 20px; color: #4a535e; font-size: 15px; line-height: 2.1; } .snowa-service-cta { position: relative; margin: 45px 0 25px; padding: 0; overflow: hidden; border-radius: 18px; background: radial-gradient( circle at 90% 20%, rgba(252, 196, 21, 0.16), transparent 32% ), linear-gradient( 135deg, #03447f 0%, #04509c 55%, #0867b5 100% ); box-shadow: 0 12px 35px rgba(4, 80, 156, 0.18); } .snowa-service-cta::before { content: ""; position: absolute; right: -45px; bottom: -70px; width: 190px; height: 190px; border: 1px solid rgba(252, 196, 21, 0.3); border-radius: 50%; } .snowa-service-cta::after { content: ""; position: absolute; right: 35px; bottom: -95px; width: 210px; height: 210px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; } .snowa-service-cta-content { position: relative; z-index: 2; padding: 30px 32px; } .snowa-service-cta-title { margin-bottom: 10px; color: #fff; font-size: 20px; font-weight: 900; } .snowa-service-cta-text { max-width: 800px; margin-bottom: 22px; color: rgba(255, 255, 255, 0.88); font-size: 14px; line-height: 2.1; } .snowa-service-cta-button { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 9px; background: #fcc415; color: #17344f !important; font-size: 14px; font-weight: 800; text-decoration: none !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .snowa-service-cta-button:hover { background: #ffd33f; color: #17344f !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); } .snowa-diagnostic-table::-webkit-scrollbar { height: 7px; } .snowa-diagnostic-table::-webkit-scrollbar-track { background: #edf1f5; border-radius: 10px; } .snowa-diagnostic-table::-webkit-scrollbar-thumb { background: #04509c; border-radius: 10px; } @media (max-width: 767px) { .snowa-diagnosis-box, .snowa-troubleshooting, .snowa-tech-tip, .snowa-service-cta { margin-top: 24px; margin-bottom: 24px; border-radius: 13px; } .snowa-box-title, .snowa-troubleshooting-title { padding: 14px 17px; font-size: 16px; } .snowa-diagnosis-content { padding: 16px 17px; } .snowa-diagnosis-content p { padding-right: 8px; font-size: 13px; line-height: 1.95; } .snowa-flow { padding: 18px 12px 20px; } .snowa-flow p { margin-bottom: 22px; padding: 11px 13px; font-size: 13px; } .snowa-flow p:first-child { font-size: 14px; } .snowa-tech-tip-title { padding: 13px 17px; font-size: 15px; } .snowa-tech-tip-content { padding: 15px 17px; font-size: 13px; line-height: 2; } .snowa-service-cta-content { padding: 23px 20px; } .snowa-service-cta-title { font-size: 17px; } .snowa-service-cta-text { font-size: 13px; line-height: 2; } .snowa-service-cta-button { width: 100%; padding: 12px 18px; } .articleBody details summary { padding: 13px 43px 13px 15px; font-size: 13px; } .articleBody details > p { padding-right: 15px; padding-left: 15px; font-size: 13px; } } .article-details blockquote { position: relative; margin: 30px 0; padding: 20px 28px 20px 24px; border: 1px solid #e3e9ef; border-right: 4px solid #04509c; border-radius: 12px; background: linear-gradient( 135deg, #f8fbfe 0%, #ffffff 100% ); color: #46515d; font-size: 15px; font-weight: 500; line-height: 2.1; box-shadow: 0 6px 22px rgba(4, 80, 156, 0.06); } .article-details blockquote::before { content: "“"; position: absolute; top: -10px; right: 20px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #fcc415; color: #04509c; font-family: Georgia, serif; font-size: 30px; font-weight: 900; line-height: 1; } .article-details blockquote p { margin: 0; color: #46515d; font-size: inherit; line-height: inherit; } .article-details blockquote a { color: #04509c; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(4, 80, 156, 0.3); text-underline-offset: 3px; } .article-details blockquote strong { color: #04509c; font-weight: 800; } .article-details blockquote { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .article-details blockquote:hover { border-right-color: #fcc415; box-shadow: 0 9px 28px rgba(4, 80, 156, 0.09); transform: translateY(-1px); } @media (max-width: 767px) { .article-details blockquote { margin: 24px 0; padding: 18px 18px 18px 16px; border-right-width: 3px; border-radius: 10px; font-size: 13px; line-height: 2; } .article-details blockquote::before { right: 14px; top: -9px; width: 29px; height: 29px; border-radius: 7px; font-size: 25px; } } /* ========================= افکت خاص برای هدینگ با کلاس ویژه ========================= */ .heading-special { display: inline-block; background: linear-gradient(90deg, #04509c, #023866); color: #fff; padding: 10px 25px; border-radius: 50px; font-size: 24px; font-weight: bold; box-shadow: 0 5px 20px rgba(4, 80, 156, 0.3); transition: 0.3s ease-in-out; } .heading-special:hover { background: #fcc415; color: #04509c; transform: translateY(-3px); } .article-details { padding: 30px; border-radius: 10px; box-shadow: 2px 2px 20px 2px #ccc; } .article-details p, .article-details li { color: #484848; line-height: 32px; } .article-details ul { list-style: none; padding-right: 0; } .article-details ul li { position: relative; padding-right: 30px; margin-bottom: 12px; font-size: 16px; line-height: 1.9; } .article-details ul li::before { content: "\f00c"; /* آیکن تیک */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 0; top: 3px; color: #fcc415; background: #04509c; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; } /*============================== Related Articles ==============================*/ .related-article-list-container{ margin-top:70px; padding:45px; background:#f7f9fc; border-radius:25px; position:relative; overflow:hidden; } .related-article-list-container::before{ content:""; position:absolute; width:250px; height:250px; right:-80px; top:-80px; border-radius:50%; background:rgba(4,80,156,.05); } .related-article-title{ text-align:center; font-size:34px; font-weight:900; color:#04509c; margin-bottom:45px; position:relative; } .related-article-title::after{ content:""; width:80px; height:4px; background:#fcc415; display:block; margin:15px auto 0; border-radius:20px; } .related-article-list .row{ row-gap:30px; } .related-article-list .article{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08); transition:.35s; height:100%; display:flex; flex-direction:column; } .related-article-list .article:hover{ transform:translateY(-8px); box-shadow:0 20px 45px rgba(4,80,156,.18); } .related-article-list figure{ overflow:hidden; margin:0; aspect-ratio:1/1; } .related-article-list figure img{ width:100%; height:100%; object-fit:cover; transition:.6s; } .related-article-list .article:hover img{ transform:scale(1.08); } .related-article-list .article-header{ padding:22px 22px 10px; } .related-article-list .article-header h4{ margin:0; line-height:32px; min-height:64px; } .related-article-list .article-header a{ color:#1d1d1d; font-size:22px; font-weight:800; text-decoration:none; transition:.3s; font-family: Farhang; } .related-article-list .article:hover .article-header a{ color:#04509c; } .related-article-list .article-info{ margin-top:auto; display:flex; align-items:center; padding:18px 22px; border-top:1px solid #ececec; background: #e7e7e7; font-size: 14px; border-radius: 20px; } .related-article-list .createdby{ color:#04509c; font-weight:700; } .related-article-list .published{ color:#666; } .related-article-list .published time{ color:#666; } div#jlexcomment ul li::before { display: none; } ul.modern-list { list-style: none; padding-right: 0; } ul.modern-list li { position: relative; padding: 10px 15px 10px 20px; margin-bottom: 10px; background: #f9f9f9; border-radius: 8px; transition: 0.3s; } ul.modern-list li::before { content: ""; position: absolute; right: 0; top: 0; width: 5px; height: 100%; background: linear-gradient(#fcc415, #04509c); border-radius: 8px 0 0 8px; } ul.modern-list li:hover { transform: translateX(-5px); background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.08); } ul.arrow-list { list-style: none; padding-right: 0; } ul.arrow-list li { position: relative; padding-right: 25px; margin-bottom: 12px; transition: 0.3s; } ul.arrow-list li::before { content: "\f104"; /* فلش */ font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 0; color: #fcc415; transition: 0.3s; } ul.arrow-list li:hover { color: #04509c; padding-right: 35px; } ul.arrow-list li:hover::before { color: #04509c; } .raw-appliancess { box-shadow: 2px 2px 20px 2px #04509c73; } /*blog edited-top tittle section*/ .tittle-snowa-service { padding: 20px; border-radius: 30px; } #sppb-addon-5e5ef8d5-4e97-4b18-a309-87e79ecec1ac { background-color: #fcc415; border-radius: 15px 15px 50px 15px; clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 0% 100%); } div#sppb-addon-73ee4337-24da-4d7e-884d-6394f8b833ff { width: fit-content; } /*.form-snowa-service .formControlLabel { display: none; }*/ .form-snowa-service .col-sm-9 { width: 100% !important; padding: 0 25px; } /* ========================= ستون فرم خدمات ========================= */ .col-service-form { position: relative; background: #ffffff; padding: 40px 35px; border-radius: 20px; box-shadow: 0 20px 60px rgba(4, 80, 156, 0.15); overflow: hidden; z-index: 1; } /* افکت حبابی پشت فرم */ .col-service-form::before , .col-call-center-snowa::before{ content: ""; position: absolute; width: 250px; height: 250px; background: radial-gradient(circle, rgba(252,196,21,0.25) 0%, rgba(252,196,21,0) 70%); top: -80px; right: -80px; border-radius: 50%; z-index: 0; } .col-service-form::after { content: ""; position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(4,80,156,0.15) 0%, rgba(4,80,156,0) 70%); bottom: -60px; left: -60px; border-radius: 50%; z-index: 0; } /* محتوا بالاتر از حباب */ .col-service-form * { position: relative; z-index: 2; } .rsformmodule-controlclass { padding: 20px; } .col-service-form .sppb-addon-title { font-size: 26px; font-weight: 900; color: #04509c !important; margin-bottom: 10px; padding: 0 20px; } .hedingbefore .sppb-addon-title:before { content: ""; position: absolute; right: 0; top: 0px; width: 10px; height: 40px; background: linear-gradient(180deg, #fcc415, #04509c); border-radius: 10px; } .form-snowa-service .form-control, .form-snowa-service .form-select { border-radius: 12px !important; border: 2px solid #eee !important; padding: 12px 40px !important; font-size: 14px; transition: 0.3s; height: 50px; } .form-snowa-service .form-select{ background-position: left .75rem center !important; } .form-snowa-service .form-control:focus, .form-snowa-service .form-select:focus { border-color: #fcc415; box-shadow: 0 0 0 3px rgba(252,196,21,0.2); } /* لیبل ها */ .formControlLabel { font-weight: 600; color: #04509c; } #Submit { background: linear-gradient(45deg, #ffd03f, #fcc415); border-bottom: 5px solid #b58800; padding: 10px; font-size: 16px; font-weight: bold; border-radius: 10px; transition: 0.3s; box-shadow: 0 8px 25px rgba(4, 80, 156, 0.3); width: 100%; border-top: 0; border-right: 0; border-left: 0; color: #04509c; } #Submit:hover { background: #04509c; color: #fcc415; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(252,196,21,0.4); } .rsform-block { margin-bottom: 18px; } .send-tech-snowa .fas.fa-stopwatch-20, .send-tech-snowa .fa-shield-heart, .send-tech-snowa span { font-size: 30px; vertical-align: middle; } /* ========================= کل بخش تماس سریع ========================= */ .fast-contact-section { text-align: center; position: relative; overflow: hidden; border-radius: 20px; box-sizing: border-box; } section.fast-contact-section .container { padding: 0 !important; } /* layout اصلی */ .contact-cards { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; } /* کارت‌ها */ .contact-card { flex: 1 1 calc(50% - 12px); display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #d1d1d1; transition: all 0.3s ease; box-sizing: border-box; min-width: 260px; background: rgba(255,255,255,0.02); border-radius: 12px; overflow: hidden; } /* hover شیک */ .contact-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(4,80,156,0.15); } /* آیکن */ .contact-card i { font-size: 24px; color: #fcc415; margin-left: 12px; flex-shrink: 0; } /* متن */ .contact-info { text-align: right; flex: 1; min-width: 0; } /* شماره */ .contact-number { display: block; font-weight: bold; color: #fff !important; text-decoration: none; transition: 0.3s; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* hover */ .contact-number:hover { color: #fcc415; } /* فونت‌ها اصلاح شده */ .font30{ font-size: 28px; /* اصلاح شد */ } .font40{ font-size: 32px; } .font16{ font-size: 15px; } /* موبایل */ @media (max-width: 768px) { .contact-card { flex: 1 1 100%; } } div#appliancess-omid .sppb-row-column { padding: 0 5px !important; } /*details[open] { background: var(--secondary-color); color: #fff; } details { background: var(--primary-color); color: #000; padding: 25px; margin: 10px 0; border-radius: 10px; } details p { color: #fff !important; }*/ /* FAQ Style - Snowa Service */ details { background: #fff; border: 1px solid rgba(4, 80, 156, 0.15); border-radius: 14px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.04); transition: all 0.3s ease; } details:hover { border-color: var(--secondary-color); box-shadow: 0 8px 20px rgba(4, 80, 156, 0.12); } details summary { position: relative; padding: 18px 55px 18px 20px; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--secondary-color); list-style: none; transition: 0.3s; } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--primary-color); color: var(--secondary-color); font-size: 20px; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: all .3s ease; } details[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); } details[open] summary { background: rgba(4, 80, 156, 0.04); } details p { margin: 0; padding: 0 20px 20px; line-height: 1.9; color: #555; font-size: 15px; border-top: 1px solid rgba(0,0,0,0.05); } /* Mobile */ @media (max-width:768px){ details summary{ font-size:15px; padding:16px 50px 16px 16px; } details p{ font-size:14px; padding:0 16px 16px; } } ul.tags li:before{ display:none; } .snowa_blog_img { text-align: center; margin: 0 auto; } .article-details img { margin: 20px; } .btn-consult { display: inline-block; background: linear-gradient(45deg, #ffd03f, #fcc415); border-bottom: 5px solid #b58800; padding: 10px 15px; font-size: 18px; margin: 10px 0; font-weight: bold; border-radius: 10px; transition: 0.3s; box-shadow: 0 8px 25px rgba(4, 80, 156, 0.3); width: 100%; border-top: 0; border-right: 0; border-left: 0; color: #04509c; } .btn-consult:hover { background: #fcc415; color: #04509c; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(252,196,21,0.4); } @media (max-width: 768px) { .contact-cards { flex-direction: column; gap: 0px; align-items: center; } div#sp-menu { display: none; } div#sp-logo { width: 100%; } .font30 { font-size: 30px; } .btn-consult { font-size: 16px; } } section.fast-contact-section i.fas.fa-headset { font-size: 30px; vertical-align: middle; padding: 0 10px; } /* =============================== Snowa Service Article Boxes ================================ */ .snowa-trust-box, .snowa-final-trust-box, .snowa-customer-trust-box, .snowa-service-quality-box, .snowa-local-box, .snowa-area-experience-box, .snowa-washing-box, .snowa-dishwasher-box, .snowa-fridge-box, .snowa-tv-box, .snowa-small-device-box, .snowa-expert-box, .snowa-customer-guide-box, .snowa-maintenance-box, .snowa-process-box, .snowa-benefits-box, .snowa-why-us-box, .snowa-repair-choice-box { background: #ffffff; border-radius: 24px; padding: 30px; margin: 35px 0; border: 1px solid rgba(4,80,156,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.06); position: relative; overflow: hidden; transition: all .3s ease; } .call-action-icon:before { content: "\E9A8"; font-family: 'icons'; font-size: 50px; font-weight: 800; } /* خط رنگی کنار باکس */ .snowa-trust-box::before, .snowa-final-trust-box::before, .snowa-customer-trust-box::before, .snowa-service-quality-box::before, .snowa-local-box::before, .snowa-area-experience-box::before, .snowa-washing-box::before, .snowa-dishwasher-box::before, .snowa-fridge-box::before, .snowa-tv-box::before, .snowa-small-device-box::before, .snowa-expert-box::before, .snowa-customer-guide-box::before, .snowa-maintenance-box::before, .snowa-process-box::before, .snowa-benefits-box::before, .snowa-repair-choice-box::before { content:""; position:absolute; right:0; top:0; width:5px; height:100%; background:#04509c; } .snowa-trust-box h2, .snowa-trust-box h3, .snowa-local-box h2, .snowa-process-box h2, .snowa-maintenance-box h2, .snowa-area-experience-box h2, .snowa-expert-box h2 { color:#04509c; font-weight:900; margin-bottom:20px; }.snowa-expert-tip-box { background: linear-gradient( 135deg, #fffdf4, #fff8d8 ); border-radius:20px; padding:22px 25px; margin:25px 0; border-right:5px solid #fcc415; box-shadow: 0 8px 25px rgba(252,196,21,.15); } .snowa-expert-tip-box strong{ color:#04509c; font-weight:900; }.snowa-process-box{ background: linear-gradient( 135deg, #ffffff, #f5f9ff ); } .snowa-process-box h3{ background:#04509c; color:white; padding:12px 18px; border-radius:12px; display:inline-block; font-size:18px; }.snowa-faq-box{ background:#f8fafc; padding:25px; border-radius:24px; } .snowa-faq-box details{ background:#fff; margin-bottom:12px; border-radius:15px; padding:18px; box-shadow: 0 5px 20px rgba(0,0,0,.05); } .snowa-faq-box summary{ cursor:pointer; font-weight:800; color:#04509c; } .snowa-faq-box details[open]{ border-right:4px solid #fcc415; } @media(max-width:768px){ .snowa-trust-box, .snowa-final-trust-box, .snowa-customer-trust-box, .snowa-service-quality-box, .snowa-local-box, .snowa-area-experience-box, .snowa-washing-box, .snowa-dishwasher-box, .snowa-fridge-box, .snowa-tv-box, .snowa-small-device-box, .snowa-expert-box, .snowa-customer-guide-box, .snowa-maintenance-box, .snowa-process-box, .snowa-benefits-box, .snowa-why-us-box, .snowa-repair-choice-box{ padding:20px; border-radius:18px; } } /* ================================= Snowa CTA Box ================================= */ .snowa-call-action-box{ margin:45px 0; padding:35px; border-radius:28px; background: linear-gradient( 135deg, #04509c, #073b72 ); position:relative; overflow:hidden; box-shadow: 0 15px 40px rgba(4,80,156,.25); } /* افکت دایره پشت */ .snowa-call-action-box::before{ content:""; position:absolute; width:280px; height:280px; background: rgba(255,255,255,.08); border-radius:50%; left:-100px; top:-120px; } .call-action-content{ position:relative; z-index:2; display:flex; align-items:center; gap:25px; } /* آیکون */ .call-action-icon{ width:75px; height:75px; min-width:75px; background:#fcc415; color:#04509c; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; } /* متن */ .call-action-text h3{ color:#fff; font-size:26px; font-weight:900; margin-bottom:12px; } .call-action-text p{ color:#fff; opacity:.95; line-height:2; margin:0; } /* دکمه */ .call-action-button{ margin-right:auto; white-space:nowrap; } .call-action-button a{ display:flex; align-items:center; gap:10px; background:#fcc415; color:#04509c; padding:15px 25px; border-radius:50px; font-weight:900; text-decoration:none; transition:.3s ease; } .call-action-button a:hover{ transform:translateY(-3px); box-shadow: 0 10px 25px rgba(252,196,21,.35); } /* موبایل */ @media(max-width:768px){ .call-action-content{ flex-direction:column; text-align:center; } .call-action-button{ margin:0; } .call-action-button a{ justify-content:center; } .call-action-text h3{ font-size:21px; } .snowa-call-action-box{ padding:25px 18px; } } .com-content-category-blog__item.blog-item { position: relative; width: 100%; margin: 0 0 28px; padding: 0; direction: rtl; } .com-content-category-blog__item.blog-item .article-body { position: relative; width: 100%; padding: 28px 32px 25px; background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(248,251,255,.96) ); border: 1px solid rgba(4,80,156,.10); border-radius: 24px; box-shadow: 0 12px 35px rgba(4,80,156,.07), 0 3px 10px rgba(0,0,0,.025); overflow: hidden; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease; } .com-content-category-blog__item.blog-item .article-body::before { content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 0; background: linear-gradient( 180deg, #fcc415, #f5a900 ); border-radius: 0 24px 24px 0; transition: height .5s cubic-bezier(.22,1,.36,1); } .com-content-category-blog__item.blog-item .article-body::after { content: ""; position: absolute; width: 280px; height: 280px; left: -180px; bottom: -180px; border-radius: 50%; background: radial-gradient( circle, rgba(252,196,21,.10), transparent 70% ); filter: blur(15px); pointer-events: none; transition: .6s ease; } /* ========================================================= SNOWA SERVICE ARTICLE BLOG CARDS SINGLE COLUMN + IMAGE ========================================================= */ .com-content-category-blog__item.blog-item { position: relative; width: 100%; margin: 0 0 30px; padding: 0; direction: rtl; } /* ========================================================= ARTICLE CARD ========================================================= */ .com-content-category-blog__item.blog-item { background: linear-gradient( 145deg, #ffffff 0%, #fafdff 100% ); border: 1px solid rgba(4,80,156,.10); border-radius: 26px; box-shadow: 0 15px 40px rgba(4,80,156,.07), 0 4px 12px rgba(0,0,0,.025); overflow: hidden; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease; } /* نور طلایی سمت راست */ .com-content-category-blog__item.blog-item::before { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 0; background: linear-gradient( 180deg, #fcc415, #ffdb55, #f2a900 ); border-radius: 0 26px 26px 0; z-index: 10; transition: height .55s cubic-bezier(.22,1,.36,1); } /* نور محو داخل کارت */ .com-content-category-blog__item.blog-item::after { content: ""; position: absolute; width: 320px; height: 320px; left: -220px; bottom: -220px; border-radius: 50%; background: radial-gradient( circle, rgba(252,196,21,.10), transparent 70% ); filter: blur(25px); pointer-events: none; transition: transform .7s ease; } .com-content-category-blog__item.blog-item:hover { transform: translateY(-6px); border-color: rgba(4,80,156,.18); box-shadow: 0 28px 65px rgba(4,80,156,.13), 0 8px 20px rgba(0,0,0,.04); } .com-content-category-blog__item.blog-item:hover::before { height: 100%; } .com-content-category-blog__item.blog-item:hover::after { transform: scale(1.35); } /* ========================================================= IMAGE ========================================================= */ .com-content-category-blog__item.blog-item .article-intro-image.snowa_img { float: none !important; position: relative; margin: 22px 22px 22px 0; float: right !important; overflow: hidden; border-radius: 20px; background: #eef5fb; z-index: 2; } /* لینک تصویر */ .com-content-category-blog__item.blog-item .article-intro-image.snowa_img a { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } /* خود عکس */ .com-content-category-blog__item.blog-item .article-intro-image.snowa_img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease; } /* لایه نور روی تصویر */ .com-content-category-blog__item.blog-item .article-intro-image.snowa_img a::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(4,80,156,.04), transparent 50%, rgba(252,196,21,.13) ); opacity: .65; transition: opacity .5s ease; } /* Hover تصویر */ .com-content-category-blog__item.blog-item:hover .article-intro-image.snowa_img img { transform: scale(1.07); } .com-content-category-blog__item.blog-item:hover .article-intro-image.snowa_img a::after { opacity: 1; } /* خط نور روی عکس */ .com-content-category-blog__item.blog-item .article-intro-image.snowa_img a::before { content: ""; position: absolute; z-index: 3; top: -100%; right: -40%; width: 35%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.38), transparent ); transform: rotate(25deg); transition: none; } .com-content-category-blog__item.blog-item:hover .article-intro-image.snowa_img a::before { animation: snowaBlogImageShine 1s ease; } @keyframes snowaBlogImageShine { 100% { right: 140%; } } /* ========================================================= ARTICLE BODY ========================================================= */ .com-content-category-blog__item.blog-item .article-body { position: relative; z-index: 2; min-height: 250px; padding: 26px 25px 25px 30px; overflow: hidden; } /* ========================================================= HEADER ========================================================= */ .com-content-category-blog__item.blog-item .article-header { position: relative; margin: 0 0 13px; padding-right: 17px; } /* نقطه طلایی */ .com-content-category-blog__item.blog-item .article-header::before { content: ""; position: absolute; right: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: #fcc415; box-shadow: 0 0 0 5px rgba(252,196,21,.11), 0 0 18px rgba(252,196,21,.30); } /* عنوان */ .com-content-category-blog__item.blog-item .article-header h2 { margin: 0; font-family: iranyekanxfanummedium, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.85; } .com-content-category-blog__item.blog-item .article-header h2 a { color: #04509c; text-decoration: none; transition: color .3s ease; } .com-content-category-blog__item.blog-item:hover .article-header h2 a { color: #003f7d; } /* ========================================================= ARTICLE INFO ========================================================= */ .com-content-category-blog__item.blog-item .article-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 17px; margin: 0 0 12px; padding: 9px 0 12px; border-bottom: 1px solid rgba(4,80,156,.08); color: #758292; font-family: tanha, sans-serif; font-size: 12px; } .com-content-category-blog__item.blog-item .article-info > span { display: inline-flex; align-items: center; gap: 6px; } .com-content-category-blog__item.blog-item .article-info > span::before { font-family: "Font Awesome 6 Free"; font-weight: 900; color: #fcc415; font-size: 11px; } .com-content-category-blog__item.blog-item .article-info .createdby::before { content: "\f2bd"; } .com-content-category-blog__item.blog-item .article-info .category-name::before { content: "\f07b"; } .com-content-category-blog__item.blog-item .article-info .published::before { content: "\f073"; } .com-content-category-blog__item.blog-item .article-info a { color: #647386; text-decoration: none; transition: color .3s ease; } .com-content-category-blog__item.blog-item .article-info a:hover { color: #04509c; } /* ========================================================= TAGS ========================================================= */ .com-content-category-blog__item.blog-item ul.tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 13px !important; padding: 0; list-style: none; } .com-content-category-blog__item.blog-item ul.tags li { margin: 0 !important; } .com-content-category-blog__item.blog-item ul.tags li a { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 30px; background: rgba(4,80,156,.055); border: 1px solid rgba(4,80,156,.08); color: #4e6d8c; font-family: tanha, sans-serif; font-size: 11px; text-decoration: none; transition: .35s ease; } .com-content-category-blog__item.blog-item ul.tags li a::before { content: "#"; margin-left: 4px; color: #fcc415; font-weight: 700; } .com-content-category-blog__item.blog-item ul.tags li a:hover { background: #04509c; border-color: #04509c; color: #fff; transform: translateY(-2px); } /* ========================================================= COMMENT ========================================================= */ .com-content-category-blog__item.blog-item .jcm-count-cm { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 9px; color: #8290a0; font-family: tanha, sans-serif; font-size: 11px; text-decoration: none; transition: color .3s ease; } .com-content-category-blog__item.blog-item .jcm-count-cm:hover { color: #04509c; } .com-content-category-blog__item.blog-item .jcm-count-cm img { width: 16px; height: 16px; opacity: .7; } /* ========================================================= INTRO TEXT ========================================================= */ .com-content-category-blog__item.blog-item .article-introtext { position: relative; z-index: 3; } .com-content-category-blog__item.blog-item .article-introtext > p { margin: 0 0 15px; color: #526273; font-family: tanha, sans-serif; font-size: 13px; line-height: 2.05; } /* ========================================================= READ MORE ========================================================= */ .com-content-category-blog__item.blog-item .readmore { margin: 4px 0 0; } .com-content-category-blog__item.blog-item .readmore a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 30px; background: linear-gradient( 135deg, #04509c, #0569c4 ); color: #fff; font-family: iranyekanxfanummedium, sans-serif; font-size: 12px; text-decoration: none; overflow: hidden; box-shadow: 0 8px 22px rgba(4,80,156,.18); transition: transform .35s ease, box-shadow .35s ease; } .com-content-category-blog__item.blog-item .readmore a::after { content: "←"; color: #fcc415; font-size: 16px; transition: transform .3s ease; } .com-content-category-blog__item.blog-item .readmore a:hover { transform: translateY(-3px); box-shadow: 0 13px 30px rgba(4,80,156,.25); } .com-content-category-blog__item.blog-item .readmore a:hover::after { transform: translateX(-5px); } /* ========================================================= READ MORE SHINE ========================================================= */ .com-content-category-blog__item.blog-item .readmore a::before { content: ""; position: absolute; top: -80%; left: -100%; width: 40%; height: 260%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.4), transparent ); transform: rotate(25deg); } .com-content-category-blog__item.blog-item .readmore a:hover::before { animation: snowaArticleButtonShine .8s ease; } @keyframes snowaArticleButtonShine { 100% { left: 160%; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 767.98px) { .com-content-category-blog__item.blog-item .article-intro-image.snowa_img { width: 220px; height: 220px; margin: 18px 18px 18px 0; } .com-content-category-blog__item.blog-item .article-body { min-height: 220px; padding: 21px 20px 20px 20px; } .com-content-category-blog__item.blog-item .article-header h2 { font-size: 18px; } .com-content-category-blog__item.blog-item .article-introtext > p { font-size: 12.5px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575.98px) { .com-content-category-blog__item.blog-item { border-radius: 20px; margin-bottom: 20px; } .com-content-category-blog__item.blog-item .article-intro-image.snowa_img { float: none !important; width: calc(100% - 28px); height: 210px; margin: 14px 14px 0; border-radius: 17px; } .com-content-category-blog__item.blog-item .article-body { min-height: auto; padding: 20px 18px 20px; } .com-content-category-blog__item.blog-item .article-header { padding-right: 15px; } .com-content-category-blog__item.blog-item .article-header h2 { font-size: 16px; line-height: 1.85; } .com-content-category-blog__item.blog-item .article-info { align-items: flex-start; flex-direction: column; gap: 5px; } .com-content-category-blog__item.blog-item .article-introtext > p { font-size: 13px; line-height: 2.1; } .com-content-category-blog__item.blog-item .readmore a { width: 100%; justify-content: center; } } /*=============================== Premium Floating Bubble ================================*/ /*#floatingbtn{ position:fixed; right:25px; bottom:25px; z-index:999999; } /* کارت اصلی */ /*#floatingbtn .jfab_main_btn{ position:relative; width:70px; height:70px; border-radius:35px; background:linear-gradient(135deg,#0C5ADB,#23A6FF); overflow:visible; border:none; cursor:pointer; transition:.4s; box-shadow: 0 12px 35px rgba(0,91,255,.25); animation: pulseRing 3s infinite, floatBubble 4s ease-in-out infinite; } /* متن داخل دکمه */ /*#floatingbtn .jfab_main_btn::before{ content:"تماس فوری"; position:absolute; right:82px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.92); backdrop-filter:blur(8px); padding:12px 18px; border-radius:30px; white-space:nowrap; font-size:14px; font-weight:700; color:#0C5ADB; opacity:0; pointer-events:none; transition:.35s; box-shadow: 0 10px 30px rgba(0,0,0,.15); } /* Badge */ /*#floatingbtn .jfab_main_btn::after{ content:"24H"; position:absolute; top:-4px; right:-2px; width:26px; height:26px; border-radius:50%; background:#ff3b30; color:#fff; font-size:11px; font-weight:bold; display:flex; align-items:center; justify-content:center; border:2px solid #fff; animation:badgeBlink 2s infinite; } /* Hover */ /*#floatingbtn:hover .jfab_main_btn{ width:72px; border-radius:40px; transform:scale(1.08); } #floatingbtn:hover .jfab_main_btn::before{ opacity:1; right:88px; } /* آیکون */ /*#floatingbtn .jfab_main_btn span{ font-size:30px; transition:.4s; } #floatingbtn:hover .jfab_main_btn span{ transform:rotate(20deg); } /* زیر دکمه ها */ /*#floatingbtn .sub_fab_btn{ transition:.3s; box-shadow:0 8px 20px rgba(0,0,0,.18); } #floatingbtn .sub_fab_btn:hover{ transform:scale(1.1); } @keyframes floatBubble{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } @keyframes pulseRing{ 0%{ box-shadow: 0 0 0 0 rgba(12,90,219,.45); } 70%{ box-shadow: 0 0 0 22px rgba(12,90,219,0); } 100%{ box-shadow: 0 0 0 0 rgba(12,90,219,0); } } @keyframes badgeBlink{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.15); opacity:.85; } }*/ h1.heading_for_module_display { position: relative; display: inline-block; padding: 14px 26px; border-radius: 28px; text-align: center; color: #0b3a8f; font-weight: 700; letter-spacing: 0.5px; background: rgba(12, 90, 219, 0.12); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.4s ease; z-index: 1; text-shadow: 3px 3px 10px #00dcff; } /* ✨ Glow Layer */ /*h1.heading_for_module_display::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0,140,255,0.25), transparent 60%); animation: floatGlow 6s linear infinite; z-index: 0; }*/ /* 🌊 Moving Shine Line */ /*h1.heading_for_module_display::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.6), transparent ); transform: skewX(-20deg); animation: shineMove 4s infinite; }*/ /* Hover effect */ h1.heading_for_module_display:hover { transform: translateY(-3px) scale(1.02); background: rgba(12, 90, 219, 0.22); color: #062f70; box-shadow: 0 15px 40px rgba(0, 90, 255, 0.25); } /* Hover glow intensify */ h1.heading_for_module_display:hover::before { animation-duration: 2.5s; filter: blur(6px); } /* Animations */ @keyframes floatGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } @keyframes shineMove { 0% { left: -100%; } 100% { left: 200%; } } /*end edited by omid*/ ul, li { list-style: none; padding: 0; margin: 0; } mark { color: var(--secondary-color); background: transparent; text-decoration: underline; } header:after, section:after, footer:after { display: block; clear: both; content: ""; } /*======= Input Styles =======*/ input, select, textarea, .nice-select, .form-control { width: 100%; height: auto; border-radius: 5px; padding: 15px 30px; background-color: #fff; border: 1px solid var(--border-color); } .nice-select { font-size: 18px; line-height: 1.3; } .nice-select:after { height: 8px; width: 8px; right: 25px; border-color: var(--heading-color); } .nice-select .current { font-weight: 500; color: var(--heading-color); } .nice-select .list { width: 100%; border-radius: 0; } textarea { display: inherit; padding-top: 20px; } label { cursor: pointer; font-weight: 500; margin-bottom: 5px; color: var(--base-color); } .form-group { position: relative; margin-bottom: 20px; } input:focus, button:focus, .form-control:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: #cfdbf1; } input[type=search]::-ms-clear { display: none; width: 0; height: 0; } input[type=search]::-ms-reveal { display: none; width: 0; height: 0; } input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { display: none; } input[type=checkbox], input[type=radio] { height: auto; width: auto; } /*******************************************************/ /****************** ## Common Classes *****************/ /*******************************************************/ .page-wrapper { position: relative; z-index: 9; width: 100%; margin: 0 auto; overflow: hidden; min-width: 300px; } @media only screen and (min-width: 1200px) { .container { max-width: 1420px; padding-left: 15px; padding-right: 15px; } .container.container-1440 { max-width: 1470px; } } @media only screen and (min-width: 576px) { .container-fluid { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 1400px) { .container-fluid { padding-left: 70px; padding-right: 70px; } } @media only screen and (max-width: 375px) { .col-small { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .row { --bs-gutter-x: 30px; } .no-gap { --bs-gutter-x: 0; } @media only screen and (min-width: 1400px) { .gap-10 { --bs-gutter-x: 10px; } } @media only screen and (min-width: 1400px) { .gap-20 { --bs-gutter-x: 20px; } } @media only screen and (min-width: 1400px) { .gap-30 { --bs-gutter-x: 30px; } } @media only screen and (min-width: 1400px) { .gap-40 { --bs-gutter-x: 40px; } } @media only screen and (min-width: 1400px) { .gap-50 { --bs-gutter-x: 50px; } } @media only screen and (min-width: 1400px) { .gap-60 { --bs-gutter-x: 60px; } } @media only screen and (min-width: 1400px) { .gap-70 { --bs-gutter-x: 70px; } } @media only screen and (min-width: 1400px) { .gap-80 { --bs-gutter-x: 80px; } } @media only screen and (min-width: 1400px) { .gap-90 { --bs-gutter-x: 90px; } } @media only screen and (min-width: 1400px) { .gap-100 { --bs-gutter-x: 100px; } } @media only screen and (min-width: 1200px) { .row-cols-xl-7>* { width: 14.2857%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } /** Section Title style **/ .section-title { margin-top: -7px; position: relative; } .section-title .sub-title { font-size: 20px; font-weight: 500; display: inline-block; color: var(--secondary-color); } @media only screen and (max-width: 767px) { .section-title h2 { font-size: 35px; } } @media only screen and (max-width: 479px) { .section-title h2 { font-size: 30px; line-height: 1.3; } } @media only screen and (max-width: 479px) { .section-title h3 { font-size: 25px; } } .section-title .bg-text { font-size: 16vw; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; opacity: 0.05; top: 65%; } .section-title.text-center .bg-text { color: white; } /** Button style **/ .theme-btn, a.theme-btn { z-index: 1; cursor: pointer; overflow: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 700; text-align: center; padding: 15px 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--heading-color); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-transform: capitalize; background: var(--secondary-color); } .theme-btn i, a.theme-btn i { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-right: 10px; } .theme-btn:after, a.theme-btn:after { content: ''; width: calc(100% + 5px); height: calc(100% + 5px); z-index: -1; left: 50%; top: 50%; -webkit-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s; position: absolute; background: var(--primary-color); -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .theme-btn:hover, a.theme-btn:hover { color: white; } .theme-btn:hover:after, a.theme-btn:hover:after { border-radius: 50%; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .theme-btn:hover i, a.theme-btn:hover i { margin-left: -3px; margin-right: 13px; } .blog-repair-col4 .sppb-addon-article-layout { background: #fff; margin: 0 10px; } @media (min-width: 1200px) { .blog-repair-col4 .sppb-col-lg-4{ flex: 0 0 30% !important; max-width: 30% !important; } } .theme-btn.style-two, a.theme-btn.style-two { color: white; background: var(--primary-color); } .theme-btn.style-two:after, a.theme-btn.style-two:after { background: var(--secondary-color); } .theme-btn.style-two:hover, a.theme-btn.style-two:hover { color: var(--heading-color); } .theme-btn.style-three, a.theme-btn.style-three { color: white; background: var(--secondary-color); } .theme-btn.style-three:after, a.theme-btn.style-three:after { background: var(--heading-color); } .theme-btn.style-four, a.theme-btn.style-four { color: var(--heading-color); background: transparent; border: 1px solid var(--border-color); } .theme-btn.style-four:not(:hover):after, a.theme-btn.style-four:not(:hover):after { background: transparent; } @media only screen and (max-width: 575px) { .theme-btn, a.theme-btn { padding: 15px 25px; } } .hotline .content a:hover { color: var(--secondary-color); } /* Details Btn */ .details-btn { font-size: 22px; width: 70px; height: 70px; background: white; line-height: 70px; border-radius: 50%; text-align: center; display: inline-block; color: var(--primary-color); } @media only screen and (max-width: 479px) { .details-btn { width: 45px; height: 45px; font-size: 16px; line-height: 45px; } } /* Read More */ .read-more { font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-decoration: underline; text-transform: capitalize; } .read-more i { float: right; font-weight: 900; margin-right: 7px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .read-more:hover { color: var(--secondary-color); text-decoration: underline; } .read-more:hover i { margin-left: 10px; } /* List style One */ .list-style-one li { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row-reverse; font-weight: 500; color: var(--heading-color); } .content p { direction: rtl; } .list-style-one li:not(:last-child) { margin-bottom: 8px; } .list-style-one li:before { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 20px; height: 20px; font-size: 11px; margin-top: 6px; margin-left: 12px; content: "\f00c"; font-weight: 600; line-height: 16px; border: 2px solid; text-align: center; margin-right: 12px; border-radius: 50%; color: var(--secondary-color); font-family: 'Font Awesome 6 Free'; } /* List style Two */ .list-style-two li:not(:last-child) { margin-bottom: 8px; } .list-style-two li a { position: relative; } .list-style-two li a:before { content: "\f100"; position: absolute; left: 0; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-family: "Font Awesome 6 Free"; font-weight: 900; } .list-style-two li a:hover { padding-left: 20px; text-decoration: underline; } .list-style-two li a:hover:before { opacity: 1; } /* List style Three */ .list-style-three li:not(:last-child) { margin-bottom: 4px; } .list-style-three li:before { content: "\f101"; margin-right: 10px; font-family: 'Font Awesome 6 Free'; font-weight: 900; } /** Social Link One **/ .social-style-one { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -10px; margin-right: -10px; } .social-style-one a { margin-left: 10px; margin-right: 10px; } /** Social Link Two **/ .social-style-two { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -5px; margin-right: -5px; } .social-style-two a { margin-left: 5px; margin-right: 5px; color: var(--secondary-color); width: 40px; height: 40px; background: var(--lighter-color); line-height: 40px; border-radius: 50%; text-align: center; } .social-style-two a:hover { color: white; background: var(--secondary-color); } /** Social Link Three **/ .social-style-three { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -7.5px; margin-right: -7.5px; } .social-style-three a { margin-left: 7.5px; margin-right: 7.5px; } .social-style-three a:hover { color: var(--secondary-color); } /** Tab Style One **/ .tab-style-one { border-bottom: 1px solid var(--border-color); } .tab-style-one .nav-link { font-size: 18px; border-radius: 0; padding-left: 0; padding-right: 0; margin-bottom: -1px; background: transparent; border-bottom: 2px solid transparent; } @media only screen and (min-width: 1200px) { .tab-style-one .nav-link { padding-bottom: 25px; } } @media only screen and (max-width: 575px) { .tab-style-one .nav-link { font-size: 16px; } } .tab-style-one .nav-link.active { color: var(--secondary-color); border-bottom-color: var(--secondary-color); } .tab-style-one .nav-item:not(:last-child) { margin-right: 40px; } @media only screen and (max-width: 767px) { .tab-style-one .nav-item:not(:last-child) { margin-right: 20px; } } /*** Preloader style ** */ .preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #FFFFFF; background-repeat: no-repeat; background-position: center center; } .preloader .custom-loader { width: 55px; aspect-ratio: 1; --c: conic-gradient(from -90deg, #30f0b6 90deg, #0000 0); background: var(--c), var(--c); background-size: 40% 40%; -webkit-animation: preloader 1s infinite alternate; animation: preloader 1s infinite alternate; } @-webkit-keyframes preloader { 0%, 10% { background-position: 0 0, 0 calc(100%/3); } 50% { background-position: 0 0, calc(100%/3) calc(100%/3); } 90%, 100% { background-position: 0 0, calc(100%/3) 0; } } @keyframes preloader { 0%, 10% { background-position: 0 0, 0 calc(100%/3); } 50% { background-position: 0 0, calc(100%/3) calc(100%/3); } 90%, 100% { background-position: 0 0, calc(100%/3) 0; } } /* Pagination */ .pagination { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: -5px; margin-right: -5px; } .pagination li { margin: 10px 5px 0; } .pagination li a, .pagination li .page-link { padding: 0; width: 45px; height: 45px; -webkit-box-shadow: none; box-shadow: none; font-weight: 600; line-height: 43px; text-align: center; border-radius: 50%; color: var(--heading-color); border: 2px solid var(--border-color); } .pagination li.disabled .page-link, .pagination li:last-child .page-link { border-radius: 50%; } .hero-gradient-circle img { max-width: 150px; } .pagination li.active .page-link, .pagination li:hover:not(.disabled) .page-link { color: white; background: var(--secondary-color); border-color: var(--secondary-color); } /* Rating */ .ratting { line-height: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .ratting i { margin: 3px; color: #f1b000; font-size: 14px; } /*** Slick Dots ***/ .slick-arrow { width: 60px; height: 60px; font-size: 22px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; border-radius: 50%; color: var(--heading-color); -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } .slick-arrow:focus, .slick-arrow:hover { background: var(--primary-color); } .slider-arrow .slick-arrow { border: 1px solid var(--border-color); } .slider-arrow .slick-arrow:not(:last-child) { margin-right: 5px; } .slider-arrow .slick-arrow:focus, .slider-arrow .slick-arrow:hover { color: white; background: var(--secondary-color); border-color: var(--secondary-color); } /*** Slick Dots ***/ .slick-dots { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .slick-dots li { position: relative; cursor: pointer; width: 10px; height: 10px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin: 10px 5px 0; border-radius: 50%; background: transparent; border: 2px solid var(--secondary-color); } .slick-dots li button { opacity: 0; } .slick-dots li.slick-active { background: var(--secondary-color); } /*** Scroll Top style ***/ .scroll-top { position: fixed; bottom: 25px; right: 0; width: 40px; height: 40px; z-index: 99; color: white; display: none; font-size: 14px; cursor: pointer; line-height: 40px; border-radius: 5px; background: var(--primary-color); -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; } /* Text White */ .text-white .service-two-item .icon i { color: var(--primary-color); } .text-white .service-two-item .content p { line-height: 1.9; color: #fff; } .text-white .hotline>i { background: white; } .text-white .hotline>i { border-color: white; } /* Wave Shapes */ .wave-shapes { position: absolute; z-index: -1; top: 0; left: -100px; width: calc(100% + 100px); height: 100%; } .wave-shapes .shape { position: absolute; bottom: 0; left: 0; width: 100%; -webkit-animation: leftRightOne 6s infinite; animation: leftRightOne 6s infinite; } .wave-shapes .shape.two { -webkit-animation-delay: 3s; animation-delay: 3s; } /*Project Filter*/ .filter-btns-one { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; } .filter-btns-one li { cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 500; padding: 4px 20px; border-radius: 5px; margin: 0 5px 10px; color: var(--heading-color); } @media only screen and (max-width: 375px) { .filter-btns-one li { padding-left: 15px; padding-right: 15px; } } .filter-btns-one li.current { background: white; color: var(--secondary-color); text-decoration: underline; -webkit-box-shadow: 10px 0 60px rgba(195, 195, 195, 0.5); box-shadow: 10px 0 60px rgba(195, 195, 195, 0.5); } .filter-btns-two { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-weight: 500; margin-left: -18px; margin-right: -18px; } @media only screen and (min-width: 768px) { .filter-btns-two { font-size: 18px; } } @media only screen and (max-width: 575px) { .filter-btns-two { margin-left: -8px; margin-right: -8px; } } .filter-btns-two li { cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin: 0 18px 10px; border-bottom: 3px solid transparent; } @media only screen and (max-width: 575px) { .filter-btns-two li { margin-left: 8px; margin-right: 8px; } } .filter-btns-two li.current { color: var(--primary-color); border-color: var(--primary-color); } /* Position */ .rel { position: relative; } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .overlay { z-index: 1; position: relative; } .overlay::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.75; background-color: var(--heading-color); } /* Backgruond Size */ .bgs-cover { background-size: cover; background-position: center; } /* Color + Background */ .bgc-black { background-color: #0f1425; } .bgc-gray { background-color: var(--heading-color); } .bgc-primary { background-color: var(--primary-color); } .bgc-secondary { background-color: var(--secondary-color); } .bgc-lighter { background-color: var(--lighter-color); } .color-secondary { color: var(--secondary-color); } .bgc-black-with-lighting { background: #1e1e22; } .bgc-black-with-lighting:after, .bgc-black-with-lighting:before { position: absolute; width: 450px; height: 450px; z-index: -1; content: ''; border-radius: 50%; background: var(--secondary-color); -webkit-animation: zoomInOut 5s infinite; animation: zoomInOut 5s infinite; } .bgc-black-with-lighting:after { right: -8%; top: -15%; -webkit-filter: blur(110px); filter: blur(110px); } .bgc-black-with-lighting:before { left: -10%; top: 20%; -webkit-filter: blur(350px); filter: blur(350px); -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } /* Border Radius */ .br-5 { border-radius: 5px; } .br-10 { border-radius: 10px; } .br-15 { border-radius: 15px; } .br-20 { border-radius: 20px; } .br-25 { border-radius: 25px; } .br-30 { border-radius: 30px; } /*******************************************************/ /******************* ## Repeat Style ******************/ /*******************************************************/ .heading, .section-title .bg-text, .tab-style-one .nav-link, h1, .h1, h2, .h2, .counter-text-wrap .count-text, .pricing-plan-item .price, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .slider-area-two .slider-bg-text, .why-choose-tab .nav .nav-link, .about-four-content .nav li .nav-link, .about-five-images .experience-years .years, .shop-shorter .filter-part span { font-weight: 600; color: var(--heading-color); font-family: Yekan-Bold; } .counter-text-wrap .count-text, .pricing-plan-item .price { line-height: 1.25; font-size: 42px; } .testimonial-item .image img, .blog-item .content { -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } /*******************************************************/ /************** ## Padding Margin Spacing *************/ /*******************************************************/ /* Padding Around */ .p-5 { padding: 5px !important; } .p-10 { padding: 10px; } .p-15 { padding: 15px; } .p-20 { padding: 20px; } .p-25 { padding: 25px; } .p-30 { padding: 30px; } .p-35 { padding: 35px; } .p-40 { padding: 40px; } .p-45 { padding: 45px; } .p-50 { padding: 50px; } .p-55 { padding: 55px; } .p-60 { padding: 60px; } .p-65 { padding: 65px; } .p-70 { padding: 70px; } .p-75 { padding: 75px; } .p-80 { padding: 80px; } .p-85 { padding: 85px; } .p-90 { padding: 90px; } .p-95 { padding: 95px; } .p-100 { padding: 100px; } .p-105 { padding: 105px; } .p-110 { padding: 110px; } .p-115 { padding: 115px; } .p-120 { padding: 120px; } .p-125 { padding: 125px; } .p-130 { padding: 130px; } .p-135 { padding: 135px; } .p-140 { padding: 140px; } .p-145 { padding: 145px; } .p-150 { padding: 150px; } .p-155 { padding: 155px; } .p-160 { padding: 160px; } .p-165 { padding: 165px; } .p-170 { padding: 170px; } .p-175 { padding: 175px; } .p-180 { padding: 180px; } .p-185 { padding: 185px; } .p-190 { padding: 190px; } .p-195 { padding: 195px; } .p-200 { padding: 200px; } .p-205 { padding: 205px; } .p-210 { padding: 210px; } .p-215 { padding: 215px; } .p-220 { padding: 220px; } .p-225 { padding: 225px; } .p-230 { padding: 230px; } .p-235 { padding: 235px; } .p-240 { padding: 240px; } .p-245 { padding: 245px; } .p-250 { padding: 250px; } /* Padding Top */ .pt-5, .py-5 { padding-top: 5px !important; } .pt-10, .py-10 { padding-top: 10px; } .pt-15, .py-15 { padding-top: 15px; } .pt-20, .py-20 { padding-top: 20px; } .pt-25, .py-25 { padding-top: 25px; } .pt-30, .py-30 { padding-top: 30px; } .pt-35, .py-35 { padding-top: 35px; } .pt-40, .py-40 { padding-top: 40px; } .pt-45, .py-45 { padding-top: 45px; } .pt-50, .py-50 { padding-top: 50px; } .pt-55, .py-55 { padding-top: 55px; } .pt-60, .py-60 { padding-top: 60px; } .pt-65, .py-65 { padding-top: 65px; } .pt-70, .py-70 { padding-top: 70px; } .pt-75, .py-75 { padding-top: 75px; } .pt-80, .py-80 { padding-top: 80px; } .pt-85, .py-85 { padding-top: 85px; } .pt-90, .py-90 { padding-top: 90px; } .pt-95, .py-95 { padding-top: 95px; } .pt-100, .py-100 { padding-top: 100px; } .pt-105, .py-105 { padding-top: 105px; } .pt-110, .py-110 { padding-top: 110px; } .pt-115, .py-115 { padding-top: 115px; } .pt-120, .py-120 { padding-top: 120px; } .pt-125, .py-125 { padding-top: 125px; } .pt-130, .py-130 { padding-top: 130px; } .pt-135, .py-135 { padding-top: 135px; } .pt-140, .py-140 { padding-top: 140px; } .pt-145, .py-145 { padding-top: 145px; } .pt-150, .py-150 { padding-top: 150px; } .pt-155, .py-155 { padding-top: 155px; } .pt-160, .py-160 { padding-top: 160px; } .pt-165, .py-165 { padding-top: 165px; } .pt-170, .py-170 { padding-top: 170px; } .pt-175, .py-175 { padding-top: 175px; } .pt-180, .py-180 { padding-top: 180px; } .pt-185, .py-185 { padding-top: 185px; } .pt-190, .py-190 { padding-top: 190px; } .pt-195, .py-195 { padding-top: 195px; } .pt-200, .py-200 { padding-top: 200px; } .pt-205, .py-205 { padding-top: 205px; } .pt-210, .py-210 { padding-top: 210px; } .pt-215, .py-215 { padding-top: 215px; } .pt-220, .py-220 { padding-top: 220px; } .pt-225, .py-225 { padding-top: 225px; } .pt-230, .py-230 { padding-top: 230px; } .pt-235, .py-235 { padding-top: 235px; } .pt-240, .py-240 { padding-top: 240px; } .pt-245, .py-245 { padding-top: 245px; } .pt-250, .py-250 { padding-top: 250px; } /* Padding Bottom */ .pb-5, .py-5 { padding-bottom: 5px !important; } .pb-10, .py-10 { padding-bottom: 10px; } .pb-15, .py-15 { padding-bottom: 15px; } .pb-20, .py-20 { padding-bottom: 20px; } .pb-25, .py-25 { padding-bottom: 25px; } .pb-30, .py-30 { padding-bottom: 30px; } .pb-35, .py-35 { padding-bottom: 35px; } .pb-40, .py-40 { padding-bottom: 40px; } .pb-45, .py-45 { padding-bottom: 45px; } .pb-50, .py-50 { padding-bottom: 50px; } .pb-55, .py-55 { padding-bottom: 55px; } .pb-60, .py-60 { padding-bottom: 60px; } .pb-65, .py-65 { padding-bottom: 65px; } .pb-70, .py-70 { padding-bottom: 70px; } .pb-75, .py-75 { padding-bottom: 75px; } .pb-80, .py-80 { padding-bottom: 80px; } .pb-85, .py-85 { padding-bottom: 85px; } .pb-90, .py-90 { padding-bottom: 90px; } .pb-95, .py-95 { padding-bottom: 95px; } .pb-100, .py-100 { padding-bottom: 100px; } .pb-105, .py-105 { padding-bottom: 105px; } .pb-110, .py-110 { padding-bottom: 110px; } .pb-115, .py-115 { padding-bottom: 115px; } .pb-120, .py-120 { padding-bottom: 120px; } .pb-125, .py-125 { padding-bottom: 125px; } .pb-130, .py-130 { padding-bottom: 130px; } .pb-135, .py-135 { padding-bottom: 135px; } .pb-140, .py-140 { padding-bottom: 140px; } .pb-145, .py-145 { padding-bottom: 145px; } .pb-150, .py-150 { padding-bottom: 150px; } .pb-155, .py-155 { padding-bottom: 155px; } .pb-160, .py-160 { padding-bottom: 160px; } .pb-165, .py-165 { padding-bottom: 165px; } .pb-170, .py-170 { padding-bottom: 170px; } .pb-175, .py-175 { padding-bottom: 175px; } .pb-180, .py-180 { padding-bottom: 180px; } .pb-185, .py-185 { padding-bottom: 185px; } .pb-190, .py-190 { padding-bottom: 190px; } .pb-195, .py-195 { padding-bottom: 195px; } .pb-200, .py-200 { padding-bottom: 200px; } .pb-205, .py-205 { padding-bottom: 205px; } .pb-210, .py-210 { padding-bottom: 210px; } .pb-215, .py-215 { padding-bottom: 215px; } .pb-220, .py-220 { padding-bottom: 220px; } .pb-225, .py-225 { padding-bottom: 225px; } .pb-230, .py-230 { padding-bottom: 230px; } .pb-235, .py-235 { padding-bottom: 235px; } .pb-240, .py-240 { padding-bottom: 240px; } .pb-245, .py-245 { padding-bottom: 245px; } .pb-250, .py-250 { padding-bottom: 250px; } /* Margin Around */ .m-5 { margin: 5px !important; } .m-10 { margin: 10px; } .m-15 { margin: 15px; } .m-20 { margin: 20px; } .m-25 { margin: 25px; } .m-30 { margin: 30px; } .m-35 { margin: 35px; } .m-40 { margin: 40px; } .m-45 { margin: 45px; } .m-50 { margin: 50px; } .m-55 { margin: 55px; } .m-60 { margin: 60px; } .m-65 { margin: 65px; } .m-70 { margin: 70px; } .m-75 { margin: 75px; } .m-80 { margin: 80px; } .m-85 { margin: 85px; } .m-90 { margin: 90px; } .m-95 { margin: 95px; } .m-100 { margin: 100px; } .m-105 { margin: 105px; } .m-110 { margin: 110px; } .m-115 { margin: 115px; } .m-120 { margin: 120px; } .m-125 { margin: 125px; } .m-130 { margin: 130px; } .m-135 { margin: 135px; } .m-140 { margin: 140px; } .m-145 { margin: 145px; } .m-150 { margin: 150px; } .m-155 { margin: 155px; } .m-160 { margin: 160px; } .m-165 { margin: 165px; } .m-170 { margin: 170px; } .m-175 { margin: 175px; } .m-180 { margin: 180px; } .m-185 { margin: 185px; } .m-190 { margin: 190px; } .m-195 { margin: 195px; } .m-200 { margin: 200px; } .m-205 { margin: 205px; } .m-210 { margin: 210px; } .m-215 { margin: 215px; } .m-220 { margin: 220px; } .m-225 { margin: 225px; } .m-230 { margin: 230px; } .m-235 { margin: 235px; } .m-240 { margin: 240px; } .m-245 { margin: 245px; } .m-250 { margin: 250px; } /* Margin Top */ .mt-5, .my-5 { margin-top: 5px !important; } .mt-10, .my-10 { margin-top: 10px; } .mt-15, .my-15 { margin-top: 15px; } .mt-20, .my-20 { margin-top: 20px; } .mt-25, .my-25 { margin-top: 25px; } .mt-30, .my-30 { margin-top: 30px; } .mt-35, .my-35 { margin-top: 35px; } .mt-40, .my-40 { margin-top: 40px; } .mt-45, .my-45 { margin-top: 45px; } .mt-50, .my-50 { margin-top: 50px; } .mt-55, .my-55 { margin-top: 55px; } .mt-60, .my-60 { margin-top: 60px; } .mt-65, .my-65 { margin-top: 65px; } .mt-70, .my-70 { margin-top: 70px; } .mt-75, .my-75 { margin-top: 75px; } .mt-80, .my-80 { margin-top: 80px; } .mt-85, .my-85 { margin-top: 85px; } .mt-90, .my-90 { margin-top: 90px; } .mt-95, .my-95 { margin-top: 95px; } .mt-100, .my-100 { margin-top: 100px; } .mt-105, .my-105 { margin-top: 105px; } .mt-110, .my-110 { margin-top: 110px; } .mt-115, .my-115 { margin-top: 115px; } .mt-120, .my-120 { margin-top: 120px; } .mt-125, .my-125 { margin-top: 125px; } .mt-130, .my-130 { margin-top: 130px; } .mt-135, .my-135 { margin-top: 135px; } .mt-140, .my-140 { margin-top: 140px; } .mt-145, .my-145 { margin-top: 145px; } .mt-150, .my-150 { margin-top: 150px; } .mt-155, .my-155 { margin-top: 155px; } .mt-160, .my-160 { margin-top: 160px; } .mt-165, .my-165 { margin-top: 165px; } .mt-170, .my-170 { margin-top: 170px; } .mt-175, .my-175 { margin-top: 175px; } .mt-180, .my-180 { margin-top: 180px; } .mt-185, .my-185 { margin-top: 185px; } .mt-190, .my-190 { margin-top: 190px; } .mt-195, .my-195 { margin-top: 195px; } .mt-200, .my-200 { margin-top: 200px; } .mt-205, .my-205 { margin-top: 205px; } .mt-210, .my-210 { margin-top: 210px; } .mt-215, .my-215 { margin-top: 215px; } .mt-220, .my-220 { margin-top: 220px; } .mt-225, .my-225 { margin-top: 225px; } .mt-230, .my-230 { margin-top: 230px; } .mt-235, .my-235 { margin-top: 235px; } .mt-240, .my-240 { margin-top: 240px; } .mt-245, .my-245 { margin-top: 245px; } .mt-250, .my-250 { margin-top: 250px; } /* Margin Bottom */ .mb-5, .my-5 { margin-bottom: 5px !important; } .mb-10, .my-10 { margin-bottom: 10px; } .mb-15, .my-15 { margin-bottom: 15px; } .mb-20, .my-20 { margin-bottom: 20px; } .mb-25, .my-25 { margin-bottom: 25px; } .mb-30, .my-30 { margin-bottom: 30px; } .mb-35, .my-35 { margin-bottom: 35px; } .mb-40, .my-40 { margin-bottom: 40px; } .mb-45, .my-45 { margin-bottom: 45px; } .mb-50, .my-50 { margin-bottom: 50px; } .mb-55, .my-55 { margin-bottom: 55px; } .mb-60, .my-60 { margin-bottom: 60px; } .mb-65, .my-65 { margin-bottom: 65px; } .mb-70, .my-70 { margin-bottom: 70px; } .mb-75, .my-75 { margin-bottom: 75px; } .mb-80, .my-80 { margin-bottom: 80px; } .mb-85, .my-85 { margin-bottom: 85px; } .mb-90, .my-90 { margin-bottom: 90px; } .mb-95, .my-95 { margin-bottom: 95px; } .mb-100, .my-100 { margin-bottom: 100px; } .mb-105, .my-105 { margin-bottom: 105px; } .mb-110, .my-110 { margin-bottom: 110px; } .mb-115, .my-115 { margin-bottom: 115px; } .mb-120, .my-120 { margin-bottom: 120px; } .mb-125, .my-125 { margin-bottom: 125px; } .mb-130, .my-130 { margin-bottom: 130px; } .mb-135, .my-135 { margin-bottom: 135px; } .mb-140, .my-140 { margin-bottom: 140px; } .mb-145, .my-145 { margin-bottom: 145px; } .mb-150, .my-150 { margin-bottom: 150px; } .mb-155, .my-155 { margin-bottom: 155px; } .mb-160, .my-160 { margin-bottom: 160px; } .mb-165, .my-165 { margin-bottom: 165px; } .mb-170, .my-170 { margin-bottom: 170px; } .mb-175, .my-175 { margin-bottom: 175px; } .mb-180, .my-180 { margin-bottom: 180px; } .mb-185, .my-185 { margin-bottom: 185px; } .mb-190, .my-190 { margin-bottom: 190px; } .mb-195, .my-195 { margin-bottom: 195px; } .mb-200, .my-200 { margin-bottom: 200px; } .mb-205, .my-205 { margin-bottom: 205px; } .mb-210, .my-210 { margin-bottom: 210px; } .mb-215, .my-215 { margin-bottom: 215px; } .mb-220, .my-220 { margin-bottom: 220px; } .mb-225, .my-225 { margin-bottom: 225px; } .mb-230, .my-230 { margin-bottom: 230px; } .mb-235, .my-235 { margin-bottom: 235px; } .mb-240, .my-240 { margin-bottom: 240px; } .mb-245, .my-245 { margin-bottom: 245px; } .mb-250, .my-250 { margin-bottom: 250px; } /* Responsive Padding Margin */ @media only screen and (max-width: 991px) { /* Padding Around */ .rp-0 { padding: 0px !important; } .rp-5 { padding: 5px !important; } .rp-10 { padding: 10px; } .rp-15 { padding: 15px; } .rp-20 { padding: 20px; } .rp-25 { padding: 25px; } .rp-30 { padding: 30px; } .rp-35 { padding: 35px; } .rp-40 { padding: 40px; } .rp-45 { padding: 45px; } .rp-50 { padding: 50px; } .rp-55 { padding: 55px; } .rp-60 { padding: 60px; } .rp-65 { padding: 65px; } .rp-70 { padding: 70px; } .rp-75 { padding: 75px; } .rp-80 { padding: 80px; } .rp-85 { padding: 85px; } .rp-90 { padding: 90px; } .rp-95 { padding: 95px; } .rp-100 { padding: 100px; } .rp-105 { padding: 105px; } .rp-110 { padding: 110px; } .rp-115 { padding: 115px; } .rp-120 { padding: 120px; } .rp-125 { padding: 125px; } .rp-130 { padding: 130px; } .rp-135 { padding: 135px; } .rp-140 { padding: 140px; } .rp-145 { padding: 145px; } .rp-150 { padding: 150px; } /* Padding Top */ .rpt-0, .rpy-0 { padding-top: 0px !important; } .rpt-5, .rpy-5 { padding-top: 5px !important; } .rpt-10, .rpy-10 { padding-top: 10px; } .rpt-15, .rpy-15 { padding-top: 15px; } .rpt-20, .rpy-20 { padding-top: 20px; } .rpt-25, .rpy-25 { padding-top: 25px; } .rpt-30, .rpy-30 { padding-top: 30px; } .rpt-35, .rpy-35 { padding-top: 35px; } .rpt-40, .rpy-40 { padding-top: 40px; } .rpt-45, .rpy-45 { padding-top: 45px; } .rpt-50, .rpy-50 { padding-top: 50px; } .rpt-55, .rpy-55 { padding-top: 55px; } .rpt-60, .rpy-60 { padding-top: 60px; } .rpt-65, .rpy-65 { padding-top: 65px; } .rpt-70, .rpy-70 { padding-top: 70px; } .rpt-75, .rpy-75 { padding-top: 75px; } .rpt-80, .rpy-80 { padding-top: 80px; } .rpt-85, .rpy-85 { padding-top: 85px; } .rpt-90, .rpy-90 { padding-top: 90px; } .rpt-95, .rpy-95 { padding-top: 95px; } .rpt-100, .rpy-100 { padding-top: 100px; } .rpt-105, .rpy-105 { padding-top: 105px; } .rpt-110, .rpy-110 { padding-top: 110px; } .rpt-115, .rpy-115 { padding-top: 115px; } .rpt-120, .rpy-120 { padding-top: 120px; } .rpt-125, .rpy-125 { padding-top: 125px; } .rpt-130, .rpy-130 { padding-top: 130px; } .rpt-135, .rpy-135 { padding-top: 135px; } .rpt-140, .rpy-140 { padding-top: 140px; } .rpt-145, .rpy-145 { padding-top: 145px; } .rpt-150, .rpy-150 { padding-top: 150px; } /* Padding Bottom */ .rpb-0, .rpy-0 { padding-bottom: 0px !important; } .rpb-5, .rpy-5 { padding-bottom: 5px !important; } .rpb-10, .rpy-10 { padding-bottom: 10px; } .rpb-15, .rpy-15 { padding-bottom: 15px; } .rpb-20, .rpy-20 { padding-bottom: 20px; } .rpb-25, .rpy-25 { padding-bottom: 25px; } .rpb-30, .rpy-30 { padding-bottom: 30px; } .rpb-35, .rpy-35 { padding-bottom: 35px; } .rpb-40, .rpy-40 { padding-bottom: 40px; } .rpb-45, .rpy-45 { padding-bottom: 45px; } .rpb-50, .rpy-50 { padding-bottom: 50px; } .rpb-55, .rpy-55 { padding-bottom: 55px; } .rpb-60, .rpy-60 { padding-bottom: 60px; } .rpb-65, .rpy-65 { padding-bottom: 65px; } .rpb-70, .rpy-70 { padding-bottom: 70px; } .rpb-75, .rpy-75 { padding-bottom: 75px; } .rpb-80, .rpy-80 { padding-bottom: 80px; } .rpb-85, .rpy-85 { padding-bottom: 85px; } .rpb-90, .rpy-90 { padding-bottom: 90px; } .rpb-95, .rpy-95 { padding-bottom: 95px; } .rpb-100, .rpy-100 { padding-bottom: 100px; } .rpb-105, .rpy-105 { padding-bottom: 105px; } .rpb-110, .rpy-110 { padding-bottom: 110px; } .rpb-115, .rpy-115 { padding-bottom: 115px; } .rpb-120, .rpy-120 { padding-bottom: 120px; } .rpb-125, .rpy-125 { padding-bottom: 125px; } .rpb-130, .rpy-130 { padding-bottom: 130px; } .rpb-135, .rpy-135 { padding-bottom: 135px; } .rpb-140, .rpy-140 { padding-bottom: 140px; } .rpb-145, .rpy-145 { padding-bottom: 145px; } .rpb-150, .rpy-150 { padding-bottom: 150px; } /* Margin Around */ .rm-0 { margin: 0px !important; } .rm-5 { margin: 5px !important; } .rm-10 { margin: 10px; } .rm-15 { margin: 15px; } .rm-20 { margin: 20px; } .rm-25 { margin: 25px; } .rm-30 { margin: 30px; } .rm-35 { margin: 35px; } .rm-40 { margin: 40px; } .rm-45 { margin: 45px; } .rm-50 { margin: 50px; } .rm-55 { margin: 55px; } .rm-60 { margin: 60px; } .rm-65 { margin: 65px; } .rm-70 { margin: 70px; } .rm-75 { margin: 75px; } .rm-80 { margin: 80px; } .rm-85 { margin: 85px; } .rm-90 { margin: 90px; } .rm-95 { margin: 95px; } .rm-100 { margin: 100px; } .rm-105 { margin: 105px; } .rm-110 { margin: 110px; } .rm-115 { margin: 115px; } .rm-120 { margin: 120px; } .rm-125 { margin: 125px; } .rm-130 { margin: 130px; } .rm-135 { margin: 135px; } .rm-140 { margin: 140px; } .rm-145 { margin: 145px; } .rm-150 { margin: 150px; } /* Margin Top */ .rmt-0, .rmy-0 { margin-top: 0px !important; } .rmt-5, .rmy-5 { margin-top: 5px !important; } .rmt-10, .rmy-10 { margin-top: 10px; } .rmt-15, .rmy-15 { margin-top: 15px; } .rmt-20, .rmy-20 { margin-top: 20px; } .rmt-25, .rmy-25 { margin-top: 25px; } .rmt-30, .rmy-30 { margin-top: 30px; } .rmt-35, .rmy-35 { margin-top: 35px; } .rmt-40, .rmy-40 { margin-top: 40px; } .rmt-45, .rmy-45 { margin-top: 45px; } .rmt-50, .rmy-50 { margin-top: 50px; } .rmt-55, .rmy-55 { margin-top: 55px; } .rmt-60, .rmy-60 { margin-top: 60px; } .rmt-65, .rmy-65 { margin-top: 65px; } .rmt-70, .rmy-70 { margin-top: 70px; } .rmt-75, .rmy-75 { margin-top: 75px; } .rmt-80, .rmy-80 { margin-top: 80px; } .rmt-85, .rmy-85 { margin-top: 85px; } .rmt-90, .rmy-90 { margin-top: 90px; } .rmt-95, .rmy-95 { margin-top: 95px; } .rmt-100, .rmy-100 { margin-top: 100px; } .rmt-105, .rmy-105 { margin-top: 105px; } .rmt-110, .rmy-110 { margin-top: 110px; } .rmt-115, .rmy-115 { margin-top: 115px; } .rmt-120, .rmy-120 { margin-top: 120px; } .rmt-125, .rmy-125 { margin-top: 125px; } .rmt-130, .rmy-130 { margin-top: 130px; } .rmt-135, .rmy-135 { margin-top: 135px; } .rmt-140, .rmy-140 { margin-top: 140px; } .rmt-145, .rmy-145 { margin-top: 145px; } .rmt-150, .rmy-150 { margin-top: 150px; } /* Margin Bottom */ .rmb-0, .rmy-0 { margin-bottom: 0px !important; } .rmb-5, .rmy-5 { margin-bottom: 5px !important; } .rmb-10, .rmy-10 { margin-bottom: 10px; } .rmb-15, .rmy-15 { margin-bottom: 15px; } .rmb-20, .rmy-20 { margin-bottom: 20px; } .rmb-25, .rmy-25 { margin-bottom: 25px; } .rmb-30, .rmy-30 { margin-bottom: 30px; } .rmb-35, .rmy-35 { margin-bottom: 35px; } .rmb-40, .rmy-40 { margin-bottom: 40px; } .rmb-45, .rmy-45 { margin-bottom: 45px; } .rmb-50, .rmy-50 { margin-bottom: 50px; } .rmb-55, .rmy-55 { margin-bottom: 55px; } .rmb-60, .rmy-60 { margin-bottom: 60px; } .rmb-65, .rmy-65 { margin-bottom: 65px; } .rmb-70, .rmy-70 { margin-bottom: 70px; } .rmb-75, .rmy-75 { margin-bottom: 75px; } .rmb-80, .rmy-80 { margin-bottom: 80px; } .rmb-85, .rmy-85 { margin-bottom: 85px; } .rmb-90, .rmy-90 { margin-bottom: 90px; } .rmb-95, .rmy-95 { margin-bottom: 95px; } .rmb-100, .rmy-100 { margin-bottom: 100px; } .rmb-105, .rmy-105 { margin-bottom: 105px; } .rmb-110, .rmy-110 { margin-bottom: 110px; } .rmb-115, .rmy-115 { margin-bottom: 115px; } .rmb-120, .rmy-120 { margin-bottom: 120px; } .rmb-125, .rmy-125 { margin-bottom: 125px; } .rmb-130, .rmy-130 { margin-bottom: 130px; } .rmb-135, .rmy-135 { margin-bottom: 135px; } .rmb-140, .rmy-140 { margin-bottom: 140px; } .rmb-145, .rmy-145 { margin-bottom: 145px; } .rmb-150, .rmy-150 { margin-bottom: 150px; } } /*******************************************************/ /***************** ## Custom Animation ****************/ /*******************************************************/ /* Animation Delay */ .delay-1-0s { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-2-0s { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay-0-1s { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .delay-0-2s { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .delay-0-3s { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .delay-0-4s { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .delay-0-5s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .delay-0-6s { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .delay-0-7s { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .delay-0-8s { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .delay-0-9s { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .delay-1-1s { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .delay-1-2s { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .delay-1-3s { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .delay-1-4s { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .delay-1-5s { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-1-6s { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .delay-1-7s { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .delay-1-8s { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .delay-1-9s { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } /* Menu Sticky */ @-webkit-keyframes sticky { 0% { top: -100px; } 100% { top: 0; } } @keyframes sticky { 0% { top: -100px; } 100% { top: 0; } } /* Rotated Circle */ @-webkit-keyframes rotated_circle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotated_circle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* Feedback Rotated */ @-webkit-keyframes semi_rotated { 0%, 100% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 50% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } } @keyframes semi_rotated { 0%, 100% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 50% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } } /* BG Shape Rotated */ @-webkit-keyframes semi_rotated_two { 0%, 100% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -webkit-transform: rotate(30deg); transform: rotate(30deg); } } @keyframes semi_rotated_two { 0%, 100% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -webkit-transform: rotate(30deg); transform: rotate(30deg); } } @-webkit-keyframes move_arround { 0% { top: 20px; left: 20px; } 25% { top: 20px; left: -20px; } 50% { top: -20px; left: -20px; } 75% { top: -20px; left: 20px; } 100% { top: 20px; left: 20px; } } @keyframes move_arround { 0% { top: 20px; left: 20px; } 25% { top: 20px; left: -20px; } 50% { top: -20px; left: -20px; } 75% { top: -20px; left: 20px; } 100% { top: 20px; left: 20px; } } /* Hero Circle */ @-webkit-keyframes upDownLeft { 0%, 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25%, 75% { -webkit-transform: translate(0px, 50px); transform: translate(0px, 50px); } 50% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } } @keyframes upDownLeft { 0%, 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25%, 75% { -webkit-transform: translate(0px, 50px); transform: translate(0px, 50px); } 50% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } } @-webkit-keyframes shapeAnimationOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 0px) rotate(270deg); transform: translate(150px, 0px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 0px) rotate(270deg); transform: translate(150px, 0px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, 0px) rotate(270deg); transform: translate(-150px, 0px) rotate(270deg); } 50% { -webkit-transform: translate(-150px, 150px) rotate(180deg); transform: translate(-150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, 0px) rotate(270deg); transform: translate(-150px, 0px) rotate(270deg); } 50% { -webkit-transform: translate(-150px, 150px) rotate(180deg); transform: translate(-150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationThree { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(50px, 150px) rotate(90deg); transform: translate(50px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 50px) rotate(270deg); transform: translate(150px, 50px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationThree { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(50px, 150px) rotate(90deg); transform: translate(50px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 50px) rotate(270deg); transform: translate(150px, 50px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationFour { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px -50px) rotate(90deg); transform: translate(-150px -50px) rotate(90deg); } 50% { -webkit-transform: translate(-150px, -150px) rotate(180deg); transform: translate(-150px, -150px) rotate(180deg); } 75% { -webkit-transform: translate(-50px, -150px) rotate(270deg); transform: translate(-50px, -150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationFour { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px -50px) rotate(90deg); transform: translate(-150px -50px) rotate(90deg); } 50% { -webkit-transform: translate(-150px, -150px) rotate(180deg); transform: translate(-150px, -150px) rotate(180deg); } 75% { -webkit-transform: translate(-50px, -150px) rotate(270deg); transform: translate(-50px, -150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationFive { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-100px -100px) rotate(90deg); transform: translate(-100px -100px) rotate(90deg); } 50% { -webkit-transform: translate(100px, 50px) rotate(180deg); transform: translate(100px, 50px) rotate(180deg); } 75% { -webkit-transform: translate(-100px, 150px) rotate(270deg); transform: translate(-100px, 150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationFive { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-100px -100px) rotate(90deg); transform: translate(-100px -100px) rotate(90deg); } 50% { -webkit-transform: translate(100px, 50px) rotate(180deg); transform: translate(100px, 50px) rotate(180deg); } 75% { -webkit-transform: translate(-100px, 150px) rotate(270deg); transform: translate(-100px, 150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes down-up-one { 0% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(25px); transform: rotateX(0deg) translateY(25px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @keyframes down-up-one { 0% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(25px); transform: rotateX(0deg) translateY(25px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @-webkit-keyframes down-up-two { 0% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } 50% { -webkit-transform: rotateX(0deg) translate(0, -25px); transform: rotateX(0deg) translate(0, -25px); } 100% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } } @keyframes down-up-two { 0% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } 50% { -webkit-transform: rotateX(0deg) translate(0, -25px); transform: rotateX(0deg) translate(0, -25px); } 100% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } } @-webkit-keyframes leftRightOne { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); } } @keyframes leftRightOne { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); } } @-webkit-keyframes zoomInOut { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes zoomInOut { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } /*******************************************************/ /******************* ## Header style ******************/ /*******************************************************/ .main-header { position: relative; left: 0px; top: 0px; z-index: 999; width: 100%; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } #sp-topbar { padding: 10px 0; background: radial-gradient(circle at 50% 45%, rgba(4, 80, 156, .28), transparent 32%), radial-gradient(circle at 85% 15%, rgba(4, 80, 156, .22), transparent 30%), radial-gradient(circle at 15% 85%, rgba(252, 196, 21, .07), transparent 25%), linear-gradient(135deg, #0b101c 0%, #111827 42%, #1b1f2e 100%); } .main-header .header-upper { z-index: 5; width: 100%; position: relative; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .main-header .logo-outer { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .color-bar { position: absolute; left: 0; right: 0; top: 0; box-shadow: -72vw 0 0 8px #78be1e, -65vw 0 0 8px #019e43, -58vw 0 0 8px #0182c6, 0vw 0 0 8px #1d4f9b; } @media only screen and (max-width: 991px) { .main-header .logo-outer { display: none; } } .main-header .logo { z-index: 9; padding: 2px 0; position: relative; } .main-header.menu-absolute .header-upper { position: absolute; } .main-header.fixed-header .header-upper { top: 0; left: 0; position: fixed; -webkit-animation: sticky 1s; animation: sticky 1s; -webkit-box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); } @media only screen and (min-width: 992px) { .main-header.fixed-header .main-menu .navbar-collapse>ul>li { padding-top: 25px; padding-bottom: 25px; } } .header-top>ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-top>ul>li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 30px; } .header-top>ul>li>i { margin-left: 10px; color: var(--primary-color); font-weight: 900; font-size: 36px; } @media only screen and (max-width: 767px) { .header-top-wrap { display: none; } /*.header-top>ul>li:not(:last-child):after { width: 5px; height: 5px; content: ''; border-radius: 50%; margin-left: 30px; margin-right: 30px; background: var(--base-color); }*/ .sp-module.snowa-header-contact { display: block; } .header-top ul { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; } .header-top ul li { list-style: none; padding: 14px 16px; align-items: center; gap: 12px; font-weight: 600; margin: 0; position: relative; background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(4, 80, 156, .035) 48%, rgba(0, 0, 0, .18)); border: 1px solid rgba(89, 171, 255, .28); border-radius: 22px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 25px 60px rgba(0, 0, 0, .35), 0 0 18px rgba(4, 80, 156, .12), inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(4, 80, 156, .12); overflow: hidden; transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .45s ease, box-shadow .45s ease; } .header-top ul li:active { transform: scale(0.98); } .header-top ul li i { width: 50px; height: 50px; background: #fcc415; color: #04509c; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 36px; } .header-top ul li a { text-decoration: none; color: #04509c; } .header-top ul li:nth-child(1) { display: none; } .header-top ul li:nth-child(2) { margin: 10px 0; position: relative; width: 100%; height: 70px; border: 1px solid rgba(255, 225, 108, .85) !important; border-radius: 13px !important; overflow: hidden; background: linear-gradient(135deg, #d99f00 0%, #fcc415 35%, #ffd84d 50%, #fcc415 65%, #d99f00 100%) !important; color: #07182d !important; font-family: iranyekanxfanummedium, sans-serif; box-shadow: 0 8px 20px rgba(252, 196, 21, .22), 0 0 14px rgba(252, 196, 21, .20), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -5px 12px rgba(174, 118, 0, .20); transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; } .header-top ul li:nth-child(2) i { background: linear-gradient(180deg, #9ddcff 0%, #42b5ff 28%, #0875d1 62%, #04509c 100%); -webkit-text-fill-color: #ffffff; filter: drop-shadow(0 0 7px rgba(48, 166, 255, .55)); transition: transform .4s ease, filter .4s; } .header-top ul li:nth-child(2) a { color: #04509c !important; font-weight: bolder; font-size: 26px; font-style: italic; } .header-top .text { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; font-weight: 500; color: #fff; } .header-top .text .message strong { color: #fcc415; font-weight: 800; } .header-top .text .call-btn { background: #fcc415; color: #04509c; padding: 6px 14px; border-radius: 30px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: 0.3s ease; } .header-top .text .call-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); } } .header-top .text { color: white; font-weight: 500; text-align: center; padding-top: 8px; padding-bottom: 8px; } .header-top .text .hello { padding: 4px 7px; font-size: 14px; font-weight: 700; background: white; margin-right: 5px; border-radius: 3px; position: relative; color: var(--secondary-color); } .header-top .text .hello:after { content: ''; position: absolute; top: 100%; left: 6px; border-top: 5px solid white; border-left: 6px solid transparent; border-right: 6px solid transparent; } .header-top .text a { text-decoration: underline; } .header-top .text a:not(:hover) { color: white; } @media only screen and (max-width: 991px) { .nav-outer { width: 100%; } .header-top>ul{ display:block; margin:5px 0; } /*.header-top>ul li { padding: 5px 0px; border-bottom: 1px solid #ffffff85; }*/ } /** Header Main Menu **/ @media only screen and (max-width: 991px) { .main-menu { width: 100%; } } .main-menu .mobile-logo { margin-right: auto; } @media only screen and (max-width: 575px) { .main-menu .mobile-logo { max-width: 150px; } } @media only screen and (max-width: 991px) { .main-menu .collapse { overflow: auto; } } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navbar-collapse>ul { display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse>ul { display: block; padding: 25px 0; background: #FFFFFF; } .main-menu .navbar-collapse>ul>li:last-child { border-bottom: 1px solid #f3f3f3; } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse { left: 0; width: 100%; position: absolute; max-height: calc(100vh - 80px); } } .main-menu .navbar-collapse li { padding: 35px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 1399px) { .main-menu .navbar-collapse li { padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li { display: block; padding: 0 15px; border-top: 1px solid #f3f3f3; } } .main-menu .navbar-collapse li.dropdown .dropdown-btn { cursor: pointer; font-size: 12px; margin-left: 5px; color: var(--heading-color); } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 0; width: 50px; height: 43px; border-left: 1px solid #f2f2f2; text-align: center; line-height: 43px; } } .main-menu .navbar-collapse li a { display: block; opacity: 1; font-weight: 600; position: relative; color: var(--heading-color); font-family: "Poppins", sans-serif; text-transform: capitalize; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } @media only screen and (min-width: 376px) { .main-menu .navbar-collapse li a { font-size: 18px; } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li a { padding: 10px 10px; line-height: 22px; } } .main-menu .navbar-collapse li a:hover { color: var(--primary-color); text-decoration: underline; } .main-menu .navbar-collapse li.current>a, .main-menu .navbar-collapse li.current-menu-item>a { font-weight: 500; } .main-menu .navbar-collapse li li { border-top: 1px solid #f3f3f3; } .main-menu .navbar-collapse li li a { text-transform: capitalize; } .main-menu .navbar-collapse li li a:before { display: none; } .main-menu .navbar-collapse li .megamenu { position: absolute; left: 0px; top: 100%; width: 100%; z-index: 100; display: none; padding: 20px 0; background: #ffffff; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } .main-menu .navbar-collapse li .megamenu:after { display: block; clear: both; content: ""; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li .megamenu { position: relative; -webkit-box-shadow: none; box-shadow: none; width: 100%; } .main-menu .navbar-collapse li .megamenu .container { max-width: 100%; } .main-menu .navbar-collapse li .megamenu .row { margin: 0px; } } .main-menu .navbar-collapse li .megamenu ul { display: block; position: relative; top: 0; width: 100%; -webkit-box-shadow: none; box-shadow: none; } .main-menu .navbar-collapse li ul { position: absolute; left: inherit; top: 100%; min-width: 250px; z-index: 100; display: none; background: #ffffff; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul { position: relative; display: none; width: 100%; -webkit-box-shadow: none; box-shadow: none; } .main-menu .navbar-collapse li ul:after { display: block; clear: both; content: ""; } } @media only screen and (max-width: 991px) and (max-width: 375px) { .main-menu .navbar-collapse li ul { min-width: auto; } } .main-menu .navbar-collapse li ul li { width: 100%; padding: 7px 20px; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul li { padding: 0 15px; } } .main-menu .navbar-collapse li ul li ul { left: 100%; top: 0%; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul li ul { left: auto; } } .main-menu .navbar-header { display: none; } @media only screen and (max-width: 991px) { .main-menu .navbar-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } } .main-menu .navbar-header .navbar-toggle { float: right; padding: 4px 0; cursor: pointer; background: transparent; } .main-menu .navbar-header .navbar-toggle .icon-bar { background: var(--base-color); height: 2px; width: 30px; display: block; margin: 7px 0; } /* Menu Btns */ .menu-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menu-btns .theme-btn { padding-top: 12px; padding-bottom: 12px; } @media only screen and (max-width: 1199px) { .menu-btns .theme-btn { display: none; } } /* Header Search */ .nav-search { position: relative; margin-right: 40px; margin-left: 25px; } .nav-search button { background: transparent; font-weight: 900; border: 0px solid transparent; } .nav-search form { position: absolute; width: 320px; top: 100%; right: 0; z-index: 777; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s; -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); } @media only screen and (max-width: 375px) { .nav-search form { width: 275px; } } .nav-search form.hide { display: none; } .nav-search form input { border: none; padding: 15px 5px 15px 25px; } .nav-search form button { padding: 15px 20px 15px 0; } /* Header Socila */ .header-inner .social-style-two { margin-left: 30px; } @media only screen and (max-width: 1399px) { .header-inner .social-style-two { display: none; } } /* Menu Sidebar */ .menu-sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (min-width: 576px) and (max-width: 1199px) { .menu-sidebar { margin-left: 30px; } } .menu-sidebar button { width: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: transparent; } .menu-sidebar button .icon-bar { background: var(--heading-color); height: 2px; width: 100%; margin: 4px 0; display: block; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .menu-sidebar button .icon-bar:first-child { width: calc(100% - 5px); } .menu-sidebar button .icon-bar:last-child { width: calc(100% - 8px); } .menu-sidebar button .toggle-btn { width: 25px; aspect-ratio: 1; --c: conic-gradient(from -90deg, #674df3 90deg, #0000 0); background: var(--c), var(--c); background-size: 40% 40%; } .menu-sidebar button:hover .icon-bar { width: 100%; } .menu-sidebar button:hover .toggle-btn { -webkit-animation: preloader 1s infinite alternate; animation: preloader 1s infinite alternate; } /** hidden-sidebar * */ .hidden-bar { position: fixed; right: -350px; top: 0px; opacity: 0; width: 350px; height: 100%; z-index: 99999; overflow-y: auto; visibility: hidden; background-color: var(--heading-color); border-left: 1px solid #231b26; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (max-width: 375px) { .hidden-bar { width: 300px; } } .hidden-bar .social-style-one a { width: 40px; height: 40px; line-height: 40px; } .side-content-visible .hidden-bar { right: 0px; opacity: 1; visibility: visible; } .hidden-bar .inner-box { position: relative; padding: 100px 40px 50px; } @media only screen and (max-width: 375px) { .hidden-bar .inner-box { padding-left: 25px; padding-right: 25px; } } .hidden-bar .inner-box .cross-icon { position: absolute; right: 30px; top: 30px; cursor: pointer; color: #ffffff; font-size: 20px; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .hidden-bar .inner-box h4 { position: relative; color: #ffffff; margin-bottom: 35px; } /*Appointment Form */ .hidden-bar .appointment-form { position: relative; } .hidden-bar .appointment-form .form-group { position: relative; margin-bottom: 20px; } .hidden-bar .appointment-form input[type="text"], .hidden-bar .appointment-form input[type="email"] { position: relative; display: block; width: 100%; line-height: 23px; padding: 10px 25px; color: #ffffff; font-size: 16px; background: none; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(255, 255, 255, 0.1); } .hidden-bar .appointment-form textarea { position: relative; display: block; width: 100%; line-height: 23px; padding: 10px 25px; color: #ffffff; font-size: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: none; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; resize: none; } .hidden-bar .appointment-form input::-webkit-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form input:-ms-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form input::-ms-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form input::placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form textarea::-webkit-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form textarea:-ms-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form textarea::-ms-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form textarea::placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form .form-group button { width: 100%; font-size: 16px; padding: 10px 15px; margin-bottom: 20px; border-color: white; } .form-back-drop { position: fixed; left: 100%; top: 0px; width: 100%; height: 100%; opacity: 0; background: rgba(0, 0, 0, 0.7); visibility: hidden; z-index: 9990; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .side-content-visible .form-back-drop { opacity: 1; left: 0; visibility: visible; } /* Menu White */ #sp-header.headerstyle1 .nav-search>button { color: white; font-weight: 900; } @media only screen and (min-width: 992px) { #sp-header.headerstyle1 .main-menu .navigation>li>a, #sp-header.headerstyle1 .main-menu .navigation>.dropdown>.dropdown-btn { color: white; } } #sp-header.headerstyle1 .main-menu .navigation li li a:hover { color: var(--primary-color); } #sp-header.headerstyle1 .menu-sidebar button .icon-bar, #sp-header.headerstyle1 .main-menu .navbar-toggle .icon-bar { background: white; } #sp-header.headerstyle1 .toggle-btn { --c: conic-gradient(from -90deg, white 90deg, #0000 0); } /* Header One */ .main-header.header-one .header-top { padding: 9px; } @media only screen and (min-width: 992px) { } @media only screen and (max-width: 1299px) { .main-header.header-one .header-top .for-none { display: none; } } .main-header.header-one .logo-outer { margin-top: -50px; margin-right: 25px; padding: 25px 30px; background: var(--secondary-color); -webkit-clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); } @media only screen and (min-width: 992px) { .main-header.header-one .main-menu .navigation>li { padding-top: 26px; padding-bottom: 26px; } } .main-header.header-one .mobile-logo { padding: 10px 25px; background: var(--secondary-color); -webkit-clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); } .main-header.header-one .mobile-logo img { max-height: 50px; } @media only screen and (max-width: 1199px) { .main-header.header-one .nav-search { margin-right: 0; } } .main-header.header-one.fixed-header .logo-outer { margin-top: 0; padding-top: 10px; padding-bottom: 10px; } .main-header.header-one.fixed-header .logo-outer .logo img { max-height: 60px; } /* Header Two */ @media only screen and (max-width: 375px) { .main-header.header-two .main-menu .mobile-logo { max-width: 135px; } } @media only screen and (max-width: 1199px) { .main-header.header-two .nav-search { margin-right: 0; } } /* Header Three */ .main-header.header-three.fixed-header .header-upper { background: var(--heading-color); } @media only screen and (min-width: 576px) and (max-width: 1199px) { .main-header.header-three .nav-search { margin-right: 0; } } @media only screen and (max-width: 375px) { .main-header.header-three .nav-search { display: none; } } @media only screen and (max-width: 375px) { .main-header.header-three .menu-btns { margin-left: 25px; } } /* Header Four */ @media only screen and (min-width: 992px) { .main-header.header-four .main-menu .navbar-collapse>ul>li { padding-top: 25px; padding-bottom: 25px; } } @media only screen and (min-width: 576px) and (max-width: 1199px) { .main-header.header-four .nav-search { margin-right: 0; } } @media only screen and (max-width: 375px) { .main-header.header-four .nav-search { display: none; } } @media only screen and (max-width: 375px) { .main-header.header-four .menu-btns { margin-left: 25px; } } /*******************************************************/ /******************** ## Hero Area ********************/ /*******************************************************/ .hero-content { z-index: 2; max-width: 530px; position: relative; } .hero-content .sub-title { font-weight: 500; line-height: 1.5; padding: 8px 20px; display: inline-block; border-radius: 0 5px 5px 0; background: var(--primary-color); border-left: 3px solid white; } @media only screen and (min-width: 768px) { .hero-content .sub-title { font-size: 18px; } } .hero-content h1 { color: white; font-size: 65px; } @media only screen and (max-width: 1199px) { .hero-content h1 { font-size: 55px; } } @media only screen and (max-width: 767px) { .hero-content h1 { font-size: 45px; } } @media only screen and (max-width: 575px) { .hero-content h1 { font-size: 40px; } } @media only screen and (max-width: 375px) { .hero-content h1 { font-size: 33px; line-height: 1.3; } } .hero-content p { color: white; margin-top: 22px; } @media only screen and (min-width: 1200px) { .hero-content p { font-size: 18px; } } .hero-images { z-index: 1; position: relative; margin-bottom: -80px; } @media only screen and (min-width: 1400px) { .hero-images { margin-left: -30%; margin-right: 17%; } } .hero-images img { -webkit-clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); } .hero-shapes .shape { z-index: -1; position: absolute; } .hero-shapes .shape.bg-lines { right: -25px; top: -50px; max-width: 55%; -webkit-animation: down-up-two 10s infinite; animation: down-up-two 10s infinite; } .hero-shapes .shape.right-shape { left: 0; z-index: 2; bottom: -5%; max-width: 30%; } .hero-shapes .shape.one { left: -10%; bottom: 0; -webkit-animation: leftRightOne 15s infinite; animation: leftRightOne 15s infinite; } .hero-shapes .shape.two { top: 0; right: 0; -webkit-animation: down-up-two 8s infinite; animation: down-up-two 8s infinite; } .hero-shapes .shape.three { right: 0; bottom: 5%; -webkit-animation: shapeAnimationFour 20s infinite; animation: shapeAnimationFour 20s infinite; } /* Hero Two */ .hero-area-two { overflow: hidden; z-index: 1; position: relative; } .hero-area-two::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.75; background-color: #1b1f2d; } .hero-area-two .hero-shapes-two { position: absolute; left: 0; top: 0; z-index: -1; max-width: 30%; -webkit-animation: down-up-two 10s infinite; animation: down-up-two 10s infinite; } .hero-content-two .sub-title { color: white; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } @media only screen and (min-width: 576px) { .hero-content-two .sub-title { font-size: 22px; } } .hero-content-two .sub-title:before { content: ''; width: 60px; height: 2px; margin-right: 20px; background: white; } @media only screen and (max-width: 375px) { .hero-content-two .sub-title:before { width: 40px; height: 1px; } } .hero-content-two h1 { color: white; } @media only screen and (max-width: 1399px) { .hero-content-two h1 { font-size: 65px; } } @media only screen and (max-width: 1199px) { .hero-content-two h1 { font-size: 55px; line-height: 1.3; } } @media only screen and (max-width: 767px) { .hero-content-two h1 { font-size: 45px; } } @media only screen and (max-width: 575px) { .hero-content-two h1 { font-size: 38px; letter-spacing: -1px; } } @media only screen and (max-width: 375px) { .hero-content-two h1 { font-size: 30px; } } .hero-gradient-circle { position: relative; padding-bottom: 100%; } @media only screen and (max-width: 991px) { .hero-gradient-circle { width: 200px; top: 22%; right: 5%; z-index: -1; position: absolute; padding-bottom: 200px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .hero-gradient-circle { top: 15%; } } @media only screen and (max-width: 479px) { .hero-gradient-circle { width: 150px; padding-bottom: 150px; } } @media only screen and (max-width: 375px) { .hero-gradient-circle { top: 15%; } } .hero-gradient-circle .icon { z-index: 2; position: absolute; position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); position: absolute; right: calc(50% - 50px); bottom: calc(50% - 50px); -webkit-animation: rotated_circle 10s infinite; animation: rotated_circle 10s infinite; } @media only screen and (max-width: 991px) { .hero-gradient-circle .icon { position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); position: absolute; right: calc(50% - 25px); bottom: calc(50% - 25px); } } .hero-gradient-circle:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.75; border-radius: 50%; background: -webkit-gradient(linear, right top, left top, from(var(--primary-color)), to(var(--secondary-color))); background: -webkit-linear-gradient(right, var(--primary-color), var(--secondary-color)); background: -o-linear-gradient(right, var(--primary-color), var(--secondary-color)); background: linear-gradient(-90deg, var(--primary-color), var(--secondary-color)); -webkit-animation: rotated_circle 10s infinite; animation: rotated_circle 10s infinite; } .hero-gradient-circle:after { content: ''; width: 56%; height: 56%; position: absolute; right: 22%; top: 22%; background: white; border-radius: 50%; } /*******************************************************/ /******************* ## Page Banner *******************/ /*******************************************************/ .page-banner-area { z-index: 1; position: relative; } .page-banner-area::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.75; background-color: var(--heading-color); } .page-banner-area:before { mix-blend-mode: multiply; } .banner-inner h1 { font-size: 75px; margin-bottom: 20px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .banner-inner h1 { font-size: 60px; } } @media only screen and (max-width: 767px) { .banner-inner h1 { font-size: 55px; } } @media only screen and (max-width: 575px) { .banner-inner h1 { font-size: 45px; } } @media only screen and (max-width: 375px) { .banner-inner h1 { font-size: 35px; line-height: 1.25; } } .breadcrumb { padding: 0; margin: 0; font-size: 22px; background: transparent; text-transform: capitalize; } @media only screen and (max-width: 375px) { .breadcrumb { font-size: 18px; } } .breadcrumb .breadcrumb-item { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .breadcrumb .breadcrumb-item.active { color: white; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .breadcrumb .breadcrumb-item+.breadcrumb-item::before { margin-left: 15px; margin-right: 15px; -webkit-box-flex: 0; -ms-flex: none; flex: none; color: white; content: "\f105"; font-family: "Font Awesome 6 Free"; } /*******************************************************/ /******************* ## Main Slider *******************/ /*******************************************************/ .slider-area { z-index: 1; position: relative; } .slider-area::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.65; background-color: var(--heading-color); } .slider-area:before { mix-blend-mode: multiply; } .slider-area:after { width: 40%; height: 70%; position: absolute; right: 0; bottom: 0; z-index: -1; opacity: 0.65; background: -webkit-gradient(linear, right top, left top, from(var(--primary-color)), to(var(--secondary-color))); background: -webkit-linear-gradient(right, var(--primary-color), var(--secondary-color)); background: -o-linear-gradient(right, var(--primary-color), var(--secondary-color)); background: linear-gradient(-90deg, var(--primary-color), var(--secondary-color)); -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 40% 40%, 60% 55%); clip-path: polygon(100% 0, 100% 100%, 0% 100%, 40% 40%, 60% 55%); } .slide-content { max-width: 515px; } .slide-content .sub-title { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } @media only screen and (min-width: 576px) { .slide-content .sub-title { font-size: 22px; } } .slide-content .sub-title:before { content: ''; width: 60px; height: 2px; margin-right: 20px; background: white; } @media only screen and (max-width: 375px) { .slide-content .sub-title:before { width: 40px; height: 1px; } } .slide-content .h2 { display: block; font-size: 85px; font-weight: 300; letter-spacing: -3px; } @media only screen and (max-width: 1199px) { .slide-content .h2 { font-size: 60px; } } @media only screen and (max-width: 767px) { .slide-content .h2 { font-size: 50px; } } @media only screen and (max-width: 575px) { .slide-content .h2 { font-size: 43px; } } @media only screen and (max-width: 375px) { .slide-content .h2 { font-size: 35px; } } .slide-content h1 { line-height: 1; font-size: 100px; margin-bottom: 60px; letter-spacing: -2px; } @media only screen and (max-width: 1399px) { .slide-content h1 { font-size: 80px; } } @media only screen and (max-width: 1199px) { .slide-content h1 { font-size: 55px; line-height: 1.3; margin-bottom: 35px; } } @media only screen and (max-width: 767px) { .slide-content h1 { font-size: 45px; } } @media only screen and (max-width: 575px) { .slide-content h1 { font-size: 38px; letter-spacing: -1px; } } @media only screen and (max-width: 375px) { .slide-content h1 { font-size: 30px; } } .slide-content>* { -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .main-slider-active .slick-arrow { position: absolute; right: 0; z-index: 2; color: white; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); } @media only screen and (max-width: 479px) { .main-slider-active .slick-arrow { width: 40px; height: 40px; font-size: 20px; } } .main-slider-active .slick-arrow.next-arrow { top: 25%; } .main-slider-active .slick-arrow.prev-arrow { top: calc(25% + 80px); } .main-slider-active .slick-arrow:focus, .main-slider-active .slick-arrow:hover { border-color: white; } .slick-active .slide-content * { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .slick-active .slide-content .sub-title { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .slick-active .slide-content .h2 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .slick-active .slide-content h1 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .slick-active .slide-content .theme-btn { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } /* Slider Area Two */ .slider-area-two { overflow: hidden; } .slider-area-two:after { width: 40%; height: 70%; position: absolute; right: 0; bottom: 0; opacity: 0.65; background: -webkit-gradient(linear, right top, left top, from(var(--primary-color)), to(var(--secondary-color))); background: -webkit-linear-gradient(right, var(--primary-color), var(--secondary-color)); background: -o-linear-gradient(right, var(--primary-color), var(--secondary-color)); background: linear-gradient(-90deg, var(--primary-color), var(--secondary-color)); -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 40% 40%, 60% 55%); clip-path: polygon(100% 0, 100% 100%, 0% 100%, 40% 40%, 60% 55%); } .slider-area-two .slider-bg-line { position: absolute; left: 0; top: 0; z-index: -1; max-width: 33%; } .slider-area-two .slider-bg-text { font-size: 16vw; position: absolute; left: 5%; bottom: 5%; z-index: -1; opacity: 0.05; line-height: 1; } .slider-item-two { z-index: 1; position: relative; padding-top: 130px; padding-bottom: 210px; } .slider-item-two .slide-content { position: relative; z-index: 2; } .slider-item-two .sub-title { margin-bottom: 20px; color: var(--secondary-color); } .slider-item-two .sub-title:before { background: var(--secondary-color); } .slider-item-two h1 { margin-bottom: 45px; } @media only screen and (max-width: 1199px) { .slider-item-two h1 { margin-bottom: 15px; } } .slider-item-two .theme-btn:not(:last-child) { margin-right: 25px; } .slider-item-two .slider-image { position: absolute; right: 0; top: 0; z-index: -1; opacity: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; width: 45%; height: 100%; background-size: cover; background-color: var(--heading-color); background-position: center center; } @media only screen and (max-width: 991px) { .slider-item-two .slider-image { width: 100%; z-index: 1; position: relative; position: absolute; } .slider-item-two .slider-image::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.9; background-color: white; } } .slider-arrows { position: absolute; left: 0; top: 40%; width: 100%; } .slider-arrows .slick-arrow { position: absolute; right: 15px; z-index: 2; } @media only screen and (min-width: 992px) { .slider-arrows .slick-arrow { color: white; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); } } @media only screen and (max-width: 479px) { .slider-arrows .slick-arrow { width: 40px; height: 40px; font-size: 20px; } } .slider-arrows .slick-arrow:focus, .slider-arrows .slick-arrow:hover { border-color: white; } .slider-arrows .slick-arrow.next-slider { bottom: calc(100% + 10px); } .slider-arrows .slick-arrow.prev-slider { top: calc(100% + 10px); } .slick-active .slider-image { opacity: 1; } /*******************************************************/ /******************* ## About Area ********************/ /*******************************************************/ .about-content p { max-width: 545px; } .about-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .about-btns .theme-btn:not(:last-child) { margin-right: 30px; } .hotline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hotline>i { width: 55px; height: 55px; line-height: 51px; border-radius: 50%; text-align: center; margin-left: 15px; color: var(--secondary-color); border: 2px solid var(--border-color); } .hotline .content { line-height: 1.65; } .hotline .content span { font-weight: 500; } .hotline .content a { font-size: 18px; font-weight: 700; } .hotline .content a:not(:hover) { color: var(--heading-color); } .about-images .top-part, .about-images .bottom-part { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -15px; margin-right: -15px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .about-images .top-part img, .about-images .bottom-part img { margin-left: 15px; margin-right: 15px; } .about-images .top-part { margin-bottom: 30px; } .about-images .top-part img:first-child { max-width: calc(68% - 30px); } .about-images .top-part img:last-child { margin-top: 50px; margin-left: auto; max-width: calc(30% - 30px); } .about-images .bottom-part img:first-child { width: calc(33% - 30px); } .about-images .bottom-part img:last-child { margin-top: -30%; width: calc(67% - 30px); } /* About Two Image */ .about-two-image .bg-circle-shape { width: 405px; height: 405px; z-index: -1; left: -200px; bottom: -150px; position: absolute; border-radius: 50%; background: -webkit-gradient(linear, right top, left top, from(var(--primary-color)), to(var(--secondary-color))); background: -webkit-linear-gradient(right, var(--primary-color), var(--secondary-color)); background: -o-linear-gradient(right, var(--primary-color), var(--secondary-color)); background: linear-gradient(-90deg, var(--primary-color), var(--secondary-color)); -webkit-animation: rotated_circle 10s infinite; animation: rotated_circle 10s infinite; } @media only screen and (max-width: 1399px) { .about-two-image .bg-circle-shape { width: 200px; height: 200px; left: -100px; bottom: -50px; } } .about-two-image .bg-circle-shape:after { content: ''; width: 56%; height: 56%; position: absolute; right: 22%; top: 22%; background: white; border-radius: 50%; } /* Customer Satisfaction */ .customer-satisfaction-area { z-index: 1; position: relative; } .customer-satisfaction-area::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 1; background-color: var(--lighter-color); } .customer-satisfaction-area:before { top: -35%; } .cs-image-part { position: relative; padding-left: 40px; } @media only screen and (min-width: 992px) { .cs-image-part { margin-left: -15px; } } @media only screen and (max-width: 575px) { .cs-image-part { padding-left: 20px; } } .cs-image-part .video-play { left: 0; position: absolute; top: calc(50% - 40px); } .cs-image-part .image { max-width: 75%; } .cs-image-part .experience-years { position: absolute; right: 0; top: 13%; max-width: 260px; padding: 35px 40px 40px; background: var(--primary-color); } @media only screen and (max-width: 767px) { .cs-image-part .experience-years { padding: 20px 25px 25px; } } @media only screen and (max-width: 479px) { .cs-image-part .experience-years { top: 25%; max-width: 180px; padding-bottom: 5px; } } .cs-image-part .experience-years h4 { line-height: 1.54; margin-bottom: 18px; } @media only screen and (min-width: 768px) { .cs-image-part .experience-years h4 { font-size: 26px; } } @media only screen and (max-width: 375px) { .cs-image-part .experience-years h4 { font-size: 18px; } } .cs-image-part .experience-years img { border-radius: 50%; } @media only screen and (max-width: 479px) { .cs-image-part .experience-years img { display: none; } } /* Why Choose Us */ .why-choose-tab .nav .nav-link { font-size: 24px; border-radius: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: transparent; border-bottom: 1px solid var(--border-color); } @media only screen and (min-width: 1200px) { .why-choose-tab .nav .nav-link { padding-bottom: 25px; } } .why-choose-tab .nav .nav-link i { line-height: 1; font-size: 45px; margin-right: 15px; color: var(--secondary-color); } @media only screen and (max-width: 767px) { .why-choose-tab .nav .nav-link { font-size: 20px; } .why-choose-tab .nav .nav-link i { font-size: 30px; } } @media only screen and (max-width: 575px) { .why-choose-tab .nav .nav-link { font-size: 16px; } .why-choose-tab .nav .nav-link i { font-size: 20px; } } .why-choose-tab .nav .nav-link.active { border-bottom-color: var(--secondary-color); } .why-choose-image { position: relative; z-index: 1; } .why-choose-image:before { content: ''; z-index: -1; position: absolute; left: -30px; bottom: -30px; width: 86px; height: 186px; background: url(../images/about/why-choose-image-bg-dots.png) no-repeat center/cover; } .why-choose-content h3 { font-size: 30px; margin-bottom: 25px; } @media only screen and (max-width: 575px) { .why-choose-content h3 { font-size: 25px; } } .why-choose-content .list-style-one li { font-weight: 600; } .why-choose-content .list-style-one li:not(:last-child) { margin-bottom: 10px; } .why-choose-content .list-style-one li:before { width: 25px; height: 25px; color: white; margin-top: 3px; line-height: 21px; background: var(--secondary-color); border-color: var(--secondary-color); } .why-choose-shapes .shape { z-index: -1; max-width: 33%; -webkit-animation: down-up-two 6s infinite; animation: down-up-two 6s infinite; } .why-choose-shapes .shape.one { position: absolute; right: 0; top: 0; } .why-choose-shapes .shape.two { position: absolute; left: 0; bottom: -10%; -webkit-animation-delay: 3s; animation-delay: 3s; } /* About Three */ .about-bg-shape { position: absolute; z-index: -1; top: -75px; max-width: 50%; } /* Consultations */ .consultations-area:after { content: ''; width: 100%; height: 22%; z-index: -1; position: absolute; left: 0; bottom: 0; background: var(--heading-color); } .consultations-content .section-title { padding-left: 80px; padding-right: 80px; } @media only screen and (max-width: 767px) { .consultations-content .section-title { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 767px) { .consultations-content .consultations-bottom { padding-left: 25px; padding-right: 25px; } } .consultations-content .consultations-bottom .theme-btn { color: var(--heading-color); background: var(--primary-color); } .consultations-content .consultations-bottom .theme-btn i { color: var(--heading-color); } .consultations-video { z-index: 1; position: relative; -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%); } .consultations-video::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.2; background-color: #1b1f2e; } .consultations-video:before { z-index: 0; } .consultations-video img { width: 100%; } .consultations-video .video-play { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: white; color: var(--primary-color); } .consultations-video .video-play:hover { color: white; background: var(--primary-color); } /* About Four */ @media only screen and (min-width: 1400px) { .about-four-image { margin-right: 60px; margin-left: -100px; } } @media only screen and (max-width: 1399px) { .about-four-image { display: inline-block; } } .about-four-image .about-circle { margin-right: 10%; position: relative; margin-bottom: 20%; display: inline-block; } .about-four-image .about-circle .text { position: absolute; left: 7%; top: 7%; width: 86%; -webkit-animation: rotated_circle 30s linear infinite; animation: rotated_circle 30s linear infinite; } .about-four-image .image { position: absolute; right: 0; bottom: 0; max-width: 60%; } .about-four-content .nav li .nav-link { border-radius: 0; border-top: 1px solid rgba(27, 31, 45, 0.15); border-bottom: 1px solid rgba(27, 31, 45, 0.15); } @media only screen and (min-width: 768px) { .about-four-content .nav li .nav-link { font-size: 18px; padding-top: 15px; padding-bottom: 15px; } } .about-four-content .nav li .nav-link.active { color: var(--secondary-color); background: transparent; border-color: var(--heading-color); } .about-four-content .nav li .nav-link:hover { color: var(--secondary-color); } .about-four-content .list-style-one li { font-weight: 600; } .about-four-content .list-style-one li:not(:last-child) { margin-bottom: 10px; } .about-four-content .list-style-one li:before { width: 25px; height: 25px; color: white; margin-top: 3px; line-height: 21px; background: var(--secondary-color); border-color: var(--secondary-color); } /* About Page */ .about-five-images img { width: 60%; display: block; } @media only screen and (max-width: 767px) { .about-five-images img { width: 70%; } } @media only screen and (max-width: 375px) { .about-five-images img { width: 80%; } } .about-five-images img:nth-child(2) { margin-top: -25%; margin-left: auto; } .about-five-images .experience-years { position: absolute; right: 13%; top: 13%; max-width: 235px; padding: 30px 40px 15px; background: var(--primary-color); } @media only screen and (max-width: 991px) { .about-five-images .experience-years { top: 18%; } } @media only screen and (max-width: 375px) { .about-five-images .experience-years { right: 8%; max-width: 166px; padding-left: 25px; padding-right: 25px; } } .about-five-images .experience-years .years { line-height: 1; font-size: 75px; margin-bottom: 5px; display: inline-block; } @media only screen and (max-width: 375px) { .about-five-images .experience-years .years { font-size: 55px; } } .about-five-images .experience-years h4 { line-height: 1.4; margin-bottom: 18px; } @media only screen and (min-width: 768px) { .about-five-images .experience-years h4 { font-size: 25px; } } @media only screen and (max-width: 375px) { .about-five-images .experience-years h4 { font-size: 18px; } } .about-five-images .abut-bg-shape { z-index: -1; width: 115%; position: absolute; right: 40px; top: -55px; max-width: none; } /*******************************************************/ /***************** ## Services Area *******************/ /*******************************************************/ .service-item { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 40px 30px 15px; } .service-item.active { -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.1); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.1); } .service-item .icon { margin-bottom: 25px; } .service-item.style-two { padding-top: 35px; background: white; margin-bottom: 30px; padding-bottom: 28px; -webkit-box-shadow: 10px 0 60px rgba(103, 77, 243, 0.1); box-shadow: 10px 0 60px rgba(103, 77, 243, 0.1); text-align: center; } .service-item.style-two:hover a { color: #ffffff !important; } .service-item.style-two .icon { line-height: 1; font-size: 60px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-bottom: 15px; color: var(--secondary-color); } .bt-call-service { padding: 15px 25px; font-size: 20px; } @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(242, 188, 22, 0.7); transform: scale(1); } 70% { box-shadow: 0 0 0 15px rgba(242, 188, 22, 0); transform: scale(1.08); } 100% { box-shadow: 0 0 0 0 rgba(242, 188, 22, 0); transform: scale(1); } } .bt-call-service i { font-size: 35px; color: #f2bc16; background: #1e3c72; padding: 15px; border-radius: 50%; position: relative; animation: pulseGlow 2s infinite; } .bt-call-service i::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; animation: rotateRing 7s linear infinite; } .service-item.style-two:hover { background: var(--secondary-color); } .service-item.style-two:hover h4 a, .service-item.style-two:hover .icon { color: white; } .service-item.style-three { padding: 0; margin-bottom: 30px; } .service-item.style-three .icon { line-height: 1; font-size: 85px; margin-bottom: 20px; color: var(--secondary-color); } .service-item.style-three h4 { margin-bottom: 15px; } .service-item.style-three .read-more { color: var(--heading-color); } /* Service Style Two */ .service-two-item { margin-bottom: 46px; } @media only screen and (min-width: 376px) { .service-two-item { display: -webkit-box; display: -ms-flexbox; display: flex; } } .service-two-item .icon { font-size: 55px; line-height: 1; color: var(--secondary-color); margin: 5px 0px 25px 30px; } .service-two-item .content { text-align: justify; } .service-two-item .content h4 { margin-bottom: 15px; } /* Service Style Two */ .service-item-two { padding: 40px; background: white; margin-bottom: 30px; -webkit-box-shadow: 10px 0 60px rgba(102, 83, 232, 0.1); box-shadow: 10px 0 60px rgba(102, 83, 232, 0.1); } @media only screen and (max-width: 375px) { .service-item-two { padding-left: 25px; padding-right: 25px; } } .service-item-two .image { height: 180px; position: relative; margin-bottom: 40px; } .service-item-two .image img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } .service-item-two .content .title { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); } /* Service Style Three */ .service-item-three .image { z-index: 1; position: relative; } .service-item-three .image::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0; background-color: #21242c; } .service-item-three .image:before { z-index: 2; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .service-item-three .image img { width: 100%; } .service-item-three .image .plus { z-index: 3; opacity: 0; color: white; position: absolute; left: 50%; top: 20%; font-size: 65px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } .service-item-three .content { z-index: 2; position: relative; margin: -80px 20px 50px 50px; } @media only screen and (max-width: 375px) { .service-item-three .content { margin-left: 10px; margin-right: 10px; } } .service-item-three .content .top-part { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; padding: 40px 50px 30px; -webkit-box-shadow: 10px 0 40px rgba(103, 77, 243, 0.1); box-shadow: 10px 0 40px rgba(103, 77, 243, 0.1); } @media only screen and (max-width: 479px) { .service-item-three .content .top-part { padding-left: 25px; padding-right: 25px; } } .service-item-three .content .top-part .icon { line-height: 1; font-size: 65px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-bottom: 5px; color: var(--secondary-color); } .service-item-three .content .top-part .number { position: absolute; right: 35px; top: 30px; opacity: 0.1; line-height: 1; font-size: 150px; font-weight: 600; color: transparent; -webkit-text-stroke: 1px; text-transform: uppercase; font-family: "Poppins", sans-serif; -webkit-text-stroke-color: var(--heading-color); } @media only screen and (max-width: 375px) { .service-item-three .content .top-part h4 { font-size: 20px; line-height: 1.5; } } .service-item-three .content .bottom-part { opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-top: -20px; background: white; padding: 0 50px 30px; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-box-shadow: 10px 40px 40px rgba(103, 77, 243, 0.1); box-shadow: 10px 40px 40px rgba(103, 77, 243, 0.1); } @media only screen and (max-width: 479px) { .service-item-three .content .bottom-part { padding-left: 25px; padding-right: 25px; } } .service-item-three .content .bottom-part p, .service-item-three .content .bottom-part .read-more { color: white; } .service-item-three:hover .image:before, .service-item-three.active .image:before { opacity: 0.5; } .service-item-three:hover .image .plus, .service-item-three.active .image .plus { top: 30%; opacity: 1; } .service-item-three:hover .top-part, .service-item-three.active .top-part { background: var(--secondary-color); } .service-item-three:hover .top-part .icon, .service-item-three:hover .top-part h4 a, .service-item-three.active .top-part .icon, .service-item-three.active .top-part h4 a { color: white; } .service-item-three:hover .top-part .number, .service-item-three.active .top-part .number { -webkit-text-stroke-color: white; } .service-item-three:hover .bottom-part, .service-item-three.active .bottom-part { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); background: var(--secondary-color); } @media only screen and (max-width: 991px) { .service-item-three .content .top-part { background: var(--secondary-color); } .service-item-three .content .top-part .icon, .service-item-three .content .top-part h4 a { color: white; } .service-item-three .content .top-part .number { -webkit-text-stroke-color: white; } .service-item-three .content .bottom-part { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); background: var(--secondary-color); } } @media only screen and (max-width: 375px) { .service-item-three.slick-active .image .plus { font-size: 35px; } } .service-three-slider { margin-left: -15px; margin-right: -15px; } .service-three-slider .service-item-three { margin-left: 15px; margin-right: 15px; } .service-three-slider .slick-dots { margin-top: 0; } .service-three-slider .slick-dots li { background: var(--secondary-color); } .service-three-slider .slick-dots li.slick-active { background: var(--primary-color); border-color: var(--primary-color); outline: 2px solid var(--primary-color); } /* Service Style Four */ .service-item-four { padding: 40px; background: white; margin-bottom: 30px; -webkit-box-shadow: 10px 0 60px rgba(102, 83, 232, 0.15); box-shadow: 10px 0 60px rgba(102, 83, 232, 0.15); } @media only screen and (max-width: 575px) { .service-item-four { margin-top: 0; } } @media only screen and (max-width: 375px) { .service-item-four { padding-left: 35px; padding-right: 35px; } } .service-item-four .icon { width: 93px; height: 93px; line-height: 1; font-size: 50px; line-height: 93px; text-align: center; margin-bottom: 30px; display: inline-block; color: var(--secondary-color); background: url(../images/services/icon-bg.png) no-repeat 100% 100%; } .service-item-four p { margin: 20px 0 5px; } .servcies-bg-shape { max-width: 50%; z-index: -1; position: absolute; right: 0; top: -20%; } /* Service Style Five */ .services-five-active { margin-left: -15px; margin-right: -15px; } .services-five-active .service-item-five { margin-left: 15px; margin-right: 15px; } .services-five-active .slick-dots { margin-top: 25px; } .services-five-active .slick-dots li { background: var(--secondary-color); } .services-five-active .slick-dots li.slick-active { background: var(--primary-color); border-color: var(--primary-color); outline: 2px solid var(--primary-color); } .service-item-five { overflow: hidden; position: relative; margin-bottom: 30px; } .service-item-five:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(21, 16, 30, 0.10196)), to(#1b1f2d)); background: -webkit-linear-gradient(rgba(21, 16, 30, 0.10196) 0%, #1b1f2d 100%); background: -o-linear-gradient(rgba(21, 16, 30, 0.10196) 0%, #1b1f2d 100%); background: linear-gradient(rgba(21, 16, 30, 0.10196) 0%, #1b1f2d 100%); } .service-item-five img { width: 100%; } .service-item-five .content { z-index: 2; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 400px; position: absolute; left: 0; bottom: -120px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 40px 50px 30px; } @media only screen and (max-width: 1599px) { .service-item-five .content { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 375px) { .service-item-five .content { bottom: 0; } } .service-item-five .content .icon { color: white; font-size: 55px; line-height: 85px; text-align: center; width: 100px; height: 85px; margin-bottom: 20px; display: inline-block; background: var(--secondary-color); } .service-item-five .content h4 { font-size: 24px; margin-bottom: 15px; } .service-item-five .content h4 a { color: white; } .service-item-five .content p { color: white; margin-bottom: 10px; } .service-item-five .content .read-more { color: var(--primary-color); } .service-item-five .content .bottom-part { opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } @media only screen and (max-width: 375px) { .service-item-five .content .bottom-part { display: none; } } .service-item-five .bg-text { font-size: 90px; font-weight: 600; color: transparent; -webkit-text-stroke: 1px; font-family: "Poppins", sans-serif; -webkit-text-stroke-color: white; position: absolute; left: 50%; bottom: 40px; opacity: 0.08; line-height: 1; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } @media only screen and (max-width: 375px) { .service-item-five .bg-text { font-size: 60px; } } .service-item-five:hover .content { bottom: 0; } .service-item-five:hover .bottom-part { opacity: 1; } /* Service Style Six */ .service-item-six { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; margin-bottom: 30px; padding: 40px 50px 20px; background: var(--lighter-color); } @media only screen and (max-width: 575px) { .service-item-six { margin-top: 0; } } @media only screen and (max-width: 375px) { .service-item-six { padding-left: 35px; padding-right: 35px; } } .service-item-six .icon { line-height: 1; line-height: 1; font-size: 50px; margin-bottom: 22px; display: inline-block; color: var(--secondary-color); } .service-item-six h4 { font-size: 24px; margin-bottom: 15px; } .service-item-six:hover { background: white; -webkit-box-shadow: 10px 0 60px rgba(102, 83, 232, 0.15); box-shadow: 10px 0 60px rgba(102, 83, 232, 0.15); } /* Service Details */ .service-details-content h3 { font-size: 30px; margin-bottom: 20px; } .service-details-content .image img { width: 100%; } /* Next Prev Service */ .next-prev-service { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 375px) { .next-prev-service { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .next-prev-service .show-all { margin: 0 15px 30px; } @media only screen and (max-width: 375px) { .next-prev-service .show-all { margin-left: auto; margin-right: auto; } } .next-prev-service .next-prev-item { margin-bottom: 30px; } .next-prev-service .next-prev-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { .next-prev-service .next-prev-item { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (max-width: 375px) { .next-prev-service .next-prev-item { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .next-prev-service .next-prev-item>div { margin-bottom: 20px; } @media only screen and (min-width: 768px) { .next-prev-service .next-prev-item>div:first-child { margin-right: 45px; } } .next-prev-service .next-prev-item .image { max-width: 150px; } @media only screen and (max-width: 375px) { .next-prev-service .next-prev-item .image { width: 100%; max-width: none; } .next-prev-service .next-prev-item .image img { max-width: 150px; } } .next-prev-service .next-prev-item:last-child { text-align: right; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (max-width: 375px) { .next-prev-service .next-prev-item:last-child { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .show-all { width: 25px; height: 25px; aspect-ratio: 1; display: inline-block; --c: conic-gradient(from -90deg, #674df3 90deg, #0000 0); background: var(--c), var(--c); background-size: 40% 40%; } /*******************************************************/ /***************** ## Features Style ******************/ /*******************************************************/ .feature-item { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; text-align: center; margin-bottom: 30px; padding: 30px 15px 25px; } .feature-item .icon { line-height: 1; font-size: 65px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-bottom: 10px; color: var(--secondary-color); } .feature-item h5, .feature-item h4, .feature-item p { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .feature-item .more-btn { font-size: 18px; width: 43px; height: 40px; line-height: 38px; display: inline-block; border: 1px solid var(--border-color); } .feature-item:hover { background: var(--secondary-color); } .feature-item:hover .icon, .feature-item:hover h5, .feature-item:hover h5 a, .feature-item:hover h4, .feature-item:hover p { color: white; } .feature-item:hover .more-btn { color: var(--secondary-color); background: var(--primary-color); border-color: var(--primary-color); } .feature-item.style-two, .feature-item.style-three { overflow: hidden; position: relative; padding: 35px 20px; -webkit-box-shadow: 10px 0 60px rgba(103, 77, 243, 0.1); box-shadow: 10px 0 60px rgba(103, 77, 243, 0.1); } @media only screen and (max-width: 767px) { .feature-item.style-two, .feature-item.style-three { margin-top: 0; } } .feature-item.style-two:before, .feature-item.style-three:before { content: ''; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; width: 195px; height: 133px; -webkit-transform: translate(-100%, -100%); -ms-transform: translate(-100%, -100%); transform: translate(-100%, -100%); background: url../../../images/background/feature-bg.png) no-repeat; } .feature-item.style-two .icon, .feature-item.style-three .icon { margin-bottom: 20px; } .feature-item.style-two:hover h4 a, .feature-item.style-three:hover h4 a { color: white; } .feature-item.style-two:hover:before, .feature-item.style-three:hover:before { opacity: 1; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .feature-item.style-three { background: white; } .feature-item.style-three .bg-image { z-index: 1; position: relative; width: 100%; height: 100%; z-index: -2; position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background-size: cover; background-position: center center; } .feature-item.style-three .bg-image::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.85; background-color: var(--secondary-color); } .feature-item.style-three:hover .bg-image { opacity: 1; } .feature-area-two { -webkit-transform: translateY(-75px); -ms-transform: translateY(-75px); transform: translateY(-75px); } /*******************************************************/ /****************** ## Partners Area ******************/ /*******************************************************/ .partner-item { height: 85px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 10px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 30px; background: var(--lighter-color); } @media only screen and (max-width: 375px) { .partner-item { height: 65px; } } .partner-item:hover { background: white; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } .partners-shapes .left-shape { position: absolute; left: 0; top: 0; z-index: -2; } .partners-shapes .right-shape { position: absolute; right: 0; bottom: 0; z-index: -2; } /* Partner Two */ .partner-item-two { margin-bottom: 30px; display: inline-block; } /*******************************************************/ /****************** ## Projects Area ******************/ /*******************************************************/ .project-slider-item { padding: 20px 0 20px 0; background: white; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } @media only screen and (min-width: 1200px) { .project-slider-item { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media only screen and (max-width: 575px) { .project-slider-item { padding-left: 0; padding-right: 0; } .project-slider-item .content { padding: 10px 20px !important; } } .project-slider-item .video, .project-slider-item .content { transition: 1s; } .project-slider-item .video { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin: 30px 120px 30px 0px; z-index: 1; position: relative; -webkit-transform: translate(50px); -ms-transform: translate(50px); transform: translate(50px); } .project-slider-item .video::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.3; background-color: var--heading-color; } @media only screen and (max-width: 375px) { .project-slider-item .video { margin-left: 25px; margin-right: 25px; } } @media only screen and (min-width: 1200px) { .project-slider-item .video { max-width: 46%; } } .project-slider-item .video:before { z-index: 1; } .project-slider-item .video img { width: 100%; } .project-slider-item .video .video-play { z-index: 2; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .project-slider-item .content { padding: 30px 15px 30px 40px; } @media only screen and (max-width: 375px) { .project-slider-item .content { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 1200px) { .project-slider-item .content { max-width: 40%; } } .project-slider-item .content h4 { margin-top: -10px; margin-bottom: 16px; line-height: 40px; } @media only screen and (min-width: 480px) { .project-slider-item .content h4 { font-size: 24px; } } @media only screen and (max-width: 375px) { .project-slider-item .content h4 { font-size: 20px; } } .project-slider-item .content .theme-btn { margin-top: 30px; } .project-slider-item .content:first-child { margin-left: auto; } .project-slider-active { -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } .project-slider-active:before { position: absolute; width: 70%; height: 100%; content: ''; left: 10%; top: 30%; z-index: -1; background: #f0f0f3; -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); -webkit-animation: semi_rotated_two 20s infinite; animation: semi_rotated_two 20s infinite; } .project-slider-active:after { position: absolute; width: 110vw; height: 50%; content: ''; left: 50%; bottom: 0; z-index: -1; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); background: var(--heading-color); } @media only screen and (min-width: 1200px) { .project-slider-active .project-slider-item { display: -webkit-box; display: -ms-flexbox; display: flex; } } .project-slider-active .project-slider-item.slick-active .video, .project-slider-active .project-slider-item.slick-active .content { opacity: 1; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .project-slider-active .slick-arrow { top: 50%; z-index: 2; position: absolute; } .project-slider-active .slick-arrow.prev-arrow { left: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .project-slider-active .slick-arrow.next-arrow { right: 0; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .project-shapes { left: 0; top: 0; z-index: -1; width: 100%; height: 70%; position: absolute; } .project-shapes .shape { z-index: -1; max-width: 35%; position: absolute; } .project-shapes .shape.one { left: 0; bottom: 10%; -webkit-animation: down-up-one 10s infinite; animation: down-up-one 10s infinite; } .project-shapes .shape.two { top: 5%; right: 0; -webkit-animation: down-up-one 10s infinite; animation: down-up-one 10s infinite; -webkit-animation-delay: 5s; animation-delay: 5s; } /* Project Item */ .project-item { position: relative; margin: 0 1px 1px 0; } .project-item .image { z-index: 1; position: relative; } .project-item .image::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.7; background-color: #1b1f2d; } .project-item .image img { width: 100%; } .project-item .image:before { z-index: 1; mix-blend-mode: multiply; } .project-item .content { position: absolute; left: 0; bottom: 0; z-index: 2; opacity: 0; width: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 40px 60px; -webkit-transform: translateY(-25px); -ms-transform: translateY(-25px); transform: translateY(-25px); } @media only screen and (max-width: 1599px) { .project-item .content { padding-left: 28px; padding-right: 28px; } } .project-item .content .number { top: 0; left: 50%; z-index: -1; opacity: 0.15; font-size: 250px; font-weight: 600; position: absolute; color: transparent; -webkit-text-stroke: 1px; text-transform: uppercase; font-family: "Poppins", sans-serif; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); -webkit-text-stroke-color: white; } @media only screen and (max-width: 1399px) { .project-item .content .number { font-size: 200px; } } @media only screen and (max-width: 767px) { .project-item .content .number { font-size: 150px; } } .project-item .content h3 { color: white; margin-bottom: 15px; } @media only screen and (min-width: 1400px) { .project-item .content h3 { font-size: 35px; } } @media only screen and (max-width: 767px) { .project-item .content h3 { font-size: 28px; } } .project-item .content p { color: white; line-height: 30px; margin-bottom: 25px; } .project-item:hover .content { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* Project Item Two */ .project-item-two { position: relative; margin-bottom: 30px; } .project-item-two img { width: 100%; } .project-item-two .content { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; padding: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(35, 41, 59, 0.75); } .project-item-two .content .plus { opacity: 0; color: white; font-size: 75px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-bottom: 15px; -webkit-transform: translateY(-25px); -ms-transform: translateY(-25px); transform: translateY(-25px); } .project-item-two .content h4 { opacity: 0; margin-bottom: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; line-height: 1.65; -webkit-transform: translateY(-25px); -ms-transform: translateY(-25px); transform: translateY(-25px); } .project-item-two .content h4 a { color: white; } .project-item-two:hover .content { opacity: 1; } .project-item-two:hover .content .plus, .project-item-two:hover .content h4 { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .project-item-two:hover .content .plus { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .project-area-three:after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 75%; background: var(--heading-color); } /* Project Item Three */ .project-three-active { margin-left: -15px; margin-right: -15px; } .project-three-active .project-item-three { margin-left: 15px; margin-right: 15px; } .project-three-active .slick-arrow { position: absolute; top: 50%; z-index: 3; right: 10%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (max-width: 767px) { .project-three-active .slick-arrow { top: 35px; right: 20px; width: 40px; height: 40px; font-size: 16px; line-height: 40px; } } .project-three-active .slick-arrow.prev-arrow { left: 10%; } @media only screen and (max-width: 767px) { .project-three-active .slick-arrow.prev-arrow { left: 20px; } } .project-item-three { z-index: 1; position: relative; } .project-item-three::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0; background-color: var(--heading-color); } .project-item-three:before { z-index: 1; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } @media only screen and (max-width: 767px) { .project-item-three img { width: 300px; } } .project-item-three .content { position: absolute; z-index: 2; left: 70px; bottom: 50px; } @media only screen and (max-width: 767px) { .project-item-three .content { left: 20px; bottom: 20px; } } .project-item-three .content .category { color: var(--heading-color); font-weight: 700; line-height: 1; text-transform: uppercase; background-color: var(--primary-color); padding: 8px 15px; margin-left: 20px; display: inline-block; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } @media only screen and (max-width: 767px) { .project-item-three .content .category { font-size: 14px; } } .project-item-three .content h4 { color: var(--heading-color); background-color: #fff; padding: 12px 20px; margin-left: 20px; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } @media only screen and (max-width: 767px) { .project-item-three .content h4 { font-size: 18px; } } .project-item-three .detail-btn { position: absolute; z-index: 2; right: 57px; bottom: 150px; font-size: 45px; color: #fff; border: 1px solid #fff; border-radius: 50%; width: 120px; height: 120px; text-align: center; line-height: 120px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); margin-bottom: 40px; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } @media only screen and (max-width: 991px) { .project-item-three .detail-btn { width: 60px; right: 30px; height: 60px; font-size: 25px; line-height: 60px; } } @media only screen and (max-width: 767px) { .project-item-three.big-item img { width: 452px; } } .project-item-three:hover:before { opacity: 0.65; } .project-item-three:hover .content .category { opacity: 1; margin-left: 0; } .project-item-three:hover .content h4 { opacity: 1; margin-left: 0; -webkit-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s; } .project-item-three:hover .detail-btn { opacity: 1; margin-bottom: 0; } /* Project Grid */ .project-grid-item { margin-bottom: 60px; } .project-grid-item .image { position: relative; } .project-grid-item .image img { width: 100%; } .project-grid-item .image:before { content: ''; z-index: 1; opacity: 0; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; mix-blend-mode: multiply; background: var(--heading-color); } .project-grid-item .image .plus { z-index: 2; color: white; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 75px; width: 100px; height: 100px; } .project-grid-item .image .plus:after, .project-grid-item .image .plus:before { width: 0; height: 0; content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; } .project-grid-item .content { padding: 15px 30px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } .project-grid-item .content h4 { margin-bottom: 0; } @media only screen and (max-width: 991px) { .project-grid-item .content h4 { font-size: 20px; } } .project-grid-item .content h5 { margin-bottom: 0; } .project-grid-item .content .detail-btn { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-left: 5px; color: var(--heading-color); width: 45px; height: 45px; background: var(--lighter-color); line-height: 45px; border-radius: 50%; text-align: center; } @media only screen and (max-width: 375px) { .project-grid-item .content .detail-btn { display: none; } } .project-grid-item:hover .image:before { opacity: 0.65; } .project-grid-item:hover .plus:after { width: 100%; height: 2px; } .project-grid-item:hover .plus:before { width: 2px; height: 100%; } .project-active .project-grid-item { margin-bottom: 30px; } @media only screen and (min-width: 376px) { .project-active .project-grid-item .content { padding-top: 8px; padding-bottom: 8px; } } /* Project Details */ @media only screen and (min-width: 376px) { .project-details-content h4 { font-size: 24px; } } @media only screen and (min-width: 992px) { .project-details-content h3 { font-size: 35px; } } .project-information { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; background: white; position: relative; padding: 35px 15px 2px; -ms-flex-pack: distribute; justify-content: space-around; border: 1px solid var(--border-color); } .project-information:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: -10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid var(--border-color); } .project-information .project-info-item { margin-bottom: 30px; margin-left: 15px; margin-right: 15px; } .next-prev-project .next-prev-item .image { max-width: 190px; position: relative; } .next-prev-project .next-prev-item .image img { max-width: 190px; } .next-prev-project .next-prev-item .image .detail-btn { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(27, 31, 46, 0.5); } .next-prev-project .next-prev-item .image .detail-btn i { width: 40px; height: 40px; line-height: 40px; text-align: center; color: var(--heading-color); background: var(--primary-color); } @media only screen and (min-width: 768px) { .next-prev-project .next-prev-item>div:first-child { margin-right: 30px; } } .next-prev-project .next-prev-item:hover .image .detail-btn { opacity: 1; } /*******************************************************/ /**************** ## Work Process Area ****************/ /*******************************************************/ .work-process-line { margin-bottom: -95px; } @media only screen and (max-width: 575px) { .work-process-line { margin-bottom: -60px; } } .work-process-item { margin-bottom: 30px; } @media only screen and (max-width: 575px) { .work-process-item { margin-top: 0; display: flex; flex-direction: row; align-items: center; } .number{ width: 180px !important; height: 80px !important; font-size: 24px !important; margin-left: 10px !important; } } .work-process-item .number { width: 80px; height: 80px; color: white; font-size: 24px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 700; line-height: 60px; margin-left: 40px; text-align: center; border-radius: 50%; margin-bottom: 30px; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); border: 10px solid white; font-family: "Poppins", sans-serif; background: var(--secondary-color); } .work-process-item .content { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; position: relative; background: var(--lighter-color); padding: 35px 28px 16px 30px; } .work-process-item .content p, .work-process-item .content h4 { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .work-process-item .content:before { position: absolute; content: ''; right: 33px; bottom: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-left: 22px solid transparent; border-bottom: 15px solid var(--lighter-color); } .work-process-item:hover .number { color: var(--heading-color); background: var(--primary-color); } .work-process-item:hover .content { background: var(--secondary-color); } .work-process-item:hover .content p, .work-process-item:hover .content h4 { color: white; } .work-process-item:hover .content:before { border-bottom-color: var(--secondary-color); } /* Work Process Two */ .work-process-item-two { margin-bottom: 30px; } @media only screen and (max-width: 575px) { .work-process-item-two { margin-top: 0; } } .work-process-item-two .image { margin-right: 50px; position: relative; } .work-process-item-two .image img { width: 100%; } .work-process-item-two .image .number { width: 55px; height: 55px; color: white; font-size: 18px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 600; line-height: 47px; text-align: center; border-radius: 50%; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); border: 4px solid white; font-family: "Poppins", sans-serif; background: var(--secondary-color); position: absolute; right: -27px; bottom: -27px; } .work-process-item-two .content { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-left: 50px; padding: 33px 28px 15px; background: var(--lighter-color); } @media only screen and (max-width: 767px) { .work-process-item-two .content { margin-left: 15px; padding-left: 20px; padding-right: 20px; } } .work-process-item-two .content h5 { margin-bottom: 10px; } @media only screen and (min-width: 376px) { .work-process-item-two .content h5 { font-size: 20px; } } .work-process-item-two .content p { line-height: 30px; } .work-process-item-two:hover .image .number { color: var(--heading-color); background: var(--primary-color); } .work-process-item-two:hover .content { background: white; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } .work-process-area-two .work-process-line-two { position: absolute; text-align: center; width: 100%; left: 0; top: 45%; z-index: -1; } /*******************************************************/ /****************** ## Team Members *******************/ /*******************************************************/ .team-member { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-top: 100px; text-align: center; margin-bottom: 30px; padding: 0 35px 40px; background: var(--lighter-color); } @media only screen and (max-width: 375px) { .team-member { padding-left: 25px; padding-right: 25px; } } .team-member img { margin-top: -100px; border-radius: 50%; margin-bottom: 30px; display: inline-block !important; } .team-member h4 { margin-bottom: 5px; } .team-member .social-style-two { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 25px; padding-top: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-top: 1px solid var(--border-color); } .team-member:not(:hover) .social-style-two a { background: white; } .team-member:hover { background: white; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.1); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.1); } .team-member.style-two { background: white; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.1); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.1); } .team-member.style-two .social-style-two a:not(:hover) { background: var(--lighter-color); } .team-area-two:before { position: absolute; left: 0; bottom: 0; content: ''; z-index: -1; width: 100%; height: 120%; background: var(--lighter-color); } .team-shapes .shape { z-index: -1; max-width: 45%; } .team-shapes .shape.one { position: absolute; left: 0; bottom: 20%; } .team-shapes .shape.two { position: absolute; right: 0; bottom: 5%; } /* Team Page */ .team-page-area .team-shapes .shape.one { top: -20%; } .team-page-area .team-shapes .shape.two { top: 70%; } .team-top-video { z-index: 1; position: relative; } .team-top-video::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.3; background-color: #1b1f2d; } .team-top-video:before { z-index: 0; } .team-top-video img { width: 100%; } .team-top-video .video-play { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: white; color: var(--secondary-color); } .team-top-video .video-play:hover { color: white; background: var(--secondary-color); } /*******************************************************/ /****************** ## Counter Style ******************/ /*******************************************************/ @media only screen and (min-width: 1200px) { .statistics-area .container, .statistics-area-two .container { max-width: 1470px; } } .statistics-inner { margin-top: -140px; -webkit-transform: translateY(140px); -ms-transform: translateY(140px); transform: translateY(140px); z-index: 1; position: relative; } .statistics-inner::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.9; background-color: var(--secondary-color); } @media only screen and (max-width: 479px) { .statistics-inner { padding-left: 25px; padding-right: 25px; } } .statistics-inner.style-two { margin-top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .statistics-area-four { z-index: 1; position: relative; } .statistics-area-four::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.9; background-color: var(--secondary-color); } .statistics-content .read-more { font-size: 18px; } .counter-text-wrap .count-text { display: block; } .counter-text-wrap .count-text.plus:after { content: '+'; } .counter-text-wrap .count-text.k-plus:after { content: 'k+'; } .counter-text-wrap .count-text.percent:after { content: '%'; } .counter-item { margin-bottom: 50px; } .counter-item>i { font-size: 55px; margin-bottom: 25px; display: flex; width: 100px; height: 100px; background: white; border-radius: 50%; text-align: center; color: var(--secondary-color); align-content: center; justify-content: center; align-items: center; } /* Counter Style Two */ .counter-item-two { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -1px; margin-bottom: -1px; padding: 33px 70px 25px; border: 1px solid var(--border-color); } @media only screen and (max-width: 1399px) { .counter-item-two { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter-item-two { padding-left: 30px; padding-right: 30px; } } @media only screen and (max-width: 479px) { .counter-item-two { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media only screen and (max-width: 375px) { .counter-item-two { padding-left: 40px; padding-right: 40px; } } .counter-item-two .icon { line-height: 1; font-size: 65px; margin-top: 15px; margin-right: 20px; color: var(--secondary-color); } .counter-item-two .count-text { font-size: 65px; font-weight: 500; } @media only screen and (max-width: 375px) { .counter-item-two .count-text { font-size: 50px; } } .counter-item-two .counter-title { display: block; font-size: 18px; margin-bottom: 10px; color: var(--heading-color); } /* Counter Style Three */ .counter-item-three { padding: 50px; margin-bottom: 28px; background: #23293b; } @media only screen and (max-width: 575px) { .counter-item-three { margin-top: 0; } } .counter-item-three>i { font-size: 55px; margin-bottom: 30px; display: inline-block; color: var(--primary-color); } @media only screen and (min-width: 1400px) { .statistics-two-content { padding-left: 50px; } } /* Skill Counter */ .circle-progress-item { margin-bottom: 30px; padding: 40px 30px 20px 40px; -webkit-box-shadow: 10px 0 60px rgba(102, 83, 232, 0.15); box-shadow: 10px 0 60px rgba(102, 83, 232, 0.15); } .circle-progress-item .progress-content { width: -webkit-max-content; width: -moz-max-content; width: max-content; position: relative; margin-bottom: 20px; } .circle-progress-item .progress-content .h2 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .circle-progress-item h4 { font-size: 24px; margin-bottom: 12px; } .skills-area { z-index: 1; position: relative; } .skills-area::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 1; background-color: var(--lighter-color); } .skills-area:before { top: -60%; height: 120%; } @media only screen and (max-width: 991px) { .skills-area:before { top: -40%; } } @media only screen and (max-width: 575px) { .skills-area:before { top: -20%; } } .skills-bg { position: absolute; right: 0; bottom: 0; z-index: -1; width: 46vw; height: 100%; background-size: cover; background-position: center center; } @media only screen and (max-width: 991px) { .skills-bg { width: 100%; height: 70%; } } /* Team Circle Progress */ @media only screen and (min-width: 480px) { .team-circle-progress { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .team-circle-progress .circle-progress-counter { margin-right: 30px; position: relative; width: 110px; } @media only screen and (max-width: 479px) { .team-circle-progress .circle-progress-counter { margin-bottom: 10px; } } .team-circle-progress .circle-progress-counter .h2 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 36px; color: var(--secondary-color); } .team-circle-progress .circle-progress-counter .h2 span { font-size: 16px; } .team-circle-progress .content p { margin-bottom: 5px; } /*******************************************************/ /****************** ## Pricing Plan *******************/ /*******************************************************/ .pricing-plan-item { background: white; position: relative; padding: 45px 50px; margin-bottom: 30px; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } @media only screen and (max-width: 479px) { .pricing-plan-item { padding-left: 25px; padding-right: 25px; } } .pricing-plan-item .badge { position: absolute; top: 0; opacity: 0; right: 20px; font-size: 18px; font-weight: 500; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 8px 20px; visibility: hidden; background: orange; } .pricing-plan-item .title { font-size: 20px; margin-bottom: 0; letter-spacing: 1px; text-transform: uppercase; } .pricing-plan-item .price-count { display: block; margin-bottom: 8px; color: var(--secondary-color); } @media only screen and (max-width: 991px) { .pricing-plan-item .price { font-size: 40px; } } @media only screen and (max-width: 375px) { .pricing-plan-item .price { font-size: 35px; } } .pricing-plan-item .price:before { content: '$'; } .pricing-plan-item .price:after { font-size: 16px; font-weight: 500; color: var(--base-color); content: '/Per month'; } .pricing-plan-item .theme-btn { width: 100%; margin-top: 25px; margin-bottom: 35px; } .pricing-plan-item h5 { margin-bottom: 20px; display: inline-block; border-bottom: 1px solid; } .pricing-plan-item ul li { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1.5; } @media only screen and (min-width: 1400px) { .pricing-plan-item ul li { font-size: 18px; } } .pricing-plan-item ul li:not(:last-child) { margin-bottom: 15px; } .pricing-plan-item ul li:before { content: "\f0da"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 10px; } .pricing-plan-item ul li a:hover { color: var(--secondary-color); text-decoration: underline; } .pricing-plan-item:hover .badge { opacity: 1; visibility: visible; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .pricing-plan-item.style-two { padding: 30px 44px 0; margin-bottom: 65px; } .pricing-plan-item.style-two:before { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 155px; height: 235px; background: url(../images/background/pricing-bg.png) no-repeat center/cover; } .pricing-plan-item.style-two .title { text-align: center; } .pricing-plan-item.style-two .price-count { text-align: center; } .pricing-plan-item.style-two .icon { line-height: 1; font-size: 96px; text-align: center; color: var(--secondary-color); margin: 25px 0 15px; } @media only screen and (max-width: 1399px) { .pricing-plan-item.style-two .icon { font-size: 65px; } } .pricing-plan-item.style-two .price { margin-top: 22px; display: inline-block; } @media only screen and (max-width: 1399px) { .pricing-plan-item.style-two .price { font-size: 30px; } } .pricing-plan-item.style-two .theme-btn { margin-top: 5px; margin-bottom: 0; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px); } .pricing-plan-item.style-three .theme-btn { margin-bottom: 0; } .pricing-plan-item.style-three .price { display: block; margin-top: 25px; margin-bottom: 25px; color: var(--secondary-color); } .price-shapes .shape { z-index: -1; position: absolute; } .price-shapes .shape.one { left: 0; bottom: 0; max-width: 35%; } .price-shapes .shape.two { top: 0; right: 0; max-width: 70%; -webkit-animation: down-up-one 5s infinite; animation: down-up-one 5s infinite; } .pricing-wrapper { position: relative; } .pricing-wrapper:after { content: ''; z-index: -1; position: absolute; left: -80px; bottom: -40px; width: calc(100% + 160px); height: 90%; background: var(--lighter-color); } /* Pricing Page */ @media only screen and (min-width: 480px) { .price-plan-page-bottom .pricing-plan-item { padding-left: 40px; padding-right: 40px; } } .price-plan-page-bottom .pricing-plan-item .price { display: block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .price-plan-page-bottom .pricing-plan-item .price { font-size: 33px; } } .price-plan-page-bottom .pricing-plan-item .theme-btn { width: auto; padding-top: 9px; padding-bottom: 9px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .price-plan-page-bottom .pricing-plan-item .theme-btn { font-size: 14px; padding-left: 28px; padding-right: 28px; } } .price-page-shapes .shape { z-index: -1; position: absolute; } .price-page-shapes .shape.one { left: 0; bottom: 0; max-width: 70%; -webkit-animation: leftRightOne 5s 3s infinite; animation: leftRightOne 5s 3s infinite; } .price-page-shapes .shape.two { bottom: 8%; right: 0; max-width: 50%; -webkit-animation: leftRightOne 5s infinite; animation: leftRightOne 5s infinite; } /* Pricing Tab */ @media only screen and (max-width: 1199px) { .pricing-tab-wrap { margin-top: 0; margin-bottom: 55px; } } .pricing-tab { padding: 15px 35px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: var(--secondary-color); } @media only screen and (max-width: 375px) { .pricing-tab { padding-left: 25px; padding-right: 25px; } } .pricing-tab li:first-child button:after, .pricing-tab li:last-child button:before { content: ''; width: 22px; height: 22px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; border-radius: 50%; } .pricing-tab li:first-child button:after { margin-left: 20px; margin-right: 4px; } .pricing-tab li:last-child button:before { margin-right: 20px; margin-left: 4px; } .pricing-tab li:first-child button:before { position: absolute; width: 50px; height: 22px; content: ''; top: 50%; right: 0; z-index: -1; background: white; border-radius: 10px; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .pricing-tab li button { padding: 0; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; color: #fefeff; font-size: 16px; font-weight: 700; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; background: transparent; } @media only screen and (max-width: 375px) { .pricing-tab li button { font-size: 14px; } } .pricing-tab li button i { margin-left: 10px; } .pricing-tab li button:focus, .pricing-tab li button:hover { color: #fefeff; } .pricing-tab li:first-child button.active:after, .pricing-tab li:last-child button.active:before { background: var(--primary-color); } /*******************************************************/ /*************** ## Testimonials Area *****************/ /*******************************************************/ .testi-image-slider { max-width: 400px; margin-left: -3px; margin-right: -3px; } .testi-image-item { margin: 3px; position: relative; padding-bottom: 70px; } .testi-image-item img { width: 75px; height: 75px; cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-radius: 50%; border: 5px solid transparent; } .testi-image-item:after { position: absolute; content: ''; right: 10px; bottom: -30px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-bottom: 15px solid transparent; border-right: 22px solid transparent; } .testi-image-item:before { position: absolute; left: 0; content: ''; bottom: 39px; width: 80%; height: 3px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: transparent; } .testi-image-item.slick-current img { border-color: white; -webkit-box-shadow: 0px 0 10px rgba(103, 77, 243, 0.25); box-shadow: 0px 0 10px rgba(103, 77, 243, 0.25); } .testi-image-item.slick-current:after { bottom: -3px; border-bottom-color: var(--lighter-color); } .testi-image-item.slick-current:before { background: var(--primary-color); } .testi-content-slider { padding: 30px 40px; background: var(--lighter-color); } @media only screen and (max-width: 479px) { .testi-content-slider { padding-left: 25px; padding-right: 25px; } } .testi-content-slider:before { position: absolute; width: 100%; height: 1px; content: ''; left: 0; top: -44px; background: var(--border-color); } .testi-content-item p { line-height: 1.75; } @media only screen and (min-width: 376px) { .testi-content-item p { font-size: 20px; } } .testi-content-item .author { margin-top: 20px; position: relative; padding-left: 75px; } @media only screen and (max-width: 375px) { .testi-content-item .author { padding-left: 65px; } } .testi-content-item .author .h4 { display: block; margin-bottom: 0; } @media only screen and (max-width: 479px) { .testi-content-item .author .h4 { font-size: 18px; } } .testi-content-item .author:before { position: absolute; content: "\f10e"; font-size: 55px; left: 1px; top: 50%; font-weight: 300; color: var(--secondary-color); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-family: "Font Awesome 6 Free"; } @media only screen and (max-width: 375px) { .testi-content-item .author:before { font-size: 45px; } } .testimonial-right-part { position: relative; z-index: 1; padding-left: 15px; padding-right: 20%; } .testimonial-right-part .testi-image-over { position: absolute; right: 0; bottom: 50%; max-width: 260px; padding: 35px 35px 40px; background: var(--primary-color); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } @media only screen and (max-width: 575px) { .testimonial-right-part .testi-image-over { padding: 20px 25px 25px; } .testimonial-right-part .testi-image-over img { display: none; } } @media only screen and (max-width: 375px) { .testimonial-right-part .testi-image-over { max-width: 200px; } } .testimonial-right-part .testi-image-over h3 { margin-bottom: 25px; letter-spacing: -1px; } @media only screen and (max-width: 575px) { .testimonial-right-part .testi-image-over h3 { font-size: 25px; margin-bottom: 0; } } @media only screen and (max-width: 375px) { .testimonial-right-part .testi-image-over h3 { font-size: 20px; } } .dot-shapes img { z-index: -1; max-width: 40%; position: absolute; } .dot-shapes img:first-child { top: -40px; left: -65px; -webkit-animation: leftRightOne 10s infinite; animation: leftRightOne 10s infinite; } .dot-shapes img:last-child { right: -30px; bottom: 100px; -webkit-animation: upDownLeft 20s infinite; animation: upDownLeft 20s infinite; } .testimonial-item { padding: 40px 60px 30px; background: var(--lighter-color); } @media only screen and (min-width: 768px) { .testimonial-item { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media only screen and (max-width: 479px) { .testimonial-item { padding-left: 25px; padding-right: 25px; } } .testimonial-item .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 30px; margin-bottom: 25px; } .testimonial-item .image img { width: 88px; height: 88px; border-radius: 50%; border: 3px solid white; } .testimonial-item .testi-header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 8px; } .testimonial-item .testi-header h4 { margin-right: 15px; } @media only screen and (max-width: 375px) { .testimonial-item .testi-header h4 { font-size: 18px; } } .testimonial-item .testi-header h4:before { content: ',,'; line-height: 1; font-size: 30px; margin-right: 5px; display: inline-block; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .testimonial-item .testi-header h4:after { content: ',,'; line-height: 1; font-size: 30px; margin-left: 5px; } .testimonial-item .testi-header .ratting { margin-bottom: 10px; } .testimonial-item .testi-footer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 15px; } .testimonial-item .testi-footer .icon { line-height: 1; font-size: 60px; margin-right: 20px; color: var(--secondary-color); } @media only screen and (max-width: 375px) { .testimonial-item .testi-footer .icon { font-size: 40px; margin-right: 15px; } } .testimonial-item .testi-footer .title h4 { margin-bottom: 0; } @media only screen and (max-width: 375px) { .testimonial-item .testi-footer .title h4 { font-size: 18px; } } .testimonial-item.style-two { padding: 0 0 30px; margin-bottom: 45px; background: transparent; border-bottom: 1px solid var(--border-color); } .testimonial-slider { margin-left: -15px; margin-right: -15px; } .testimonial-slider .testimonial-item { margin-left: 15px; margin-right: 15px; } @media only screen and (min-width: 768px) { .testimonial-slider .testimonial-item { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media only screen and (min-width: 1200px) { .testimonial-slider .slick-list { padding-right: 500px; margin-right: -500px; } } .testimonial-slider .slick-dots { margin-top: 40px; } .testimonial-slider .slick-dots li { background: var(--secondary-color); } .testimonial-slider .slick-dots li.slick-active { background: var(--primary-color); border-color: var(--primary-color); outline: 2px solid var(--primary-color); } .testimonial-three-slider .slick-dots { margin-top: 50px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .testimonial-three-slider .slick-dots li { background: var(--secondary-color); } .testimonial-three-slider .slick-dots li.slick-active { background: var(--primary-color); border-color: var(--primary-color); outline: 2px solid var(--primary-color); } .testimonial-four-image { background-size: cover; background-position: center top; } @media only screen and (min-width: 992px) { .testimonial-four-image { position: absolute; left: 0; top: 0; width: 50%; height: 100%; } } @media only screen and (max-width: 991px) { .testimonial-four-image { width: 100%; height: 500px; } } /*******************************************************/ /******************** ## Blog Area ********************/ /*******************************************************/ .item-149.module .mega-services-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding: 30px; background: #fff; border-radius: 15px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); min-width: 600px; } .service-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 15px; border-radius: 12px; text-decoration: none; background: #f9f9f9; transition: all 0.3s ease; position: relative; overflow: hidden; } .service-item i { font-size: 70px; color: #04509c; margin-bottom: 12px; transition: 0.3s; } .service-item span { font-size: 15px; font-weight: 700; color: #333; text-align: center; transition: 0.3s; } /* افکت هاور */ .service-item:hover { background: #04509c; transform: translateY(-6px); box-shadow: 0 15px 35px rgba(4,80,156,0.3); } .service-item:hover i { color: #fcc415; transform: scale(1.2); } .service-item:hover span { color: #fff; } /* افکت خط نورانی پایین */ .service-item::after { content: ""; position: absolute; bottom: 0; right: 0; height: 4px; width: 0%; background: #fcc415; transition: 0.3s; } .service-item:hover::after { width: 100%; } div#mod-custom149 { margin-top: 25px; } .services-snowa-classpage span.badge.bg-danger.featured-article-badge { display: none; } .services-snowa-classpage .mega-services-menu { grid-template-columns: repeat(6, 1fr); width: 70%; margin: 0 auto; gap: 25px; padding: 30px; background: #fff; border-radius: 15px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); min-width: 600px; display: grid; } /* ریسپانسیو */ @media (max-width: 768px) { .mega-services-menu { grid-template-columns: repeat(2, 1fr) !important; min-width: auto !important; width: 100% !important; } } .blog-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .article-list .article { margin-bottom: 30px; padding: 10px; border: 1px solid #d5d3d3; border-radius: 10px; } .blogsnowa #sp-right .sp-module, .blogsnowa div#sp-component { border: 2px solid #0000004a !important; padding: 20px; border-radius: 10px; } #sp-right .btn-consult { padding: 12px 15px; font-size: 16px; } .article-info { background: #e5e5e56b; padding: 2px; } #sp-right .sp-module .sp-module-title { background: #bacf201a; padding: 10px; border-radius: 10px; } .article-list .article .article-header h2 { font-size: 20px; line-height: 35px; background: #e5e5e56b; padding: 10px; border-radius: 10px; } .blog-meta li { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1.5; margin-bottom: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .article-introtext p { text-align: justify; line-height: 25px; font-size: 14px !important; } .blog-meta li i { margin: -3px 8px 0 0; } .blog-meta li:not(:last-child):after { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-left: 22px; margin-right: 22px; background: var(--base-color); } .blog-meta-two { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Poppins", sans-serif; } .blog-meta-two .tag { font-weight: 600; padding: 1px 15px; border-radius: 5px; text-transform: uppercase; border: 1px solid var(--border-color); } .blog-meta-two .tag:hover { color: var(--heading-color); background: var(--primary-color); border-color: var(--primary-color); } .blog-meta-two .author { font-weight: 600; color: var(--secondary-color); text-transform: uppercase; } .blog-meta-two a { margin-bottom: 10px; } .blog-meta-two a i { margin-right: 5px; } .blog-meta-two a:not(:last-child) { margin-right: 40px; } @media only screen and (max-width: 767px) { .blog-meta-two a:not(:last-child) { margin-right: 15px; } } .blog-item { margin-bottom: 30px; } .blog-item .image img { width: 100%; } .blog-item .content { padding: 33px 40px 30px; } @media only screen and (max-width: 479px) { .blog-item .content { padding-left: 25px; padding-right: 25px; } } .blog-item .content .blog-meta li:after { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: var(--base-color); } @media only screen and (max-width: 479px) { .blog-item .content .blog-meta li:after { margin-left: 10px; margin-right: 10px; } } .blog-item .content h4 { margin-bottom: 15px; letter-spacing: -1px; } @media only screen and (max-width: 375px) { .blog-item .content h4 { font-size: 20px; } } @media only screen and (min-width: 992px) { .blog-item .content h4 { font-size: 24px; } } .blog-item .content .author { margin-bottom: 20px; } .blog-item .content .author img { width: 40px; height: 40px; border-radius: 50%; } .blog-item .content .author i { margin-left: 10px; margin-right: 5px; } .blog-item .content .author a { font-weight: 500; color: var(--secondary-color); } .blog-item .content .author-more { margin-top: 30px; padding-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid var(--border-color); } .blog-item .content .author-more .author, .blog-item .content .author-more .read-more { margin-top: 15px; margin-bottom: 0; } .blog-item.style-two .content { padding-top: 0; } .blog-item.style-two .blog-meta { color: white; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; position: relative; border-radius: 5px; padding: 10px 25px 0; margin: -25px -15px 33px; background: var(--secondary-color); } .blog-item.style-two .blog-meta li a { color: white; } .blog-item.style-two .blog-meta li:after { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; } @media only screen and (max-width: 479px) { .blog-item.style-two .blog-meta li:after { margin-left: 10px; margin-right: 10px; } } .blog-item.style-two:hover .blog-meta { color: var(--heading-color); background: var(--primary-color); } .blog-item.style-two:hover .blog-meta li a { color: var(--heading-color); } .blog-item.style-two:hover .blog-meta li:after { background: var(--heading-color); } .blog-item.style-three { margin-bottom: 60px; } .blog-item.style-three .image, .blog-item.style-three .content { width: 410px; max-width: 95%; } .blog-item.style-three .content { margin-top: -25%; margin-left: auto; background: white; position: relative; } .blog-item.style-four { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; padding: 40px 50px; border: 1px solid var(--border-color); } @media only screen and (min-width: 768px) { .blog-item.style-four { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (max-width: 479px) { .blog-item.style-four { padding-left: 25px; padding-right: 25px; } } .blog-item.style-four .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 250px; margin-right: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-item.style-four .image { margin-right: 40px; } } @media only screen and (max-width: 767px) { .blog-item.style-four .image { margin: 0 0 30px; } } .blog-item.style-four .content { padding: 0; width: 100%; -webkit-box-shadow: none; box-shadow: none; } .blog-item.style-four .content h4 a:hover { color: var(--heading-color); text-decoration: underline; } @media only screen and (max-width: 375px) { .blog-item.style-four .content .blog-meta { font-size: 15px; } .blog-item.style-four .content .blog-meta i { display: none; } } .blog-item.style-four .content .author-more { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media only screen and (max-width: 375px) { .blog-item.style-four .content .author-more { font-size: 15px; } } .blog-item.style-four .content .author-more .author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-item.style-four .content .author-more .author:after { width: 5px; height: 5px; content: ''; border-radius: 50%; margin-left: 40px; margin-right: 40px; background: var(--secondary-color); } @media only screen and (max-width: 375px) { .blog-item.style-four .content .author-more .author:after { margin-left: 10px; margin-right: 10px; } } .blog-item.style-four:hover { border-color: white; -webkit-box-shadow: 10px 0 60px rgba(103, 77, 243, 0.1); box-shadow: 10px 0 60px rgba(103, 77, 243, 0.1); } /* Blog Standard */ .blog-standard-item { margin-bottom: 50px; } @media only screen and (min-width: 1200px) { .blog-standard-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .blog-standard-item .image { margin-bottom: 30px; } @media only screen and (min-width: 1200px) { .blog-standard-item .image { width: 48%; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-bottom: 0; margin-right: 50px; } } .blog-standard-item .content h4 { line-height: 1.48; margin-bottom: 18px; } @media only screen and (min-width: 376px) { .blog-standard-item .content h4 { font-size: 24px; } } .blog-standard-item .content p { margin-bottom: 20px; } /* Blog Details */ .blog-details-content h3 { line-height: 1.4; } @media only screen and (max-width: 575px) { .blog-details-content h3 { font-size: 28px; } } @media only screen and (max-width: 479px) { .blog-details-content h3 { font-size: 25px; } } .blog-details-content>h4 { margin-bottom: 15px; } @media only screen and (min-width: 376px) { .blog-details-content>h4 { font-size: 24px; } } .blog-details-content p { margin-bottom: 15px; } .tag-share { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tag-share .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 25px; } .tag-share .item h5 { margin: 0 20px 0 0; } .tag-share .item .tag-coulds a { padding-top: 0; padding-bottom: 0; border-radius: 5px; text-transform: capitalize; } blockquote { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 33px 50px 30px; border: 1px solid var(--border-color); margin: 30px 0 40px 0; } @media only screen and (max-width: 575px) { blockquote { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 375px) { blockquote { padding-left: 15px; padding-right: 15px; } } blockquote:before { content: ""; line-height: 1; font-size: 45px; margin-right: 25px; font-family: "Flaticon"; color: var(--secondary-color); } @media only screen and (max-width: 479px) { blockquote:before { font-size: 35px; margin-right: 15px; } } @media only screen and (max-width: 575px) { blockquote h4 { font-size: 18px; } } @media only screen and (max-width: 375px) { blockquote h4 { font-size: 16px; } } blockquote .name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 375px) { blockquote .name { font-size: 14px; } } blockquote .name:before { content: ''; width: 40px; height: 3px; margin-right: 20px; background: var(--primary-color); } @media only screen and (max-width: 375px) { blockquote .name:before { width: 20px; margin-right: 15px; } } /* Comments */ @media only screen and (min-width: 376px) { .comment-title { font-size: 24px; } } .comment-body { padding-top: 40px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); } .comment-body:first-child { border-top: 1px solid var(--border-color); } @media only screen and (min-width: 480px) { .comment-body { display: -webkit-box; display: -ms-flexbox; display: flex; } } .comment-body .author-thumb { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 85px; margin-right: 30px; margin-bottom: 15px; } .comment-body .author-thumb img { border-radius: 50%; } .comment-body .content h5 { margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .comment-body .content h5 .theme-btn { font-size: 16px; border-radius: 5px; padding: 10px 18px; font-family: "Poppins", sans-serif; } .comment-body .content .date { display: block; margin: -2px 0 8px; } .admin-comment .comment-body { border: none; padding: 35px 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--lighter-color); } @media only screen and (max-width: 575px) { .admin-comment .comment-body { display: block; padding-left: 25px; padding-right: 25px; } } .admin-comment .comment-body .author-thumb { max-width: 140px; } @media only screen and (min-width: 576px) { .admin-comment .comment-body .author-thumb { margin-bottom: 0; } } /* Next Prev Post */ .next-prev-post { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .next-prev-post .post-item { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 340px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } .next-prev-post .post-item .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 90px; margin-right: 30px; } .next-prev-post .post-item h5 { line-height: 1.65; margin-bottom: 5px; } .next-prev-post .post-item h5 a { color: var(--heading-color); } .next-prev-post .post-item h5 a:hover { text-decoration: underline; } .next-prev-post .post-item .date i { margin-right: 5px; } /* Comment Form */ .comment-form { padding: 50px 50px 60px; } @media only screen and (max-width: 375px) { .comment-form { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 376px) { .comment-form h4 { font-size: 24px; } } .comment-form .form-group label { position: absolute; top: 0; right: 0; } .comment-form .form-control { font-size: 18px; border-radius: 0; padding: 15px 0 12px; border-width: 0 0 1px; background-color: transparent; border-color: var(--border-color); } .comment-form .form-control::-webkit-input-placeholder { color: var(--heading-color); } .comment-form .form-control:-ms-input-placeholder { color: var(--heading-color); } .comment-form .form-control::-ms-input-placeholder { color: var(--heading-color); } .comment-form .form-control::placeholder { color: var(--heading-color); } .comment-form .form-check { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; } .comment-form .form-check .form-check-input[type=radio] { width: 24px; height: 24px; padding: 0; -webkit-box-flex: 0; -ms-flex: none; flex: none; cursor: pointer; -webkit-box-shadow: none; box-shadow: none; position: relative; margin-right: 20px; border-radius: 5px; background: transparent; border: 2px solid rgba(32, 78, 207, 0.2); } .comment-form .form-check .form-check-input[type=radio]:after { content: ''; width: 7px; height: 7px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; background: var(--border-color); } .comment-form .form-check .form-check-input[type=radio]:checked:after { background: var(--secondary-color); } .comment-form .form-check label { font-weight: 400; position: relative; } /*******************************************************/ /****************** ## Contact Forms ******************/ /*******************************************************/ .form-style-one .form-group { margin-bottom: 25px; } .form-style-one .form-control { font-size: 18px; font-weight: 500; border-radius: 0; padding: 10px 0 15px; border-width: 0 0 1px; } .form-style-one .form-control:focus { border-color: var(--heading-color); } .form-style-two .form-group { margin-bottom: 30px; } .form-style-two .form-control { border: none; font-size: 18px; border-radius: 0; font-weight: 500; } @media only screen and (min-width: 576px) { .form-style-two .form-control { padding: 22px 35px; } } .contact-form { -webkit-box-shadow: 10px 0 60px rgba(102, 83, 232, 0.1); box-shadow: 10px 0 60px rgba(102, 83, 232, 0.1); } @media only screen and (max-width: 479px) { .contact-form { padding-left: 25px; padding-right: 25px; } } .contact-info-part { max-width: 415px; padding: 40px 60px; background: rgba(103, 77, 243, 0.07); } @media only screen and (max-width: 479px) { .contact-info-part { padding-left: 25px; padding-right: 25px; } } .contact-info-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact-info-item .icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; color: white; font-size: 22px; margin-right: 20px; width: 50px; height: 50px; background: var(--secondary-color); line-height: 50px; border-radius: 50%; text-align: center; } .contact-info-item h5 { margin-bottom: 0; } @media only screen and (max-width: 375px) { .contact-info-item h5 { font-size: 16px; } } .contact-info-item:not(:last-child) { margin-bottom: 20px; } /* Contact Info Box */ .contact-info-box { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; margin-bottom: 30px; padding: 50px 40px 45px; border: 1px solid var(--border-color); } @media only screen and (min-width: 376px) { .contact-info-box { font-size: 18px; } } .contact-info-box .icon { font-size: 55px; margin-bottom: 30px; color: var(--secondary-color); } @media only screen and (max-width: 375px) { .contact-info-box .icon { font-size: 40px; } } .contact-info-box h4 { margin-bottom: 15px; } @media only screen and (min-width: 376px) { .contact-info-box h4 { font-size: 24px; } } .contact-info-box>a, .contact-info-box>span { display: inline-block; } .contact-info-box>b { font-weight: 500; color: var(--secondary-color); } .contact-info-box:hover { border-color: white; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.2); } /* Location Map */ .our-location iframe { height: 750px; } @media only screen and (max-width: 1399px) { .our-location iframe { height: 600px; } } @media only screen and (max-width: 991px) { .our-location iframe { height: 500px; } } @media only screen and (max-width: 575px) { .our-location iframe { height: 400px; } } /* Contact Page Form */ .contact-form-wrap { margin-top: -165px; padding: 130px 110px; } @media only screen and (max-width: 991px) { .contact-form-wrap { margin-top: -100px; padding: 100px 50px; } } @media only screen and (max-width: 479px) { .contact-form-wrap { padding: 60px 25px; } } /* Contact Form Validation */ .has-error .with-errors { color: red; margin-top: 5px; margin-bottom: -15px; } #msgSubmit { margin-bottom: 0; margin-top: 10px; } /*******************************************************/ /******************* ## FAQs Area *********************/ /*******************************************************/ .accordion-item { z-index: 1; border: none; padding: 20px 25px; position: relative; border-radius: 0 !important; -webkit-box-shadow: 10px 0 60px rgba(102, 83, 232, 0.15); box-shadow: 10px 0 60px rgba(102, 83, 232, 0.15); } @media only screen and (max-width: 375px) { .accordion-item { padding-left: 20px; padding-right: 20px; } } .accordion-item:not(:last-child) { margin-bottom: 15px; } .accordion-item .accordion-button { padding: 0; -webkit-box-shadow: none; box-shadow: none; font-weight: 700; position: inherit; color: var(--heading-color); background: transparent; } @media only screen and (min-width: 376px) { .accordion-item .accordion-button { font-size: 18px; } } .accordion-item .accordion-button:focus { -webkit-box-shadow: none; box-shadow: none; } .accordion-item .accordion-body { padding: 0; } .accordion-item .accordion-body p { margin: 10px 0 0; } .style-two .accordion-item { z-index: 1; -webkit-box-shadow: none; box-shadow: none; position: relative; background: transparent; } .style-two .accordion-button:after { content: '\f06e'; font-weight: 400; background-image: none; color: var(--secondary-color); font-family: 'Font Awesome 6 Free'; } .style-two .accordion-button:before { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border: 1px solid transparent; -webkit-box-shadow: 3px 0 60px rgba(103, 77, 243, 0.1); box-shadow: 3px 0 60px rgba(103, 77, 243, 0.1); } .style-two .accordion-button.collapsed:before { border-color: var(--border-color); } .style-two .accordion-button.collapsed:after { content: '\f070'; color: var(--heading-color); } .style-three .accordion-button { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (max-width: 767px) { .style-three .accordion-button { font-size: 16px; } } .style-three .accordion-button:after { content: '\f06e'; font-weight: 400; background-image: none; color: var(--secondary-color); font-family: 'Font Awesome 6 Free'; } .style-three .accordion-button.collapsed:after { content: '\f070'; color: var(--heading-color); } /* Team Page */ .faq-images { position: relative; padding-left: 100px; } @media only screen and (max-width: 479px) { .faq-images { padding-left: 50px; } } .faq-images .logo { position: absolute; left: 0; top: 50%; padding: 40px 45px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: var(--secondary-color); -webkit-clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); } @media only screen and (max-width: 479px) { .faq-images .logo { max-width: 150px; padding: 20px 25px; } } @media only screen and (max-width: 375px) { .faq-images .logo { max-width: 100px; } } /*******************************************************/ /*********************** ## Shop ***********************/ /*******************************************************/ .product-item { text-align: center; margin-bottom: 55px; } .product-item .image { position: relative; margin-bottom: 28px; } .product-item .image .social-style-two { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; opacity: 0; margin-top: -20px; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 100%; } .product-item .image .social-style-two a { color: white; background: var(--secondary-color); } .product-item .image .social-style-two a:hover { color: var(--heading-color); background: var(--primary-color); } @media only screen and (min-width: 376px) { .product-item .content h5 { font-size: 20px; } } .product-item .content .price { font-size: 18px; font-weight: 500; } .product-item .content .price:before { content: '$'; } .product-item:hover .social-style-two { opacity: 1; margin-top: 0; } .shop-shorter { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .shop-shorter .filter-part { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .shop-shorter .filter-part i { font-size: 30px; margin-right: 20px; color: var(--secondary-color); } .shop-shorter .filter-part span { font-size: 20px; } .shop-shorter .sort-text { font-size: 18px; margin-right: 30px; margin-bottom: 15px; } .shop-shorter .products-dropdown { margin-right: 30px; margin-bottom: 15px; } .shop-shorter .products-dropdown .nice-select { border: none; font-size: 16px; background: var(--lighter-color); padding: 15px 80px 15px 30px; } .shop-shorter .grid-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .shop-shorter .grid-list li a { font-size: 30px; } .shop-shorter .grid-list li a:hover { color: var(--secondary-color); } .shop-shorter .grid-list li:not(:last-child) { margin-right: 30px; } /* Product Details */ .preview-images { margin-bottom: 30px; } .preview-images img { width: 100%; } .thumb-images { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .thumb-images .thumb-item { width: calc(33.3333% - 20px); } .thumb-images .thumb-item img { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-content .section-title h2 { font-size: 40px; } } .product-details-content .ratting-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details-content .ratting-price .price { font-size: 24px; font-weight: 500; color: var(--heading-color); margin-left: 10px; } .product-details-content .ratting-price .price:before { content: '$'; } .product-details-content .category-tags li:not(:last-child) { margin-bottom: 8px; } .product-details-content .category-tags li b { font-size: 18px; color: var(--heading-color); } .product-details-content .category-tags li span { margin-left: 20px; margin-right: 20px; } .product-details-content .category-tags li a:not(:last-child):after { content: ','; margin-right: 3px; } .product-details-content .add-to-cart { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details-content .add-to-cart input { width: 88px; padding: 8px 20px; margin: 10px 10px 0 0; } .product-details-content .add-to-cart .theme-btn { padding-top: 9px; padding-bottom: 9px; margin: 10px 10px 0 0; } .product-details-content .add-to-cart .wishlist { margin-top: 10px; padding: 8px 20px; border-radius: 5px; background: transparent; border: 1px solid var(--border-color); } .product-information-tab li:not(:last-child) { margin-right: 15px; } .product-information-tab li a { font-size: 18px; font-weight: 700; padding: 11px 65px; border-radius: 5px; display: inline-block; color: var(--heading-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 575px) { .product-information-tab li a { padding: 6px 30px; } } @media only screen and (max-width: 375px) { .product-information-tab li a { font-size: 16px; padding: 5px 20px; } } .product-information-tab li a.active { color: white; background: var(--secondary-color); } .review-form .ratting b { font-size: 20px; font-weight: 400; margin-right: 20px; } .review-form .form-group { margin-bottom: 30px; } .review-form .form-group .nice-select, .review-form .form-group .form-control { line-height: 1.4; background: var(--lighter-color); border-color: var(--lighter-color); } @media only screen and (min-width: 480px) { .review-form .form-group .nice-select, .review-form .form-group .form-control { font-size: 18px; } } .review-form .form-group .nice-select::-webkit-input-placeholder, .review-form .form-group .form-control::-webkit-input-placeholder { color: var(--heading-color); } .review-form .form-group .nice-select:-ms-input-placeholder, .review-form .form-group .form-control:-ms-input-placeholder { color: var(--heading-color); } .review-form .form-group .nice-select::-ms-input-placeholder, .review-form .form-group .form-control::-ms-input-placeholder { color: var(--heading-color); } .review-form .form-group .nice-select::placeholder, .review-form .form-group .form-control::placeholder { color: var(--heading-color); } .review-form .form-group .nice-select:focus, .review-form .form-group .form-control:focus { background: transparent; border-color: var(--heading-color); } .review-form .form-group .nice-select .current, .review-form .form-group .form-control .current { font-weight: 400; } @media only screen and (min-width: 768px) { .review-form .theme-btn { padding: 14px 55px; } } .related-product-slider { margin-left: -15px; margin-right: -15px; } .related-product-slider .product-item { margin-left: 15px; margin-right: 15px; } .related-product-slider .product-item img { display: inline-block; } .related-product-slider .slick-dots { margin-top: 10px; } /*******************************************************/ /****************** ## Cart Checkout *******************/ /*******************************************************/ /* Cart Page */ .shoping-table table, .shoping-cart-total table { width: 100%; } .shoping-table td, .shoping-table th, .shoping-cart-total td, .shoping-cart-total th { padding: 15px 10px; text-align: center; border: 1px solid var(--border-color); } .shoping-table th, .shoping-cart-total th { text-transform: capitalize; } .shoping-table td img, .shoping-cart-total td img { max-height: 60px; } .shoping-table td .title, .shoping-cart-total td .title { font-size: 18px; color: var(--heading-color); } .shoping-table td .price:before, .shoping-cart-total td .price:before { content: '$'; } .shoping-table td button, .shoping-cart-total td button { background: transparent; } @media only screen and (max-width: 767px) { .shoping-table thead { display: none; } .shoping-table tr { display: -ms-grid; display: grid; } .shoping-table tr:not(:last-child) { margin-bottom: 50px; } .shoping-table td:not(:last-child) { border-bottom: none; } } .quantity-input { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .quantity-input button { width: 45px; background: transparent; border: 1px solid var(--border-color); } .quantity-input input { width: 55px; padding: 5px 15px; text-align: center; background: transparent; } .discount-wrapper input { width: 200px; } /* Checkout Page */ .checkout-faqs .alert { padding: 20px 30px; margin-bottom: 25px; } @media only screen and (max-width: 375px) { .checkout-faqs .alert { padding-left: 20px; padding-right: 20px; } } .checkout-faqs .alert h6 { margin-bottom: 0; } .checkout-faqs .alert h6 a { padding: 0; color: var(--secondary-color); background: transparent; } .checkout-faqs .alert form { padding: 20px 0 10px; } .checkout-faqs .alert form .form-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .checkout-faqs .alert form .form-footer button { margin-right: 15px; } @media only screen and (max-width: 375px) { .checkout-faqs .alert form .form-footer button { margin-right: 8px; padding-left: 20px; padding-right: 20px; } } .checkout-faqs .alert form .form-footer label { line-height: 1.4; margin: 0 0 0 5px; } .checkout-faqs .checkout-form h5 { margin-bottom: 20px; } /*******************************************************/ /****************** ## Videos Area ********************/ /*******************************************************/ /* Video Play */ .video-play { color: white; display: inline-block; width: 80px; height: 80px; background: -webkit-linear-gradient(120deg, #30f0b6 0%, #674df3 100%); background: -o-linear-gradient(120deg, #30f0b6 0%, #674df3 100%); background: linear-gradient(-30deg, #30f0b6 0%, #674df3 100%); line-height: 80px; border-radius: 50%; text-align: center; } .video-play:hover { color: white; } @media only screen and (max-width: 575px) { .video-play { width: 60px; height: 60px; font-size: 16px; line-height: 60px; } } .video-play.style-two { border-radius: 0; } /* Video Play With Text */ .video-play-text { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .video-play-text i { color: white; font-size: 14px; margin-right: 15px; width: 55px; height: 55px; background: var(--secondary-color); line-height: 55px; border-radius: 50%; text-align: center; } .video-play-text span { font-weight: 500; color: var(--heading-color); text-decoration: underline; } /* Video Area Two */ .video-area-two:before { content: ''; width: 100%; height: 40%; position: absolute; left: 0; bottom: 0; z-index: -1; background: var(--lighter-color); } .video-wrap-two { z-index: 1; position: relative; } .video-wrap-two::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.3; background-color: var(--heading-color); } .video-wrap-two:before { z-index: 2; } .video-wrap-two .video-play { z-index: 3; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; width: 150px; height: 150px; background: white; line-height: 150px; border-radius: 50%; text-align: center; color: var(--secondary-color); } @media only screen and (max-width: 991px) { .video-wrap-two .video-play { width: 100px; height: 100px; line-height: 100px; } } @media only screen and (max-width: 767px) { .video-wrap-two .video-play { width: 70px; height: 70px; font-size: 16px; line-height: 70px; } } @media only screen and (max-width: 375px) { .video-wrap-two .video-play { width: 50px; height: 50px; font-size: 14px; line-height: 50px; } } /*******************************************************/ /***************** ## Sidebar Widgets *****************/ /*******************************************************/ .widget:not(:last-child) { margin-bottom: 50px; } .widget-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 35px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); } @media only screen and (min-width: 1200px) { .widget-title { font-size: 24px; } } .widget-search .widget-title { margin-bottom: 0; border-bottom: none; } .widget-search form { display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 5px; padding: 14px 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--lighter-color); } .widget-search form input { padding: 0; border: none; font-size: 16px; background: transparent; } .widget-search form button { -webkit-box-flex: 0; -ms-flex: none; flex: none; background: transparent; } .widget-category ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widget-category ul li:not(:last-child) { margin-bottom: 15px; } .widget-category ul li:before { -webkit-box-flex: 0; -ms-flex: none; flex: none; content: "\f101"; margin-right: 10px; font-family: "Font Awesome 6 Free"; } .widget-category ul li a { margin-right: auto; } .widget-category ul li a:not(:hover) { color: var(--heading-color); } .widget-recent-news ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 30px; border-bottom: 1px solid var(--border-color); } .widget-recent-news ul li:not(:last-child) { margin-bottom: 30px; } .widget-recent-news ul li .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 90px; margin-right: 30px; } @media only screen and (max-width: 375px) { .widget-recent-news ul li .image { max-width: 70px; margin-right: 15px; } } .widget-recent-news ul li h5 { margin-bottom: 0; line-height: 1.65; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .widget-recent-news ul li h5 { font-size: 16px; } } @media only screen and (max-width: 375px) { .widget-recent-news ul li h5 { font-size: 15px; line-height: 1.3; } } .widget-cta { z-index: 1; overflow: hidden; position: relative; text-align: center; padding: 40px 0 15px; background: var(--secondary-color); } .widget-cta h4 { color: white; line-height: 1.5; margin-bottom: 20px; } @media only screen and (min-width: 376px) { .widget-cta h4 { font-size: 27px; } } .widget-cta .theme-btn.style-two { border-radius: 5px; padding: 7px 25px; color: var(--heading-color); } .widget-cta .theme-btn.style-two:after { background: var(--primary-color); } .widget-cta .cta-bg-line { position: absolute; z-index: -1; width: 100%; left: 0; top: 30%; -webkit-animation: down-up-one 15s infinite; animation: down-up-one 15s infinite; } .widget-cta .cta-bg-dots { position: absolute; z-index: -1; right: 5%; top: 35%; max-width: 45%; -webkit-animation: down-up-two 15s infinite; animation: down-up-two 15s infinite; } .tag-coulds { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -10px -5px 0; } .tag-coulds a { font-size: 14px; font-weight: 500; padding: 2px 16px; margin: 10px 5px 0; color: var(--heading-color); text-transform: uppercase; background: var(--lighter-color); } .tag-coulds a:hover { background: var(--primary-color); } /* Service Sidebar */ .service-sidebar .widget { padding: 40px; background: var(--lighter-color); } @media only screen and (max-width: 375px) { .service-sidebar .widget { padding-left: 25px; padding-right: 25px; } } .service-sidebar .widget:not(:last-child) { margin-bottom: 30px; } .service-sidebar .widget-title { border-bottom: none; margin-bottom: 10px; } .service-sidebar .widget-category li:not(:last-child) { margin-bottom: 10px; } .service-sidebar .widget-category li a { width: 100%; font-weight: 600; background: white; padding: 11px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 1200px) { .service-sidebar .widget-category li a { font-size: 18px; } } .service-sidebar .widget-category li a:after { content: "\f101"; font-family: 'Font Awesome 6 Free'; } .service-sidebar .widget-category li a:hover { color: white; background: var(--secondary-color); } .service-sidebar .widget-category li:before { display: none; } .service-sidebar .widget-cta { padding-top: 85px; padding-bottom: 85px; background-size: cover; background-position: center; z-index: 1; position: relative; } .service-sidebar .widget-cta::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.8; background-color: var(--heading-color); } .service-sidebar .widget-cta:before { mix-blend-mode: multiply; } .service-sidebar .widget-cta .h5 { color: white; margin-bottom: 12px; display: inline-block; } .service-sidebar .widget-cta h2 { color: white; line-height: 1; font-size: 55px; margin-bottom: 45px; } @media only screen and (max-width: 1199px) { .service-sidebar .widget-cta h2 { font-size: 40px; margin-top: 10px; } } .service-sidebar .widget-cta .theme-btn { color: white; margin-bottom: 20px; border-color: white; padding-top: 10px; padding-bottom: 10px; } .service-sidebar .widget-cta .number { color: white; font-weight: 500; } .service-sidebar .widget-cta .number i { font-size: 22px; margin-right: 5px; color: var(--primary-color); } .service-sidebar .widget-cta .bg-shape { position: absolute; right: 0; bottom: 0; z-index: -1; max-width: 95%; } .service-sidebar .widget-download li:not(:last-child) { margin-bottom: 10px; } .service-sidebar .widget-download li a { font-weight: 600; background: white; padding: 11px 30px; color: var(--heading-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 1200px) { .service-sidebar .widget-download li a { font-size: 18px; } } .service-sidebar .widget-download li a i { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding-left: 20px; border-left: 2px solid var(--border-color); } .service-sidebar .widget-download li a:hover { color: white; background: var(--secondary-color); } .service-sidebar .widget-download li a:hover i { border-color: white; } /* Shop Sidebar */ .shop-sidebar .widget-title { font-size: 22px; } .shop-sidebar .widget-search form { background: #f4f2fe; } .shop-sidebar .widget-category ul li { font-weight: 600; font-family: "Poppins", sans-serif; } .shop-sidebar .widget-category ul li span { color: var(--heading-color); } .shop-sidebar .widget-category ul li:before { width: 5px; height: 5px; content: ''; opacity: 0.3; margin-right: 15px; border-radius: 50%; background: var(--secondary-color); } .shop-sidebar .widget-products ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .shop-sidebar .widget-products ul li:not(:last-child) { margin-bottom: 30px; } .shop-sidebar .widget-products ul li .image { max-width: 110px; margin-right: 22px; } .shop-sidebar .widget-products ul li .content .ratting i { color: #ff7800; font-size: 13px; } .shop-sidebar .widget-products ul li .content h5 { margin-bottom: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .shop-sidebar .widget-products ul li .content h5 { font-size: 16px; } } /*******************************************************/ /******************* ## Main Footer *******************/ /*******************************************************/ @media only screen and (min-width: 1200px) { .footer-cta-wrap .container { max-width: 1470px; } } .footer-cta-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 60px 80px 35px; -webkit-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); z-index: 1; position: relative; } .footer-cta-inner::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.9; background-color: var(--primary-color); } @media only screen and (max-width: 767px) { .footer-cta-inner { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 375px) { .footer-cta-inner { padding-left: 25px; padding-right: 25px; } } .footer-cta-inner .section-title { margin-bottom: 25px; margin-right: auto; } .footer-cta-inner .section-title .sub-title { margin-bottom: 8px; color: var(--heading-color); } @media only screen and (max-width: 375px) { .footer-cta-inner .section-title .sub-title { font-size: 18px; } } .footer-cta-inner .section-title h2 { margin-bottom: 0; letter-spacing: -1px; } .footer-cta-inner .theme-btn { margin-bottom: 25px; margin-left: 30px; } .footer-cta-inner .hotline { margin-bottom: 25px; } .footer-cta-inner .hotline>i { background: white; border-color: white; } .footer-cta-inner .hotline .content span, .footer-cta-inner .hotline .content a { color: var(--heading-color); } .footer-logo { padding: 25px 30px; display: inline-block; background: var(--secondary-color); -webkit-clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); } .footer-white { color: #b6bace; } .footer-white a:not(:hover) { color: #b6bace; } .footer-white .read-more { color: var(--primary-color); } .footer-white h5, .footer-white .footer-title, .footer-white .footer-bottom-menu li a:hover { color: white; } .footer-white .widget_newsletter form { border-color: rgba(255, 255, 255, 0.3); } .footer-widget { margin-bottom: 50px; } .footer-title { margin-bottom: 28px; } @media only screen and (min-width: 376px) { .footer-title { font-size: 24px; } } .widget_newsletter form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; padding-bottom: 12px; border-bottom: 2px solid var(--border-color); } .widget_newsletter form label { margin: 5px 6px 0 0; color: var(--primary-color); } .widget_newsletter form input { padding: 0 !important; border: none; max-width: 150px !important; margin-right: auto; background: transparent !important; color: #fff !important; } .widget_newsletter form button { color: white; line-height: 1.5; font-weight: 500; padding: 7px 15px; border: 0px solid transparent; background: var(--secondary-color); } .widget_newsletter .social-style-one a { margin-right: 15px; } /* Footer Bottom */ .footer-bottom-menu ul { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: -10px; } .footer-bottom-menu ul li { margin: 0 10px 5px 0; } .footer-bottom-menu ul li a { color: var(--heading-color); } .footer-bottom-menu ul li a:hover { text-decoration: underline; } .footer-bottom-menu ul li:not(:last-child):after { content: '|'; margin-left: 10px; } .footer-shapes .shape { position: absolute; z-index: -2; max-width: 50%; } .footer-shapes .shape.one { left: 0; bottom: 0; } .footer-shapes .shape.two { right: 0; bottom: -70px; } .footer-shapes .shape.three { right: 0; bottom: 10%; z-index: -1; } /*HEADING AGANCY SNOWA OMID RAMEZAN*/ /* ================================ Snowa Agency Header Premium Design ================================ */ /* Main Section */ #lottie_section_agancy{ position:relative; padding:45px 0; overflow:hidden; background: radial-gradient(circle at 15% 20%,rgba(252,196,21,.15),transparent 25%), radial-gradient(circle at 85% 80%,rgba(4,80,156,.12),transparent 30%); } /* Soft background circles */ #lottie_section_agancy:before, #lottie_section_agancy:after{ content:""; position:absolute; border-radius:50%; filter:blur(60px); z-index:0; } #lottie_section_agancy:before{ width:220px; height:220px; background:#fcc415; opacity:.12; right:-80px; top:-50px; } #lottie_section_agancy:after{ width:260px; height:260px; background:#04509c; opacity:.10; left:-100px; bottom:-80px; } /* Columns */ #lottie_section_agancy .sppb-row{ position:relative; z-index:2; align-items:center; } /* =============================== Right Title Box ================================ */ .right_center_agancy_section{ padding:35px; /*background:rgba(255,255,255,.75);*/ border-radius:28px; backdrop-filter:blur(15px); /* box-shadow: 0 20px 50px rgba(0,0,0,.08);*/ } .subheading-namayandegi h2{ display:flex; align-items:center; gap:15px; color:#04509c!important; font-weight:800; line-height:2; } .subheading-namayandegi h2 .sppb-addon-title-icon{ width:55px; height:55px; display:flex; align-items:center; justify-content:center; background:#fcc415; color:#04509c!important; border-radius:50%; font-size:24px; box-shadow: 0 10px 25px rgba(252,196,21,.35); } /* =============================== Features Cards ================================ */ .bullet_agancy_fature{ margin-top:25px; } .bullet_agancy_fature .modern-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:15px; } .bullet_agancy_fature .modern-list li{ position:relative; background:#fff; padding:18px 18px 18px 45px!important; border-radius:18px; color:#2b2d31; font-size:14px; line-height:2; box-shadow: 0 8px 25px rgba(0,0,0,.06); transition:.3s; } /* icon check */ .bullet_agancy_fature .modern-list li:before{ content:"\f058"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:15px; top:22px; color:#fcc415; font-size:18px; } .bullet_agancy_fature .modern-list li:hover{ transform:translateY(-4px); box-shadow: 0 15px 35px rgba(4,80,156,.12); } /* =============================== Lottie Premium Frame ================================ */ .left_column_snowa_agancey_header{ display:flex; justify-content:center; } .left_column_snowa_agancey_header .sppb-addon-lottie{ position:relative; width:560px; height:560px; display:flex; align-items:center; justify-content:center; background: linear-gradient( 145deg, rgba(255,255,255,.9), rgba(240,245,255,.8) ); border-radius:50%; box-shadow: 0 30px 70px rgba(4,80,156,.15); } .left_column_snowa_agancey_header .sppb-addon-lottie:before{ content:""; position:absolute; inset:-15px; border-radius:50%; border:2px dashed rgba(252,196,21,.5); animation:rotateSnowa 20s linear infinite; } @keyframes rotateSnowa{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .left_column_snowa_agancey_header .lottie-player{ width:790px!important; height:490px!important; } /* =============================== Responsive ================================ */ @media(max-width:991px){ #lottie_section_agancy{ padding:25px 15px; } .right_center_agancy_section{ padding:25px; } .bullet_agancy_fature .modern-list{ grid-template-columns:1fr; } .sppb-addon-lottie{ width:280px; height:280px; margin:30px auto; } .lottie-player{ width:220px!important; height:220px!important; } } @media(max-width:575px){ .subheading-namayandegi h2{ font-size:19px!important; } .subheading-namayandegi h2 .sppb-addon-title-icon{ width:45px; height:45px; } } .farad-trust{position:relative; width:100%;max-width:100%;margin:auto;margin-top:-80px;padding:70px 0 0;display:grid;grid-template-columns: repeat(2,2fr);gap:10px;align-items:center;justify-items:center;z-index:30;} .trust-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:380px; height:380px; border-radius:50%; background: linear-gradient(145deg,#0C5ADB,#53B7FF); display:flex; justify-content:center; align-items:center; box-shadow: 0 0 80px rgba(12,90,219,.35); animation:centerPulse 5s infinite; } .trust-logo{ width:320px; height:320px; border-radius:50%; display:flex; justify-content:center; align-items:center; box-shadow:0 0 35px rgba(255,255,255,.6); } .trust-logo img{ /*width:70px;*/ } .trust-center::before{ content:""; position:absolute; inset:-18px; border-radius:50%; border:2px dashed rgba(255,255,255,.35); animation:rotateCircle 25s linear infinite; } @keyframes rotateCircle{ 100%{ transform:rotate(360deg); } } .trust-item{ position:relative; width:210px; padding:10px; background: rgba(255,255,255,.72); backdrop-filter:blur(20px); border-radius:28px; border:1px solid rgba(255,255,255,.65); box-shadow: 0 25px 70px rgba(12,90,219,.12); text-align:center; overflow:hidden; transition:.45s; } .trust-item:hover{ transform: translateY(-12px); box-shadow: 0 35px 90px rgba(12,90,219,.20); } .trust-item::before{ content:""; position:absolute; left:-120%; top:0; width:80%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.8), transparent ); } .trust-item:hover::before{ animation:trustShine .9s linear; } @keyframes trustShine{ 100%{ left:220%; } } .trust-icon{ font-size:44px; margin-bottom:18px; animation:iconFloat 4s infinite; } .trust-number{ font-size:42px; font-weight:900; color:#0C5ADB; margin-bottom:10px; } .trust-title{ font-size:17px; font-weight:700; color:#234; } .item1{ margin-top:-60px; } .item2{ margin-top:60px; } .item3{ margin-top:-60px; } .item4{ margin-top:60px; } .item5{ margin-top:-60px; } .item6{ margin-top:60px; } .trust-item::after{ content:""; position:absolute; width:120px; height:2px; background: linear-gradient( 90deg, #53B7FF, transparent ); top:50%; } .item1::after{ right:-120px; } .item2::after{ right:-120px; } .item3::after{ left:-120px; transform:rotate(180deg); } .item4::after{ left:-120px; transform:rotate(180deg); } @keyframes centerPulse{ 0%{ transform: translate(-50%,-50%) scale(1); } 50%{ transform: translate(-50%,-50%) scale(1.05); } 100%{ transform: translate(-50%,-50%) scale(1); } } .trust-icon{ position:relative; width:95px; height:95px; display:flex; justify-content:center; align-items:center; border-radius:50%; background: linear-gradient( 145deg, rgba(255,255,255,.92), rgba(255,255,255,.45) ); margin: 0 auto; backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.75); box-shadow: 0 20px 45px rgba(12,90,219,.12), inset 0 2px 5px rgba(255,255,255,.7); overflow:hidden; transition:.45s; cursor:pointer; } /*.trust-icon::before{ content:""; position:absolute; inset:-40%; background: conic-gradient( transparent, rgba(255,255,255,.8), transparent, transparent ); animation:rotateGlow 7s linear infinite; }*/ @keyframes rotateGlow{ 100%{ transform:rotate(360deg); } } /*.trust-icon::after{ content:""; position:absolute; inset:4px; border-radius:50%; background: linear-gradient( 145deg, #ffffff, #EEF7FF ); z-index:1; }*/ /*.trust-icon i{ position:relative; z-index:3; font-size:42px; background: linear-gradient( 180deg, #64C9FF, #0C5ADB, #003EAD ); -webkit-background-clip:text; -webkit-text-fill-color:transparent; transition:.45s; }*/ .trust-icon span{ position:absolute; width:30px; height:30px; background:#52C3FF; filter:blur(25px); opacity:.55; z-index:0; animation:pulseGlow 3s infinite; } @keyframes pulseGlow{ 50%{ transform:scale(1.8); opacity:.8; } } .trust-icon:hover{ transform: translateY(-10px) scale(1.08); box-shadow: 0 30px 80px rgba(12,90,219,.20), 0 0 50px rgba(82,195,255,.25); } .trust-icon:hover i{ transform: scale(1.12) rotate(-8deg); } .trust-icon .shine{ position:absolute; width:30px; height:180px; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.9), transparent ); transform:rotate(30deg); left:-120px; z-index:4; } .trust-icon:hover .shine{ animation:shineMove .8s linear; } @keyframes shineMove{ 100%{ left:150px; } } .item1 .trust-icon{background: linear-gradient( 180deg, #FFD95A, #FFB300, #FF8F00);} .item2 .trust-icon{background: linear-gradient( 180deg, #66D8FF, #0C5ADB, #003EAD);} .item3 .trust-icon{background: linear-gradient( 180deg, #7BFFB0, #00C853, #007E33);} .item4 .trust-icon{background: linear-gradient( 180deg, #FF9FB2, #FF4D6D, #D90429);} .item5 .trust-icon { background: linear-gradient(180deg, #f766df,#d30fb2, #7c0869); } .item6 .trust-icon { background: linear-gradient(180deg, #65effd, #4cb1bb, #089faf); } .subheading-namayandegi { background: rgba(255, 255, 255, .55); padding: 10px 22px; border-radius: 20px; display: flex; align-items: center; gap: 14px; font-weight: 700; transition: .45s cubic-bezier(.22,.61,.36,1); border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 12px 30px rgba(12,90,219,.12); position: relative; overflow: hidden; } .subheading-namayandegi .sppb-addon-title-icon:before { font-family: flaticon !important; content: ""; font-size: 40px; font-weight: 500; } .subheading-namayandegi:after { content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); transition: none; } .subheading-namayandegi:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(12, 90, 219, .18) !important; } .subheading-namayandegi:hover:after { animation: cardShine .9s linear; } @keyframes cardShine{ 100%{ left:220%; } } /* ================================== Snowa Agency Main Background Premium Ambient Lighting ================================== */ #main_section_agance{ position:relative; overflow:hidden; background: linear-gradient( 135deg, #f8fbff 0%, #ffffff 45%, #f1f7ff 100% ); } /* Main animated lights */ #main_section_agance::before{ content:""; position:absolute; width:650px; height:650px; top:-250px; right:-180px; background: radial-gradient( circle, rgba(12,90,219,.35), rgba(12,90,219,.15) 35%, transparent 70% ); filter:blur(30px); animation: floatLightOne 12s ease-in-out infinite; z-index:0; } #main_section_agance::after{ content:""; position:absolute; width:550px; height:550px; bottom:-250px; left:-150px; background: radial-gradient( circle, rgba(252,196,21,.35), rgba(252,196,21,.12) 35%, transparent 70% ); filter:blur(35px); animation: floatLightTwo 15s ease-in-out infinite; z-index:0; } @keyframes floatLightOne{ 0%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-80px,80px) scale(1.15); } 100%{ transform: translate(0,0) scale(1); } } @keyframes floatLightTwo{ 0%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(100px,-60px) scale(1.2); } 100%{ transform: translate(0,0) scale(1); } } /* Content above lights */ #main_section_agance > *{ /*position:relative; z-index:5;*/ } /* Moving light streak */ #main_section_agance .sppb-container-inner::before{ content:""; position:absolute; top:0; left:-40%; width:35%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.7), transparent ); transform: skewX(-25deg); animation: sectionShine 12s infinite; pointer-events:none; } @keyframes sectionShine{ 0%{ left:-50%; } 30%, 100%{ left:130%; } } /* Soft glass layer */ #main_section_agance .sppb-container-inner{ background: rgba(255,255,255,.35); backdrop-filter: blur(5px); border-radius:40px; } /* Floating dots */ #main_section_agance{ isolation:isolate; } #main_section_agance .sppb-container-inner:after{ content:""; position:absolute; width:12px; height:12px; background:#fcc415; border-radius:50%; top:25%; left:8%; box-shadow: 0 0 25px #fcc415; animation: dotFloat 6s infinite; } @keyframes dotFloat{ 0%,100%{ transform: translateY(0); opacity:.5; } 50%{ transform: translateY(-35px); opacity:1; } } /* ========================================= Snowa Repair Request Premium Form ========================================= */ .form-snowa-service{ position:relative; padding:35px; background: rgba(255,255,255,.72); backdrop-filter:blur(25px); border-radius:35px; border:1px solid rgba(255,255,255,.8); box-shadow: 0 30px 90px rgba(4,80,156,.15); overflow:hidden; } /* Ambient glow */ .form-snowa-service:before{ content:""; position:absolute; width:220px; height:220px; top:-100px; right:-80px; background: radial-gradient( circle, rgba(252,196,21,.35), transparent 70% ); filter:blur(25px); } .form-snowa-service:after{ content:""; position:absolute; width:250px; height:250px; bottom:-120px; left:-100px; background: radial-gradient( circle, rgba(4,80,156,.25), transparent 70% ); filter:blur(30px); } .rsformform-all-namayandegi{ position:relative; z-index:2; } /* ========================= Form Header ========================= */ .hedingbefore{ position:relative; margin-bottom:25px; } .hedingbefore h3{ font-size:26px!important; font-weight:900; color:#04509c!important; position:relative; display:inline-block; } .hedingbefore h3:after{ content:""; display:block; height:4px; width:80px; margin:15px auto; background: linear-gradient( 90deg, #fcc415, #04509c ); border-radius:20px; } .hedingbefore p{ color:#667; font-size:15px; } /* ========================= Inputs ========================= */ .form-snowa-service .row{ margin-bottom:18px!important; } .form-snowa-service .input-icon{ position:relative; } .form-snowa-service .input-icon i{ position:absolute; right:18px; top:50%; transform:translateY(-50%); z-index:5; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: linear-gradient( 145deg, #ffffff, #eef7ff ); color:#04509c; box-shadow: 0 8px 20px rgba(4,80,156,.15); } .right_center_agancy_section .form-snowa-service input, .right_center_agancy_section .form-snowa-service select{ height:58px!important; padding-right:70px!important; border-radius:20px!important; border: 1px solid rgba(4,80,156,.12)!important; background: rgba(255,255,255,.75)!important; box-shadow: inset 0 3px 10px rgba(0,0,0,.03); font-family:iranyekanxfanummedium; transition:.35s; } .right_center_agancy_section .hedingbefore .sppb-addon-title:before { right: -20px; top: -5px; } .form-snowa-service input:focus, .form-snowa-service select:focus{ border-color:#04509c!important; box-shadow: 0 0 0 5px rgba(4,80,156,.1)!important; } /* Placeholder */ .form-snowa-service input::placeholder{ color:#899; } /* ========================= Select Arrow ========================= */ .form-snowa-service select{ appearance:none; } /* ========================= Submit Button ========================= */ #Submit{ position:relative; width:100%; height:60px; border:0!important; border-radius:25px!important; background: linear-gradient( 135deg, #fcc415, #ffb300 )!important; color:#04509c!important; font-size:18px!important; font-weight:900; overflow:hidden; box-shadow: 0 20px 45px rgba(252,196,21,.35); transition:.4s; } #Submit:before{ content:""; position:absolute; top:0; left:-120%; width:70%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.8), transparent ); transform:skewX(-25deg); } #Submit:hover:before{ animation: buttonLight 1s; } @keyframes buttonLight{ 100%{ left:150%; } } #Submit:hover{ transform: translateY(-5px); box-shadow: 0 30px 70px rgba(252,196,21,.55); } /* ========================= Call Button ========================= */ .btn_snowa_call_agancy{ margin-top:25px; display:inline-flex!important; align-items:center; gap:12px; padding:12px 35px!important; border-radius:50px!important; background: linear-gradient( 135deg, #04509c, #0c5adb )!important; color:white!important; border:0!important; box-shadow: 0 20px 50px rgba(4,80,156,.35); } .btn_snowa_call_agancy i{ background:#fcc415!important; color:#04509c!important; width:42px; height:42px; display:flex!important; align-items:center; justify-content:center; border-radius:50%; } /* ========================= Mobile ========================= */ @media(max-width:768px){ .form-snowa-service{ padding:22px; border-radius:25px; } .trust-item { width: 170px; } section.farad-trust { margin-top: -40px; } .hedingbefore h3{ font-size:21px!important; } .form-snowa-service input, .form-snowa-service select{ height:52px!important; } } /*========================================= Snowa Premium Device Cards ==========================================*/ /* .snowa-device-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; margin:25px 0; position:relative; } .snowa-device-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:35px 20px; border-radius:30px; text-decoration:none; overflow:hidden; background: rgba(255,255,255,.72); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.65); box-shadow: 0 20px 50px rgba(4,80,156,.12); transition:.45s; } .snowa-device-card:hover{ transform: translateY(-12px); box-shadow: 0 35px 90px rgba(4,80,156,.18); } .device-glow{ position:absolute; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, rgba(252,196,21,.35), transparent 70%); top:-80px; right:-80px; opacity:.6; transition:.5s; } .snowa-device-card:hover .device-glow{ transform: scale(1.4); opacity:1; } */ /*========================== ICON ===========================*/ /*.device-icon{ position:relative; width:105px; height:105px; display:flex; justify-content:center; align-items:center; border-radius:50%; margin-bottom:22px; overflow:hidden; background: linear-gradient( 145deg, #ffffff, #eef7ff ); box-shadow: 0 18px 45px rgba(4,80,156,.15), inset 0 2px 6px rgba(255,255,255,.8); }*/ /* .device-icon::before{ content:""; position:absolute; inset:-40%; background: conic-gradient( transparent, rgba(255,255,255,.9), transparent, transparent ); animation: deviceRotate 8s linear infinite; } */ @keyframes deviceRotate{ 100%{ transform:rotate(360deg); } } /*.device-icon::after{ content:""; position:absolute; inset:4px; border-radius:50%; background: linear-gradient( 145deg, #ffffff, #f4f9ff ); }*/ /* .device-icon i { position: relative; z-index: 3; font-size: 70px; background: linear-gradient(180deg, #64C9FF, #0C5ADB, #003EAD); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: .4s; } .snowa-device-card:hover .device-icon{ transform: rotate(-8deg) scale(1.08); } .snowa-device-card:hover .device-icon i{ transform:scale(1.15); } */ /*========================== TITLE =========================== /* .snowa-device-card h5{ margin:0; font-size:18px; font-weight:800; color:#04509c; transition:.3s; } .snowa-device-card:hover h5{ color:#0C5ADB; } */ /*========================== Shine ===========================*/ /* .snowa-device-card::before{ content:""; position:absolute; left:-130%; top:0; width:60%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.75), transparent ); transform:skewX(-25deg); } .snowa-device-card:hover::before{ animation: deviceShine .8s linear; } @keyframes deviceShine{ 100%{ left:170%; } } */ /*========================== Responsive ===========================*/ @media(max-width:768px){ .snowa-device-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } .device-icon{ width:85px; height:85px; } .device-icon i{ font-size:36px; } .snowa-device-card{ padding:25px 15px; } .snowa-device-card h5{ font-size:16px; } } /*============================== COLOR THEMES ==============================*/ /* .wash{ --c1:#66D8FF; --c2:#0C5ADB; --c3:#003EAD; } .dish{ --c1:#6CF4FF; --c2:#0CB8D8; --c3:#007D9A; } .fridge{ --c1:#8DFFB6; --c2:#1FCB63; --c3:#04843C; } .tv{ --c1:#D38CFF; --c2:#8F3DFF; --c3:#5316B5; } .micro{ --c1:#FFD56A; --c2:#FF9800; --c3:#E65100; } .vacuum{ --c1:#FF8E9A; --c2:#F52F58; --c3:#C1002D; } */ /* .device-icon{ background: linear-gradient( 180deg, var(--c1), var(--c2), var(--c3) ); } */ /*.device-icon i{ background: linear-gradient( 180deg, var(--c1), var(--c2), var(--c3) ); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }*/ /* .device-glow{ background: radial-gradient( circle, color-mix(in srgb,var(--c2) 40%,white), transparent 70% ); } .snowa-device-card:hover{ box-shadow: 0 25px 70px color-mix(in srgb,var(--c2) 30%,transparent); } .snowa-device-card{ border-top: 2px solid var(--c2); } .snowa-device-card{ overflow:hidden; }*/ /*.snowa-device-card::after{ content:""; position:absolute; inset:-2px; border-radius:32px; padding:2px; background: linear-gradient( 130deg, transparent, rgba(255,255,255,.9), transparent, var(--c2), transparent, rgba(255,255,255,.7) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; animation:borderMove 6s linear infinite; }*/ @keyframes borderMove{ 100%{ transform:rotate(360deg); } } /* .snowa-device-card .wave{ position:absolute; bottom:-200px; left:-20%; width:140%; height:260px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); transition:.8s; } */ /* .snowa-device-card:hover .wave{ bottom:-20px; }*/ /* .ring{ position:absolute; width:120px; height:120px; border-radius:50%; border:2px dashed rgba(255,255,255,.55); animation:ringRotate 12s linear infinite; z-index:2; } */ @keyframes ringRotate{ 100%{ transform:rotate(360deg); } }/* .particle{ position:absolute; width:10px; height:10px; border-radius:50%; background:white; filter:blur(2px); opacity:.8; z-index:4; } .p1{ top:15px; left:20px; animation:floatParticle 5s infinite; } .p2{ right:18px; top:40px; animation:floatParticle 7s infinite; } .p3{ bottom:20px; left:45px; animation:floatParticle2 6s infinite; } @keyframes floatParticle{ 50%{ transform: translateY(-18px) scale(1.5); opacity:1; } } @keyframes floatParticle2{ 50%{ transform: translateX(18px) translateY(-12px); } } .device-icon .shine{ position:absolute; width:30px; height:180px; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.95), transparent ); left:-120px; transform:rotate(30deg); z-index:8; } .snowa-device-card:hover .shine{ animation:shineMove .8s; } @keyframes shineMove{ 100%{ left:150px; } .snowa-device-card:hover h5{ text-shadow: 0 0 10px rgba(255,255,255,.8), 0 0 20px var(--c2), 0 0 40px var(--c2); letter-spacing:.6px; } .device-icon{ animation:iconFloating 5s ease-in-out infinite; } @keyframes iconFloating{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } 100%{ transform:translateY(0); } .snowa-device-card{ transform-style:preserve-3d; perspective:1200px; } .snowa-device-card:hover{ transform: rotateX(8deg) rotateY(-8deg) translateY(-18px) scale(1.04); } .snowa-device-card::before{ content:""; position:absolute; inset:-30%; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent), radial-gradient(circle at 80% 30%, color-mix(in srgb,var(--c1) 40%,white), transparent), radial-gradient(circle at 50% 90%, color-mix(in srgb,var(--c3) 35%,white), transparent); filter:blur(40px); animation:auroraMove 14s linear infinite; opacity:.8; } @keyframes auroraMove{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(180deg); } 100%{ transform:rotate(360deg); } } */ /*============================= SNOWA HERO BACKGROUND =============================*/ #main_section_agance { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 20% 15%, rgba(252, 196, 21, .18), transparent 35%), radial-gradient(circle at 82% 22%, rgba(0, 132, 255, .22), transparent 40%), radial-gradient(circle at 50% 100%, rgba(0, 80, 156, .45), transparent 60%), linear-gradient(145deg, #021f44 0%, #03356a 45%, #04509c 100%); padding: 70px 0; } div#main_section_agance:before { content: ""; position: absolute; width: 750px; height: 750px; left: -250px; top: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(252, 196, 21, .35), transparent 72%); filter: blur(90px); animation: auroraOne 16s ease-in-out infinite alternate; pointer-events: none; z-index: -1; } div#main_section_agance::after{ content:""; position:absolute; width:900px; height:900px; right:-280px; bottom:-320px; border-radius:50%; background:radial-gradient(circle, rgba(0,170,255,.28), transparent 72%); filter:blur(120px); animation:auroraTwo 18s ease-in-out infinite alternate; pointer-events:none; z-index:-1; } @keyframes auroraOne{ 0%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(120px,60px) scale(1.18); } 100%{ transform: translate(220px,130px) scale(.95); } } @keyframes auroraTwo{ 0%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-180px,-120px) scale(1.15); } 100%{ transform: translate(-260px,-180px) scale(.92); } } div#main_section_agance .sppb-container-inner{ position:relative; z-index:2; } div#main_section_agance .sppb-container-inner::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(circle,#000 45%,transparent 100%); opacity:.45; pointer-events:none; animation:gridMove 30s linear infinite; } @keyframes gridMove{ 100%{ background-position: 80px 80px, 80px 80px; } } .hero-isometric{ position:relative; } .hero-isometric::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:430px; height:430px; border-radius:50%; background: radial-gradient(circle, rgba(252,196,21,.45), rgba(255,255,255,.12), transparent 72%); filter:blur(25px); animation:ringPulse 5s ease-in-out infinite; z-index:-1; } @keyframes ringPulse{ 50%{ transform:translate(-50%,-50%) scale(1.15); opacity:.8; } } .snowa-service-features { margin: 40px 0; display: grid; gap: 10px; padding: 28px; border-radius: 20px; background: linear-gradient( 135deg, #f8fbff, #eef6ff ); border: 1px solid #dce8f5; box-shadow: 0 10px 30px rgba(4, 80, 156, 0.08); grid-auto-flow: column; align-content: center; align-items: stretch; } .snowa-service-features-title { margin-bottom: 25px; color: #04509c; font-size: 22px; font-weight: 800; text-align: center; line-height: 1.8; } .snowa-service-feature-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .snowa-service-feature { position: relative; padding: 22px 15px; margin: 5px 0; text-align: center; border-radius: 16px; background: #fff; border: 1px solid #dce8f5; box-shadow: 0 5px 18px rgba(4, 80, 156, 0.06); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .snowa-service-feature::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, #04509c, #0868bb ); } .snowa-service-feature:hover { transform: translateY(-5px); border-color: #04509c; box-shadow: 0 12px 28px rgba(4, 80, 156, 0.12); } .snowa-service-feature strong { display: block; margin-bottom: 12px; color: #04509c; font-size: 16px; font-weight: 800; line-height: 1.8; } .snowa-service-feature p { margin: 0; color: #4b5563; font-size: 14px; line-height: 2; } /* آیکون تزئینی */ .snowa-service-feature::after { content: "✓"; position: absolute; left: 15px; bottom: 12px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef6ff; color: #04509c; font-size: 16px; font-weight: 900; } /* تبلت */ @media (max-width: 1100px) { .snowa-service-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* موبایل */ @media (max-width: 650px) { .snowa-service-features {padding: 20px 15px;margin: 30px 0;border-radius: 16px;grid-auto-flow: row !important;} .snowa-service-features-title { font-size: 18px; margin-bottom: 18px; } .snowa-service-feature-list { grid-template-columns: 1fr; gap: 14px; } .snowa-service-feature { min-height: auto; padding: 20px 16px; } .snowa-service-feature strong { font-size: 15px; } .snowa-service-feature p { font-size: 13px; } } /*comments style omid*/ /* ========================================================== SNOWA SERVICE - JLEX COMMENT DESIGN DARK GLASS / NEON STYLE ========================================================== */ /* MAIN WRAPPER */ #jlexcomment { position: relative; direction: rtl; margin-top: 50px; padding: 30px; border-radius: 30px; background: linear-gradient( 145deg, rgba(8,35,65,.75), rgba(3,15,30,.90) ); border: 1px solid rgba(80,170,255,.18); box-shadow: 0 25px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(20px); } /* نور پس زمینه */ #jlexcomment::before{ content:""; position:absolute; width:280px; height:160px; top:-80px; left:30%; background: radial-gradient( circle, rgba(8,117,209,.25), transparent 70% ); filter:blur(30px); pointer-events:none; } /* ========================================================== HEADER ========================================================== */ #jcm-header { position:relative; margin-bottom:25px; } /* عنوان نظر */ #jcm-header .jcm-top { display:flex; align-items:center; justify-content:flex-start; padding:0; margin:0; list-style:none; } #jcm-header .jcm-top li span { display:flex; align-items:center; gap:12px; color:#fff !important; font-size:22px; font-weight:800; } #jcm-header .jcm-top li span::before { content:""; width:5px; height:32px; border-radius:10px; background: linear-gradient( 180deg, #fff3a8, #fcc415, #d99f00 ); box-shadow: 0 0 12px rgba(252,196,21,.7); } /* ========================================================== SECONDARY HEADER ========================================================== */ .jcm-top-secondary { margin-top:20px!important; padding:0!important; display:flex; justify-content:space-between; list-style:none; } .jcm-top-secondary a { color:#bfe4ff!important; background: rgba(8,117,209,.12); border: 1px solid rgba(80,170,255,.25); padding: 9px 15px; border-radius:14px; transition:.3s; } .jcm-top-secondary a:hover { color:#fff!important; border-color:#0875d1; box-shadow: 0 0 20px rgba(8,117,209,.3); } /* dropdown */ .jcm-dropdown-toggle { display:flex!important; align-items:center; gap:8px; } /* ========================================================== COMMENT FORM ========================================================== */ .jcm-form-cp { position:relative; } .jcm-form_input { display:flex; gap:25px; align-items:flex-start; } /* avatar */ .jcm-form_input .avatar { flex:0 0 85px; } .jcm-form_input .jcm-thumb { width:85px; height:85px; border-radius:50%; padding:5px; background: linear-gradient( 145deg, #0875d1, #fcc415 ); border:0; box-shadow: 0 0 25px rgba(8,117,209,.45); } /* form */ .jcm-form { flex:1; } /* textarea */ .jcm-textarea { min-height:150px; padding:20px; border-radius:22px; border: 1px solid rgba(80,170,255,.22); background: linear-gradient( 145deg, rgba(7,45,82,.45), rgba(2,17,35,.65) ); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition:.35s; } .jcm-textarea:focus { border-color:#0875d1; box-shadow: 0 0 25px rgba(8,117,209,.25); } .jcm-text-placeholder { color: rgba(220,235,250,.45)!important; right:20px!important; top:20px!important; } /* ========================================================== CHECKBOX ========================================================== */ .jcm-suggest-follow { margin-top:20px; } .jcm-suggest-follow span { color:#c9ddf0; } .jcm-suggest-follow i { color:#fcc415; } /* ========================================================== GUEST FORM ========================================================== */ ._postAsGuest { margin-top:25px; display:flex; gap:12px; flex-wrap:wrap; } ._postAsGuest h6 { width:100%; color:#fff; font-size:16px; } ._postAsGuest input { flex: 1; height: 48px !important; border-radius: 14px !important; border: 1px solid rgba(80, 170, 255, .25) !important; background: rgba(3, 20, 40, .65) !important; color: #fff !important; padding: 0 15px !important; } ._postAsGuest input:focus { border-color:#0875d1; outline:none; } .jcm-btn-submit { height: 48px !important; padding: 0 35px !important; border-radius: 15px !important; border: 0 !important; cursor: pointer !important; background: linear-gradient(135deg, #fcc415, #d99f00) !important; color: #14263c !important; font-weight: 800 !important; box-shadow: 0 10px 30px rgba(252, 196, 21, .35); transition: .35s; } .jcm-btn-submit:hover { transform: translateY(-3px); box-shadow: 0 15px 45px rgba(252,196,21,.55); } /* ========================================================== EMPTY COMMENT ========================================================== */ .jcm-empty-cm { padding:35px; border-radius:20px; background: rgba(255,255,255,.03); border: 1px dashed rgba(80,170,255,.25); color:#b9d6ee!important; font-size:15px; } /* ========================================================== MOBILE ========================================================== */ @media(max-width:768px){ #jlexcomment{ padding:20px; border-radius:22px; } .jcm-form_input{ display:block; } .jcm-form_input .avatar{ margin-bottom:20px; } ._postAsGuest{ display:block; } ._postAsGuest input, .jcm-btn-submit{ width:100%; margin-bottom:10px; } } #jlexcomment img.jcm-thumb { margin: 0 !important; } #jlexcomment .jcm-input-cm { height: auto !important; background: transparent !important; } #jlexcomment .jcm-text-placeholder { right: 40px !important; left: auto; color: #fff !important; } #jlexcomment ul.jcm-dropdown-menu { background: #273545 !important; } #jlexcomment #jcm-header a { background: #122234 !important; } #jlexcomment #jcm-header a, #jlexcomment #jcm-header span { color: #fff !important; font-weight: 400 !important; } #jlexcomment .jcm-form-cp.active ._controller{ display: none !important; } /* ===================================================== SNOWA SERVICE | PREMIUM FLOATING ACTION BUTTON Dark Glass + Neon Blue + Gold Custom Icons: Icons Font ===================================================== */ #floatingbtn.jfab_wrapper { --snowa-blue: #04509c; --snowa-blue-light: #0875d1; --snowa-blue-dark: #023568; --snowa-gold: #fcc415; --snowa-gold-dark: #d99f00; --snowa-navy: #1b1f2e; z-index: 9999; font-family: 'Yekan-Bold', sans-serif !important; direction: rtl; } /* ===================================================== MAIN BUTTON ===================================================== */ #floatingbtn .jfab_main_btn { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; padding: 0; border: 1px solid rgba(252, 196, 21, .8) !important; border-radius: 22px !important; background: radial-gradient( circle at 30% 20%, rgba(255,255,255,.16), transparent 45% ), linear-gradient( 145deg, #0875d1, #04509c 55%, #023568 ) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .3), 0 0 18px rgba(4, 80, 156, .35), 0 0 0 5px rgba(8, 117, 209, .08), inset 0 1px 0 rgba(255,255,255,.22); cursor: pointer; overflow: hidden; transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease; } /* Main custom icon */ #floatingbtn .jfab_main_btn > span { display: flex; align-items: center; justify-content: center; font-family: 'Icons' !important; font-size: 29px !important; font-weight: normal !important; line-height: 1; color: #ffffff !important; position: relative; z-index: 2; transition: transform .4s ease, color .4s ease; } /* Moving light across main button */ #floatingbtn .jfab_main_btn::before { content: ""; position: absolute; top: -40%; left: -85%; width: 55%; height: 180%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent ); transform: rotate(25deg); pointer-events: none; transition: left .65s ease; } /* Soft gold halo */ #floatingbtn .jfab_main_btn::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(252,196,21,.32); border-radius: 25px; opacity: 0; pointer-events: none; transition: opacity .35s ease; } #floatingbtn .jfab_main_btn:hover { transform: translateY(-4px) scale(1.04); border-color: #ffe58a !important; box-shadow: 0 18px 38px rgba(0,0,0,.32), 0 0 25px rgba(8,117,209,.45), 0 0 30px rgba(252,196,21,.12), inset 0 1px 0 rgba(255,255,255,.3); } #floatingbtn .jfab_main_btn:hover::before { left: 140%; } #floatingbtn .jfab_main_btn:hover::after { opacity: 1; } #floatingbtn .jfab_main_btn:hover > span { transform: scale(1.12) rotate(-8deg); color: #fff0a8 !important; } /* ===================================================== SUB BUTTONS CONTAINER ===================================================== */ #floatingbtn .jfab_btns_wrapper { gap: 14px; padding-bottom: 16px; } #floatingbtn .jfab_btns_wrapper > div { position: relative; display: flex; align-items: center; justify-content: center; } /* ===================================================== SUB BUTTONS ===================================================== */ #floatingbtn .sub_fab_btn { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border: 1px solid rgba(252,196,21,.55) !important; border-radius: 18px !important; background: linear-gradient( 145deg, rgba(8,117,209,.96), rgba(2,53,104,.98) ) !important; box-shadow: 0 8px 22px rgba(0,0,0,.25), 0 0 15px rgba(8,117,209,.18), inset 0 1px 0 rgba(255,255,255,.18); overflow: hidden; cursor: pointer; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* Hide old icon font and apply your own icon font */ #floatingbtn .sub_fab_btn > span, #floatingbtn .jfab_main_btn > span { font-family: 'Icons' !important; font-style: normal !important; font-weight: normal !important; text-transform: none !important; speak: never; } /* Override old inline icon characters */ #floatingbtn .jfab_main_btn > span { font-size: 0 !important; } #floatingbtn .jfab_main_btn > span::before { content: "\E907"; font-family: 'Icons' !important; font-size: 40px !important; line-height: 1; color: #ffffff; } #floatingbtn .jfab_btns_wrapper > div:nth-child(1) .sub_fab_btn > span, #floatingbtn .jfab_btns_wrapper > div:nth-child(2) .sub_fab_btn > span { font-size: 0 !important; } #floatingbtn .jfab_btns_wrapper > div:nth-child(1) .sub_fab_btn > span::before { content: "\E9A8"; font-family: 'Icons' !important; font-size: 35px !important; line-height: 1; color: #ffffff; } #floatingbtn .jfab_btns_wrapper > div:nth-child(2) .sub_fab_btn > span::before { content: "\E9BB"; font-family: 'Icons' !important; font-size: 35px !important; line-height: 1; color: #ffffff; } /* Sub button hover */ #floatingbtn .sub_fab_btn:hover { transform: translateY(-4px) scale(1.07); border-color: #ffe58a !important; box-shadow: 0 14px 28px rgba(0,0,0,.28), 0 0 22px rgba(8,117,209,.38), 0 0 15px rgba(252,196,21,.12), inset 0 1px 0 rgba(255,255,255,.25); } #floatingbtn .sub_fab_btn:hover > span::before { color: #fff0a8 !important; } /* ===================================================== TOOLTIP ===================================================== */ #floatingbtn .jfab_tooltip { position: relative; padding: 10px 15px !important; margin-right: 12px; border: 1px solid rgba(80, 170, 255, .25); border-radius: 12px; background: linear-gradient(135deg, rgba(11, 31, 54, .97), rgba(3, 15, 30, .98)) !important; color: #f2f8ff !important; font-family: 'Tanha', sans-serif !important; font-size: 16px !important; font-weight: bold; line-height: 1.9; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .25), 0 0 15px rgba(4, 80, 156, .12), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Gold accent on tooltip */ #floatingbtn .jfab_tooltip::before { content: ""; position: absolute; right: 0; top: 25%; width: 3px; height: 50%; border-radius: 5px; background: linear-gradient( 180deg, #fff0a0, #fcc415, #d99f00 ); box-shadow: 0 0 10px rgba(252,196,21,.35); } /* ===================================================== ACCESSIBILITY ===================================================== */ @media (prefers-reduced-motion: reduce) { #floatingbtn .jfab_main_btn, #floatingbtn .jfab_main_btn > span, #floatingbtn .sub_fab_btn, #floatingbtn .sub_fab_btn > span { transition: none !important; } #floatingbtn .jfab_main_btn::before { display: none; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 575.98px) { #floatingbtn .jfab_main_btn { width: 59px; height: 59px; border-radius: 19px !important; } #floatingbtn .jfab_main_btn > span::before { font-size: 26px !important; } #floatingbtn .sub_fab_btn { width: 49px; height: 49px; border-radius: 16px !important; } #floatingbtn .jfab_tooltip { font-size: 11px !important; padding: 8px 12px !important; } }