/* Global Styles & Fonts */
/* Adjust body padding-top if the new header's height is different or if menu is not fixed */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    color: #303030;
    background-color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
    padding-top: 70px; /* Still assuming a 70px fixed top menu */
}

/* Ensure the first carousel's background is visible where the angle cuts away */
.carousel-bg-light-gray {
    background-color: rgba(214, 217, 227, 0.3);
}

.carousel-bg-white {
    background-color: #ffffff;
}

/* Responsive adjustments for Angled Title Header */
@media (max-width: 767px) {
    .angled-title-header {
        padding: 80px 20px 100px 20px; /* Adjust padding for mobile */
    }
    .angled-title-header .ath-content h1 {
        font-size: 32px; /* Adjust h1 size for mobile */
    }
    .angled-title-header .ath-content p {
        font-size: 18px; /* Adjust subtitle size for mobile */
    }
    .angled-title-header .ath-angled-bottom-shape {
        height: 60px; /* Adjust angled shape height for mobile */
    }

    /* Footer angled shape from previous step */
    .site-footer::before {
        height: 60px;
    }
    .site-footer .footer-main-widgets {
        padding-top: 70px;
    }
}

/* ======================= TOP MENU BAR STYLES ======================= */
.top-menu-bar {
    background-color: rgba(255, 255, 255, 0.89); /* Semi-transparent white */
    padding: 5px 0; /* Slightly adjust padding if needed for logo height */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.top-menu-bar .menu-container {
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px; /* Adjust if your logo or menu items need more/less height */
}

/* Styles for the logo link and image */
.top-menu-bar .logo-link {
    display: flex; /* Helps with vertical alignment of the image */
    align-items: center;
    height: 100%; /* Make the link take full height of menu bar for click area */
}

.top-menu-bar .logo-image {
    max-height: 64px; /* Adjust to fit your logo nicely within the menu bar height */
    width: auto;      /* Maintain aspect ratio */
    display: block;
    padding-top: 5px;   /* Remove extra space below inline images */
    /* For the "same transparency" - this is tricky if the PNG itself isn't transparent.
       If your PNG has a solid background, it won't look transparent like the bar.
       If your PNG has transparent areas, those will show the bar's color.
       If you want the *logo itself* to appear slightly transparent: */
    /* opacity: 0.9; /* Example: makes the logo image slightly transparent. Adjust as needed. */
}

.top-menu-bar .menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.top-menu-bar .menu-items li {
    margin-left: 25px; /* Spacing between menu items */
}

.top-menu-bar .menu-items li a {
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: #303030; /* Default link color from original */
    font-weight: 400;
    font-size: 16px;
    padding: 10px 5px;
    transition: color 0.3s ease;
    position: relative; /* For potential underline effects */
}

.top-menu-bar .menu-items li a:hover,
.top-menu-bar .menu-items li a.active {
    color: #f9520b; /* Orange for hover and active */
}

/* Optional: Underline effect for active/hover (like some themes) */
/*
.top-menu-bar .menu-items li a.active::after,
.top-menu-bar .menu-items li a:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5px;
    right: 5px;
    height: 2px;
    background-color: #f9520b;
}
*/

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.hamburger-menu span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #303030; /* Hamburger line color */
    border-radius: 3px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

/* Hamburger animation for open state */
.hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg);
}
.hamburger-menu.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}
.hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg);
}


/* Responsive Menu (for smaller devices) */
@media (max-width: 920px) { /* Breakpoint similar to original ast-header-break-point */
    .top-menu-bar .menu-items {
        display: none; /* Hide aS default */
        flex-direction: column;
        position: absolute;
        top: 70px; /* Position below the menu bar (adjust if menu bar height changes) */
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98); /* Slightly less transparent for readability */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
    }

    .top-menu-bar .menu-items.open {
        display: flex; /* Show when open */
    }

    .top-menu-bar .menu-items li {
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .top-menu-bar .menu-items li a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    .top-menu-bar .menu-items li:last-child a {
        border-bottom: none;
    }

    .hamburger-menu {
        display: flex;
    }
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin-top: 0;
    text-transform: capitalize;
}

h5, h6 {
    margin: 0;
}

p {
    margin: 0;
}

.page-header {
    text-align: center;
    padding: 40px 20px;
    background-color: #111111;
    color: #ffffff;
}
.page-header h1 {
    font-size: 45px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 10px;
}
.page-header p {
    font-size: 22px;
    color: #d6d9e3;
    font-weight: 400;
    margin-bottom: 0;
}


/* ================== CAROUSEL STYLES ================== */
.carousel-container {
    padding: 10px 0; /* Default vertical padding */
    /* padding-bottom: 60px; /* Example: Increased if dots moved up significantly and look too close to edge */
    box-sizing: border-box;
    position: relative;
}

.carousel-bg-light-gray {
    background-color: rgba(214, 217, 227, 0.3);
}

/* Ensure the first carousel after intro text section has appropriate spacing */
.carousel-container.carousel-bg-light-gray {
    /* The .intro-text-section now has padding-bottom.
       If the carousel also has padding-top, it might be too much.
       You can set the carousel's padding-top to 0 if the intro section provides enough space. */
    /* padding-top: 0; */ /* Example */
    padding-top: 20px; /* Or keep some padding */
}

.carousel-bg-white {
    background-color: #ffffff;
}

.custom-carousel {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
}

/* Slick's structural elements for centering */
.custom-carousel .slick-list {
    overflow: hidden; /* Helps if slides have box-shadows or transforms */
}

.custom-carousel .slick-track {
    display: flex;
    align-items: center; /* << KEY: Vertically center slides within the track */
}

/* Slide General Styles */
.slide {
    box-sizing: border-box;
    display: flex;       /* Make the slide itself a flex container */
    align-items: center; /* Vertically center its direct child (.slide-content) */
    /* For consistent height if not using adaptiveHeight in JS, set a min-height:
    /* min-height: 450px; /* Example: adjust to your tallest slide's content */
}

.slide-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Default vertical alignment for text+image columns */
    padding: 20px;
    box-sizing: border-box;
    gap: 20px;
    width: 100%;
}

/* Text & Image Slide Specifics */
.text-column, .image-column {
    flex: 1 1 calc(50% - 10px); /* Adjust for gap: (100% / 2) - (gap / 2) */
    box-sizing: border-box;
}

/* .text-column { */
    /* No specific padding-right needed if using gap on .slide-content */
/* } */

.image-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center image-wrapper and caption-wrapper */
}

.text-column h4 {
    font-size: 32px;
    font-weight: 500;
    color: #303030;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.text-column .subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin-bottom: 15px;
    line-height: 1.4;
}

.text-column ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.text-column ul li {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #636363;
    margin-bottom: 6px;
    line-height: 1.7;
    position: relative;
    padding-left: 15px;
}
.text-column ul li::before {
    content: '•';
    color: #f9520b;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}

.text-column hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    width: 100%;
}

.text-column .description {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.7;
    margin-bottom: 0;
}

.image-column .main-image-wrapper {
    width: 100%;
    padding-top: 67.3%; /* Aspect ratio for single image */
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 4px;
    text-align: center; /* !!! IMPORTANT: Center caption text but not only that, this centers inline children elements !!! */
}

.image-column .main-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caption-image-wrapper {
    background-color: #f9520b;
    padding: 8px 15px;
    text-align: center;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.caption-image-wrapper h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}


/* Two Image Slide Specifics (.image-pair-slide) */
.slide-content .image-pair-slide {
    align-items: center;     /* Vertically center the image wrappers if slide is taller */
    justify-content: center; /* Horizontally center the pair if they don't fill width */
    width: 100%;
    /* min-height: 300px; /* Example: if this slide type is naturally shorter than others,
                             this helps with vertical centering within a taller carousel track.
                             Only needed if NOT using Slick's adaptiveHeight: true */
}

