/* ===================================================
   ALTIUS SERVICES
   Premium Contractor Theme v2
=================================================== */

:root{

--navy:#0f2942;
--navy-light:#1f4367;
--gold:#c79b38;
--gold-light:#ddb75b;

--white:#ffffff;
--offwhite:#f7f8fa;

--text:#2b2b2b;
--gray:#777;
--border:#e8e8e8;

--shadow:0 20px 60px rgba(0,0,0,.08);

--radius:14px;

--transition:.35s ease;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Montserrat',sans-serif;

background:#fff;

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

.container{

width:min(1200px,92%);

margin:auto;

}

section{

padding:110px 0;

}

h1,h2,h3,h4{

font-weight:700;

line-height:1.15;

}

h1{

font-size:clamp(3rem,7vw,5.4rem);

}

h2{

font-size:clamp(2rem,5vw,3rem);

margin-bottom:20px;

}

h3{

font-size:1.4rem;

margin-bottom:12px;

}

p{

color:#555;

font-size:1.05rem;

}

.section-title{

text-align:center;

max-width:760px;

margin:auto auto 70px;

}

.section-title p{

margin-top:15px;

}

/* ================= NAVIGATION ================= */

header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;

   background:linear-gradient(
180deg,
#d8b862 0%,
#c79b38 45%,
#a9781d 100%
);
 
    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(0,0,0,.15);

    transition:.35s;
}

.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    display:block;
    height:90px;
    width:auto;
    max-width:320px;

    filter:drop-shadow(0 2px 6px rgba(255,255,255,.35));
}

nav{
    display:flex;
    gap:34px;
}

nav a{

    color:#13283b;
    text-decoration:none;
    font-weight:600;
    position:relative;
    transition:.3s;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.3s;
}

nav a:hover{

    color:white;

}

nav a:hover::after{
    width:100%;
}

/* ================= HERO ================= */

.hero{
    position:relative;
    min-height:100vh;
    background:
        linear-gradient(rgba(9,22,36,.70),rgba(9,22,36,.70)),
        url("images/hero.jpg") center center/cover no-repeat;
    display:flex;
    align-items:center;
}

.hero-overlay{
    width:100%;
    padding:180px 0 120px;
}

.hero-content{
    max-width:760px;
    color:#fff;
}

.hero-content h1{
    color:#fff;
    margin-bottom:25px;
    font-size:clamp(3rem,7vw,5.5rem);
    line-height:1.05;
}

