/* General Reset */ 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Body */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #000; /* Full black background */
    color: #FFD700; /* Yellow text */
}

p {
    font-size: 0.9rem; /* Adjust to a smaller size */
    width: 80%;
}

/* Header */
header {
    background: #000; /* Full black background */
    color: #FFD700; /* Yellow text */
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Ensure it wraps on smaller screens */
}

header .logo {
    display: flex;
    align-items: center;
}

header .logo h1 {
    color: #FFD700; /* Yellow text for logo title */
    margin-left: 1rem;
}

header .logo-img {
    width: 150px;
    height: auto;
}

header nav ul {
    display: flex;
    list-style: none;
    margin-right: 2rem;
    flex-wrap: wrap; /* Wrap links on smaller screens */
}

header nav ul li {
    margin-left: 1.5rem;
}

header nav ul li a {
    color: #FFD700; /* Yellow text for links */
    text-decoration: none;
}

header nav ul li a:hover {
    color: #FFC107; /* Lighter yellow for hover effect */
}

/* Contact Links Section */
.contact-links {
    display: flex;
    gap: 1rem; /* Space between the text links */
}

.contact-link {
    color: #FFD700; /* Yellow text for the links */
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #FFC107; /* Lighter yellow for hover effect */
}


/* Hero Section */
.hero {
    background: #000;
    color: #FFD700;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero h1 {
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
}

.button-container {
    display: flex; /* Use flexbox for horizontal alignment */
    justify-content: flex-start; /* Align buttons to the left */
    gap: 5rem; /* Add space between the buttons */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
}



button {
    border-radius: 25px; /* Makes the edges circular */
    padding: 10px 20px; /* Adjust padding to ensure buttons are a reasonable size */
    background-color: #FFD700; /* Button background color */
    color: #111 ; /* Button text color */
    border: none; /* Removes the default border */
    cursor: pointer; /* Changes cursor to pointer when hovering over button */
    font-size: 16px; /* Adjust font size as needed */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover */
    margin-top: 20px;
}

/* Optional: Add a hover effect */
button:hover {
    background-color: #FFC107; /* Lighter yellow on hover */
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Services Section */
#services {
    padding: 2rem;
    background: #000;
    text-align: left; /* Centers the text */
    color: #FFD700;
    display: flex; /* Use flexbox for centering the content */
    flex-direction: column; /* Arrange content vertically */
    align-items: center; /* Horizontally center the services container */
}

/* Service list */
.service-list {
    display: flex;
    flex-wrap: wrap; /* Ensures the items wrap on smaller screens */
    gap: 2rem; /* Adds space between each service item */
    margin-top: 1rem;
}

/* Service Item */
.service-item {
    background: #111; /* Slightly lighter black background */
    color: #FFD700; /* Yellow text */
    padding: 1rem;
    border: 1px solid #333; /* Dark gray border */
    width: 500px; /* Set a fixed width for each service item */
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.5); /* Yellow glow effect */
    transition: box-shadow 0.3s ease; /* Smooth transition for hover */
    display: flex;
    flex-direction: column; /* Makes content inside item stack vertically */
   /* align-items: center; /* Centers the content horizontally */
    border-radius: 10px;
}

/* Optional: Add a stronger glow on hover */
.service-item:hover {
    box-shadow: 0 0 25px 10px rgba(255, 215, 0, 0.8); /* Brighter glow on hover */
}


/* Three-dot list */
.three-dots {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 0;
}

.three-dots li::before {
    content: "• "; /* Adds a dot before each item */
    color: #FFD700; /* Yellow color for the dot */
    font-weight: bold; /* Make the dot bold */
    margin-right: 8px; /* Adds space between the dot and the text */
}

/* Five-dot list */
.five-dots {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 0;
}

.five-dots li::before {
    content: "• "; /* Adds a dot before each item */
    color: #FFD700; /* Yellow color for the dot */
    font-weight: bold; /* Make the dot bold */
    margin-right: 8px; /* Adds space between the dot and the text */
}

