:root {
--primary-color: #5e3dee;
--primary-dark: #3d22b3;
--secondary-color: #00c9ff;
--accent-color: #ff6b9d;
--success-color: #2ed573;
--warning-color: #ff9f1c;
--light-color: #f8fafc;
--dark-color: #1e293b;
--text-color: #334155;
--gradient-primary: linear-gradient(135deg, #5e3dee 0%, #3d22b3 100%);
--gradient-secondary: linear-gradient(135deg, #00c9ff 0%, #5e3dee 100%);
--gradient-accent: linear-gradient(135deg, #ff6b9d 0%, #ff9f1c 100%);
--gradient-dark: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Start Fonts*/
@font-face {
font-family: IRANSansfanum;
font-style: normal;
font-weight: 900;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Black.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
}
@font-face {
font-family: IRANSansfanum;
font-style: normal;
font-weight: bold;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Bold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}
@font-face {
font-family: IRANSansfanum;
font-style: normal;
font-weight: 500;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Medium.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}
@font-face {
font-family: IRANSansfanum;
font-style: normal;
font-weight: 300;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Light.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
@font-face {
font-family: IRANSansfanum;
font-style: normal;
font-weight: 200;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_UltraLight.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}
@font-face {
font-family: IRANSansfanum;
font-style: normal;
font-weight: normal;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum).eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansfanum/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: 900;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_Black.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff2/IRANSansWeb_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff/IRANSansWeb_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/ttf/IRANSansWeb_Black.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: bold;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_Bold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: 500;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_Medium.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: 300;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_Light.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: 200;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_UltraLight.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: normal;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransans/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransans/ttf/IRANSansWeb.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: bold;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebbold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebbold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/woff/iranyekanwebbold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/ttf/iranyekanwebbold.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: 100;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebthin.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebthin.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/woff/iranyekanwebthin.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/ttf/iranyekanwebthin.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: 300;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanweblight.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanweblight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/woff/iranyekanweblight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/ttf/iranyekanweblight.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: normal;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebregular.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebregular.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/woff/iranyekanwebregular.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/ttf/iranyekanwebregular.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: 500;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebmedium.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebmedium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/woff/iranyekanwebmedium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/ttf/iranyekanwebmedium.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: 800;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebextrabold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebextrabold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/woff/iranyekanwebextrabold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/ttf/iranyekanwebextrabold.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: 900;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebblack.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebblack.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/woff/iranyekanwebblack.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/ttf/iranyekanwebblack.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: 950;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebextrablack.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/eot/iranyekanwebextrablack.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/woff/iranyekanwebextrablack.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekan/ttf/iranyekanwebextrablack.ttf') format('truetype');
}
@font-face {
font-family: yekan;
font-style: normal;
font-weight: bold;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebboldfanum.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebboldfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/woff/iranyekanwebboldfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/ttf/iranyekanwebboldfanum.ttf') format('truetype');
}
@font-face {
font-family: yekan;
font-style: normal;
font-weight: 100;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebthinfanum.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebthinfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/woff/iranyekanwebthinfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/ttf/iranyekanwebthinfanum.ttf') format('truetype');
}
@font-face {
font-family: yekan;
font-style: normal;
font-weight: 300;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanweblightfanum.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanweblightfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/woff/iranyekanweblightfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/ttf/iranyekanweblightfanum.ttf') format('truetype');
}
@font-face {
font-family: yekan;
font-style: normal;
font-weight: normal;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebregularfanum.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebregularfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/woff/iranyekanwebregularfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/ttf/iranyekanwebregularfanum.ttf') format('truetype');
}
@font-face {
font-family: yekan;
font-style: normal;
font-weight: 500;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebmediumfanum.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebmediumfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/woff/iranyekanwebmediumfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/ttf/iranyekanwebmediumfanum.ttf') format('truetype');
}
@font-face {
font-family: yekan;
font-style: normal;
font-weight: 800;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebextraboldfanum.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebextraboldfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/woff/iranyekanwebextraboldfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/ttf/iranyekanwebextraboldfanum.ttf') format('truetype');
}
@font-face {
font-family: yekan;
font-style: normal;
font-weight: 900;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebblackfanum.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebblackfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/woff/iranyekanwebblackfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/ttf/iranyekanwebblackfanum.ttf') format('truetype');
}
@font-face {
font-family: yekan;
font-style: normal;
font-weight: 950;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebextrablackfanum.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/eot/iranyekanwebextrablackfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/woff/iranyekanwebextrablackfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iranyekanfanum/ttf/iranyekanwebextrablackfanum.ttf') format('truetype');
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: 10;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-thin.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-thin.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-thin.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-thin.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: 200;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-extralight.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-extralight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-extralight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-extralight.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: 300;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-light.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-light.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: 500;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-medium.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-medium.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: 600;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-demibold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-demibold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-demibold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-demibold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: 750;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-ultrabold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-ultrabold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-ultrabold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-ultrabold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: 800;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-extrabold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-extrabold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-extrabold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-extrabold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: 900;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-black.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-black.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: bold;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-bold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-bold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: normal;
font-weight: normal;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-regular.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-regular.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-regular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-regular.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: 10;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-thinitalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-thinitalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-thinitalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-thinitalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: 200;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-extralightitalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-extralightitalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-extralightitalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-extralightitalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: 300;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-lightitalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-lightitalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-lightitalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-lightitalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: 500;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-mediumitalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-mediumitalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-mediumitalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-mediumitalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: 600;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-demibolditalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-demibolditalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-demibolditalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-demibolditalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: 750;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-ultrabolditalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-ultrabolditalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-ultrabolditalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-ultrabolditalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: 800;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-extrabolditalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-extrabolditalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-extrabolditalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-extrabolditalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: 900;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-blackitalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-blackitalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-blackitalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-blackitalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: bold;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-bolditalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-bolditalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-bolditalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-bolditalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: dana;
font-style: italic;
font-weight: normal;
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-regularitalic.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/dana/eot/dana-regularitalic.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff2/dana-regularitalic.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dana/woff/dana-regularitalic.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
font-family: anjoman;
font-style: normal;
font-weight: normal;
src: url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/eot/Anjoman-Light.eot?#') format('eot'), /* IE6–8 */
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/woff/Anjoman-Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/woff2/Anjoman-Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/ttf/Anjoman-Light.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
font-family: anjoman;
font-style: normal;
font-weight: 600;
src: url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/eot/Anjoman-Regular.eot?#') format('eot'), /* IE6–8 */
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/woff/Anjoman-Regular.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/woff2/Anjoman-Regular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/ttf/Anjoman-Regular.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
font-family: anjoman;
font-style: normal;
font-weight: bold;
src: url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/eot/Anjoman-Bold.eot?#') format('eot'), /* IE6–8 */
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/woff/Anjoman-Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/woff2/Anjoman-Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/anjoman/ttf/Anjoman-Bold.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
font-family: 'dastnevis';
src: url('https://cdn.karizmasystem.ir/assets/fonts/dastnevis/eot/DastNevis.eot?#') format('eot'), /* IE6–8 */
url('https://cdn.karizmasystem.ir/assets/fonts/dastnevis/woff/DastNevis.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/dastnevis/ttf/DastNevis.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
font-family: 'aviny';
src: url('https://cdn.karizmasystem.ir/assets/fonts/aviny/ttf/aviny.ttf') format('truetype');
}
@font-face {
font-family: iransansdn;
font-style: normal;
font-weight: bold;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/eot/iransansdnbold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/eot/iransansdnbold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/woff2/iransansdnbold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/woff/iransansdnbold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/ttf/iransansdnbold.ttf') format('truetype');
}
@font-face {
font-family: iransansdn;
font-style: normal;
font-weight: 300;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/eot/iransansdnlight.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/eot/iransansdnlight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/woff2/iransansdnlight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/woff/iransansdnlight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/ttf/iransansdnlight.ttf') format('truetype');
}
@font-face {
font-family: iransansdn;
font-style: normal;
font-weight: normal;
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/eot/iransansdn.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/eot/iransansdn.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/woff2/iransansdn.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/woff/iransansdn.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('https://cdn.karizmasystem.ir/assets/fonts/iransansdn/ttf/iransansdn.ttf') format('truetype');
}
@font-face {
font-family: "Droid Arabic Kufi";
font-style: normal;
font-weight: normal;
src: url("fonts/droidkufi/DroidKufi-Regular.woff") format("woff"), url("fonts/droidkufi/DroidKufi-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Palatino";
font-style: normal;
font-weight: normal;
src: url("fonts/palatino/PalatinoRegular.woff") format("woff"), url("fonts/palatino/PalatinoRegular.ttf") format("truetype");
}
@font-face {
font-family: "Koodak";
font-style: normal;
font-weight: normal;
src: url("fonts/koodak/BKoodakBold.woff") format("woff"), url("fonts/koodak/BKoodakBold.ttf") format("truetype");
}
@font-face {
font-family: Vazir;
src: url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir.ttf') format('truetype');
font-weight: normal;
}
@font-face {
font-family: Vazir;
src: url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir-Bold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir-Bold.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir-Bold.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: Vazir;
src: url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir-Light.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir-Light.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir-Light.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/vazir/Vazir-Light.ttf') format('truetype');
font-weight: 300;
}
@font-face {
font-family: Samim;
src: url('https://cdn.karizmasystem.ir/assets/fonts/samim/Samim.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/samim/Samim.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/samim/Samim.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/samim/Samim.ttf') format('truetype');
font-weight: normal;
}
@font-face {
font-family: Samim;
src: url('https://cdn.karizmasystem.ir/assets/fonts/samim/Samim-Bold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/samim/Samim-Bold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/samim/Samim-Bold.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/samim/Samim-Bold.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: Shabnam;
src: url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam.ttf') format('truetype');
font-weight: normal;
}
@font-face {
font-family: Shabnam;
src: url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam-Bold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam-Bold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam-Bold.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam-Bold.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: Shabnam;
src: url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam-Light.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam-Light.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam-Light.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/shabnam/Shabnam-Light.ttf') format('truetype');
font-weight: 300;
}
@font-face {
font-family: Sahel;
src: url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel.ttf') format('truetype');
font-weight: normal;
}
@font-face {
font-family: Sahel;
src: url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel-Bold.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel-Bold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel-Bold.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel-Bold.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: Sahel;
src: url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel-Black.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel-Black.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel-Black.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/sahel/Sahel-Black.ttf') format('truetype');
font-weight: 900;
}
@font-face {
font-family: Nahid;
src: url('https://cdn.karizmasystem.ir/assets/fonts/nahid/Nahid.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/nahid/Nahid.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/nahid/Nahid.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/nahid/Nahid.ttf') format('truetype');
font-weight: normal;
}
@font-face {
font-family: Tanha;
src: url('https://cdn.karizmasystem.ir/assets/fonts/tanha/Tanha.eot');
src: url('https://cdn.karizmasystem.ir/assets/fonts/tanha/Tanha.eot?#iefix') format('embedded-opentype'),
url('https://cdn.karizmasystem.ir/assets/fonts/tanha/Tanha.woff') format('woff'),
url('https://cdn.karizmasystem.ir/assets/fonts/tanha/Tanha.ttf') format('truetype');
font-weight: normal;
}
/*End Fonts*/
/* فونت بهینهسازی شده */
body {
font-family: IRANSansfanum;
background-color: var(--light-color);
color: var(--text-color);
line-height: 1.7;
overflow-x: hidden;
font-weight: 400;
}
/* Font fallback قبل از لود شدن فونتهای وب */
@font-face {
font-family: IRANSansfanum;
src: local('Tahoma');
ascent-override: 95%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 100%;
}
.font-loading {
font-family: IRANSansfanum;
}
/* بهبود نمایش headings با فونت Vazir */
h1, h2, h3, h4, h5, h6 {
font-family: IRANSansfanum;
font-weight: 700;
letter-spacing: -0.01em;
}
/* بهبود display برای دکمهها و عناصر مهم */
button, .cta-button, .btn, input, textarea, select {
font-family: IRANSans;
}
/* بهینهسازی برای فونت swap */
@supports (font-display: swap) {
body {
font-display: swap;
}
}
/* بقیه کدهای CSS شما... */
/* Page Loader */
.page-loader {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.page-loader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Page Loader */
.page-loader {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.page-loader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Navigation - اصلاح شده */
.navbar {
background: rgba(255, 255, 255, 0.98);
padding: 0.5rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-sm);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
height: 70px;
}
.navbar.scrolled {
padding: 0.2rem 0;
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.99);
}
.navbar-brand {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
height: 30px;
display: flex;
align-items: center;
z-index: 1001;
}
.navbar-brand img {
height: 30px;
width: auto;
transition: all 0.3s ease;
}
.navbar-brand:hover img {
transform: scale(1.05);
}
.navbar .container {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Desktop Menu - اصلاح شده */
.desktop-menu {
display: flex;
align-items: center;
flex-direction: row;
margin-right: auto;
}
.desktop-menu .navbar-nav {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 0;
padding-right: 200px;
list-style: none;
}
.desktop-menu .nav-item {
margin: 0;
}
.desktop-menu .nav-link {
font-weight: 600;
color: var(--dark-color) !important;
margin: 0 0.2rem;
padding: 0.5rem 0.8rem !important;
position: relative;
transition: all 0.3s ease;
border-radius: 8px;
font-size: 0.9rem;
text-decoration: none;
white-space: nowrap;
}
.desktop-menu .nav-link:hover {
color: var(--primary-color) !important;
background: rgba(94, 61, 238, 0.05);
transform: translateY(-2px);
}
.desktop-menu .nav-link.active {
color: var(--primary-color) !important;
font-weight: 700;
}
.desktop-menu .nav-link.active::before {
content: '';
position: absolute;
bottom: 0;
right: 1rem;
left: 1rem;
height: 3px;
background: var(--gradient-primary);
border-radius: 3px;
animation: underline 0.4s ease;
}
@keyframes underline {
from { width: 0; opacity: 0; }
to { width: calc(100% - 2rem); opacity: 1; }
}
/* Mobile Menu Button */
.mobile-menu-btn {
border: none;
background: none;
font-size: 1.8rem;
color: var(--dark-color);
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: none;
}
.mobile-menu-btn:hover {
background: rgba(94, 61, 238, 0.05);
transform: translateY(-50%) scale(1.1);
}
/* Mobile Menu */
.mobile-menu-overlay {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
z-index: 1049;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-menu {
position: fixed;
bottom: -100%;
right: 0;
width: 100%;
background: white;
z-index: 2000;
padding: 2rem 1rem 3rem;
box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15);
border-radius: 30px 30px 0 0;
transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 85vh;
overflow-y: auto;
}
.mobile-menu.active {
bottom: 0;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(94, 61, 238, 0.1);
padding-right: 5px;
padding-left: 5px;
}
.btn-close {
width: 44px;
height: 44px;
background: rgba(94, 61, 238, 0.1);
border: none;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--primary-color);
cursor: pointer;
transition: all 0.3s ease;
}
.btn-close:hover {
background: rgba(94, 61, 238, 0.2);
transform: rotate(90deg);
}
.mobile-menu .nav {
display: flex;
flex-direction: column;
gap: 0.8rem;
padding-right: 5px;
padding-left: 5px;
}
.mobile-menu .nav-link {
padding: 1.2rem 1rem;
font-weight: 600;
color: var(--dark-color);
border-radius: 16px;
transition: all 0.3s ease;
display: flex;
align-items: center;
text-decoration: none;
background: rgba(94, 61, 238, 0.03);
border: 1px solid rgba(94, 61, 238, 0.05);
}
.mobile-menu .nav-link i {
margin-left: 0.8rem;
font-size: 1.3rem;
width: 24px;
text-align: center;
}
.mobile-menu .nav-link:hover,
.mobile-menu .nav-link.active {
background: var(--gradient-primary);
color: white !important;
transform: translateX(-10px);
border-color: var(--primary-color);
box-shadow: 0 5px 20px rgba(94, 61, 238, 0.3);
}
.mobile-menu-cta {
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid rgba(94, 61, 238, 0.1);
padding-right: 5px;
padding-left: 5px;
}
.mobile-menu-cta .cta-button {
width: 100%;
padding: 1.2rem;
font-size: 1.1rem;
font-weight: 700;
border-radius: 16px;
border: none;
background: var(--gradient-accent);
color: white;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
box-shadow: 0 10px 30px rgba(255, 107, 157, 0.3);
}
.mobile-menu-cta .cta-button:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 107, 157, 0.4);
}
/* Hero Section */
.hero-section {
padding: 140px 0 100px;
background: var(--gradient-primary);
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 201, 255, 0.1) 0%, transparent 50%);
}
.hero-title {
font-size: 3.8rem;
font-weight: 900;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.3rem;
opacity: 0.9;
margin-bottom: 2.5rem;
}
.hero-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.5rem 1.2rem;
border-radius: 50px;
font-weight: 600;
margin-bottom: 2rem;
cursor: pointer;
color: white;
}
/* Counter Animation */
.counter-item {
text-align: center;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: transform 0.3s ease;
}
.counter-item:hover {
transform: translateY(-5px);
}
.counter-number {
font-size: 3rem;
font-weight: 900;
background: linear-gradient(135deg, #ffffff 0%, #b4c6fc 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: 0.5rem;
font-family: 'Almarai', sans-serif;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.counter-label {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
/* CTA Button */
/* CTA Button - اصلاح شده */
.cta-button {
background: var(--gradient-accent);
color: white;
border: none;
padding: 0.7rem 1.5rem;
font-size: 1rem; /* تغییر از 0.9rem به 1rem */
font-weight: 700;
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 5px 15px rgba(255, 107, 157, 0.3);
position: relative;
overflow: hidden;
z-index: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
line-height: 1.2;
font-family: inherit; /* اضافه کردن این خط برای اطمینان از ارثبری فونت */
text-decoration: none; /* برای لینکها */
}
.cta-button:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 15px 40px rgba(255, 107, 157, 0.4);
color: white;
}
.cta-button:active {
transform: translateY(-4px) scale(1.02);
}
.cta-button i {
transition: transform 0.3s ease;
}
.cta-button:hover i {
transform: translateX(5px);
}
/* برای دکمههای بزرگتر */
.cta-button.btn-lg {
padding: 1rem 2rem;
font-size: 1.2rem;
}
/* برای دکمههای کوچکتر */
.cta-button.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
/* حذف استایل inline یا override آن */
button.cta-button[style*="font-size"] {
font-size: 1rem !important; /* بازنویسی font-size inline */
}
/* اطمینان از اینکه فونت روی همه دکمهها اعمال شود */
.btn.cta-button,
button.cta-button,
a.cta-button {
font-family: inherit;
}
/* Features Section */
.section-title {
position: relative;
display: inline-block;
margin-bottom: 3rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
right: 0;
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: 2px;
}
.feature-card {
background: white;
border-radius: 24px;
padding: 2.5rem 1.5rem;
height: 100%;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-sm);
opacity: 0;
transform: translateY(40px);
}
.feature-card.animate {
animation: cardAppear 0.6s ease forwards;
}
@keyframes cardAppear {
to {
opacity: 1;
transform: translateY(0);
}
}
.feature-card:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.feature-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
font-size: 2rem;
color: white;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: rotateY(180deg) scale(1.1);
background: var(--gradient-accent);
}
/* Content Rich Section */
.content-rich {
background: white;
border-radius: 30px;
padding: 4rem 1.5rem;
box-shadow: var(--shadow-lg);
margin: 3rem 0;
}
.content-rich h2 {
margin-bottom: 2rem;
color: var(--primary-dark);
}
.keyword-highlight {
background: linear-gradient(120deg, rgba(94, 61, 238, 0.1) 0%, rgba(94, 61, 238, 0.05) 100%);
padding: 0.2rem 0.8rem;
border-radius: 6px;
font-weight: 700;
color: var(--primary-color);
border-right: 3px solid var(--primary-color);
}
.text-bold {
font-weight: 700;
color: var(--dark-color);
}
/* Storytelling Section */
.story-section {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 30px;
padding: 4rem 1.5rem;
margin: 4rem 0;
position: relative;
overflow: hidden;
}
.story-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
}
.story-card {
background: white;
border-radius: 20px;
padding: 2.5rem 1.5rem;
margin-bottom: 2rem;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
border: 1px solid rgba(94, 61, 238, 0.1);
position: relative;
overflow: hidden;
}
.story-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 100%;
background: var(--gradient-primary);
}
.story-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.story-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.quote-icon {
position: absolute;
top: 1.5rem;
left: 1.5rem;
font-size: 3rem;
color: rgba(94, 61, 238, 0.1);
}
/* Wisdom Quotes */
.wisdom-section {
background: var(--gradient-dark);
color: white;
border-radius: 30px;
padding: 4rem 1.5rem;
margin: 4rem 0;
position: relative;
overflow: hidden;
}
.wisdom-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
}
.quote-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2.5rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
height: 100%;
transition: all 0.3s ease;
}
.quote-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
}
.quote-text {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 1.5rem;
position: relative;
padding-right: 1.5rem;
}
.quote-text::before {
content: '"';
position: absolute;
top: -1rem;
right: 0;
font-size: 4rem;
color: rgba(255, 255, 255, 0.2);
font-family: Georgia, serif;
}
.quote-author {
color: rgba(255, 255, 255, 0.8);
font-style: italic;
border-right: 3px solid var(--secondary-color);
padding-right: 1rem;
position: relative;
cursor: pointer;
}
/* تولتیپ دسکتاپ - با انیمیشن نرم */
.tooltip-wrapper {
position: relative;
display: inline-block;
cursor: help;
}
.tooltip-wrapper .tooltip-text {
visibility: hidden;
width: 320px;
background: linear-gradient(135deg, var(--dark-color) 0%, var(--primary-dark) 100%);
color: white;
text-align: right;
border-radius: 16px;
padding: 1.8rem;
position: absolute;
z-index: 1000;
bottom: 125%;
right: 50%;
margin-right: -160px;
opacity: 0;
transform: translateY(15px) scale(0.95);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
pointer-events: none;
}
.tooltip-wrapper .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
right: 50%;
margin-right: -12px;
border-width: 12px;
border-style: solid;
border-color: var(--primary-dark) transparent transparent transparent;
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
transition: opacity 0.4s ease;
}
/* دسکتاپ: هاور با انیمیشن نرم */
@media (min-width: 769px) {
.tooltip-wrapper:hover .tooltip-text {
visibility: visible;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
transition-delay: 0.05s;
}
.tooltip-wrapper:hover .tooltip-text::after {
opacity: 0.9;
}
}
/* موبایل: استایل کلیک */
@media (max-width: 768px) {
.tooltip-wrapper {
cursor: pointer;
-webkit-tap-highlight-color: rgba(94, 61, 238, 0.1);
tap-highlight-color: rgba(94, 61, 238, 0.1);
}
.tooltip-wrapper:active {
transform: scale(0.97);
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tooltip-wrapper .tooltip-text {
display: none;
}
}
/* Modal برای تولتیپها - با انیمیشنهای نرم */
.tooltip-modal {
display: none;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(0px);
z-index: 10000;
justify-content: center;
align-items: center;
padding: 20px;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
backdrop-filter 0.6s ease;
}
.tooltip-modal.active {
display: flex;
opacity: 1;
backdrop-filter: blur(10px);
animation: modalBackdropBlur 0.6s ease forwards;
}
@keyframes modalBackdropBlur {
0% {
backdrop-filter: blur(0px);
background: rgba(0, 0, 0, 0);
}
100% {
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.85);
}
}
.tooltip-modal-content {
background: linear-gradient(145deg, var(--dark-color) 0%, var(--primary-dark) 100%);
color: white;
border-radius: 24px;
padding: 2.5rem;
max-width: 520px;
width: 100%;
max-height: 82vh;
overflow-y: auto;
box-shadow:
0 25px 80px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.12);
position: relative;
transform: translateY(40px) scale(0.96);
opacity: 0;
transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.tooltip-modal.active .tooltip-modal-content {
transform: translateY(0) scale(1);
opacity: 1;
}
.tooltip-modal-close {
position: absolute;
top: 20px;
left: 20px;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
font-size: 1.3rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
}
.tooltip-modal-close:hover {
background: rgba(255, 255, 255, 0.25);
transform: rotate(90deg) scale(1.1);
border-color: rgba(255, 255, 255, 0.3);
}
.tooltip-modal-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-left: 50px;
opacity: 0;
transform: translateX(-25px);
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.tooltip-modal.active .tooltip-modal-header {
opacity: 1;
transform: translateX(0);
}
.tooltip-modal-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
transform: scale(0) rotate(-180deg);
box-shadow: 0 10px 30px rgba(94, 61, 238, 0.3);
transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
.tooltip-modal.active .tooltip-modal-icon {
transform: scale(1) rotate(0deg);
}
.tooltip-modal-title {
font-weight: 800;
font-size: 1.4rem;
margin-bottom: 0.4rem;
background: linear-gradient(135deg, #ffffff 0%, #b4c6fc 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0;
transform: translateY(15px);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.tooltip-modal.active .tooltip-modal-title {
opacity: 1;
transform: translateY(0);
}
.tooltip-modal-subtitle {
font-size: 0.95rem;
opacity: 0;
transform: translateY(15px);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.tooltip-modal.active .tooltip-modal-subtitle {
opacity: 0.85;
transform: translateY(0);
}
.tooltip-modal-body {
line-height: 1.9;
font-size: 1.05rem;
opacity: 0;
transform: translateY(25px);
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}
.tooltip-modal.active .tooltip-modal-body {
opacity: 1;
transform: translateY(0);
}
.tooltip-modal-list {
list-style: none;
padding: 0;
margin: 2rem 0 1rem;
opacity: 0;
transform: translateY(15px);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}
.tooltip-modal.active .tooltip-modal-list {
opacity: 1;
transform: translateY(0);
}
.tooltip-modal-list li {
margin-bottom: 1rem;
padding-right: 2rem;
position: relative;
opacity: 0;
transform: translateX(-20px);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tooltip-modal.active .tooltip-modal-list li {
opacity: 1;
transform: translateX(0);
}
/* انیمیشن آبشاری برای آیتمهای لیست */
.tooltip-modal-list li:nth-child(1) { transition-delay: 0.55s; }
.tooltip-modal-list li:nth-child(2) { transition-delay: 0.60s; }
.tooltip-modal-list li:nth-child(3) { transition-delay: 0.65s; }
.tooltip-modal-list li:nth-child(4) { transition-delay: 0.70s; }
.tooltip-modal-list li:nth-child(5) { transition-delay: 0.75s; }
.tooltip-modal-list li:nth-child(6) { transition-delay: 0.80s; }
.tooltip-modal-list li:before {
content: "✓";
position: absolute;
right: 0;
color: var(--secondary-color);
font-size: 1.4rem;
line-height: 1;
font-weight: bold;
text-shadow: 0 2px 10px rgba(0, 201, 255, 0.3);
}
/* بهینهسازی برای موبایل */
@media (max-width: 768px) {
.tooltip-modal {
padding: 15px;
backdrop-filter: blur(0px);
}
.tooltip-modal.active {
backdrop-filter: blur(8px);
animation: modalBackdropBlurMobile 0.5s ease forwards;
}
@keyframes modalBackdropBlurMobile {
0% {
backdrop-filter: blur(0px);
background: rgba(0, 0, 0, 0);
}
100% {
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.9);
}
}
.tooltip-modal-content {
max-width: 92%;
padding: 2rem 1.5rem;
border-radius: 22px;
transform: translateY(50px) scale(0.94);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.tooltip-modal-close {
width: 48px;
height: 48px;
top: 15px;
left: 15px;
font-size: 1.4rem;
}
.tooltip-modal-header {
gap: 12px;
margin-bottom: 1.8rem;
padding-left: 0;
transform: translateX(-20px);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.tooltip-modal-icon {
width: 55px;
height: 55px;
font-size: 1.6rem;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.tooltip-modal-title {
font-size: 1.3rem;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
.tooltip-modal-subtitle {
font-size: 0.9rem;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.tooltip-modal-body {
font-size: 1rem;
line-height: 1.8;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.tooltip-modal-list {
margin: 1.8rem 0 1rem;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}
.tooltip-modal-list li {
margin-bottom: 0.9rem;
padding-right: 1.8rem;
transform: translateX(-15px);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* انیمیشنهای سریعتر برای موبایل */
.tooltip-modal-list li:nth-child(1) { transition-delay: 0.45s; }
.tooltip-modal-list li:nth-child(2) { transition-delay: 0.48s; }
.tooltip-modal-list li:nth-child(3) { transition-delay: 0.51s; }
.tooltip-modal-list li:nth-child(4) { transition-delay: 0.54s; }
.tooltip-modal-list li:nth-child(5) { transition-delay: 0.57s; }
.tooltip-modal-list li:nth-child(6) { transition-delay: 0.60s; }
}
/* بهینهسازی برای تبلت */
@media (min-width: 769px) and (max-width: 1024px) {
.tooltip-wrapper .tooltip-text {
width: 300px;
margin-right: -150px;
}
.tooltip-modal-content {
max-width: 90%;
padding: 2.2rem;
}
}
/* اسکرول بار زیبا برای مودال */
.tooltip-modal-content::-webkit-scrollbar {
width: 8px;
}
.tooltip-modal-content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin: 10px 0;
}
.tooltip-modal-content::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.tooltip-modal-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-color) 100%);
}
/* Experts Section */
.experts-section {
background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
border-radius: 30px;
padding: 4rem 1.5rem;
margin: 4rem 0;
}
.expert-card {
background: white;
border-radius: 20px;
padding: 2rem 1.5rem;
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-sm);
}
.expert-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
/* تصاویر با Lazy Loading */
.expert-image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 15px;
margin-bottom: 1.5rem;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: #f0f0f0;
opacity: 0;
transition: opacity 0.3s ease;
}
.expert-image.loaded {
opacity: 1;
}
.expert-badge {
display: inline-block;
background: var(--gradient-primary);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
/* Professional Resources Section */
.professional-resources {
background: white;
border-radius: 30px;
padding: 4rem 1.5rem;
margin: 4rem 0;
box-shadow: var(--shadow-lg);
}
.resource-card {
background: #ffffff;
border-radius: 16px;
padding: 2rem 1.5rem;
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.resource-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.resource-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.video-thumbnail {
width: 100%;
height: 200px;
border-radius: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
}
.video-thumbnail::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(0,0,0,0.3) 0%, transparent 100%);
}
.play-button {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
z-index: 2;
}
.play-button:hover {
background: white;
transform: translate(50%, -50%) scale(1.1);
}
/* Resources Section */
.resources-section {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 30px;
padding: 4rem 1.5rem;
margin: 4rem 0;
}
.category-card {
background: white;
border-radius: 20px;
padding: 2.5rem 1.5rem;
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-sm);
}
.category-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.category-icon {
width: 70px;
height: 70px;
background: var(--gradient-primary);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
/* Scientific Research Section */
.scientific-section {
background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
border-radius: 30px;
padding: 4rem 1.5rem;
margin: 4rem 0;
}
.research-card {
background: white;
border-radius: 16px;
padding: 2rem 1.5rem;
margin-bottom: 1.5rem;
border-right: 4px solid var(--primary-color);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.research-card:hover {
transform: translateX(-10px);
box-shadow: var(--shadow-md);
}
.research-source {
color: var(--primary-color);
font-weight: 600;
font-size: 0.9rem;
margin-top: 1rem;
cursor: pointer;
}
/* Success Path Section */
.path-section {
background: var(--gradient-primary);
color: white;
border-radius: 30px;
padding: 4rem 1.5rem;
margin: 4rem 0;
position: relative;
overflow: hidden;
}
.path-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
}
.path-step {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 2rem 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
padding-right: 4rem;
}
.step-number {
position: absolute;
top: 1rem;
right: 1rem;
width: 40px;
height: 40px;
background: var(--gradient-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
}
/* Final CTA Section */
.final-cta-section {
background: var(--gradient-dark);
color: white;
border-radius: 30px;
padding: 4rem 1.5rem;
position: relative;
overflow: hidden;
margin: 4rem 0;
}
.final-cta-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
background: rgba(255, 255, 255, 0.08);
padding: 1.2rem;
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-item i {
font-size: 1.5rem;
margin-left: 1rem;
color: var(--secondary-color);
}
.feature-text h5 {
color: white;
margin-bottom: 0.3rem;
}
.feature-text p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin-bottom: 0;
}
/* Testimonials */
.testimonial-card {
background: white;
border-radius: 20px;
padding: 2rem 1.5rem;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
height: 100%;
}
.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.rating {
color: #ffc107;
font-size: 1.2rem;
margin-bottom: 1rem;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* FAQ Section */
.faq-item {
background: white;
border-radius: 16px;
margin-bottom: 1rem;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
}
.faq-item:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
}
.faq-question {
padding: 1.5rem;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: white;
transition: all 0.3s ease;
color: var(--dark-color);
}
.faq-question:hover {
background: rgba(94, 61, 238, 0.02);
color: var(--primary-color);
}
.faq-answer {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
line-height: 1.8;
}
.faq-answer.active {
padding: 0 1.5rem 1.5rem;
max-height: 500px;
}
.faq-toggle {
transition: transform 0.4s ease;
color: var(--primary-color);
}
.faq-toggle.active {
transform: rotate(180deg);
}
/* Tags Styling */
.tags-container {
margin: 2rem 0;
padding: 1.5rem;
background: rgba(94, 61, 238, 0.03);
border-radius: 15px;
border-right: 4px solid var(--primary-color);
}
.tag-label {
font-weight: 700;
color: #dddaeb;
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.tag-label i {
margin-left: 0.5rem;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
justify-content: center;
}
.tag {
background: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 600;
color: var(--primary-color);
border: 2px solid rgba(94, 61, 238, 0.1);
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
}
.tag:hover {
background: var(--gradient-primary);
color: white;
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
/* Footer */
.footer {
background: var(--dark-color);
color: white;
padding: 4rem 0 2rem;
margin-top: 4rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
display: block;
margin-bottom: 0.8rem;
}
.footer-links a:hover {
color: white;
transform: translateX(5px);
}
/* بخش هشتگهای حرفهای */
.hashtags-section {
background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
border-radius: 30px;
padding: 3.5rem 1.5rem;
margin: 4rem 0;
border: 2px solid rgba(94, 61, 238, 0.1);
position: relative;
overflow: hidden;
box-shadow: 0 10px 40px rgba(94, 61, 238, 0.08);
}
.hashtags-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
opacity: 0.5;
}
.hashtags-title {
text-align: center;
margin-bottom: 2.5rem;
position: relative;
}
.hashtags-title h2 {
display: inline-block;
font-weight: 800;
font-size: 2.2rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 1rem;
position: relative;
}
.hashtags-title h2::after {
content: '';
position: absolute;
bottom: -8px;
right: 50%;
transform: translateX(50%);
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: 2px;
}
.hashtags-title p {
color: var(--text-color);
font-size: 1.1rem;
opacity: 0.8;
max-width: 600px;
margin: 0 auto;
}
.hashtags-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
position: relative;
z-index: 1;
}
.hashtag {
background: white;
padding: 0.8rem 1.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
color: var(--primary-color);
border: 2px solid rgba(94, 61, 238, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
cursor: pointer;
box-shadow: 0 5px 15px rgba(94, 61, 238, 0.08);
display: flex;
align-items: center;
gap: 0.5rem;
}
.hashtag::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
border-radius: 50px;
}
.hashtag:hover {
color: white;
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(94, 61, 238, 0.2);
border-color: var(--primary-color);
}
.hashtag:hover::after {
opacity: 1;
}
.hashtag-popular {
position: relative;
background: var(--gradient-accent);
color: white;
border-color: transparent;
animation: pulse 2s infinite;
}
.hashtag-popular::before {
content: '#';
color: white;
opacity: 1;
}
.hashtag-popular::after {
display: none;
}
.hashtag-popular:hover {
background: var(--gradient-accent);
transform: translateY(-5px) scale(1.05);
}
.hashtag-popular::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
background: var(--gradient-accent);
border-radius: 50px;
opacity: 0.3;
z-index: -1;
animation: pulse-border 2s infinite;
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 5px 20px rgba(255, 107, 157, 0.3);
}
50% {
box-shadow: 0 5px 25px rgba(255, 107, 157, 0.5);
}
}
@keyframes pulse-border {
0%, 100% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.05);
opacity: 0.2;
}
}
.hashtag-trending {
position: relative;
background: white;
border-color: var(--warning-color);
color: var(--warning-color);
}
.hashtag-trending::after {
content: '🔥';
position: absolute;
top: -8px;
left: -8px;
font-size: 0.9rem;
animation: fire 1.5s infinite alternate;
}
@keyframes fire {
0% {
transform: scale(1) rotate(-10deg);
}
100% {
transform: scale(1.1) rotate(10deg);
}
}
.hashtag-info {
text-align: center;
margin-top: 1.5rem;
color: var(--text-color);
font-size: 0.9rem;
opacity: 0.7;
position: relative;
z-index: 1;
}
/* Media Queries برای کنترل نمایش منو */
@media (max-width: 991px) {
.desktop-menu {
display: none !important;
}
.mobile-menu-btn {
display: block !important;
}
}
@media (min-width: 992px) {
.desktop-menu {
display: flex !important;
}
.mobile-menu-btn {
display: none !important;
}
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.container {
padding-right: 8px !important;
padding-left: 8px !important;
}
.container-fluid {
padding-right: 8px !important;
padding-left: 8px !important;
}
.row {
margin-right: -4px !important;
margin-left: -4px !important;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto,
.col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2,
.col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1,
.col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
.col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4,
.col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-right: 4px !important;
padding-left: 4px !important;
}
.card, .feature-card, .story-card, .quote-card, .expert-card, .resource-card, .category-card,
.research-card, .testimonial-card, .faq-item, .counter-item {
margin-right: 2px !important;
margin-left: 2px !important;
}
.hero-title {
font-size: 2.2rem;
padding-right: 8px;
padding-left: 8px;
}
.hero-subtitle {
font-size: 1.1rem;
padding-right: 8px;
padding-left: 8px;
}
.content-rich, .story-section, .wisdom-section, .professional-resources,
.scientific-section, .path-section, .experts-section, .resources-section {
padding-right: 8px !important;
padding-left: 8px !important;
}
.final-cta-section {
padding: 2rem 8px !important;
}
.feature-item {
padding-right: 8px !important;
padding-left: 8px !important;
}
.expert-image {
height: 200px;
}
.hashtags-section {
padding: 2.5rem 1rem;
margin: 3rem 0;
border-radius: 20px;
}
.hashtags-title h2 {
font-size: 1.8rem;
}
.hashtags-title p {
font-size: 1rem;
padding: 0 1rem;
}
.hashtags-container {
gap: 0.8rem;
}
.hashtag {
padding: 0.7rem 1.2rem;
font-size: 0.9rem;
}
}
@media (max-width: 992px) {
.hero-title {
font-size: 2.8rem;
}
.content-rich, .story-section, .wisdom-section, .professional-resources,
.scientific-section, .path-section, .experts-section, .resources-section {
padding: 2rem 1rem;
}
.final-cta-section {
padding: 2.5rem 1rem;
}
.expert-image {
height: 220px;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 1rem;
}
.cta-button {
padding: 0.6rem 1.2rem;
font-size: 0.85rem;
}
.mobile-menu {
padding: 1.5rem 0.5rem 2rem;
}
.expert-image {
height: 320px;
}
.counter-number {
font-size: 2.2rem;
}
.feature-card, .story-card, .quote-card, .expert-card, .resource-card,
.category-card, .research-card, .testimonial-card {
padding: 1.5rem 1rem !important;
}
.hashtags-section {
padding: 2rem 0.8rem;
margin: 2.5rem 0;
}
.hashtags-title h2 {
font-size: 1.5rem;
}
.hashtags-title p {
font-size: 0.9rem;
}
.hashtags-container {
gap: 0.6rem;
}
.hashtag {
padding: 0.6rem 1rem;
font-size: 0.85rem;
}
.hashtag-popular::before {
top: -3px;
left: -3px;
width: calc(100% + 6px);
height: calc(100% + 6px);
}
}
@media (min-width: 1200px) {
.hashtags-section {
padding: 4rem 2rem;
}
.hashtags-title h2 {
font-size: 2.5rem;
}
.hashtags-title p {
font-size: 1.2rem;
}
.hashtags-container {
gap: 1.2rem;
}
.hashtag {
padding: 1rem 1.8rem;
font-size: 1.1rem;
}
}
/* استایل منوی کارت - Bottom Sheet */ .card-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(2px); } .card-menu-overlay.show { opacity: 1; visibility: visible; } .card-bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform 0.3s ease; z-index: 10000; max-height: 80vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(0,0,0,0.2); } .card-bottom-sheet.show { transform: translateY(0); } .card-sheet-header { padding: 16px 20px; border-bottom: 1px solid #eef2f6; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 24px 24px 0 0; } .card-sheet-header h3 { margin: 0; font-size: 1.2rem; font-weight: 600; } .card-close-sheet-btn { background: rgba(255,255,255,0.2); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .card-close-sheet-btn:hover { background: rgba(255,255,255,0.3); transform: scale(1.1); } .card-sheet-content { padding: 16px; } .card-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; } .card-menu-grid-item { background: #f8f9fa; border-radius: 16px; padding: 20px 12px; text-align: center; cursor: pointer; transition: all 0.2s; border: 1px solid #eef2f6; } .card-menu-grid-item:hover { background: #edf2f7; transform: translateY(-2px); border-color: #667eea; } .card-menu-grid-item i { font-size: 2rem; color: #667eea; margin-bottom: 8px; display: block; } .card-menu-grid-item span { font-size: 0.9rem; font-weight: 500; color: #2d3748; } .card-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .card-share-grid-item { border-radius: 16px; padding: 16px 8px; text-align: center; cursor: pointer; transition: all 0.2s; border: 1px solid #eef2f6; } .card-share-grid-item:hover { transform: translateY(-2px); } .card-share-grid-item.telegram { background: #0088cc; color: white; } .card-share-grid-item.whatsapp { background: #25D366; color: white; } .card-share-grid-item.twitter { background: #000000; color: white; } .card-share-grid-item.linkedin { background: #0077b5; color: white; } .card-share-grid-item.facebook { background: #1877f2; color: white; } .card-share-grid-item.instagram { background: linear-gradient(45deg, #f09433, #d62976, #962fbf, #4f5bd5); color: white; } .card-share-grid-item.clipboard { background: #6c757d; color: white; } .card-share-grid-item.email { background: #ea4335; color: white; } .card-share-grid-item i { font-size: 1.8rem; margin-bottom: 4px; display: block; } .card-share-grid-item span { font-size: 0.7rem; display: block; } /* آیکونهای کارت - همیشه نمایش داده میشوند و بدون پسزمینه */ .card-actions { opacity: 1 !important; z-index: 10; } .share-icon-btn, .menu-icon-btn { color: white !important; background: transparent !important; border: none !important; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform 0.2s, color 0.2s; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .share-icon-btn:hover, .menu-icon-btn:hover { transform: scale(1.1); color: #ff9f1c !important; } .share-icon-btn svg, .menu-icon-btn svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; } /* برای کارتهای روشن، رنگ آیکونها تیرهتر */ .story-card .share-icon-btn, .story-card .menu-icon-btn, .expert-card .share-icon-btn, .expert-card .menu-icon-btn, .resource-card .share-icon-btn, .resource-card .menu-icon-btn, .category-card .share-icon-btn, .category-card .menu-icon-btn, .testimonial-card .share-icon-btn, .testimonial-card .menu-icon-btn, .research-card .share-icon-btn, .research-card .menu-icon-btn { color: #333 !important; filter: drop-shadow(0 2px 4px rgba(255,255,255,0.5)); } .story-card .share-icon-btn:hover, .story-card .menu-icon-btn:hover, .expert-card .share-icon-btn:hover, .expert-card .menu-icon-btn:hover, .resource-card .share-icon-btn:hover, .resource-card .menu-icon-btn:hover, .category-card .share-icon-btn:hover, .category-card .menu-icon-btn:hover, .testimonial-card .share-icon-btn:hover, .testimonial-card .menu-icon-btn:hover, .research-card .share-icon-btn:hover, .research-card .menu-icon-btn:hover { color: #ff9f1c !important; } /* موقعیتیابی آیکونها */ .card-actions { display: flex; justify-content: space-between; padding: 12px; } /* برای نقشه راه که فقط یک آیکون دارد */ .path-step .card-actions { justify-content: flex-start; } .path-step .share-icon-btn { margin-right: auto; } /* نوتیفیکیشن */ .card-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: white; padding: 12px 24px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; font-size: 0.95rem; z-index: 10001; transition: transform 0.3s ease; border-right: 4px solid; direction: rtl; } .card-notification.show { transform: translateX(-50%) translateY(0); } .card-notification.success { border-right-color: #48bb78; } .card-notification.success i { color: #48bb78; } .card-notification.info { border-right-color: #4299e1; } .card-notification.info i { color: #4299e1; }.mobile-sticky-cta { position: fixed; bottom: 5px; left: 5px; right: 5px; z-index: 9998; text-align: center; padding: 16px 20px; border-radius: 16px; /* افکت شیشه ای */ background: rgba(46, 204, 113, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(46, 204, 113, 0.5); /* رنگ سبز آرامشبخش */ color: white; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* انیمیشن شناور */ animation: float 3s ease-in-out infinite; /* سایه */ box-shadow: 0 10px 30px rgba(46, 204, 113, 0.3); display: none; /* مخفی در دسکتاپ */}@keyframes float { 0% { transform: translateY(0px); box-shadow: 0 10px 30px rgba(46, 204, 113, 0.3); } 50% { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(46, 204, 113, 0.5); } 100% { transform: translateY(0px); box-shadow: 0 10px 30px rgba(46, 204, 113, 0.3); }}/* سیگنال جلب توجه (پالس) */.mobile-sticky-cta::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; background: rgba(46, 204, 113, 0.3); animation: pulse 2s ease-out infinite; z-index: -1;}@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(1.05); opacity: 0; } 100% { transform: scale(1); opacity: 0; }}@media (max-width: 768px) { .mobile-sticky-cta { display: block; /* نمایش فقط در موبایل */ }}