.image-pair-slide .image-wrapper {
    flex: 1 1 calc(50% - 10px); /* Each image takes half the space minus half the gap */
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 4px;
    align-items: center;
    text-align: center; /* !!! IMPORTANT: Center caption text but not only this centers inline children elements !!! */
    /* For fixed aspect ratio on these images too, if desired: */
    /* position: relative; */
    /* padding-top: 75%; /* e.g., 4:3 aspect ratio */
}
.image-pair-slide .image-wrapper img {
    width: auto; /* Maintain aspect ratio */
    /* height: 100%; Make image fill the wrapper, especially if using padding-top trick */
    max-height: 416px;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* Styles for image pair container within a single image column (for Carousel 1, 4, 5's first slide) */
.image-column.image-pair-slide-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.image-pair-slide-container .image-pair-wrapper {
    display: flex;
    gap: 10px;
}
.image-pair-slide-container .image-pair-wrapper .image-wrapper {
    flex: 1;
    border-radius: 4px;
    overflow: hidden;
}
.image-pair-slide-container .image-pair-wrapper .image-wrapper img {
    width: 100%;
    height: auto; /* Or set a fixed aspect ratio using padding-top trick on .image-wrapper */
    display: block;
}
.image-pair-slide-container .caption-image-wrapper.full-width-caption {
    width: 100%;
}

/* Styles for links wrapping carousel images */
.main-image-wrapper a,
.image-wrapper a { /* Targets the <a> tags within your image containers */
    display: block; /* Makes the link behave like a block, taking up the width of its parent
                       and properly containing the block-level image if the image is display:block. */
    text-decoration: none; /* Removes any potential underline from the link */
    line-height: 0; /* Helps remove any extra space if the link somehow gets line height */
}

.image-wrapper a {
    display: inline-block; /* << KEY: Allows text-align:center on parent to work */
    vertical-align: middle;/* << KEY: For vertical centering with line-height */
    line-height: normal;   /* Reset line-height for the content of the link itself */
}

/* --- Slick Carousel Arrow & Dot Customizations --- */
.slick-prev,
.slick-next {
    width: 30px; height: 30px; z-index: 999; background: transparent;
    border: none; box-shadow: none; position: absolute;
    top: 50%; transform: translateY(-50%); cursor: pointer;
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick'; font-size: 30px; line-height: 1;
    opacity: 0.75; color: #303030;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block;
}
.slick-prev { left: -45px; }
.slick-next { right: -45px; }
.slick-prev:hover:before, .slick-next:hover:before { opacity: 1; color: #f9520b; }

.slick-dots {
    bottom: -20px; /* << REDUCED GAP: Was -30px or -15px. Adjust as needed. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}
.slick-dots li button {
    font-size: 0; /* Hide text */
    line-height: 0;
    display: block;
    width: 10px; /* Size of dot */
    height: 10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #cccccc; /* Inactive dot color */
    border-radius: 50%;
}
.slick-dots li button:before { /* Remove if using background for dots */
    content: none;
}
.slick-dots li.slick-active button {
    background: #f9520b; /* Active dot color */
}


/* ================== RESPONSIVE CAROUSEL STYLES ================== */
@media (max-width: 1250px) { /* Adjust this breakpoint for arrows */
    .slick-prev {
        left: 15px;
    }
    .slick-next {
        right: 15px;
    }
    .custom-carousel { /* Add padding if arrows are now inside */
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 991px) { /* Tablet */
    .slide-content {
        gap: 15px;
        align-items: flex-start; /* Revert to flex-start for tablet if text is longer */
    }
    .text-column, .image-column {
        flex-basis: calc(50% - 7.5px);
    }
    .image-column {
        justify-content: flex-start; /* Or center, depending on desired tablet look */
    }

    .text-column h4 { font-size: 28px; }
    .text-column .subtitle { font-size: 17px; }
    .text-column ul li, .text-column .description { font-size: 14px; }
    .caption-image-wrapper h6 { font-size: 13px; }

    .slick-dots {
        bottom: -15px; /* Adjust for tablet if needed */
    }
}


@media (max-width: 767px) { /* Mobile */
    .custom-carousel {
        padding-left: 40px;  /* Space for arrows inside */
        padding-right: 40px; /* Space for arrows inside */
    }
    .slide {
        align-items: flex-start; /* Content stacks top-to-bottom */
    }
    .slide-content {
        flex-direction: column;
        padding: 10px; /* Reduced padding for mobile slide */
        align-items: stretch;
        gap: 15px;
    }

    .slide-content:not(.image-pair-slide) .text-column {
        order: 1;
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 15px;
    }
    .slide-content:not(.image-pair-slide) .image-column {
        order: 2;
        width: 100%;
        flex-basis: 100%;
        justify-content: center; /* Center single image block if it's narrower */
    }

    .slide-content.image-pair-slide {
        /* flex-direction: column; /* Already set by .slide-content */
        align-items: center;
    }
    .slide-content.image-pair-slide .image-wrapper {
        width: 100%;
        flex-basis: 100%;
    }

    .text-column, .image-column {
        padding: 0;
    }
    .text-column h4 { font-size: 22px; }
    .text-column .subtitle { font-size: 15px; }

    .slick-prev { left: 5px; }
    .slick-next { right: 5px; }
    .slick-prev, .slick-next { width: 25px; height: 25px; }
    .slick-prev:before, .slick-next:before { font-size: 20px; }

    .slick-dots {
        bottom: -10px; /* Or 5px if you want them closer inside */
    }
}

/* ======================= SHARED CTA / HERO SECTION STYLES ======================= */
.cta-section-shared {
    position: relative;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.cta-section-shared .cta-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}


.cta-section-shared .cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.cta-section-shared .cta-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    margin: 0 auto;
}

/* ======================= HERO HEADER SPECIFIC STYLES ======================= */
.hero-header-specific {
    padding: 60px 20px 100px 20px; /* Bottom padding for angle height */
}

.hero-header-specific .hero-bg-image {
    background-image: url('../images/general/construction-image41-free-img-1024x213.jpg');
}

.hero-bg-image-services {
    background-image: url('../images/general/construction-image46-free-img.jpg');
}
.hero-bg-image-contact {
    background-image: url('../images/general/construction-image43-free-img-1024x213.jpg');
}

.hero-header-specific .hero-overlay-specific {
    background-color: rgba(17, 17, 17, 0.75);
}

.hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 0;
    color: #ffffff;
    line-height: 1.2;
}

/* Angled bottom for the HERO section */
.hero-header-specific .hero-angled-bottom {
    line-height: 0;
    position: absolute;
    bottom: -0.4px; /* Adjust this value to control the angled height */
    left: 0;
    width: 100%;
    height: 80px; /* Height of the angled area for hero */
    background-color: #ffffff; /* Light gray of .intro-text-section */
    clip-path: polygon(100% 0, 0 100%, 100% 100%); /* Original: Top-right to bottom-left diagonal */
    z-index: 3;
    vertical-align: bottom;
}


.mid-div-angled-bottom {
    line-height: 0;
    /* position: absolute; */
    bottom: -0.4px; /* Adjust this value to control the angled height */
    left: 0;
    width: 100%;
    height: 80px; /* Height of the angled area for hero */
    background-color: #ffffff; /* Light gray of .intro-text-section */
    color: aqua;
    /* clip-path: polygon(100% 0, 0 100%, 100% 100%); */
    clip-path: polygon(0 0, 100% 100%, 0% 100%);
    z-index: 5;
    vertical-align: bottom;
}

.mid-div-angled-bottom-2 {
    line-height: 0;
    position: absolute;
    bottom: -0.4px; /* Adjust this value to control the angled height */
    left: 0;
    width: 100%;
    height: 80px; /* Height of the angled area for hero */
    background-color: #ffffff; /* Light gray of .intro-text-section */
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    /* clip-path: polygon(0 0, 100% 100%, 0% 100%); */
    z-index: 5;
    vertical-align: bottom;
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 32px;
    }
}

/* ======================= ORANGE RULER SECTION STYLES ======================= */
.orange-ruler-section {
    background-color: #f9520b;
    position: relative;
    height: 100px;
    color: #ffffff;
    overflow: visible; /* Still important */
    width: 100%;
    max-width: 1240px; /* Max width of the entire orange bar */
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
    margin-top: -60px;

    /* --- Visual "2mm" orange padding on the LEFT side ONLY --- */
    --edge-padding-width: 20px; /* Visual 2mm padding */
    padding-left: var(--edge-padding-width);
    padding-right: 0; /* Right padding will be created by the overlay pseudo-element */
    box-sizing: border-box;
}

.ruler-markings-area {
    height: 100%;
    width: 100%; /* Fills the space within parent's padding */
    position: relative; /* For ::after pseudo-element and content container */

    --ruler-unit-width: 10px;
    --mm-mark-height: 15px;
    --cm-mark-height: 30px;
    --mark-color: rgba(0, 0, 0, 0.7);
    --mark-thickness: 1px;
    --cm-block-width: calc(var(--ruler-unit-width) * 10);

    background-image:
        repeating-linear-gradient( /* MM marks */
            to right,
            var(--mark-color), var(--mark-color) var(--mark-thickness),
            transparent var(--mark-thickness), transparent var(--ruler-unit-width)
        ),
        repeating-linear-gradient( /* CM marks */
            to right,
            var(--mark-color), var(--mark-color) var(--mark-thickness),
            transparent var(--mark-thickness), transparent var(--cm-block-width)
        );
    background-position: left bottom, left bottom; /* Both start from the true left of this element */
    background-size:
        var(--ruler-unit-width) var(--mm-mark-height),
        var(--cm-block-width) var(--cm-mark-height);
    background-repeat: repeat-x;
}

/* Overlay to create the clean orange edge on the right */
.ruler-markings-area::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0; /* Align to the right edge of .ruler-markings-area */
    width: calc(var(--edge-padding-width) - 5px); /* Width of the orange "empty" space on the right */
    height: 100%;
    background-color: #f9520b; /* Same as main orange background */
    z-index: 1; /* Above markings background, below content container */
}

.orange-ruler-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    /* margin-left: -20px; */
    /* Padding now needs to account for the ::after element visually if content gets too close */
    padding-left: 0 10px;  /* Space from the left edge-padding of parent */
    /* padding-right: calc(var(--edge-padding-width) + 10px); Space from right, including the overlay width !!!! IMORTANT it causes the entire dom to extend on the right and gives a whit stripe on the edge */
    /* box-sizing: border-box; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2; /* Above the ::after overlay and markings */
    height: 100%; /* Fill the height of the ruler section */
}


/* Column adjustments to fit better within the ruler height */
.ruler-column {
    box-sizing: border-box;
    padding: 0 5px; /* Reduced padding between columns */
    display: flex;
    align-items: center;
    height: 100%;
}

.ruler-column-man {
    flex-grow: 0;      /* Don't allow it to grow beyond its basis */
    flex-shrink: 0;    /* Don't allow it to shrink below its basis */
    flex-basis: 100px; /* << INCREASED WIDTH - New desired width for the man's column. Adjust as needed. */
                       /* Or use a percentage: flex-basis: 25%; */
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 2px; /* So he stands just above the very bottom edge */
}

.ruler-column-man img {
    max-width: 120px;
    width: auto;
    height: auto;
    /* Dynamically less than ruler height */
    /* Set --ruler-unit-height in .orange-ruler-section */
    /* max-height: calc(var(--ruler-unit-height, 100px) - 25px); */
    display: block;
    z-index: 100;
}

.ruler-column-text {
    flex-grow: 1;       /* Will take up space remaining after man and button */
    flex-shrink: 1;     /* Allow it to shrink if necessary */
    flex-basis: auto;   /* Let it be flexible, or set a smaller percentage/pixel value here */
                        /* e.g., flex-basis: 300px; or flex-basis: 40%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10px; /* Padding around the text block itself */
}

.ruler-column-text h4 {
    font-size: 1.1em; /* Relative to ruler section's potential font size */
    font-weight: 600;
    margin-bottom: 2px;
    color: #ffffff;
}

.ruler-column-text p {
    font-size: 1.1em !important;
    margin-bottom: 0;
    color: #ffffff;
    opacity: 0.9;
    text-align: center;
}

.ruler-column-button {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 180px; /* Keep or adjust as needed */
    display: flex;
    padding-left: 20px;
    align-items: center;
}

.ruler-button {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #f9520b;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    padding: 8px 20px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
}
.ruler-button:hover {
    background-color: #fde0d3;
    border-color: #fde0d3;
    color: #f9520b;
}

