body {
    background-color: #f4f4f4;
    font-family: 'Arial', sans-serif;
}
.logo {
    max-width: 200px; /* Adjust based on your logo size */
    margin-bottom: 20px; /* Provides some space between the logo and the next element */
}
/* Navbar customizations */
.navbar {
    font-family: 'Kanit', sans-serif; /* Custom font */
    padding: 0.5rem 1rem; /* Adjust padding to change navbar height */
  padding-top: 0; /* Remove extra padding at the top */

}

.navbar-brand {
    font-weight: bold; /* Make the brand name stand out */
    font-size: 1.5rem; /* Increase brand name size */
}

.nav-link {
    font-weight: 500; /* Adjust weight for better legibility */
    transition: color 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.nav-link:hover, .nav-link:focus {
    color: #f8f9fa; /* Light shade for hover/focus */
}

/* Adjust the navbar-toggler for smaller screens */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1); /* Subtle border color */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Custom icon color */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem; /* Reduce padding on smaller screens */
    }
}

/* Additional customizations */
.bg-dark {
    background-color: #E1306C !important; /* Ensure the navbar is truly black */
}
/* Navbar customizations */
.navbar {
    font-family: 'Kanit', sans-serif; /* Custom font */
    padding: 0.5rem 1rem; /* Adjust padding to change navbar height */
}

.navbar-brand {
    font-weight: bold; /* Make the brand name stand out */
    font-size: 1.5rem; /* Increase brand name size */
}

.nav-link {
    font-weight: 500; /* Adjust weight for better legibility */
    transition: color 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.nav-link:hover, .nav-link:focus {
    color: #f8f9fa; /* Light shade for hover/focus */
}

/* Adjust the navbar-toggler for smaller screens */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1); /* Subtle border color */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Custom icon color */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar {
        padding: 0.2rem; /* Reduce padding on smaller screens */
    }
}

/* Additional customizations */
.bg-dark {
    background-color: #E1306C !important; /* Ensure the navbar is truly black */
}

.individual-container {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9; /* Slightly different background for contrast */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional shadow for depth */
}

.container {
    padding-top: 50px;
}

h1 {
    color: #ffffff;
    margin-bottom: 20px;
}
/* Add responsiveness */
@media (max-width: 768px) {
    .container {
        padding-top: 20px;
    }
}
/* Customizes the overall look and feel beyond Bootstrap's defaults */

/* Body */
body {
    background-color: #f8f9fa; /* Lighter background to give a fresh look */
    font-family: 'Roboto', sans-serif; /* Ensures consistent typography */
}

/* Navigation Bar */
.navbar {
    background-color: #E1306C; /* Primary color for more brand consistency */
    padding: 0.5rem 1rem; /* Adjusts the padding for a tighter navbar */
}

.navbar-brand {
    color: #fff !important; /* Ensures the brand name stands out */
}

.nav-link {
    color: #ffffff !important; /* Light text for readability */
}

.nav-link:hover {
    color: #cce5ff !important; /* Lighter shade on hover for a subtle effect */
}

/* Hero Section */
.jumbotron {
    background-color: #ffffff; /* Sets a clean, white background */
    padding: 2rem 1rem; /* Adjusts padding for a more compact look */
    border-radius: 0.5rem; /* Adds slight rounding to the corners */
    margin-bottom: 2rem; /* Ensures spacing between sections */
}

.jumbotron h1 {
    color: #E1306C; /* Primary color for the heading for visual impact */
}

.jumbotron p {
    color: #6c757d; /* Muted text color for the paragraph for contrast */
}



/* Footer */
footer {
    background-color: #007bff; /* Matches the navbar for consistency */
    color: #ffffff; /* White text for contrast */
    padding: 1rem 0; /* Padding for spacing */
}

footer p {
    margin-bottom: 0; /* Removes default margin for tighter look */
}

/* Media Queries for responsive adjustments */
@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem; /* Reduces padding on smaller screens */
    }
}
/* Add spacing above the section where the profile card will be displayed */
#userProfileSection {
    margin-top: 0px; /* Adjust spacing as needed */
}

/* Card styling for Instagram profile */
.instagram-profile-card {
    max-width: 600px;
    margin: 1rem auto; /* Adds more vertical spacing between the card and other elements */
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,.05); /* Subtle shadow for a floating effect */
    background-color: #fff; /* Ensures the card background is white */
}

/* Profile picture styling */
.instagram-profile-card .profile-pic {
    width: 120px; /* Slightly larger profile picture for emphasis */
    height: 120px; /* Maintain aspect ratio */
    border-radius: 50%; /* Circular profile pictures */
    margin-top: -60px; /* Adjusts the image to float above the card top */
    border: 3px solid #dd1568; /* White border to distinguish from card background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.249); /* Subtle shadow for depth */
}

/* Card content styling */
.instagram-profile-card .card-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    padding: 1rem; /* More padding for a spacious layout */
}

/* Title and text styling for clarity and emphasis */
.instagram-profile-card .card-title, .instagram-profile-card .card-text {
    font-size: 1.2rem;
    width: 100%;
    word-wrap: break-word;
    color: #000000; /* Darker text for better readability */
    margin-bottom: 1rem; /* Spacing between text elements */
}

/* Styling for follower count and other stats for clarity */
.instagram-profile-card .card-text small.text-muted {
    display: inline-block;
    width: 100%;
    font-weight: bold; /* Bold for emphasis */
    color: #000000 !important; /* Darker shade for better readability */
    display: block; /* Each stat on its own line for clarity */
}

/* General styling adjustments for spacing and aesthetics */
.section-hero, .section-features, .section-how-it-works {
    margin-bottom: 2rem; /* Ensures consistent spacing between sections */
}
/* Temporary message and loading animation styling */
#userProfileSection div.text-center {
    margin-top: 20px;
}

#userProfileSection div.text-center img {
    margin-top: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#messageContainer {
    transition: background-color 1s ease;
    background-color: #f0f0f0; /* Light grey background to start with */
    color: #000000; /* Dark text for readability */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

#dynamicMessage {
    font-size: 18px; /* Slightly larger font size for emphasis */
    font-weight: 500; /* Medium font weight */
    opacity: 1;
    transition: opacity 2s ease;
}

/* Define keyframes for the background color transition */
@keyframes backgroundColorTransition {
    0% { background-color: #f0f0f0; }
    50% { background-color: #dfe3ee; }
    100% { background-color: #f0f0f0; }
}

.btn-linear {
    background: -webkit-linear-gradient(-135deg, #0059ff, #b900b4, #ff5e00) !important;
    background: linear-gradient(-135deg, #005cff, #b900b4, #c64b02) !important;
}