/* =======================================
   GLOBAL SETTINGS
   ======================================= */

/* Apply base styles to the entire document body */
body {
    font-family: Arial, sans-serif; /* Define the primary font family used across the website */
    width: 100%;                    /* Ensure the body spans the full viewport width */
    margin: 0;                      /* Remove default browser margin */
    padding: 0;                     /* Remove default browser padding */
}

/* Apply box-sizing model globally to all elements */
*,                              /* Select all elements */
*::before,                      /* Select before pseudo-element of all elements */
*::after {                       /* Select after pseudo-element of all elements */
    box-sizing: border-box;      /* Include padding and border in element width and height calculations */
}

/* =======================================
   HEADER
   ======================================= */

/* Main header container */
header {
    display: flex;                    /* Enable flexbox layout for header */
    align-items: center;              /* Vertically center all header items */
    justify-content: space-between;   /* Separate logo area and navigation */
    padding: 20px 40px;               /* Add inner spacing inside the header */
}

/* ---------- Logo (clickable) ---------- */

/* Anchor element wrapping the logo */
.logo-link {
    text-decoration: none;            /* Remove underline from the logo link */
    color: inherit;                   /* Inherit text color from parent */
}

/* Wrapper holding logo square and text */
.logo-wrapper {
    display: flex;                    /* Align logo elements horizontally */
    align-items: center;              /* Vertically center logo elements */
    gap: 18px;                        /* Space between logo square and text */
}

/* ---------- Logo square ---------- */

/* Square container for initials */
.logo-box {
    width: 70px;                      /* Set fixed width of the logo square */
    height: 70px;                     /* Set fixed height of the logo square */
    background-color: #000;           /* Apply black background color */
    display: flex;                    /* Enable flexbox inside logo square */
    justify-content: center;          /* Center initials horizontally */
    align-items: center;              /* Center initials vertically */
}

/* Initials inside the logo square */
.logo-initials {
    color: #fff;                      /* Set initials color to white */
    font-size: 32px;                  /* Define initials font size */
    font-weight: 700;                 /* Use bold font weight */
    letter-spacing: 1px;              /* Add slight spacing between letters */
}

/* ---------- Logo text (name + title) ---------- */

/* Container for lawyer name and title */
.logo-text {
    display: flex;                    /* Use flexbox for vertical stacking */
    flex-direction: column;           /* Stack name and title vertically */
    line-height: 1.1;                 /* Reduce line spacing for compact look */
}

/* Lawyer full name text */
.logo-name {
    font-size: 20px;                  /* Set font size for lawyer name */
    font-weight: 600;                 /* Apply semi-bold font weight */
    letter-spacing: 0.5px;            /* Add subtle letter spacing */
}

/* Lawyer title text */
.logo-title {
    font-size: 14px;                  /* Set font size for subtitle */
    font-weight: 500;                 /* Apply medium font weight */
    color: #555;                      /* Use muted gray color */
    letter-spacing: 1px;              /* Increase spacing for formal appearance */
    margin-top: 4px;                  /* Add spacing above the title */
}

/* =======================================
   NAVIGATION
   ======================================= */

/* Navigation list container */
.main-nav ul {
    display: flex;                    /* Use flexbox for horizontal navigation layout */
    align-items: center;              /* Vertically align navigation items */
    gap: 35px;                        /* Define spacing between navigation links */
    margin: 0;                        /* Remove default list margin */
    padding: 0;                       /* Remove default list padding */
    list-style: none;                 /* Remove default bullet points */
}

/* Navigation links */
.main-nav a {
    font-size: 18px;                  /* Set font size for navigation links */
    font-weight: 500;                 /* Apply medium font weight */
    text-decoration: none;            /* Remove underline from links */
    color: #000;                      /* Set link text color to black */
    padding: 10px 0;                  /* Increase vertical clickable area */
    transition: color 0.2s ease, 
                opacity 0.2s ease;    /* Smooth hover transition */
    white-space: nowrap;              /* Prevent text wrapping into multiple lines */
}

