/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f8f8;
}
header {
    background-color: #fff; /* Or your desired background color */
    position: fixed; /* This is the key property for fixing the header */
    top: 0; /* Stick it to the top of the viewport */
    left: 0; /* Align it to the left edge */
    width: 100%; /* Make it span the entire width */
    z-index: 100; /* Ensure it stays on top of other content */
}

.navbar {
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 0 15px; /* Add some padding for smaller screens */
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px; /* Adjusted height for better alignment */
    
}

.logo {
    display: inline-block;
}

#logo-img {
    height: 150px;
    size-adjust: 100%;
    margin-left: -30px; /* Adjusted margin */
}

.nav-links {
    list-style: none;
    display: flex;
    margin-top: 35px; /* Adjusted margin for vertical alignment */
    margin-bottom: 35px; /* Adjusted margin for vertical alignment */
}

.nav-links li {
    margin: 0 20px;
    
    font-size: 1.1em; /* Adjusted font size */
    vertical-align: bottom !important;
    initial-letter-align: center !important;
}

.nav-links a {
    text-decoration: none;
    color: #1b1b1b;
    font-weight: 450;
    transition: color 0.2s ease;
    padding-top: 4px !important;
}

.nav-links a:hover {
    color: #1B71FF;
}

.contact-button {
    background-color: transparent;
    border: 2px solid #1B71FF;
    color: #1B71FF;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px; /* Consistent border-radius */
    transition: all 0.3s;
    font-weight: 500;
}

.contact-button:hover {
    background-color: #1B71FF;
    color: white;
    transition: all 0.3s ease;
}

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none; /* Hidden by default, shown in media query */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101; /* Ensure it's above other nav content */
}

.hamburger-bar {
    width: 30px;
    height: 3px;
    background-color: #1b1b1b;
    border-radius: 5px;
    transition: all 0.3s linear;
}

/* Animation for hamburger icon when active */
.hamburger-menu.active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Intro Section Styles */
.intro {
    background-color: #F5FCFF;
    padding-top: 120px !important;/* Space for fixed header */
    padding: 50px 0;
    display: flex; /* Removed height: flex as it's not standard */
}

/* Vertically Center within Columns */
.intro .row {
    display: flex;
    align-items: center;
    padding-top: 70px; /* Adjust based on new navbar height */
    padding-bottom: 70px; /* Adjust based on new navbar height */
}

.intro-text h2 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 10px;
}

.intro-text h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #1B71FF;
    margin-bottom: 20px;
}

.intro-text p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    padding-right: 30px; /* Space between text and button */
}

.get-in-touch-btn {
    background-color: #1B71FF;
    border: 2px solid #1B71FF;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px; /* Consistent border-radius */
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
}

.get-in-touch-btn:hover {
    background-color: transparent;
    color: #1B71FF;
    border-color: #1B71FF;
}

.intro-image {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.single-image {
    width: 125%; /* Changed from 125% for better responsiveness */
    max-width: 1200px; /* Added max-width */
    height: auto;
    border-radius: 15px;
   display: block;
}

/* Responsive adjustments for Navbar and Intro */
@media (max-width: 768px) {
    .navbar-content {
        flex-wrap: wrap; /* Allow items to wrap */
    }

    .logo {
        order: 1; /* Logo first */
    }
    #logo-img {
        height: 100px !important; /* Adjust logo size for smaller screens */
        /* The !important for height: 40px below will override this if it also applies. Consolidate logo height for mobile. */
    }
    .hamburger-menu {
        display: flex; /* Show hamburger menu */
        order: 2; /* Hamburger second */
    }

    .nav-links {
        display: none; /* Hide nav links by default on small screens */
        flex-direction: column;
        width: 100%;
        text-align: center;
        background-color: #fff; /* Add background to expanded menu */
        position: absolute;
        top: 70px; /* Position below the navbar */
        left: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        order: 3; /* Nav links third, below logo and hamburger */
    }
    
    .nav-links.active {
        display: flex; /* Show nav links when hamburger is active */
    }

    .nav-links li {
        margin: 15px 0;
    }
    
    .contact-button {
        display: none; /* Hide contact button on small screens to simplify nav */
    }

    /* This #logo-img rule was repeated, consolidating here */
    #logo-img {
        height: 40px !important; /* Final logo height for small screens */
    }

    .intro .row {
        flex-direction: column; /* Stack intro content */
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .intro-text {
        text-align: center;
        margin-bottom: 30px;
        padding-right: 0;
    }
    .intro-image { 
        display: none; 
    }

     .single-image{ /* This won't apply if .intro-image is display:none */
        width: 80%; 
        max-width: 350px;
     }
}

