/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    color: #000000;
}

/* Header */
header {
    background-color:#000000;
    color: #fffffff;
    padding: 10px;
    text-align: center;
}
header .logo h1 {
    font-size: 2rem;
    color: #ff0000;
}
nav ul {
    list-style: none;
    margin-top: 10px;
	font-size: 2rem;
	color: #ffffff;
}
nav ul li {
    display: inline;
	color: #ffffff;
    margin: 0 10px;
}
nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.logo {
    width: 250px; /* Adjust width */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center the logo */
}

.terms {
    width: 350px; /* Adjust width */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center the logo */
}

.image {
    width: 65%; /* Adjust width */
    height: auto; /* Maintain aspect ratio */
	max-width: 800px;
    display: block;
    margin: 0 auto; /* Center the logo */
	object-fit: cover;
}


/* Hero Section */
.hero {
    background-color: #ff0000;
    color: #fff;
    text-align: center;
    padding: 50px 20px;	
	padding-bottom: 20px;
}

.hero h1 {
	padding: 10px;
    margin-bottom: 10px;
	font-size: 1.5rem;
}
.hero .btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: #000000;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}
.hero .btn:hover {
    background: #000000;
}

/* Content Sections */
.content {
    padding: 10px;
	text-align: center;
	color: white;
	background-color: red;
	padding-bottom: 20px;
}

.content h2 {
	padding: 10px;
    margin-bottom: 10px;
	font-size: 1.5rem;
}

.content li {
	text-align: left;
}

.content div {
	align:center;	
}

.content p {
	align:center;	
}

.content2 {
    padding: 10px;
    text-align: center;
	color:white;
	background-color: #000000;
	padding-bottom:20px;
}

.content2 h3 {
	padding: 10px;
    margin-bottom: 10px;
	font-size: 1.5rem;
}

.gallery {
    padding: 10px;
    text-align: center;
	background-color: #000000;
	color:white;
}

.gallery h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
	color:white
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 0 auto;
	vertical-align:middle;
	background-color :#000000;
    max-width: 75%;
}

/* Gallery Item */
.gallery-item {
    border: 1px solid #000000;
	align: center;
    border-radius: 5px;
    background-color: #000000;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

@media (max-width: 480px) {
.gallery-item:hover {
    transform: scale(1);
}
}

.gallery-item:hover {
    transform: scale(2);
}

/* Image Styling */
.gallery-item img {
    width:80%;
    height:auto;
	align:center;
	vertical-align:middle;
    display: inline-block;
}

/* Image Descriptions */
.gallery-item p {
    padding: 10px;
    text-align: center;
}

.text-box {
    width: 80%; /* Adjust width as needed */
    margin: 20px auto; /* Center align using margin */
	max-width : 400px;
    padding: 20px;
    background-color: white; /* Light background color */
    border: 1px solid black; /* Optional border */
    border-radius: 5px; /* Rounded corners */
    text-align: left; /* Ensure content inside is left-aligned */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    font-size: 1.0rem;
    color: black;
}

.text-box2 {
    width: 80%; /* Adjust width as needed */
    margin: 20px auto; /* Center align using margin */
    padding: 20px;
    background-color: white; /* Light background color */
    border: 1px solid black; /* Optional border */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Ensure content inside is left-aligned */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    font-size: 1.0rem;
    color: black;
}
.text-box2 p{
	align:center;
	}	
.image-row {
    display: flex;
	flex-wrap: wrap;
    justify-content: space-between; /* Adjust spacing between images */
    align-items: center; /* Align items vertically */
    gap: 10px; /* Optional: Add space between images */
}

.image-container {
    flex: 1; /* Equalize container widths */
    text-align: center; /* Center images within their container */
}

.image-1 {
    width: 60%; /* Adjust size for this specific image */
	height:auto
     max-width: 200px; /* Limit height */
    object-fit: cover; /* Maintain aspect ratio */
}

.image-2 {
    width: 80%; /* Adjust size for this specific image */
	height:auto;
     max-width: 500px;
    object-fit: cover; /* Maintain aspect ratio without cropping */
}

.image-3 {
    width:60%; /* Adjust size for this specific image */
	height:auto;
    max-width: 250px;
    object-fit: cover; /* Stretch image if needed */
}	

/* Footer */
footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px;
}
footer .contact {
    margin-bottom: 20px;
}
footer .social-media a {
    color: #ff0000;
    text-decoration: none;
}
footer .social-media a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* 1 column for phones */
    }

    .call-now {
        position: fixed;
        bottom: 15px;
        right: 15px;
        padding: 10px 20px;
        background-color: #ff0000;
        color: #fff;
        text-align: center;
        border-radius: 50px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
	
	.responsive-images {
        flex-direction: column; /* Stack images vertically */
        gap: 15px; /* Increase spacing for smaller screens */
    }

    .image {
        max-width: 100%; /* Full width for very small screens */
    }
}

@media (max-width: 768px) {
    .image {
        max-width: 90%; /* Images take most of the screen width */
    }
}