/* Navigation hover state */
.main-nav a:hover {
    color: #000;                      /* Keep text color unchanged on hover */
    opacity: 0.6;                     /* Slightly reduce opacity on hover */
}

/* =======================================
   RESPONSIVE HEADER – MOBILE MENU
   ======================================= */

/* Wrapper for logo and hamburger toggle */
.header-top {
    display: flex;                    /* Enable flexbox layout */
    align-items: center;              /* Vertically center elements */
    justify-content: center;          /* Center content horizontally */
    flex-direction: row;              /* Use row layout on desktop */
    gap: 10px;                        /* Space between logo and toggle button */
}

/* Hamburger menu button (hidden on desktop) */
.menu-toggle {
    display: none;                    /* Hide hamburger button by default */
    font-size: 28px;                  /* Set hamburger icon size */
    background: none;                 /* Remove default button background */
    border: none;                     /* Remove default button border */
    cursor: pointer;                  /* Show pointer cursor on hover */
    color: #000;                      /* Set icon color to black */
}

/* =======================================
   RESPONSIVE HEADER – MOBILE LAYOUT
   ======================================= */

@media (max-width: 768px) {

    /* Stack header elements vertically on mobile */
    header {
        flex-direction: column;       /* Change header layout to column */
        align-items: center;           /* Center header elements horizontally */
        gap: 12px;                     /* Add spacing between header elements */
    }

    /* Stack logo and toggle vertically */
    .header-top {
        flex-direction: column;        /* Place logo above toggle button */
        align-items: center;           /* Center elements horizontally */
    }

    /* Display hamburger button on mobile */
    .menu-toggle {
        display: block;                /* Show hamburger button */
        margin-top: 6px;               /* Add space below logo */
    }

    /* Hide navigation menu by default on mobile */
    .main-nav {
        display: none;                 /* Hide navigation menu */
        width: 100%;                   /* Allow full width when shown */
    }

    /* Show navigation menu when active */
    .main-nav.active {
        display: block;                /* Display navigation menu */
    }

    /* Stack navigation links vertically */
    .main-nav ul {
        flex-direction: column;        /* Arrange links in a vertical column */
        align-items: center;           /* Center links horizontally */
        gap: 14px;                     /* Space between navigation links */
        margin: 0;                     /* Ensure no extra margin */
        padding: 0;                    /* Ensure no extra padding */
    }
}

/* =======================================
   FOOTER
   ======================================= */

/* Footer main container */
footer {
    background-color: #f8f8f8;        /* Set light gray background color */
    border-top: 1px solid #e0e0e0;     /* Add subtle top border for separation */
    padding: 25px 0;                  /* Apply vertical padding */
    margin-top: 0;                    /* Prevent extra space above footer */
}

/* Inner footer content wrapper */
.footer-container {
    max-width: 1100px;                /* Limit footer width for readability */
    margin: 0 auto;                   /* Center footer container horizontally */
    text-align: center;               /* Center-align footer text */
    color: #555;                      /* Use muted gray text color */
    font-size: 14px;                  /* Set smaller font size */
    line-height: 1.6;                 /* Improve text readability with spacing */
}

/* =======================================
   CONTACT.HTML
   ======================================= */

/* Main contact page wrapper */
.contact-wrapper {
    background-color: #f8f8f8;        /* Apply same background color as footer */
    padding: 80px 20px 300px 20px;     /* Set top, horizontal and large bottom spacing */
}

/* Contact content card */
.contact-box {
    background-color: #ffffff;        /* Set white background for content box */
    border: 1px solid #dcdcdc;         /* Add thin gray border */
    padding: 60px 50px;                /* Apply inner spacing */
    max-width: 700px;                  /* Limit maximum width */
    width: 100%;                       /* Enable responsive width */
    margin: 0 auto;                    /* Center the box horizontally */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Apply soft shadow */
    border-radius: 12px;               /* Add rounded corners */
    text-align: left;                  /* Align text to the left */
}