/* About Us Section Styles */
.about-us {
    background-color: #fff; /* White background */
    padding: 80px 0; /* Adjust padding as needed */
}

.about-us .container {
    max-width: auto; /* Consistent max-width */
    margin: 0 auto;
    padding: 0 20px;
}

.about-us .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Vertically align text and counter */
}

.about-us-text {
    flex: 1 1 50%; /* Allow wrapping and define basis */
    padding-right: 30px; /* Reduced padding */
    min-width: 300px; /* Prevent excessive squishing */
}

.about-us-text h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.about-us-text h1 {
    font-size: 2.2em;
    font-weight: 700;
    color: #333; /* Darker heading color */
    margin-bottom: 20px;
    line-height: 1.3;
}

.about-us-text p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* This .see-detail-btn rule is generic. It's also defined in .services-menu. Ensure they don't conflict or make more specific. */
.see-detail-btn {
    display: inline-block;
    background-color: transparent;
    color: #1B71FF; /* Main color */
    border: 2px solid #1B71FF; /* Main color */
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.see-detail-btn:hover {
    background-color: #1B71FF; /* Main color on hover */
    color: white;
}

.about-us-counter {
    flex: 1 1 40%; /* Allow wrapping and define basis */
    display: flex;
    justify-content: center; /* Center the circle */
    min-width: 300px; /* Prevent excessive squishing */
}

.counter-circle { /* This style seems to be for a single large counter, not the pyramid */
    position: relative;
    width: 300px; /* Adjusted size */
    height: 300px; 
    border-radius: 50%;
    background-color: #f8f8f8; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px; /* Add some margin */
}

.counter-content {
    text-align: center;
    font-size: large;
}

.project-done, .clients { /* Combined for brevity */
    font-size: 1em;
    color: #666;
    margin-bottom: 5px;
}

.counter {
    font-size: 3em; /* Adjusted size */
    font-weight: bolder;
    color: #1B71FF; 
}

/* Style for the counters pyramid */
.counters-pyramid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    width: 100%; 
}

.counter-item {
    width: 100%; 
    display: flex;
    justify-content: center;
    margin-bottom: 10px; 
}

/* Targeting the individual circles in the pyramid */
.counters-pyramid .counter-item .counter-circle {
    position: relative;
    width: 200px; /* Smaller circles for the pyramid */
    height: 200px;
    border-radius: 50%;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px; /* Space around each circle */
}

.counters-pyramid .counter-content {
    text-align: center;
}

.counters-pyramid .project-done,
.counters-pyramid .clients,
.counters-pyramid .years {
    font-size: 0.9em; 
    color: #666;
    margin-bottom: 5px;
}

.counters-pyramid .counter {
    font-size: 2em; 
    font-weight: bold;
    color: #1B71FF;
}

/* Responsive adjustments for about us section */
@media (max-width: 992px) { /* Medium devices */
    .about-us-text {
        padding-right: 15px;
    }
    .counters-pyramid .counter-item .counter-circle {
        width: 180px;
        height: 180px;
    }
    .counters-pyramid .counter {
        font-size: 1.8em;
    }
}


@media (max-width: 768px) {
    .about-us .row {
        flex-direction: column; 
        text-align: center; 
    }
    .about-us-text {
        padding-right: 0;
        margin-bottom: 40px;
    }
    .about-us-counter {
        margin-top: 0; /* Reset margin as it's stacked now */
        width: 100%;
    }
    /* Ensure pyramid items stack nicely */
    .counters-pyramid .counter-item {
        width: 100%; 
        justify-content: center !important; 
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 20px;
    }
    .counters-pyramid .counter-item .counter-circle {
        width: 220px; /* Slightly larger for single column view */
        height: 220px;
    }
    .counters-pyramid .counter {
        font-size: 2.2em;
    }
}



.services-overview {
    padding: 60px 0; 
    background-color: #F5FCFF;
}

.services-overview .container {
    max-width: auto;
    margin: 0 auto;
    padding: 0 20px;

}

.services-overview h2 {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 10px;
}

.services-overview > .container > p { /* Target the main paragraph for the section */
     color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.services-overview .row.about-us-cards {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px; /* Replicate Bootstrap row's negative horizontal margins */
    margin-right: -15px; /* Replicate Bootstrap row's negative horizontal margins */
}

/* Target the .col-md-4 direct children for sizing and spacing */
.services-overview .row.about-us-cards > .col-md-4 {
 
    display: flex; /* Make the column a flex container for the card inside */
    flex-direction: column; /* Stack card content vertically */
    margin-bottom: 30px; /* Spacing between rows of cards if they wrap on smaller screens */
   
}

.services-overview .about-us-card { 
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* Make card fill the .col-md-4 container */
    height: 100%; /* Make card fill the height of .col-md-4 if they have different content heights */
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; /* Distribute space if card content varies */
}


.services-overview .about-us-card .icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: #F5FCFF; 
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    flex-shrink: 0; /* Prevent icon wrapper from shrinking */
}