.ruler-column-text {
    flex-grow: 1;          /* Allows it to take available space */
    display: flex;         /* Make it a flex container */
    flex-direction: column;/* Stack h4 and p vertically */
    justify-content: center;/* << KEY: Vertically center h4 & p within this column */
    align-items: center;   /* << KEY: Horizontally center h4 & p within this column */
    text-align: center;    /* Ensures text within h4 and p is also centered if they span multiple lines */
    padding: 0 15px;       /* Padding around the text content */
    height: 100%;          /* Ensure it uses full height for vertical centering */
}
.ruler-column-text h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em; /* Or 18px */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 5px; /* Space between h4 and p */
    color: #ffffff;
    line-height: 1.3;
    /* width: 100%; /* Not strictly needed if parent is centering */
}
.ruler-column-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em; /* Or 14px */
    margin-top: 0;
    margin-bottom: 0;
    color: #ffffff;
    opacity: 0.9;
    line-height: 1.4;
    /* width: 100%; /* Not strictly needed if parent is centering */
}

/* MOBILE VIEW (e.g., below 768px) - Hides man, adjusts layout */
@media (max-width: 767px) {
    .orange-ruler-section {
        margin-top: -40px; /* Adjust negative margin for mobile */
        height: 80px;      /* Adjust ruler height for mobile */
        max-width: 100%;   /* Ruler bar itself is full width on mobile */
        /* CSS Variables for ruler markings on mobile */
        --ruler-unit-width: 8px;
        --mm-mark-height: 10px;
        --cm-mark-height: 20px;
        --edge-padding-width: 16px;
        /* padding-left and padding-right on .orange-ruler-section will use the updated --edge-padding-width */
    }

    .ruler-markings-area::after { /* Adjust the end cap if padding changed */
        width: var(--edge-padding-width);
    }

    .orange-ruler-container {
        flex-direction: row; /* Keep as row initially if text and button are side-by-side */
        justify-content: space-around; /* Distribute space between text and button */
        align-items: center;     /* Vertically center text and button */
        /* padding: 0 var(--edge-padding-width); Respect edge padding of parent for content !!!! IMORTANT it causes the entire dom to extend on the right and gives a whit stripe on the edge */
        height: 100%; /* Fill the ruler height */
        margin-left: -30px;
    }

    .ruler-column {
        padding: 0 5px; /* Minimal gutter if side-by-side */
        height: auto;   /* Let content dictate height */
        align-items: center; /* Ensure items within column are centered vertically */
    }

    .ruler-column-man {
        display: none; /* << HIDE THE MAN'S COLUMN */
    }

    .ruler-column-text {
        flex-grow: 1;       /* Allow text to take available space */
        flex-basis: 0;      /* Allow shrinking/growing from a base of 0 */
        text-align: center; /* Center text content */
        padding: 0 10px;    /* Some padding around text */
        order: 1;           /* Ensure text comes before button if flex order changes */
    }
    .ruler-column-text h4 {
        font-size: 1em; /* Or 15px, 16px etc. */
        margin-bottom: 2px;
    }
    .ruler-column-text p {
        font-size: 0.8em; /* Or 13px, 14px etc. */
    }

    .ruler-column-button {
        flex-grow: 0;       /* Don't let button grow excessively */
        flex-shrink: 0;     /* Don't let button shrink too much */
        flex-basis: auto;   /* Size to its content */
        text-align: center; /* Center the button if its container is wider */
        order: 2;           /* Ensure button comes after text */
    }

    .intro-text-section {
        /* If orange ruler is 80px high, and pulled up by 40px, then 40px of it is "above".
           Padding needs to cover remaining 40px + desired space */
        padding-top: 70px; /* (80px ruler - 40px overlap) + 30px space */
    }
}



/* Breakpoint 2: Hide the "100% megrendelői..." paragraph (e.g., below 600px) */
@media (max-width: 599px) { /* Note: Using 599px so it doesn't overlap with 480px exactly if that one has different settings */
    .ruler-column-text p {
        display: none; /* Hide the paragraph */
    }
    .ruler-column-text h4 {
        margin-bottom: 0; /* Remove bottom margin if paragraph is gone */
    }
    .orange-ruler-container {
        /* Adjust justification if only heading and button are left */
        justify-content: space-between;
    }
    .ruler-column-text {
        /* Potentially adjust padding or flex properties if needed */
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* Breakpoint 3: Hide the "Forduljon hozzánk..." heading (e.g., below 480px) */
/* This is your existing narrowest mobile breakpoint. We'll add the heading hide here. */
@media (max-width: 480px) {
    .orange-ruler-container {
        display: flex; /* Must be flex */
        justify-content: center; /* This is the key for centering the button's column */
        align-items: center; /* For vertical centering */
        height: 100%; /* To use align-items effectively */
        /* padding: 0 var(--edge-padding-width); Respect edge paddings !!!! IMORTANT it causes the entire dom to extend on the right and gives a whit stripe on the edge */
        margin-left: -20px;
    }
     .ruler-markings-area::after { /* Adjust the end cap if padding changed */
        width: var(--edge-padding-width);
    }


    .ruler-column-man, /* Already hidden */
    .ruler-column-text h4,
    .ruler-column-text p { /* Already hidden */
        display: none;
    }

    .ruler-column-text {
        display: none; /* Hide the entire text column as its content is gone */
    }

    .orange-ruler-container {
        justify-content: center; /* Center the button column */
        /* padding: 0 var(--edge-padding-width); Respect edge padding !!!! IMORTANT it causes the entire dom to extend on the right and gives a whit stripe on the edge */
    }

    .ruler-column-button {
        flex-grow: 0; /* No need to grow */
        flex-basis: auto; /* Let it size to button content */
        text-align: center; /* Center the button */
        width: 100%; /* Allow button column to take width for centering */
        justify-content: center;
        padding-left: 26px; /* Adjust padding to center the button */
    }
    .ruler-button {
        padding: 10px 20px;
        font-size: 13px;
    }

    /* Adjust intro text padding for the possibly shorter ruler */
    .intro-text-section {
        /* If orange ruler is 70px high, and pulled up by, say, 35px */
        padding-top: 65px; /* (70 - 35) + 30_space */
    }
}




/* ======================= INTRO TEXT SECTION STYLES ======================= */
.intro-text-section {
    background-color: #ffffff;
    /* padding-top: 60px; /* Original padding */
    padding-top: 20px; /* << INCREASED: Needs to be larger to account for the orange ruler section
                             that is now pulled up into its space.
                             Adjust this value: (orange ruler height - negative margin-top) + desired space */
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    position: relative;
    z-index: 4; /* Below orange ruler but above hero angle */
    border: none;
}

.intro-text-section .intro-text-container {
    max-width: 1170px;
    margin: 0 auto;
}

.intro-text-section h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    color: #f9520b;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: center;
}

.intro-text-section p {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    color: #636363;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
    text-align: center;
}


/* ================== CALL TO ACTION (FOOTER CTA) SPECIFIC STYLES ================== */
.cta-footer-specific {
    padding: 100px 20px 120px 20px; /* Bottom padding allows for angle height */
}

.cta-footer-specific .cta-bg-image {
    background-image: url('../images/general/construction-team.jpg'); /* YOUR CTA IMAGE */
}

.cta-footer-specific .cta-overlay-specific {
    background-color: rgba(17, 17, 17, 0.7); /* Overlay for Footer CTA */
}

.cta-footer-specific .cta-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 15px;
    line-height: 1.3;
}

.cta-footer-specific .cta-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0.9;
    line-height: 1.5;
}

