* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #e9ecef; /* Light grey background for contrast */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #007BFF;
    padding: 15px 20px;
    color: white;
}

.language-selection {
    margin-right: 20px;
}

#language-selector {
    border: none;
    padding: 5px;
    border-radius: 5px; 
    background: white;
    color: #007BFF;
}

/* Logo styling */
.logo {
    font-size: 1.8em;
    font-weight: bold;
	display: flex; /* Align items in a row */
    align-items: center; /* Center vertically */
}
.logo-image {
    width: 50px; /* Set desired width */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Add some space between the logo and text */
}

/* Navigation styling */
nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.cta {
    background-color: #28A745;
    padding: 10px 15px;
    border-radius: 5px;
}

/* Hero section styling */
.hero {
background-image: url('img/main21.png'); /* replace 'your-image.jpg' with the actual image filename */
    background-size: cover; 
    background-position: center; 
    height: 100vh; /* Adjust height as necessary */
    color: green; /* Example of text color, adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	padding: 200px; /* add some padding */
}

.herosending {
background-image: url('img/main.jpg'); /* replace 'your-image.jpg' with the actual image filename */
    background-size: cover; 
    background-position: center; 
    height: 100vh; /* Adjust height as necessary */
    color: green; /* Example of text color, adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}





.hero-content {
    z-index: 1; /* Ensure content is above the background */
	 margin-top: -300px;
}

.hero-content h1 {
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    color: green; /* Change color as per your design */
}

.hero-content span {
    opacity: 0; /* Start hidden */
    transition: opacity 0.5s; /* Smooth transition */
}

.hero p {
    margin: 20px 0;
}

.btn-primary {
    background-color: #28A745;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em;
}

/* Features, How It Works, Cost Info, and Testimonials sections */
.features, .how-it-works, .cost-info, .geographical-reach, .testimonials {
    padding: 40px 20px;
    text-align: center;
}

h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

/* Feature card styles */
.feature-cards, .process-steps, .cost-details, .country-flags, .testimonial-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.feature-card, .step, .cost-item, .country-flag, .testimonial-card {
    background-color: #f8f9fa;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    width: 220px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Icons */
.icon {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-bottom: 10px;
}

/* Specific icons */
.instant-transfer {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%2300BFFF"><path d="M12 0a6 6 0 00-6 6v4H4v10h16V10h-2V6a6 6 0 00-6-6zm2 20H10v-2h4zm0-4H10v-2h4zm0-4H10v-2h4z"/></svg>') no-repeat center center;
    background-size: contain;
}

.low-fees {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%23FF9900"><path d="M20 7h-3V4H7v3H4v10h3v3h10v-3h3V7zm-4 1v2H8V8h8z"/></svg>') no-repeat center center;
    background-size: contain;
}

.security {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%23FF0000"><path d="M12 0a6 6 0 00-6 6v4H4v10h16V10h-2V6a6 6 0 00-6-6zm2 20H10v-2h4zm0-4H10v-2h4zm0-4H10v-2h4z"/></svg>') no-repeat center center;
    background-size: contain;
}

.user-friendly {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%2300FF00"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm1 2H11a8.962 8.962 0 00-8 5.5h16a8.962 8.962 0 00-8-5.5zm-1 5.5h2z"/></svg>') no-repeat center center;
    background-size: contain;
}

/* Steps Icons */
.step1 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%2300BFFF"><path d="M12 .5l8 4v16l-8 4-8-4V4.5zm0 1L4 5.755 12 10l8-3.245zm0 14.25a4 4 0 114-4 4 4 0 01-4 4zm0-10a1 1 0 110-2 1 1 0 010 2z"/></svg>') no-repeat center center;
    background-size: contain;
}

.step2 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%2300BFFF"><path d="M12 .5l8 4v16l-8 4-8-4V4.5zm0 1L4 5.755 12 10l8-3.245zm0 14.25a4 4 0 114-4 4 4 0 01-4 4zm0-10a1 1 0 110-2 1 1 0 010 2z"/></svg>') no-repeat center center;
    background-size: contain;
}

