/* ==============================
BOUSHALL ROOFING
Main Stylesheet
============================== */

/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==============================
GLOBAL RESET
============================== */

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

html {
scroll-behavior: smooth;
}

body {

```
font-family: 'Manrope', sans-serif;

background: #050505;

color: #ffffff;

line-height: 1.6;

overflow-x: hidden;
```

}

img {

```
max-width: 100%;

display: block;
```

}

a {

```
text-decoration: none;

color: inherit;
```

}

.container {

```
width: 90%;

max-width: 1200px;

margin: auto;
```

}

/* ==============================
COLORS
============================== */

:root {

```
--orange: #ff6b00;

--orange-dark: #d94f00;

--black: #050505;

--dark: #111111;

--gray: #b7b7b7;

--white: #ffffff;

--glass:
rgba(255,255,255,0.08);
```

}

/* ==============================
HEADER
============================== */

.header {

```
position: fixed;

top:0;

left:0;

width:100%;

z-index:1000;

background:

rgba(5,5,5,.75);

backdrop-filter: blur(14px);
```

}

.nav-container {

```
display:flex;

align-items:center;

justify-content:space-between;

height:90px;
```

}

.logo {

```
font-size:26px;

font-weight:800;

letter-spacing:1px;
```

}

.logo span {

```
color:var(--orange);
```

}

.nav {

```
display:flex;

gap:30px;
```

}

.nav a {

```
color:#ddd;

font-size:15px;

transition:.3s;
```

}

.nav a:hover {

```
color:var(--orange);
```

}

.nav-call {

```
padding:12px 22px;

background:var(--orange);

border-radius:30px;

font-weight:700;

color:white;
```

}

.nav-call i {

```
margin-right:8px;
```

}

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

.hero {

```
min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding-top:100px;
```

}

.hero-left {

```
padding:60px 40px;
```

}

.hero-tag {

```
display:inline-block;

padding:8px 18px;

border-radius:30px;

background:

rgba(255,107,0,.15);

border:

1px solid rgba(255,107,0,.4);

color:var(--orange);

margin-bottom:25px;

font-size:14px;
```

}

.hero h1 {

```
font-size:clamp(42px,5vw,70px);

line-height:1.05;

font-weight:800;

margin-bottom:25px;
```

}

.hero p {

```
color:var(--gray);

max-width:520px;

font-size:18px;

margin-bottom:35px;
```

}

.hero-buttons {

```
display:flex;

gap:20px;
```

}

.btn-primary {

```
display:inline-flex;

align-items:center;

justify-content:center;

background:var(--orange);

padding:15px 32px;

border-radius:40px;

font-weight:700;

transition:.3s;
```

}

.btn-primary:hover {

```
background:white;

color:black;
```

}

.btn-secondary {

```
display:inline-flex;

align-items:center;

justify-content:center;

border:1px solid rgba(255,255,255,.3);

padding:15px 32px;

border-radius:40px;

transition:.3s;
```

}

.btn-secondary:hover {

```
border-color:var(--orange);

color:var(--orange);
```

}

.hero-trust {

```
display:flex;

gap:40px;

margin-top:50px;
```

}

.hero-trust div {

```
display:flex;

flex-direction:column;
```

}

.hero-trust strong {

```
font-size:32px;

color:var(--orange);
```

}

.hero-trust span {

```
color:#aaa;

font-size:14px;
```

}

/* HERO IMAGE */

.hero-right {

```
position:relative;

padding:40px;
```

}

.hero-image-card {

```
border-radius:35px;

overflow:hidden;

border:1px solid rgba(255,255,255,.15);
```

}

.hero-image-card img {

```
width:100%;

height:650px;

object-fit:cover;
```

}

.floating-card {

```
position:absolute;

bottom:80px;

left:10px;

display:flex;

gap:15px;

align-items:center;

padding:20px;

background:

rgba(255,255,255,.1);

backdrop-filter:blur(20px);

border-radius:20px;

border:

1px solid rgba(255,255,255,.2);
```

}

.floating-card i {

```
color:var(--orange);

font-size:28px;
```

}

.floating-card p {

```
color:#ccc;

font-size:13px;
```

}

/* ==============================
SECTION GLOBAL
============================== */

section {

```
padding:100px 0;
```

}

.section-label {

```
color:var(--orange);

font-size:14px;

font-weight:700;

letter-spacing:2px;
```

}

.section-heading {

```
text-align:center;

margin-bottom:60px;
```

}

.section-heading h2,
.intro h2 {

```
font-size:42px;

line-height:1.2;

margin-top:15px;
```

}

/* ==============================
INTRO
============================== */

.intro-grid {

```
display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;
```

}

.intro p {

```
color:#aaa;

margin-top:25px;

max-width:550px;
```

}

.glass-card {

```
background:

var(--glass);

backdrop-filter:blur(20px);

border:

1px solid rgba(255,255,255,.12);

border-radius:25px;

padding:35px;
```

}

.glass-card i {

```
color:var(--orange);

font-size:35px;

margin-bottom:20px;
```

}

.glass-card h3 {

```
margin-bottom:15px;

font-size:24px;
```

}

.glass-card p {

```
color:#aaa;
```

}

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

.services {

```
background:#090909;
```

}

.service-grid {

```
display:grid;

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

gap:30px;
```

}

.service-card {

```
transition:.35s;
```

}

