/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
  /*ABOUT US PAGE STYLE  */ /*ABOUT US PAGE STYLE  */ /*ABOUT US PAGE STYLE  */ /*ABOUT US PAGE STYLE  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




.about-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 */
}

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

.about-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;
}

.about-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;
}




/* About section style */
.about-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: "poppins", sans-serif;
}

.about-container {
    max-width: 100%; /* Adjusted max-width for a single column */
    margin: 0 auto;
    display: flex; /* Keep flex for centering */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    gap: 0; /* No gap needed if only one item */
    text-align: center; /* Default center text for container */
}

.about-text {
    flex: 1 1 100%; /* Make it take full width of its container */
    max-width: 1000px; /* Constrain text width for readability */
}

.about-text h4 {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: #888;
    margin-bottom: 0px;
    text-align: center; /* Center the "About Us" heading */
}

.about-text h2 {
    font-size: 40px;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-weight: 700;
    font-family: Oswald, sans-serif;
    text-align: center; /* Center the main heading */
}

.about-text .highlight {
    color: #427BFF;
    position: relative;
}

.about-text .highlight::after {
    content: "";
    position: absolute;
    left: 50%; /* Adjust to center the highlight under the text */
    transform: translateX(-50%); /* Adjust to center the highlight under the text */
    bottom: 2px;
    width: 100%;
    height: 8px;
    background-color: #b2f2d2;
    z-index: -1;
    border-radius: 4px;
}

.about-text p {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0px;
    text-align: center; /* Center the paragraph text */
}

.cta-button {
    display: inline-block;
    background-color: #3b82f6;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.cta-button:hover {
    background-color: #2563eb;
}


/* Video section Style */

/* Styling for the specific section */
#core-capabilities-showcase {
    background-color: #f9f9f9; /* Light background for THIS section */
    overflow: hidden; /* To prevent overflow during animations */
    padding: 60px 0; /* Adjust padding for the section */
}

/* Inner wrapper for layout within the section */
#core-capabilities-showcase .core-cap-inner-wrapper {
    max-width: 1200px; /* Adjust as needed for this section */
    margin: 0 auto;
    padding: 0 20px; /* Horizontal padding inside the max-width container */
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 40px; /* Space between columns */
}

/* Initial state for hidden elements (for entrance animation) */
#core-capabilities-showcase.core-cap-hidden .core-cap-video-column,
#core-capabilities-showcase.core-cap-hidden .core-cap-content-column {
    opacity: 0;
    transform: translateY(50px); /* Or translateX for sliding from sides */
}

/* Column Layout specific to this section */
#core-capabilities-showcase .core-cap-video-column {
    flex: 3; /* Approx 40% width */
}

#core-capabilities-showcase .core-cap-content-column {
    flex: 3; /* Approx 60% width */
}

/* Responsive Video Wrapper - now handles both placeholder and iframe */
#core-capabilities-showcase .core-cap-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background-color: #000; /* Placeholder background */
    border-radius: 8px; /* Slightly rounded corners */
    cursor: pointer; /* Indicate it's clickable */
}

/* Styling for the video thumbnail placeholder */
#core-capabilities-showcase .core-cap-video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Fallback/background for thumbnail */
    transition: opacity 0.3s ease; /* Smooth transition when placeholder disappears */
    z-index: 1; /* Ensure it's above the iframe initially */
}

#core-capabilities-showcase .core-cap-video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the entire area */
    display: block; /* Remove extra space below image */
}
/* Play Button Styling */
#core-capabilities-showcase .core-cap-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; /* Size of the play button */
    height: 80px;
    background-color: rgba(255, 0, 0, 0.8); /* Red, semi-transparent */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

#core-capabilities-showcase .core-cap-play-button::before {
    content: "";
    border-style: solid;
    border-width: 20px 0 20px 30px; /* Triangle shape */
    border-color: transparent transparent transparent #fff; /* White triangle */
    margin-left: 8px; /* Adjust to center triangle */
}

