/*
Theme Name: Over Prod Elementor Starter
Theme URI: https://www.over-prod.com/
Author: Over Prod
Description: Starter WordPress theme designed for Elementor and inspired by the second Over Prod homepage concept.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: over-prod
*/

:root{
  --op-orange:#f4511e;
  --op-orange-2:#ff6a00;
  --op-black:#111111;
  --op-dark:#1a1a1a;
  --op-grey:#f5f5f5;
  --op-text:#171717;
  --op-white:#ffffff;
}
html{scroll-behavior:smooth}
body{margin:0;color:var(--op-text);background:#fff;font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
*{box-sizing:border-box}
.op-orange{color:var(--op-orange)}
.op-btn{
 display:inline-flex;align-items:center;justify-content:center;gap:10px;
 padding:15px 24px;border-radius:3px;background:var(--op-orange);
 color:#fff!important;text-decoration:none;font-weight:700;text-transform:uppercase;
 letter-spacing:.2px;transition:.2s ease;
}
.op-btn:hover{background:var(--op-orange-2);transform:translateY(-2px)}
.op-btn-outline{background:transparent;border:1px solid #222;color:#222!important}
.op-btn-outline:hover{background:#222;color:#fff!important}
.op-section{padding:80px 5.5%}
.op-container{max-width:1180px;margin:auto}
.op-kicker{text-transform:uppercase;color:var(--op-orange);font-size:13px;font-weight:800;letter-spacing:1.5px}
.op-title{font-size:clamp(34px,5vw,64px);line-height:.98;margin:12px 0 20px;font-weight:900;text-transform:uppercase}
.op-subtitle{font-size:18px;line-height:1.6;max-width:650px}
.op-grid{display:grid;gap:18px}
.op-grid-6{grid-template-columns:repeat(6,1fr)}
.op-grid-5{grid-template-columns:repeat(5,1fr)}
.op-card{border:1px solid #e5e5e5;border-radius:6px;padding:28px;background:#fff;min-height:220px}
.op-card h3{font-size:18px;margin:15px 0 10px}
.op-card p{font-size:14px;line-height:1.55;color:#555}
.op-icon{color:var(--op-orange);font-size:32px;font-weight:800}
.op-dark-section{background:#111;color:#fff}
.op-light-section{background:#f7f7f7}
.op-hero{
 min-height:620px;display:flex;align-items:center;position:relative;overflow:hidden;
 background:linear-gradient(90deg,#fff 0%,#fff 45%,rgba(255,255,255,.55) 63%,rgba(255,255,255,0) 100%);
}
.op-hero:after{
 content:"";position:absolute;right:-100px;bottom:-100px;width:420px;height:250px;
 background:linear-gradient(135deg,#ff8a00,#f4511e);transform:skewX(-22deg);z-index:0;
}
.op-hero-inner{position:relative;z-index:2}
.op-hero-media{
 position:absolute;right:0;top:0;width:58%;height:100%;
 background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 35%),#222;
 display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;
 letter-spacing:2px;text-align:center;
}
.op-hero-media span{border:1px dashed rgba(255,255,255,.5);padding:50px}
.op-proof{display:flex;gap:25px;flex-wrap:wrap;margin-top:35px}
.op-proof div{font-size:13px}.op-proof strong{display:block;font-size:17px}
.op-method{display:grid;grid-template-columns:repeat(5,1fr);gap:25px}
.op-method-item{text-align:center}
.op-method-item .num{font-size:30px;color:#ddd;font-weight:900}
.op-method-item h3{font-size:16px;margin:8px 0}
.op-method-item p{font-size:13px;line-height:1.5;color:#555}
.op-portfolio{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.op-project{background:#222;color:#fff;border-radius:5px;overflow:hidden;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}
.op-project-image{height:160px;background:linear-gradient(135deg,#444,#111);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.op-project-caption{padding:14px}
.op-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ddd}
.op-stat{background:#fff;padding:28px;text-align:center}
.op-stat strong{display:block;font-size:34px;color:var(--op-orange)}
.op-cta{background:linear-gradient(120deg,#f4511e,#ff7300);color:#fff;padding:45px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.op-cta h2{font-size:36px;margin:0 0 10px}
.op-cta .op-btn{background:#111}
.op-footer{background:#fff;border-top:1px solid #eee;padding:45px 5.5%}
.op-footer-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.op-footer h4{margin-top:0}
.op-footer ul{list-style:none;padding:0;margin:0;line-height:2}
@media(max-width:1000px){
 .op-grid-6{grid-template-columns:repeat(3,1fr)}
 .op-grid-5,.op-portfolio{grid-template-columns:repeat(2,1fr)}
 .op-method{grid-template-columns:1fr 1fr}
 .op-hero-media{opacity:.25;width:100%}
 .op-stats{grid-template-columns:repeat(2,1fr)}
 .op-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
 .op-section{padding:55px 6%}
 .op-grid-6,.op-grid-5,.op-portfolio,.op-method,.op-stats,.op-footer-grid{grid-template-columns:1fr}
 .op-hero{min-height:650px}
 .op-cta{display:block}
 .op-cta .op-btn{margin-top:20px}
}