/* Service item title */
.service-item h3 {
    margin-bottom: 1rem; /* Adds space below the title */
    font-size: 1.2rem; /* Optional: adjust the size of the title */
}

/* Service item list */
.service-item ul {
    margin-top: 0; /* Removes any default margin on top of the list */
    padding-left: 20px; /* Optional: add padding to align the list with the text */
}


/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .service-item {
        width: 80%; /* Make service items take up more space on smaller screens */
        margin-bottom: 1rem; /* Add space below each item */
    }
}



/* General styling for the About Us section */
#about {
    padding: 4rem 2rem;  /* Adds padding at top/bottom and sides */
    background: #000; /* Black background */
    color: #FFD700; /* Yellow text */
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    height: 100vh; /* Full viewport height */
}

/* Flexbox container to align image and text side by side */
.about-content {
    display: flex;
    justify-content: center; /* Align items in the center */
    align-items: center;
    flex-wrap: wrap; /* Stack content on smaller screens */
    max-width: 1200px; /* Optional: limit the width */
    width: 100%;
}

/* Style for the image */
.about-image {
    flex: 1;
    margin-right: 1.5rem; /* Space between the image and text box */
    max-width: 45%; /* Limit the size of the image */
    display: flex;
    justify-content: center; /* Center the image */
}

.about-image img {
    width: 100%; /* Image will scale to fill container */
    max-width: 400px; /* Optional: sets a max width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px; /* Rounded corners for the image */
}

/* Style for the text box */
.about-text {
    flex: 1;
    background: #111; /* Dark background for the text box */
    padding: 1.5rem;
    border-radius: 15px; /* Rounded corners for the text box */
    max-width: 45%; /* Limit the width of the text box */
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.5); /* Yellow glow effect */
    transition: box-shadow 0.3s ease; /* Smooth transition for hover */
}

.about-text:hover {
    box-shadow: 0 0 25px 10px rgba(255, 215, 0, 0.8); /* Brighter glow on hover */
}

.about-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.about-text p {
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    #about {
        height: auto; /* Adjust height to auto for small screens */
    }

    .about-content {
        flex-direction: column; /* Stack image and text on smaller screens */
        text-align: left;
    }

    .about-image, .about-text {
        max-width: 90%; /* Allow image and text to take up more space */
        margin-right: 0;
        margin-bottom: 1.5rem; /* Add space between the image and text box */
    }

    .about-image img {
        max-width: 100%; /* Image takes up full width on small screens */
    }
}


/* Contact Section */
#contact {
    padding: 2rem;
    background: #000;
    color: #FFD700;
}

form {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 0 auto;
    color: #FFD700;
}

form label {
    margin: 0.5rem 0 0.2rem;
}

form input, form textarea {
    padding: 0.7rem;
    background: #111; /* Slightly lighter black for input */
    border: 1px solid #333; /* Dark gray border */
    color: #FFD700; /* Yellow text for input fields */
    margin-bottom: 1rem;
}

/* Footer */
footer {
    background: #000;
    color: #FFD700;
    text-align: center;
    padding: 1rem 0;
}

/* Style for the image gallery section */
.image-gallery {
    display: flex; /* Makes the container a flexbox */
    justify-content: center; /* Centers the image container horizontally */
    align-items: center; /* Centers the images vertically */
    padding: 20px;
    background-color: #000; /* Background color of the gallery */
    margin-bottom: 20px; /* Adds space below the gallery */
}

/* Style for the image container to allow centering */
.image-container {
    display: flex; /* Aligns images horizontally */
    align-items: center; /* Centers images vertically */
    justify-content: center; /* Centers images inside the container */
    gap: 10px; /* Adds a gap between images */
    flex-wrap: wrap; /* Wrap images on smaller screens */
}

