css/style.css
/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#111111;

    color:white;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

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

:root{

    --black:#111111;

    --dark:#1C1C1C;

    --gray:#2D2D2D;

    --yellow:#F5B400;

    --white:#FFFFFF;

    --text:#D8D8D8;

}

/* ===========================
   NAVBAR
=========================== */

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 8%;

    transition:.4s;

}

.logo h1{

    color:white;

    font-size:30px;

    font-weight:700;

}

.logo span{

    color:var(--yellow);

}

.logo img{

    height:65px;

    width:auto;

    transition:.3s;

}

.logo img:hover{

    transform:scale(1.05);

}

@media(max-width:768px){

.logo img{

    height:50px;

}

}

.footer-logo img{

    width:170px;

    margin-bottom:20px;

}

.nav-links{

    display:flex;

    gap:40px;

}

.nav-links a{

    color:white;

    font-weight:500;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--yellow);

}

.phone-button a{

    background:var(--yellow);

    color:black;

    padding:12px 20px;

    border-radius:40px;

    font-weight:600;

}

.menu{

    display:none;

}

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

.hero{

    height:100vh;

    display:flex;

    align-items:center;

    padding:0 8%;

    position:relative;

    background:

    linear-gradient(

    rgba(0,0,0,.65),

    rgba(0,0,0,.75)

    ),

    url("../img/hero/hero.jpg");

    background-size:cover;

    background-position:center;

}

.hero-content{

    max-width:700px;

}

.subtitle{

    color:var(--yellow);

    font-size:18px;

    letter-spacing:2px;

}

.hero h1{

    font-size:70px;

    margin:20px 0;

    line-height:1.1;

}

.hero h1 span{

    color:var(--yellow);

}

.hero p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.hero{

    min-height:100vh;

    background:
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
    url("../img/hero/hero.jpg");

    background-size:cover;

    background-position:center;

}