.cta-footer-specific .cta-button { /* Renamed from .call-to-action-section .cta-button */
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    background-color: transparent;
    border: 2px solid #f9520b;
    padding: 12px 35px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cta-footer-specific .cta-button:hover {
    background-color: #f9520b;
    color: #ffffff;
    border-color: #f9520b;
}

.cta-footer-specific .cta-angled-bottom-footer-specific {
    height: 80px; /* Height of the angled area for footer CTA */
    background-color: #3a3a3a; /* BG color of the NEXT section (footer) */
}


/* Angled bottom for the CTA section BEFORE THE FOOTER */
.cta-footer-specific .cta-angled-bottom-footer {
    position: absolute;
    bottom: -0.4px; /* Adjust this value to control the angled height */
    left: 0;
    width: 100%;
    height: 80px; /* Height of the angled area for this CTA */
    background-color: #3a3a3a; /* BG color of the NEXT section (footer) */
    /* This is the MIRRORED clip-path: Top-left to bottom-right diagonal */
    clip-path: polygon(0 0, 100% 100%, 0% 100%);
    z-index: 3;
}

/* ========================== FOOTER STYLES ========================== */
.site-footer {
    background-color: #3a3a3a;
    color: #a9a9a9;
    font-size: 15px;
    position: relative;
    z-index: 5;
    /* The ::before pseudo-element for angled top is not used here anymore */
}
.site-footer .footer-main-widgets {
    padding-top: 60px; /* Normal padding as angle is handled by section above */
    padding-bottom: 40px;
    position: relative;
    z-index: 5;
}

/* .site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Desktop/Tablet angled height
    background-color: #3a3a3a;
    /* Left 0 Right high */
    /* clip-path: polygon(100% 0, 0 100%, 100% 100%); */
    /* Slants from top-left (0 0) to bottom-right (100% 100%) */
    /* clip-path: polygon(0 0, 100% 100%, 0% 100%);
    transform: translateY(-100%);
    z-index: 4;
} */

.site-footer .footer-main-widgets {
    padding-top: 100px; /* Desktop/Tablet: Accounts for ::before */
    padding-bottom: 40px;
    position: relative;
    z-index: 5;
}

.site-footer .footer-container {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
}

.site-footer .footer-main-widgets .footer-container {
    display: flex;
    flex-wrap: wrap;
}

.site-footer .footer-widget {
    box-sizing: border-box;
    padding: 0 10px; /* Gutter between widgets when side-by-side */
    margin-bottom: 30px;
    text-align: left; /* Default internal alignment for widget content */
}

.site-footer .footer-logo-wrapper {
    margin-bottom: 25px;
    margin-left: -55px;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    margin-top: -35px;
}

/* NEW: Styles for the image logo in the footer */
.site-footer .footer-logo-image {
    max-width: 300px; /* Adjust to your desired logo size in the footer */
                      /* The original was quite large (540px but scaled down) */
    height: auto;     /* Maintain aspect ratio */
    display: block;   /* Remove extra space below inline images */
}

.site-footer .tagline {
    font-size: 15px;
    color: #cccccc;
    margin-top: 0; /* Adjust if logo has margin-bottom */
    line-height: 1.6;
    width: 100%; /* Ensure tagline can also be left-aligned within the widget */
    text-align: left; /* Explicitly left-align tagline */
}

/* Desktop: 4 columns */
@media (min-width: 992px) {
    .site-footer .footer-widget {
        width: 25%;
        flex-basis: 25%;
    }
    
    .site-footer .footer-widget:nth-child(4){
        padding-left: 80px;
    }

}

/* Tablet: 2 columns */
@media (min-width: 601px) and (max-width: 991px) {
        .footer-container {
        padding-left: 0 !important; /* Remove left padding from the container */
        padding-right: 10px !important; /* Remove right padding from the container */
    }

    .site-footer .footer-main-widgets .footer-container {
        /* Add horizontal gap between columns */
        gap: 20px; /* << EXAMPLE: Adds a 20px horizontal gap between widgets */
                     /* This will apply to both horizontal and vertical gaps if flex-direction changes.
                        For only horizontal: column-gap: 20px; */
    }

    .site-footer .footer-widget {

        width: calc(50% - 10px); /* (100% / 2 columns) - (gap / 2) if gap is between them only */
                                 /* Or, if gap is on both sides of middle items: width: calc(50% - (20px * (2-1)/2) ) */
                                 /* Simpler: if you have a 20px gap, then two items take up
                                    width_item1 + 20px + width_item2.
                                    If they are equal: 2 * width_item + 20px = 100% (of container)
                                    width_item = (100% - 20px) / 2 = 50% - 10px
                                 */
        flex-basis: calc(50% - 10px); /* Match the width. Adjust 10px if your gap changes (gap/2) */
        /* No need to override for :nth-child(1) and :nth-child(3) to 45% if you want two equal columns */
        display: flex;
        flex-wrap: wrap;
        width: 35%;
        flex-basis: 35%; /* Explicit flex-basis */
    }

    /* Remove these specific width overrides if you want two equal columns with a gap */
    /*
    .site-footer .footer-widget:nth-child(1),
    .site-footer .footer-widget:nth-child(3) {
        width: 45%;
        flex-basis: 45%;
    }
    */

    /* Adjust padding on specific widgets if they were meant to align due to width differences */
    .site-footer .footer-widget:nth-child(2),
    .site-footer .footer-widget:nth-child(4){
        /* padding-left: 40px; /* This was likely to compensate for width differences.
                                 If columns are now equal with a gap, this might not be needed
                                 or should be adjusted. */
        padding-left: 10px; /* Reset to default widget padding if columns are equal */
        width: 30%;
        flex-basis: 30%; /* Explicit flex-basis */
    }

    /* Adjust the "Hasznos Info" widget ul to be pushed up under the title*/
    .site-footer .footer-widget:nth-child(4) ul{
        margin-top: -160px;
    }


    /* Your padding on .footer-container: */
    .site-footer .footer-container { /* This targets the main container FOR ALL WIDGETS */
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-footer .footer-widget:nth-child(1),
    .site-footer .footer-widget:nth-child(3) {
        width: 40%;
        flex-basis: 40%; /* Explicit flex-basis */
        padding-left: 50px;
    }


    /* Keep specific alignments for 2-column if needed */
    .site-footer .footer-widget:nth-child(1) .text-logo-footer, /* If you are using text logo */
    .site-footer .footer-widget:nth-child(1) .tagline {
        text-align: left;
    }
    .site-footer .footer-logo-wrapper {
        justify-content: flex-start;
    }

    .site-footer .footer-logo-image {
    max-width: 270px !important;
    }
}

@media (min-width: 481px) and (max-width: 600px) {
        .footer-container {
        padding-left: 0 !important; /* Remove left padding from the container */
        padding-right: 50px !important; /* Remove right padding from the container */
    }

    .site-footer .footer-main-widgets .footer-container {
        /* Add horizontal gap between columns */
        gap: 20px; /* << EXAMPLE: Adds a 20px horizontal gap between widgets */
                     /* This will apply to both horizontal and vertical gaps if flex-direction changes.
                        For only horizontal: column-gap: 20px; */
    }

    .site-footer .footer-widget {

        width: calc(50% - 10px); /* (100% / 2 columns) - (gap / 2) if gap is between them only */
                                 /* Or, if gap is on both sides of middle items: width: calc(50% - (20px * (2-1)/2) ) */
                                 /* Simpler: if you have a 20px gap, then two items take up
                                    width_item1 + 20px + width_item2.
                                    If they are equal: 2 * width_item + 20px = 100% (of container)
                                    width_item = (100% - 20px) / 2 = 50% - 10px
                                 */
        flex-basis: calc(50% - 10px); /* Match the width. Adjust 10px if your gap changes (gap/2) */
        /* No need to override for :nth-child(1) and :nth-child(3) to 45% if you want two equal columns */
        display: flex;
        flex-wrap: wrap;
        width: 35%;
        flex-basis: 35%; /* Explicit flex-basis */
    }

    /* Remove these specific width overrides if you want two equal columns with a gap */
    /*
    .site-footer .footer-widget:nth-child(1),
    .site-footer .footer-widget:nth-child(3) {
        width: 45%;
        flex-basis: 45%;
    }
    */

    /* Adjust padding on specific widgets if they were meant to align due to width differences */
    .site-footer .footer-widget:nth-child(2),
    .site-footer .footer-widget:nth-child(4){
        /* padding-left: 40px; /* This was likely to compensate for width differences.
                                 If columns are now equal with a gap, this might not be needed
                                 or should be adjusted. */
        padding-left: 10px; /* Reset to default widget padding if columns are equal */
        width: 30%;
        flex-basis: 30%; /* Explicit flex-basis */
    }


    /* Your padding on .footer-container: */
    .site-footer .footer-container { /* This targets the main container FOR ALL WIDGETS */
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-footer .footer-widget:nth-child(1),
    .site-footer .footer-widget:nth-child(3) {
        width: 40%;
        flex-basis: 40%; /* Explicit flex-basis */
        padding-left: 10px;
    }


    /* Keep specific alignments for 2-column if needed */
    .site-footer .footer-widget:nth-child(1) .text-logo-footer, /* If you are using text logo */
    .site-footer .footer-widget:nth-child(1) .tagline {
        text-align: left;
    }
    .site-footer .footer-logo-wrapper {
        justify-content: flex-start;
    }

    .site-footer .footer-logo-image {
        max-width: 270px !important;
    }

    /* Adjust the "Hasznos Info" widget ul to be pushed up under the title*/
    .site-footer .footer-widget:nth-child(4) ul{
        margin-top: -145px;
    }
}

/* Narrow Mobile: 1 column (480px and below) */
@media (max-width: 480px) {
    /* CTA Section Mobile Adjustments (Keep these) */
    .call-to-action-section { padding: 60px 20px; }
    .call-to-action-section .cta-content h2 { font-size: 30px; }
    .call-to-action-section .cta-content p { font-size: 18px; }
    .call-to-action-section .cta-button { padding: 10px 25px; font-size: 14px; }

    /* Footer Angled Shape Mobile Adjustment (Keep this) */
    .site-footer::before {
        height: 60px;
    }
    .site-footer .footer-main-widgets {
        padding-top: 70px;
    }

    /* --- Footer Widget Stacking and Alignment for Mobile --- */
    .site-footer .footer-main-widgets .footer-container {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* Widgets themselves span full width */
    }

    .site-footer .footer-widget {
        width: 100%;
        margin-bottom: 40px;
        padding-left: 0; /* Remove side padding from the widget block itself */
        padding-right: 0;
        text-align: center;  /* This will center the inline-block content (like the ul) */
    }

    .site-footer .footer-widget .widget-title {
        text-align: center;
        margin-bottom: 15px;
        /* No max-width needed here, will be centered by parent */
    }

    .site-footer .footer-widget:nth-child(1) .text-logo-footer,
    .site-footer .footer-widget:nth-child(1) .tagline {
        text-align: center;
        display: block; /* Ensure they take up space to be centered */
        max-width: 280px; /* Or appropriate width for this content */
        margin: 0 auto 10px auto; /* Center block and add bottom margin */
    }
       .site-footer .footer-logo-wrapper {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        margin-left: -8px;
    }

    .site-footer .footer-widget:nth-child(2),
    .site-footer .footer-widget:nth-child(4) {
        padding-right: 30px; /* Add some right padding to the widget */
    }
    
    .site-footer .footer-widget:nth-child(3) {
        padding-right: 25px; /* Add some right padding to the widget */
        padding-left: 10px;
    }
    
    /* For lists (Kapcsolat and Hasznos Info) */
    .site-footer .footer-widget:nth-child(2) ul, /* Kapcsolat list */
    .site-footer .footer-widget:nth-child(4) ul  /* Hasznos Info list */ {
        display: inline-block; /* Allows centering via parent's text-align:center */
        text-align: left;      /* Text within list items is left-aligned */
        max-width: 200px;      /* << ADJUST THIS VALUE (e.g., 190px or 200px to fit 184px content + a bit of space) */
                               /* Both lists will now have the same max-width and be centered consistently */
        padding: 0 10px;        /* Optional: small padding inside the UL if needed */
    }

    /* Content for "Ajánlatkérés" widget */
    .site-footer .footer-widget:nth-child(3) p {
        text-align: center;
        margin-bottom: 10px; /* Space above button */
         max-width: 280px; /* Optional: constrain width */
        margin-left: auto;
        margin-right: auto;
    }
    .site-footer .footer-widget:nth-child(3) .footer-contact-button {
        display: inline-block; /* To be centered by parent's text-align:center */
    }


    /* Ensure list items are still aligned left internally relative to their icons */
    .site-footer .contact-info-list li a,
    .site-footer .useful-info-list li a {
         display: flex;
         padding: 0 20px; /* Optional: small padding inside the link */
         /* align-items: center; */
    }

    .site-footer .footer-logo-image {
        max-width: 270px !important;
    }
}

/* General styles for widget content - these apply across all screen sizes unless overridden by media queries */
.site-footer .footer-logo-wrapper { margin-bottom: 15px; }
.site-footer .text-logo-footer { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 700; color: #ffffff; text-decoration: none; }
.site-footer .tagline { font-size: 15px; color: #cccccc; margin-top: 10px; }
.site-footer .widget-title { font-family: 'Montserrat', sans-serif; font-size: 22px; color: #ffffff; margin-bottom: 25px; font-weight: 400; text-transform: capitalize; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer .contact-info-list li,
.site-footer .useful-info-list li { margin-bottom: 12px; display: flex; align-items: flex-start; }
.site-footer .contact-info-list li a,
.site-footer .useful-info-list li a { color: #a9a9a9; text-decoration: none; display: flex; align-items: center; transition: color 0.3s ease; }
.site-footer .contact-info-list li a:hover,
.site-footer .useful-info-list li a:hover { color: #f9520b; }
.site-footer .icon { display: inline-block; width: 20px; height: 20px; margin-right: 10px; fill: #f9520b; flex-shrink: 0; }
.site-footer .icon svg { width: 100%; height: 100%; }
.site-footer .footer-widget p { line-height: 1.7; }
.footer-contact-button { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f9520b;
    color: #ffffff;
    padding: 10px 25px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 20px;
    transition: background-color 0.3s ease; }
.footer-contact-button:hover { background-color: #303030; color: #ffffff; }

.site-footer .footer-bottom-bar {
    background-color: #2c2c2c;
    color: #7a7a7a;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid #545454;
    position: relative;
    z-index: 5;
}
.site-footer .footer-bottom-bar p { margin: 0; }

.copyright {
    padding-right: 0 !important; /* Remove right padding */
}

/* ======================= FORM STYLES ======================= */

/* .site-footer .footer-widget:nth-child(3) form {
    Form itself doesn't need much styling, children will be styled
} */

.site-footer .footer-widget:nth-child(3) p { /* "Kérjen egyedi ajánlatot..." */
    margin-bottom: 20px;
    text-align: left;
    color: #a9a9a9;
    font-size: 15px;
}

.site-footer .footer-widget:nth-child(3) .form-container-footer {
    max-width: 350px; /* << SET A MAX-WIDTH FOR THE FORM CONTAINER */
                      /* This will define the width of all form fields */
    margin-left: 0;   /* Align form container to the left within the widget */
    margin-right: auto; /* Or margin: 0; if widget is already narrow */
}

/* .site-footer .footer-widget:nth-child(3) form {
    No specific styling needed for the form tag itself
} */

.site-footer .footer-widget:nth-child(3) .form-group {
    margin-bottom: 15px;
}

/* Removed .form-row and .col styles as they are no longer used for Name/Email stacking */

.site-footer .footer-widget:nth-child(3) .form-control {
    width: 100%; /* Inputs and textarea take full width of .form-container-footer */
    padding: 5px 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #303030;
    background-color: #f0f2f5;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-sizing: border-box;
    line-height: 1.5;
}
.site-footer .footer-widget:nth-child(3) .form-control::placeholder {
    color: #888888;
    opacity: 1;
}
.site-footer .footer-widget:nth-child(3) .form-control:focus {
    border-color: #f9520b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(249, 82, 11, 0.2);
}

.site-footer .footer-widget:nth-child(3) textarea.form-control {
    /* height is now controlled by rows attribute and resizability */
    min-height: 60px;  /* Set a smaller min-height if rows="5" isn't enough */
    resize: vertical;
}

.site-footer .footer-widget:nth-child(3) .footer-contact-button {
    display: block;
    width: 100%; /* Button takes full width of the form container */
    margin-top: 10px;
    padding: 12px 20px;
    font-size: 15px;
}


/* Responsive adjustments for the form within the footer */
@media (max-width: 991px) and (min-width: 481px) { /* Tablet */
    /* .site-footer .footer-widget:nth-child(3) .form-container-footer { */
        /* max-width can remain 350px or be adjusted if the column is wider/narrower */
        /* margin-left: 0; /* Ensure it stays left in the 50% width widget */
    /* } */
}

@media (max-width: 480px) { /* Mobile */
    .site-footer .footer-widget:nth-child(3) {
        text-align: center; /* Center the intro P and the form container */
    }
    .site-footer .footer-widget:nth-child(3) p { /* "Kérjen egyedi..." */
        text-align: center;
        max-width: 100%; /* Allow it to be full width before form container */
        margin-left: auto;
        margin-right: auto;
    }
    .site-footer .footer-widget:nth-child(3) .form-container-footer {
        max-width: 100%; /* Allow form container to be full width within padded widget */
        margin-left: auto;  /* Center the form container itself */
        margin-right: auto;
    }
    .site-footer .footer-widget:nth-child(3) .footer-contact-button {
        width: auto; /* Let button size to its content */
        display: inline-block; /* To be centered by parent's text-align:center */
        padding: 10px 30px;
    }
}



/* ======================= TEVÉKENYSÉGI KÖREINK SECTION STYLES ======================= */
.activities-section {
    padding: 20px 20px; /* Vertical and horizontal padding */
    background-color: #f8f8f8; /* Slight off-white background for items, or transparent */
                                /* Assuming a white background for this section, adjust if needed */
                                /* The section below it (.carousel-bg-light-gray) provides the next bg color */
    padding-bottom: 60px; /* Bottom padding to space it from the next section */
                            }

.activities-container {
    max-width: 1170px; /* Consistent with other main content containers */
    margin: 0 auto;
}

.activities-section .section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px; /* From original .brz-tp-heading3 */
    color: #f9520b;   /* Orange color */
    font-weight: 400;
    text-align: center;
    margin-bottom: 15px;
}

.activities-section .section-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px; /* From original .brz-tp-subtitle or .brz-tp-heading5 */
    color: #636363;   /* Gray color */
    font-weight: 400;
    text-align: center;
    line-height: 1.6;
    max-width: 800px; /* Constrain subtitle width */
    margin: 0 auto 50px auto; /* Bottom margin to space it from grid */
}

.activities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Space between items (both row and column gap) */
    /* Or use margin on .activity-item if older browser support for gap is needed */
}

.activity-item {
    display: flex;
    align-items: flex-start; /* Align icon and text block to the top */
    background-color: #f8f8f8; /* Slight off-white background for items, or transparent */
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px; /* Optional: slightly rounded corners */
    /* Default to 3 columns: calc((100% - (gap * (cols - 1))) / cols) */
    flex-basis: calc((100% - 60px) / 3); /* 30px gap * 2 gaps in a 3-col row = 60px */
    width: calc((100% - 60px) / 3);
}

.activity-icon {
    margin-right: 20px;
    flex-shrink: 0; /* Prevent icon from shrinking */
    color: #111111; /* Color for the SVG icon from original */
}
.activity-icon svg {
    width: 42px; /* From original .brz-icon.css-m93fid */
    height: 42px;
    display: block;
}

.activity-text h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px; /* Based on original .brz-tp-heading5 but can be adjusted */
    color: #303030;
    font-weight: 500; /* Slightly bolder for item title */
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.activity-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px; /* Slightly smaller for item description */
    color: #636363;
    line-height: 1.7;
    margin-bottom: 0;
}


/* Responsive Adjustments for Activities Grid */

/* Tablet: 2 items per row */
@media (max-width: 991px) {
    .activities-grid {
        gap: 20px; /* Adjust gap for tablet if needed */
    }
    .activity-item {
        flex-basis: calc((100% - 20px) / 2); /* 20px gap * 1 gap in a 2-col row */
        width: calc((100% - 20px) / 2);
    }
}

/* Mobile: 1 item per row (stacked) */
@media (max-width: 600px) { /* Using 600px as a common mobile breakpoint for stacking grid items */
    .activities-grid {
        gap: 20px; /* Vertical gap when stacked */
    }
    .activity-item {
        flex-basis: 100%;
        width: 100%;
        flex-direction: column; /* Stack icon and text vertically on small mobile */
        align-items: center;   /* Center icon and text block */
        text-align: center;
    }
    .activity-icon {
        margin-right: 0;
        margin-bottom: 15px; /* Space between icon and text when stacked */
    }
    .activity-text h5 {
        text-align: center;
    }
    .activity-text p {
        text-align: center;
    }
}


/* ======================= RECENT WORKS IMAGE GRID SECTION STYLES ======================= */
.recent-works-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Or your desired background, original seems very light gray/off-white */
    padding-bottom: 60px;
}

.recent-works-container {
    max-width: 1170px; /* Consistent with other main content containers */
    margin: 0 auto;
}

/* Reusing .section-title and .section-subtitle from activities if styles are the same */
.recent-works-section .section-title { /* Or use a more generic .page-section-title */
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    color: #f9520b;   /* Orange color */
    font-weight: 400;
    text-align: center; /* Or left as per image */
    margin-bottom: 15px;
}

.recent-works-section .section-subtitle { /* Or use a more generic .page-section-subtitle */
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #636363;   /* Gray color */
    font-weight: 400;
    text-align: center; /* Or left as per image */
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.works-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between images (adjust as needed) */
    /* For older browsers, you might use margin on .work-item instead of gap */
    /* justify-content: center; /* If you want rows with fewer than 3 items to center */
}

.work-item {
    box-sizing: border-box;
    overflow: hidden; /* To ensure image corners are neat if you add border-radius */
    /* border-radius: 5px; /* Optional: slightly rounded corners for the items */
    /* Default to 3 columns: calc((100% - (gap * (cols - 1))) / cols) */
    flex-basis: calc((100% - 40px) / 3); /* (2 gaps * 20px = 40px) for 3 columns */
    width: calc((100% - 40px) / 3);
    /* For a fixed aspect ratio, e.g., 4:3 */
    /* position: relative; */
    /* padding-top: 75%; /* 3/4 * 100% */
}

.work-item a {
    display: block; /* Make the link fill the item for clickability */
    /* If using padding-top for aspect ratio: */
    /* position: absolute; */
    /* top: 0; left: 0; width: 100%; height: 100%; */
}

.work-item img {
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio by default */
    /* If using padding-top for aspect ratio: */
    /* position: absolute; */
    /* top: 0; left: 0; width: 100%; height: 100%; */
    /* object-fit: cover; /* Ensures image covers the area, might crop */
    transition: transform 0.3s ease; /* Optional: for hover effect */
}

/* .work-item a:hover img { */
    /* transform: scale(1.05); /* Optional: slight zoom on hover */
/* } */


/* Responsive Adjustments for Works Grid */

/* Tablet: 2 items per row */
@media (max-width: 991px) {
    .works-grid {
        gap: 15px; /* Adjust gap for tablet */
    }
    .work-item {
        flex-basis: calc((100% - 15px) / 2); /* (1 gap * 15px) for 2 columns */
        width: calc((100% - 15px) / 2);
        /* padding-top: calc(((100% - 15px) / 2) * 0.75); /* Recalculate aspect ratio if fixed */
    }
}

/* Mobile: 1 item per row (stacked) */
@media (max-width: 600px) {
    .works-grid {
        gap: 15px; /* Vertical gap when stacked */
    }
    .work-item {
        flex-basis: 100%;
        width: 100%;
        /* padding-top: 75%; /* Or a different aspect ratio for mobile, e.g., 50% or 60% */
    }
}

/* ======================= WELCOME SECTION STYLES ======================= */
.welcome-section {
    padding: 60px 20px; /* Vertical and horizontal padding */
    background-color: #ffffff; /* Or a very light gray if preferred, e.g., #f8f9fa */
}

.welcome-container {
    max-width: 1170px; /* Consistent with other main content containers */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    align-items: center; /* Vertically align items if they have different natural heights */
    gap: 30px; /* Space between text and image column */
}


.welcome-text-column {
    flex: 1 1 55%; /* Text column takes a bit more space */
    box-sizing: border-box;
    padding-top: 60px;
    /* padding-right: 30px; /* Space between text and image, handled by gap now */
}

.welcome-image-column {
    flex: 1 1 40%; /* Image column takes a bit less */
    box-sizing: border-box;
    /* padding-left: 30px; /* Space, handled by gap now */
}
.welcome-image-column img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
    border-radius: 4px; /* Optional: slight rounding */
}

.welcome-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px; /* Adjust based on visual hierarchy, slightly smaller than main H1 */
    color: #303030;
    font-weight: 400; /* Or bolder like 600 if it's a primary section title */
    line-height: 1.3;
    margin-bottom: 15px;
    text-transform: none; /* Original has no text-transform for this heading */
    text-align: center;
}

.welcome-section .sub-heading {
    font-family: 'Montserrat', sans-serif; /* Or Lato if body font is preferred for subtitles */
    font-size: 20px;
    color: #636363;
    font-weight: 400;
    margin-bottom: 15px;
    line-height: 1.5;
    text-align: center;
}

.welcome-text-column p { /* For the main body paragraphs */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #4a4a4a; /* Slightly lighter than pure black for readability */
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify; /* As seen in the original image */
}
.welcome-text-column p:last-of-type { /* The paragraph before the contact prompt */
    margin-bottom: 25px;
}


.welcome-text-column .contact-prompt {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; /* Or 17px */
    color: #303030;
    font-weight: 400;
    margin-top: 30px; /* Space above it */
    margin-bottom: 0;
    padding-bottom: 10px; /* Space for the underline */
    position: relative;
    display: inline-block; /* To make the underline only span the text width */
    text-align: left; /* Ensure it aligns left even if parent has different alignment later */
}
.welcome-text-column .contact-prompt .contact-lead {
    color: #f9520b; /* Orange color for "Keressen bennünket:" */
    font-weight: 600; /* Make it bolder */
}
.welcome-text-column .contact-prompt::after { /* Orange underline */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px; /* Width of the underline, adjust as needed */
    height: 2px;
    background-color: #f9520b;
}


/* Responsive Adjustments for Welcome Section */
@media (max-width: 991px) { /* Tablet breakpoint */
    .welcome-text-column {
        flex-basis: 45%;
        /* padding-right: 20px; */
    }
    .welcome-image-column {
        flex-basis: 50%;
        /* padding-left: 20px; */
    }
    .welcome-text-column h2 {
        font-size: 32px;
    }
}

/* Mobile breakpoint */
/* @media (max-width: 767px) {  */
@media (max-width: 920px) { /* Mobile breakpoint */
    .welcome-container {
        flex-direction: column; /* Stack columns */
        gap: 30px; /* Vertical gap when stacked */
    }
    .welcome-text-column,
    .welcome-image-column {
        flex-basis: 100%; /* Full width when stacked */
        width: 100%;
        padding-left: 0;  /* Reset padding if used for side-by-side */
        padding-right: 0;
    }
    .welcome-image-column {
        order: 2; /* Optional: Move image to the top on mobile */
    }
    .welcome-text-column {
        order: 1;
        text-align: left; /* Or center if preferred for mobile */
    }
    .welcome-text-column h2 {
        font-size: 28px;
        /* text-align: center; /* If centering all text on mobile */
    }
    .welcome-text-column .sub-heading,
    .welcome-text-column p {
        font-size: 15px;
        /* text-align: center; /* If centering all text on mobile */
    }
    /* .welcome-text-column .contact-prompt { */
        /* display: block; /* Make it block to allow centering if text-align:center on parent */
        /* text-align: center; */
        /* margin-left: auto; */
        /* margin-right: auto; */
    /* } */
     /* .welcome-text-column .contact-prompt::after { */
        /* margin-left: auto; /* If prompt is centered, center underline */
        /* margin-right: auto; */
    /* } */
}

/* ======================= QUALIFIED TEAM SECTION STYLES ======================= */
.qualified-team-section {
    padding: 60px 20px;
    padding-bottom: 10px;
    background-color: #ffffff; /* Or a very light gray like #f8f9fa */
}

.qualified-team-container {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: 40px; /* Space between text and image columns */
    align-items: flex-start; /* Align top of columns */
}

.team-text-column {
    flex: 1 1 60%; /* Text column takes more space */
    box-sizing: border-box;
    /* padding-right: 30px; /* Handled by gap */
    padding-top: 20px;
}

.team-image-column {
    flex: 1 1 35%; /* Image column takes less space */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 20px; /* Space between the two images */
    padding-top: 20px;
}
.team-image-column .team-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* Optional */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional subtle shadow */
}

.qualified-team-section .section-title-orange {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px; /* Adjust as needed */
    color: #f9520b; /* Orange */
    font-weight: 400; /* Bolder */
    line-height: 1.3;
    margin-bottom: 10px;
    text-transform: none;
    text-align: center; /* Centered */
}

.qualified-team-section .section-subtitle-dark {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #303030; /* Darker text */
    font-weight: 400;
    margin-bottom: 25px;
    line-height: 1.5;
    text-align: center; /* Centered */
}

.team-text-column p { /* For the main body paragraphs */
    font-family: 'Montserrat', sans-serif;
    font-size: 15px; /* Slightly smaller than default body if needed */
    color: #555555; /* Dark gray for readability */
    line-height: 1.7;
    margin-bottom: 18px;
    /* text-align: justify; /* Optional, if you want justified text */
}

/* Key Points Grid */
.key-points-grid {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px; /* row-gap column-gap */
}

.key-point-item {
    display: flex;
    align-items: center;
    flex-basis: calc(50% - 10px); /* 2 items per row, accounting for 20px column-gap */
    width: calc(50% - 10px);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #303030;
    font-weight: 500;
}

.key-point-icon {
    margin-right: 10px;
    color: #f9520b; /* Orange icon color */
    flex-shrink: 0;
}
.key-point-icon svg {
    width: 20px; /* Adjust icon size */
    height: 20px;
    display: block;
    fill: currentColor; /* To inherit color from .key-point-icon */
}


/* Responsive Adjustments for Qualified Team Section */

@media (max-width: 991px) { /* Tablet breakpoint */
    .qualified-team-container {
        gap: 30px;
    }
    .team-text-column {
        flex-basis: 55%;
    }
    .team-image-column {
        flex-basis: 40%;
    }
    .key-point-item { /* Still 2 items per row on tablet */
        flex-basis: calc(50% - 10px);
        width: calc(50% - 10px);
    }
}

@media (max-width: 767px) { /* Mobile breakpoint */
    .qualified-team-container {
        flex-direction: column; /* Stack main columns */
        gap: 30px;
    }
    .team-text-column,
    .team-image-column {
        flex-basis: 100%;
        width: 100%;
    }
    .team-image-column {
        order: -1; /* Optional: Move images to the top on mobile */
    }
    .team-text-column .section-title-orange {
        font-size: 30px;
    }
    .team-text-column .section-subtitle-dark {
        font-size: 18px;
    }
    .team-text-column p {
        font-size: 14px;
    }
    .key-points-grid {
        gap: 10px; /* Adjust gap for stacked items */
    }
    .key-point-item { /* Stack key points on mobile */
        flex-basis: 100%;
        width: 100%;
        font-size: 14px;
    }
}

/* ======================= WHAT WE OFFER SECTION STYLES ======================= */
.what-we-offer-section {
    padding: 20px 20px;
    padding-bottom: 80px;
    background-color: #f8f8f8; /* Very light gray, almost white, from screenshot */
}

.what-we-offer-section .offer-container {
    max-width: 1170px;
    margin: 0 auto;
}

/* Reusing .section-title-orange and .section-subtitle-dark if styles are identical */
.what-we-offer-section .section-title-orange {
    text-align: center; /* Or left as per your overall style preference */
    margin-bottom: 10px; /* Adjusted from 15px */
    font-size: 40px; /* Match other section titles if desired */
    color: #f9520b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.what-we-offer-section .section-subtitle-dark {
    text-align: center; /* Or left */
    margin: 0 auto 50px auto; /* Bottom margin to space it from grid */
    /* Constrain width of subtitle */
    /* max-width: 700px; */
    font-size: 18px; /* Slightly smaller subtitle */
    color: #555555;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

.offer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Space between offer items */
    justify-content: center; /* Center items if the last row has fewer than 3 */
}

.offer-item {
    background-color: #ffffff; /* White background for each card */
    border-radius: 6px; /* Slightly rounded corners */
    overflow: hidden; /* To ensure image corners also appear rounded if image touches edge */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow for card effect */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Stack image and text vertically */

    /* Default to 3 columns */
    flex-basis: calc((100% - 60px) / 3); /* (2 gaps * 30px = 60px) for 3 columns */
    width: calc((100% - 60px) / 3);
}

.offer-image-wrapper {
    width: 100%;
    /* For a fixed aspect ratio, e.g., 16:9 or 3:2 */
    padding-top: 66.66%; /* For a 3:2 aspect ratio (2/3 * 100%) */
                       /* Adjust this percentage based on your images' desired aspect ratio */
    position: relative;
    overflow: hidden; /* In case image object-fit doesn't perfectly align */
}

.offer-item img {
    display: block; /* Removes bottom space */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
}

.offer-text-content {
    padding: 20px 25px 25px; /* Padding for text below image */
    text-align: center; /* Center align the text within this block */
    flex-grow: 1; /* Allows text content to take up remaining space if cards have uneven text length */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align text to top within its space */
}

.offer-text-content h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px; /* Or 20px */
    color: #303030;
    font-weight: 600; /* Bolder for item title */
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.4;
}

.offer-text-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 0;
    flex-grow: 1; /* Allows paragraph to take space if title is short */
}