#core-capabilities-showcase .core-cap-play-button:hover {
    background-color: rgba(255, 0, 0, 1); /* Darken on hover */
}

/* Style for the dynamically loaded iframe */
#core-capabilities-showcase .core-cap-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 0; /* Initially below the placeholder */
}


/* Column Layout specific to this section */
#core-capabilities-showcase .core-cap-video-column {
    flex: 3; /* Approx 40% width */
}

#core-capabilities-showcase .core-cap-content-column {
    flex: 3; /* Approx 60% width */
    background-color: #fff; /* Give it a white background so shadow stands out */
    padding: 30px; /* Add some padding inside the column */
    border-radius: 8px; /* Match video column's border-radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
    /* You might want a transition for the entrance animation to look good with the shadow */
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s, box-shadow 0.3s ease;
}

/* Content Styling specific to this section (unchanged) */
#core-capabilities-showcase .core-cap-content-list {
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

#core-capabilities-showcase .core-cap-bullet-item {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
    padding-left: 25px; /* Space for custom bullet */
    position: relative;
    transition: transform 0.3s ease-out, color 0.3s ease-out; /* Smooth transitions for hover */
    cursor: pointer; /* Indicate interactivity */
}

#core-capabilities-showcase .core-cap-bullet-item::before {
    content: "•"; /* Custom bullet point */
    color: #007bff; /* Accent color for bullet */
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 0;
}

/* Hover Animations specific to this section (unchanged) */
#core-capabilities-showcase .core-cap-bullet-item:hover {
    transform: scale(1.02); /* Option 1: Slight scale up */
    color: #0056b3; /* Option 2: Text color change */
}

/* Media Queries for Responsiveness specific to this section (unchanged) */
@media (max-width: 768px) {
    #core-capabilities-showcase .core-cap-inner-wrapper {
        flex-direction: column; /* Stack columns on smaller screens */
        padding: 0 15px;
    }

    #core-capabilities-showcase .core-cap-video-column,
    #core-capabilities-showcase .core-cap-content-column {
        flex: none; /* Remove flex sizing */
        width: 100%; /* Take full width */
    }
}


