
/*
Theme Name: WebDevHabib Premium
Theme URI: https://webdevhabib.com/
Author: WebDevHabib
Description: Premium CMS portfolio theme for WebDevHabib. Designed for WordPress with editable Projects, Services, Testimonials, Social Posts and site settings.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
*/
:root{--bg:#06070a;--panel:#0c0e13;--text:#f5f7fb;--muted:#969faf;--line:#20242d;--a:#8b5cf6;--b:#d85cff;--green:#52e3a4;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 "DM Sans",system-ui,sans-serif}a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),92%);margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:#07080ce8;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.logo{font:700 20px "Space Grotesk",sans-serif}.logo span{background:linear-gradient(90deg,#7180ff,#d65be8);-webkit-background-clip:text;color:transparent}.nav-menu{display:flex;gap:24px;color:#a8afbd;font-size:14px}.nav-menu a:hover{color:#fff}.cta{padding:10px 16px;border-radius:999px;background:linear-gradient(100deg,#596fff,#c653e8);font-weight:700;font-size:13px}
.hero{min-height:760px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}.eyebrow{display:inline-block;border:1px solid #292e38;background:#0d1015;border-radius:999px;padding:7px 12px;color:#c9cfda;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.hero h1{font:700 clamp(52px,7vw,86px)/.96 "Space Grotesk",sans-serif;letter-spacing:-.055em;margin:22px 0}.gradient{background:linear-gradient(100deg,#fff,#9b88ff,#db63e9);-webkit-background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:18px;max-width:650px}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}.btn{padding:12px 18px;border:1px solid #303641;border-radius:12px;background:#0d1016;font-weight:700}.btn.primary{background:linear-gradient(100deg,#596fff,#c653e8);border:0}.hero-art{height:510px;border-radius:260px 260px 35px 35px;border:1px solid #343946;background:radial-gradient(circle at 50% 35%,#8a63ff38,transparent 35%),linear-gradient(145deg,#151d31,#090b10);display:grid;place-items:center;box-shadow:0 40px 100px #000}.hero-art span{font:700 120px "Space Grotesk";color:#fff0d8}.trust{border-block:1px solid var(--line);padding:25px 0;color:#777f8e}.trust-row{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}.brands{display:flex;gap:35px;flex-wrap:wrap;font:600 17px "Space Grotesk"}
section{padding:105px 0}.section-head{margin-bottom:35px}.kicker{color:#9a86ff;text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:800}.section-head h2{font:700 46px "Space Grotesk";letter-spacing:-.05em;margin:8px 0}.section-head p{color:#818a99;max-width:620px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}.filter{border:1px solid var(--line);background:#0b0d12;color:#929aa8;padding:8px 13px;border-radius:999px;cursor:pointer}.filter.active,.filter:hover{background:#171a23;color:#fff}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.card{grid-column:span 6;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#0c0e13}.card:nth-child(3n){grid-column:span 5}.card:nth-child(4n){grid-column:span 7}.thumb{height:300px;background:linear-gradient(135deg,#1b2140,#a254d9);background-size:cover;background-position:center}.card-body{padding:21px}.card h3{font:600 24px "Space Grotesk";margin:0}.card p{color:#858e9d;font-size:13px}.tag{display:inline-block;margin-top:8px;border:1px solid #2d333e;border-radius:999px;padding:4px 8px;font-size:10px;color:#9ba3b0}
.services,.cases,.testimonials,.socials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.box{border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#0e1118,#090b10);padding:26px}.box h3{font:600 24px "Space Grotesk";margin:12px 0 7px}.box p{color:#858e9d;font-size:14px}.number{color:#8e7dff;font-size:12px}
.quote{min-height:270px}.quote p{font:500 24px/1.4 "Space Grotesk";color:#eef0f6}.quote small{color:#7f8795}
.social{min-height:220px}.social-top{display:flex;justify-content:space-between;color:#a8afbd;font-size:12px}.social h3{font:600 19px "Space Grotesk";margin-top:30px}.social a{color:#a38fff;font-weight:700;font-size:12px}
.contact-box{padding:70px 30px;text-align:center;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 80% 20%,#7754ff22,transparent 30%),#0b0d12}.contact-box h2{font:700 clamp(44px,6vw,75px)/1 "Space Grotesk";max-width:800px;margin:15px auto}.contact-box p{color:#858e9d;max-width:600px;margin:0 auto}
.site-footer{border-top:1px solid var(--line);padding:35px 0;color:#777f8e}.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-links{display:flex;gap:18px}
.single{padding-top:130px}.single .hero-image{height:420px;border-radius:28px;background-size:cover;background-position:center;margin:30px 0}.content{max-width:820px;color:#aeb5c1}.content h2,.content h3{font-family:"Space Grotesk";color:#fff}.content img{max-width:100%;height:auto;border-radius:16px}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:80px}.hero-art{height:400px}.nav-menu{display:none}.grid .card,.card:nth-child(3n),.card:nth-child(4n){grid-column:span 12}.services,.cases,.testimonials,.socials{grid-template-columns:1fr}.section-head h2{font-size:39px}}

/* Elementor Flexbox Container integration */
.elementor .e-con{box-sizing:border-box}.elementor .e-con>.e-con{width:100%}.elementor-page main{min-height:1px}.elementor-full-width-content{width:100%;}
