*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}


body{
margin:0;
padding:0;
background-image:url("../images/hero-bg.jpeg");
background-size:cover;
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
color:white;
}


header{
    background:#c00000;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:30px;
}

.logo{
    height:140px;
}

nav a{
    color:white;
    text-decoration:none;
    margin-left:20px;
    font-weight:bold;
}

.hero{
    text-align:center;
    padding:80px 20px;
    background:transparent;
}

.hero h1{
    font-size:48px;
}

.hero h2{
    color:#c00000;
    margin-top:10px;
}

.hero p{
    max-width:700px;
    margin:20px auto}

.button{
    background:#c00000;
    color:white;
    padding:15px 30px;
    text-decoration:none;
border-radius:5px;
}


.services{
    padding:60px;
    text-align:center;
}


.service-box{
    background:rgba(0,0,0,0.65);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:10px;
    padding:20px;
}


footer{
    background:#222;
    color:white;
    text-align:center;
    padding:20px;
}


/* Contact Page */


.contact-page {
    background: url("../images/contact-bg.jpg.jpeg") no-repeat center center;
    background-size: cover;
    min-height: 100vh;
}


.contact-container {
max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    display: flex;
    gap: 50px;
    align-items: flex-start;
}


.contact-info {
    width: 40%;
    color: white;
}


.contact-form {
width: 60%;
    background: rgba(255,255,255,0.95);
    padding: 30px;
    border-radius: 10px;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}


.contact-form textarea {
    height: 140px;
    resize: vertical;
}


.contact-form button {
background: #d62d20;
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}


.contact-form button:hover {
    background: #b71c1c;
}


.contact-form h2{
    text-align:center;
    color:#d32f2f;
    font-size:32px;
    margin-bottom:10px;
}

.quote-text{
text-align:center;
    color:#666;
    margin-bottom:30px;
    font-size:16px;
}


.contact-form label {
    color: #333;
}


.whatsapp-btn i{
    margin-right:8px;
    font-size:20px;
}


/* Gallery */

.gallery{
    max-width:1200px;
    margin:auto;
    padding:60px 20px;
    text-align:center;
}

.gallery h1{
    color:white;
    font-size:42px;
    margin-bottom:10px;
}

.gallery p{
    color:white;
    margin-bottom:40px;
    font-size:18px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.gallery-item{
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,.3);
}

.gallery-item img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.3s;
}

.gallery-item img:hover{
    transform:scale(1.05)
}


.gallery-page{
    background-image: url("../images/contact-bg.jpg.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}


.map-section {
    padding: 40px 20px;
    text-align: center;
}

.map-section h2 {
    margin-bottom: 20px;
}

.map-section iframe {
    border-radius: 10px;
}


@media screen and (max-width: 768px) {

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item img {
        width: 100%;
        height: auto;
    }
}


@media screen and (max-width: 768px) {

    .contact-container {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .contact-info,
    .contact-form {
        width: 100%;
    }

    .map-section iframe {
        width: 100%;
        height: 350px;
    }

}


@media screen and (max-width: 768px) {

    .map-section iframe {
        width: 100%;
        height: 300px;
        max-width: 100%;
    }


@media screen and (max-width: 768px) {

    .services {
        padding: 20px;
    }

    .service-box {
        width: 100%;
        margin-bottom: 20px;
        padding: 20px;
    }

}