*,
*::before,
*::after {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
    background-color: #121212;
    color: #ffffff;
}
.subheader {
    text-align: center;
    font-size: 0.9rem;
}


header {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.video {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    text-align: center;
}

.video iframe {
    max-width: 560px;
    aspect-ratio: 16 / 9;
    border: none;
}

.logo-container img {
    width: 100px;
    height: 100px;
}

#navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: 'Raleway', sans-serif;
    transition: transform 0.3s ease;
}

a {
    color: #ffffff;
}

#navbar a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px;
}

#navbar a:hover {
    background-color: #555;
}

.hero {
    position: relative;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 800px; /* Adjust as needed */
    overflow: hidden;
}

.cta {
    display: inline-block;
    position: relative;
    z-index: 2;
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

section {
    padding: 100px 20px;
    text-align: center;
}

.card-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; /* Spacing between cards */
}

.card {
    background-color: gray;
    border-radius: 10px;
    padding: 20px;
    width: 25%;
    margin: 10px;
    display: flex;
    flex-direction: column; /* Ensure content aligns vertically */
    justify-content: space-between; /* Maintain spacing between elements */
    box-sizing: border-box; /* Ensure padding is included in width calculation */
}
.card.full {
    width: 100%;
    box-sizing: border-box;
}

.card.half {
    width: 50%; /* Makes the card take up the full width of the column */
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.card h3, .card h5 {
    margin: 0;
}

.card h5 {
    margin-top: 10px;
}

#about {
    color: #fff; /* Light text for readability */
    /*padding: 40px 20px; */ /* Padding for spacing */
}

.bio-container {
    max-width: 800px; /* Restricts the width for readability */
    margin: 0 auto; /* Centers the container */
    line-height: 1.6; /* Improves readability */
    text-align: center;
}
.featurepic {
    width: 200px;
}
#about p {
    margin-bottom: 20px; /* Adds space between paragraphs */
    text-align: justify; /* Justifies the text for a neat appearance */
}
h2 {
	font-family: 'Raleway', sans-serif;
}

#about h2, #pricing h2, #services h2, #testimonials h2, #contact h2 {
    text-align: center; /* Centers the heading */
    margin-bottom: 30px; /* Adds space below the heading */
}

footer {
    background-color: #333;
    color: #ffffff;
    text-align: center;
    padding: 20px;
}
section:nth-child(odd) {
    background-color: #222222;
}
section:nth-child(even) {
    background-color: #333333;
}
.email {
	color: #AAA;
	text-decoration: none;
}
.email:hover {
	text-decoration: underline;
}
.pricing {
	font-family: impact;
	font-size: 25px;
}
.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain; /* Show the whole image without cropping */
    background-position: center;
    background-repeat: no-repeat;
}

/* Ensures only the first item is visible initially */
.carousel-item:not(:first-child) {
    display: none;
}

.hero-text {
    /* color: #3c9dff; */
    z-index: 3; /* Ensure it's above other content */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    font-family: "The Next Font", "Raleway";
    white-space: nowrap; /* Prevent word wrapping */
}
.hero-text h1 {
    font-size: 3em; /* Adjust as needed */
    font-weight: 800;
    color: #3c9dff;
    margin-top: 5px;
    padding-top: 10px;
    margin-bottom: 5px;
}
.hero-text h2 {
    font-size: 1.5em;
    font-weight: 600;
    color: #ffffff;
    text-transform: capitalize;
}



/* .cta {
    z-index: 2;
    position: relative;
    margin-top: 40px; 
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
} */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-form label {
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    background-color: #f0f0f0;
}

.contact-form #submit-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contact-form button.submit-btn:hover {
    background-color: #0056b3;
}
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px;
    border-radius: 5px;
    background-color: green;
    color: white;
    z-index: 10000;
    transition: opacity 0.5s ease, bottom 0.5s ease;
    opacity: 0;
    visibility: hidden;
}
.toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 30px;
}

.toast.danger {
    background-color: red;
}

.pricing-container {
    display: flex;
    justify-content: center; /* Center the container on the page */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap; /* Allow the items to wrap */
    gap: 50px; /* Spacing between the columns */
    margin: 0 auto; /* Center the container within its parent */
    max-width: 1200px; /* Limit the maximum width */
    box-sizing: border-box; /* Ensure padding/margins don't affect sizing */
}

.pricing-column {
    flex: 1 1 300px; /* Allow the columns to grow, shrink, and have a base size */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the cards within each column */
    gap: 20px; /* Spacing between cards within the same column */
    text-align: center; /* Ensure text is centered */
    box-sizing: border-box; /* Include padding and borders in width calculation */
}