/* Contact page main heading */
.contact-box h1 {
    font-size: 32px;                   /* Set large heading font size */
    margin-bottom: 30px;               /* Add space below heading */
    text-align: center;                /* Center-align heading */
    font-weight: 600;                  /* Apply semi-bold font weight */
    letter-spacing: 1px;               /* Increase letter spacing */
}

/* Contact information paragraphs */
.contact-box p {
    font-size: 18px;                   /* Set paragraph font size */
    margin: 12px 0;                    /* Add vertical spacing */
    line-height: 1.6;                  /* Improve text readability */
    text-align: left;                  /* Align text to the left */
    text-justify: inter-word;          /* Improve word spacing */
}

/* Contact links */
.contact-box a {
    color: #1a1a1a;                    /* Set dark link color */
    text-decoration: underline;        /* Underline links */
    font-weight: 500;                  /* Apply medium font weight */
    transition: color 0.2s ease;       /* Smooth color transition on hover */
}

/* Hover state for contact links */
.contact-box a:hover {
    color: #555;                       /* Change link color on hover */
}

/* Viber availability note */
.viber-note {
    font-size: 14px;                   /* Set smaller font size */
    color: #555;                       /* Use muted gray color */
    margin-left: 8px;                  /* Add spacing from phone number */
}

/* Contact page icons */
.contact-icon {
    width: 24px;                       /* Set icon width */
    height: 24px;                      /* Set icon height */
    vertical-align: middle;            /* Align icon with text */
    margin-right: 10px;                /* Add space between icon and text */
    filter: invert(0);                 /* Keep original black icon color */
}

/* Primary button hover inside contact page */
.contact-box .btn-primary:hover {
    background-color: #222;                   /* Darken the black background slightly on hover */
    transform: translateY(-2px);              /* Slightly lift the button upwards for visual feedback */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Apply soft shadow for depth effect on hover */
    color: #fff;                              /* Keep the text color white on hover */
}

/* Secondary button hover inside contact page */
.contact-box .btn-secondary:hover {
    background-color: #000;                   /* Change background to black on hover */
    color: #fff;                              /* Change text to white for contrast */
    transform: translateY(-2px);              /* Lift button slightly on hover for consistency */
}


/* =======================================
   CONTACT.HTML – RESPONSIVE DESIGN
   ======================================= */

@media (max-width: 700px) {

    /* Stack icon above text on mobile */
    .contact-box p {
        display: flex;                     /* Enable flex layout */
        flex-direction: column;            /* Stack icon and text vertically */
        align-items: center;               /* Center content horizontally */
        text-align: center;                /* Center-align text */
        margin: 20px 0;                    /* Increase vertical spacing */
        font-size: 16px;                   /* Reduce font size */
        line-height: 1.4;                  /* Adjust line height */
    }

    /* Hide labels such as Phone, Email, Address */
    .contact-box p strong {
        display: none;                     /* Remove labels on mobile */
    }

    /* Contact icon adjustments on mobile */
    .contact-icon {
        margin-bottom: 6px;                /* Add space below icon */
        width: 24px;                        /* Keep icon width */
        height: 24px;                       /* Keep icon height */
    }

    /* Viber note displayed below phone number */
    .viber-note {
        display: block;                     /* Force new line */
        margin: 4px 0 0 0;                  /* Add spacing above note */
        font-size: 14px;                    /* Keep smaller font size */
        color: #555;                        /* Use muted color */
    }

    /* Extra spacing between contact rows */
    .contact-box p:not(:last-child) {
        margin-bottom: 24px;                /* Add spacing between rows */
    }
}

/* =======================================
   SERVICES.HTML – PRACTICE AREAS
   ======================================= */

/* Wrapper for the services page */
.services-wrapper {
    background-color: #f8f8f8;          /* Apply light gray background */
    padding: 80px 20px 100px 20px;      /* Set top, horizontal and bottom spacing */
}