.service-card:hover {

```
transform:translateY(-10px);

border-color:var(--orange);
```

}
/* ==============================
PROCESS TIMELINE
============================== */

.timeline {

```
position:relative;

max-width:850px;

margin:auto;
```

}

.timeline:before {

```
content:"";

position:absolute;

left:30px;

top:0;

bottom:0;

width:2px;

background:var(--orange);
```

}

.timeline-item {

```
display:flex;

gap:35px;

margin-bottom:50px;
```

}

.timeline-number {

```
min-width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--orange);

color:#fff;

font-weight:800;

position:relative;

z-index:2;
```

}

.timeline-content {

```
background:

rgba(255,255,255,.05);

border:

1px solid rgba(255,255,255,.1);

border-radius:20px;

padding:25px;

flex:1;
```

}

.timeline-content h3 {

```
margin-bottom:10px;
```

}

.timeline-content p {

```
color:#aaa;
```

}

/* ==============================
STATS / COUNTERS
============================== */

.stats {

```
background:

linear-gradient(
90deg,
#111,
#050505
);
```

}

.stats-grid {

```
display:grid;

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

gap:25px;
```

}

.stat-box {

```
text-align:center;

padding:30px;

border-radius:20px;

background:

rgba(255,255,255,.05);

border:

1px solid rgba(255,255,255,.1);
```

}

.stat-box strong {

```
display:block;

font-size:45px;

color:var(--orange);
```

}

.stat-box span {

```
color:#bbb;
```

}

/* ==============================
GALLERY
============================== */

.gallery-grid {

```
display:grid;

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

gap:25px;
```

}

.gallery-grid img {

```
height:300px;

width:100%;

object-fit:cover;

border-radius:25px;

transition:.4s;
```

}

.gallery-grid img:hover {

```
transform:scale(1.04);
```

}

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

.reviews {

```
background:#090909;
```

}

.testimonial-slider {

```
max-width:750px;

margin:auto;

position:relative;
```

}

.testimonial {

```
display:none;

padding:45px;

text-align:center;

background:

rgba(255,255,255,.07);

border-radius:25px;

border:

1px solid rgba(255,255,255,.1);
```

}

.testimonial.active {

```
display:block;
```

}

.testimonial p {

```
font-size:20px;

color:#ddd;

margin-bottom:25px;
```

}

.testimonial strong {

```
color:var(--orange);
```

}

/* ==============================
FAQ
============================== */

.faq-container {

```
max-width:850px;

margin:auto;
```

}

.faq-item {

```
border-bottom:

1px solid rgba(255,255,255,.15);
```

}

.faq-item button {

```
width:100%;

background:none;

border:none;

color:white;

padding:25px 0;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

cursor:pointer;

text-align:left;
```

}

.faq-item button i {

```
color:var(--orange);
```

}

.faq-answer {

```
max-height:0;

overflow:hidden;

transition:.4s;
```

}

.faq-answer p {

```
color:#aaa;

padding-bottom:20px;
```

}

.faq-item.active .faq-answer {

```
max-height:200px;
```

}

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

.contact-box {

```
text-align:center;

background:

rgba(255,255,255,.06);

border:

1px solid rgba(255,255,255,.12);

border-radius:30px;

padding:60px 30px;
```

}

.contact-box h2 {

```
font-size:42px;

margin-bottom:15px;
```

}

.contact-box p {

```
color:#aaa;

margin-bottom:30px;
```

}

.contact-info {

```
margin-top:35px;
```

}

.contact-info p {

```
margin:10px;
```

}

.contact-info i {

```
color:var(--orange);

margin-right:10px;
```

}

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

footer {

```
background:#000;

padding:40px 0;
```

}

.footer-content {

```
display:flex;

justify-content:space-between;

align-items:center;
```

}

footer p {

```
color:#777;
```

}

/* ==============================
FLOATING BUTTONS
============================== */

.floating-call {

```
position:fixed;

right:25px;

bottom:90px;

width:60px;

height:60px;

border-radius:50%;

background:var(--orange);

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

z-index:1000;
```

}

.back-top {

```
position:fixed;

right:25px;

bottom:20px;

width:45px;

height:45px;

border-radius:50%;

border:none;

background:white;

color:black;

cursor:pointer;

display:none;

z-index:1000;
```

}

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

@media(max-width:1000px){

.nav {

```
display:none;
```

}

.hero {

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

}

.hero-right {

```
padding-top:0;
```

}

.hero-image-card img {

```
height:500px;
```

}

.intro-grid {

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

}

.service-grid {

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

}

.stats-grid {

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

}

.gallery-grid {

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

}

.footer-content {

```
flex-direction:column;

gap:20px;
```

}

}

@media(max-width:600px){

.hero-left {

```
padding:30px 10px;
```

}

.hero h1 {

```
font-size:42px;
```

}

.hero-buttons {

```
flex-direction:column;
```

}

.hero-trust {

```
gap:20px;

flex-wrap:wrap;
```

}

.hero-image-card img {

```
height:400px;
```

}

.section-heading h2,
.intro h2 {

```
font-size:32px;
```

}

.stats-grid {

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

}

.timeline-item {

```
gap:20px;
```

}

.timeline-number {

```
min-width:50px;

height:50px;
```

}

.contact-box h2 {

```
font-size:32px;
```

}

}