body, h1, h2, p {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

body {
    line-height: 1.6;
}

body.no-scroll {
    overflow: hidden;
}

/* Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    background: transparent;
    transition: background 0.3s;
    z-index: 1000;
    opacity: 0.5;

}

.nav-logo {
    margin-bottom: 10px;
}

.nav-logo img {
    max-height: 105px;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    max-width: 1200px; /* Center the content by giving a max-width */
    margin: 0 auto; /* Center the container horizontally */
}

.nav-brand, .nav-social {
    display: flex;
    align-items: center;
}

.nav-brand {
    margin-right: auto;
}

.nav-brand span {
    font-size: 14px;
    color: white;
}

.phone-number {
    border: 2px solid white;
    padding: 5px ;
    transition: background-color 0.3s, color 0.3s;
}

.phone-number:hover {
    background-color: white;
    color: black;
}

.nav-menu {
    display: flex;
    justify-content: center; /* Center the nav-menu */
    flex: 1;
}

.nav-menu a {
    margin: 0 10px;
    text-decoration: none;
    color: white;
    font-size: 14px;
}

.nav-social {
    margin-left: 20px; /* Add margin-left for social icons */
}

.nav-social a img {
    width: 20px;  /* Adjust the width as needed */
    height: 20px; /* Adjust the height as needed */
    margin: 0 5px;
}


.navbar.scrolled {
    background: black;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 1;
}

/* Main Content */
.content {
    position: absolute;
    top: 45vh;
    left: 20px;
    color: white;
    z-index: 10;
    max-width: 600px;
    animation: fadeIn 2s ease-in-out;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 122em;
    color: white;
}

p {
    margin-bottom: 10px;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    border: 2px solid white;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 10px;
}

.cta-button:hover {
    background-color: white;
    color: black;
}

/* Background Images */
.background-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.image {
    background-size: cover;
    background-position: center;
    position: relative;
}

.image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Dark tint overlay */
}

/* Set specific images for parallax effect */
.image1 { background-image: url('446043222_852551886693717_5251910671144148957_n.jpg'); }
.image2 { background-image: url('441938276_1441927726440823_1246608934748100555_n.jpg'); }
.image3 { background-image: url('441940114_7954993984551200_8377378921622739349_n.jpg'); }
.image4 { background-image: url('446043222_852551886693717_5251910671144148957_n.jpg'); }

/* About Section */
.about-section {
    padding: 50px 20px;
    background: white;
    color: black;
    overflow: hidden;
}

.about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.about-text {
    flex: 1;
    padding: 20px;
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* Increase animation duration */
}

@media (min-width: 768px) {
    .about-text {
        justify-content: space-between;
    }

     }
.about-text h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.about-text p {
    font-size: 1em;
    color: black;
}

.about-image {
    flex: 1;
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* Increase animation duration */
}

.about-image img {
    max-width: 100%;
    border-radius: 10px;
}

.about-text.scrolled,
.about-image.scrolled {
    opacity: 1;
}

/* Before and After Section */
/* Before and After Section */
.before-after {
    text-align: center;
    padding: 20px;
}

.before-after h1 {
    margin-bottom: 20px;
    font-size: 2em; /* Adjust font size as needed */
}

.image-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.before-image-container,
.after-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.before-image-container h2,
.after-image-container h2 {
    margin-bottom: 10px;
    font-size: 1.5em; /* Adjust font size as needed */
}

.before-image,
.after-image {
    width: 100%;
    height: auto;
    max-width: 500px; /* Ensure consistent maximum width */
    max-height: 500px; /* Ensure consistent maximum height */
    border-radius: 10px;
    object-fit: cover; /* Ensure images cover the area without distortion */
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* Increase animation duration */
}

.before-image.scrolled,
.after-image.scrolled {
    opacity: 1;
}