/* Responsive Adjustments for Offer Grid */

/* Tablet: 2 items per row (or 1 if preferred) */
@media (max-width: 991px) {
    .offer-grid {
        gap: 20px;
    }
    .offer-item {
        flex-basis: calc((100% - 20px) / 2); /* 2 items per row */
        width: calc((100% - 20px) / 2);
        /* If using fixed aspect ratio, padding-top might need to be % of this new width */
        /* padding-top: calc(((100% - 20px) / 2) * 0.6666); */
    }
}

/* Mobile: 1 item per row (stacked) */
@media (max-width: 600px) {
    .what-we-offer-section .section-title-orange { font-size: 32px; }
    .what-we-offer-section .section-subtitle-dark { font-size: 16px; margin-bottom: 30px;}

    .offer-grid {
        gap: 20px; /* Vertical gap when stacked */
    }
    .offer-item {
        flex-basis: 100%;
        width: 100%;
        /* If using fixed aspect ratio, adjust if needed for full width image */
        /* padding-top: 60%; /* Example: slightly different aspect ratio for mobile cards */
    }
    .offer-text-content h5 { font-size: 17px; }
    .offer-text-content p { font-size: 14px; }
}


/* ======================= WHAT WE PROVIDE SECTION STYLES ======================= */
.what-we-provide-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Or a very light gray like #f8f9fa */
}

