@font-face{font-family:'Peyda';src:url('/assets/fonts/Peyda-Thin.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap} @font-face{font-family:'Peyda';src:url('/assets/fonts/peyda-extralight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap} @font-face{font-family:'Peyda';src:url('/assets/fonts/peyda-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Peyda';src:url('/assets/fonts/Peyda-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Peyda';src:url('/assets/fonts/Peyda-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Peyda';src:url('/assets/fonts/Peyda-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Peyda';src:url('/assets/fonts/Peyda-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Peyda';src:url('/assets/fonts/Peyda-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Peyda';src:url('/assets/fonts/Peyda-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap} :root{ --primary:#1565c0; --primary-dark:#0d47a1; --primary-light:#e3f2fd; --accent:#42a5f5; --text:#1c2733; --muted:#5c6b7a; --bg:#f6faff; --white:#ffffff; --radius:14px; --shadow:0 8px 24px rgba(21,101,192,.10); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Peyda',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.8;transition:background .3s ease,color .3s ease} a{text-decoration:none;color:inherit} ul{list-style:none} .container{max-width:1180px;margin:0 auto;padding:0 20px} img{max-width:100%;display:block} .has-dropdown{position:relative} .dropdown{ position:absolute; top:100%; right:0; background:#fff; min-width:240px; border-radius:14px; box-shadow:0 12px 40px rgba(21,101,192,.18), 0 4px 12px rgba(21,101,192,.08); padding:10px; z-index:200; white-space:nowrap; display:flex; flex-direction:column; gap:2px; border:1px solid #eaf2fb; margin-top: 8px; opacity:0; visibility:hidden; transform:translateY(-14px) scale(.94); transform-origin: top right; transition: opacity .35s cubic-bezier(.34,1.4,.64,1), transform .35s cubic-bezier(.34,1.4,.64,1), visibility 0s linear .35s; } .dropdown::before{ content:''; position:absolute; top:-6px; right:24px; width:12px; height:12px; background:#fff; border-top:1px solid #eaf2fb; border-right:1px solid #eaf2fb; transform:rotate(-45deg); border-radius:2px; } .has-dropdown:hover .dropdown, .has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0) scale(1); transition: opacity .35s cubic-bezier(.34,1.4,.64,1), transform .35s cubic-bezier(.34,1.4,.64,1), visibility 0s; } .dropdown li{ display:block; width:100%; border:none !important; opacity:0; transform: translateX(14px); transition: opacity .3s cubic-bezier(.34,1.4,.64,1), transform .3s cubic-bezier(.34,1.4,.64,1); } .has-dropdown:hover .dropdown li, .has-dropdown.open .dropdown li{ opacity:1; transform: translateX(0); } .has-dropdown:hover .dropdown li:nth-child(1), .has-dropdown.open .dropdown li:nth-child(1){ transition-delay: .08s; } .has-dropdown:hover .dropdown li:nth-child(2), .has-dropdown.open .dropdown li:nth-child(2){ transition-delay: .13s; } .has-dropdown:hover .dropdown li:nth-child(3), .has-dropdown.open .dropdown li:nth-child(3){ transition-delay: .18s; } .has-dropdown:hover .dropdown li:nth-child(4), .has-dropdown.open .dropdown li:nth-child(4){ transition-delay: .23s; } .has-dropdown:hover .dropdown li:nth-child(5), .has-dropdown.open .dropdown li:nth-child(5){ transition-delay: .28s; } .has-dropdown:hover .dropdown li:nth-child(6), .has-dropdown.open .dropdown li:nth-child(6){ transition-delay: .33s; } .dropdown li a{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; text-align:right; border-radius:10px; white-space:nowrap; word-break:normal; overflow-wrap:normal; font-weight:600; font-size:14px; color:var(--text); transition: all .25s cubic-bezier(.34,1.4,.64,1); position:relative; } .dropdown li a::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--primary-light); transition: all .25s ease; flex-shrink:0; } .dropdown li a:hover{ background: var(--primary-light); color: var(--primary-dark); padding-right: 22px; transform: translateX(-4px); } .dropdown li a:hover::before{ background: var(--primary); transform: scale(1.5); } @media (min-width:901px){ } @media (max-width:900px){ .has-dropdown > .dropdown{ display: block !important; position: static !important; background: var(--primary-light); margin: 0; border-radius: 12px; padding: 0 10px; min-width: 0; white-space: normal; z-index: auto; border: none; box-shadow: none; transform: none !important; visibility: visible !important; opacity: 1 !important; max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1), padding .3s ease, margin .3s ease; } .has-dropdown.open > .dropdown{ max-height: 600px; padding: 8px 10px; margin: 6px 0 10px; } .has-dropdown > .dropdown::before{ display: none; } .has-dropdown:hover > .dropdown{ max-height: 0; padding: 0 10px; margin: 0; } .has-dropdown.open:hover > .dropdown{ max-height: 600px; padding: 8px 10px; margin: 6px 0 10px; } .has-dropdown > .dropdown li{ display: block; width: 100%; border: none !important; opacity: 0; transform: translateX(24px); transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1); transition-delay: 0s; } .has-dropdown.open > .dropdown li{ opacity: 1; transform: translateX(0); } .has-dropdown.open > .dropdown li:nth-child(1){ transition-delay: .10s; } .has-dropdown.open > .dropdown li:nth-child(2){ transition-delay: .16s; } .has-dropdown.open > .dropdown li:nth-child(3){ transition-delay: .22s; } .has-dropdown.open > .dropdown li:nth-child(4){ transition-delay: .28s; } .has-dropdown.open > .dropdown li:nth-child(5){ transition-delay: .34s; } .has-dropdown.open > .dropdown li:nth-child(6){ transition-delay: .40s; } .has-dropdown > .dropdown li a{ display: flex; align-items: center; gap: 10px; white-space: normal; padding: 11px 14px; font-size: 14px; border-radius: 10px; background: transparent; color: var(--text); transition: all .2s ease; position: relative; } .has-dropdown > .dropdown li a::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; transition: all .2s ease; } .has-dropdown > .dropdown li a:hover, .has-dropdown > .dropdown li a:active{ background: #fff; color: var(--primary-dark); padding-right: 20px; box-shadow: 0 4px 10px rgba(21,101,192,.10); } .has-dropdown > .dropdown li a:hover::before, .has-dropdown > .dropdown li a:active::before{ transform: scale(1.6); background: var(--primary-dark); } .has-dropdown > a{ cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; } .has-dropdown > a i.fa-chevron-down{ transition: transform .35s cubic-bezier(.4,0,.2,1); margin-right: auto; } .has-dropdown.open > a i.fa-chevron-down{ transform: rotate(180deg); } } .hero{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;padding:80px 0;overflow:hidden;position:relative} .hero .container{display:flex;align-items:center;gap:40px;flex-wrap:wrap} .hero-text{flex:1;min-width:280px} .hero-text h1{font-size:36px;font-weight:800;margin-bottom:16px} .hero-text p{font-size:17px;opacity:.92;margin-bottom:26px} .hero-art{flex:1;min-width:260px;display:flex;justify-content:center} .hero-art i{font-size:180px;opacity:.18} .btn{display:inline-block;padding:13px 28px;border-radius:12px;font-weight:700;transition:all .25s ease;border:none;cursor:pointer;font-family:inherit;font-size:15px} .btn-primary{background:#fff;color:var(--primary)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.15)} .btn-outline{border:2px solid #fff;color:#fff;margin-inline-start:10px} .btn-outline:hover{background:#fff;color:var(--primary)} .btn-block{width:100%;background:var(--primary);color:#fff} .btn-block:hover{background:var(--primary-dark)} section{padding:70px 0} .section-title{text-align:center;margin-bottom:44px} .section-title h2{font-size:28px;font-weight:800;color:var(--primary-dark)} .section-title p{color:var(--muted);margin-top:8px} .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px} .service-card{background:#fff;border-radius:var(--radius);padding:30px 24px;box-shadow:var(--shadow);text-align:center;transition:.3s ease;border:1px solid #eaf2fb} .service-card:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(21,101,192,.18)} .service-card i{font-size:36px;color:var(--primary);margin-bottom:16px} .service-card h3{margin-bottom:10px;font-size:18px} .service-card p{color:var(--muted);font-size:14px;margin-bottom:14px} .service-price{font-weight:700;color:var(--primary-dark);margin-bottom:14px;display:block} .form-wrap{max-width:560px;margin:0 auto;background:#fff;padding:36px;border-radius:var(--radius);box-shadow:var(--shadow)} .form-wrap h1{color:var(--primary-dark);margin-bottom:6px;font-size:24px} .form-wrap .sub{color:var(--muted);margin-bottom:26px;font-size:14px} .form-group{margin-bottom:18px} .form-group label{display:block;margin-bottom:8px;font-weight:600;font-size:14px} .form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 14px;border:1.5px solid #dce7f3;border-radius:10px;font-family:inherit;font-size:14px;transition:.2s} .form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary)} .form-group small{color:var(--muted);display:block;margin-top:6px} .form-foot{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)} .alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:14px} .alert-success{background:#e6f6ec;color:#1d7a3c;border:1px solid #bfe8cc} .alert-error{background:#fdecec;color:#c0392b;border:1px solid #f6c6c2} .alert-info{background:#e3f2fd;color:#0d47a1;border:1px solid #bbdefb} .alert-warn{background:#fff8e1;color:#7a5d00;border:1px solid #ffe082} .card{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);margin-bottom:24px} table{width:100%;border-collapse:collapse} table th,table td{padding:12px;text-align:right;border-bottom:1px solid #eef3f9;font-size:14px;vertical-align:middle} table th{color:var(--muted);font-weight:700} .badge{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block;white-space:nowrap} .badge-pending{background:#fff3cd;color:#8a6d00} .badge-progress{background:#dbeafe;color:#1565c0} .badge-done{background:#dcf7e3;color:#1d7a3c} .badge-rejected{background:#fdecec;color:#c0392b} .badge-paid{background:#dcf7e3;color:#1d7a3c} .badge-unpaid{background:#fdecec;color:#c0392b} .dashboard-grid{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start} .sidebar{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;height:fit-content} .sidebar a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;font-weight:600;margin-bottom:4px} .sidebar a:hover,.sidebar a.active{background:var(--primary-light);color:var(--primary)} @media (max-width:800px){.dashboard-grid{grid-template-columns:1fr}} .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px} .blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s} .blog-card:hover{transform:translateY(-5px)} .blog-card .blog-body{padding:20px} .blog-card h3{margin-bottom:8px;font-size:17px} .blog-card p{color:var(--muted);font-size:14px} .blog-cover{height:170px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px} .file-drop{border:2px dashed #b9d4ee;border-radius:12px;padding:24px;text-align:center;color:var(--muted);cursor:pointer;background:#fbfdff} .file-drop:hover{border-color:var(--primary)} .site-footer{background:linear-gradient(180deg,var(--primary-dark) 0%,#0a3a86 100%);color:#dce9fb;padding:56px 0 0;position:relative;overflow:hidden} .site-footer::before{content:'';position:absolute;top:0;right:0;left:0;height:4px;background:linear-gradient(90deg,var(--accent),#8fd3ff,var(--accent))} .footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding-bottom:36px;position:relative;z-index:1} .footer-inner.has-social{grid-template-columns:1.4fr 1fr 1fr 1fr} .footer-brand h3{display:flex;align-items:center;gap:10px} .footer-col h3{color:#fff;margin-bottom:14px;font-size:19px} .footer-col h4{color:#fff;margin-bottom:16px;font-size:15px;position:relative;padding-bottom:10px} .footer-col h4::after{content:'';position:absolute;bottom:0;right:0;width:32px;height:3px;background:var(--accent);border-radius:2px} .footer-col p{color:#aec7e8;font-size:14px;line-height:1.9} .footer-col ul li{margin-bottom:10px} .footer-col ul li a{color:#c3d7ef;font-size:14px;display:flex;align-items:center;gap:6px;transition:.2s ease} .footer-col ul li a i{font-size:10px;color:var(--accent);transition:transform .2s ease} .footer-col ul li a:hover{color:#fff;transform:translateX(-4px)} .footer-col ul li a:hover i{transform:translateX(-3px)} .footer-contact{display:flex;flex-direction:column;gap:10px;margin-top:16px} .footer-contact a{color:#dce9fb;font-size:13.5px;display:flex;align-items:center;gap:8px;direction:ltr;justify-content:flex-end} .footer-contact a i{background:rgba(255,255,255,.12);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#8fd3ff;font-size:12px} .footer-contact a:hover{color:#fff} .footer-social{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px} .footer-social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:.25s ease;flex-shrink:0} .footer-social a i{font-size:18px;color:#dce9fb} .footer-social a img{width:22px;height:22px;object-fit:contain} .footer-social a:hover{background:var(--accent);transform:translateY(-3px)} .footer-social a:hover i{color:#04203f} .footer-trust-wrap{border-top:1px solid rgba(255,255,255,.12);padding:26px 0;position:relative;z-index:1} .footer-trust{display:flex;flex-direction:column;align-items:flex-start;gap:16px;direction:rtl} .footer-trust-label{font-size:15px;font-weight:700;color:#aec7e8;white-space:nowrap} .footer-trust-badges{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;width:100%;direction:rtl;max-width:100%} .footer-trust-badges img{height:120px;width:100%;max-width:190px;object-fit:contain;background:#fff;padding:8px;border-radius:10px;transition:all .3s ease;margin:0 auto} .footer-trust-badges a{display:flex;align-items:center;justify-content:center;transition:transform .3s ease} .footer-trust-badges a:hover{transform:translateY(-4px) scale(1.04)} .footer-trust-badges a:hover img{box-shadow:0 10px 25px rgba(0,0,0,.35)} @media (max-width:900px){.footer-trust-badges{grid-template-columns:repeat(3, 1fr)}} @media (max-width:600px){ .footer-trust{align-items:center;text-align:center} .footer-trust-badges{grid-template-columns:repeat(2, 1fr);gap:12px} .footer-trust-badges img{height:100px;max-width:150px;padding:6px} .footer-trust-label{font-size:14px} } .footer-bottom{text-align:center;padding:18px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#9db8d8;position:relative;z-index:1} @media (max-width:900px){.footer-inner,.footer-inner.has-social{grid-template-columns:1fr 1fr}} @media (max-width:560px){ .footer-inner,.footer-inner.has-social{grid-template-columns:1fr;text-align:center} .footer-social{justify-content:center} .footer-col h4::after{right:50%;transform:translateX(50%)} .footer-col ul li a{justify-content:center} .footer-contact a{justify-content:center;direction:rtl} } body.dark-mode{ --bg:#0f1720; --text:#e6edf3; --white:#1a2430; --primary-light:#16324a; --muted:#9fb0c0; background:#0f1720; color:#e6edf3; } body.dark-mode .dropdown{background:#1a2430;border-color:#2b3947} body.dark-mode .dropdown::before{background:#1a2430;border-color:#2b3947} body.dark-mode .dropdown li a{color:#e6edf3} body.dark-mode .dropdown li a::before{background:#22344a} body.dark-mode .dropdown li a:hover{background:#22344a;color:#8fd3ff} body.dark-mode .dropdown li a:hover::before{background:#8fd3ff} body.dark-mode .has-dropdown>a{color:#e6edf3} body.dark-mode section, body.dark-mode main{background:transparent !important} body.dark-mode .form-wrap, body.dark-mode .card, body.dark-mode .service-card, body.dark-mode .blog-card, body.dark-mode .blog-body, body.dark-mode .sidebar, body.dark-mode .file-drop{background:#1a2430 !important;color:#e6edf3;border-color:#2b3947} body.dark-mode .service-card:hover{box-shadow:0 16px 30px rgba(0,0,0,.4)} body.dark-mode .blog-cover{filter:brightness(.8)} body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode .section-title h2, body.dark-mode .form-wrap h1{color:#e6edf3} body.dark-mode p, body.dark-mode .sub, body.dark-mode .form-foot, body.dark-mode .section-title p, body.dark-mode .blog-card p, body.dark-mode .service-card p{color:#9fb0c0} body.dark-mode .service-price{color:#8fd3ff} body.dark-mode table th, body.dark-mode table td{border-color:#2b3947;color:#e6edf3} body.dark-mode table th{color:#9fb0c0} body.dark-mode .form-group input, body.dark-mode .form-group textarea, body.dark-mode .form-group select{background:#111a22;color:#e6edf3;border-color:#2b3947} body.dark-mode .form-group input:focus, body.dark-mode .form-group textarea:focus, body.dark-mode .form-group select:focus{border-color:var(--primary)} body.dark-mode .form-group label{color:#e6edf3} body.dark-mode .form-group small{color:#9fb0c0} body.dark-mode .btn-block{background:var(--primary);color:#fff} body.dark-mode .btn-block:hover{background:var(--primary-dark)} body.dark-mode body.dark-mode body.dark-mode body.dark-mode body.dark-mode .has-dropdown > .dropdown{background:#16324a} body.dark-mode .has-dropdown > .dropdown li a{color:#e6edf3} body.dark-mode .has-dropdown > .dropdown li a::before{background:#8fd3ff} body.dark-mode .has-dropdown > .dropdown li a:hover, body.dark-mode .has-dropdown > .dropdown li a:active{background:#1a2430;color:#8fd3ff;box-shadow:0 4px 10px rgba(0,0,0,.3)} body.dark-mode .site-footer{background:linear-gradient(180deg,#0a1a2b 0%,#06192f 100%)} body.dark-mode .site-footer::before{background:linear-gradient(90deg,var(--accent),#42a5f5,var(--accent))} body.dark-mode .footer-col h3, body.dark-mode .footer-col h4{color:#e6edf3} body.dark-mode .footer-col p{color:#9fb0c0} body.dark-mode .footer-col ul li a{color:#9fb0c0} body.dark-mode .footer-col ul li a:hover{color:#fff} body.dark-mode .footer-contact a{color:#9fb0c0} body.dark-mode .footer-bottom{color:#6b7d8f;border-color:rgba(255,255,255,.06)} body.dark-mode .footer-social a{background:rgba(255,255,255,.06)} body.dark-mode .footer-social a:hover{background:var(--accent)} body.dark-mode .footer-trust-wrap{border-color:rgba(255,255,255,.06)} body.dark-mode .footer-trust-label{color:#9fb0c0} body.dark-mode .alert-success{background:#16321e;color:#8fd3a1;border-color:#2c5f3c} body.dark-mode .alert-error{background:#3a1f22;color:#f5a7a7;border-color:#6b3038} body.dark-mode #langSwitchBtn{background:#1f6cd6;box-shadow:0 8px 20px rgba(31,108,214,.5)} body.dark-mode .hero{background:linear-gradient(135deg,#0d3a7a 0%,#082a5f 100%)} #langSwitchBtn{position:fixed;bottom:22px;right:22px;z-index:999;background:var(--primary);color:#fff;border:none;border-radius:50px;padding:12px 18px;box-shadow:0 8px 20px rgba(21,101,192,.4);display:flex;align-items:center;gap:8px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer} #langSwitchBtn:hover{background:var(--primary-dark);transform:translateY(-2px)} @media (max-width:600px){#langSwitchBtn{padding:10px 14px;font-size:13px;bottom:16px;right:16px}} #google_translate_element{display:none !important} .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame{display:none !important;visibility:hidden !important;height:0 !important} body > .skiptranslate{display:none !important} body{top:0 !important} .goog-logo-link, .goog-te-gadget-icon, .goog-te-gadget-simple img, .goog-te-menu-value span:first-child{display:none !important} .goog-tooltip, .goog-tooltip:hover{display:none !important} .goog-text-highlight{background:none !important;box-shadow:none !important} .skiptranslate{display:none !important} body,div,p,span,section,article,main,aside, h1,h2,h3,h4,h5,h6,blockquote,pre,label{overflow-wrap:anywhere;word-wrap:break-word;word-break:break-word} .dropdown,.dropdown li,.dropdown a{word-break:normal !important;overflow-wrap:normal !important;word-wrap:normal !important;white-space:nowrap} table,thead,tbody,tfoot,tr,th,td,table *,table th,table td{word-break:normal !important;overflow-wrap:normal !important;word-wrap:normal !important} .badge,.badge *{word-break:normal !important;overflow-wrap:normal !important;white-space:nowrap} .card,.blog-card,.blog-body,.form-wrap,.dashboard-main,.dashboard-grid>*{min-width:0;max-width:100%} .dashboard-wrap,.dashboard-grid{max-width:100%;overflow-x:hidden} .blog-body img,.post-content img,.entry-content img{max-width:100%;height:auto;display:block} .dashboard-wrap{max-width:1180px;margin:0 auto;padding:0 20px} .dashboard-main{min-width:0} @media (max-width:800px){.dashboard-wrap{padding:0 14px}} .service-page{padding:40px 0 60px} .service-hero{text-align:center;margin-bottom:40px;padding:30px 20px} .service-hero-icon{width:80px;height:80px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-light),#fff);border-radius:20px;box-shadow:0 8px 24px rgba(21,101,192,.15)} .service-hero-icon i{font-size:38px;color:var(--primary)} .service-hero-icon img{width:50px;height:50px;object-fit:contain} .service-hero-title{font-size:32px;font-weight:800;color:var(--primary-dark);margin-bottom:10px} .service-hero-subtitle{color:var(--muted);font-size:15px;max-width:600px;margin:0 auto} .service-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start} @media (max-width:900px){.service-layout{grid-template-columns:1fr}} .service-info-card{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);margin-bottom:20px;border:1px solid #eaf2fb} .service-card-title{font-size:18px;font-weight:800;color:var(--primary-dark);margin-bottom:18px;display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:2px solid var(--primary-light)} .service-card-title i{color:var(--primary);font-size:20px} .service-content{color:var(--text);font-size:15px;line-height:2;word-wrap:break-word;overflow-wrap:anywhere} .service-content p{margin-bottom:12px} .service-content ul,.service-content ol{margin:12px 0;padding-right:22px} .service-content li{margin-bottom:8px;list-style:disc} .service-cover{margin-bottom:20px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .service-cover img{width:100%;max-height:280px;object-fit:cover;display:block} .service-form-card{border:2px solid var(--primary-light)} .service-submit-btn{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;padding:15px;margin-top:8px} .service-side{position:sticky;top:92px;display:flex;flex-direction:column;gap:16px} @media (max-width:900px){.service-side{position:static}} .service-price-box{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border-radius:var(--radius);padding:26px 22px;text-align:center;box-shadow:0 12px 30px rgba(21,101,192,.35);position:relative;overflow:hidden} .service-price-box::before{content:'';position:absolute;top:-30px;left:-30px;width:100px;height:100px;background:rgba(255,255,255,.08);border-radius:50%} .service-price-box::after{content:'';position:absolute;bottom:-40px;right:-40px;width:130px;height:130px;background:rgba(255,255,255,.06);border-radius:50%} .price-label{font-size:13px;opacity:.9;margin-bottom:8px;position:relative;z-index:1} .price-value{font-size:34px;font-weight:800;letter-spacing:-1px;position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap} .price-currency{font-size:15px;font-weight:600;opacity:.9} .price-note{font-size:12px;opacity:.85;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px} .service-info-box{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid #eaf2fb} .service-info-box h3{font-size:15px;font-weight:800;color:var(--primary-dark);margin-bottom:14px;display:flex;align-items:center;gap:8px} .service-info-box h3 i{color:var(--primary)} .service-info-box p{font-size:14px;line-height:1.9} .service-steps{counter-reset:step;list-style:none;padding:0} .service-steps li{counter-increment:step;position:relative;padding-right:38px;padding-bottom:14px;font-size:14px;color:var(--text);line-height:1.7} .service-steps li::before{content:counter(step);position:absolute;right:0;top:2px;width:26px;height:26px;background:var(--primary-light);color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px} .service-steps li:last-child{padding-bottom:0} body.dark-mode .service-hero-icon{background:linear-gradient(135deg,#16324a,#1a2430)} body.dark-mode .service-hero-title{color:#8fd3ff} body.dark-mode .service-info-card, body.dark-mode .service-info-box{background:#1a2430;border-color:#2b3947} body.dark-mode .service-card-title{color:#8fd3ff;border-color:#2b3947} body.dark-mode .service-content{color:#e6edf3} body.dark-mode .service-info-box h3{color:#8fd3ff} body.dark-mode .service-info-box p{color:#9fb0c0} body.dark-mode .service-steps li{color:#e6edf3} body.dark-mode .service-steps li::before{background:#16324a;color:#8fd3ff} body.dark-mode .service-form-card{border-color:#16324a} @media (max-width:600px){ .service-hero-title{font-size:24px} .price-value{font-size:28px} .service-info-card, .service-info-box{padding:20px 18px} } .btn-dashboard{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;padding:13px 28px;border-radius:12px;font-weight:700;font-size:15px;margin-inline-start:10px;transition:all .25s ease;box-shadow:0 4px 14px rgba(16,185,129,.4);border:none;cursor:pointer;font-family:inherit} .btn-dashboard:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(16,185,129,.55);color:#fff} .btn-dashboard i{font-size:16px} .search-section{max-width:700px;margin:0 auto 40px;position:relative;z-index:10} .search-box{position:relative;display:flex;align-items:center;background:#fff;border:2px solid #dce7f3;border-radius:14px;padding:0 18px;transition:all .3s ease;box-shadow:0 4px 14px rgba(21,101,192,.08)} .search-box:focus-within{border-color:var(--primary);box-shadow:0 8px 24px rgba(21,101,192,.18)} .search-icon{color:var(--muted);font-size:18px;margin-left:12px;transition:color .3s ease} .search-box:focus-within .search-icon{color:var(--primary)} .search-input{flex:1;border:none;outline:none;padding:16px 0;font-family:inherit;font-size:15px;color:var(--text);background:transparent} .search-input::placeholder{color:var(--muted);font-size:14px} .search-clear{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:8px;font-size:16px;border-radius:50%;transition:all .2s ease} .search-clear:hover{background:#fdecec;color:#c0392b} .search-results{position:absolute;top:100%;right:0;left:0;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(21,101,192,.2);margin-top:8px;max-height:500px;overflow-y:auto;display:none;z-index:100;border:1px solid #eaf2fb} .search-results.active{display:block;animation:searchDrop .3s ease} @keyframes searchDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} .search-loading{padding:20px;text-align:center;color:var(--muted);font-size:14px} .search-loading i{color:var(--primary);margin-left:8px} .search-empty{padding:30px 20px;text-align:center;color:var(--muted)} .search-empty i{font-size:40px;color:#dce7f3;margin-bottom:12px;display:block} .search-group-title{padding:12px 18px;font-size:13px;font-weight:800;color:var(--primary-dark);background:#f6faff;border-bottom:1px solid #eaf2fb;display:flex;align-items:center;gap:8px} .search-group-title i{color:var(--primary)} .search-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid #f0f5fb;transition:background .2s ease;cursor:pointer;text-decoration:none;color:inherit} .search-item:last-child{border-bottom:none} .search-item:hover{background:var(--primary-light)} .search-item-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--primary-light),#fff);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;color:var(--primary);overflow:hidden} .search-item-icon img{width:100%;height:100%;object-fit:contain} .search-item-content{flex:1;min-width:0} .search-item-title{font-weight:700;font-size:15px;color:var(--text);margin-bottom:4px;display:block} .search-item-excerpt{font-size:13px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .search-item-price{font-size:13px;color:var(--primary-dark);font-weight:700;margin-top:4px} .search-item-arrow{color:var(--muted);font-size:14px;transition:transform .2s ease} .search-item:hover .search-item-arrow{color:var(--primary);transform:translateX(-4px)} body.dark-mode .search-box{background:#1a2430;border-color:#2b3947} body.dark-mode .search-input{color:#e6edf3} body.dark-mode .search-results{background:#1a2430;border-color:#2b3947} body.dark-mode .search-group-title{background:#16324a;color:#8fd3ff;border-color:#2b3947} body.dark-mode .search-item{border-color:#2b3947} body.dark-mode .search-item:hover{background:#22344a} body.dark-mode .search-item-title{color:#e6edf3} body.dark-mode .search-item-icon{background:linear-gradient(135deg,#16324a,#1a2430)} body.dark-mode .search-similarity-badge{background:#3a2e0a;color:#f5d16b} .search-similarity-badge{display:inline-block;background:#fff3cd;color:#8a6d00;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin-right:6px;vertical-align:middle} @media (max-width:700px){ .search-section{margin-bottom:30px} .search-input{font-size:14px;padding:14px 0} .search-results{max-height:400px} } :root { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #dbeafe; --accent: #3b82f6; --text: #0f172a; --muted: #64748b; --bg: #f8fafc; --white: #ffffff; --radius: 14px; --shadow: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04); } body.dark-mode { --bg: #0f172a; --text: #f1f5f9; --white: #1e293b; --primary-light: #1e293b; --muted: #94a3b8; } @media (min-width: 901px) { .dropdown { border-radius: 14px !important; border: 1px solid rgba(226, 232, 240, 0.8) !important; box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.15), 0 4px 12px rgba(37, 99, 235, 0.08) !important; padding: 8px !important; } .dropdown li a { border-radius: 10px; padding: 10px 14px; } .dropdown li a::before { background: var(--primary-light); } .dropdown li a:hover { background: var(--primary-light); color: var(--primary-dark); } body.dark-mode .dropdown { border-color: rgba(51, 65, 85, 0.8) !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(37, 99, 235, 0.15) !important; } } @media (max-width: 900px) { } .btn { position: relative; overflow: hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 700; letter-spacing: -0.2px; } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent 60%); opacity: 0; transition: opacity 0.25s; pointer-events: none; border-radius: inherit; } .btn:hover::before { opacity: 1; } .btn-primary { background: #ffffff; color: var(--primary); box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.05); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(255, 255, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.08); color: var(--primary-dark); } .btn-outline { border-width: 2px; border-color: #ffffff; background: transparent; color: #ffffff; transition: all 0.25s ease; } .btn-outline:hover { background: #ffffff; color: var(--primary); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(255, 255, 255, 0.35); } .btn-block { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #ffffff; padding: 14px 28px; box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4); } .btn-block:hover { transform: translateY(-2px); box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.55); color: #ffffff; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); } .btn-dashboard { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4); } .btn-dashboard:hover { transform: translateY(-3px); box-shadow: 0 15px 35px -5px rgba(16, 185, 129, 0.55); } .btn-dashboard i { transition: transform 0.3s ease; } .btn-dashboard:hover i { transform: scale(1.15) rotate(-5deg); } .hero .btn { font-size: 15px; padding: 14px 32px; } .services-grid { gap: 24px; } .service-card { position: relative; overflow: hidden; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); background: #ffffff; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.6); padding: 32px 24px; } .service-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .service-card:hover::before { transform: scaleX(1); } .service-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25); border-color: rgba(37, 99, 235, 0.15); } .service-card i { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .service-card:hover i { transform: scale(1.15) rotate(-5deg); } .service-card h3 { font-weight: 700; letter-spacing: -0.3px; transition: color 0.25s ease; } .service-card:hover h3 { color: var(--primary); } .service-card .btn, .service-card .btn-primary { background: var(--primary); color: #ffffff; padding: 10px 20px; font-size: 14px; border-radius: 10px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); } .service-card .btn:hover, .service-card .btn-primary:hover { background: var(--primary-dark); color: #ffffff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); transform: translateY(-2px); } .service-price { font-size: 17px; font-weight: 800; color: var(--primary-dark); letter-spacing: -0.3px; } .blog-grid { gap: 24px; } .blog-card { position: relative; overflow: hidden; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.6); } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.22); } .blog-card .blog-body h3 { transition: color 0.25s ease; } .blog-card:hover .blog-body h3 { color: var(--primary); } .blog-cover { position: relative; overflow: hidden; } .blog-cover img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .blog-card:hover .blog-cover img { transform: scale(1.08); } .card { transition: box-shadow 0.3s ease, transform 0.3s ease; border-radius: 16px; } .card:hover { box-shadow: 0 15px 35px -10px rgba(37, 99, 235, 0.18); } body.dark-mode .service-card, body.dark-mode .blog-card, body.dark-mode .card { border-color: rgba(51, 65, 85, 0.6); } body.dark-mode .service-card:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); border-color: rgba(96, 165, 250, 0.3); } body.dark-mode .blog-card:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } body.dark-mode .card:hover { box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.4); } body.dark-mode .service-card:hover h3 { color: #60a5fa; } body.dark-mode .service-price { color: #60a5fa; } body.dark-mode .service-card .btn, body.dark-mode .service-card .btn-primary { background: var(--primary); color: #ffffff; } body.dark-mode .service-card .btn:hover, body.dark-mode .service-card .btn-primary:hover { background: var(--primary-dark); } .form-wrap { border-radius: 20px; box-shadow: 0 20px 50px -15px rgba(37, 99, 235, 0.15), 0 4px 12px rgba(15, 23, 42, 0.05); border: 1px solid rgba(226, 232, 240, 0.8); padding: 40px; position: relative; overflow: hidden; } .form-wrap::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); } .form-wrap h1 { font-weight: 800; letter-spacing: -0.5px; color: var(--primary-dark); } .form-wrap .sub { font-size: 14.5px; margin-bottom: 30px; } .form-group { margin-bottom: 22px; } .form-group label { font-weight: 700; font-size: 14px; margin-bottom: 10px; display: block; color: var(--text); letter-spacing: -0.2px; } .form-group input, .form-group textarea, .form-group select { padding: 14px 16px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #ffffff; font-size: 15px; font-weight: 500; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); color: var(--text); width: 100%; font-family: inherit; } .form-group input:hover:not(:focus), .form-group textarea:hover:not(:focus), .form-group select:hover:not(:focus) { border-color: #cbd5e1; background: #f8fafc; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); background: #ffffff; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 4px 12px rgba(37, 99, 235, 0.08); } .form-group input::placeholder, .form-group textarea::placeholder { color: #94a3b8; font-weight: 400; } .form-group textarea { min-height: 120px; resize: vertical; line-height: 1.8; } .form-group small { color: var(--muted); display: block; margin-top: 8px; font-size: 12.5px; font-weight: 500; } .form-group input[type="checkbox"] { width: auto; height: 18px; width: 18px; cursor: pointer; accent-color: var(--primary); vertical-align: middle; } .form-wrap .btn-block { padding: 15px 28px; font-size: 15.5px; border-radius: 12px; margin-top: 8px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.45); letter-spacing: 0.3px; } .form-wrap .btn-block:hover { transform: translateY(-2px); box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.55); } .form-foot { font-size: 14px; font-weight: 500; } .form-foot a { color: var(--primary); font-weight: 700; transition: color 0.2s ease; } .form-foot a:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; } .alert { border-radius: 12px; padding: 16px 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; border: 1.5px solid; animation: alertIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes alertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .alert-success { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; border-color: #6ee7b7; } .alert-error { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #991b1b; border-color: #fca5a5; } .alert-info { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e40af; border-color: #93c5fd; } .alert-warn { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e; border-color: #fcd34d; } .file-drop { border-radius: 16px; border-width: 2px; padding: 32px 24px; transition: all 0.3s ease; background: #f8fafc; } .file-drop:hover { background: #eff6ff; border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 25px -10px rgba(37, 99, 235, 0.25); } body.dark-mode .form-wrap { background: #1e293b; border-color: rgba(51, 65, 85, 0.8); box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.4); } body.dark-mode .form-wrap h1 { color: #f1f5f9; } body.dark-mode .form-group label { color: #e2e8f0; } body.dark-mode .form-group input, body.dark-mode .form-group textarea, body.dark-mode .form-group select { background: #0f172a; border-color: #334155; color: #e2e8f0; } body.dark-mode .form-group input:hover:not(:focus), body.dark-mode .form-group textarea:hover:not(:focus), body.dark-mode .form-group select:hover:not(:focus) { background: #1e293b; border-color: #475569; } body.dark-mode .form-group input:focus, body.dark-mode .form-group textarea:focus, body.dark-mode .form-group select:focus { background: #0f172a; border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15), 0 4px 12px rgba(96, 165, 250, 0.1); } body.dark-mode .form-group input::placeholder, body.dark-mode .form-group textarea::placeholder { color: #64748b; } body.dark-mode .form-group small { color: #94a3b8; } body.dark-mode .alert-success { background: linear-gradient(135deg, #064e3b, #065f46); color: #6ee7b7; border-color: #047857; } body.dark-mode .alert-error { background: linear-gradient(135deg, #7f1d1d, #991b1b); color: #fca5a5; border-color: #b91c1c; } body.dark-mode .alert-info { background: linear-gradient(135deg, #1e3a8a, #1e40af); color: #93c5fd; border-color: #2563eb; } body.dark-mode .alert-warn { background: linear-gradient(135deg, #78350f, #92400e); color: #fbbf24; border-color: #d97706; } body.dark-mode .file-drop { background: #0f172a; border-color: #334155; } body.dark-mode .file-drop:hover { background: #1e293b; border-color: #60a5fa; } .blog-page-header { text-align: center; padding: 60px 20px 40px; max-width: 800px; margin: 0 auto; } .blog-page-header h1 { font-size: 42px; font-weight: 800; color: var(--primary-dark); margin-bottom: 16px; letter-spacing: -1px; line-height: 1.3; position: relative; display: inline-block; } .blog-page-header h1::after { content: ''; display: block; width: 80px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; margin: 20px auto 0; } .blog-page-header p { font-size: 17px; color: var(--muted); margin-top: 8px; line-height: 1.8; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; margin-bottom: 40px; } .blog-card { background: #ffffff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); border: 1px solid rgba(226, 232, 240, 0.6); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; position: relative; height: 100%; } .blog-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .blog-card:hover::before { transform: scaleX(1); } .blog-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25), 0 8px 20px rgba(15, 23, 42, 0.08); border-color: rgba(37, 99, 235, 0.2); } .blog-cover { position: relative; height: 210px; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 52px; } .blog-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); display: block; } .blog-card:hover .blog-cover img { transform: scale(1.1); } .blog-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.4) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .blog-card:hover .blog-cover::after { opacity: 1; } .blog-category { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); color: var(--primary-dark); font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: 20px; z-index: 2; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); letter-spacing: 0.5px; text-transform: uppercase; } .blog-read-time { position: absolute; bottom: 16px; left: 16px; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); color: #ffffff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; z-index: 2; display: flex; align-items: center; gap: 5px; opacity: 0; transform: translateY(8px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .blog-card:hover .blog-read-time { opacity: 1; transform: translateY(0); } .blog-read-time i { font-size: 10px; } .blog-card .blog-body { padding: 26px 24px 22px; display: flex; flex-direction: column; flex: 1; position: relative; } .blog-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; font-size: 12.5px; color: var(--muted); font-weight: 600; } .blog-meta-item { display: flex; align-items: center; gap: 6px; } .blog-meta-item i { color: var(--primary); font-size: 13px; } .blog-card h3 { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 12px; line-height: 1.5; letter-spacing: -0.3px; transition: color 0.25s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card:hover h3 { color: var(--primary); } .blog-card p { color: var(--muted); font-size: 14.5px; line-height: 1.9; margin-bottom: 18px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card .blog-read-more { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 800; font-size: 14px; padding-top: 16px; border-top: 1px solid rgba(226, 232, 240, 0.8); margin-top: auto; transition: all 0.25s ease; width: 100%; } .blog-card .blog-read-more i { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 12px; } .blog-card:hover .blog-read-more { color: var(--primary-dark); gap: 12px; } .blog-card:hover .blog-read-more i { transform: translateX(-5px); } .blog-card a.blog-card-link { position: absolute; inset: 0; z-index: 1; } .blog-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; margin-bottom: 40px; background: #ffffff; border-radius: 22px; overflow: hidden; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08); border: 1px solid rgba(226, 232, 240, 0.6); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); min-height: 380px; } .blog-featured:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -15px rgba(37, 99, 235, 0.3); } .blog-featured-cover { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 80px; min-height: 320px; } .blog-featured-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .blog-featured:hover .blog-featured-cover img { transform: scale(1.05); } .blog-featured-body { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; } .blog-featured-badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: 20px; margin-bottom: 20px; align-self: flex-start; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } .blog-featured-body h2 { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 16px; line-height: 1.4; letter-spacing: -0.5px; transition: color 0.25s ease; } .blog-featured:hover h2 { color: var(--primary); } .blog-featured-body p { color: var(--muted); font-size: 15px; line-height: 1.9; margin-bottom: 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-featured-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: #fff; padding: 13px 26px; border-radius: 12px; font-weight: 800; font-size: 14.5px; align-self: flex-start; transition: all 0.25s ease; box-shadow: 0 8px 20px -5px rgba(37, 99, 235, 0.4); } .blog-featured-cta:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 28px -5px rgba(37, 99, 235, 0.5); } .blog-featured-cta i { transition: transform 0.25s ease; } .blog-featured-cta:hover i { transform: translateX(-4px); } @media (max-width: 900px) { .blog-featured { grid-template-columns: 1fr; min-height: auto; } .blog-featured-cover { min-height: 220px; } .blog-featured-body { padding: 28px 24px; } .blog-featured-body h2 { font-size: 22px; } } .post-single { max-width: 780px; margin: 0 auto; padding: 40px 20px 80px; } .post-single-header { text-align: center; margin-bottom: 40px; } .post-single-header h1 { font-size: 38px; font-weight: 800; color: var(--text); line-height: 1.35; letter-spacing: -1px; margin-bottom: 20px; } .post-single-meta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 14px; font-weight: 600; } .post-single-meta-item { display: flex; align-items: center; gap: 7px; } .post-single-meta-item i { color: var(--primary); } .post-single-cover { margin-bottom: 40px; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.2); } .post-single-cover img { width: 100%; height: auto; display: block; } .post-single-content { font-size: 17px; line-height: 2.1; color: var(--text); } .post-single-content p { margin-bottom: 24px; color: var(--text); } .post-single-content h2 { font-size: 26px; font-weight: 800; color: var(--primary-dark); margin: 40px 0 20px; letter-spacing: -0.5px; position: relative; padding-right: 20px; } .post-single-content h2::before { content: ''; position: absolute; right: 0; top: 8px; bottom: 8px; width: 4px; background: linear-gradient(180deg, var(--primary), var(--accent)); border-radius: 2px; } .post-single-content h3 { font-size: 22px; font-weight: 800; color: var(--primary-dark); margin: 32px 0 16px; } .post-single-content a { color: var(--primary); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(37, 99, 235, 0.4); text-underline-offset: 4px; transition: all 0.2s ease; } .post-single-content a:hover { color: var(--primary-dark); text-decoration-color: var(--primary-dark); } .post-single-content img { max-width: 100%; height: auto; border-radius: 14px; margin: 24px 0; box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15); } .post-single-content ul, .post-single-content ol { margin: 20px 0; padding-right: 26px; } .post-single-content li { margin-bottom: 12px; line-height: 2; } .post-single-content blockquote { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-right: 4px solid var(--primary); padding: 20px 24px; margin: 28px 0; border-radius: 12px; font-style: italic; color: var(--primary-dark); font-weight: 500; font-size: 16.5px; } .post-single-content code { background: #f1f5f9; color: #dc2626; padding: 3px 8px; border-radius: 6px; font-size: 0.9em; font-family: monospace; direction: ltr; display: inline-block; } .post-single-content pre { background: #0f172a; color: #e2e8f0; padding: 20px; border-radius: 12px; overflow-x: auto; margin: 24px 0; direction: ltr; text-align: left; font-size: 14px; line-height: 1.7; } body.dark-mode .blog-page-header h1 { color: #f1f5f9; } body.dark-mode .blog-card, body.dark-mode .blog-featured { background: #1e293b; border-color: rgba(51, 65, 85, 0.6); } body.dark-mode .blog-card:hover, body.dark-mode .blog-featured:hover { border-color: rgba(96, 165, 250, 0.3); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } body.dark-mode .blog-card h3, body.dark-mode .blog-featured-body h2 { color: #f1f5f9; } body.dark-mode .blog-card p, body.dark-mode .blog-featured-body p, body.dark-mode .blog-meta { color: #94a3b8; } body.dark-mode .blog-category { background: rgba(15, 23, 42, 0.9); color: #93c5fd; } body.dark-mode .blog-card .blog-read-more { border-color: #334155; color: #60a5fa; } body.dark-mode .blog-card:hover .blog-read-more { color: #93c5fd; } body.dark-mode .post-single-header h1 { color: #f1f5f9; } body.dark-mode .post-single-meta { color: #94a3b8; } body.dark-mode .post-single-meta-item i { color: #60a5fa; } body.dark-mode .post-single-content { color: #cbd5e1; } body.dark-mode .post-single-content p { color: #cbd5e1; } body.dark-mode .post-single-content h2, body.dark-mode .post-single-content h3 { color: #93c5fd; } body.dark-mode .post-single-content blockquote { background: linear-gradient(135deg, #1e293b, #1e3a8a); color: #93c5fd; border-right-color: #60a5fa; } body.dark-mode .post-single-content code { background: #0f172a; color: #fca5a5; } @media (max-width: 700px) { .blog-page-header { padding: 40px 16px 30px; } .blog-page-header h1 { font-size: 28px; } .blog-page-header p { font-size: 15px; } .blog-grid { grid-template-columns: 1fr; gap: 20px; } .blog-cover { height: 180px; } .blog-card .blog-body { padding: 22px 20px 18px; } .blog-card h3 { font-size: 17px; } .blog-card p { font-size: 13.5px; } .post-single-header h1 { font-size: 26px; } .post-single-content { font-size: 15.5px; line-height: 2; } .post-single-content h2 { font-size: 21px; } .post-single-content h3 { font-size: 18px; } } @keyframes blogFadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .blog-card { animation: blogFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; } .blog-card:nth-child(1) { animation-delay: 0.05s; } .blog-card:nth-child(2) { animation-delay: 0.1s; } .blog-card:nth-child(3) { animation-delay: 0.15s; } .blog-card:nth-child(4) { animation-delay: 0.2s; } .blog-card:nth-child(5) { animation-delay: 0.25s; } .blog-card:nth-child(6) { animation-delay: 0.3s; } .blog-card:nth-child(7) { animation-delay: 0.35s; } .blog-card:nth-child(8) { animation-delay: 0.4s; } .blog-featured { animation: blogFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; } body, div, p, span, section, article, main, aside, h1, h2, h3, h4, h5, h6, blockquote, pre, label, li, td, th, .form-group label, .form-group small, .alert, .service-card p, .blog-card p, .service-content, .service-info-box p, .post-single-content, .post-single-content p { overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: normal !important; white-space: normal; hyphens: none; } code, pre, .url, .english, .ltr { word-break: break-all !important; direction: ltr; } .service-page { padding: 40px 0 80px; } .service-hero { text-align: center; margin-bottom: 50px; padding: 40px 20px 30px; position: relative; } .service-hero-icon { width: 100px; height: 100px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-light), #ffffff); border-radius: 24px; box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.3); position: relative; animation: iconFloat 4s ease-in-out infinite; } @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .service-hero-icon::before { content: ''; position: absolute; inset: -8px; border-radius: 28px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent); z-index: -1; } .service-hero-icon i { font-size: 44px; color: var(--primary); } .service-hero-icon img { width: 56px; height: 56px; object-fit: contain; } .service-hero-title { font-size: 36px; font-weight: 800; color: var(--text); margin-bottom: 14px; letter-spacing: -1px; line-height: 1.35; word-break: normal; } .service-hero-title::after { content: ''; display: block; width: 70px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; margin: 18px auto 0; } .service-hero-subtitle { color: var(--muted); font-size: 16px; max-width: 640px; margin: 20px auto 0; line-height: 2; word-break: normal; } .service-layout { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; } .service-info-card { background: #ffffff; border-radius: 18px; padding: 32px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); margin-bottom: 24px; border: 1px solid rgba(226, 232, 240, 0.6); transition: box-shadow 0.3s ease; } .service-info-card:hover { box-shadow: 0 12px 35px rgba(15, 23, 42, 0.1); } .service-card-title { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 2px solid var(--primary-light); word-break: normal; } .service-card-title i { color: var(--primary); font-size: 20px; } .service-content { color: var(--text); font-size: 15.5px; line-height: 2; word-break: normal; overflow-wrap: break-word; } .service-content p { margin-bottom: 16px; word-break: normal; } .service-content ul, .service-content ol { margin: 16px 0; padding-right: 26px; } .service-content li { margin-bottom: 10px; list-style: disc; line-height: 2; } .service-cover { margin-bottom: 24px; border-radius: 18px; overflow: hidden; box-shadow: 0 15px 40px -15px rgba(15, 23, 42, 0.2); } .service-cover img { width: 100%; max-height: 340px; object-fit: cover; display: block; } .service-form-card .alert, .service-info-card .alert { display: block; padding: 18px 22px; border-radius: 14px; margin-bottom: 24px; font-size: 14.5px; line-height: 2; font-weight: 600; word-break: normal; overflow-wrap: break-word; position: relative; padding-right: 52px; } .service-form-card .alert::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; } .service-form-card .alert-error { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #991b1b; border: 1.5px solid #fca5a5; } .service-form-card .alert-error::before { color: #dc2626; } .service-form-card .alert-success { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; border: 1.5px solid #6ee7b7; } .service-form-card .alert-success::before { content: '\f00c'; color: #059669; } .service-form-card .alert-info { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e40af; border: 1.5px solid #93c5fd; } .service-form-card .alert-info::before { content: '\f05a'; color: #2563eb; } .service-submit-btn { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; padding: 16px 24px; margin-top: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #ffffff; border: none; border-radius: 14px; font-weight: 800; cursor: pointer; font-family: inherit; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.45); width: 100%; } .service-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.55); } .service-submit-btn i { transition: transform 0.3s ease; } .service-submit-btn:hover i { transform: translateX(-4px); } .service-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; } .service-price-box { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #ffffff; border-radius: 20px; padding: 32px 26px; text-align: center; box-shadow: 0 20px 50px -15px rgba(37, 99, 235, 0.5); position: relative; overflow: hidden; } .service-price-box::before { content: ''; position: absolute; top: -50px; left: -50px; width: 140px; height: 140px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; } .service-price-box::after { content: ''; position: absolute; bottom: -60px; right: -60px; width: 180px; height: 180px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; } .price-label { font-size: 13px; opacity: 0.9; margin-bottom: 12px; position: relative; z-index: 1; font-weight: 600; letter-spacing: 0.5px; } .price-value { font-size: 40px; font-weight: 900; letter-spacing: -1.5px; position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .price-currency { font-size: 16px; font-weight: 600; opacity: 0.9; } .price-note { font-size: 12.5px; opacity: 0.85; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; } .service-info-box { background: #ffffff; border-radius: 18px; padding: 26px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); border: 1px solid rgba(226, 232, 240, 0.6); } .service-info-box h3 { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid var(--primary-light); } .service-info-box h3 i { color: var(--primary); font-size: 18px; } .service-info-box p { font-size: 14.5px; line-height: 2; color: var(--muted); word-break: normal; } .service-steps { counter-reset: step; list-style: none; padding: 0; } .service-steps li { counter-increment: step; position: relative; padding-right: 48px; padding-bottom: 18px; font-size: 14.5px; color: var(--text); line-height: 1.9; word-break: normal; transition: color 0.25s ease; } .service-steps li:hover { color: var(--primary-dark); } .service-steps li::before { content: counter(step); position: absolute; right: 0; top: 0; width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary-light), #ffffff); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); transition: all 0.25s ease; } .service-steps li:hover::before { background: var(--primary); color: #ffffff; transform: scale(1.1); } .service-steps li:last-child { padding-bottom: 0; } .service-form-card { border: 2px solid var(--primary-light); position: relative; } .service-form-card .form-group { margin-bottom: 22px; } .service-form-card .form-group label { font-size: 14.5px; font-weight: 700; margin-bottom: 10px; color: var(--text); word-break: normal; } .service-form-card .form-group input, .service-form-card .form-group textarea, .service-form-card .form-group select { width: 100%; padding: 14px 16px; border: 1.5px solid #e2e8f0; border-radius: 12px; font-family: inherit; font-size: 14.5px; line-height: 1.8; transition: all 0.25s ease; background: #ffffff; color: var(--text); word-break: normal; } .service-form-card .form-group textarea { min-height: 140px; resize: vertical; } .service-form-card .form-group input:focus, .service-form-card .form-group textarea:focus, .service-form-card .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } .file-drop { border: 2px dashed #cbd5e1; border-radius: 16px; padding: 36px 24px; text-align: center; color: var(--muted); cursor: pointer; background: #f8fafc; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); word-break: normal; } .file-drop:hover { border-color: var(--primary); background: #eff6ff; color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 25px -10px rgba(37, 99, 235, 0.3); } .file-drop i { font-size: 32px; color: var(--primary); display: block; margin-bottom: 12px; transition: transform 0.3s ease; } .file-drop:hover i { transform: translateY(-4px) scale(1.1); } body.dark-mode .service-info-card, body.dark-mode .service-info-box { background: #1e293b; border-color: rgba(51, 65, 85, 0.6); } body.dark-mode .service-hero-title, body.dark-mode .service-card-title, body.dark-mode .service-info-box h3 { color: #f1f5f9; } body.dark-mode .service-hero-icon { background: linear-gradient(135deg, #334155, #1e293b); } body.dark-mode .service-hero-icon i { color: #60a5fa; } body.dark-mode .service-content, body.dark-mode .service-steps li { color: #cbd5e1; } body.dark-mode .service-info-box p { color: #94a3b8; } body.dark-mode .service-form-card .form-group input, body.dark-mode .service-form-card .form-group textarea, body.dark-mode .service-form-card .form-group select { background: #0f172a; border-color: #334155; color: #e2e8f0; } body.dark-mode .service-form-card .form-group input:focus, body.dark-mode .service-form-card .form-group textarea:focus, body.dark-mode .service-form-card .form-group select:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15); } body.dark-mode .file-drop { background: #0f172a; border-color: #334155; } body.dark-mode .file-drop:hover { background: #1e293b; border-color: #60a5fa; } body.dark-mode .service-steps li::before { background: linear-gradient(135deg, #334155, #1e293b); color: #60a5fa; } body.dark-mode .service-form-card .alert-error { background: linear-gradient(135deg, #7f1d1d, #991b1b); color: #fca5a5; border-color: #b91c1c; } @media (max-width: 900px) { .service-layout { grid-template-columns: 1fr; gap: 24px; } .service-side { position: static; } .service-hero { padding: 30px 16px 20px; } .service-hero-title { font-size: 26px; } .service-hero-icon { width: 80px; height: 80px; } .service-hero-icon i { font-size: 36px; } .service-info-card, .service-info-box { padding: 22px 20px; border-radius: 16px; } .price-value { font-size: 32px; } .service-card-title { font-size: 17px; } .service-content { font-size: 14.5px; } } @media (max-width: 500px) { .service-hero-title { font-size: 22px; } .price-value { font-size: 28px; } .service-hero-subtitle { font-size: 14.5px; } } .price-value, .service-price, .service-price-box, .price-value *, .service-price * { font-feature-settings: "tnum" 1, "lnum" 1 !important; font-variant-numeric: lining-nums tabular-nums !important; font-family: 'Peyda', Tahoma, Arial, sans-serif !important; letter-spacing: 0 !important; word-spacing: 0 !important; direction: rtl; unicode-bidi: embed; } .price-value, .service-price { font-family: 'Vazirmatn', 'Peyda', Tahoma, Arial, sans-serif; font-feature-settings: "ss01" on, "ss02" on !important; } .price-value { font-size: 34px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; letter-spacing: -1px; line-height: 1.2; } .price-value .num, .price-value strong, .price-value b { font-family: 'Vazirmatn', 'Peyda', 'Segoe UI', Tahoma, Arial, sans-serif; font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; } .price-currency, .price-value .price-currency { font-size: 15px; font-weight: 600; opacity: 0.9; font-family: 'Peyda', Tahoma, Arial, sans-serif; } .service-price { font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; direction: rtl; } @font-face { font-family: 'Vazirmatn'; src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } .num, .number, [data-number], .price-value, .service-price, .counter, [data-countup] { font-family: 'Vazirmatn', 'Peyda', Tahoma, Arial, sans-serif !important; font-variant-numeric: lining-nums tabular-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; unicode-bidi: plaintext; direction: ltr; display: inline-block; } .price-value, .service-price { direction: rtl; unicode-bidi: isolate; } .price-value > *, .service-price > * { direction: ltr; unicode-bidi: embed; display: inline-block; } .service-price-box .price-value { font-size: 38px; font-weight: 900; letter-spacing: -1.5px; margin: 8px 0; } .service-price-box .price-label { font-size: 13px; opacity: 0.9; margin-bottom: 12px; font-weight: 600; letter-spacing: 0.5px; } .service-price-box .price-currency { font-size: 16px; font-weight: 600; opacity: 0.9; margin-right: 4px; } .service-card .service-price { font-size: 17px; font-weight: 800; color: var(--primary-dark); margin-bottom: 16px; direction: rtl; } body.dark-mode .service-card .service-price { color: #60a5fa; } @media (max-width: 500px) { .price-value, .service-price-box .price-value { font-size: 30px !important; } .service-price-box .price-currency { font-size: 14px; } .service-card .service-price { font-size: 16px; } } .blog-featured-cover { position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, var(--primary), var(--accent)) !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 380px !important; height: 100% !important; } .blog-featured-cover img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } .blog-featured-cover i { font-size: 100px !important; color: rgba(255, 255, 255, 0.4) !important; position: relative !important; z-index: 1 !important; } .blog-featured-body { padding: 40px 36px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; overflow: visible !important; } .blog-featured-body p { display: block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; overflow: visible !important; text-overflow: unset !important; color: var(--muted) !important; font-size: 15px !important; line-height: 2 !important; margin-bottom: 24px !important; word-break: normal !important; overflow-wrap: break-word !important; } .blog-featured-body h2 { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; word-break: normal !important; overflow-wrap: break-word !important; } .blog-card p { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.9 !important; } .blog-card h3 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.5 !important; } .blog-meta-item i, .blog-read-time i, .blog-featured-cta i, .blog-read-more i { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 14px !important; min-height: 14px !important; } @media (max-width: 900px) { .blog-featured { grid-template-columns: 1fr !important; } .blog-featured-cover { min-height: 240px !important; max-height: 280px !important; } .blog-featured-cover i { font-size: 70px !important; } .blog-featured-body { padding: 28px 22px !important; } .blog-featured-body h2 { font-size: 22px !important; line-height: 1.5 !important; } .blog-featured-body p { font-size: 14.5px !important; line-height: 1.9 !important; } } .blog-featured-cover:not(:has(img))::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 50%), radial-gradient(circle at 70% 70%, rgba(255,255,255,.1), transparent 50%); } .blog-featured { display: none !important; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 20px; } @media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; gap: 20px; } } @media (min-width: 701px) and (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1001px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } .blog-card { background: var(--card-bg, #fff); border-radius: 16px; overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.7); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; cursor: pointer; position: relative; height: 100%; } @media (min-width: 901px) { .blog-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px -8px rgba(37, 99, 235, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06); border-color: rgba(37, 99, 235, 0.25); } } .blog-cover { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--primary, #2563eb), var(--accent, #3b82f6)); display: flex; align-items: center; justify-content: center; } .blog-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 901px) { .blog-card:hover .blog-cover img { transform: scale(1.05); } } .blog-cover > i { font-size: 56px; color: rgba(255, 255, 255, 0.55); position: relative; z-index: 1; } .blog-read-time { position: absolute; bottom: 12px; left: 12px; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 20px; z-index: 3; display: flex; align-items: center; gap: 5px; pointer-events: none; } .blog-read-time i { font-size: 10px; } .blog-card .blog-body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; gap: 12px; } .blog-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted, #64748b); font-weight: 600; flex-wrap: wrap; } .blog-meta-item { display: inline-flex; align-items: center; gap: 6px; } .blog-meta-item i { color: var(--primary, #2563eb); font-size: 12px; } .blog-card h3 { font-size: 17px; font-weight: 800; color: var(--text, #0f172a); line-height: 1.55; letter-spacing: -0.3px; margin: 0; transition: color 0.25s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; } @media (min-width: 901px) { .blog-card:hover h3 { color: var(--primary, #2563eb); } } .blog-card p { color: var(--muted, #64748b); font-size: 14px; line-height: 1.9; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; } .blog-card .blog-read-more { display: inline-flex; align-items: center; gap: 8px; color: var(--primary, #2563eb); font-weight: 800; font-size: 13.5px; padding-top: 14px; border-top: 1px solid rgba(226, 232, 240, 0.7); margin-top: auto; text-decoration: none; transition: gap 0.25s ease, color 0.25s ease; align-self: flex-start; } .blog-card .blog-read-more i { font-size: 11px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 901px) { .blog-card:hover .blog-read-more { color: var(--primary-dark, #1d4ed8); gap: 12px; } .blog-card:hover .blog-read-more i { transform: translateX(-4px); } } .blog-ripple { position: absolute; border-radius: 50%; background: radial-gradient( circle, rgba(37, 99, 235, 0.25) 0%, rgba(37, 99, 235, 0.1) 40%, transparent 70% ); transform: scale(0); animation: blogRipple 0.7s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 10; } @keyframes blogRipple { to { transform: scale(3.5); opacity: 0; } } .blog-card.clicking { animation: blogCardClick 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } @keyframes blogCardClick { 0% { transform: scale(1); } 40% { transform: scale(0.97); box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.15); } 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 0 0 0 rgba(37, 99, 235, 0); } } @media (prefers-reduced-motion: reduce) { .blog-card, .blog-card:hover, .blog-cover img, .blog-read-more i { transition: none !important; animation: none !important; transform: none !important; } } .post-single { max-width: 800px; margin: 0 auto; padding: 40px 20px 60px; } .post-single-header { text-align: center; margin-bottom: 36px; } .post-single-header h1 { font-size: 34px; font-weight: 800; color: var(--text, #0f172a); line-height: 1.4; letter-spacing: -0.8px; margin-bottom: 20px; } .post-single-meta { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; color: var(--muted, #64748b); font-size: 13.5px; font-weight: 600; } .post-single-meta-item { display: inline-flex; align-items: center; gap: 6px; } .post-single-meta-item i { color: var(--primary, #2563eb); } .post-single-cover { margin-bottom: 36px; border-radius: 18px; overflow: hidden; box-shadow: 0 15px 40px -15px rgba(15, 23, 42, 0.15); } .post-single-cover img { width: 100%; height: auto; display: block; } .post-single-content { font-size: 16.5px; line-height: 2; color: var(--text, #0f172a); } .post-single-content p { margin-bottom: 20px; word-break: normal; overflow-wrap: break-word; } .post-single-content h2 { font-size: 24px; font-weight: 800; color: var(--primary-dark, #1d4ed8); margin: 36px 0 18px; letter-spacing: -0.5px; padding-right: 16px; border-right: 4px solid var(--primary, #2563eb); word-break: normal; } .post-single-content h3 { font-size: 20px; font-weight: 800; color: var(--primary-dark, #1d4ed8); margin: 28px 0 14px; word-break: normal; } .post-single-content a { color: var(--primary, #2563eb); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(37, 99, 235, 0.4); text-underline-offset: 4px; } .post-single-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 20px 0; } .post-single-content ul, .post-single-content ol { margin: 18px 0; padding-right: 24px; } .post-single-content li { margin-bottom: 10px; line-height: 2; } .post-single-content blockquote { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-right: 4px solid var(--primary, #2563eb); padding: 18px 22px; margin: 24px 0; border-radius: 10px; font-style: italic; color: var(--primary-dark, #1d4ed8); font-weight: 500; } @media (max-width: 700px) { .post-single { padding: 24px 16px 50px; } .post-single-header h1 { font-size: 24px; line-height: 1.5; } .post-single-meta { gap: 12px; font-size: 12.5px; } .post-single-content { font-size: 15px; line-height: 2; } .post-single-content h2 { font-size: 20px; } .post-single-content h3 { font-size: 17px; } } .blog-empty { text-align: center; padding: 70px 20px; background: var(--card-bg, #fff); border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.6); } .blog-empty i { font-size: 60px; color: #cbd5e1; margin-bottom: 18px; display: block; } .blog-empty h3 { color: var(--text, #0f172a); margin-bottom: 8px; font-size: 20px; } .blog-empty p { color: var(--muted, #64748b); font-size: 14.5px; } body.dark-mode .blog-card { background: #1e293b; border-color: rgba(51, 65, 85, 0.7); } @media (min-width: 901px) { body.dark-mode .blog-card:hover { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.3); } } body.dark-mode .blog-card h3 { color: #f1f5f9; } body.dark-mode .blog-card:hover h3 { color: #60a5fa; } body.dark-mode .blog-card p, body.dark-mode .blog-meta { color: #94a3b8; } body.dark-mode .blog-meta-item i { color: #60a5fa; } body.dark-mode .blog-card .blog-read-more { color: #60a5fa; border-top-color: #334155; } body.dark-mode .blog-ripple { background: radial-gradient( circle, rgba(96, 165, 250, 0.3) 0%, rgba(96, 165, 250, 0.1) 40%, transparent 70% ); } body.dark-mode .post-single-header h1, body.dark-mode .post-single-content { color: #f1f5f9; } body.dark-mode .post-single-content h2, body.dark-mode .post-single-content h3 { color: #93c5fd; } body.dark-mode .post-single-content blockquote { background: linear-gradient(135deg, #1e293b, #1e3a8a); color: #93c5fd; } body.dark-mode .blog-empty { background: #1e293b; border-color: #334155; } body.dark-mode .blog-empty h3 { color: #f1f5f9; } .blog-read-time { display: none !important; } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; align-items: stretch; } @media (max-width: 700px) { .services-grid { grid-template-columns: 1fr; gap: 18px; } } .service-card { display: flex; flex-direction: column; background: var(--card-bg, #ffffff); border-radius: 18px; overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.7); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; padding: 0 !important; text-align: right !important; position: relative; height: 100%; } @media (min-width: 901px) { .service-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px -10px rgba(37, 99, 235, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06); border-color: rgba(37, 99, 235, 0.25); } } .service-card > img { width: 100% !important; height: 180px !important; object-fit: cover !important; border-radius: 0 !important; margin: 0 !important; display: block; transition: transform 0.5s ease; } @media (min-width: 901px) { .service-card:hover > img { transform: scale(1.04); } } .service-card > i.fa-solid, .service-card > i[class*="fa-"] { font-size: 42px !important; color: var(--primary, #2563eb) !important; margin: 30px auto 20px !important; display: block !important; transition: transform 0.3s ease; } @media (min-width: 901px) { .service-card:hover > i.fa-solid { transform: scale(1.15); } } .service-card > img[style*="width:64px"], .service-card > img[style*="width: 64px"] { width: 64px !important; height: 64px !important; object-fit: contain !important; margin: 30px auto 15px !important; border-radius: 0 !important; } .service-card h3 { font-size: 18px !important; font-weight: 800 !important; color: var(--text, #0f172a) !important; margin: 18px 22px 10px !important; line-height: 1.5 !important; letter-spacing: -0.3px; word-break: normal; overflow-wrap: break-word; min-height: 54px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.25s ease; } @media (min-width: 901px) { .service-card:hover h3 { color: var(--primary, #2563eb) !important; } } .service-card p { color: var(--muted, #64748b) !important; font-size: 14px !important; line-height: 1.9 !important; margin: 0 22px 16px !important; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; } .service-card .service-price { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: var(--primary-dark, #1d4ed8) !important; margin: 0 22px 14px !important; padding: 0 !important; text-align: right; letter-spacing: -0.3px; font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important; direction: rtl; unicode-bidi: embed; } .service-card .btn, .service-card .btn-primary { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 22px 22px !important; padding: 13px 20px !important; width: calc(100% - 44px) !important; background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; color: #ffffff !important; font-size: 14px !important; font-weight: 800 !important; border: none !important; border-radius: 12px !important; text-decoration: none !important; transition: all 0.25s ease !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important; margin-top: auto !important; cursor: pointer; } .service-card .btn:hover, .service-card .btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 22px rgba(37, 99, 235, 0.4) !important; color: #ffffff !important; } body.dark-mode .service-card { background: #1e293b; border-color: rgba(51, 65, 85, 0.7); } body.dark-mode .service-card h3 { color: #f1f5f9 !important; } body.dark-mode .service-card:hover h3 { color: #60a5fa !important; } body.dark-mode .service-card p { color: #94a3b8 !important; } body.dark-mode .service-card .service-price { color: #60a5fa !important; } body.dark-mode .service-card .btn, body.dark-mode .service-card .btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; } @media (max-width: 700px) { .service-card > img { height: 160px !important; } .service-card h3 { font-size: 16.5px !important; margin: 16px 18px 8px !important; min-height: auto; } .service-card p { font-size: 13.5px !important; margin: 0 18px 14px !important; } .service-card .service-price { font-size: 15px !important; margin: 0 18px 12px !important; } .service-card .btn, .service-card .btn-primary { margin: 0 18px 18px !important; padding: 12px 18px !important; width: calc(100% - 36px) !important; font-size: 13.5px !important; } } .stats-section { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); padding: 50px 0; position: relative; } .stats-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.04), transparent 50%), radial-gradient(circle at 80% 50%, rgba(14, 165, 233, 0.04), transparent 50%); pointer-events: none; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; max-width: 720px; margin: 0 auto; position: relative; z-index: 1; } .stat-card { background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.7); border-radius: 20px; padding: 36px 24px; text-align: center !important; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, #2563eb, #0ea5e9); transform: scaleX(0); transform-origin: center; transition: transform 0.4s ease; } .stat-card:hover::before { transform: scaleX(1); } .stat-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.18); } .stat-icon { width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(135deg, #dbeafe, #eff6ff); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: transform 0.3s ease; color: #2563eb; font-size: 28px; } .stat-card:hover .stat-icon { transform: scale(1.1) rotate(-5deg); } .stat-card h3 { margin: 0; font-size: 36px; font-weight: 900; color: #1d4ed8; letter-spacing: -1.5px; line-height: 1.1; direction: ltr; unicode-bidi: embed; font-family: 'Vazirmatn', 'Peyda', Tahoma, Arial, sans-serif; } .stat-card p { margin: 10px 0 0; font-size: 14px; color: #64748b; font-weight: 600; text-align: center; } @media (max-width: 600px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .stat-card { padding: 24px 14px; border-radius: 16px; } .stat-icon { width: 52px; height: 52px; font-size: 22px; margin-bottom: 12px; } .stat-card h3 { font-size: 26px; } .stat-card p { font-size: 12px; } } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; align-items: stretch; } @media (max-width: 700px) { .services-grid { grid-template-columns: 1fr; gap: 18px; } } a.service-card { display: flex; flex-direction: column; background: #ffffff; border-radius: 20px; overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.7); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease; text-decoration: none !important; color: inherit !important; cursor: pointer; height: 100%; position: relative; } @media (min-width: 901px) { a.service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -12px rgba(37, 99, 235, 0.25), 0 8px 20px rgba(15, 23, 42, 0.08); border-color: rgba(37, 99, 235, 0.3); } } .service-card-media { position: relative; width: 100%; height: 180px; background: #ffffff; overflow: hidden; flex-shrink: 0; } .service-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 901px) { a.service-card:hover .service-card-media img { transform: scale(1.08); } } .service-card-media img.service-icon-img { width: 90px; height: 90px; object-fit: contain; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (min-width: 901px) { a.service-card:hover .service-card-media img.service-icon-img { transform: translate(-50%, -50%) scale(1.1); } } .service-card-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #2563eb; font-size: 56px; } .service-card-body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; gap: 10px; } .service-card-body h3 { font-size: 17px; font-weight: 800; color: #0f172a; line-height: 1.55; letter-spacing: -0.3px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; transition: color 0.25s ease; } @media (min-width: 901px) { a.service-card:hover .service-card-body h3 { color: #2563eb; } } .service-card-body p { font-size: 13.5px; color: #64748b; line-height: 1.9; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; flex: 1; } .service-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(226, 232, 240, 0.7); flex-wrap: nowrap; } .service-price { font-size: 15px !important; font-weight: 900 !important; color: #1d4ed8 !important; letter-spacing: -0.3px; font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important; direction: rtl; unicode-bidi: embed; white-space: nowrap; display: inline-block; } .service-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #2563eb; white-space: nowrap; transition: all 0.3s ease; } .service-cta i { font-size: 11px; transition: transform 0.3s ease; } @media (min-width: 901px) { a.service-card:hover .service-cta { color: #1d4ed8; gap: 10px; } a.service-card:hover .service-cta i { transform: translateX(-4px); } } @media (max-width: 700px) { .service-card-media { height: 160px; } .service-card-body { padding: 18px 18px 16px; } .service-card-body h3 { font-size: 16px; } .service-card-body p { font-size: 13px; -webkit-line-clamp: 2; } .service-price { font-size: 14px !important; } .service-cta { font-size: 12.5px; } } body.dark-mode .stats-section { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); } body.dark-mode .stat-card { background: #1e293b; border-color: rgba(51, 65, 85, 0.7); } body.dark-mode .stat-icon { background: linear-gradient(135deg, #1e3a8a, #1e40af); color: #93c5fd; } body.dark-mode .stat-card h3 { color: #93c5fd; } body.dark-mode .stat-card p { color: #94a3b8; } body.dark-mode a.service-card { background: #1e293b; border-color: rgba(51, 65, 85, 0.7); } body.dark-mode a.service-card:hover { border-color: rgba(96, 165, 250, 0.4); } body.dark-mode .service-card-media { background: linear-gradient(135deg, #1e293b, #334155); } body.dark-mode .service-card-body h3 { color: #f1f5f9; } body.dark-mode a.service-card:hover .service-card-body h3 { color: #60a5fa; } body.dark-mode .service-card-body p { color: #94a3b8; } body.dark-mode .service-card-footer { border-top-color: #334155; } body.dark-mode .service-price { color: #60a5fa !important; } body.dark-mode .service-cta { color: #60a5fa; } body.dark-mode a.service-card:hover .service-cta { color: #93c5fd; } .service-card-footer { display: block !important; padding-top: 16px !important; margin-top: auto !important; border-top: 1px solid rgba(226, 232, 240, 0.7) !important; flex-wrap: unset !important; gap: 0 !important; } .service-price { display: block !important; width: 100% !important; text-align: center !important; font-size: 18px !important; font-weight: 900 !important; color: #1d4ed8 !important; letter-spacing: -0.5px !important; font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important; direction: rtl !important; unicode-bidi: embed !important; margin: 0 0 14px 0 !important; padding: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; position: relative !important; } .service-price::after { content: ''; display: block; width: 40px; height: 3px; background: linear-gradient(90deg, #2563eb, #0ea5e9); border-radius: 2px; margin: 10px auto 0; opacity: 0.6; transition: width 0.3s ease, opacity 0.3s ease; } @media (min-width: 901px) { a.service-card:hover .service-price::after { width: 60px; opacity: 1; } } .service-cta { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 14px 20px !important; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; color: #ffffff !important; font-size: 14.5px !important; font-weight: 800 !important; border-radius: 12px !important; text-align: center !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25), 0 1px 2px rgba(15, 23, 42, 0.06) !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important; letter-spacing: 0.2px !important; cursor: pointer !important; } .service-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .service-cta:hover::before { opacity: 1; } .service-cta::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; pointer-events: none; } .service-cta:hover::after { width: 400px; height: 400px; opacity: 0; } @media (min-width: 901px) { a.service-card:hover .service-cta { transform: translateY(-2px) !important; box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.45), 0 4px 8px rgba(15, 23, 42, 0.08) !important; } } .service-cta i { font-size: 13px !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-flex !important; align-items: center !important; } @media (min-width: 901px) { a.service-card:hover .service-cta i { transform: translateX(-5px) !important; } } .service-card .btn, .service-card .btn-primary { display: none !important; } body.dark-mode .service-card-footer { border-top-color: #334155 !important; } body.dark-mode .service-price { color: #60a5fa !important; } body.dark-mode .service-price::after { background: linear-gradient(90deg, #3b82f6, #0ea5e9); } body.dark-mode .service-cta { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) !important; } @media (min-width: 901px) { body.dark-mode a.service-card:hover .service-cta { box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15) !important; } } @media (max-width: 700px) { .service-price { font-size: 16px !important; margin-bottom: 12px !important; } .service-price::after { width: 32px; height: 2px; margin-top: 8px; } .service-cta { padding: 13px 16px !important; font-size: 14px !important; border-radius: 11px !important; gap: 8px !important; } .service-cta i { font-size: 12px !important; } } .service-price::after { display: none !important; content: none !important; } .service-price { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 12px 16px !important; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important; color: #1d4ed8 !important; font-size: 17px !important; font-weight: 900 !important; letter-spacing: -0.5px !important; font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important; direction: rtl !important; unicode-bidi: embed !important; border-radius: 12px !important; border: 1px solid rgba(37, 99, 235, 0.12) !important; margin: 0 0 12px 0 !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: center !important; transition: all 0.3s ease !important; position: relative !important; } @media (min-width: 901px) { a.service-card:hover .service-price { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important; border-color: rgba(37, 99, 235, 0.25) !important; transform: scale(1.02) !important; } } body.dark-mode .service-price { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important; color: #93c5fd !important; border-color: rgba(96, 165, 250, 0.2) !important; } @media (min-width: 901px) { body.dark-mode a.service-card:hover .service-price { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important; border-color: rgba(96, 165, 250, 0.4) !important; } } @media (max-width: 700px) { .service-price { font-size: 15px !important; padding: 10px 14px !important; border-radius: 10px !important; margin-bottom: 10px !important; } } .service-price::before, .service-price::after { display: none !important; content: none !important; } .service-price { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 0 16px 0 !important; background: none !important; border: none !important; border-radius: 0 !important; color: #1d4ed8 !important; font-size: 22px !important; font-weight: 900 !important; letter-spacing: -0.5px !important; font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important; direction: rtl !important; unicode-bidi: embed !important; text-align: center !important; line-height: 1.2 !important; white-space: nowrap !important; transition: color 0.25s ease !important; transform: none !important; box-shadow: none !important; } @media (min-width: 901px) { a.service-card:hover .service-price { color: #2563eb !important; transform: none !important; background: none !important; box-shadow: none !important; } } .service-card-footer { display: block !important; padding-top: 18px !important; margin-top: auto !important; border-top: 1px solid rgba(226, 232, 240, 0.7) !important; text-align: center !important; } .service-cta { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 14px 20px !important; background: #2563eb !important; background-image: none !important; color: #ffffff !important; font-size: 15px !important; font-weight: 800 !important; border-radius: 12px !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; letter-spacing: 0.2px !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; } .service-cta::before, .service-cta::after { display: none !important; content: none !important; } .service-cta:hover { background: #1d4ed8 !important; background-image: none !important; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3) !important; } @media (min-width: 901px) { a.service-card:hover .service-cta { background: #1d4ed8 !important; background-image: none !important; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3) !important; transform: none !important; } } .service-cta i { font-size: 13px !important; transition: transform 0.25s ease !important; display: inline-flex !important; align-items: center !important; } @media (min-width: 901px) { a.service-card:hover .service-cta i { transform: translateX(-4px) !important; } } @media (max-width: 700px) { .service-price { font-size: 19px !important; margin-bottom: 14px !important; } .service-cta { padding: 13px 18px !important; font-size: 14.5px !important; border-radius: 11px !important; } } body.dark-mode .service-card-footer { border-top-color: #334155 !important; } body.dark-mode .service-price { color: #60a5fa !important; background: none !important; border: none !important; } @media (min-width: 901px) { body.dark-mode a.service-card:hover .service-price { color: #93c5fd !important; } } body.dark-mode .service-cta { background: #3b82f6 !important; background-image: none !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important; } body.dark-mode .service-cta:hover, body.dark-mode a.service-card:hover .service-cta { background: #2563eb !important; background-image: none !important; } .service-card .service-price, a.service-card .service-price { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 0 !important; margin: 0 0 16px 0 !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-align: center !important; direction: rtl !important; unicode-bidi: plaintext !important; } .service-card .service-price, a.service-card .service-price { color: #1d4ed8 !important; font-size: 22px !important; font-weight: 900 !important; letter-spacing: -0.5px !important; font-family: 'Vazirmatn', 'Peyda', Tahoma, Arial, sans-serif !important; line-height: 1.2 !important; white-space: nowrap !important; transition: color 0.25s ease !important; } .service-card .service-price::before, .service-card .service-price::after, a.service-card .service-price::before, a.service-card .service-price::after { display: none !important; content: none !important; } @media (min-width: 901px) { a.service-card:hover .service-price { color: #2563eb !important; } } body.dark-mode .service-card .service-price, body.dark-mode a.service-card .service-price { color: #60a5fa !important; background: none !important; border: none !important; } @media (min-width: 901px) { body.dark-mode a.service-card:hover .service-price { color: #93c5fd !important; } } @media (max-width: 700px) { .service-card .service-price, a.service-card .service-price { font-size: 19px !important; margin-bottom: 14px !important; } } .blog-search-section { max-width: 720px; margin: 0 auto 42px; position: relative; z-index: 10; } .blog-search-section .search-box { position: relative; display: flex; align-items: center; background: #ffffff; border: 2px solid #cbd5e1; border-radius: 16px; padding: 0 20px; transition: all 0.3s ease; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05); } .blog-search-section .search-box:focus-within { border-color: #2563eb; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.15); transform: translateY(-2px); } .blog-search-section .search-icon { color: #64748b; font-size: 18px; margin-left: 14px; transition: color 0.3s ease; } .blog-search-section .search-box:focus-within .search-icon { color: #2563eb; } .blog-search-section .search-input { flex: 1; border: none; outline: none; padding: 18px 0; font-family: inherit; font-size: 15px; color: #0f172a; background: transparent; } .blog-search-section .search-input::placeholder { color: #94a3b8; font-size: 14px; } .blog-search-section .search-clear { background: transparent; border: none; color: #64748b; cursor: pointer; padding: 8px; font-size: 16px; border-radius: 50%; transition: all 0.2s ease; } .blog-search-section .search-clear:hover { background: #fef2f2; color: #ef4444; } .blog-search-section .search-results { position: absolute; top: calc(100% + 10px); right: 0; left: 0; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.2), 0 4px 15px rgba(37, 99, 235, 0.08); max-height: 500px; overflow-y: auto; display: none; z-index: 100; border: 1px solid rgba(226, 232, 240, 0.7); } .blog-search-section .search-results.active { display: block; animation: blogSearchDrop 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes blogSearchDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .blog-search-section .search-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(226, 232, 240, 0.6); transition: all 0.2s ease; cursor: pointer; text-decoration: none; color: inherit; } .blog-search-section .search-item:last-child { border-bottom: none; } .blog-search-section .search-item:hover { background: #eff6ff; padding-right: 24px; } .blog-search-section .search-item-icon { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, #dbeafe, #eff6ff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; color: #2563eb; overflow: hidden; } .blog-search-section .search-item-icon img { width: 100%; height: 100%; object-fit: cover; } .blog-search-section .search-item-content { flex: 1; min-width: 0; } .blog-search-section .search-item-title { font-weight: 800; font-size: 15px; color: #0f172a; margin-bottom: 5px; display: block; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blog-search-section .search-item-excerpt { font-size: 13px; color: #64748b; display: block; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blog-search-section .search-item-time { font-size: 11.5px; color: #2563eb; font-weight: 700; display: flex; align-items: center; gap: 4px; margin-top: 4px; } .blog-search-section .search-item-time i { font-size: 10px; } .blog-search-section .search-item-arrow { color: #94a3b8; font-size: 14px; transition: transform 0.2s ease; flex-shrink: 0; } .blog-search-section .search-item:hover .search-item-arrow { color: #2563eb; transform: translateX(-4px); } .blog-search-section .search-loading, .blog-search-section .search-empty { padding: 30px 20px; text-align: center; color: #64748b; font-size: 14px; } .blog-search-section .search-loading i, .blog-search-section .search-empty i { display: block; font-size: 32px; margin-bottom: 10px; color: #cbd5e1; } .blog-search-section .search-loading i { color: #2563eb; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .blog-search-section .search-results-header { padding: 12px 18px; font-size: 12.5px; font-weight: 800; color: #1d4ed8; background: #eff6ff; border-bottom: 1px solid rgba(226, 232, 240, 0.6); display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; } body.dark-mode .blog-search-section .search-box { background: #1e293b; border-color: #334155; } body.dark-mode .blog-search-section .search-box:focus-within { border-color: #3b82f6; box-shadow: 0 8px 28px rgba(59, 130, 246, 0.2); } body.dark-mode .blog-search-section .search-input { color: #e2e8f0; } body.dark-mode .blog-search-section .search-icon { color: #94a3b8; } body.dark-mode .blog-search-section .search-box:focus-within .search-icon { color: #60a5fa; } body.dark-mode .blog-search-section .search-results { background: #1e293b; border-color: #334155; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5); } body.dark-mode .blog-search-section .search-results-header { background: #0f172a; color: #93c5fd; border-bottom-color: #334155; } body.dark-mode .blog-search-section .search-item { border-bottom-color: #334155; } body.dark-mode .blog-search-section .search-item:hover { background: #334155; } body.dark-mode .blog-search-section .search-item-icon { background: linear-gradient(135deg, #1e3a8a, #1e40af); color: #93c5fd; } body.dark-mode .blog-search-section .search-item-title { color: #f1f5f9; } body.dark-mode .blog-search-section .search-item-excerpt { color: #94a3b8; } body.dark-mode .blog-search-section .search-item-time { color: #60a5fa; } body.dark-mode .blog-search-section .search-loading, body.dark-mode .blog-search-section .search-empty { color: #94a3b8; } @media (max-width: 700px) { .blog-search-section { margin-bottom: 32px; } .blog-search-section .search-input { font-size: 14px; padding: 15px 0; } .blog-search-section .search-results { max-height: 400px; } .blog-search-section .search-item { padding: 12px 14px; gap: 12px; } .blog-search-section .search-item-icon { width: 48px; height: 48px; border-radius: 10px; } .blog-search-section .search-item-title { font-size: 14px; } .blog-search-section .search-item-excerpt { font-size: 12px; } } @media (min-width: 701px) { .hero-text { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .hero-text h1, .hero-text p { width: 100%; } .hero-text .btn-primary, .hero-text .btn-outline, .hero-text .btn-dashboard { flex: 0 0 auto; margin: 0; } } @media (max-width: 700px) { .hero-text { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100%; } .hero-text h1, .hero-text p { width: 100%; } .hero-text .btn-primary, .hero-text .btn-outline, .hero-text .btn-dashboard { width: 100% !important; margin: 0 !important; padding: 15px 24px !important; font-size: 15px !important; text-align: center !important; justify-content: center !important; display: flex !important; align-items: center !important; } .hero-text .btn-primary { background: #fff !important; color: #2563eb !important; order: 1; } .hero-text .btn-dashboard { order: 2; } .hero-text .btn-outline { background: transparent !important; border: 2px solid #fff !important; color: #fff !important; order: 2; } } @media (max-width: 700px) { .hero { padding: 60px 0 50px !important; } .hero .container { gap: 0; } .hero-text { padding: 0 !important; } .hero-text h1 { font-size: 26px !important; line-height: 1.4 !important; margin-bottom: 16px !important; } .hero-text p { font-size: 14.5px !important; line-height: 1.9 !important; margin-bottom: 24px !important; } .hero-art { display: none !important; } } .srv-loading-wrap { position: relative; overflow: hidden; } .srv-loading-wrap::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 4px solid rgba(37, 99, 235, 0.15); border-top-color: #2563eb; animation: srv-spin 0.9s linear infinite; z-index: 2; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .srv-loading-wrap.srv-loaded::before { opacity: 0; visibility: hidden; } .srv-loading-wrap img { opacity: 0; transition: opacity 0.6s ease; display: block; } .srv-loading-wrap.srv-loaded img { opacity: 1; } @keyframes srv-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body.dark-mode .srv-loading-wrap::before { border-color: rgba(96, 165, 250, 0.2); border-top-color: #60a5fa; } @media (max-width: 991px) { body.dark-mode } @media (max-width: 480px) { } @media (min-width: 992px) and (max-width: 1199px) { } body.dark-mode body.dark-mode body.dark-mode body.dark-mode body.dark-mode body.dark-mode @media (max-width: 991px) { } @media (max-width: 991px) { body.dark-mode body.dark-mode } @media (max-width: 400px) { } @media (max-width: 991px) { } @media (max-width: 991px) { } @media (max-width: 400px) { } .site-header .logo, @media (max-width: 991px){.site-header .main-nav{position:fixed;top:0;right:-100%;width:min(85vw,340px);height:100vh;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:right .3s ease;z-index:9999;overflow-y:auto;padding:20px 18px;display:block;visibility:visible;opacity:1;transform:none}.site-header .main-nav.open{right:0}.site-header .main-nav ul{flex-direction:column;gap:6px;align-items:stretch}.site-header .main-nav ul li{width:100%;border-bottom:1px solid #f0f0f0}.site-header .main-nav ul li:last-child{border-bottom:none}.site-header .main-nav ul li a{display:flex;align-items:center;gap:10px;padding:12px 8px;width:100%;color:#1f2937;font-size:15px;border-radius:8px;transition:background .2s}.site-header .main-nav ul li a:hover{background:#eff6ff;color:#2563eb}.site-header .main-nav ul li a i{width:20px;text-align:center;color:#2563eb}.site-header .hamburger{display:flex;flex-direction:column;justify-content:space-between;width:42px;height:42px;padding:10px 9px;background:#f1f5f9;border:none;border-radius:10px;cursor:pointer;z-index:10000;position:relative}.site-header .hamburger span{display:block;width:100%;height:2.5px;background:#2563eb;border-radius:2px;transition:transform .3s ease,opacity .3s ease}.site-header .hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}.site-header .hamburger.active span:nth-child(2){opacity:0}.site-header .hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}body.menu-open{overflow:hidden}} @media (max-width: 400px) { .nav-account-row > a.btn-nav, .nav-account-row > a.nav-logout-btn, .nav-account-row > a.nav-login-btn, .nav-account-row > a.btn-nav > i, .nav-account-row > a.nav-logout-btn > i, .nav-account-row > a.nav-login-btn > i, } @media (max-width: 991px){.site-header .main-nav{position:fixed;top:0;right:-100%;width:min(85vw,340px);height:100vh;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:right .3s ease;z-index:9999;overflow-y:auto;padding:20px 18px;display:block;visibility:visible;opacity:1;transform:none}.site-header .main-nav.open{right:0}.site-header .main-nav ul{flex-direction:column;gap:6px;align-items:stretch}.site-header .main-nav ul li{width:100%;border-bottom:1px solid #f0f0f0}.site-header .main-nav ul li:last-child{border-bottom:none}.site-header .main-nav ul li a{display:flex;align-items:center;gap:10px;padding:12px 8px;width:100%;color:#1f2937;font-size:15px;border-radius:8px;transition:background .2s}.site-header .main-nav ul li a:hover{background:#eff6ff;color:#2563eb}.site-header .main-nav ul li a i{width:20px;text-align:center;color:#2563eb}.site-header .hamburger{display:flex;flex-direction:column;justify-content:space-between;width:42px;height:42px;padding:10px 9px;background:#f1f5f9;border:none;border-radius:10px;cursor:pointer;z-index:10000;position:relative}.site-header .hamburger span{display:block;width:100%;height:2.5px;background:#2563eb;border-radius:2px;transition:transform .3s ease,opacity .3s ease}.site-header .hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}.site-header .hamburger.active span:nth-child(2){opacity:0}.site-header .hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}body.menu-open{overflow:hidden}} @keyframes navItemIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 400px) { .nav-account-row > a.btn-nav, .nav-account-row > a.nav-logout-btn, .nav-account-row > a.nav-login-btn, .nav-account-row > a.btn-nav > i, .nav-account-row > a.nav-logout-btn > i, .nav-account-row > a.nav-login-btn > i, } @media (max-width: 991px){.site-header .main-nav{position:fixed;top:0;right:-100%;width:min(85vw,340px);height:100vh;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:right .3s ease;z-index:9999;overflow-y:auto;padding:20px 18px;display:block;visibility:visible;opacity:1;transform:none}.site-header .main-nav.open{right:0}.site-header .main-nav ul{flex-direction:column;gap:6px;align-items:stretch}.site-header .main-nav ul li{width:100%;border-bottom:1px solid #f0f0f0}.site-header .main-nav ul li:last-child{border-bottom:none}.site-header .main-nav ul li a{display:flex;align-items:center;gap:10px;padding:12px 8px;width:100%;color:#1f2937;font-size:15px;border-radius:8px;transition:background .2s}.site-header .main-nav ul li a:hover{background:#eff6ff;color:#2563eb}.site-header .main-nav ul li a i{width:20px;text-align:center;color:#2563eb}.site-header .hamburger{display:flex;flex-direction:column;justify-content:space-between;width:42px;height:42px;padding:10px 9px;background:#f1f5f9;border:none;border-radius:10px;cursor:pointer;z-index:10000;position:relative}.site-header .hamburger span{display:block;width:100%;height:2.5px;background:#2563eb;border-radius:2px;transition:transform .3s ease,opacity .3s ease}.site-header .hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}.site-header .hamburger.active span:nth-child(2){opacity:0}.site-header .hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}body.menu-open{overflow:hidden}} @media (max-width: 991px){.site-header .main-nav{position:fixed;top:0;right:-100%;width:min(85vw,340px);height:100vh;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:right .3s ease;z-index:9999;overflow-y:auto;padding:20px 18px;display:block;visibility:visible;opacity:1;transform:none}.site-header .main-nav.open{right:0}.site-header .main-nav ul{flex-direction:column;gap:6px;align-items:stretch}.site-header .main-nav ul li{width:100%;border-bottom:1px solid #f0f0f0}.site-header .main-nav ul li:last-child{border-bottom:none}.site-header .main-nav ul li a{display:flex;align-items:center;gap:10px;padding:12px 8px;width:100%;color:#1f2937;font-size:15px;border-radius:8px;transition:background .2s}.site-header .main-nav ul li a:hover{background:#eff6ff;color:#2563eb}.site-header .main-nav ul li a i{width:20px;text-align:center;color:#2563eb}.site-header .hamburger{display:flex;flex-direction:column;justify-content:space-between;width:42px;height:42px;padding:10px 9px;background:#f1f5f9;border:none;border-radius:10px;cursor:pointer;z-index:10000;position:relative}.site-header .hamburger span{display:block;width:100%;height:2.5px;background:#2563eb;border-radius:2px;transition:transform .3s ease,opacity .3s ease}.site-header .hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}.site-header .hamburger.active span:nth-child(2){opacity:0}.site-header .hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}body.menu-open{overflow:hidden}} @media (min-width: 992px) { } @media (max-width: 991px){.site-header .main-nav{position:fixed;top:0;right:-100%;width:min(85vw,340px);height:100vh;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:right .3s ease;z-index:9999;overflow-y:auto;padding:20px 18px;display:block;visibility:visible;opacity:1;transform:none}.site-header .main-nav.open{right:0}.site-header .main-nav ul{flex-direction:column;gap:6px;align-items:stretch}.site-header .main-nav ul li{width:100%;border-bottom:1px solid #f0f0f0}.site-header .main-nav ul li:last-child{border-bottom:none}.site-header .main-nav ul li a{display:flex;align-items:center;gap:10px;padding:12px 8px;width:100%;color:#1f2937;font-size:15px;border-radius:8px;transition:background .2s}.site-header .main-nav ul li a:hover{background:#eff6ff;color:#2563eb}.site-header .main-nav ul li a i{width:20px;text-align:center;color:#2563eb}.site-header .hamburger{display:flex;flex-direction:column;justify-content:space-between;width:42px;height:42px;padding:10px 9px;background:#f1f5f9;border:none;border-radius:10px;cursor:pointer;z-index:10000;position:relative}.site-header .hamburger span{display:block;width:100%;height:2.5px;background:#2563eb;border-radius:2px;transition:transform .3s ease,opacity .3s ease}.site-header .hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}.site-header .hamburger.active span:nth-child(2){opacity:0}.site-header .hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}body.menu-open{overflow:hidden}} body.dark-mode .service-card-fallback { background: #1e293b !important; color: #60a5fa !important; } .post-single { max-width: 820px; margin: 0 auto; padding: 0 16px; } .post-single-content { background: #ffffff; border-radius: 20px; padding: 36px 32px; box-shadow: 0 4px 24px rgba(21,101,192,.08); border: 1px solid #e3f2fd; color: #1e293b; font-family: 'Vazirmatn', Tahoma, Arial, sans-serif; font-size: 16px; line-height: 2; direction: rtl; text-align: right; word-wrap: break-word; overflow-wrap: break-word; } .post-single-content p { margin: 0 0 18px; line-height: 2; color: #334155; font-size: 16px; } .post-single-content h1, .post-single-content h2, .post-single-content h3, .post-single-content h4 { margin: 28px 0 14px; font-weight: 900; color: #0d47a1; line-height: 1.5; } .post-single-content h1 { font-size: 26px; } .post-single-content h2 { font-size: 22px; } .post-single-content h3 { font-size: 19px; } .post-single-content h4 { font-size: 17px; } .post-single-content a { color: #1565c0; text-decoration: none; border-bottom: 1px dashed #64b5f6; transition: all .2s; } .post-single-content a:hover { color: #0d47a1; border-bottom-style: solid; } .post-single-content ul, .post-single-content ol { margin: 0 0 18px; padding-right: 28px; color: #334155; } .post-single-content li { margin-bottom: 8px; line-height: 1.9; } .post-single-content img { max-width: 100%; height: auto; border-radius: 14px; margin: 18px auto; display: block; box-shadow: 0 6px 20px -4px rgba(21,101,192,.15); } .post-single-content blockquote { margin: 20px 0; padding: 16px 22px; background: linear-gradient(135deg, #eff6ff, #dbeafe); border-right: 4px solid #1565c0; border-radius: 12px; color: #1e3a8a; font-weight: 600; line-height: 2; } .post-single-content blockquote p { margin: 0 0 8px; } .post-single-content blockquote p:last-child { margin-bottom: 0; } .post-single-content code { background: #f1f5f9; padding: 3px 8px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 14px; color: #be185d; direction: ltr; display: inline-block; } .post-single-content pre { background: #0f172a; color: #e2e8f0; padding: 20px; border-radius: 14px; overflow-x: auto; margin: 20px 0; direction: ltr; text-align: left; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.7; } .post-single-content pre code { background: none; padding: 0; color: inherit; } .post-single-content hr { border: none; height: 2px; background: linear-gradient(90deg, transparent, #bfdbfe, transparent); margin: 32px 0; } .post-single-content table { width: 100%; border-collapse: collapse; margin: 20px 0; border-radius: 12px; overflow: hidden; font-size: 14px; } .post-single-content th, .post-single-content td { padding: 12px 16px; border: 1px solid #e2e8f0; text-align: right; } .post-single-content th { background: linear-gradient(135deg, #eff6ff, #dbeafe); font-weight: 900; color: #0d47a1; } .post-single-content tr:nth-child(even) { background: #f8fafc; } .post-single-content strong, .post-single-content b { font-weight: 900; color: #0d47a1; } body.dark-mode .post-single-content { background: #1a2430; border-color: #1e3a5f; box-shadow: 0 4px 24px rgba(0,0,0,.3); color: #e6edf3; } body.dark-mode .post-single-content p, body.dark-mode .post-single-content li, body.dark-mode .post-single-content ul, body.dark-mode .post-single-content ol { color: #cbd5e1; } body.dark-mode .post-single-content h1, body.dark-mode .post-single-content h2, body.dark-mode .post-single-content h3, body.dark-mode .post-single-content h4 { color: #90caf9; } body.dark-mode .post-single-content a { color: #64b5f6; border-bottom-color: #1976d2; } body.dark-mode .post-single-content strong, body.dark-mode .post-single-content b { color: #90caf9; } body.dark-mode .post-single-content blockquote { background: linear-gradient(135deg, #16324a, #1e4a73); color: #90caf9; border-right-color: #1976d2; } body.dark-mode .post-single-content code { background: #16324a; color: #f472b6; } body.dark-mode .post-single-content pre { background: #0a1628; color: #e2e8f0; } body.dark-mode .post-single-content th { background: linear-gradient(135deg, #16324a, #1e4a73); color: #90caf9; border-color: #1e5a8a; } body.dark-mode .post-single-content td { border-color: #1e5a8a; } body.dark-mode .post-single-content tr:nth-child(even) { background: #16324a; } @media (max-width: 640px) { .post-single { padding: 0 12px; } .post-single-content { padding: 22px 18px; border-radius: 16px; font-size: 15px; line-height: 1.95; } .post-single-content p { font-size: 15px; } .post-single-content h1 { font-size: 22px; } .post-single-content h2 { font-size: 19px; } .post-single-content h3 { font-size: 17px; } .post-single-content h4 { font-size: 15.5px; } .post-single-content blockquote { padding: 14px 16px; font-size: 14.5px; } .post-single-content pre { padding: 14px; font-size: 12.5px; border-radius: 10px; } .post-single-content table { font-size: 13px; } .post-single-content th, .post-single-content td { padding: 10px 12px; } } .upload-guide{ margin-top:14px; padding:16px 18px; background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%); border:1px solid #bfdbfe; border-radius:14px; font-size:12.5px; line-height:1.9; color:#1e3a8a; direction:rtl; } .upload-guide-title{ display:flex; align-items:center; gap:8px; font-weight:800; margin-bottom:12px; color:#1d4ed8; font-size:13.5px; padding-bottom:10px; border-bottom:1px dashed #93c5fd; } .upload-guide-title i{ font-size:15px; } .upload-guide-item{ display:flex; align-items:flex-start; gap:10px; margin-bottom:9px; } .upload-guide-item:last-of-type{ margin-bottom:0; } .upload-guide-item > i{ font-size:16px; color:#2563eb; margin-top:3px; flex-shrink:0; width:18px; text-align:center; } .upload-guide-item > div{ flex:1; min-width:0; } .upload-guide-item strong{ color:#1e40af; font-weight:800; } .upload-guide-item span{ color:#1e3a8a; } .upload-guide-item kbd{ display:inline-block; padding:2px 8px; background:#fff; border:1px solid #93c5fd; border-radius:6px; font-size:11px; font-weight:800; color:#1d4ed8; font-family:monospace,monospace; box-shadow:0 1px 2px rgba(37,99,235,.15); margin:0 3px; } .upload-guide-note{ display:flex; align-items:flex-start; gap:10px; margin-top:12px; padding-top:11px; border-top:1px dashed #93c5fd; } .upload-guide-note > i{ font-size:16px; color:#f59e0b; margin-top:2px; flex-shrink:0; width:18px; text-align:center; } .upload-guide-note span{ color:#78350f; font-size:12px; } .upload-guide-note strong{ color:#92400e; } body.dark-mode .upload-guide{ background:linear-gradient(135deg,#1e293b 0%,#1e3a8a 100%); border-color:#334155; color:#cbd5e1; } body.dark-mode .upload-guide-title{ color:#93c5fd; border-bottom-color:#475569; } body.dark-mode .upload-guide-item > i{ color:#60a5fa; } body.dark-mode .upload-guide-item strong{ color:#93c5fd; } body.dark-mode .upload-guide-item span{ color:#cbd5e1; } body.dark-mode .upload-guide-item kbd{ background:#0f172a; border-color:#475569; color:#93c5fd; } body.dark-mode .upload-guide-note{ border-top-color:#475569; } body.dark-mode .upload-guide-note span{ color:#fbbf24; } body.dark-mode .upload-guide-note strong{ color:#f59e0b; } @media (max-width:520px){ .upload-guide{ padding:14px 15px; font-size:12px; } .upload-guide-title{ font-size:13px; } .upload-guide-item{ gap:9px; } } .main-nav ul li a i { margin-left: 6px; font-size: 13px; opacity: 0.85; } .main-nav ul li a:hover i { opacity: 1; } img.img-loading { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: imgShimmer 1.5s infinite; position: relative; min-height: 40px; } img.img-loading::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(59, 130, 246, 0.2); border-top-color: #3b82f6; animation: imgSpin 0.8s linear infinite; z-index: 10; } @keyframes imgSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes imgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } img.img-loaded { animation: imgFadeIn 0.3s ease; } @keyframes imgFadeIn { from { opacity: 0.5; } to { opacity: 1; } } img.img-error { background: #fee2e2; border: 1px dashed #ef4444; min-height: 100px; } 
 :root { --hp-primary: #2563eb; --hp-primary-dark: #1d4ed8; --hp-primary-light: #3b82f6; --hp-accent: #06b6d4; --hp-accent-light: #22d3ee; --hp-bg: #f8fafc; --hp-bg-alt: #ffffff; --hp-text: #0f172a; --hp-text-muted: #64748b; --hp-border: #e2e8f0; --hp-radius: 16px; --hp-radius-lg: 24px; --hp-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); --hp-shadow-hover: 0 20px 40px -12px rgba(37, 99, 235, 0.2); --hp-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hp-section { padding: 80px 0; position: relative; overflow: hidden; } .hp-section-alt { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); } .hp-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; } .hp-section-title { font-size: clamp(24px, 4vw, 40px); font-weight: 800; color: var(--hp-text); text-align: center; margin: 0 0 12px; line-height: 1.3; } .hp-section-subtitle { font-size: clamp(14px, 2vw, 18px); color: var(--hp-text-muted); text-align: center; margin: 0 0 50px; line-height: 1.9; max-width: 700px; margin-left: auto; margin-right: auto; } .hp-hero { position: relative; min-height: 92vh; min-height: 92dvh; display: flex; align-items: center; justify-content: center; background: #030d26; overflow: hidden; padding: 100px 20px 60px; } .hp-hero-bg { position: absolute; inset: -20%; filter: blur(90px); opacity: 0.85; pointer-events: none; } .hp-hero-bg i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; } .hp-hero-bg .m1 { width: 46%; aspect-ratio: 1; background: #1152ff; left: 6%; top: 2%; animation: hpM1 18s ease-in-out infinite; } .hp-hero-bg .m2 { width: 40%; aspect-ratio: 1; background: #00d4ff; right: 4%; top: 18%; animation: hpM2 22s ease-in-out infinite; } .hp-hero-bg .m3 { width: 34%; aspect-ratio: 1; background: #2b7bff; left: 28%; bottom: -6%; animation: hpM3 26s ease-in-out infinite; } .hp-hero-bg .m4 { width: 22%; aspect-ratio: 1; background: #7df0ff; right: 26%; bottom: 4%; opacity: 0.5; animation: hpM2 19s ease-in-out infinite reverse; } @keyframes hpM1 { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(7%, 8%, 0) scale(1.12); } } @keyframes hpM2 { 0%, 100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-8%, 6%, 0) scale(0.92); } } @keyframes hpM3 { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%, -7%, 0) scale(1.15); } } .hp-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 70% at 50% 45%, rgba(3,13,38,0) 0%, rgba(2,8,24,0.55) 70%, rgba(2,6,20,0.92) 100%); pointer-events: none; } .hp-hero-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .hp-hero-particles i { position: absolute; color: rgba(255, 255, 255, 0.15); font-size: 20px; animation: hpFloat 8s ease-in-out infinite; } .hp-hero-particles i:nth-child(1) { top: 15%; left: 8%; font-size: 32px; animation-delay: 0s; } .hp-hero-particles i:nth-child(2) { top: 25%; right: 12%; font-size: 28px; animation-delay: 1s; } .hp-hero-particles i:nth-child(3) { bottom: 20%; left: 15%; font-size: 24px; animation-delay: 2s; } .hp-hero-particles i:nth-child(4) { bottom: 30%; right: 8%; font-size: 36px; animation-delay: 3s; } .hp-hero-particles i:nth-child(5) { top: 50%; left: 5%; font-size: 20px; animation-delay: 4s; } .hp-hero-particles i:nth-child(6) { top: 60%; right: 5%; font-size: 26px; animation-delay: 5s; } @keyframes hpFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(15deg); } } .hp-hero-content { position: relative; z-index: 3; text-align: center; max-width: 900px; margin: 0 auto; color: #fff; animation: hpFadeUp 1s ease-out; } @keyframes hpFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hp-hero-logo { display: inline-flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); padding: 10px 24px; border-radius: 50px; font-size: 14px; font-weight: 700; margin-bottom: 30px; animation: hpPulse 3s ease-in-out infinite; } @keyframes hpPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); } 50% { transform: scale(1.02); box-shadow: 0 0 30px 5px rgba(37, 99, 235, 0.3); } } .hp-hero-logo i { color: #22d3ee; font-size: 18px; } .hp-hero-title { font-size: clamp(28px, 5vw, 56px); font-weight: 900; line-height: 1.3; margin: 0 0 24px; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); letter-spacing: -0.02em; } .hp-hero-title .gradient { background: linear-gradient(135deg, #60a5fa, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hp-hero-desc { font-size: clamp(14px, 2.2vw, 19px); line-height: 1.9; color: #cbd5e1; margin: 0 0 40px; max-width: 700px; margin-left: auto; margin-right: auto; } .hp-hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 36px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; transition: var(--hp-transition); cursor: pointer; border: 0; font-family: inherit; } .hp-btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.5); } .hp-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -8px rgba(37, 99, 235, 0.6); } .hp-btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); } .hp-btn-ghost:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .hp-hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); font-size: 24px; animation: hpScroll 2s ease-in-out infinite; z-index: 3; } @keyframes hpScroll { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } .hp-stats { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); } .hp-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; } .hp-stat-card { background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg); padding: 40px 24px; text-align: center; transition: var(--hp-transition); position: relative; overflow: hidden; box-shadow: var(--hp-shadow); } .hp-stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--hp-primary), var(--hp-accent)); transform: scaleX(0); transform-origin: center; transition: transform 0.4s ease; } .hp-stat-card:hover::before { transform: scaleX(1); } .hp-stat-card:hover { transform: translateY(-8px); box-shadow: var(--hp-shadow-hover); border-color: rgba(37, 99, 235, 0.2); } .hp-stat-icon { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, #dbeafe, #eff6ff); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--hp-primary); font-size: 30px; transition: var(--hp-transition); } .hp-stat-card:hover .hp-stat-icon { transform: scale(1.1) rotate(-5deg); background: linear-gradient(135deg, #bfdbfe, #dbeafe); } .hp-stat-value { font-size: clamp(32px, 5vw, 44px); font-weight: 900; color: var(--hp-primary-dark); margin: 0 0 8px; line-height: 1; letter-spacing: -1.5px; } .hp-stat-label { font-size: 14px; color: var(--hp-text-muted); font-weight: 600; margin: 0; } .hp-services { background: var(--hp-bg-alt); } .hp-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .hp-service-card { background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); padding: 24px; transition: var(--hp-transition); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .hp-service-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(37, 99, 235, 0.03), rgba(6, 182, 212, 0.03)); opacity: 0; transition: opacity 0.3s; } .hp-service-card:hover { transform: translateY(-5px); box-shadow: var(--hp-shadow-hover); border-color: rgba(37, 99, 235, 0.3); } .hp-service-card:hover::before { opacity: 1; } .hp-service-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #dbeafe, #eff6ff); display: flex; align-items: center; justify-content: center; color: var(--hp-primary); font-size: 24px; transition: var(--hp-transition); flex-shrink: 0; } .hp-service-card:hover .hp-service-icon { background: linear-gradient(135deg, var(--hp-primary), var(--hp-accent)); color: #fff; transform: scale(1.1) rotate(-5deg); } .hp-service-title { font-size: 15px; font-weight: 700; color: var(--hp-text); margin: 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; z-index: 1; } .hp-service-desc { font-size: 13px; color: var(--hp-text-muted); line-height: 1.7; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; z-index: 1; } .hp-service-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hp-border); position: relative; z-index: 1; } .hp-service-price { font-size: 15px; font-weight: 800; color: var(--hp-primary-dark); } .hp-service-arrow { color: var(--hp-primary); font-size: 14px; transition: var(--hp-transition); } .hp-service-card:hover .hp-service-arrow { transform: translateX(-5px); } .hp-services-more { text-align: center; margin-top: 40px; } .hp-services-more a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: var(--hp-primary); color: #fff; text-decoration: none; border-radius: 12px; font-weight: 700; font-size: 14px; transition: var(--hp-transition); } .hp-services-more a:hover { background: var(--hp-primary-dark); transform: translateY(-3px); box-shadow: var(--hp-shadow-hover); } .hp-why { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); } .hp-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .hp-why-card { background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg); padding: 36px 28px; text-align: center; transition: var(--hp-transition); } .hp-why-card:hover { transform: translateY(-8px); box-shadow: var(--hp-shadow-hover); } .hp-why-icon { width: 80px; height: 80px; border-radius: 22px; background: linear-gradient(135deg, var(--hp-primary), var(--hp-accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; margin: 0 auto 22px; box-shadow: 0 12px 30px -8px rgba(37, 99, 235, 0.4); } .hp-why-title { font-size: 18px; font-weight: 800; color: var(--hp-text); margin: 0 0 10px; } .hp-why-desc { font-size: 14px; color: var(--hp-text-muted); line-height: 1.9; margin: 0; } .hp-app { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #fff; position: relative; overflow: hidden; } .hp-app::before { content: ""; position: absolute; top: -50%; right: -20%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(37, 99, 235, 0.3), transparent 70%); pointer-events: none; } .hp-app-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .hp-app-text { color: #fff; } .hp-app-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(34, 211, 238, 0.15); border: 1px solid rgba(34, 211, 238, 0.3); color: #22d3ee; padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; margin-bottom: 20px; } .hp-app-title { font-size: clamp(24px, 4vw, 40px); font-weight: 900; line-height: 1.4; margin: 0 0 18px; color: #fff; } .hp-app-desc { font-size: clamp(14px, 2vw, 17px); line-height: 1.9; color: #cbd5e1; margin: 0 0 30px; } .hp-app-features { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; } .hp-app-feature { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e2e8f0; } .hp-app-feature i { color: #22d3ee; } .hp-app-download { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; padding: 15px 32px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 15px; transition: var(--hp-transition); box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.5); } .hp-app-download:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -8px rgba(37, 99, 235, 0.6); } .hp-app-mockup { display: flex; justify-content: center; align-items: center; } .hp-app-phone { width: 240px; height: 480px; background: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 32px; border: 6px solid #334155; position: relative; overflow: hidden; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6); animation: hpPhoneFloat 4s ease-in-out infinite; } @keyframes hpPhoneFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-15px) rotate(2deg); } } .hp-app-phone::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: #475569; border-radius: 10px; } .hp-app-phone-screen { position: absolute; inset: 20px 10px 10px; background: linear-gradient(180deg, #2563eb, #06b6d4); border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 20px; } .hp-app-phone-screen i { font-size: 60px; margin-bottom: 16px; opacity: 0.9; } .hp-app-phone-screen span { font-size: 14px; font-weight: 700; opacity: 0.9; } .hp-cta { background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-accent) 100%); color: #fff; position: relative; overflow: hidden; } .hp-cta::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.05\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .hp-cta-inner { text-align: center; max-width: 700px; margin: 0 auto; position: relative; z-index: 2; } .hp-cta-title { font-size: clamp(24px, 4vw, 40px); font-weight: 900; margin: 0 0 18px; color: #fff; line-height: 1.4; } .hp-cta-desc { font-size: clamp(14px, 2vw, 18px); line-height: 1.9; color: rgba(255, 255, 255, 0.95); margin: 0 0 32px; } .hp-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--hp-primary); padding: 16px 40px; border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 16px; transition: var(--hp-transition); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3); } .hp-cta-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); } @media (max-width: 968px) { .hp-hero { min-height: 85vh; padding: 80px 20px 50px; } .hp-app-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; } .hp-app-mockup { order: -1; } .hp-app-features { justify-content: center; } .hp-app-text { text-align: center; } } @media (max-width: 768px) { .hp-section { padding: 50px 0; } .hp-hero { min-height: 100vh; min-height: 100dvh; padding: 70px 16px 40px; } .hp-hero-title { font-size: clamp(24px, 8vw, 32px); } .hp-hero-desc { font-size: 14px; line-height: 1.8; } .hp-hero-buttons { flex-direction: column; gap: 10px; } .hp-btn { width: 100%; justify-content: center; padding: 14px 24px; } .hp-hero-particles i { display: none; } .hp-hero-particles i:nth-child(1), .hp-hero-particles i:nth-child(2) { display: block; } .hp-stats-grid { grid-template-columns: 1fr; gap: 14px; } .hp-stat-card { padding: 28px 20px; } .hp-stat-icon { width: 60px; height: 60px; font-size: 24px; } .hp-stat-value { font-size: 36px; } .hp-services-grid { grid-template-columns: 1fr; gap: 12px; } .hp-service-card { padding: 20px; } .hp-why-card { padding: 28px 20px; } .hp-why-icon { width: 68px; height: 68px; font-size: 26px; } .hp-app-phone { width: 200px; height: 400px; } .hp-app-phone-screen i { font-size: 50px; } .hp-cta-btn { padding: 14px 28px; font-size: 15px; } } @media (max-width: 480px) { .hp-hero-title { font-size: 24px; } .hp-hero-logo { font-size: 12px; padding: 8px 16px; } .hp-section-title { font-size: 22px; } .hp-section-subtitle { font-size: 13px; margin-bottom: 30px; } } @media (max-height: 600px) and (orientation: landscape) { .hp-hero { min-height: auto; padding: 60px 20px 40px; } } @media (prefers-reduced-motion: reduce) { .hp-hero-bg i, .hp-hero-particles i, .hp-app-phone { animation: none !important; } } @media (min-width: 1200px) { .hp-container { max-width: 1280px; } .hp-section { padding: 100px 0; } .hp-hero { min-height: 90vh; min-height: 90dvh; } .hp-hero-title { font-size: 56px; } .hp-hero-desc { font-size: 20px; max-width: 780px; } .hp-stats-grid { max-width: 1000px; gap: 32px; } .hp-stat-card { padding: 48px 32px; } .hp-stat-icon { width: 80px; height: 80px; font-size: 36px; } .hp-stat-value { font-size: 52px; } .hp-services-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } .hp-service-card { padding: 28px; } .hp-why-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } .hp-why-card { padding: 48px 36px; } .hp-app-inner { gap: 80px; } .hp-app-phone { width: 280px; height: 560px; } } @media (min-width: 992px) and (max-width: 1199px) { .hp-container { max-width: 1100px; } .hp-services-grid { grid-template-columns: repeat(3, 1fr); } .hp-stats-grid { max-width: 850px; } } @media (min-width: 769px) and (max-width: 991px) { .hp-services-grid { grid-template-columns: repeat(2, 1fr); } .hp-stats-grid { grid-template-columns: repeat(3, 1fr); } .hp-why-grid { grid-template-columns: repeat(3, 1fr); } .hp-app-inner { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (min-width: 992px) and (min-height: 800px) { .hp-hero { min-height: 100vh; min-height: 100dvh; } } @media (min-width: 992px) and (max-height: 700px) { .hp-hero { min-height: auto; padding: 100px 20px 60px; } .hp-hero-title { font-size: 40px; } } .hp-stat-value, .hp-service-price, .hp-stat-card h3, [data-digits] { direction: ltr !important; unicode-bidi: embed !important; display: inline-block; } html.en-mode, html[dir="ltr"], body.en-mode, body[dir="ltr"] { direction: ltr !important; } html.en-mode .hp-stats-grid, html[dir="ltr"] .hp-stats-grid, body.en-mode .hp-stats-grid { direction: ltr !important; } html.en-mode .hp-stat-card, html[dir="ltr"] .hp-stat-card, body.en-mode .hp-stat-card { direction: ltr !important; text-align: center !important; } html.en-mode .hp-services-grid, html[dir="ltr"] .hp-services-grid, body.en-mode .hp-services-grid { direction: ltr !important; } html.en-mode .hp-service-card, html[dir="ltr"] .hp-service-card, body.en-mode .hp-service-card { direction: ltr !important; text-align: left !important; } html.en-mode .hp-why-grid, html[dir="ltr"] .hp-why-grid, body.en-mode .hp-why-grid { direction: ltr !important; } html.en-mode .hp-why-card, html[dir="ltr"] .hp-why-card, body.en-mode .hp-why-card { text-align: center !important; } html.en-mode .hp-hero-content, html[dir="ltr"] .hp-hero-content, body.en-mode .hp-hero-content { text-align: center !important; } html.en-mode .hp-container, html[dir="ltr"] .hp-container, body.en-mode .hp-container { direction: ltr !important; } html.en-mode .hp-stat-value, html[dir="ltr"] .hp-stat-value, body.en-mode .hp-stat-value, html.en-mode [data-digits], html[dir="ltr"] [data-digits] { font-family: "YEKAN WOFF2", "Peyda", Tahoma, sans-serif !important; } html.en-mode .hp-hero-content, html.en-mode .hp-stat-card, html.en-mode .hp-why-card, html.en-mode .hp-service-card, html[dir="ltr"] .hp-hero-content, html[dir="ltr"] .hp-stat-card, html[dir="ltr"] .hp-why-card, html[dir="ltr"] .hp-service-card { direction: rtl !important; text-align: center !important; } html.en-mode .hp-hero-title, html.en-mode .hp-hero-desc, html.en-mode .hp-hero-logo, html.en-mode .hp-section-title, html.en-mode .hp-section-subtitle, html.en-mode .hp-stat-label, html.en-mode .hp-stat-value, html.en-mode .hp-why-title, html.en-mode .hp-why-desc, html.en-mode .hp-why-icon, html.en-mode .hp-service-title, html.en-mode .hp-service-desc, html.en-mode .hp-stat-icon, html.en-mode .hp-service-icon, html[dir="ltr"] .hp-hero-title, html[dir="ltr"] .hp-hero-desc, html[dir="ltr"] .hp-hero-logo, html[dir="ltr"] .hp-section-title, html[dir="ltr"] .hp-section-subtitle, html[dir="ltr"] .hp-stat-label, html[dir="ltr"] .hp-stat-value, html[dir="ltr"] .hp-why-title, html[dir="ltr"] .hp-why-desc, html[dir="ltr"] .hp-why-icon, html[dir="ltr"] .hp-service-title, html[dir="ltr"] .hp-service-desc, html[dir="ltr"] .hp-stat-icon, html[dir="ltr"] .hp-service-icon { text-align: center !important; direction: rtl !important; } html.en-mode .hp-hero-buttons, html[dir="ltr"] .hp-hero-buttons { direction: rtl !important; justify-content: center !important; } html.en-mode .hp-service-footer, html[dir="ltr"] .hp-service-footer { direction: rtl !important; } html.en-mode .hp-app-inner, html[dir="ltr"] .hp-app-inner { direction: rtl !important; } html.en-mode .hp-app-text, html[dir="ltr"] .hp-app-text { text-align: center !important; direction: rtl !important; } html.en-mode .hp-app-features, html[dir="ltr"] .hp-app-features { justify-content: center !important; direction: rtl !important; } html.en-mode .hp-container, html[dir="ltr"] .hp-container { direction: rtl !important; } html.en-mode .hp-stats-grid, html.en-mode .hp-services-grid, html.en-mode .hp-why-grid, html[dir="ltr"] .hp-stats-grid, html[dir="ltr"] .hp-services-grid, html[dir="ltr"] .hp-why-grid { direction: rtl !important; } .hp-app-modern { position: relative; padding: 100px 0; background: #030d26; overflow: hidden; color: #fff; } .hap-bg { position: absolute; inset: -20%; filter: blur(90px); opacity: .75; pointer-events: none; } .hap-bg i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; } .hap-m1 { width: 45%; aspect-ratio: 1; background: #1152ff; left: 8%; top: 10%; animation: hapM1 18s ease-in-out infinite; } .hap-m2 { width: 40%; aspect-ratio: 1; background: #00d4ff; right: 8%; top: 15%; animation: hapM2 22s ease-in-out infinite; } .hap-m3 { width: 38%; aspect-ratio: 1; background: #2b7bff; left: 35%; bottom: -10%; animation: hapM3 26s ease-in-out infinite; } @keyframes hapM1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8%,10%,0) scale(1.15); } } @keyframes hapM2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-9%,7%,0) scale(.9); } } @keyframes hapM3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(7%,-8%,0) scale(1.18); } } .hp-app-modern::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(3,13,38,0) 0%, rgba(2,6,20,.65) 100%); pointer-events: none; } .hap-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .hap-particles i { position: absolute; color: rgba(255,255,255,.1); animation: hapFloat 8s ease-in-out infinite; } .hap-particles i:nth-child(1) { top: 15%; left: 5%; font-size: 40px; animation-delay: 0s; } .hap-particles i:nth-child(2) { top: 25%; right: 8%; font-size: 32px; animation-delay: 1.5s; } .hap-particles i:nth-child(3) { bottom: 20%; left: 12%; font-size: 28px; animation-delay: 3s; } .hap-particles i:nth-child(4) { bottom: 30%; right: 5%; font-size: 36px; animation-delay: 4.5s; } .hap-particles i:nth-child(5) { top: 50%; left: 3%; font-size: 24px; animation-delay: 2s; } .hap-particles i:nth-child(6) { top: 60%; right: 3%; font-size: 30px; animation-delay: 6s; } @keyframes hapFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-25px) rotate(15deg); } } .hap-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .hap-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; } .hap-text { color: #fff; animation: hapFadeUp 1s ease-out; } @keyframes hapFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hap-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(34,211,238,.15); border: 1px solid rgba(34,211,238,.3); color: #22d3ee; padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 700; margin-bottom: 22px; } .hap-title { font-size: clamp(26px, 4vw, 44px); font-weight: 900; line-height: 1.35; margin: 0 0 18px; color: #fff; letter-spacing: -.5px; } .hap-grad { background: linear-gradient(135deg, #60a5fa, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hap-desc { font-size: clamp(14px, 2vw, 17px); line-height: 1.9; color: #cbd5e1; margin: 0 0 30px; max-width: 540px; } .hap-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } .hap-feature { display: flex; align-items: center; gap: 14px; animation: hapFadeUp .6s ease-out both; } .hap-feature:nth-child(1) { animation-delay: .1s; } .hap-feature:nth-child(2) { animation-delay: .2s; } .hap-feature:nth-child(3) { animation-delay: .3s; } .hap-feature-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: rgba(34,211,238,.15); border: 1px solid rgba(34,211,238,.25); color: #22d3ee; display: flex; align-items: center; justify-content: center; font-size: 18px; } .hap-feature strong { display: block; font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 3px; } .hap-feature span { display: block; font-size: 13px; color: #94a3b8; } .hap-actions { display: flex; gap: 12px; flex-wrap: wrap; } .hap-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 32px; border-radius: 14px; font-size: 15px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; transition: all .3s cubic-bezier(.4,0,.2,1); overflow: hidden; } .hap-btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 15px 35px -10px rgba(37,99,235,.55); } .hap-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 25px 50px -12px rgba(37,99,235,.7); } .hap-btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); } .hap-btn-ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-3px); } .hap-btn-pulse { position: absolute; inset: 0; border-radius: 14px; border: 2px solid #60a5fa; animation: hapPulse 2.2s ease-out infinite; pointer-events: none; } @keyframes hapPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } } .hap-mockup { position: relative; display: flex; justify-content: center; align-items: center; min-height: 500px; animation: hapFadeUp 1.2s ease-out .3s both; } .hap-phone { position: relative; width: 260px; height: 520px; background: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 38px; border: 8px solid #334155; box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 2px rgba(148,163,184,.15); animation: hapPhoneFloat 4s ease-in-out infinite; z-index: 2; } @keyframes hapPhoneFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(3deg); } } .hap-phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 100px; height: 6px; background: #475569; border-radius: 10px; z-index: 3; } .hap-phone-screen { position: absolute; inset: 28px 12px 12px; background: linear-gradient(150deg, #2563eb, #06b6d4); border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 20px; } .hap-phone-screen i { font-size: 68px; margin-bottom: 20px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.3)); animation: hapIconPulse 3s ease-in-out infinite; } @keyframes hapIconPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } .hap-phone-screen span { font-size: 17px; font-weight: 800; margin-bottom: 6px; } .hap-phone-screen small { font-size: 12px; opacity: .8; } .hap-phone-glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.4), transparent 70%); z-index: -1; animation: hapGlow 4s ease-in-out infinite; } @keyframes hapGlow { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .hap-float { position: absolute; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); padding: 10px 16px; border-radius: 50px; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 12px 30px -8px rgba(0,0,0,.4); z-index: 3; } .hap-float i { color: #22d3ee; font-size: 14px; } .hap-float-1 { top: 15%; right: -10px; animation: hapFloatLabel 5s ease-in-out infinite; } .hap-float-2 { top: 45%; left: -20px; animation: hapFloatLabel 6s ease-in-out infinite reverse; } .hap-float-3 { bottom: 15%; right: -5px; animation: hapFloatLabel 5.5s ease-in-out infinite; } @keyframes hapFloatLabel { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (min-width: 1200px) { .hp-app-modern { padding: 120px 0; } .hap-phone { width: 300px; height: 600px; } } @media (max-width: 968px) { .hap-grid { grid-template-columns: 1fr; gap: 50px; text-align: center; } .hap-text { text-align: center; } .hap-desc { margin-left: auto; margin-right: auto; } .hap-features { align-items: center; } .hap-feature { justify-content: center; } .hap-actions { justify-content: center; } .hap-mockup { order: -1; min-height: 420px; } .hap-phone { width: 220px; height: 440px; } .hap-float { font-size: 12px; padding: 8px 14px; } .hap-float-1 { right: 20px; } .hap-float-2 { left: 10px; } .hap-float-3 { right: 20px; } } @media (max-width: 768px) { .hp-app-modern { padding: 60px 0; } .hap-particles i { display: none; } .hap-particles i:nth-child(1) { display: block; top: 8%; left: 4%; font-size: 28px; } .hap-particles i:nth-child(2) { display: block; top: 12%; right: 4%; font-size: 24px; } .hap-title { font-size: 24px; } .hap-desc { font-size: 14px; line-height: 1.8; } .hap-badge { font-size: 12px; padding: 6px 14px; margin-bottom: 18px; } .hap-features { gap: 10px; margin-bottom: 24px; } .hap-feature-icon { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; } .hap-feature strong { font-size: 14px; } .hap-feature span { font-size: 12px; } .hap-actions { flex-direction: column; width: 100%; } .hap-btn { width: 100%; padding: 14px 24px; font-size: 14px; } .hap-mockup { min-height: 360px; } .hap-phone { width: 180px; height: 360px; border-width: 6px; border-radius: 30px; } .hap-phone-notch { width: 70px; height: 5px; top: 10px; } .hap-phone-screen { inset: 22px 10px 10px; border-radius: 22px; } .hap-phone-screen i { font-size: 48px; margin-bottom: 12px; } .hap-phone-screen span { font-size: 14px; } .hap-phone-screen small { font-size: 11px; } .hap-float { font-size: 11px; padding: 6px 12px; gap: 6px; } .hap-float-1 { top: 8%; right: 0; } .hap-float-2 { top: 45%; left: -5px; } .hap-float-3 { bottom: 8%; right: 0; } } @media (max-width: 480px) { .hap-title { font-size: 22px; } .hap-phone { width: 160px; height: 320px; } .hap-float { font-size: 10px; padding: 5px 10px; } } 
 .site-header { position: sticky !important; top: 0 !important; z-index: 200 !important; background: rgba(255,255,255,.94) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(226,232,240,.7) !important; box-shadow: 0 1px 3px rgba(15,23,42,.04) !important; } body.dark-mode .site-header { background: rgba(15,23,42,.94) !important; border-bottom-color: rgba(51,65,85,.6) !important; } .header-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; height: 64px !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 16px !important; box-sizing: border-box !important; } .site-header .logo { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 17px !important; font-weight: 900 !important; color: #2563eb !important; text-decoration: none !important; flex-shrink: 0 !important; letter-spacing: -.4px !important; } .site-header .logo i { font-size: 20px !important; background: linear-gradient(135deg,#2563eb,#7c3aed); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hamburger { display: block !important; width: 42px !important; height: 42px !important; border-radius: 12px !important; background: rgba(37,99,235,.08) !important; border: 1px solid rgba(37,99,235,.12) !important; cursor: pointer !important; padding: 0 !important; position: relative !important; flex-shrink: 0 !important; transition: all .25s ease !important; } .hamburger:hover { background: rgba(37,99,235,.15) !important; } .hamburger span { position: absolute !important; right: 11px !important; width: 20px !important; height: 2px !important; background: #2563eb !important; border-radius: 2px !important; transition: all .3s cubic-bezier(.4,0,.2,1) !important; display: block !important; } .hamburger span:nth-child(1) { top: 14px !important; } .hamburger span:nth-child(2) { top: 20px !important; width: 14px !important; } .hamburger span:nth-child(3) { top: 26px !important; } .hamburger.active span:nth-child(1) { top: 20px !important; transform: rotate(45deg) !important; } .hamburger.active span:nth-child(2) { opacity: 0 !important; } .hamburger.active span:nth-child(3) { top: 20px !important; transform: rotate(-45deg) !important; } .main-nav { position: fixed !important; top: 64px !important; right: 0 !important; left: 0 !important; bottom: 0 !important; width: 100% !important; height: calc(100vh - 64px) !important; max-width: 480px !important; background: #f8fafc !important; z-index: 998 !important; padding: 0 !important; margin: 0 0 0 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; transform: translateX(100%) !important; visibility: hidden !important; opacity: 0 !important; display: block !important; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s, opacity .28s ease !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; } .main-nav.open { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s, opacity .28s ease !important; box-shadow: -20px 0 60px rgba(15,23,42,.15) !important; } body.dark-mode .main-nav { background: #0f172a !important; } .main-nav > ul { display: block !important; padding: 16px 14px 28px !important; margin: 0 !important; list-style: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .nav-account-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; padding: 0 !important; margin: 0 0 20px 0 !important; border: none !important; border-left: none !important; background: transparent !important; box-shadow: none !important; order: -100 !important; width: 100% !important; list-style: none !important; } .nav-account-row > a.nav-wallet-btn { grid-column: 1 / -1 !important; display: block !important; padding: 18px 20px 16px !important; margin: 0 !important; border-radius: 18px !important; background: linear-gradient(135deg,#10b981 0%,#059669 55%,#047857 100%) !important; color: #fff !important; box-shadow: 0 12px 30px -10px rgba(16,185,129,.5) !important; border: none !important; position: relative !important; overflow: hidden !important; text-align: right !important; box-sizing: border-box !important; width: 100% !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; transform: none !important; min-height: auto !important; text-decoration: none !important; } .nav-account-row > a.nav-wallet-btn::before { content: "" !important; position: absolute !important; top: -40% !important; right: -30% !important; width: 160% !important; height: 180% !important; background: radial-gradient(circle at 75% 25%,rgba(255,255,255,.22),transparent 45%) !important; pointer-events: none !important; } .nav-account-row > a.nav-wallet-btn > i { display: none !important; } .nav-account-row > a.nav-wallet-btn .nwb-label { display: block !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: rgba(255,255,255,.8) !important; margin: 0 0 6px 0 !important; padding: 0 !important; position: relative !important; z-index: 1 !important; order: 1 !important; text-align: right !important; } .nav-account-row > a.nav-wallet-btn .nwb-badge { display: inline-block !important; background: transparent !important; border: none !important; color: #fff !important; font-size: 26px !important; font-weight: 900 !important; padding: 0 !important; border-radius: 0 !important; margin: 0 !important; letter-spacing: -.5px !important; line-height: 1 !important; text-shadow: 0 2px 10px rgba(0,0,0,.18) !important; direction: ltr !important; position: relative !important; z-index: 1 !important; order: 0 !important; } .nav-account-row > a.nav-wallet-btn .nwb-badge::after { content: " تومان" !important; font-size: 12px !important; font-weight: 600 !important; opacity: .75 !important; margin-right: 4px !important; letter-spacing: 0 !important; } .nav-account-row > a.btn-nav, .nav-account-row > a.nav-logout-btn, .nav-account-row > a.nav-login-btn, .nav-account-row > a.dark-toggle-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 12px 4px !important; min-height: 84px !important; border-radius: 14px !important; font-size: 11px !important; font-weight: 700 !important; background: #fff !important; color: #0f172a !important; border: 1px solid rgba(226,232,240,.85) !important; box-shadow: 0 2px 6px -3px rgba(15,23,42,.06) !important; margin: 0 !important; box-sizing: border-box !important; text-decoration: none !important; white-space: nowrap !important; line-height: 1.2 !important; width: auto !important; flex: none !important; transform: none !important; } .nav-account-row > a.btn-nav > i, .nav-account-row > a.nav-logout-btn > i, .nav-account-row > a.nav-login-btn > i, .nav-account-row > a.dark-toggle-btn > i { font-size: 17px !important; width: 34px !important; height: 34px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .nav-account-row > a.btn-nav > i { background: rgba(37,99,235,.12) !important; color: #2563eb !important; } .nav-account-row > a.nav-logout-btn > i { background: rgba(239,68,68,.12) !important; color: #dc2626 !important; } .nav-account-row > a.nav-login-btn > i { background: rgba(37,99,235,.12) !important; color: #2563eb !important; } .nav-account-row > a.dark-toggle-btn > i { background: rgba(139,92,246,.12) !important; color: #8b5cf6 !important; } .nav-account-row > a.dark-toggle-btn::after { content: "حالت شب" !important; display: block !important; font-size: 11px !important; font-weight: 700 !important; color: #0f172a !important; } .nav-account-row > a.dark-toggle-btn > span, .nav-account-row > a.dark-toggle-btn > .nwb-label { display: none !important; } body.dark-mode .nav-account-row > a.btn-nav, body.dark-mode .nav-account-row > a.nav-logout-btn, body.dark-mode .nav-account-row > a.nav-login-btn, body.dark-mode .nav-account-row > a.dark-toggle-btn { background: #1e293b !important; border-color: rgba(51,65,85,.7) !important; color: #e2e8f0 !important; } body.dark-mode .nav-account-row > a.dark-toggle-btn::after { color: #e2e8f0 !important; } .main-nav > ul > li { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 0 6px 0 !important; border: none !important; list-style: none !important; } .main-nav > ul > li > a:not(.nav-wallet-btn):not(.btn-nav):not(.nav-logout-btn):not(.nav-login-btn):not(.dark-toggle-btn) { display: flex !important; align-items: center !important; padding: 14px 18px !important; font-size: 14.5px !important; font-weight: 700 !important; color: #0f172a !important; background: #fff !important; border: 1px solid rgba(226,232,240,.85) !important; border-radius: 13px !important; box-shadow: 0 1px 4px -2px rgba(15,23,42,.05) !important; text-decoration: none !important; position: relative !important; min-height: 52px !important; box-sizing: border-box !important; } .main-nav > ul > li > a:not(.nav-wallet-btn):not(.btn-nav):not(.nav-logout-btn):not(.nav-login-btn):not(.dark-toggle-btn)::before { content: "" !important; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: linear-gradient(135deg,#2563eb,#7c3aed) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important; } body.dark-mode .main-nav > ul > li > a:not(.nav-wallet-btn):not(.btn-nav):not(.nav-logout-btn):not(.nav-login-btn):not(.dark-toggle-btn) { background: #1e293b !important; border-color: rgba(51,65,85,.7) !important; color: #e2e8f0 !important; } .main-nav.open > ul > li { animation: mni .3s cubic-bezier(.34,1.2,.64,1) both; } .main-nav.open > ul > li:nth-child(1) { animation-delay: .05s; } .main-nav.open > ul > li:nth-child(2) { animation-delay: .09s; } .main-nav.open > ul > li:nth-child(3) { animation-delay: .13s; } .main-nav.open > ul > li:nth-child(4) { animation-delay: .17s; } .main-nav.open > ul > li:nth-child(5) { animation-delay: .21s; } @keyframes mni { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .main-nav::-webkit-scrollbar { width: 5px; } .main-nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 10px; }
 .bp-wrapper { position: relative; width: 100%; margin: 24px 0; border-radius: 14px; overflow: hidden; background: #000; border: 2px solid #2563eb; box-shadow: 0 12px 40px rgba(37, 99, 235, 0.25); } .bp-wrapper.bp-has-thumb { padding-bottom: 56.25%; height: 0; } .bp-wrapper video { display: block; width: 100%; height: auto; background: #000; } .bp-wrapper.bp-has-thumb video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .bp-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0f172a, #1e3a8a); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s; } .bp-poster.bp-hidden { opacity: 0; pointer-events: none; } .bp-poster-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0.85; } .bp-poster-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(15,23,42,0.4), rgba(15,23,42,0.7)); z-index: 1; } .bp-play-btn { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 50%; background: rgba(37, 99, 235, 0.95); border: 3px solid rgba(255, 255, 255, 0.95); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 0 10px rgba(37, 99, 235, 0.15); transition: all 0.3s; } .bp-play-btn:hover { transform: scale(1.1); background: #2563eb; } .bp-play-btn svg { width: 36px; height: 36px; fill: #fff; margin-left: 4px; } .bp-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 16px 14px; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); z-index: 5; transition: opacity 0.3s, transform 0.3s; } .bp-wrapper.bp-idle .bp-controls { opacity: 0; transform: translateY(20px); pointer-events: none; } .bp-progress { position: relative; width: 100%; height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; cursor: pointer; margin-bottom: 12px; direction: ltr; } .bp-progress:hover { height: 8px; } .bp-progress-buffered { position: absolute; top: 0; left: 0; height: 100%; background: rgba(255,255,255,0.35); border-radius: 3px; } .bp-progress-current { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 3px; box-shadow: 0 0 10px rgba(59,130,246,0.8); } .bp-buttons { display: flex; align-items: center; gap: 4px; direction: ltr; } .bp-btn { background: transparent; border: 0; color: #fff; cursor: pointer; padding: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } .bp-btn:hover { background: rgba(59,130,246,0.3); } .bp-btn svg { width: 22px; height: 22px; fill: #fff; pointer-events: none; } .bp-time { font-size: 13px; font-weight: 700; direction: ltr; margin: 0 10px; color: #fff; font-variant-numeric: tabular-nums; } .bp-spacer { flex: 1; } .bp-wrapper:fullscreen { border-radius: 0; border: none; padding-bottom: 0; } .bp-wrapper:fullscreen video { position: relative; width: 100vw; height: 100vh; object-fit: contain; } .bp-wrapper .bp-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; width: 64px; height: 64px; border-radius: 50%; border: 4px solid rgba(59, 130, 246, 0.2); border-top-color: #3b82f6; animation: bp-spin 0.8s linear infinite; display: none; pointer-events: none; box-shadow: 0 0 30px rgba(59, 130, 246, 0.4); } .bp-wrapper .bp-loading.bp-show { display: block; } @keyframes bp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .bp-wrapper.bp-waiting .bp-controls { opacity: 0.5; } .bp-settings-menu { position: fixed !important; background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(15px); border: 1px solid rgba(59, 130, 246, 0.5); border-radius: 12px; padding: 12px; min-width: 260px; display: none; z-index: 999999; box-shadow: 0 20px 50px rgba(0,0,0,0.9); } .bp-settings-menu.bp-show { display: flex !important; gap: 16px; } .bp-settings-column { flex: 1; min-width: 0; } .bp-settings-title { color: #60a5fa; font-size: 10.5px; font-weight: 800; padding: 0 0 8px; text-align: center; border-bottom: 1px solid rgba(59,130,246,0.2); margin-bottom: 8px; } .bp-settings-item { color: #e2e8f0; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; text-align: center; margin-bottom: 2px; } .bp-settings-item:hover { background: rgba(59, 130, 246, 0.3); } .bp-settings-item.bp-active { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; font-weight: 700; } .bp-wrapper.bp-idle .bp-wrapper.bp-fullscreen @media (max-width: 640px) { .bp-play-btn { width: 64px; height: 64px; } .bp-play-btn svg { width: 28px; height: 28px; } .bp-btn { padding: 5px; } .bp-btn svg { width: 18px; height: 18px; } .bp-time { font-size: 11px; margin: 0 4px; } .bp-controls { padding: 25px 8px 8px; } .bp-loading { width: 48px; height: 48px; } } @media (max-width: 640px) { } @media (min-width: 641px) { } #bp-scroll-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(59, 130, 246, 0.5); border-radius: 14px; padding: 16px 20px; color: #f1f5f9; font-size: 13px; z-index: 2147483647; box-shadow: 0 25px 60px rgba(0,0,0,0.9); display: flex; align-items: flex-start; gap: 14px; max-width: 460px; width: calc(100% - 32px); box-sizing: border-box; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s; opacity: 0; pointer-events: none; font-family: Tahoma, Arial, sans-serif; direction: rtl; } #bp-scroll-toast.bp-show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } #bp-scroll-toast .bp-ts-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(59, 130, 246, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; color: #60a5fa; } #bp-scroll-toast .bp-ts-body { flex: 1; min-width: 0; } #bp-scroll-toast .bp-ts-title { font-weight: 800; font-size: 14px; margin-bottom: 4px; line-height: 1.4; } #bp-scroll-toast .bp-ts-sub { font-size: 12px; color: #94a3b8; margin-bottom: 12px; line-height: 1.4; } #bp-scroll-toast .bp-ts-actions { display: flex; gap: 8px; } #bp-scroll-toast .bp-ts-btn { padding: 8px 18px; border-radius: 8px; border: 0; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; transition: all 0.2s; } #bp-scroll-toast .bp-ts-btn-yes { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } #bp-scroll-toast .bp-ts-btn-no { background: rgba(255,255,255,0.08); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.1); } #bp-scroll-toast .bp-ts-close { background: transparent; border: 0; color: #64748b; cursor: pointer; font-size: 20px; line-height: 1; padding: 0; width: 24px; height: 24px; flex-shrink: 0; } @media (max-width: 640px) { #bp-scroll-toast { bottom: 12px; padding: 14px 16px; gap: 12px; } #bp-scroll-toast .bp-ts-title { font-size: 13px; } #bp-scroll-toast .bp-ts-icon { width: 36px; height: 36px; font-size: 18px; } } @media (max-width: 640px) { .bp-settings-menu { min-width: 200px !important; max-width: 240px !important; padding: 8px !important; gap: 8px !important; border-radius: 10px !important; } .bp-settings-menu .bp-settings-column { flex: 1; min-width: 0; } .bp-settings-menu .bp-settings-title { font-size: 9px !important; padding: 0 0 5px !important; margin-bottom: 5px !important; } .bp-settings-menu .bp-settings-item { font-size: 10px !important; padding: 5px 6px !important; margin-bottom: 1px !important; } } @media (min-width: 641px) { .bp-settings-menu { min-width: 280px !important; padding: 12px !important; gap: 14px !important; } } 65% { transform: translateX(4px) scale(1.05) rotate(-2deg); } 70% { transform: translateX(-3px) scale(1.1) rotate(2deg); color: #bfdbfe; text-shadow: 0 0 12px rgba(96, 165, 250, 0.9), 0 0 24px rgba(59, 130, 246, 0.5); } 75% { transform: translateX(2px) scale(1.08) rotate(-1deg); color: #dbeafe; text-shadow: 0 0 16px rgba(147, 197, 253, 1), 0 0 32px rgba(59, 130, 246, 0.8); } 80% { transform: translateX(0) scale(1) rotate(0deg); color: #93c5fd; text-shadow: 0 0 6px rgba(96, 165, 250, 0.5); } 85%, 100% { transform: translateX(0) scale(1) rotate(0deg); color: #93c5fd; text-shadow: 0 0 0 transparent; } } 60% { opacity: 1; transform: translateY(0) scale(1); } 75% { opacity: 0.8; transform: translateY(15px) scale(0.8); } 85%, 100% { opacity: 0; transform: translateY(25px) scale(0.3); } } 65% { opacity: 0.8; } 75% { opacity: 1; } 85%, 100% { opacity: 0; } } 25% { transform: scale(1.2) rotate(-8deg); } 50% { transform: scale(0.9) rotate(8deg); } 75% { transform: scale(1.1) rotate(-4deg); } } .bp-wrapper.bp-fullscreen @media (max-width: 640px) { } .bp-watermark { position: absolute; top: 12px; left: 12px; z-index: 7; padding: 6px 14px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(96, 165, 250, 0.35); border-radius: 20px; color: #93c5fd; font-size: 11px; font-weight: 700; font-family: "Tahoma", Arial, sans-serif; letter-spacing: 0.5px; pointer-events: none; user-select: none; direction: ltr; overflow: hidden; animation: bpPulse 5s ease-in-out infinite; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } .bp-watermark::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(147, 197, 253, 0.6), rgba(255, 255, 255, 0.9), rgba(147, 197, 253, 0.6), transparent ); animation: bpShine 5s ease-in-out infinite; pointer-events: none; } @keyframes bpPulse { 0%, 100% { transform: scale(1); border-color: rgba(96, 165, 250, 0.35); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } 50% { transform: scale(1.03); border-color: rgba(96, 165, 250, 0.6); box-shadow: 0 2px 15px rgba(59, 130, 246, 0.4); } } @keyframes bpShine { 0%, 70% { left: -100%; } 85% { left: 100%; } 100% { left: 100%; } } .bp-wrapper.bp-fullscreen .bp-watermark { top: 20px; left: 20px; font-size: 13px; padding: 8px 16px; } @media (max-width: 640px) { .bp-controls { padding: 30px 8px 8px !important; } .bp-buttons { gap: 2px !important; } .bp-btn { padding: 5px !important; } .bp-btn svg { width: 20px !important; height: 20px !important; } .bp-time { font-size: 11px !important; margin: 0 4px !important; } .bp-progress { height: 5px !important; margin-bottom: 8px !important; } } .bp-buttons { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; } .bp-time { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; } @media (max-width: 640px) { .bp-wrapper .bp-back, .bp-wrapper .bp-forward { display: none !important; } .bp-wrapper .bp-mute { display: flex !important; } } @media (min-width: 641px) { } @media (max-width: 640px) { } @media (min-width: 641px) { .bp-tap-zone { display: none !important; } } @media (max-width: 640px) { .bp-tap-zone { width: 60px; height: 60px; } .bp-tap-indicator { font-size: 8px; } .bp-tap-indicator svg { width: 14px; height: 14px; } .bp-tap-zone-left { left: 10%; } .bp-tap-zone-right { right: 10%; } } .bp-tap-zone { position: absolute; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; z-index: 6; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .bp-tap-zone-left { left: 15%; } .bp-tap-zone-right { right: 15%; } .bp-tap-indicator { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; opacity: 0.4; transform: scale(0.9); transition: opacity 0.2s, transform 0.2s; pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,0.9); font-family: Tahoma, Arial; font-size: 9px; font-weight: 800; direction: ltr; } .bp-tap-indicator svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9)); } .bp-tap-zone:active .bp-tap-indicator, .bp-tap-zone:hover .bp-tap-indicator { opacity: 1; transform: scale(1.1); } .bp-tap-indicator.bp-show { opacity: 1; transform: scale(1.2); animation: bpTapPulse 0.6s ease-out; } @keyframes bpTapPulse { 0% { transform: scale(0.9); opacity: 0.4; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @media (min-width: 641px) { .bp-tap-zone { display: none !important; } } @media (max-width: 640px) { .bp-tap-zone { width: 60px; height: 60px; } .bp-tap-indicator { font-size: 8px; opacity: 0.35; } .bp-tap-indicator svg { width: 14px; height: 14px; } .bp-tap-zone-left { left: 10%; } .bp-tap-zone-right { right: 10%; } } .bp-wrapper.bp-idle .bp-tap-indicator { opacity: 0.15; } .bp-wrapper:not(.bp-idle) .bp-tap-indicator { opacity: 0.5; } @media (max-width: 768px) { } .bp-watermark @media (max-width: 768px) { .bp-watermark } .bp-watermark @media (max-width: 768px) { .bp-watermark } .bp-watermark @media (max-width: 768px) { .bp-watermark } .bp-watermark.bp-watermark-modern { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); font-family: "Arial Black", "Segoe UI Black", "Helvetica Black", Tahoma, sans-serif !important; font-size: 3rem !important; font-weight: 900 !important; letter-spacing: 3px !important; background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #1e40af 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; padding: 0 !important; margin: 0 !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; filter: drop-shadow(0 0 8px rgba(96,165,250,.7)) drop-shadow(2px 2px 0 #000) drop-shadow(-2px -2px 0 #000) drop-shadow(2px -2px 0 #000) drop-shadow(-2px 2px 0 #000) !important; opacity: 0; z-index: 100 !important; pointer-events: none !important; white-space: nowrap; direction: ltr; text-align: center; transition: opacity .3s ease; } .bp-watermark.bp-watermark-modern.bp-show { opacity: 1; animation: bpWmFadeIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, bpWmPulse 2.5s ease-in-out 0.9s infinite; } .bp-watermark.bp-watermark-modern.bp-hide { opacity: 0; animation: bpWmFadeOut 0.6s ease forwards; } @keyframes bpWmFadeIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(2deg); } 80% { transform: translate(-50%, -50%) scale(0.95) rotate(-1deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } } @keyframes bpWmPulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(96,165,250,.7)) drop-shadow(2px 2px 0 #000) drop-shadow(-2px -2px 0 #000) drop-shadow(2px -2px 0 #000) drop-shadow(-2px 2px 0 #000); transform: translate(-50%, -50%) scale(1); } 50% { filter: drop-shadow(0 0 20px rgba(96,165,250,1)) drop-shadow(0 0 35px rgba(59,130,246,.9)) drop-shadow(2px 2px 0 #000) drop-shadow(-2px -2px 0 #000) drop-shadow(2px -2px 0 #000) drop-shadow(-2px 2px 0 #000); transform: translate(-50%, -50%) scale(1.05); } } @keyframes bpWmFadeOut { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } } @media (max-width: 768px) { .bp-watermark.bp-watermark-modern { font-size: 0.55rem !important; letter-spacing: 0 !important; padding: 0 !important; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) !important; } .bp-watermark { font-size: 6px !important; top: 8px !important; left: 8px !important; padding: 0 4px !important; } } .bp-settings [data-quality], .bp-settings .bp-quality-list, .bp-settings .bp-quality-item, .bp-settings .bp-quality-label, [data-action="quality"], .bp-settings-item[data-quality] { display: none !important; } 
 .bn-section{padding:40px 16px;background:var(--primary-dark, #0b3c8a);position:relative;overflow:hidden;direction:rtl;} .bn-container{max-width:1100px;margin:0 auto;position:relative;z-index:1;} .bn-card{position:relative;background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));border:1px solid rgba(255,255,255,0.15);border-radius:22px;padding:32px;backdrop-filter:blur(10px);box-shadow:0 24px 60px -20px rgba(0,0,0,0.4);overflow:hidden;} .bn-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.3;pointer-events:none;} .bn-orb-1{width:220px;height:220px;background:var(--accent, #3b82f6);top:-80px;right:-60px;animation:bnFloat 8s ease-in-out infinite;} .bn-orb-2{width:200px;height:200px;background:#60a5fa;bottom:-80px;left:-60px;animation:bnFloat 10s ease-in-out infinite reverse;} @keyframes bnFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}} .bn-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(circle at center,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(circle at center,black 20%,transparent 70%);pointer-events:none;} .bn-head{text-align:center;margin-bottom:24px;position:relative;z-index:2;} .bn-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);color:#fff;padding:5px 14px;border-radius:999px;font-size:11px;font-weight:600;margin-bottom:12px;} .bn-pulse{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:bnPulse 1.6s infinite;} @keyframes bnPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} .bn-title{font-size:22px;font-weight:800;color:#fff;margin:0 0 8px;line-height:1.5;} .bn-hi{color:#8fd3ff;display:inline-block;} .bn-sub{font-size:14px;color:#bfdbfe;margin:0;line-height:1.7;} .bn-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;position:relative;z-index:2;} .bn-col{display:flex;flex-direction:column;} .bn-div{width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.2),transparent);} .bn-col-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;} .bn-col-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 42px;} .bn-ic-chat{background:rgba(143,211,255,.2);color:#8fd3ff;} .bn-ic-app{background:rgba(74,222,128,.2);color:#4ade80;} .bn-col-title{font-weight:800;font-size:15px;color:#fff;} .bn-col-sub{font-size:12px;color:#bfdbfe;margin-top:2px;} .bn-feats{list-style:none;padding:0;margin:0 0 20px;flex-grow:1;} .bn-feats li{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:#e2e8f0;} .bn-feats i{color:#4ade80;font-size:12px;} .bn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;border:none;cursor:pointer;width:100%;} .bn-btn-chat{background:var(--accent, #3b82f6);color:#fff;} .bn-btn-chat:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(59,130,246,.6);} .bn-btn-app{background:#22c55e;color:#fff;} .bn-btn-app:hover{background:#16a34a;transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(34,197,94,.6);} .bn-section::before{content:"";position:absolute;top:0;right:0;left:0;height:4px;background:linear-gradient(90deg,var(--accent),#8fd3ff,var(--accent));z-index:10;} @media (max-width:800px){ .bn-section{padding:30px 12px;} .bn-card{padding:22px 18px;} .bn-cols{grid-template-columns:1fr;gap:22px;} .bn-div{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);} .bn-title{font-size:17px;} .bn-col-icon{width:36px;height:36px;font-size:15px;flex:0 0 36px;} } .bn-section { padding: 24px 12px; } .bn-card { padding: 24px 18px; border-radius: 16px; } .bn-head { margin-bottom: 16px; } .bn-title { font-size: 18px; margin-bottom: 6px; } .bn-sub { font-size: 13px; line-height: 1.5; } .bn-cols { gap: 16px; } .bn-col-head { margin-bottom: 12px; gap: 10px; } .bn-col-icon { width: 36px; height: 36px; font-size: 15px; flex: 0 0 36px; border-radius: 10px; } .bn-col-title { font-size: 14px; } .bn-col-sub { font-size: 11px; } .bn-feats { margin-bottom: 14px; } .bn-feats li { margin-bottom: 6px; font-size: 12px; gap: 6px; } .bn-btn { padding: 10px 16px; font-size: 13px; border-radius: 8px; } .bn-badge { padding: 4px 10px; font-size: 10px; margin-bottom: 8px; } @media (max-width: 800px) { .bn-card { padding: 20px 14px; } .bn-cols { gap: 14px; } .bn-head { margin-bottom: 14px; } .bn-title { font-size: 16px; } .bn-feats li { margin-bottom: 5px; } } .bn-section { padding: 15px 10px !important; } .bn-card { padding: 15px 12px !important; border-radius: 12px !important; } .bn-head { margin-bottom: 10px !important; } .bn-title { font-size: 16px !important; margin-bottom: 5px !important; } .bn-sub { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 10px !important; } .bn-badge { padding: 3px 8px !important; font-size: 9px !important; margin-bottom: 5px !important; } .bn-cols { gap: 10px !important; } .bn-col-head { margin-bottom: 8px !important; gap: 8px !important; } .bn-col-icon { width: 30px !important; height: 30px !important; font-size: 14px !important; flex: 0 0 30px !important; border-radius: 8px !important; } .bn-col-title { font-size: 13px !important; } .bn-col-sub { font-size: 10px !important; } .bn-feats { margin-bottom: 10px !important; padding-right: 0 !important; } .bn-feats li { margin-bottom: 5px !important; font-size: 11px !important; gap: 5px !important; } .bn-btn { padding: 8px 12px !important; font-size: 12px !important; border-radius: 6px !important; } 
 #un-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 999999; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 480px; padding: 0 16px; pointer-events: none; direction: rtl; font-family: "YEKAN WOFF2", "Peyda", Tahoma, sans-serif; } .un-toast { pointer-events: auto; background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.06); display: flex; align-items: flex-start; gap: 14px; position: relative; overflow: hidden; opacity: 0; transform: translateY(-30px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .un-toast.un-show { opacity: 1; transform: translateY(0); } .un-toast.un-hide { opacity: 0; transform: translateY(-30px) scale(0.95); } .un-toast::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; } .un-toast.un-warning::before { background: linear-gradient(180deg, #f59e0b, #d97706); } .un-toast.un-danger::before { background: linear-gradient(180deg, #ef4444, #dc2626); } .un-toast.un-info::before { background: linear-gradient(180deg, #3b82f6, #2563eb); } .un-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; position: relative; } .un-toast.un-warning .un-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.5); } .un-toast.un-danger .un-icon { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.5); } .un-toast.un-info .un-icon { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 8px 20px -6px rgba(59, 130, 246, 0.5); } .un-body { flex: 1; min-width: 0; } .un-title { font-size: 14px; font-weight: 800; color: #0f172a; margin: 0 0 4px; line-height: 1.4; } .un-message { font-size: 12.5px; color: #64748b; margin: 0 0 10px; line-height: 1.6; } .un-actions { display: flex; gap: 8px; align-items: center; } .un-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 0; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.2s; } .un-toast.un-warning .un-action-btn.un-primary { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 4px 12px -4px rgba(245, 158, 11, 0.5); } .un-toast.un-danger .un-action-btn.un-primary { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 4px 12px -4px rgba(239, 68, 68, 0.5); } .un-toast.un-info .un-action-btn.un-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 4px 12px -4px rgba(59, 130, 246, 0.5); } .un-action-btn.un-primary:hover { transform: translateY(-1px); } .un-action-btn.un-dismiss { background: #f1f5f9; color: #64748b; } .un-action-btn.un-dismiss:hover { background: #e2e8f0; color: #334155; } .un-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: #e2e8f0; width: 100%; } .un-progress-fill { height: 100%; background: #94a3b8; width: 100%; animation: unProgress 8s linear forwards; } @keyframes unProgress { from { width: 100%; } to { width: 0%; } } @media (max-width: 480px) { #un-container { top: 12px; padding: 0 12px; } .un-toast { padding: 14px 14px; border-radius: 14px; } .un-icon { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; } .un-title { font-size: 13px; } .un-message { font-size: 12px; } .un-action-btn { padding: 6px 12px; font-size: 11.5px; } } 
.captcha-wrap{margin:16px 0} .captcha-wrap>label{display:block;font-size:13px;font-weight:700;color:#334155;margin-bottom:8px} .captcha-box{display:flex;align-items:center;gap:12px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:14px;padding:12px;transition:all .3s} .captcha-box.error{border-color:#ef4444;background:#fef2f2;animation:cap-shake .4s} @keyframes cap-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} .captcha-img-wrap{position:relative;flex-shrink:0;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #e2e8f0;cursor:pointer} .captcha-img{display:block;width:180px;height:60px;object-fit:cover;transition:opacity .3s} .captcha-img.loading{opacity:.3} .captcha-refresh-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:6px;border:0;background:rgba(37,99,235,.9);color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s} .captcha-img-wrap:hover .captcha-refresh-btn{opacity:1} .captcha-refresh-btn:hover{background:#1e40af;transform:rotate(180deg)} .captcha-input{flex:1;min-width:0;padding:12px 14px;border:1.5px solid #cbd5e1;border-radius:10px;font-family:Consolas,Monaco,monospace;font-size:16px;font-weight:700;color:#1e40af;text-align:center;direction:ltr;outline:none;transition:all .2s;background:#fff;letter-spacing:1px} .captcha-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)} .captcha-input::placeholder{color:#94a3b8;font-weight:400;letter-spacing:0;font-family:Tahoma,sans-serif} .captcha-error-msg{display:none;color:#dc2626;font-size:12.5px;font-weight:700;margin-top:8px;text-align:center} .captcha-error-msg.show{display:block} .captcha-hp{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important} @media(max-width:480px){.captcha-box{flex-direction:column;align-items:stretch;padding:10px;gap:10px}.captcha-img-wrap{align-self:center}.captcha-img{width:100%;max-width:240px;height:65px}.captcha-input{font-size:15px}}


/* رفع فاصله بین بنر و فوتر */
.bn-wrap, .banner-section, #download-app, .cta-section, footer, .site-footer {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
footer {
    margin-top: -50px !important; /* کشیدن فوتر به سمت بالا */
    position: relative !important;
    z-index: 99 !important;
    padding-top: 60px !important; /* جبران فاصله دکمه‌ها */
}
.bn-wrap, .banner-section, #download-app, .cta-section {
    padding-bottom: 80px !important; /* فضای امن برای دکمه‌های بنر */
}


/* ===== FIX BANNER & FOOTER GAP ===== */
.bn-wrap, .bn-section, #app-banner, section[class*="bn-"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
footer, .site-footer, #site-footer {
    margin-top: 0 !important;
    padding-top: 40px !important;
}
/* حذف فاصله اضافی از main */
main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* حذف پدینگ‌های اضافی از آخرین فرزند main */
main > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}