/* Style for each image */
.gallery-image {
    width: auto; /* Adjust the width of each image */
    height: auto; /* Keeps the aspect ratio of images */
    max-width: 100%; /* Optionally set a maximum width */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hover effect for images */
.gallery-image:hover {
    transform: scale(1.01); /* Slight zoom effect on hover */
}

/* Media Queries for Responsiveness */

/* Small screens (phones) */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Stack header elements vertically */
        text-align: center;
        margin-bottom: 25px;
    }
    
    header .logo {
        margin: 0;
    }

    header nav ul {
        flex-direction: column; /* Stack nav links vertically */
        margin: 1rem 0;
    }

    header nav ul li {
        margin: 0.5rem 0;
    }
    
    .hero {
    text-align: left;
    }

    .hero h2 {
        font-size: 2rem;
    }


.hero h1 {
    margin-bottom: 1rem;
}


    .hero p {
        font-size: 1rem;
    }

    .button-container {
        gap: 1rem; /* Reduce gap between buttons */
    }

    .service-list {
        flex-direction: column; /* Stack service items vertically */
        margin-top: 1rem;
    }

    .service-item {
        width: 80%; /* Adjust width to 80% of screen on smaller devices */
        margin: 0 auto; /* Center each box horizontally */
    }

    form {
        width: 90%; /* Make the form take up more space on small screens */
    }

    .image-gallery {
        max-width: 90%; /* Increase container size slightly on small screens */
        margin: 25px;
    }

    .image-container {
        justify-content: center; /* Center images when they wrap */
        gap: 10px; /* Decrease gap between images */
    }

    .gallery-image {
        max-width: 120px; /* Limit the max-width of images */
        width: 90%; /* Allow images to take up 90% of their container */
        margin: 25px;
    }
}

/* Extra small screens (very small phones) */
@media (max-width: 480px) {
    header {
        flex-direction: column; /* Stack header elements vertically */
        text-align: center;
        margin-bottom: 25px;
    }
    .hero {
    text-align: left;
    }
    
    .hero h2 {
        font-size: 1.5rem; /* Smaller text for very small screens */
    }


.hero h1 {
    margin-bottom: 1rem;
}


    .hero p {
        font-size: 0.9rem; /* Smaller text for very small screens */
    }

    button {
        font-size: 14px; /* Smaller button font */
    }


    .service-item {
        width: 90%; /* Slightly larger width for very small screens */
    }

    .image-gallery {
        max-width: 100%; /* Allow full container width on very small screens */
        margin: 25px;
    }

    .image-container {
        justify-content: center; /* Center images */
    }

    .gallery-image {
        max-width: 100px; /* Further limit max-width for small screens */
        width: 90%; /* Images take up 90% of the container */
        margin: 25px;
    }
}


/* Fix for Icon Size inside Buttons */
button i {
    font-size: 1.5rem; /* Adjust icon size as needed */
}


/* Facebook Page Section */
.fb-page {
    background: #111;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.5); /* Sárga glow hatás */
    transition: box-shadow 0.3s ease;
    width: 500px;
    max-width: 500px;
    margin: 3rem auto 0.5rem auto; /* Fent 3rem, lent 0.5rem, oldalt auto = középre */
    display: block;
    overflow: hidden; /* Levágja a kilógó részt */
}

.fb-page:hover {
    box-shadow: 0 0 25px 10px rgba(255, 215, 0, 0.8); /* Erősebb glow hover-nél */
}

/* Facebook iframe kényszerítése hogy alkalmazkodjon */
.fb-page iframe,
.fb-page span,
.fb-page > * {
    max-width: 100%;
    width: 100%;
}

/* Mobil kompatibilitás */
@media (max-width: 768px) {
    .fb-page {
        width: 80%;
        max-width: 80%;
        margin: 2rem auto 0.5rem auto;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .fb-page {
        width: 85%;
        max-width: 85%;
        margin: 1.5rem auto 0.5rem auto;
        padding: 0.8rem;
    }
}