.what-we-provide-section .provide-container {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Align tops of columns */
    gap: 40px; /* Space between text and image column */
}

.what-we-provide-section .provide-text-column {
    flex: 1 1 55%; /* Text column takes slightly more space */
    box-sizing: border-box;
    /* padding-right: 20px; /* Handled by gap */
    padding-top: 20px;
}

.what-we-provide-section .provide-image-column {
    flex: 1 1 40%; /* Image column */
    box-sizing: border-box;
    /* padding-left: 20px; /* Handled by gap */
}
.what-we-provide-section .provide-image-column img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* Optional */
}

/* Reusing .section-title-orange and .section-subtitle-dark if styles are the same */
.what-we-provide-section .section-title-orange {
    /* Styles from previous section or define here */
    font-size: 40px;
    color: #f9520b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin-bottom: 10px;
    text-transform: none;
    text-align: center;
}

.what-we-provide-section .section-subtitle-dark {
    /* Styles from previous section or define here */
    font-size: 18px;
    color: #555555;
    font-family: 'Montserrat', sans-serif; /* Or Lato */
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 40px; /* Space before the points grid */
    text-align: center;
}

.provide-points-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px; /* row-gap column-gap (vertical horizontal) */
}

.provide-point-item {
    display: flex;
    align-items: flex-start; /* Align icon with the top of the text */
    flex-basis: calc(50% - 15px); /* 2 items per row, (30px col-gap / 2) = 15px */
    width: calc(50% - 15px);
    box-sizing: border-box;
    margin-bottom: 15px; /* Add some bottom margin for items if they stack weirdly due to text length */
}