.step3 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%2300BFFF"><path d="M3 12l18-8 1 1-18 8-1-1zM21 12l-1 1-18 8-1-1 18-8 1 1zM3 12l1-1 1 1-1 1-1-1zM21 12l1-1-1 1-1 1 1-1zM10 18h-4v-2h4v2zm0 3H6v-2h4v2zm1-3h4v2h-4zm0 3h4v2h-4zM3 18h1v1H3zm1 3h1v1H4zm0-5h1v1H4z"/></svg>') no-repeat center center;
    background-size: contain;
}

/* Geographical reach */
.country-flags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.country-flag {
    width: 50px;
    height: 30px;
    margin: 5px;
    border-radius: 4px; 
}

/* Flags */
.russian-flag {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 490 340"><rect width="490" height="113" fill="%230000FF"/><rect width="490" height="226" y="113" fill="%23FFFFFF"/><rect width="490" height="340" y="226" fill="%23FF0000"/></svg>') center center no-repeat;
    background-size: contain;
}

.nigerian-flag {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 640 480"><rect fill="%2300A86B" width="640" height="480"/><rect fill="%23FFFFFF" width="216" height="480"/><rect fill="%2300A86B" width="640" height="480" y="320"/><rect fill="%23FFFFFF" width="640" height="320"/></svg>') center center no-repeat;
    background-size: contain;
}

.south-africa-flag {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 640 480"><rect fill="#007A33" width="640" height="480"/><rect fill="#FFB61E" width="480" height="320"/><rect fill="#DE3A35" width="240" height="240"/><rect fill="#F9D29D" width="640" height="480"/><rect fill="#C6D999" width="640" height="480" y="180"/><polygon points="0,240 320,240 320,0 240,240 0,240"/></svg>') center center no-repeat;
    background-size: contain;
}

.kenyan-flag {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 640 480"><rect fill="#593B7A" width="640" height="480"/><rect fill="#FF0000" width="640" height="180"/><rect fill="#FFFFFF" width="640" height="120"/><rect fill="#000" width="640" height="70"/><circle cx="320" cy="240" r="105" fill="#D8B291"/><circle cx="320" cy="240" r="92" fill="#C23925"/><path d="M267.5 160c-2.5 2.5-5 5-7.5 7.5 2.5 2.5 5 5 7.5 7.5 2.5-2.5 5-5 7.5-7.5-2.5-2.5-5-5-7.5-7.5zM320 310c-2.5 2.5-5 5-7.5 7.5 2.5 2.5 5 5 7.5 7.5 2.5-2.5 5-5 7.5-7.5-2.5-2.5-5-5-7.5-7.5zM270 310c-2.5 2.5-5 5-7.5 7.5 2.5 2.5 5 5 7.5 7.5z"/> <circle cx="314.125" cy="234.5" r="8.825" fill="#D8B291"/><path fill="#D8B291" d="M325.875 239.012c-19.748-18.243-82.251 33.288-72.501 22.889 12.376-11.164 36.498-12.85 45 1s-3 10.25-5 10.5-16.174-7.241-18.674-5.362c-2.5 4.298 21.858 6.87 20.749-9.427-1.213-.777-.493-5.83 1.203-4.903-.69.313-17.999 3.545-22.348-.098-8.295.245-.057 9.034 4.041 7.775 9.208-8.213 13.342-10.093 11.432-4.126-2.882 19.42-42.729 54.642-38.874 15.516 3.021 20.568 16.395 24.254 31.765z"/> </svg>') center center no-repeat;
    background-size: contain;
}

.ghana-flag {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 640 480"><rect fill="#F00" width="640" height="160"/><rect fill="#FCD100" width="640" height="160" y="160"/><rect fill="#008000" width="640" height="160" y="320"/><polygon points="320,240 300,260 340,260"/><polygon points="320,240 300,220 340,220"/></svg>') center center no-repeat;
    background-size: contain;
}