.services-overview .about-us-card .icon-wrapper img {
    max-width: 60%;
    max-height: 60%;
    display: block;
}

.services-overview .about-us-card h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 10px;
}

.services-overview .about-us-card p {
    color: #666;
    line-height: 1.5;
    flex-grow: 1; /* Allow paragraph to take available space */
}

/* Responsive adjustments for the .services-overview cards */
@media (max-width: 992px) { 
    .services-overview .row.about-us-cards > .col-md-4 {
        flex: 0 0 auto; 
        width: calc(50% - 30px); 
        margin-left: 15px;
        margin-right: 15px;
    }
}

@media (max-width: 768px) { 
    .services-overview .row.about-us-cards > .col-md-4 {
        width: 100%;
        padding-left: 15px; 
        padding-right: 15px;
        margin-left: 0; 
        margin-right: 0;
    }
    .services-overview .about-us-card {
        padding: 20px;
    }
    .services-overview .about-us-card .icon-wrapper {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
    .services-overview .about-us-card h3 {
        font-size: 1.1em;
    }
    .services-overview .about-us-card p {
        font-size: 0.9em;
    }
}


/* =============== MODIFIED SERVICES MENU SECTION FOR FLIP CARDS =============== */
.services-menu {
    background-color: #fff; 
    padding: 60px 0;
    /* text-align: left; Removed, as individual card content is centered or handled by flex */
    /* margin-left: auto; Removed as it's likely not needed with container centering */
}

.services-menu .container {
    max-width: auto; /* Or your preferred max-width */
    margin: 0 auto;
    padding: 0 15px; /* Standard container padding */
}

.services-menu h2 { /* Section Title */
    font-size: 2.2em;
    color: #333;
    margin-bottom: 10px;
    text-align: left; /* Center section title */
}

.services-menu > .container > p { /* Section Subtitle */
     color: #666;
    line-height: 1.6;
    margin-bottom: 40px; /* Increased space before cards */
    text-align: left; /* Center section subtitle */
}

.services-menu .services-cards { /* This is the .row element */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center cards if they don't fill the row */
    gap: 30px; /* Gap between cards (replaces negative margins and padding for gutters if you prefer) */
    /* If using Bootstrap's .row, it might have its own negative margins.
       If so, .service-card (as .col-md-4) would have padding.
       The current HTML uses <div class="row services-cards">.
       And then <div class="col-md-4 service-card">.
       The `gap` property on .services-cards works well if .col-md-4 elements are direct children.
       Alternatively, Bootstrap's gutter classes (e.g. gx-4, gy-4 on the .row) are an option.
    */
}

/* Styling for the .col-md-4.service-card element (the perspective container) */
.services-menu .service-card {
    /* Bootstrap's .col-md-4 handles the width (approx 33.333%) and responsive stacking.
       The flex properties below might be redundant if .col-md-4 is effectively controlling sizing.*/
    display: flex; /* Make it a flex container */
    flex: 0 0 calc(33.333% - 30px); /* Example if using gap and want precise control */
    min-width: 280px;  /* Original min-width, ensure it doesn't break flex layout with gap */
    
    /* Ensure it doesn't have its own padding if service-card-inner is to fill it */
    padding-left: 0; /* Reset padding */
    padding-right: 0;

    perspective: 1000px;
    transition: transform 0.4s ease;
    background-color: transparent; /* Make the col-md-4 container itself invisible */
    border: none; /* No border for the container */
    /* margin-bottom from original .service-card is handled by `gap` on .services-cards or .gy-* on .row */
}

.services-menu .service-card:hover {
    transform: scale(1.03); /* Slight size increase on hover */
    z-index: 10; /* Ensure hovered card is on top */
}

/* Inner flipping element */
.services-menu .service-card .service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 450px; /* Adjust as needed for your content */
    text-align: center;
    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); /* Adjusted timing function */
    transform-style: preserve-3d;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12); /* Softer shadow */
    border-radius: 10px;
}

.services-menu .service-card:hover .service-card-inner {
    transform: rotateY(180deg);
}

/* Front and Back Faces Common Styles */
.services-menu .service-card .service-card-front,
.services-menu .service-card .service-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px; /* Padding inside each face */
    border-radius: 10px; /* Match inner */
    overflow: hidden; /* Prevent content spill */
}