/* Main white container */
.services-box {
    background-color: #ffffff;          /* White background for content card */
    border: 1px solid #dcdcdc;         /* Thin gray border */
    padding: 60px 50px;                 /* Inner spacing */
    max-width: 900px;                   /* Limit maximum width */
    width: 100%;                         /* Enable responsive resizing */
    margin: 0 auto;                      /* Center container horizontally */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Soft shadow */
    border-radius: 12px;                /* Rounded corners */
    display: flex;                       /* Flex container for vertical alignment */
    flex-direction: column;              /* Stack children vertically */
    align-items: center;                 /* Center children horizontally */
}

/* Main services page heading */
.services-box h1 {
    font-size: 32px;                     /* Large heading size */
    margin-bottom: 25px;                 /* Space below heading */
    text-align: center;                  /* Center heading text */
    font-weight: 600;                    /* Semi-bold font weight */
    letter-spacing: 1px;                 /* Increase letter spacing */
}

/* Introductory text under heading */
.services-box .intro-text {
    font-size: 18px;                     /* Medium font size */
    text-align: center;                  /* Center text */
    line-height: 1.6;                    /* Improve readability */
    margin-bottom: 40px;                 /* Space before grid */
    color: #1a1a1a;                      /* Dark text color */
    text-justify: inter-word;            /* Improve word spacing */
}

.services-box .button-container {
    width: 100%;           /* Full width so buttons don't shrink */
    justify-content: center;/* Keep centered */
}

/* =======================================
   PRACTICE AREAS GRID
   ======================================= */

/* Grid container */
.practice-icons {
    display: grid;                       /* Enable CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    gap: 25px;                           /* Space between grid items */
    justify-items: center;               /* Center items horizontally */
    align-items: start;                  /* Align items to top */
    padding: 0;                          /* Remove default padding */
    margin: 0;                           /* Remove default margin */
    list-style: none;                    /* Remove list bullets */
}

/* Tablet layout */
@media (max-width: 900px) {
    .practice-icons {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
    }
}

/* Mobile layout */
@media (max-width: 600px) {
    .practice-icons {
        grid-template-columns: 1fr;      /* Single column on mobile */
    }
}

/* Individual practice area card */
.practice-icons li {
    display: flex;                       /* Enable flexbox */
    flex-direction: column;              /* Stack content vertically */
    align-items: center;                 /* Center horizontally */
    text-align: center;                  /* Center text */
    padding: 20px;                       /* Inner spacing */
    border-radius: 12px;                 /* Rounded corners */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover animation */
    cursor: default;                     /* Default cursor */
}

/* Hover effect for practice card */
.practice-icons li:hover {
    transform: translateY(-5px);         /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* Add shadow on hover */
}

/* Practice area icon */
.practice-icons img {
    width: 36px;                         /* Icon width */
    height: 36px;                        /* Icon height */
    margin-bottom: 12px;                 /* Space below icon */
    transition: transform 0.2s ease;     /* Smooth scaling animation */
}

/* Icon hover scaling */
.practice-icons li:hover img {
    transform: scale(1.1);               /* Slight zoom effect */
}

/* Practice area title */
.practice-icons li span {
    font-size: 16px;                     /* Text size */
    font-weight: 600;                    /* Semi-bold font */
    color: #000;                         /* Black text color */
    margin-bottom: 6px;                  /* Space below title */
}

/* Practice area description */
.practice-icons li p {
    font-size: 14px;                     /* Smaller text size */
    font-weight: 400;                    /* Normal font weight */
    color: #555;                         /* Muted gray color */
    line-height: 1.4;                    /* Comfortable line height */
    max-width: 200px;                    /* Limit line length */
    margin: 0;                           /* Remove default margin */
    text-align: center;                  /* Center text */
    text-justify: inter-word;            /* Improve word spacing */
}