.btn-yellow{

    background:var(--yellow);

    color:black;

    padding:16px 38px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.btn-yellow:hover{

    background:#FFD44D;

    transform:translateY(-4px);

    box-shadow:0 10px 30px rgba(245,180,0,.4);

}

.btn-dark{

    border:2px solid white;

    color:white;

    padding:15px 35px;

    border-radius:50px;

    transition:.3s;

}

.btn-dark:hover{

    background:white;

    color:black;

}

.services{

    padding:120px 8%;

    background:#181818;

}

.services h2{

    text-align:center;

    font-size:45px;

    margin-bottom:60px;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.card{

    background:#222;

    padding:40px;

    border-radius:20px;

    transition:.4s;

    cursor:pointer;

}

.card:hover{

    transform:translateY(-12px);

    background:#2C2C2C;

}

.card i{

    color:var(--yellow);

    font-size:45px;

    margin-bottom:20px;

}

.card h3{

    margin-bottom:15px;

}

.card p{

    color:var(--text);

}

.emergency{

    padding:90px;

    text-align:center;

    background:var(--yellow);

    color:black;

}

.emergency h2{

    font-size:45px;

    margin-bottom:20px;

}

.emergency p{

    max-width:700px;

    margin:auto;

    margin-bottom:40px;

    font-size:18px;

}

.emergency a{

    background:black;

    color:white;

    padding:18px 35px;

    border-radius:50px;

}

/*==========================
WHY CHOOSE US
==========================*/

.why-us{

    padding:120px 8%;

    background:#111;

}

.why-us h2{

    text-align:center;

    font-size:48px;

    margin-bottom:20px;

}

.section-text{

    text-align:center;

    color:var(--text);

    max-width:700px;

    margin:0 auto 70px;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#222;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    transition:.4s;

}

.why-card:hover{

    transform:translateY(-10px);

    background:#2f2f2f;

}

.why-card i{

    font-size:45px;

    color:var(--yellow);

    margin-bottom:25px;

}

.why-card h3{

    margin-bottom:15px;

}

.why-card p{

    color:var(--text);

    line-height:1.6;

}

/*==========================
PROCESS
==========================*/

.process{

    padding:120px 8%;

    background:#181818;

}

.process h2{

    text-align:center;

    font-size:48px;

    margin-bottom:70px;

}

.process-grid{

    display:grid;

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

    gap:40px;

}

.step{

    text-align:center;

    background:#222;

    padding:45px;

    border-radius:20px;

}

.step span{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:var(--yellow);

    color:black;

    font-size:28px;

    font-weight:bold;

}

.step h3{

    margin-bottom:20px;

}

.step p{

    color:var(--text);

}

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

.gallery{

    padding:120px 8%;

    background:#111;

}

.gallery h2{

    text-align:center;

    margin-bottom:60px;

    font-size:48px;

}

.gallery-grid{

    display:grid;

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

    gap:20px;

}

.gallery-grid img{

    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:20px;

    transition:.5s;

}

.gallery-grid img:hover{

    transform:scale(1.06);

    filter:brightness(1.1);

}

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

.contact{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    padding:120px 8%;

    background:#181818;

}

.contact h2{

    margin-bottom:30px;

}

.contact-info p{

    margin-bottom:20px;

    font-size:18px;

}

.contact-info i{

    color:var(--yellow);

    margin-right:12px;

}

form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

input,
textarea{

    padding:18px;

    border:none;

    border-radius:10px;

    background:#2d2d2d;

    color:white;

    font-size:16px;

}

textarea{

    height:180px;

    resize:none;

}

button{

    background:var(--yellow);

    color:black;

    border:none;

    padding:18px;

    border-radius:50px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    transform:translateY(-4px);

}

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

footer{

    padding:70px 8%;

    background:black;

    display:grid;

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

    gap:40px;

}

footer h2{

    margin-bottom:20px;

}

footer span{

    color:var(--yellow);

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links a{

    color:white;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--yellow);

}

.footer-contact p{

    margin-bottom:15px;

}

/*==========================
WHATSAPP
==========================*/

.whatsapp{

    position:fixed;

    right:30px;

    bottom:30px;

    width:70px;

    height:70px;

    background:#25D366;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    box-shadow:0 10px 30px rgba(0,0,0,.3);

    z-index:999;

    transition:.3s;

}

.whatsapp:hover{

    transform:scale(1.12);

}

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

.testimonials{

    padding:120px 8%;

    background:#181818;

}

.testimonials h2{

    text-align:center;

    font-size:48px;

    margin-bottom:20px;

}

.testimonial-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.testimonial-card{

    background:#242424;

    border-radius:20px;

    padding:35px;

    transition:.3s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.stars{

    color:#F5B400;

    font-size:22px;

    margin-bottom:20px;

}

.testimonial-card p{

    color:#d8d8d8;

    line-height:1.8;

    margin-bottom:25px;

}

.testimonial-card h4{

    color:#ffffff;

}

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

.faq{

    padding:120px 8%;

    background:#111;

}

.faq h2{

    text-align:center;

    font-size:48px;

    margin-bottom:60px;

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:#222;

    padding:30px;

    border-radius:15px;

    margin-bottom:20px;

}

.faq-item h3{

    color:#F5B400;

    margin-bottom:15px;

}

.faq-item p{

    color:#d8d8d8;

    line-height:1.7;

}

/*==========================
MAP
==========================*/

.map{

    grid-column:1/-1;

    margin-top:50px;

}

.map iframe{

    width:100%;

    height:450px;

    border:none;

    border-radius:20px;

}

select{

    padding:18px;

    border:none;

    border-radius:10px;

    background:#2d2d2d;

    color:white;

    font-size:16px;

}

#topBtn{

    position:fixed;

    bottom:120px;

    right:30px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:#F5B400;

    color:black;

    font-size:22px;

    cursor:pointer;

    display:none;

    z-index:999;

    transition:.3s;

}

#topBtn:hover{

    transform:scale(1.1);

}

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

.stats{

    display:grid;

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

    gap:30px;

    padding:80px 8%;

    background:#181818;

}

.stat{

    text-align:center;

}

.stat h2{

    font-size:55px;

    color:var(--yellow);

}

.stat p{

    color:var(--text);

}

.social{

    display:flex;

    gap:20px;

    margin-top:20px;

}

.social a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#222;

    border-radius:50%;

    color:white;

    transition:.3s;

}

.social a:hover{

    background:var(--yellow);

    color:black;

}