/* Front Face Specific Styles */
.services-menu .service-card .service-card-front {
    background-color: #fff;
}

.services-menu .service-card .service-card-front .icon-wrapper {
    width: 70px; /* Slightly smaller icon wrapper */
    height: 70px;
    background-color: #F5FCFF;
    border-radius: 8px; /* Slightly less rounded */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px; /* Keep original margin */
}

.services-menu .service-card .service-card-front .icon-wrapper img {
    max-width: 55%; /* Adjust icon size */
    max-height: 55%;
    display: block;
}

.services-menu .service-card .service-card-front h3 {
    font-size: 1.25em; /* Slightly larger front heading */
    color: #333;
    margin-bottom: 12px; /* Adjust spacing */
    min-height: initial; /* Remove min-height if not needed for alignment */
}

.services-menu .service-card .service-card-front p {
    color: #555; /* Slightly darker paragraph text */
    line-height: 1.6;
    margin-bottom: 20px; /* Original margin */
    flex-grow: 1; /* Allow paragraph to expand */
}

.services-menu .service-card .service-card-front .see-detail-btn {
    display: inline-block;
    padding: 10px 22px; /* Adjust padding */
    background-color: #1B71FF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500; /* Ensure font-weight */
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: auto; /* Push to bottom */
}

.services-menu .service-card .service-card-front .see-detail-btn:hover {
    background-color: #0d4da8;
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Back Face Specific Styles */
.services-menu .service-card .service-card-back {
    background-color: #1B71FF; /* Primary color background */
    color: white; /* Default text color for back */
    transform: rotateY(180deg);
}

.services-menu .service-card .service-card-back h3 {
    font-size: 1.25em; /* Consistent with front for balance */
    font-weight: 600;
    margin-bottom: 15px;
    color: white; /* Explicitly white */
}

.services-menu .service-card .service-card-back p {
    font-size: 0.9em; /* Slightly smaller for more text */
    line-height: 1.7; /* More line height for readability */
    margin-bottom: 20px;
    flex-grow: 1;
    color: white; /* Explicitly white */
    opacity: 0.9; /* Slight opacity for softer text */
    
}

.services-menu .service-card .service-card-back ul {

    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    text-align: left; /* Align text to the left */
    margin-bottom: 20px;
}

.services-menu .service-card .service-card-back .see-detail-btn {
    background-color: #fff;
    color: #1B71FF;
    border: 2px solid #fff; /* Border matches background for a subtle effect */
    padding: 10px 22px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    margin: 20px 0 0; /* Margin to separate from content above */
    display: inline-block; /* Ensure it's treated as a button */
}

.services-menu .service-card .service-card-back .see-detail-btn:hover {
    background-color: transparent; /* Transparent background */
    color: #fff; /* White text */
    border-color: #fff; /* White border */
    transform: translateY(-2px);
}


@media (max-width: 992px) {
    /* If Bootstrap's col-md-4 is used, it will try to keep 3 columns until <768px.
       If you need 2 columns on tablets (between 768px and 992px), you'd use col-lg-4 col-md-6 in HTML.
       Or, override .col-md-4 behavior here if it's still .col-md-4 in HTML: */
 
}

@media (max-width: 768px) {
   
    .services-menu .service-card .service-card-front p,
    .services-menu .service-card .service-card-back p {
        font-size: 0.95em; /* Adjust paragraph font size on smaller screens for readability */
    }
    .services-menu h2, .services-menu > .container > p {
        text-align: center; 
    }
}
/* =============== END OF MODIFIED SERVICES MENU SECTION =============== */


.contact-section {
    padding: 60px 0; 
    background-color: #F5FCFF;
}

.contact-info-col,
.form-col {
    padding: 20px; 
}

.contact-info-col h1 {
    margin-bottom: 1rem;
}

.contact-description {
    margin-bottom: 2rem;
    color: #666; 
}

.contact-details p {
    margin-bottom: 10px;
    display: flex; 
    align-items: center; 
    color: #333; 
}

.contact-icon {
    width: 20px; 
    height: auto;
    margin-right: 10px;
}

.contact-social-icons {
    display: flex;
    margin-top: 20px;

}
.contact-section .contact-social-icons img {
   filter: brightness(0) saturate(100%) invert(0%);
}
.contact-social-icons a {
    margin-right: 10px;
}

.contact-social-icons img {
    width: 30px;
    height: auto;
}

.form-control {
    background-color: #f8f9fa; 
    border: 1px solid #ced4da; 
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 15px; 
    color: #495057; 
    width: 100%; 
}

.form-control::placeholder {
    color: #6c757d; 
    opacity: 1; 
}

.form-control:focus {
    border-color: #1B71FF; 
    box-shadow: 0 0 0 0.2rem rgba(27, 113, 255, 0.25); 
}

.form-control:hover {
    border-color: #1B71FF; 
}

.form-control[rows] {
    height: auto; 
}

.submit-button {
    background-color: #1B71FF; 
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; 
}

.submit-button:hover {
    background-color: #0d4da8; 
}

@media (max-width: 768px) {
    .contact-info-col,
    .form-col {
        padding: 10px; 
        margin-bottom: 20px; /* Add margin between stacked columns */
    }
    .contact-info-col {
        text-align: center; /* Center contact info on small screens */
    }
    .contact-details p {
        justify-content: center; /* Center contact details items */
    }
    .contact-social-icons {
        justify-content: center; /* Center social icons */
    }
    .contact-section {
        padding: 40px 0; 
    }
}


/* Client Section Styles */
.client-section {
    background-color: #fff;
    padding: 60px 0;
    text-align: left; /* Center the heading */
}

.client-section h2 {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 40px; /* Increased margin */
}

.client-logos {
    display: flex;
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 30px; /* Add gap for spacing */
}

.client-logos img {
    height: 50px; /* Adjusted logo size */
    width: auto; /* Maintain aspect ratio */
    margin: 0; /* Remove individual margin as gap is used */
    transition: transform 0.3s ease; 
    filter: grayscale(100%); /* Make logos grayscale initially */
    opacity: 0.7;
}

.client-logos img:hover {
    transform: scale(1.1); 
    filter: grayscale(0%); /* Color on hover */
    opacity: 1;
}

@media (max-width: 768px) {
    .client-logos img {
        height: 40px; 
    }
    .client-logos {
        gap: 20px;
    }
    .client-section{
        text-align: center;
    }
}


/* Footer Styles */
.main-footer {
    background-color: #3b3b3b;
    color: #fff;
    padding: 40px 0;
    font-family: 'Roboto', sans-serif; /* Changed font */
}

.main-footer .container {
    max-width: auto;
}

.main-footer .row > div { /* Target direct children of .row */
    margin-bottom: 30px; /* Add space between columns when they stack */
}


.contact-info p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.9em;
}