.point-icon {
    display: inline-block;
    width: 10px;  /* Size of the circle */
    height: 10px;
    background-color: #f9520b; /* Orange bullet */
    border-radius: 50%;      /* Make it a circle */
    margin-right: 12px;
    margin-top: 6px; /* Adjust to vertically align with first line of text */
    flex-shrink: 0;
}

.point-text h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px; /* Or 18px */
    color: #303030;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.4;
}

.point-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 0;
}


/* Responsive Adjustments for What We Provide Section */

@media (max-width: 991px) { /* Tablet breakpoint */
    .what-we-provide-section .provide-container {
        gap: 30px;
    }
    /* Columns might remain 55/40 or go 50/50, or stack if preferred on tablet */
    /* .provide-text-column { flex-basis: 50%; } */
    /* .provide-image-column { flex-basis: 50%; } */

    .provide-points-grid {
        gap: 15px 20px; /* Adjust gap for tablet */
    }
    .provide-point-item {
        /* Still 2 items per row on tablet is likely fine */
        flex-basis: calc(50% - 10px);
        width: calc(50% - 10px);
    }
}

@media (max-width: 767px) { /* Mobile breakpoint */
    .what-we-provide-section .provide-container {
        flex-direction: column;
        gap: 30px;
    }
    .what-we-provide-section .provide-text-column,
    .what-we-provide-section .provide-image-column {
        flex-basis: 100%;
        width: 100%;
    }
    .what-we-provide-section .provide-image-column {
        order: -1; /* Optional: Move image to the top on mobile */
        margin-bottom: 20px; /* Add space if image is on top */
    }

    .what-we-provide-section .section-title-orange { font-size: 30px; }
    .what-we-provide-section .section-subtitle-dark { font-size: 16px; margin-bottom: 30px; }

    .provide-points-grid {
        gap: 15px; /* Only vertical gap now */
    }
    .provide-point-item { /* Stack key points to single column on mobile */
        flex-basis: 100%;
        width: 100%;
        margin-bottom: 20px; /* Space between stacked items */
    }
    .point-text h5 { font-size: 16px; }
    .point-text p { font-size: 14px; }

}

/* ======================= CONTACT INFO / HOURS SECTION STYLES ======================= */
.contact-details-section {
    padding: 50px 20px 70px 20px; /* Adjust padding as needed */
    background-color: #ffffff; /* Or your desired page background if it's not pure white */
}

.contact-details-section .contact-details-container {
    max-width: 1170px; /* Or your standard container width */
    margin: 0 auto;
}

.contact-details-section .contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between items */
    /* justify-content: center; /* Optional: if last row has fewer items and you want them centered */
}

.contact-details-section .contact-item {
    background-color: #f0f2f5; /* Light gray background for each item card */
    padding: 30px 25px;
    box-sizing: border-box;
    border-radius: 5px; /* Optional: slightly rounded corners */
    text-align: center; /* Center content within each item */
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center items if their width is auto */

    /* Default to 4 columns */
    flex-basis: calc((100% - 60px) / 4); /* (3 gaps * 20px = 60px) for 4 columns */
    width: calc((100% - 60px) / 4);
}

.contact-details-section .contact-icon {
    margin-bottom: 20px;
    color: #f9520b; /* Orange color for the icon's STROKE */
    line-height: 1;
}
.contact-details-section .contact-icon svg {
    width: 50px; /* Desired width of the icon */
    height: 50px;/* Desired height of the icon */
    display: block;
    margin: 0 auto;
    /* fill: none; /* Can be set here too, but better in SVG for portability */
    /* stroke: currentColor; /* Can be set here too */
    /* stroke-width: 1.5px; /* Control stroke width here or in SVG */
}

.contact-details-section .contact-item h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #303030;
    font-weight: 600; /* Bolder title */
    margin-top: 0;
    margin-bottom: 15px;
}

.contact-details-section .contact-item p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Responsive Adjustments for Contact Grid */

