/* ===========================
   Reset
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f7f7f7;
}

/* ===========================
   Navbar
=========================== */

.navbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:85px;

    background:#111;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 7%;

    z-index:1000;

}

.logo{

    color:#fff;

    font-size:30px;

    font-weight:700;

}

.nav-menu{

    display:flex;

    list-style:none;

    gap:35px;

}

.nav-menu a{

    color:white;

    text-decoration:none;

    font-size:17px;

    font-weight:500;

    transition:.3s;

}

.nav-menu a:hover{

    color:#ff5a1f;

}

.call-btn{

    background:#ff5a1f;

    color:white;

    text-decoration:none;

    padding:13px 26px;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.call-btn:hover{

    background:#ff733f;

}

/* ===========================
   Mobile
=========================== */

.menu-toggle{

    display:none;

    color:white;

    font-size:30px;

    cursor:pointer;

}

@media(max-width:768px){

    .menu-toggle{

        display:block;

    }

    .call-btn{

        display:none;

    }

    .nav-menu{

        position:absolute;

        top:85px;

        left:0;

        width:100%;

        background:#111;

        display:none;

        flex-direction:column;

        text-align:center;

        gap:25px;

        padding:30px 0;

    }

    .nav-menu.active{

        display:flex;

    }

}

/* ===========================
Hero
=========================== */

.hero{

    min-height:100vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:150px 7% 80px;

    gap:60px;

}

.hero-content{

    flex:1;

}

.hero-content h1{

    font-size:60px;

    line-height:72px;

    color:#111;

    margin-bottom:20px;

}

.hero-content p{

    font-size:22px;

    color:#666;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-primary{

    background:#ff5a1f;

    color:white;

    padding:16px 34px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:#ff733f;

}

.btn-secondary{

    background:#111;

    color:white;

    padding:16px 34px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

}

.hero-image{

    flex:1;

}

.hero-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.2);

}

@media(max-width:768px){

.hero{

    flex-direction:column;

    text-align:center;

    padding:130px 25px 60px;

}

.hero-content h1{

    font-size:38px;

    line-height:50px;

}

.hero-content p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary,

.btn-secondary{

    width:100%;

}

.hero-image{

    margin-top:40px;

}

}

/*==============================
Services
==============================*/

.services{

    padding:100px 7%;

    background:#fff;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:48px;

    color:#111;

    margin-bottom:15px;

}

.section-title p{

    color:#666;

    font-size:18px;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:white;

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

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

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card i{

    font-size:55px;

    color:#ff5a1f;

    margin-bottom:20px;

}

.service-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.service-card p{

    color:#666;

    line-height:1.7;

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:36px;

}

}

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

.about{

padding:110px 7%;

display:flex;

justify-content:space-between;

align-items:center;

gap:70px;

background:#f7f7f7;

}

.about-image{

flex:1;

}

.about-image img{

width:100%;

border-radius:20px;

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.about-content{

flex:1;

}

.small-title{

color:#ff5a1f;

font-weight:700;

letter-spacing:2px;

}

.about-content h2{

font-size:48px;

margin:20px 0;

color:#111;

}

.about-content p{

font-size:18px;

line-height:1.9;

color:#666;

margin-bottom:35px;

}

.about-list{

display:grid;

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

gap:18px;

margin-bottom:40px;

}

.about-list div{

font-weight:600;

display:flex;

align-items:center;

gap:12px;

}

.about-list i{

color:#ff5a1f;

font-size:22px;

}

@media(max-width:768px){

.about{

flex-direction:column;

padding:80px 25px;

}

.about-content{

text-align:center;

}

.about-content h2{

font-size:36px;

}

.about-list{

grid-template-columns:1fr;

text-align:left;

}

}

/*==============================
Emergency Banner
==============================*/

.emergency{

background:#ff5a1f;

padding:70px 7%;

}

.emergency-box{

display:grid;

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

gap:30px;

}

.item{

text-align:center;

color:white;

}

.item i{

font-size:45px;

margin-bottom:20px;

}

.item h3{

font-size:24px;

margin-bottom:10px;

}

.item p{

font-size:16px;

opacity:.9;

}

@media(max-width:768px){

.emergency-box{

grid-template-columns:1fr;

gap:40px;

}

}

/*==============================
Reviews
==============================*/

.reviews{

padding:110px 7%;

background:#111;

}

.reviews .section-title h2{

color:white;

}

.reviews .section-title p{

color:#bbb;

}

.reviews-grid{

display:grid;

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

gap:30px;

}

.review{

background:#1d1d1d;

padding:35px;

border-radius:18px;

transition:.35s;

}

.review:hover{

transform:translateY(-10px);

}

.stars{

font-size:26px;

color:#FFD700;

margin-bottom:20px;

}

.review p{

color:#ddd;

line-height:1.8;

margin-bottom:20px;

}

.review h4{

color:#ff5a1f;

}

@media(max-width:768px){

.reviews-grid{

grid-template-columns:1fr;

}

}

/*==============================
Service Areas
==============================*/

.areas{

padding:100px 7%;

background:#f8f8f8;

}

.areas-grid{

display:grid;

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

gap:25px;

}

.area-card{

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

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

transition:.3s;

}

.area-card:hover{

transform:translateY(-8px);

}

.area-card i{

font-size:42px;

color:#ff5a1f;

margin-bottom:15px;

}

.area-card h3{

font-size:24px;

}

@media(max-width:768px){

.areas-grid{

grid-template-columns:1fr;

}

}

/*==============================
Contact
==============================*/

.contact{

padding:100px 7%;

background:#111;

color:white;

}

.contact-box{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

margin-top:50px;

}

.contact h3{

margin:20px 0 10px;

color:#ff5a1f;

}

.contact p{

color:#ddd;

font-size:18px;

}

@media(max-width:768px){

.contact-box{

flex-direction:column;

text-align:center;

}

}

/*==============================
Google Map
==============================*/

.map{

width:100%;

}

.map iframe{

width:100%;

height:450px;

border:0;

display:block;

}

/*==============================
Footer
==============================*/

.footer{

background:#0b0b0b;

color:white;

text-align:center;

padding:70px 20px;

}

.footer h2{

font-size:36px;

margin-bottom:15px;

}

.footer p{

color:#bbb;

line-height:1.8;

}

.footer-links{

margin:35px 0;

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.footer-links a{

color:white;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#ff5a1f;

}

/*==============================
Mobile Call Button
==============================*/

.mobile-call{

display:none;

}

@media(max-width:768px){

.mobile-call{

position:fixed;

bottom:20px;

left:50%;

transform:translateX(-50%);

width:90%;

background:#ff5a1f;

color:white;

text-decoration:none;

text-align:center;

padding:18px;

border-radius:50px;

font-size:20px;

font-weight:700;

display:flex;

justify-content:center;

align-items:center;

gap:12px;

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

z-index:9999;

}

body{

padding-bottom:90px;

}

}