.ugandan-flag {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 640 480"><rect fill="#FFD700" width="640" height="480"/><rect fill="#000" width="640" height="180"/><polygon fill="#F00" points="493.48,240 493.66,240.082 493.856,240.239 494.041,240.195 494.207,240.079 494.406,240.383 494.399,240.391 494.635,240.287 494.771,240.353 495.006,240.049 494.007,240.061 493.663,239.961"/> <circle cx="320" cy="240" r="80" fill="#FFF" /> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#000" font-weight="bold" font-family="Arial" font-size="50">🦅</text> </svg>') center center no-repeat;
    background-size: contain;
}

.tanzanian-flag {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 640 480"><rect fill="#008751" width="640" height="480"/><rect fill="#FFD100" width="640" height="480" y="160"/><rect fill="#000" width="640" height="480" y="160" transform="rotate(5 320 240)"/><polygon points="555.81,124.84 652.68,181.03,554.846,328.641 554.846,325.773 640,460 640,157.773 555.81,124.84"/><rect fill="#008751" width="640" height="480" y="160"/> </svg>') center center no-repeat;
    background-size: contain;
}

/* Testimonials styling */
.testimonial-card {
    background-color: #f8f9fa;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    flex: 1 1 210px; /* adjusts the width to fit */
    max-width: 300px; /* provides a maximum width */
}

/* Footer styling */
footer {
    width: 100%; /* Cover full width */
    background-color: #333; /* Set a background color */
    color: white; /* Change text color for visibility */
    padding: 20px; /* Add some padding */
    margin: 0; /* Remove default margin */
    position: relative; /* Ensure it stays at the bottom if needed */
    bottom: 0; /* Ensure it aligns to bottom if you want it sticky */
}

.footer-links,
.social-media {
    display: flex; /* Use flex for horizontal layout */
    justify-content: center; /* Center items horizontally */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.footer-links a,
.social-media a {
    color: white; /* Color for links */
    margin: 0 15px; /* Space between links */
    text-decoration: none; /* Remove underline */
}

.footer-links a:hover,
.social-media a:hover {
    text-decoration: underline; /* Add underline on hover for links */
}

/* Media Queries */
@media (max-width: 768px) {
    .feature-card, .step, .cost-item, .testimonial-card {
        width: 90%;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 10px 0;
    }

    .hero h1 {
        font-size: 2em;
    }
}
.cost-info {
    background-color: #f1f5f9; /* Light gray background for emphasis */
    padding: 40px 20px;
}

.cost-details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.cost-item {
    background-color: #fff; /* White background for each item */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 15px;
    width: 250px; /* Fixed width */
    text-align: center; /* Center text for better aesthetics */
    transition: transform 0.2s; /* Smooth hover effect */
}

.cost-item:hover {
    transform: translateY(-5px); /* Create a hover effect */
}

.icon {
    width: 50px; /* Fixed icon size */
    height: 50px; /* Fixed icon size */
    display: block; /* Block to allow margin */
    margin: 0 auto 10px; /* Center icon and add space below */
}

/* Cost Icon */
.cost-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%2300A86B"><path d="M12 2a10 10 0 1010 10A10.012 10.012 0 0012 2zm1 17h-2v-2h2zm0-4h-2v-6h2z"/></svg>') center center no-repeat;
    background-size: contain;
}

/* Time Icon */
.time-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="%23FFC107"><path d="M12 2a10 10 0 10 10 10A10.012 10.012 0 0012 2zm-1 15H9v-2h2zm0-4H9V7h2zM12 0A12 12 0 100 12 12.013 12.013 0 0012 0zm0 22a10 10 0 1110-10A10.012 10.012 0 0112 22z"/></svg>') center center no-repeat;
    background-size: contain;
}
.geographical-reach {
	 width: 100%;
    padding: 40px 20px;
    text-align: center;
    background-color: #fff5e6; /* Light peach background */
}