/* ================================================================================================ */
/* ================================================================================================ */
/* <!-- Vision-mission-section Start --> */
/* ================================================================================================ */
/* ================================================================================================ */

 
 /* Top section styling (Vision, Mission, Objectives) */
        .top-section {
            background-color: #2A598A; /* Dark teal background as per design */
            color: white;
            padding: 60px 0px 0px 0px; /* Vertical padding */
            text-align: center; /* Center align text within this section */
        }

        /* Styling for each icon box (Vision, Mission, Objectives) */
        .icon-box {
            padding: 20px;
            margin-bottom: 30px; /* Space between boxes on smaller screens */
        }

        /* Icon styling */
        .icon-box i {
            font-size: 70px; /* Large icon size */
            margin-bottom: 0px; /* Space below icon */
            color: #ffffff; /* White icon color */
        }

        /* Heading styling (VISION, MISSION, OBJECTIVES) */
        .icon-box h3 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px; /* Space below heading */
            color: #f6eaea; /* Orange-yellow color for headings as per design */
        }

        /* Paragraph text styling */
        .icon-box p {
            font-size: 16px;
            line-height: 1.6; /* Improved readability */
            color: #d1d1d1; /* Light gray for text */
        }


        
       /* Animation only plays when .in-view is added */
       /* Initial hidden state */
        .animate-left .step-item-wrapper {
        opacity: 0;
        transform: scale(0.95);
        transition: opacity 0.8s ease, transform 0.8s ease;
        }

        /* Animated state when in-view */
        .animate-left.in-view .step-item-wrapper {
        opacity: 1;
        transform: scale(1);
        }

        /* Smooth stagger delays */
        .animate-left.in-view .step-item-wrapper:nth-child(1) { transition-delay: 0.1s; }
        .animate-left.in-view .step-item-wrapper:nth-child(2) { transition-delay: 0.3s; }
        .animate-left.in-view .step-item-wrapper:nth-child(3) { transition-delay: 0.5s; }
        .animate-left.in-view .step-item-wrapper:nth-child(4) { transition-delay: 0.7s; }
        .animate-left.in-view .step-item-wrapper:nth-child(5) { transition-delay: 0.9s; }
                
        /* Outer container for background, shadow, and overall padding */
                .outer-container {
                    background-color: #ffffff; /* Equivalent to bg-white */
                    border-radius: 0.5rem; /* Equivalent to rounded-lg */
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-xl */
                    padding: 1rem; /* Equivalent to p-4 */
                }

                /* Flex container to hold multiple step designs in a row */
                .flex-row-container {
                    display: flex;
                    flex-wrap: wrap; /* Equivalent to flex-wrap */
                    justify-content: center; /* Equivalent to justify-center */
                    align-items: center; /* Equivalent to items-center */
                    /* Custom gap implementation */
                    margin: -0.5rem -1rem; /* Negative margin to offset padding on children */
                }

                .flex-row-container > .step-item-wrapper {
                    padding: 0.5rem 1rem; /* Half of gap-x-8 and gap-y-4 */
                }

                /* Wrapper for each step-content and label */
                .step-item-wrapper {
                    display: flex;
                    flex-direction: column; /* Equivalent to flex-col */
                    align-items: center; /* Equivalent to items-center */
                    flex-shrink: 0; /* Prevent shrinking in flex container */
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

                    /* margin: 90px 10px 30px 10px; */
                }

                /* The main container for the direction sign and circle, positioned relatively */
                .step-content {
                    position: relative;
                    width: 220px; /* Increased to give ample space for the prominent tip and overlap */
                    height: 170px; /* Height of the circle, ensuring vertical space */
                /* Hide anything that goes outside the defined bounds */
                }

                /* Styles for the combined direction sign shape (rectangle + prominent tip) */
                .combined-arrow {
                    position: absolute;
                    left: 0; /* Starts from the left edge of step-content */
                    top: 60%;
                    transform: translateY(-50%); /* Vertically center the direction sign */
                    width: calc(130px + 70px); /* Total width: Rectangle part (100px) + new, longer tip width (60px) = 160px */
                    height: 100px; /* Height of the rectangular part (maintained) */
                    background-color: #4482F6; /* Orange fill color */
                    border: 1px solid #333; /* Continuous dark outline */
                    box-sizing: border-box; /* Include padding and border in element's total width and height */
                    z-index: 5; /* Lower than circle to appear behind it */

                    /* Clip-path to create the combined rectangle and very pointy triangular tip shape.
                    The '60px' value makes the triangle much longer and more pronounced.
                    */
                    clip-path: polygon(
                        0% 0%, /* Top-left of the rectangle part */
                        calc(100% - 60px) 0%, /* Top-right point where the rectangle ends and triangle begins */
                        100% 50%, /* The very pointy tip of the direction sign (middle of the right edge) */
                        calc(100% - 60px) 100%, /* Bottom-right point where the rectangle ends and triangle begins */
                        0% 100% /* Bottom-left of the rectangle part */
                    );
                }

                /* Styles for the circular element */
                .circle {
                    width: 130px; /* Diameter of the circle */
                    height: 130px; /* Diameter of the circle */
                    border-radius: 50%; /* Makes the div a perfect circle */
                    background-color: #2A598A; /* Dark teal background color from the image */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #ffffff; /* White text color for the number */
                    font-size: 5.5rem; /* Large font size for the number */
                    font-weight: 600;
                    border: 4px solid #ffffff; /* Lighter teal border from the image */
                    flex-shrink: 0; /* Prevents shrinking when space is limited */

                    position: absolute;
                    top: 60%;
                    /* Position the circle's center to align with the arrow's transition point */
                    left: 80px; /* Aligned with the end of the rectangular part of the arrow */
                    transform: translate(-50%, -50%); /* Center the circle precisely using its own dimensions */
                    z-index: 10; /* Ensure circle is above the direction sign */
                }

                /* Styles for the label below each step */
                .step-label {
                    text-align: center;
                    margin: 20px 0px 40px 0px; /* Space between the sign and the label */
                    margin-right: 40px;
                    font-size: 17px;
                    color: #333;
                    font-weight: 600;
                }

                /* Responsive adjustments for smaller screens */
                @media (max-width: 1280px) { /* Added a new breakpoint for larger tablet/small desktop */
                    .outer-container {
                        padding: 1.5rem; /* Equivalent to md:p-6 */
                    }
                    .step-content {
                        width: 190px;
                        height: 110px;
                    }
                    .combined-arrow {
                        width: calc(115px + 50px); /* Rectangle (85px) + tip (50px) = 135px */
                        height: 70px;
                        clip-path: polygon(
                            0% 0%,
                            calc(100% - 50px) 0%,
                            100% 50%,
                            calc(100% - 50px) 100%,
                            0% 100%
                        );
                    }
                    .circle {
                        width: 110px;
                        height: 110px;
                        font-size: 3rem;
                        left: 65px !important;
                    }
                }

                @media (max-width: 1024px) { /* Adjusted for typical tablet landscape */
                    .step-content {
                        width: 170px; /* Adjusted total width for tablet */
                        height: 100px; /* Height of the circle */
                    }
                    .combined-arrow {
                        width: calc(95px + 40px); /* Rectangle (75px) + tip (40px) = 115px */
                        height: 90px; /* Adjusted height */
                        clip-path: polygon(
                            0% 0%,
                            calc(100% - 40px) 0%,
                            100% 50%,
                            calc(100% - 40px) 100%,
                            0% 100%
                        );
                    }
                    .circle {
                        width: 100px;
                        height: 100px;
                        font-size: 2.5rem;
                        left: 75px; /* Adjusted left for tablet */
                    }
                }

                @media (max-width: 768px) { /* Adjusted for typical tablet portrait / larger mobile */
                    .outer-container {
                        padding: 2rem; /* Equivalent to lg:p-8 */
                    }
                    /* Allow wrapping for multiple items on smaller screens */
                    .flex-row-container {
                        flex-direction: column; /* Stack items vertically */
                        align-items: center; /* Center items when stacked */
                        margin: -0.5rem 0; /* Adjust margin for vertical stacking */
                    }
                    .flex-row-container > .step-item-wrapper {
                        padding: 0.5rem 0; /* Adjust padding for vertical stacking */
                        margin-bottom: 20px; /* Add vertical spacing between stacked items */
                    }
                    .step-content {
                        width: 150px;
                        height: 90px;
                    }
                    .combined-arrow {
                        width: calc(65px + 35px); /* Rectangle (65px) + tip (35px) = 100px */
                        height: 55px !important;
                        clip-path: polygon(
                            0% 0%,
                            calc(100% - 35px) 0%,
                            100% 50%,
                            calc(100% - 35px) 100%,
                            0% 100%
                        );
                    }
                    .circle {
                        width: 90px;
                        height: 90px;
                        font-size: 2.2rem;
                        left: 55px ;
                    }
                }

                @media (max-width: 480px) { /* Adjusted for typical mobile */
                    .step-content {
                        width: 130px; /* Adjusted total width for mobile */
                        height: 80px; /* Height of the circle */
                    }
                    .combined-arrow {
                        width: calc(90px + 30px); /* Rectangle (50px) + tip (30px) = 80px */
                        height: 50px; /* Adjusted height */
                        clip-path: polygon(
                            0% 0%,
                            calc(100% - 30px) 0%,
                            100% 50%,
                            calc(100% - 30px) 100%,
                            0% 100%
                        );
                    }
                    .circle {
                        width: 80px;
                        height: 80px;
                        font-size: 2rem;
                        left: 50px !important; /* Adjusted left for mobile */
                    }
                }

                