/* =======================================
   ABOUT.HTML
======================================= */

/* Main white card container */
.about-box {
    background-color: #ffffff;               /* White background for content card */
    border: 1px solid #dcdcdc;              /* Thin gray border */
    padding: 60px 50px;                      /* Inner spacing */
    max-width: 700px;                        /* Limit maximum width */
    width: 100%;                             /* Responsive width */
    margin: 0 auto;                          /* Center horizontally */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);/* Soft shadow for depth */
    border-radius: 12px;                     /* Rounded corners */
    font-family: Arial, sans-serif;          /* Base font */
    color: #1a1a1a;                          /* Primary text color */
    text-rendering: optimizeLegibility;      /* Improve text rendering */
    -webkit-font-smoothing: antialiased;     /* Smooth font rendering on WebKit */
}

/* Page background wrapper */
.about-wrapper {
    background-color: #f8f8f8;               /* Light gray background */
    padding: 80px 20px 300px 20px;           /* Top, horizontal and bottom spacing */
}

/* Hidden H1 used only for SEO */
.about-wrapper h1 {
    display: none;                            /* Hide from visual layout */
}

/* Main content container */
.about-content {
    display: flex;                            /* Enable flexbox */
    flex-direction: column;                   /* Stack sections vertically */
    gap: 90px;                                /* Space between sections */
}

/* Single logical content section */
.about-section {
    display: flex;                            /* Enable flexbox */
    flex-direction: column;                   /* Vertical layout */
    align-items: center;                      /* Center horizontally */
}

/* Section heading */
.about-section h2 {
    font-size: 26px;                          /* Section title size */
    font-weight: 600;                         /* Semi-bold font */
    text-align: center;                       /* Center heading text */
    letter-spacing: 0.5px;                    /* Slight letter spacing */
    color: #000;                              /* Black color */
    margin-bottom: 30px;                      /* Space below heading */
}

/* Image wrapper */
.about-photo {
    display: flex;                            /* Enable flexbox */
    justify-content: center;                  /* Center image horizontally */
    margin-bottom: 35px;                      /* Space below image */
}

/* Profile image */
.about-photo img {
    width: 260px;                             /* Fixed image width */
    height: auto;                             /* Preserve aspect ratio */
    border-radius: 0;                         /* No rounded corners */
}

/* Text container */
.about-text {
    width: 100%;                              /* Full available width */
}

/* Paragraph text styling */
.about-text p {
    font-size: 18px;                          /* Paragraph font size */
    line-height: 1.8;                         /* Comfortable line height */
    font-weight: 500;                         /* Medium font weight */
    margin: 0;                                /* Remove default margins */
    color: #1a1a1a;                           /* Text color */
    text-align: justify;                      /* Justified text */
    text-justify: inter-word;                 /* Improve word spacing */
    margin-bottom: 20px;                      /* spacing between paragraphs */
}

.about-segment {
    padding: 15px 0;           /* vertical spacing: 15px top and bottom inside each segment */
    border-top: 1px solid #eee; /* light gray line above each segment to separate visually */
}

.about-segment:first-child {
    border-top: none;          /* remove top border for the first segment so it doesn't double the spacing */
}

.about-segment strong {
    display: block;            /* make <strong> a block element so it starts on a new line */
    font-size: 18px;           /* slightly larger font for headings inside segments */
    margin-bottom: 8px;        /* spacing below the heading before paragraph text */
    color: #000;               /* set text color to black for headings */
    text-align: center;        /* center the text horizontally within the segment */
}


/* =======================================
   ABOUT.HTML – RESPONSIVE DESIGN
======================================= */

@media (max-width: 768px) {

    .about-content {
        gap: 50px;                            /* Reduce spacing on mobile */
    }

    .about-row {
        flex-direction: column;               /* Stack image above text */
        align-items: center;                  /* Center content */
    }

    .about-section h2 {
        text-align: center;                   /* Ensure centered heading */
    }

    .about-photo img {
        width: 100%;                          /* Full width on mobile */
        max-width: 320px;                     /* Limit max image size */
    }
}