.country-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.country-flag {
    width: 100px; /* Fixed width for flags */
    height: 60px; /* Increased height for flags */
    margin: 15px; /* Spacing around each flag */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
    font-size: 14px; /* Font size for country names */
    text-align: center;
    color: #333; /* Text color for visibility */
}

/* Flag Backgrounds */
.russian-flag {
    background: url('img/russian-flag.png') center center no-repeat;
    background-size: cover; /* Cover the entire flag area */
}

.nigerian-flag {
    background: url('img/nigerian-flag.png') center center no-repeat;
    background-size: cover; /* Cover the entire flag area */
}

.south-africa-flag {
    background: url('img/south-africa-flag.png') center center no-repeat;
    background-size: cover; 
}

.kenyan-flag {
    background: url('img/kenya-flag.png') center center no-repeat;
    background-size: cover; 
}

.ghana-flag {
    background: url('img/ghana-flag.png') center center no-repeat;
    background-size: cover; 
}

.ugandan-flag {
    background: url('img/uganda-flag.png') center center no-repeat;
    background-size: cover; 
}

.tanzanian-flag {
    background: url('img/tanzania-flag.png') center center no-repeat;
    background-size: cover; 
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .country-flag {
        width: 80px; /* Adjust width for smaller screens */
        height: 50px; /* Adjust height for smaller screens */
    }
}
.international-transfers {
    padding: 40px 20px;
    background-color: #e8f7ff; /* Light blue background */
    text-align: center;
}

.international-transfers h2 {
    font-size: 2.5em;
    color: #007bff; /* Darker blue for heading */
    margin-bottom: 20px;
}

.international-transfers p {
    font-size: 1.2em;
    color: #333; /* Text color for visibility */
    margin-bottom: 30px;
}

/* Transfer Features */
.transfer-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.feature {
    background-color: #fff; /* White background for features */
    border-radius: 10px;
    padding: 20px;
    margin: 15px;
    width: 250px; /* Fixed width for feature boxes */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth effects */
}

.feature:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.feature h3 {
    color: #007bff; /* Consistent title color */
    font-size: 1.5em;
    margin: 15px 0 10px;
}

.feature p {
    color: #555; /* Lighter shade for description text */
}

/* Icons for Features */
.low-fees-icon {
    width: 60px;
    height: 60px;
    background-color: #4caf50; /* Green for low fees */
    border-radius: 50%;
    position: relative; /* Positioning for pseudo-element */
    margin: 0 auto 10px; /* Centering icon */
}

.low-fees-icon::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 10px;
    background-color: #fff; /* White inner rectangle */
    border-radius: 5px;
}

.fast-icon {
    width: 60px;
    height: 60px;
    background-color: #ff9800; /* Orange for fast transfer */
    border-radius: 50%;
    position: relative;
    margin: 0 auto 10px; 
}

.fast-icon::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 20px;
    width: 20px;
    height: 20px;
    border: 5px solid white; /* White frame */
    border-radius: 50%; 
    animation: spin 1s linear infinite; /* Simple spin animation */
}

.predictable-icon {
    width: 60px;
    height: 60px;
    background-color: #f44336; /* Red for predictable feature */
    border-radius: 50%;
    position: relative;
    margin: 0 auto 10px; 
}

.predictable-icon::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 25px;
    width: 10px;
    height: 20px;
    background: white; /* White rectangle for lock */
    border-radius: 5px;
    animation: blink 1s infinite; /* Simple blink animation */
}

/* Animations for the predictable icon */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .transfer-features {
        flex-direction: column; /* Stack features on small screens */
    }

    .feature {
        width: 90%; /* Full width on small screens */
    }

    .international-transfers h2 {
        font-size: 2em; /* Smaller heading size */
    }
}
.money-transfer-animation {
    padding: 40px 20px;
    background-color: #e8f7ff; /* Light blue background */
    text-align: center;
}

