.logoai {
    /*position: absolute;*/
    left: 10px; /* Adjust the value as per your preference */
    top: 10px; /* Adjust the value as per your preference */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 30px; /* Reduce size of "ai" */
    height: 50px;
    width: 50px;
    background-color: green;
    color: white;
    font-family: FORTE;
    margin-right: -7px;
   
}


.mobile-container {
    max-width: 480px;
    margin: auto;
}

.w3-top {
    max-width: 480px;
    margin: auto;
}

.w3-bottom {
    max-width: 480px;
    margin: auto;
}

.w3-button {
    max-width: 480px;
    margin: auto;
}

.menu {
    display: none;
    background-color: #f1f1f1;
    width: 100%;
}

.w3-bar-item {
    /*position: absolute;*/
    left: 10px; /* Adjust the value as per your preference */
    top: 10px; /* Adjust the value as per your preference */
    padding: 8px 16px;
    font-size: 24px; /* Increase size of hamburger icon */
    margin-right: -10px;
}

.w3-bar a {
    margin-right: auto;
}

.w3-card.thin {
    box-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,0.05);
}

.w3-card.medium {
    box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 2px 2px rgba(0,0,0,0.05);
}

.logo {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    display: flex; /* Add this to align "ai" and "yakgpt.com" */
    align-items: center; /* Add this to align "ai" and "yakgpt.com" */
    margin-left: -10px;
}


    .logo .ai {
        background-color: darkcyan;
        color: white;
        border-radius: 50%;
        padding: 5px 10px;
        margin-right: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 45px;
        width: 45px;
        text-align: center;
        font-size: x-large;
        font-family: FORTE;
    }

    .logo .yak {
        color: black;
        font-family: FORTE;
      
    }

    .logo .gpt {
        color: red;
        font-family: FORTE;
      
    }

/* Add this style to show the menu */
#myLinks {
    display: none;
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
}

    /* Adjust padding and font size for menu links */
    #myLinks a {
        padding: 8px 16px;
        font-size: 24px;
    }

@font-face {
    font-family: 'FORTE';
    src: url('../font/FORTE.TTF') format('truetype');
}

.w3-but {
    width: 100%;
    text-align: left;
}


.w3-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}