/* =======================================
   HOMEPAGE
   ======================================= */

/* Wrapper for homepage section */
.home-wrapper {
    background-color: #f8f8f8;  /* Light grey background */
    padding: 100px 20px 300px 20px;  /* Top, right, bottom, left spacing */
}

/* Main content card */
.home-box {
    background-color: #ffffff;  /* White card */
    border-radius: 12px;  /* Rounded corners */
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);  /* Softer shadow */
    padding: 60px 50px;  /* Inner spacing */
    max-width: 900px;  /* Card width limit */
    width: 100%;  /* Full width */
    margin: 0 auto;  /* Center card */
    text-align: center;  /* Center text inside card */
}

/* Homepage image inside card */
.home-image img {
    width: 70px;  /* Icon width */
    margin-bottom: 30px;  /* Space below icon */
    opacity: 0.9;  /* Slight transparency */
}

/* Main heading */
.home-box h1 {
    font-size: 36px;  /* Heading size */
    font-weight: 600;  /* Semi-bold */
    margin-bottom: 20px;  /* Space below heading */
    color: #000;  /* Black text */
    letter-spacing: 1px;  /* Slight letter spacing */
}

/* Subtitle / paragraph */
.home-subtitle {
    font-size: 18px;  /* Paragraph size */
    color: #555;  /* Dark grey text */
    line-height: 1.6;  /* Readable line height */
    margin-bottom: 40px;  /* Space below subtitle */
    text-align: center;  /* Center text */
}

/* Contact footer inside home box */
.home-contact {
    display: flex;  /* Flex layout */
    justify-content: center;  /* Center items */
    gap: 40px;  /* Space between items */
    padding-top: 30px;  /* Space above contact */
    border-top: 1px solid #eee;  /* Top border */
    flex-wrap: wrap;  /* Wrap items on small screens */
}

/* Individual contact item */
.contact-item {
    display: flex;  /* Flex layout */
    align-items: center;  /* Center vertically */
    gap: 10px;  /* Space between icon and text */
    font-size: 15px;  /* Text size */
    color: #444;  /* Text color */
}

.contact-item img {
    width: 20px;  /* Icon width */
    height: 20px;  /* Icon height */
    opacity: 0.7;  /* Slight transparency */
}

/* =======================================
   CONTACT LINKS (PHONE & EMAIL)
   ======================================= */

/* Style phone and email links to look like regular text */
.contact-item a {
    color: inherit;              /* Inherit text color from parent (.contact-item) */
    text-decoration: none;       /* Remove default underline */
    font-size: inherit;          /* Use the same font size as surrounding text */
    font-family: inherit;        /* Use the same font family as surrounding text */
    font-weight: inherit;        /* Use the same font weight as surrounding text */
    text-decoration: underline; /* Show underline */
}

/* Optional hover effect for better UX */
.contact-item a:hover {
    text-decoration: underline; /* Show underline only on hover */
}

/* Prevent Safari from forcing blue color and underline on detected phone/email links */
a[x-apple-data-detectors],
a[x-apple-data-detectors-type="telephone"],
a[x-apple-data-detectors-type="email"] {
    color: inherit !important;          /* Force inherited text color */
    text-decoration: none !important;   /* Remove Safari underline */
}


