/* for mobile browser only: This file contains styles specific to mobile devices. */

/* for mobile browser only: Reset some styles for mobile devices */
.container {
    flex-direction: column; /* Stack left and right sides vertically */
    position: relative; /* Ensure the container is the positioning context for absolute children */
    min-height: 120vh; /* Ensure the container takes up at least 120% of the viewport height */
    /* padding-bottom: 100px; /* Add padding at the bottom to ensure space for the toggle button */
}

/* for mobile browser only: Adjust the left side for mobile */
.left-side {
    width: 100%; /* Take full width on mobile */
    padding-left: 5%; /* Keep some padding */
    padding-right: 5%; /* Keep some padding */
    justify-content: center; /* Center content vertically */
    text-align: center; /* Center text horizontally */
    margin-bottom: 60px; /* Add space below the left-side content */    
}

/* for mobile browser only: Adjust the right side for mobile */
.right-side {
    width: 100%; /* Take full width on mobile */
    margin-top: 40px; /* Increased space between text and image */
    margin-bottom: 00px; /* Add space below the image */
}

/* for mobile browser only: Adjust the font size for mobile */
.intengo, .africa {
    font-size: 4rem; /* Smaller font size for mobile */
    text-align: center; /* Center text */
    /* margin-top: 50px; /* Adjust top margin */
    width: 100%; /* Ensure both words take full width */    
}

/* for mobile browser only: Reduce the distance between INTENGO and Africa */
.intengo {
    margin-bottom: 0.5rem; /* Reduced space between INTENGO and Africa */
    margin-top: 50px; /* Bring INTENGO closer to the top of the screen */
}

/* for mobile browser only: Bring Africa closer to INTENGO and align it properly */
.africa {
    margin-top: 0; /* Remove default margin-top to bring it closer to INTENGO */
    margin-bottom: 1rem; /* Add a small margin below Africa for spacing */
    text-align: right; /* Right-align text */
    padding-right: 18%; /* Add padding to align with INTENGO */
}

/* for mobile browser only: Adjust the paragraph font size for mobile */
.reaching-the-heart {
    font-size: 1.2rem; /* Smaller font size for mobile */
    text-align: center; /* Center text */
    margin-top: 20px; /* Adjust top margin */
    margin-bottom: 20px; /* Space between paragraph and toggle button */    
}

/* for mobile browser only: Adjust the image size for mobile */
.africa-outline {
    width: 80%; /* Increase image size for better visibility */
    height: auto; /* Maintain aspect ratio */
    margin-top: 40px; /* Add space above the image */
    /* margin-bottom: 100px; /* Add space below the image to ensure it's fully visible */
    display: block; /* Ensure the image is treated as a block element */
    /* margin-left: auto; /* Center the image horizontally */
    /* margin-right: auto; /* Center the image horizontally */
}

/* for mobile browser only: Adjust the toggle switch position for mobile */
.toggle-switch {
    position: fixed; /* Use fixed positioning to place the button relative to the viewport */
    top: 55%; /* Move toggle switch to the bottom */ 
    bottom: 20px; /* Position the button 20px from the bottom of the screen */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center the toggle switch horizontally */
}