.hero-content p{
    color:rgba(255,255,255,.90);
    font-size:1.25rem;
    line-height:1.8;
    margin-bottom:45px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.primary-button{
    display:inline-block;
    background:var(--gold);
    color:#fff;
    text-decoration:none;
    padding:18px 42px;
    border-radius:999px;
    font-weight:700;
    transition:.3s;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.primary-button:hover{
    transform:translateY(-4px);
    background:var(--gold-light);
}

.secondary-button{
    display:inline-block;
    padding:18px 42px;
    border:2px solid #fff;
    color:#fff;
    text-decoration:none;
    border-radius:999px;
    font-weight:700;
    transition:.3s;
}

.secondary-button:hover{
    background:#fff;
    color:var(--navy);
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:70px;
}

.hero-stat{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    border-radius:16px;
    padding:26px;
    text-align:center;
}

.hero-stat h3{
    color:var(--gold);
    font-size:2rem;
    margin-bottom:8px;
}

.hero-stat span{
    color:#fff;
    font-weight:600;
}

/* ===================================
   SERVICES
=================================== */

.services{

background:#fff;

}

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.service-card{

background:#fff;

padding:45px;

border-radius:18px;

box-shadow:0 18px 55px rgba(0,0,0,.08);

transition:.35s;

position:relative;

overflow:hidden;

border:1px solid #ececec;

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

height:5px;

width:100%;

background:linear-gradient(90deg,var(--gold),#e5c76c);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.service-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

background:rgba(199,155,56,.12);

border-radius:16px;

margin-bottom:25px;

}

.service-card h3{

margin-bottom:18px;

color:var(--navy);

}

.service-card p{

line-height:1.8;

}

/* ===================================
   ABOUT
=================================== */

.about{

background:var(--offwhite);

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image img{

border-radius:20px;

box-shadow:0 30px 70px rgba(0,0,0,.15);

width:100%;

}

.about-content h4{

margin:18px 0;

color:var(--gold);

font-size:1.15rem;

letter-spacing:1px;

}

.about-content p{

margin-bottom:24px;

}

/* ===================================
   EXPERIENCE STATS
=================================== */

.experience-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:24px;

margin-top:45px;

}

.experience-grid div{

background:#fff;

padding:28px;

border-radius:16px;

text-align:center;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.3s;

}

.experience-grid div:hover{

transform:translateY(-8px);

}

.experience-grid h3{

font-size:2.4rem;

color:var(--gold);

margin-bottom:8px;

}

.experience-grid span{

font-weight:600;

color:#666;

}

/* ===================================
   FEATURE STRIP
=================================== */

.feature-strip{

background:linear-gradient(135deg,var(--navy),var(--navy-light));

color:#fff;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:45px;

text-align:center;

}

.feature-grid h3{

color:#fff;

margin-bottom:16px;

}

.feature-grid p{

color:rgba(255,255,255,.82);

line-height:1.8;

}

/* ===================================
   PORTFOLIO
=================================== */

.portfolio{

background:#fff;

}

.portfolio-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:30px;

}

.project{

position:relative;

overflow:hidden;

border-radius:18px;

box-shadow:0 20px 55px rgba(0,0,0,.12);

cursor:pointer;

background:#ddd;

aspect-ratio:4/3;

}

.project img{

width:100%;

height:100%;

object-fit:cover;

transition:.55s;

}

.project:hover img{

transform:scale(1.12);

}

.project-overlay{

position:absolute;

inset:0;

background:linear-gradient(to top,
rgba(10,25,40,.92),
rgba(10,25,40,.08));

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:30px;

opacity:0;

transition:.35s;

}

.project:hover .project-overlay{

opacity:1;

}

.project-overlay h3{

color:#fff;

margin-bottom:10px;

font-size:1.5rem;

}

.project-overlay p{

color:rgba(255,255,255,.88);

margin:0;

}

/* ===================================
   COMMERCIAL EXPERIENCE
=================================== */

.experience{

background:var(--offwhite);

}

.center{

text-align:center;

max-width:850px;

margin:auto;

font-size:1.1rem;

}

.brand-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:22px;

margin-top:60px;

}

.brand-grid div{

background:#fff;

padding:24px;

border-radius:14px;

font-weight:700;

text-align:center;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.3s;

}

.brand-grid div:hover{

background:var(--navy);

color:#fff;

transform:translateY(-8px);

}

/* ===================================
   TESTIMONIALS
=================================== */

.testimonials{

background:#fff;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.testimonial{

padding:40px;

border-radius:18px;

background:#fff;

box-shadow:0 18px 50px rgba(0,0,0,.08);

transition:.3s;

font-size:1.05rem;

}

.testimonial:hover{

transform:translateY(-8px);

}

.testimonial strong{

display:block;

margin-top:20px;

color:var(--navy);

}

.testimonial::before{

content:"★★★★★";

display:block;

font-size:1.2rem;

color:var(--gold);

margin-bottom:20px;

letter-spacing:4px;

}

/* ===================================
   CTA
=================================== */

.cta{

background:linear-gradient(135deg,var(--navy),var(--navy-light));

text-align:center;

color:#fff;

}

.cta h2{

color:#fff;

margin-bottom:25px;

}

.cta p{

max-width:760px;

margin:auto auto 40px;

color:rgba(255,255,255,.85);

font-size:1.15rem;

line-height:1.9;

}

.cta .primary-button{

font-size:1.1rem;

padding:20px 52px;

box-shadow:0 20px 60px rgba(0,0,0,.30);

}

/* ===================================
   CONTACT
=================================== */

.contact{

background:#fff;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}

.contact-info{

padding-right:20px;

}

.contact-info h3{

margin-bottom:25px;

color:var(--navy);

}

.contact-info p{

margin-bottom:14px;

}

.contact-form{

background:#fff;

padding:40px;

border-radius:18px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-size:1rem;

font-family:inherit;

transition:.3s;

background:#fff;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

outline:none;

border-color:var(--gold);

box-shadow:0 0 0 4px rgba(199,155,56,.15);

}

.contact-form textarea{

resize:vertical;

min-height:170px;

}

/* ===================================
   SERVICE AREA
=================================== */

.service-area{

background:var(--offwhite);

}

.area-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

gap:18px;

margin-top:40px;

}

.area-grid div{

background:#fff;

padding:18px;

text-align:center;

font-weight:600;

border-radius:12px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

transition:.3s;

}

.area-grid div:hover{

background:var(--navy);

color:#fff;

transform:translateY(-5px);

}

/* ===================================
   FOOTER
=================================== */

footer{

background:#081624;

color:#fff;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

}

footer h3{

margin-bottom:20px;

color:#fff;

}

footer p{

color:rgba(255,255,255,.75);

margin-bottom:10px;

}

footer a{

color:rgba(255,255,255,.75);

text-decoration:none;

display:inline-block;

margin-bottom:10px;

transition:.3s;

}

footer a:hover{

color:var(--gold-light);

}

.copyright{

text-align:center;

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.10);

color:rgba(255,255,255,.55);

font-size:.95rem;

}

/* ===================================
   CONSTRUCTION BANNER
=================================== */

.construction-banner{

    max-width:760px;

    background:rgba(255,255,255,.94);

    padding:40px 45px;

    border-left:8px solid var(--gold);

    border-radius:20px;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

    margin-bottom:60px;

}

.construction-banner h3{

    color:var(--navy);

    font-size:2rem;

    margin-bottom:20px;

}

.construction-banner p{

    color:#444;

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:20px;

}

.construction-banner strong{

    color:var(--navy);

}

/* ===================================
   RESPONSIVE
=================================== */

@media (max-width:992px){

.about-grid,
.contact-grid,
.footer-grid{

grid-template-columns:1fr;

}

.hero-stats{

grid-template-columns:1fr;

}

.feature-grid{

grid-template-columns:1fr;

}

}

@media (max-width:768px){

header{

position:relative;

}

.nav{

flex-direction:column;

gap:20px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

background-attachment:scroll;

}

.hero-overlay{

padding:120px 0 80px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.primary-button,
.secondary-button{

width:100%;

max-width:340px;

text-align:center;

}

.service-grid,
.portfolio-grid,
.testimonial-grid{

grid-template-columns:1fr;

}

section{

padding:80px 0;

}

h1{

font-size:2.8rem;

}

h2{

font-size:2rem;

}

}