@media (max-width: 991px) { /* Tablet: 2 items per row */
    .contact-details-section .contact-grid {
        gap: 20px;
    }
    .contact-details-section .contact-item {
        flex-basis: calc((100% - 20px) / 2);
        width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 600px) { /* Mobile: 1 item per row (stacked) */
    .contact-details-section .contact-grid {
        gap: 20px; /* Vertical gap when stacked */
    }
    .contact-details-section .contact-item {
        flex-basis: 100%;
        width: 100%;
        padding: 25px 20px;
    }
    .contact-details-section .contact-icon svg {
        width: 45px;
        height: 45px;
    }
    .contact-details-section .contact-item h4 {
        font-size: 18px;
    }
    .contact-details-section .contact-item p {
        font-size: 14px;
    }
}


/* ======================= CONTACT US SECTION STYLES ======================= */
.contact-us-section {
    padding: 60px 20px;
    background-color: #f8f8f8;
}

.contact-us-section .contact-us-container {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* align-items: flex-start; /* If this was set, it could cause the issue */
    align-items: stretch; /* << KEY: Make columns equal height by default */
}

.contact-us-section .contact-form-details-column {
    flex: 1 1 35%;
    box-sizing: border-box;
    /* No explicit height needed, will stretch if container aligns items to stretch */
}

.contact-us-section .contact-map-column {
    flex: 1 1 60%;
    box-sizing: border-box;
    /* min-height: 450px; /* Still good as a fallback or if align-items: flex-start is used */
    /* height: auto; /* This is fine if align-items: stretch is on parent */
    display: flex; /* Ensures iframe can truly fill 100% height */
    flex-direction: column; /* Not strictly necessary if only iframe is child, but good practice */
    /* You can set a fixed height if you don't want it to stretch with the text column: */
    /* height: 450px; */
}

.contact-us-section .contact-map-column iframe {
    width: 100%;
    height: 100%; /* Will fill the height given by .contact-map-column */
    display: block;
    border: none;
    flex-grow: 1; /* << ADDED: If .contact-map-column is display:flex, this makes iframe take available vertical space */
}


.contact-us-section h3 { /* "Küldjön üzenetet" */
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    color: #303030;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 25px;
}

.contact-us-section .contact-form-placeholder {
    margin-bottom: 25px;
}

.contact-us-section .submit-button {
    display: inline-block;
    background-color: #f9520b;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 35px;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.contact-us-section .submit-button:hover {
    background-color: #e04a0a;
}

.contact-us-section .orange-separator {
    border: none;
    height: 2px; /* Or 1px if it's thinner */
    background-color: #f9520b;
    width: 80px; /* Adjust width as per screenshot */
    margin: 25px 0; /* Adjusted margin for consistent spacing */
}

.contact-us-section h4 { /* "hívjon minket", "vagy jöjjön el személyesen" */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #555555;
    font-weight: 500; /* Slightly less bold than phone numbers */
    margin-top: 0;
    margin-bottom: 10px;
}

.contact-us-section .phone-numbers,
.contact-us-section .address-details { /* << Apply same style to address */
    font-family: 'Montserrat', sans-serif; /* Screenshot looks like Montserrat for these */
    font-size: 22px; /* Adjust if needed to match screenshot */
    color: #303030;
    font-weight: 600; /* Bolder */
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 5px;
}
/* .contact-us-section .phone-numbers:last-of-type { */
    /* margin-bottom: 30px; /* Now handled by the hr margin */
/* } */

.contact-us-section .address-details {
    margin-bottom: 0; /* Last item in this column */
}


/* Tablet breakpoint: Side-by-side layout (proportions from general rule apply) */
@media (max-width: 991px) and (min-width: 616px) {
    .contact-us-section .contact-us-container {
        gap: 25px;
        /* align-items: stretch; /* Should be inherited or can be re-stated */
    }
    /* Column flex-basis values are inherited unless overridden here */
    .contact-us-section .contact-map-column {
        min-height: 400px; /* Ensure map has a decent height on tablet */
        /* height: 400px; /* Or fixed height */
    }
}

/* Mobile breakpoint: STACK columns */
@media (max-width: 615px) {
    .contact-us-section .contact-us-container {
        flex-direction: column;
        align-items: stretch; /* Keep items full width when stacked */
    }
    .contact-us-section .contact-form-details-column,
    .contact-us-section .contact-map-column {
        flex-basis: 100%;
        width: 100%;
    }
    .contact-us-section .contact-map-column {
        min-height: 300px; /* Adjust map height for mobile */
        /* height: 300px; /* Or fixed height */
        order: 2;
        margin-top: 0; /* Reset margin if it was added for stacking */
    }
    .contact-us-section .contact-form-details-column {
        order: 1;
        text-align: center;
    }

    /* Adjust text sizes for mobile if not already done */
    .contact-us-section h3 { font-size: 24px; }
    .contact-us-section .phone-numbers,
    .contact-us-section .address-details { font-size: 18px; }

    .contact-us-section .orange-separator {
    margin: 25px auto; /* Adjusted margin for consistent spacing */
}
}


/* ======================= CONTACT US FORM OVERLAY STYLES ======================= */

.contact-us-section .contact-map-column {
    flex: 1 1 50%;
    box-sizing: border-box;
    /* min-height: 450px; /* Original min-height */
    min-height: 500px; /* << INCREASED: Estimate height needed for the form + padding + title */
                       /* Adjust this based on your form's actual rendered height */
    /* OR if you want it to match the left column if left column is taller: */
    /* align-self: stretch; /* If .contact-us-container uses align-items: flex-start */
    overflow: hidden; /* Keep this */
    position: relative;
    display: flex; /* Keep this */
}

.contact-us-section .contact-map-column .map-embed-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Map behind overlay and form */
}
.contact-us-section .contact-map-column .map-embed-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}


/* Map Overlay for Darkening Effect */
.contact-us-section .map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 2; /* Above map, below form */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hidden by default */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.contact-us-section .map-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* Form Overlay and Container on the Map */
.map-form-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; /* On top of map and dark overlay */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95); /* Optional: slight scale down effect */
    transition: opacity 0.3s ease 0.1s, visibility 0s linear 0.4s, transform 0.3s ease 0.1s;
    /* Delay visibility transition until opacity transition is done */
}
.map-form-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.3s ease, visibility 0s linear 0s, transform 0.3s ease;
}

.map-form-container {
    background-color: #ffffff;
    padding: 25px 30px; /* Slightly adjust padding if needed */
    border-radius: 5px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    max-width: 600px; /* Max width of the form */
    width: 90%;
    position: relative;
    box-sizing: border-box;
    /* max-height: 90%; /* Optional: prevent form from being taller than overlay viewport */
    /* overflow-y: auto; /* Optional: add scroll if content exceeds max-height */
}

.map-form-container h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px; /* Slightly smaller title for form */
    color: #303030;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}
.map-form-overlay .close-map-form {
    position: absolute;
    top: 10px;
    right: 10px; /* Ensure enough space from edge */
    font-size: 24px; /* Slightly smaller for better fit */
    font-weight: bold;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.map-form-overlay .close-map-form:hover {
    color: #333;
}

/* Styling for the form elements within the map overlay form */
.map-form-overlay .form-group {
    margin-bottom: 15px;
}
.map-form-overlay .form-control {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #303030;
    background-color: #f0f2f5;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-sizing: border-box;
    line-height: 1.5;
}
.map-form-overlay .form-control::placeholder { color: #888888; opacity: 1; }
.map-form-overlay .form-control:focus {
    border-color: #f9520b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(249, 82, 11, 0.2);
}
.map-form-overlay textarea.form-control {
    min-height: 80px; /* Shorter for this pop-up form */
    resize: vertical;
}
.map-form-overlay .form-submit-map { /* Button specific to this form */
    display: block;
    width: 100%;
    background-color: #f9520b;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 20px;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}
.map-form-overlay .form-submit-map:hover {
    background-color: #e04a0a;
}

/* Responsive Adjustments */
@media (max-width: 991px) and (min-width: 768px) { /* Tablet */
    .contact-us-section .contact-map-column {
        min-height: 500px; /* Maintain or adjust height for form on tablet */
    }
}

@media (max-width: 767px) { /* Mobile */
    .contact-us-section .contact-map-column {
        min-height: auto; /* Let content define height, as form will be visible */
        height: auto; /* Form will dictate height when visible */
        padding-bottom: 20px; /* Add some padding if form is the only content */
    }
    .map-form-overlay {
        position: relative; /* Change from absolute if map is hidden on mobile when form is shown */
        /* OR keep absolute but ensure .contact-map-column has enough intrinsic height
           from the form content itself when the map is hidden */
        /* If map is hidden and form takes over the column: */
        /* opacity: 1; visibility: visible; transform: scale(1); */ /* Make form always visible in this scenario */
    }
    .map-form-container {
        width: 100%; /* Full width on mobile */
        max-width: 100%;
        margin-top: 20px; /* If map is above it */
        box-shadow: none; /* Optional: remove shadow on mobile if it looks cluttered */
    }
    /* .contact-us-section .map-embed-wrapper { */
        /* Decide if map is hidden or shown with form on mobile */
        /* display: none; /* Example: Hide map when form is active on mobile */
    /* } */
    /* .contact-us-section .map-overlay.active { */
        /* display: none; /* If map is hidden, overlay isn't needed */
    /* } */
}


/* ======================= QUALITY ASSURANCE SECTION STYLES ======================= */
/* angled bottom section adapted */
.quality-assurance-section {
    position: relative;
    text-align: center;
    color: #ffffff;
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 80px; /* << IMPORTANT: Must be >= height of .mid-div-angled-bottom */
    overflow: hidden; /* Important to hide elements before they animate in */
    /* min-height: 500px; /* Ensure section has enough height for content */
}

/* Specific background color for THIS instance of the angled bottom */
.qa-angled-bottom-custom-color {
    background-color: #ffffff; /* Set to white, or the color of the section that will be below it */
    /* If you want the angle to be the *other* way for this specific instance:
       clip-path: polygon(100% 0, 0 100%, 100% 100%);
    */
}

.quality-assurance-section .qa-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/general/3d-nador-34-fhomlokzat-madar-badog.jpg'); /* << REPLACE WITH YOUR BACKGROUND IMAGE */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

.quality-assurance-section .qa-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 40, 0.75); /* Dark semi-transparent overlay */
    z-index: 2;
}

.quality-assurance-section .qa-content-wrapper {
    position: relative;
    z-index: 3;
    max-width: 1100px; /* Or your desired content width */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Helps if section has min-height */
    transform: translateY(-30px); /* << Adjust -30px as needed */
}

.qa-block {
    opacity: 0; /* Start transparent */
    transform: translateY(0); /* Initial transform state */
    /* Animation properties will be added by a class or when section is in view */
}

.quality-assurance-section.animate-in .qa-block-top {
    animation: slideInFromTop 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s; /* Slight delay for the top block */
}

.quality-assurance-section.animate-in .qa-block-bottom {
    animation: slideInFromBottom 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.4s; /* Slightly later delay for the bottom block */
}


.qa-block-top {
    /* transform: translateY(-100px); /* Start above */
    margin-bottom: 30px; /* Space between the two blocks */
}

.qa-icon {
    margin-bottom: 20px;
}
.qa-icon img {
    max-width: 60px; /* Adjust icon size */
    height: auto;
}

.qa-block-top h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px; /* Adjust as needed */
    font-weight: 600; /* Bolder */
    line-height: 1.3;
    margin: 0;
    color: #ffffff;
}

/* .qa-block-bottom { */
    /* transform: translateY(100px); /* Start below */
/* } */

.qa-block-bottom p {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 30px;
    color: #e0e0e0; /* Slightly lighter white for subtext */
    max-width: 600px; /* Constrain subtext width */
    margin-left: auto;
    margin-right: auto;
}

.qa-button {
    display: inline-block;
    background-color: #f9520b; /* Orange */
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 40px;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.qa-button:hover {
    background-color: #e04a0a; /* Darker orange */
}

/* Keyframe Animations */
@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-80px); /* Start further up */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at its natural position */
    }
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(80px); /* Start further down */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at its natural position */
    }
}


/* Responsive Adjustments for Quality Assurance Section */
@media (max-width: 767px) {
    .quality-assurance-section {
        padding: 80px 20px;
    }
    .qa-block-top h2 {
        font-size: 28px;
    }
    .qa-block-bottom p {
        font-size: 16px;
    }
    .qa-button {
        font-size: 14px;
        padding: 12px 30px;
    }

    /* Adjust animation start points if needed for mobile */
    @keyframes slideInFromTop { /* Re-declare for mobile if different start needed */
        0% { opacity: 0; transform: translateY(-50px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideInFromBottom { /* Re-declare for mobile if different start needed */
        0% { opacity: 0; transform: translateY(50px); }
        100% { opacity: 1; transform: translateY(0); }
    }
}