@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
}

html, body {
    height: 100%;
    background: #0e0e0e;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

.container {
    margin: auto;
    max-width: 580px; /* Increase the width of the container */
    padding: 30px 15px; /* Add more padding for desktop */
    background: url('../img/paper.png');
    color: #FFF;
    border-radius: 25px;
}

.text-muted {
    color: #FFF!important;
}

.blue-bg {
    background: #54BDE3;
}

/* Styling for the name heading */
.name-heading {
    font-size: 3.5rem; /* Make the name larger for desktop */
    font-weight: 300;
}

.lead {
    font-size: 2rem; /* Increase size of "Software Engineer" text */
}

.list-unstyled {
    display: flex; /* Flexbox for horizontal alignment */
    justify-content: center; /* Center the list items */
    gap: 20px; /* Add space between list items */
    padding-left: 0; /* Remove default list padding */
    padding-top: 20px;
}

.list-unstyled li {
    list-style: none; /* Remove bullets */
    margin-bottom: 0; /* Remove margin to prevent stacking */
}


   .text-after-icon {
        display: inline;
    }

    .fa {
        font-size: 1rem; /* Default icon size for desktop */
    }

/* Media query for smaller screens */
@media (max-width: 576px) {
    .container {
        max-width: 100%; /* Ensure the container is full width on mobile */
        padding: 20px 15px; /* Reduce padding on mobile */
    }

    .name-heading {
        font-size: 2rem; /* Adjust font size for mobile */
 	padding-bottom: 10px;
    }

    .lead {
        font-size: 1.5rem; /* Adjust size for mobile */
    }

    /* Stack list items vertically on mobile */
    .list-unstyled {

        align-items: flex-start; /* Align to the left */
        gap: 10; /* Remove space between items */
    }

    .list-unstyled li {
        margin-bottom: 0px; /* Add small margin for separation */
    }

    .text-after-icon {
        display: none;
    }
    .fa {
        font-size: 2rem!important; /* Increase icon size on mobile */
    }
}