/* TOP HOLE SOLUTIONS — premium visual refresh */
:root{--ths-ink:#101827;--ths-navy:#101b32;--ths-red:#ed4548;--ths-gold:#f5b84b;--ths-muted:#64748b}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:Inter,"Open Sans",sans-serif;color:#344054;background:#fff;line-height:1.7}
a{transition:all .25s ease}
#header{background:rgba(12,20,36,.93)!important;backdrop-filter:blur(16px);box-shadow:0 8px 35px rgba(4,12,28,.12);border-bottom:1px solid rgba(255,255,255,.08);padding:10px 0;transition:all .3s}
#header .logo img{max-height:58px;max-width:230px;object-fit:contain}
#navbar a{font-weight:650;letter-spacing:.15px;font-size:13px}
#navbar a:hover,#navbar .active,#navbar li:hover>a{color:var(--ths-gold)!important}
#hero{min-height:100vh;background-image:linear-gradient(115deg,rgba(8,16,31,.96) 0%,rgba(12,25,48,.83) 48%,rgba(13,23,40,.50) 100%),url("../img/hero-bg1.jpg");background-position:center;background-size:cover;isolation:isolate;overflow:hidden;padding:140px 0 85px}
#hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;background-image:radial-gradient(rgba(255,255,255,.5) .7px,transparent .7px);background-size:24px 24px;pointer-events:none}
#hero .container{position:relative}
#hero h1{font-size:clamp(2.7rem,6vw,5.8rem);line-height:1.04;letter-spacing:-2.6px;font-weight:850;color:#fff;max-width:1000px;margin:0 auto 24px;text-shadow:0 8px 30px rgba(0,0,0,.22)}
#hero h1 span{color:var(--ths-gold)}
#hero h2{font-size:clamp(1rem,2vw,1.35rem);font-weight:700;letter-spacing:5px;color:#f8c968;margin-top:25px}
#hero .row.justify-content-center:first-child .col-xl-12{padding:35px 15px}
#hero .icon-box{height:100%;min-height:140px;padding:27px 16px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045));backdrop-filter:blur(12px);box-shadow:0 15px 45px rgba(0,0,0,.12);transition:transform .3s,border-color .3s,background .3s}
#hero .icon-box:hover{transform:translateY(-9px);border-color:rgba(245,184,75,.8);background:rgba(255,255,255,.16)}
#hero .icon-box i{font-size:32px;color:var(--ths-gold);margin-bottom:12px;display:inline-block}
#hero .icon-box h3{font-size:14px;line-height:1.4;font-weight:700}
#hero .icon-box h3 a{color:#fff}
section{padding:88px 0;overflow:hidden}
.section-title{padding-bottom:32px}
.section-title h2{font-size:12px;letter-spacing:3px;font-weight:800;color:var(--ths-red)}
.section-title p{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.2;font-weight:800;letter-spacing:-1px;color:var(--ths-ink)}
#about,#services,#portfolio,#contact,#features{background:#fff}
#about .content h3,#services h3,#contact h3{color:var(--ths-ink);font-weight:800;letter-spacing:-.5px}
#about .content ul i{color:var(--ths-red)}
#services .icon-box,#services .service-item{border-radius:18px;transition:all .3s ease}
#services .icon-box:hover,#services .service-item:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(16,24,40,.10)}
#services .icon-box i{color:var(--ths-red)}
#portfolio .portfolio-item{border-radius:16px;overflow:hidden;box-shadow:0 12px 35px rgba(16,24,40,.09)}
#portfolio .portfolio-item img{transition:transform .6s}
#portfolio .portfolio-item:hover img{transform:scale(1.045)}
#cta{background:linear-gradient(120deg,#101b32,#263c5f)!important}
#cta h3{font-weight:800}
#cta .cta-btn{border-radius:999px;border:1px solid var(--ths-gold);color:var(--ths-gold);font-weight:700;padding:12px 26px}
#cta .cta-btn:hover{background:var(--ths-gold);color:#101827}
#contact .info{border-radius:16px;padding:25px;background:#f8fafc;border:1px solid #edf0f5}
#contact .info i{color:var(--ths-red)}
#contact .php-email-form{padding:28px;border-radius:20px;box-shadow:0 16px 50px rgba(16,24,40,.08);border:1px solid #edf0f5}
#contact input,#contact textarea{border-radius:10px;border:1px solid #dce2ea;padding:12px 15px}
#contact button[type=submit],.btn-primary{border:0;border-radius:999px;background:linear-gradient(135deg,#ed4548,#c92f3b);padding:13px 27px;font-weight:750;box-shadow:0 8px 22px rgba(237,69,72,.23)}
#footer{background:#0c1424;color:#cbd5e1}
#footer .footer-top{background:#101b32;border-bottom:1px solid rgba(255,255,255,.08)}
#footer h4{color:#fff;font-weight:800}
.back-to-top{border-radius:12px;background:var(--ths-red);box-shadow:0 10px 25px rgba(237,69,72,.3)}
@media(max-width:991px){#hero{padding-top:125px;min-height:auto}#hero h1{letter-spacing:-1.2px}#hero h2{letter-spacing:3px}section{padding:65px 0}#header .logo img{max-width:180px;max-height:48px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}