/* ========================================================================================================== */
/* %%%%%%%%%%%%%%%%%%%%%%%%&&&&&&&&&&&&&  Banner Style Start ^^^^^^^^^^^^^^^^^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/* ========================================================================================================== */

html, body {
  overflow-x: hidden;
}

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

.custom-feature-section,
.content-col,
.card-box {
    color: white;
}

.feature-cards-image-section .feature-cards-grid,
.row-1,
.row-2 {
    overflow: hidden;
}

.card-box {
    background-color: #15152a;
    background: #15152a;
}




.feature-card-image-box {
    cursor: pointer;
}

.engineering-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../mecha-images/banner-Zero.webp') no-repeat center center/cover;
    /* Ensure banner-contact.webp exists or update path */
    color: #fff;
    padding: 100px 0;
    /* Removed text-align: center; from here as content is now in columns */
    display: flex; /* Use flexbox to center content vertically */
    align-items: center; /* Vertically align items in the container */
}

.engineering-banner .container {
    height: 100%; /* Ensure container fills banner height for centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.engineering-banner h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 3.5em;
    margin-bottom: 10px; /* Reduced margin for tighter spacing with paragraph */
    /* text-align: left is now handled by col-md-6 */
    animation: fadeInDown 1s ease-out;
}

.engineering-banner p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    max-width: 100%; /* Ensure text fills its column width */
    margin: 0; /* No external margins */
    /* text-align: left is now handled by col-md-6 */
    animation: fadeInUp 1s ease-out;
}



/* ========================================================================================================== */
/* %%%%%%%%%%%%%%%%%%%%%%%%&&&&&&&&&&&&&  Banner Style End ^^^^^^^^^^^^^^^^^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/* ========================================================================================================== */







/* ========================================================================================================== */
/* %%%%%%%%%%%%%%%%%%%%%%%%&&&&&&&&&&&&&  Card Style Start ^^^^^^^^^^^^^^^^^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/* ========================================================================================================== */

 /* Section Styling */
     .feature-cards-section {
      padding: 80px 20px;
    }

    .feature-cards-heading {
      text-align: center;
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 40px;
    }

    .feature-cards-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 17px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .feature-card-box {
      position: relative;
      background-color: #fff;
      flex: 1 1 100%;
      max-width: 100%;
      padding: 24px 20px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      opacity: 0;
      transform: translateY(40px);
    }

    .feature-card-box h3 {
      font-size: 18px;
      color: #007acc;
      margin-bottom: 14px;
    }

    .feature-card-box ul {
      list-style-type: disc;
      padding-left: 20px;
    }

    .feature-card-box ul li {
      color: #555;
      margin-bottom: 10px;
      font-size: 16px;
    }

    /* Hover Effect: Scale, Shadow, Border Animation */
    .feature-card-box:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .feature-card-box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border: 2px solid #007acc;
      border-radius: 16px;
      pointer-events: none;
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .feature-card-box:hover::before {
      opacity: 1;
      transform: scaleX(1);
    }

    /* Entrance Animation */
    .feature-card-box.visible {
      animation: featureFadeInUp 0.6s ease-out forwards;
    }

    @keyframes featureFadeInUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Media Queries */
    @media (min-width: 600px) {
      .feature-card-box {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
      }
    }

    @media (min-width: 900px) {
      .feature-card-box {
        flex: 1 1 calc(25% - 20px);
        max-width: calc(25% - 20px);
      }
    }


/* ========================================================================================================== */
/* %%%%%%%%%%%%%%%%%%%%%%%%&&&&&&&&&&&&&  Card Style End ^^^^^^^^^^^^^^^^^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/* ========================================================================================================== */



/* ========================================================================================================== */
/* %%%%%%%%%%%%%%%%%%%%%%%%&&&&&&&&&&&&& Image Card Style Start ^^^^^^^^^^^^^^^^^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/* ========================================================================================================== */

    .feature-cards-image-section {
        padding: 80px 16px;
        background-color: #ffffff;
        font-family: 'Oswald', sans-serif;
    }

    /* .feature-cards-image-section .feature-cards-heading {
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 40px;
    } */

    .feature-cards-image-section .feature-cards-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 0px;
    }

    .feature-card-image-box {
        flex: 1 1 100%;
        max-width: 100%;
        background-color: #fdfdfd;
        border-radius: 16px;
        overflow: hidden;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        text-align: center;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        opacity: 0;
        transform: scale(0.95);
    }

    .feature-card-image-box h3 {
        font-size: 20px;
        margin-bottom: 30px;
        color: #007acc;
    }

    .feature-card-image-box img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .feature-card-image-box:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    }

    .feature-card-image-box.visible {
        animation: featureZoomIn 0.6s ease-out forwards;
    }

    @keyframes featureZoomIn {
        from {
        opacity: 0;
        transform: scale(0.95);
        }
        to {
        opacity: 1;
        transform: scale(1);
        }
    }

    /* Responsive */
    @media (min-width: 600px) {
        .feature-card-image-box {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
        }
    }

    @media (min-width: 900px) {
        .feature-card-image-box {
        flex: 1 1 calc(25% - 20px);
        max-width: calc(25% - 20px);
        }
    }