/* =======================================
   HOMEPAGE – MOBILE RESPONSIVE
======================================= */
@media (max-width: 600px) {

    /* Wrapper padding adjustments for small screens */
    .home-wrapper {
        padding: 60px 15px 200px 15px;  /* Top, right, bottom, left */
    }

    /* Home box adjustments */
    .home-box {
        padding: 40px 25px;             /* Smaller inner padding */
        max-width: 90%;                 /* Fit smaller screens */
    }

    /* Homepage image */
    .home-image img {
        width: 60px;                    /* Slightly smaller icon */
        margin-bottom: 20px;            /* Less spacing below */
    }

    /* Main heading */
    .home-box h1 {
        font-size: 28px;                /* Smaller heading */
        margin-bottom: 15px;            /* Reduced spacing */
    }

    /* Subtitle / paragraph */
    .home-subtitle {
        font-size: 16px;                /* Slightly smaller text */
        margin-bottom: 30px;            /* Reduced spacing */
        line-height: 1.5;               /* Slightly tighter lines */
    }

    /* Contact footer: center the whole block */
    .home-contact {
        display: flex;                  /* Flex layout */
        flex-direction: column;         /* Stack items vertically */
        gap: 15px;                      /* Space between items */
        padding-top: 20px;              /* Padding above */
        border-top: 1px solid #eee;     /* Keep top border visible */
        width: fit-content;             /* Shrink to fit content */
        margin: 0 auto;                 /* Center block horizontally */
    }

    /* Each contact item: icon + text row */
    .home-contact .contact-item {
        display: flex;                  /* Row layout */
        align-items: center;            /* Vertical alignment */
        gap: 8px;                       /* Space between icon and text */
    }

    /* Contact icons */
    .home-contact .contact-item img {
        width: 18px;                    /* Slightly smaller icon */
        height: 18px;
    }
}

/* =======================================
   BUTTONS - END OF THE HTML PAGE
======================================= */

/* Button container – centers buttons and allows wrapping on small screens */
.button-container {
    display: flex;                /* Flex container for buttons */
    justify-content: center;      /* Center buttons horizontally */
    gap: 20px;                    /* Space between buttons */
    margin-top: 40px;             /* Space above buttons */
    flex-wrap: wrap;              /* Wrap buttons on smaller screens */
    margin-bottom: 50px;          /* Space below buttons */
}

/* Common button styles */
.button-container .btn {
    padding: 12px 36px;           /* Vertical and horizontal padding */
    border-radius: 8px;           /* Rounded corners */
    font-size: 16px;              /* Font size */
    font-weight: 600;             /* Semi-bold text */
    text-decoration: none;        /* Remove underline */
    text-align: center;           /* Center text */
    transition: all 0.2s ease;    /* Smooth hover transition */
    min-width: 180px;             /* Uniform minimum width */
    cursor: pointer;              /* Pointer on hover */
    display: inline-block;        /* Ensure proper sizing */
}

/* Primary button */
.button-container .btn-primary {
    background-color: #000;       /* Black background */
    color: #fff;                  /* White text */
    border: none;                 /* Remove border */
}

/* Secondary button */
.button-container .btn-secondary {
    background-color: #fff;       /* White background */
    color: #000;                  /* Black text */
    border: 1px solid #000;       /* Black border */
}

/* Hover effects */
.button-container .btn-primary:hover {
    background-color: #222;                       /* Slightly lighter black */
    transform: translateY(-2px);                  /* Lift effect */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);     /* Shadow on hover */
}

.button-container .btn-secondary:hover {
    background-color: #000;       /* Black background on hover */
    color: #fff;                  /* White text on hover */
    transform: translateY(-2px);  /* Lift effect */
}


/* =======================================
   BUTTONS - END OF THE HTML PAGE – RESPONSIVE DESIGN
======================================= */
@media (max-width: 600px) {
    .button-container .btn-primary,
    .button-container .btn-secondary {
        width: 100%;           /* Full width */
        max-width: 250px;      /* Limit width to match contact page */
        text-align: center;    /* Center text */
        box-sizing: border-box;/* Include padding in width */
        padding: 12px 0;       /* Uniform vertical padding */
        font-size: 14px;       /* Font size adjusted for mobile */
    }

    /* Stack buttons vertically with gap */
    .button-container{
        flex-direction: column; /* Stack vertically */
        gap: 15px;              /* Space between buttons */
        align-items: center;    /* Center horizontally */
    }
}