/* ================================================================================================ */
/* ================================================================================================ */
/* <!-- Vision-mission-section End --> */
/* ================================================================================================ */
/* ================================================================================================ */


      
/* ================================================================================================ */
/* ================================================================================================ */
/* <!-- Address --> */
/* ================================================================================================ */
/* ================================================================================================ */





 /* Address Section Styling */
        .address-section {
            padding: 40px 20px 80px 0px; /* Increased padding for more breathing room */
            background-color: #F9F9F9; /* Light blue background */
            font-family: 'poppins', sans-serif; /* Keep poppins for headers */
        }

        /* Section Header */
        .section-header {
            text-align: center;
            margin-bottom: 60px; /* More space below the header */
        }

        .section-header h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 38px; /* Slightly larger font size */
            color: #0f5c6b; /* Dark teal color */
            margin-bottom: 10px;
            position: relative; /* For underline effect */
            display: inline-block; /* To make underline fit content */
            padding-bottom: 10px;
        }

        .section-header h2 span {
            color: #4482F6; /* Orange accent color */
        }

        /* Underline effect for the header */
        .section-header h2::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px; /* Width of the underline */
            height: 4px;
            background-color: #4482F6; /* Orange underline */
            border-radius: 2px;
        }

        /* Address Container */
        .address-container {
            display: flex;
            flex-direction: column; /* Stacks boxes vertically by default */
            align-items: center;
            gap: 50px; /* Increased gap between boxes */
            max-width: 1200px; /* Max width for the container */
            margin: 0 auto; /* Center the container */
        }

        /* Individual Address Box */
        .address-box {
            display: flex;
            align-items: center;
            gap: 30px; /* Increased gap between image and details */
            background: #fff;
            border-radius: 12px; /* Slightly more rounded corners */
            padding: 30px; /* Increased padding inside the box */
            box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Softer, more prominent shadow */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
            width: 100%; /* Take full width of parent (address-container) */
            box-sizing: border-box; /* Include padding in width calculation */
            overflow: hidden; /* Ensures rounded corners are applied correctly */
        }

        .address-box:hover {
            transform: translateY(-8px); /* More noticeable lift on hover */
            box-shadow: 0 12px 35px rgba(0,0,0,0.15); /* Enhanced shadow on hover */
        }

        /* Image within Address Box */
        .address-image {
            flex-shrink: 0; /* Prevent image from shrinking */
            width: 40%; /* Allocate more space for the image on desktop */
            max-width: 400px; /* Max width for image container */
            border-radius: 8px; /* Rounded corners for the image */
            overflow: hidden; /* Clip image corners */
        }

        .address-image img {
            width: 100%;
            height: 250px; /* Fixed height for consistency */
            object-fit: cover; /* Cover the area, cropping if necessary */
            display: block; /* Remove extra space below image */
            transition: transform 0.5s ease; /* Smooth zoom on hover */
        }

        .address-box:hover .address-image img {
            transform: scale(1.05); /* Slight zoom effect on image hover */
        }

        /* Details within Address Box */
        .address-details {
            flex-grow: 1; /* Allow details to take remaining space */
            padding-left: 10px; /* Slight padding for text alignment */
        }

        .address-details h3 {
            font-family: 'Oswald', sans-serif;
            font-size: 26px; /* Larger heading for details */
            color: #0f5c6b;
            margin-bottom: 15px; /* More space below heading */
            border-bottom: 2px solid #4482F6; /* Orange underline for detail headings */
            padding-bottom: 5px;
            display: inline-block; /* To make underline fit content */
        }

        .address-details ul {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 17px; /* Slightly larger list font size */
            color: #555; /* Softer text color */
            line-height: 1.8; /* Increased line height for readability */
        }

        .address-details ul li {
            margin-bottom: 8px; /* Space between list items */
            position: relative;
            padding-left: 25px; /* Space for custom bullet */
        }

        /* Custom bullet point */
        .address-details ul li::before {
            content: '•'; /* Unicode bullet point */
            color: #4482F6; /* Orange color for bullet */
            font-size: 1.2em;
            position: absolute;
            left: 0;
            top: 0;
            font-weight: bold;
        }

        /* Animation */
        .address-box.animate-left {
            opacity: 0;
            transform: translateX(-100px);
            animation: slideLeft 1.2s forwards;
        }

        @keyframes slideLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Responsive Adjustments */
        @media (min-width: 769px) { /* For larger screens, alternate image/text layout */
            .address-box:nth-child(even) {
                flex-direction: row-reverse; /* Reverse direction for even boxes */
            }
            .address-box:nth-child(even) .address-image {
                margin-left: 0; /* Reset margin */
                margin-right: 30px; /* Add margin to the left of image */
            }
            .address-box:nth-child(even) .address-details {
                padding-left: 0;
                padding-right: 10px;
            }
        }

        @media (max-width: 768px) {
            .address-section {
                padding: 50px 15px; /* Reduced padding for mobile */
            }
            .section-header h2 {
                font-size: 30px;
            }
            .address-container {
                gap: 30px; /* Reduced gap for mobile */
            }
            .address-box {
                flex-direction: column; /* Stack image and text vertically */
                text-align: center;
                padding: 20px;
                gap: 20px; /* Reduced gap */
            }
            .address-image {
                width: 100%; /* Image takes full width on mobile */
                max-width: none; /* Remove max-width constraint */
            }
            .address-image img {
                height: 200px; /* Adjust image height for mobile */
            }
            .address-details {
                padding-left: 0; /* Remove left padding */
            }
            .address-details h3 {
                font-size: 24px;
                margin-bottom: 10px;
            }
            .address-details ul {
                font-size: 15px;
            }
            .address-details ul li {
                padding-left: 0; /* Remove custom bullet padding */
            }
            .address-details ul li::before {
                content: none; /* Hide custom bullet on mobile if preferred, or adjust positioning */
            }
        }

        @media (max-width: 480px) {
            .address-section {
                padding: 40px 10px;
            }
            .section-header h2 {
                font-size: 26px;
            }
            .address-box {
                padding: 15px;
            }
            .address-image img {
                height: 180px;
            }
            .address-details h3 {
                font-size: 20px;
            }
            .address-details ul {
                font-size: 14px;
            }
        }




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





