body, html {
    -ms-overflow-style: none; /* for Internet Explorer 10+ */
    scrollbar-width: thin; /* for Firefox */
    scrollbar-color: #c0c0c0 #ecf0f1; /* for Firefox */
}

body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
        /* Make the image responsive and cover the full width */
.responsive-banner {
    width: 100%; /* Ensure image covers the full width */
    height: auto; /* Maintain aspect ratio */
    display: block;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    margin-left: 0; /* Reset any margin that might be applied */
    margin-right: 0;
    opacity: 0; /* Start hidden */
    transform: scale(0.95); /* Start slightly smaller */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition for visibility */
}
/* Remove unwanted dashes/underlines */
a {
    text-decoration: none;
}

/* Adjust icon styles */
.app-store-icons a, .social-icons a {
    display: inline-block;
    margin: 10px;
}

.app-store-icons i, .social-icons i {
    font-size: 40px;
    transition: transform 0.3s ease-in-out;
}

.app-store-icons i:hover, .social-icons i:hover {
    transform: scale(1.1);
}

/* Ensure the icons align properly */
.footer-right, .social {
    text-align: center;
    margin-top: 20px;
}

/* Show banner with animation */
.responsive-banner.visible {
    opacity: 1;
    transform: scale(1); /* Fade-in and scale to normal size */
}

/* Optional: Add some padding to the header for better presentation */
header {
    padding: 0; /* Remove extra padding */
    text-align: center;
}

h2 {
            margin-top: 3em;
            font-size: 35px;
            margin-bottom: 10px;
            margin-left: 15%;
            color: #e00f0f;
            opacity: 0; /* Start hidden */
            transition: opacity 1s, transform 1s; /* Smooth transition for visibility */
        }

/* Show header title with animation */
h2.visible {
    opacity: 1;
    transform: translateY(0); /* Fade-in and move to position */
}

/* Red line animation */
.red-line {
    width: 0; /* Start hidden */
    height: 5px;
    background-color: #e00f0f;
    /* margin-top: 50px; */
    margin-left: 15%;
    transition: width 1s ease-out; /* Smooth transition for width */
}

/* Expand red line when visible */
.red-line.visible {
    width: 70%;
}

.info-text {
    color: #000;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin: 20px 20%;
    text-align: justify;
    margin-bottom: 10em;
}

.info-text p {
    opacity: 0; /* Hidden by default */
    transition: opacity 1s ease-in-out; /* Smooth fade-in effect */
}

.info-text p.visible {
    opacity: 1; /* Visible state */
}


/* Ensure responsiveness for smaller screens */
@media (max-width: 768px) {
    h2 {
        font-size: 28px; /* Adjust font size on smaller screens */
    }

    .info-text {
        font-size: 16px; /* Reduce font size on smaller screens */
        margin-left: 20%; /* Adjust margins for better readability */
        margin-right: 20%;
    }

    .red-line {
        width: 50%; /* Reduce the width of the red line on smaller screens */
    }
}

@media (max-width: 480px) {
    h2 {
        margin-left: 7%;
        font-size: 30px; /* Smaller font for very small screens */
    }

    .info-text {
        font-size: 16px; /* Reduce font size on smaller screens */
        margin-left: 10%; /* Adjust margins for better readability */
        margin-right: 10%;
    }
    .red-line.visible{
        width: 90%;
    }

    .red-line {
        width: 0;
        margin-left: 6%;
        /* margin-left: 10%; Move red line to the right on tiny screens */
    }
}