/* Media Queries */
@media (max-width: 768px) {
    .image-container {
        grid-template-columns: 1fr;
    }

    .before-after h1 {
        font-size: 1.5em; /* Adjust font size for smaller screens */
    }

    .before-image-container h2,
    .after-image-container h2 {
        font-size: 1.2em; /* Adjust font size for smaller screens */
    }

    .before-image,
    .after-image {
        max-width: 100%;
        max-height: none; /* Remove the height constraint for better stacking */
    }
}


/* Media Queries */
@media (max-width: 768px) {
    .before-image-container,
    .after-image-container {
        max-width: 100%; /* Stack images on smaller screens */
        margin: 10px 0; /* Adjust margin for spacing */
    }

    .before-after h1 {
        font-size: 1.5em; /* Adjust font size for smaller screens */
    }

    .before-image-container h2,
    .after-image-container h2 {
        font-size: 1.2em; /* Adjust font size for smaller screens */
    }
}


/* Responsive adjustments */


/* Footer */
footer {
    background: black;
    text-align: center;
    padding: 20px 0;
    color: white;
    font-size: 20px;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 10px;
}

.footer-social a {
    margin: 0 5px;
}

.footer-social a img {
    width: 20px;
    height: 20px;
}

.footer-content p {
    font-size: 0px;
}

/* Responsive adjustments */


/* Keyframes for fadeIn animation */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

body, h1, h2, p {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

body {
    line-height: 1.6;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    color: white;
    z-index: 1000;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.nav-logo{

}

.nav-logo h1 {
    margin: 0;
}

.nav-menu {
    display: flex;
}

.nav-menu a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
}

.nav-menu a:hover {
    background: white;
    color: #333;
}

.nav-social {
    display: flex;
}

.nav-social a {
    margin-left: 10px;
}

.nav-social img {
    width: 24px;
    height: 24px;
}

/* Hamburger Menu */
.hamburger {
    display: block;
    width: 50px;
    cursor: pointer;
    height: 35px;
    background: none;
    border: none;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 2.5vh;

}


.hamburger .bar, .hamburger:before, .hamburger:after {
    width: 100%;
    height: 5px;
    background-color: #fff;
    margin: 6px 0px;
    transition: 1s;
    content: "";
    display: block;

}

.hamburger.is-active:before {
    -webkit-transform: rotate(-45deg) translate(-8px, 6px); 
    transform: rotate(-45deg) translate(-8px, 6px);
}

.hamburger.is-active:after {
    -webkit-transform: rotate(45deg) translate(-9px, -8px); 
    transform: rotate(45deg) translate(-9px, -8px);
}
/* Mobile Navigation */
/* Mobile Navigation Styles */
.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100vh;
    z-index: 98;
    background-color: rgba(0, 0, 0, 0.9); /* Slight transparency */
    transition: left 0.4s ease-in-out; /* Smooth slide-in transition */
    text-align: center;
}

.mobile-nav.is-active {
    left: 0;
}

.mobile-nav a {
    font-size: 18px;
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 16px 0;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
    color: white;
    transition: color 0.3s;
}

.mobile-nav a:hover {
    color: #ccc;
}

/* Media Queries */
@media (max-width: 798px) {
    .nav-menu {
        display: none;
    }

    .hamburger{
        appearance: flex
;
    }

}


@media (min-width: 768px) {
    .hamburger {
        display: none;
    }

    .mobile-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .nav-brand {
        flex-direction: column;
        align-items: center;
        margin-right: 0;
    }

    .nav-social {
        margin-left: 0;
        margin-top: 10px; /* Adjust spacing as needed */
    }

    .phone-number {
        display: block;
        margin: 10px auto 0; /* Adjust spacing as needed */
        text-align: center; /* Horizontally center the phone number */
    }
}

.hamburger.is-active .bar {

    opacity: 0;
    transition: 1ms;


}@media (max-width: 1000px) {
    .about-content {
        flex-direction: column-reverse; /* Reverse the order on smaller screens */
        text-align: center; /* Center align content */
    }

    .about-image {
        position: static; /* Reset position for smaller screens */
        margin-top: 20px; /* Add margin for spacing */
    }
}