/* ========================================================================================================== */
/* %%%%%%%%%%%%%%%%%%%%%%%%&&&&&&&&&&&&& Image Card Style End ^^^^^^^^^^^^^^^^^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/* ========================================================================================================== */



/* ========================================================================================================== */
/* %%%%%%%%%%%%%%%%%%%%%%%%&&&&&&&&&&&&& Description 01 Style Start ^^^^^^^^^^^^^^^^^^!!!!!!!!!!!!!!!!!!!!!!!!*/
/* ========================================================================================================== */



   

  /* Custom Feature Section Base Styles */
.custom-feature-section {
    padding: 30px 40px 60px 40px; /* Top/bottom and left/right padding for sections */
    margin-bottom: 60px;
    background: #0d0d1a; /* Consistent background for all sections */
}
.row-2.scroll-animate.fade-in-up.animate {
    padding-top: 30px;
    padding-bottom: 50px;
}

/* Heading Description Styles */
.heading-descr {
    padding-bottom: 30px;
    text-align: center;
}

.heading-descr-one {
    padding-bottom: 0px;
    text-align: center;
}

.heading-descr .heading-hd h2 {
    color: white;
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 700;
}

.heading-descr-one
.heading-hd h2 {
    color: white;
    font-size: 38px;
    font-weight: 700;
}

.heading-descr .heading-hd h2 span {
    color: #4482F6; /* Blue color for span */
}

/* Common Row Styles (for all flexible rows) */
.row-1, .single-row {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    /* Removed align-items: stretch; to stop column height equalization */
    gap: 30px; /* Space between columns */
    /* margin-bottom: 40px; */
}

/* Styles for Image Columns */
.image-col {
    flex: 1; /* Allows image column to grow/shrink */
    min-width: 280px; /* Ensures columns wrap on smaller screens */
    /* Added styles to make image-col a nice box */
    background: whitesmoke; /* Background for the image box */
    padding: 20px; /* Padding inside the image box around the image */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    display: flex; /* Use flex to center image if it doesn't fill space */
    align-items: center; /* Vertically center the image within its box */
    justify-content: center; /* Horizontally center the image within its box */
    transition: transform 0.3s ease, background 0.3s ease; /* Add hover transition */
}

.image-col:hover {
    transform: translateY(-5px);
    background: #1f1f39;
}

.image-col img {
    max-width: 100%; /* Ensure image is responsive */
    height: auto; /* Maintain aspect ratio, no stretching */
    border-radius: 8px; /* Slightly smaller border-radius for image inside the box */
    /* Removed box-shadow here, as it's on the parent .image-col now */
    /* Removed animation: zoomIn here, handled by scroll-animate now */
}


/* Styles for Content Columns (General) */
.content-col {
    flex: 1; /* Allows content column to grow/shrink */
    min-width: 280px; /* Ensures columns wrap on smaller screens */
}

.content-col h2 {
    font-size: 26px;
    margin-bottom: 20px;
    color: #4482F6; /* Blue color for headings */
}

.content-col ul {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.7;
}

/* Specific Styles for Row 2 (Original Section's bottom row) */
.row-2 {
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap */
    gap: 30px;
}

.card-box {
    flex: 1 1 calc(50% - 15px); /* Two cards per row, accounting for gap */
    background: #15152a;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background 0.3s ease;
}

.card-box:hover {
    transform: translateY(-5px);
    background: #1f1f39;
}

.card-box h2 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #4482F6; /* Blue color for headings */
}

.card-box ul {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.6;
}

/* Styles for the "nicer box" content in new sections */
.single-box-content {
    display: flex;
    flex-direction: column; /* Stacks the two content boxes vertically */
    gap: 20px; /* Space between the two content boxes */
}

.content-box {
    background: #15152a;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background 0.3s ease;
}

.content-box:hover {
    transform: translateY(-5px);
    background: #1f1f39;
}