@media only screen and (max-width:500px) {

    .about-banner {
        padding: 20px 0;
    }

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


    .about-text h4 {
        font-family: 'poppins', sans-serif !important;
    }

    .about-section {
        padding: 30px 20px;
    }

    .section-header h2 {
        font-size: 24px;
    }

    .about-text p {
        margin-top: -10px;
    }

    #core-capabilities-showcase {
        padding: 30px 0;
    }

    #core-capabilities-showcase .core-cap-play-button {
        width: 50px;
        height: 50px;
    }
    
    #core-capabilities-showcase .core-cap-play-button::before {
        border-width: 15px 0 15px 25px;
    }

    #core-capabilities-showcase .core-cap-inner-wrapper {
        gap: 25px;
    }

    .top-section {
        padding: 10px 0px 0px 0px;
    }

    .icon-box {
        padding: 20px;
        margin-bottom: 0px;
    }

    .animate-left.in-view .step-item-wrapper:nth-child(1), 
    .animate-left.in-view .step-item-wrapper:nth-child(2),
    .animate-left.in-view .step-item-wrapper:nth-child(3),
    .animate-left.in-view .step-item-wrapper:nth-child(4),
    .animate-left.in-view .step-item-wrapper:nth-child(5) {
        width: 100%;
    }

    .step-label {
        text-align: center;
        margin: 20px 0px 20px 0px;
    }

    .address-section {
        padding: 10px 20px 40px 20px;
    }

    .address-details ul {
        font-size: 15px;
        text-align: start;
    }


}