#pricing p {
    margin-bottom: 20px; /* Adjust spacing between prices as needed */
}

.hamburger, .hamburger.active {
    display: none; /* Hidden by default, shown via media query */
    cursor: pointer;
    position: relative; /* Allows absolute positioning within */
    z-index: 2001; /* Above the overlay */
    top: -30px;
}
.hamburger span, .hamburger.active span {
    display: block;
    height: 2px;
    width: 25px;
    background-color: #ffffff;
}

.hamburger.active span {
    background-color: #ffffff; /* Ensures visibility against the menu background */
}
/* Transform hamburger into 'X' when active */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}
span.required {
    color: red;
    font-size: 0.8rem;
}

/* Testimonial carousel */
.testimonial-carousel {
    position: relative;
    width: 100%;
    height: 450px; /* You can adjust this height to your preference */
    overflow: hidden;
    margin-bottom: 50px;
}

.testimonial-carousel .carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain; /* Adjust image to fit the container */
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover; /* Ensure images maintain aspect ratio */
}

.testimonial-carousel .carousel-item:not(:first-child) {
    display: none;
}

/* Fix for navigation overlap on mobile */
@media (max-width: 768px) {
    /* Ensure that each section has enough scroll-padding to avoid being hidden behind the navbar */
    section {
        scroll-padding-top: 70px; /* Adjust this value based on the height of your navbar */
    }

    /* Hamburger menu behavior */
    .hamburger, .hamburger.active {
        display: flex; /* Shows the hamburger */
        flex-direction: column;
        gap: 5px;
    }

    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        background-color: #000;
        transform: translateX(-100%);
        z-index: 1500; /* Ensures menu is under the hamburger icon but above everything else */
    }

    #navbar.active {
        transform: translateX(0); /* Slide in when active */
    }

    /* Header layout adjustments */
    header {
        flex-direction: column;
        text-align: center;
        justify-content: space-between; /* Ensures spacing between logo and hamburger */
    }

    .logo-container img {
        margin-bottom: 20px;
    }

    /* Adjusting section padding and layout */
    section {
        padding: 60px 10px;
    }

    /* Keep carousel images responsive and proportional */
    .carousel {
        height: 100%; /* Keep the carousel image filling the section */
        background-size: cover; /* Maintain the aspect ratio of the images */
    }

    /* Adjust CTA button positioning */
    .cta {
        margin-top: 30px; /* Add a bit more space between the text and the button */
    }

    .hero {
        height: 550px; /* Increase height for mobile */
        padding: 20px 10px; /* Reduce the padding to give more space for the content */
    }

    /* Adjust the hero text font sizes and positioning */
    .hero-text {
        top: 45%; /* Adjust the position to fit better in the section */
        font-size: 1.2em; /* Increase the overall font size */
    }

    .hero-text h1 {
        font-size: 1.3em; /* Increase the font size of the heading */
    }

    .hero-text h2 {
        font-size: 1em; /* Smaller font for hero paragraph on mobile */
    }

    /* Adjust card layout to be stacked vertically */
    .card-container {
        display: flex;
        flex-direction: column; /* Stack the cards vertically */
        align-items: center; /* Center the cards */
    }

    .card {
        width: 90%; /* Take up most of the screen width on mobile */
        margin-bottom: 20px; /* Add spacing between cards */
    }

    /* Ensure consistent width for the "Our Services" and "Testimonial" cards */
    #services .card,
    #testimonials .card {
        width: 90%; /* Same width as the cards in the Pricing section */
    }

    /* Pricing layout */
    .pricing-container {
        flex-direction: column; /* Stack pricing columns vertically */
        gap: 20px; /* Adjust spacing between columns */
    }

    .pricing-column {
        width: 100%; /* Take full width for each column on mobile */
    }

    .pricing-column p {
        font-size: 1em; /* Adjust the font size for mobile */
    }

    /* Form and bio-container adjustments */
    .bio-container, .contact-form {
        width: 90%;
        margin: 0 auto; /* Center the form and bio on mobile */
    }

    /* Adjust heading sizes */
    h2 {
        font-size: 1.5em; /* Smaller heading size on mobile */
    }
}

#thankstext {
    text-align: left;
}

#thankstext h2, #thankstext h3 {
    font-size: 2em;
    text-align: center;
}
#offer {
     font-family: 'Raleway', serif; 
     text-decoration: underline;
     text-align: center;
     font-size: 1.5em;
     padding-top: 30px;
     font-weight: bold;
}



/* Styles for tablets and smaller desktop screens (max-width: 1024px) */
@media (max-width: 1024px) {
    .card {
        width: 40%; /* Cards take up more space on tablet-sized screens */
    }
}