.content-box h2 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #4482F6; /* Blue color for headings */
}

.content-box ul {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.6;
}

/* Utility Class for Blue Titles */
.title-blue {
    color: #4482F6;
}

/* Utility Class for Red Titles (if you still want to use it for Section 1, keep it) */
/* Changed to blue for consistency with the span in the main heading */
.title-red {
    color: #4482F6;
}


/* --- Animations --- */
/* Base state for animated elements */
.scroll-animate {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* General state when 'animate' class is added */
.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1); /* Reset transforms */
}

/* Specific Animations based on direction */
/* Fade in and slide up (original for row-1 and row-2) */
.scroll-animate.fade-in-slide {
    transform: translateY(30px);
}

.scroll-animate.fade-in-up {
    transform: translateY(40px);
}

/* Slide from Left */
.scroll-animate.animate-left-to-right {
    transform: translateX(-50px); /* Starts 50px to the left */
}
.scroll-animate.animate-left-to-right.animate {
    transform: translateX(0);
}

/* Slide from Right */
.scroll-animate.animate-right-to-left {
    transform: translateX(50px); /* Starts 50px to the right */
}
.scroll-animate.animate-right-to-left.animate {
    transform: translateX(0);
}

/* Initial Zoom In for the image in the first section (if desired) */
/* Apply zoomIn to specific image for initial load animation */
.row-1 .image-col img {
    animation: zoomIn 0.8s ease-in-out;
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    /* Stack columns vertically on small screens for all multi-column rows */
    .row-1,
    .row-2,
    .single-row {
        flex-direction: column;
    }

    /* Cards take full width on mobile */
    .card-box {
        flex: 1 1 100%;
    }

    /* For content-left/image-right sections, reverse on mobile to keep content first */
    .reverse-order-on-desktop {
        flex-direction: column-reverse;
    }

    /* Reduce padding on mobile */
    .custom-feature-section {
        padding: 40px 20px;
    }

    .heading-descr {
        padding-bottom: 30px;
    }

    .heading-descr .heading-hd h2 {
        font-size: 30px;
    }

    .content-col h2 {
        font-size: 22px;
    }

    /* Reset specific animations on mobile for potentially better flow */
    .scroll-animate.animate-left-to-right,
    .scroll-animate.animate-right-to-left {
        transform: translateY(30px); /* Fallback to fade-in-slide on mobile */
    }

    /* Ensure mobile animations apply correctly */
    .scroll-animate.animate-left-to-right.animate,
    .scroll-animate.animate-right-to-left.animate {
        transform: translateY(0);
    }
}

/* Smaller screens adjustments for very compact layouts */
@media (max-width: 480px) {
    .custom-feature-section {
        padding: 30px 15px;
    }

    .heading-descr .heading-hd h2 {
        font-size: 24px;
    }
}


.content-col li {
    color: white;
}

.card-box li {
    color: white;
}
/* ========================================================================================================== */
/* %%%%%%%%%%%%%%%%%%%%%%%%&&&&&&&&&&&&& Description 01 Style End ^^^^^^^^^^^^^^^^^^!!!!!!!!!!!!!!!!!!!!!!!!*/
/* ========================================================================================================== */







/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
/* RESPONSIVE CODE START */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */





@media only screen and (max-width:500px) {
    .engineering-banner {
        padding: 20px 0;
    }

    .engineering-banner h1 {
        font-size: 2.5em;
    }

    .feature-cards-image-section {
        padding: 20px 20px 30px 20px;
    }

    .feature-card-image-box h3 {
        font-size: 20px;
        margin-bottom: 25px;
        color: #007acc;
        margin-top: 0px;
    }

    .heading-descr-one .heading-hd h2 {
        font-size: 24px;
        line-height: 36px;
        font-weight: 600;
        margin-top: 10px;
        padding-bottom: 0px;
    }

    .row-1.scroll-animate.fade-in-slide.animate {
        text-align: start;
    }

    .content-box {
        text-align: start;
        padding: 0px 30px 10px 30px !important;
    }

    .card-box {
        text-align: start;
        padding: 0px 30px 10px 30px;
    }

    .row-2.scroll-animate.fade-in-up.animate {
        padding-top: 0px;
        padding-bottom: 40px;
    }

    .custom-feature-section {
        padding: 10px 15px 30px 15px;
        margin-bottom: 30px;
    }

    .custom-feature-section .container.heading-descr {
        padding-bottom: 10px;
    }

    
    .row-1.scroll-animate.fade-in-slide.animate {
        gap: 10px;
    }

}