.social-icons {
    display: flex;
    margin-top: 15px; /* Reduced margin */
}

.social-icons a {
    margin-right: 10px;
}

.social-icons img {
    width: 24px; /* Slightly smaller social icons */
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.social-icons img:hover {
    opacity: 1;
}


.footer-navigation h3,
.contact-info h3 { /* Combined for brevity */
    color: #fafafa;
    margin-bottom: 15px; /* Increased margin */
    font-weight: 500; /* Adjusted font weight */
    font-size: 1.1em;
}

.footer-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-navigation li {
    margin-bottom: 8px; /* Increased margin */
}

.footer-navigation a{
    color: #ccc; /* Lighter color for links */
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
}
.footer-navigation a:hover {
    color: #fff;
}


.footer-logo {
    text-align: left; /* Align to left on large screens */
    margin-bottom: 10px;
}

.footer-logo img {
    max-width: 170px; /* Adjusted logo size */
    height: auto;
    margin-bottom: -35px; /* Adjusted margin */
    margin-top: -50px;
    margin-left: -35px; /* Adjusted margin */
}
.footer-logo p {
    font-size: 0.9em;
    color: #ccc;
    margin: 0;
}

.copyright {
    text-align: left; /* Align to left on large screens */
    font-size: 0.8em;
    color: #aaa;
    line-height: 1.4;
}
.copyright p {
    margin:0;
}

.footer-cetifications {
    display: flex;
    justify-content: flex-start; /* Align to left on large screens */
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px;
}
.footer-cetifications img {
    height: 45px; /* Adjusted certification icon size */
    width: auto;
    margin: 0; /* Remove margin as gap is used */
    opacity: 1;
}

@media (max-width: 992px) { /* Medium devices */
    .footer-logo, .copyright, .footer-cetifications {
        text-align: center; /* Center these elements on medium screens */
        justify-content: center;
    }
}


@media (max-width: 768px) { /* Small devices */
    .main-footer .col-lg-4, .main-footer .col-md-6, .main-footer .col-md-12 {
        text-align: center; /* Center all footer content on small screens */
    }
    .social-icons {
        justify-content: center;
    }
     .footer-logo, .copyright, .footer-cetifications {
        text-align: center;
        justify-content: center;
    }
}

/* There was an extra closing brace here in your original file, I've removed it. */