.money-transfer-animation h2 {
    font-size: 2em;
    color: #007bff; /* Darker blue for heading */
    margin-bottom: 20px;
}

.animation-container {
    position: relative;
    width: 100%;
    height: 200px; /* Set height for the animation */
    overflow: hidden; /* Hide overflowing coins */
    background-color: #f0f8ff; /* Light background for contrast */
    border-radius: 10px;
}

/* Coins */
.coin {
    position: absolute;
    width: 50px; /* Width of coin image */
    height: 50px; /* Height of coin image */
    background-size: cover; /* Ensure background image covers the div */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); /* Glow effect */
    opacity: 0.8; /* Slight transparency for realism */
}

/* Background images for coins */
.coin-1 {
    background-image: url('img/Untitled.jpg'); /* Path to your image */
    left: -60px; /* Start position off screen */
    animation: move-coin 5s linear infinite;
}

.coin-2 {
    background-image: url('path/to/your/coin_image_2.png'); /* Path to your image */
    left: -60px; 
    animation: move-coin 5s linear 0.5s infinite; /* Delay */
}

.coin-3 {
    background-image: url('path/to/your/coin_image_3.png'); /* Path to your image */
    left: -60px; 
    animation: move-coin 5s linear 1s infinite; /* Delay */
}

.coin-4 {
    background-image: url('path/to/your/coin_image_4.png'); /* Path to your image */
    left: -60px; 
    animation: move-coin 5s linear 1.5s infinite; /* Delay */
}

.coin-5 {
    background-image: url('path/to/your/coin_image_5.png'); /* Path to your image */
    left: -60px; 
    animation: move-coin 5s linear 2s infinite; /* Delay */
}

/* Animation Keyframes */
@keyframes move-coin {
    0% {
        transform: translateX(0) translateY(0); /* Start position */
        opacity: 0; /* Start from invisible */
    }
    25% {
        opacity: 1; /* Fade in */
    }
    50% {
        transform: translateX(50vw) translateY(-20px); /* Move right and up */
    }
    75% {
        opacity: 1; /* Stay visible */
    }
    100% {
        transform: translateX(100vw) translateY(0); /* Move off the screen */
        opacity: 0; /* Fade out */
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .coin {
        width: 30px; /* Smaller on mobile screens */
        height: 30px;
    }
}

.exchange-rate-save {
    display: flex;
    flex-direction: row; /* Default for larger screens */
    justify-content: space-between;
    align-items: center;
    padding: 60px 20px; /* Padding for spacing */
    background-color: #e8f7ff; /* Light blue background */
    border-radius: 10px; /* Rounded corners */
    margin: 20px 0; /* Space above and below the section */
    flex-wrap: wrap; /* Allow content to wrap on smaller screens */
}

.content {
    flex: 1; /* Grow to take up remaining space */
    margin-right: 30px; /* Space between text and image */
    min-width: 250px; /* Minimum width for content */
}

.content h2 {
    font-size: 2.5em; /* Larger heading size */
    color: #007bff; /* Darker blue for heading */
    margin-bottom: 15px;
}

.content p {
    font-size: 1.1em; /* Standard text size for readability */
    line-height: 1.6; /* Line spacing */
    color: #555; /* Dark gray text color */
}

.image {
    flex: 0 0 300px; /* Fixed width for image container */
    max-width: 100%; /* Ensure responsiveness on smaller screens */
}

.image img {
    width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Rounded corners for the image */
}

/* Media Queries for responsiveness */
@media (max-width: 768px) {
    .exchange-rate-save {
        flex-direction: column; /* Stack the content and image */
        align-items: center; /* Center align items */
    }

    .content {
        margin-right: 10; /* Remove right margin */
        text-align: center; /* Center the text on smaller screens */
        margin-bottom: 20px; /* Space between content and image */
    }

    .image {
        flex: 1 0 100%; /* Take full width on smaller screens */
        max-width: 100%; /* Ensure the image doesn't overflow */
    }
}