/*navbar.css*/
/* General styles (commented out on 10/2/2024; will reuse later). */



#post-ad-label 
{
    display: none;
}
      
/*///////////// Menu /////////////////*/
.menu-links {
    display: flex; /* Display menu items inline */
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0; /* Remove default margin */
}

.menu-icon {
    display: none; /* Hide menu icon by default */
    cursor: pointer; /* Change cursor to pointer */
    transform: translate(90px, -1.4px); /* Move 20px to the right and 5px up */
}

/* Show the menu when toggled */
.menu-links.show {
    display: flex; /* Show menu when toggled in flex style */
}         
/*///////////// Menu /////////////////*/

.is-computer .navbar-container header {
    background-color: #ffffff; /* Light Blue */
    /*border: none !important;*/
}

/* Active link style with custom underline */
.is-computer .menu-link.active {
    border-bottom: 4px solid #b73439;
}

/* Active link style with custom underline */
/*
.is-computer #home-btn.active {
    background-color: #4CAF50;
    color: white;
    border-bottom: 3px solid white;
}
*/

/*added to remove horizontal scroll*/
body.is-computer {
    overflow-x: hidden !important;
    /*background-color: red !important;*/
}

.is-smartphone #logo2 {
    display: none;
}

/*///////////////////////////////////////////// Media  queries starting /////////////////////////////////////////////*/


/*points for future*/
/*actual :  used for media queries (chrome and checked from whatismyip.com)     */


/*           Smartphone    device # = (1)    tested on = 319px    (max-width:	320	px) { }    starting              */

@media only screen and (max-width: 320px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
        }
    
/*.is-smartphone*/ .is-smartphone .navbar-container header {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 99.9%;
/* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
    color: #333;
    border-bottom: 1.4px solid #D0D0D0;
    border-top: 1.4px solid #D0D0D0;
    text-align: center;
    z-index: 1000; 
    

    }

        /*///////////// Menu starting /////////////////*/
        
        /*.is-smartphone*/ .is-smartphone .menu-icon {
            cursor: pointer;
            font-size: 24px; /* Adjust as needed */
            display: block;    
            position: relative; /* Use relative positioning */
            left: -57px; /* Move 60px to the left */
        }
        

        /*.is-smartphone*/ .is-smartphone .menu-links {
            display: none; /* Hide links by default */
            list-style: none; /* Remove default list styling */
            padding: 0;
            margin: 0; /* Remove default margin */
        }
    
        /*.is-smartphone*/ .is-smartphone .menu-links.show {
            display: block; /* Show menu as a block (vertical list) */
            position: absolute;
            bottom: 100%; /* Position the dropdown above the toggle */
            left: 0; /* Align with the toggle element */
            z-index: 1000; /* Ensure it appears above other elements */  
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: opacity 0.3s ease; /* Smooth transition */
            opacity: 1; /* Make it visible */
            width: 100%; /* Optional: Set width to match toggle button */
            border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
            bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
            background-color: #e7f0f5;
            opacity: 1; /* Ensure the dropdown is fully opaque */
        }
    
        /*.is-smartphone*/ .is-smartphone .menu-links::before {
            content: "Menu"; /* Add the "Menu" text */
            font-weight: bold; /* Make it bold */
            display: block; /* Make it a block element */
            text-align: center; /* Center the text */
            font-size: 16px; /* Adjust size as needed */
            color: #333; /* Header text color */
            background-color: rgb(116, 198, 239);
            margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
            padding-bottom: 6.5px; /* Padding below the text */
            padding-top: 6.5px; /* Padding below the text */
        }
      
        /*.is-smartphone*/ .is-smartphone .menu-links.show a {
            display: block; /* Each link takes up full width */
            padding: 10px 15px; /* Add padding for spacing */
            text-decoration: none; /* Remove underline from links */
            color: #333; /* Link color */
            background-color: #e7f0f5;
        }
        
        /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
            background-color: #d1d7dc; /* Change background on hover */
        }
        
       /*///////////// Menu ending /////////////////*/
       
        /*.is-smartphone*/  .is-smartphone #home-btn  {
    position: absolute; 
    left: 9px; /* 1px to the left */
    top: 41.2px;  /* 3px up */
}

        /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
            display: none;
        }
       
            /*.is-smartphone*/  .is-smartphone #post-ad-label  {
                display: block;
                white-space: nowrap; /* Use white-space instead of text-wrap */
                position: relative; /* or 'absolute' depending on your layout */
                top: -30px; /* Move up by 60 pixels */
                left: -118px;
            }
           
            /*.is-smartphone*/  .is-smartphone #navbar-heading  {
                font-size: 14.5px; /* Reduced by + 30% */
                text-align: center; /* Center text horizontally */
                transform: translateY(17.4px); /* Move down by 10 pixels */
            }
           
        /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
        /*.is-smartphone*/  .is-smartphone nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
        }
        
        /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
        }
        
        /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        }
        

        /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        

        
        /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
        }
       
        /*.is-smartphone*/  .is-smartphone #load-form  {
            height: 47px; /* Set the height */
            width: 36px; /* Set the width to maintain a round shape */
            border: none;
            border-radius: 50%; /* 50% makes it round */
            background-color: rgb(183, 52, 57); 
            color: transparent; /* Text color (hidden) */
            font-size: 16px; /* Text size */
            cursor: pointer;
            outline: none; /* Remove outline */
            transition: background-color 0.3s; /* Smooth transition */
            position: absolute; /* Set position for absolute positioning of the pseudo-element */
            transform: translate(-152px, -90px); /* Move the button 20px left and 90px up */
            box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
            transition: transform 0.3s; /* Smooth transition for text background */
            
        }
        
        /*.is-smartphone*/  .is-smartphone #load-form::before {
            content: 'Sell Bird'; /* Add plus sign before the text */
            position: absolute; /* Use absolute positioning */
            top: 50%; /* Center vertically */
            left: 50%; /* Center horizontally */
            transform: translate(-50%, -50%); /* Adjust position */
            color: white; /* Color of the plus sign */
            font-size: 15px; /* Adjust size if needed */
            font-weight: bold; /* Make the text bold */
            background-color: rgb(190, 69, 73); 
            
        }
        
        /*.is-smartphone*/  .is-smartphone #load-form:hover {
            background-color:rgb(183, 52, 57);
            border-color:rgb(122, 18, 21); 
            }
            
            
        /*.is-smartphone*/  .is-smartphone #register-or-profile {
            transform: translateY(-0.5px) translateX(183px); /* Adjusted to move 7px left */

        margin-left: -400px; 
        color: #1E90FF;
        text-decoration: none;
        
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
        }

        /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
        /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
            background-color: transparent; /* Or any other color you prefer */
            outline: none; /* Remove the outline, if necessary */
        }
        
        /*.is-smartphone*/  .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(44px); /* Move 2.5px down */
        padding: 0.5em 1em;
        margin-left: -177px; 
        color: #1E90FF;
        text-decoration: none;
        /*transition: background-color 0.3s;*/
        display: inline-block;
        width: 0px;
        }

        /*.is-smartphone*/  .is-smartphone #login-button:focus,
        /*.is-smartphone*/  .is-smartphone #login-button:active {
          background-color: transparent; /* Or any other color you prefer */
          outline: none; /* Remove the outline, if necessary */
        }
       
       /*.is-smartphone*/  .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-129px); /* Move 3px down and 2px to the left */
    margin-left: -145px; 
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


        /*.is-smartphone*/  .is-smartphone #logout-button {
            transform: translateY(-0.9px) translateX(-5px); /* Move 3px down and 2px to the left */
        margin-left: -145px; 
        color: #1E90FF;
        text-decoration: none;
        padding: 0;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0px;
        }

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
      background-color: transparent; /* Or any other color you prefer */
      outline: none; /* Remove the outline, if necessary */
    }
    
    
        /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
        }
    
}

/*           Smartphone    device # = (1)    tested on = 319px    (max-width:	320	px) { }    ending              */


/*           Smartphone    device # = (2)    tested on = 335px    (min-width: 321px) and (max-width: 350px) { }   starting        */

@media only screen and (min-width: 321px) and (max-width: 350px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    /*.is-smartphone*/ .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; /* Use relative positioning */
        /*left: -57px; /* Move 60px to the left */
        left: -47px; /* Move 60px to the left */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    
    /*.is-smartphone*/  .is-smartphone #home-btn  {
        position: absolute; 
        left: 13px; /* 1px to the left */
        top: 41.2px;  /* 3px up */
    }

    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-143px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
    /*.is-smartphone*/  .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(193px); /* Move 10px to the right */

        margin-left: -400px; 
        color: #1E90FF;
        text-decoration: none;
        
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
        }

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
    /*.is-smartphone*/  .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(54px); /* Move 10px to the right */

        padding: 0.5em 1em;
        margin-left: -177px; 
        color: #1E90FF;
        text-decoration: none;
        /*transition: background-color 0.3s;*/
        display: inline-block;
        width: 0px;
        }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
    /*.is-smartphone*/  .is-smartphone #dashboard-link {
        transform: translateY(-0.9px) translateX(-122px); /* Move 3px down and 2px to the left */
        margin-left: -145px; 
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
    }
        
    /*.is-smartphone*/  .is-smartphone #logout-button {
        transform: translateY(-0.9px) translateX(4px); /* Move 3px down and 2px to the left */
        margin-left: -145px; 
        color: #1E90FF;
        text-decoration: none;
        padding: 0;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0px;
    }

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (2)    tested on = 335px    (min-width: 321px) and (max-width: 350px) { }   ending        */


/*           Smartphone    device # = (3)    tested on = 375px    (min-width: 351px) and (max-width: 400px) { }   starting        */

@media only screen and (min-width: 351px) and (max-width: 400px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
    /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    /* .is-smartphone */ .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; /* Remains relative */
        left: -28px; /* Remains unchanged */
        margin-left: 25px; /* Remains unchanged */
    }
    
    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    
    /* .is-smartphone */  .is-smartphone #home-btn  {
        position: absolute; 
        left: 10px; /* Moved 2px left from 12px */
        top: 41.2px;  /* Remains unchanged */
        margin-left: 1px; /* Remains unchanged */
    }
    
    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-150px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
/* .is-smartphone */  .is-smartphone #register-or-profile {
    transform: translateY(-0.5px) translateX(171px); /* Moved 1px to the right */
    margin-left: -395px; /* Remains unchanged */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0;
}

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
    /* .is-smartphone */  .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(47px); /* Moved 1px to the left */
        padding: 0.5em 1em;
        margin-left: -167px; /* Remains unchanged */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
    /*.is-smartphone*/  .is-smartphone #dashboard-link {
        transform: translateY(-0.9px) translateX(-130px); /* Move 3px down and 2px to the left */
        margin-left: -145px; 
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
    }
        
    /*.is-smartphone*/  .is-smartphone #logout-button {
        transform: translateY(-0.9px) translateX(9px); /* Move 3px down and 2px to the left */
        margin-left: -145px; 
        color: #1E90FF;
        text-decoration: none;
        padding: 0;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0px;
    }

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (3)    tested on = 375px    (min-width: 351px) and (max-width: 400px) { }   ending        */


/*           Smartphone    device # = (4)    tested on = 425px    (min-width: 401px) and (max-width: 480px) { }   starting        */

@media only screen and (min-width: 401px) and (max-width: 450px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
/* .is-smartphone */ .is-smartphone .menu-icon {
    cursor: pointer;
    font-size: 24px; /* Adjust as needed */
    display: block;    
    position: relative; /* Remains relative */
    left: 20px; /* Remains unchanged */
    margin-left: 25px; /* Remains unchanged */
}

    
    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

/* .is-smartphone */  .is-smartphone #home-btn  {
    position: absolute; 
    left: 10px; /* Moved 2px left from 12px */
    top: 41.2px;  /* Remains unchanged */
    margin-left: 1px; /* Remains unchanged */
}


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-123px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
/* .is-smartphone */ 
 .is-smartphone #register-or-profile {
    transform: translateY(-0.5px) translateX(185px); /* Changed from 218px to 213px (moved 5px to the left) */
    margin-left: -395px; /* Remains unchanged */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0;
}


    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
    

/* .is-smartphone */ 
 .is-smartphone #login-button {
    transform: translateY(-0.5px) translateX(73px); /* Changed from 48px to 73px */
    padding: 0.5em 1em;
    margin-left: -167px; /* Remains unchanged */
    color: #1E90FF;
    text-decoration: none;
    display: inline-block;
    width: 0;
}

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
    /*.is-smartphone*/  .is-smartphone #dashboard-link {
        transform: translateY(-0.9px) translateX(-118px); /* Move 3px down and 2px to the left */
        margin-left: -145px; 
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
    }
        
    /*.is-smartphone*/  .is-smartphone #logout-button {
        transform: translateY(-0.9px) translateX(30px); /* Move 3px down and 2px to the left */
        
        margin-left: -145px; 
        color: #1E90FF;
        text-decoration: none;
        padding: 0;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0px;
    }

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (4)    tested on = 425px    (min-width: 401px) and (max-width: 480px) { }   ending        */


/*           Smartphone    device # = (5)    tested on = 475px    (min-width: 451px) and (max-width: 500px) { }   starting        */

@media only screen and (min-width: 451px) and (max-width: 500px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
/* .is-smartphone */ .is-smartphone .menu-icon {
    cursor: pointer;
    font-size: 24px; /* Adjust as needed */
    display: block;    
    position: relative; /* Remains relative */
    left: 12px; /* Changed from 7px to 12px (moved 5px to the right) */
    margin-left: 83px; /* Remains unchanged */
}
    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

/* .is-smartphone */ 
 .is-smartphone #home-btn  {
    position: absolute; 
    left: 45px; /* Changed from 40px to 45px (moved 5px to the right) */
    top: 41.2px; /* Remains unchanged */
    margin-left: -34px; /* Remains unchanged */
}

    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-155px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(145px); /* Changed from 223px to 228px (moved 5px to the right) */
        margin-left: -390px;
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
/* .is-smartphone */ 
 .is-smartphone #login-button {
    transform: translateY(-0.5px) translateX(49px); /* Changed from 83px to 88px (moved 5px to the right) */
    padding: 0.5em 1em;
    margin-left: -167px; /* Changed from -167px to -162px for 5px gap */
    color: #1E90FF;
    text-decoration: none;
    display: inline-block;
    width: 0;
}

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
    /*.is-smartphone*/  .is-smartphone #dashboard-link {
        transform: translateY(-0.9px) translateX(-165px); /* Moved from -98px to -88px */
        margin-left: -135px; /* Moved from -145px to -135px */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
    }
    
    /*.is-smartphone*/  .is-smartphone #logout-button {
        transform: translateY(-0.9px) translateX(1px); /* Moved from 30px to 40px */
        margin-left: -135px; /* Moved from -145px to -135px */
        color: #1E90FF;
        text-decoration: none;
        padding: 0;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0px;
    }
    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (5)    tested on = 475px    (min-width: 451px) and (max-width: 500px) { }   ending        */


/*           Smartphone    device # = (6)    tested on = 525px    (min-width: 501px) and (max-width: 550px) { }   starting        */

@media only screen and (min-width: 501px) and (max-width: 550px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
/* .is-smartphone */ 
.is-smartphone .menu-icon {
    cursor: pointer;
    font-size: 24px; /* Adjust as needed */
    display: block;    
    position: relative; /* Remains relative */
    left: 36px; /* Changed from 34px to 31px (moved 3px to the left) */
    margin-left: 110px; /* Remains unchanged */
}
    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

/* .is-smartphone */ 
 .is-smartphone #home-btn  {
    position: absolute; 
    left: 64px; /* Changed from 67px to 64px (moved 3px to the left) */
    top: 41.2px; /* Remains unchanged */
    margin-left: -53px; /* Remains unchanged */
}


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-165px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
   .is-smartphone #register-or-profile {
    transform: translateY(-0.5px) translateX(134px); /* Moved 5px to the left */
    margin-left: -386px; /* Change if necessary */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0;
}


    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
/* .is-smartphone */ 
 .is-smartphone #login-button {
    transform: translateY(-0.5px) translateX(38px); /* Moved 5px to the right */
    padding: 0.5em 1em;
    margin-left: -153px; /* Remains unchanged */
    color: #1E90FF;
    text-decoration: none;
    display: inline-block;
    width: 0;
}


    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
    /*.is-smartphone*/  .is-smartphone #dashboard-link {
        transform: translateY(-0.9px) translateX(-190px); /* Moved from -98px to -88px */
        margin-left: -115px; /* Moved from -145px to -135px */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
    }
    
    /*.is-smartphone*/  .is-smartphone #logout-button {
        transform: translateY(-0.9px) translateX(-22.5px); /* Moved from 30px to 40px */
        margin-left: -115px; /* Moved from -145px to -135px */
        color: #1E90FF;
        text-decoration: none;
        padding: 0;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0px;
    }
    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (6)    tested on = 525px    (min-width: 501px) and (max-width: 550px) { }   ending        */


/*           Smartphone    device # = (7)    tested on = 575px    (min-width: 551px) and (max-width: 600px) { }   starting        */

@media only screen and (min-width: 551px) and (max-width: 600px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
/* .is-smartphone */ 
.is-smartphone .menu-icon {
    cursor: pointer;
    font-size: 24px; /* Adjust as needed */
    display: block;    
    position: relative; 
    left: 61px; /* Changed from 56px to 61px (moved 5px to the right) */
    margin-left: 136px; /* Remains unchanged */
}
    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

/* .is-smartphone */ 
 .is-smartphone #home-btn  {
    position: absolute; 
    left: 64px; /* Changed from 67px to 64px (moved 3px to the left) */
    top: 41.2px; /* Remains unchanged */
    margin-left: -53px; /* Remains unchanged */
}


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-165px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(114.7px); /* Moved an additional 5px to the left */
        margin-left: -388px; /* Changed to -388px for additional 5px left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }
    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
/* .is-smartphone */ 
 .is-smartphone #login-button {
    transform: translateY(-0.5px) translateX(29.9px); /* Moved 5px to the right */
    padding: 0.5em 1em;
    margin-left: -141px; /* Remains unchanged */
    color: #1E90FF;
    text-decoration: none;
    display: inline-block;
    width: 0;
}

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
    /* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-220px); /* Changed from -88px to -78px (moved 10px to the right) */
    margin-left: -105px; /* Changed from -115px to -105px (moved 10px to the right) */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}

/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-38.7px); /* Changed from 37.5px to 47.5px (moved 10px to the right) */
    margin-left: -105px; /* Changed from -115px to -105px (moved 10px to the right) */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}
    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (7)    tested on = 575px    (min-width: 551px) and (max-width: 600px) { }   ending        */


/*           Smartphone    device # = (8)    tested on = 625px    (min-width: 601px) and (max-width: 650px) { }   starting        */

@media only screen and (min-width: 601px) and (max-width: 650px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
/* .is-smartphone */ 
.is-smartphone .menu-icon {
    cursor: pointer;
    font-size: 24px; /* Adjust as needed */
    display: block;    
    position: relative; 
    left: 86px; /* Changed from 81px to 86px (moved 5px to the right) */
    margin-left: 160px; /* Remains unchanged */
}
    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

/* .is-smartphone */ 
 .is-smartphone #home-btn  {
    position: absolute; 
    left: 84px; /* Changed from 64px to 74px (moved 10px to the right) */
    top: 41.2px; /* Remains unchanged */
    margin-left: -72px; /* Remains unchanged */
}


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-160px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(92.6px); /* Moved 5px to the left */
        margin-left: -375px; /* Adjusted to -375px for the 5px shift */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    
    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
/* .is-smartphone */ 
 .is-smartphone #login-button {
    transform: translateY(-0.5px) translateX(25.8px); /* Moved 5px to the right */
    padding: 0.5em 1em;
    margin-left: -126px; /* Adjusted to -126px for the 5px shift */
    color: #1E90FF;
    text-decoration: none;
    display: inline-block;
    width: 0;
}


    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
    /* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-220px); /* Changed from -88px to -78px (moved 10px to the right) */
    margin-left: -105px; /* Changed from -115px to -105px (moved 10px to the right) */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}

/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-27.5px); /* Changed from 37.5px to 47.5px (moved 10px to the right) */
    margin-left: -105px; /* Changed from -115px to -105px (moved 10px to the right) */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}
    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (8)    tested on = 625px    (min-width: 601px) and (max-width: 650px) { }   ending        */


/*           Smartphone    device # = (9)    tested on = 675px    (min-width: 651px) and (max-width: 700px) { }   starting        */

@media only screen and (min-width: 651px) and (max-width: 700px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 116px; /* Moved 5px further to the right */
        margin-left: 180px; /* Remains unchanged */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 104px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -92px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-155px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(66px); /* Moved 5px to the left */

        margin-left: -348px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(26px); /* Moved 5px to the right */
        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
    /* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-210px); /* Changed from -88px to -78px (moved 10px to the right) */
    margin-left: -105px; /* Changed from -115px to -105px (moved 10px to the right) */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}

/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-17px); /* Changed from 37.5px to 47.5px (moved 10px to the right) */
    margin-left: -105px; /* Changed from -115px to -105px (moved 10px to the right) */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}
    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (9)    tested on = 675px    (min-width: 651px) and (max-width: 700px) { }   ending        */


/*           Smartphone    device # = (10)    tested on = 725px    (min-width: 701px) and (max-width: 750px) { }   starting        */

@media only screen and (min-width: 701px) and (max-width: 750px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 116px; /* Moved 5px further to the right */
        margin-left: 228px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -108px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-180px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(38px); /* Moved 5px to the left */

        margin-left: -348px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(8px); /* Moved 5px to the right */

        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-250px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-55px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (10)    tested on = 725px    (min-width: 701px) and (max-width: 750px) { }   ending        */


/*           Smartphone    device # = (11)    tested on = 775px    (min-width: 751px) and (max-width: 800px) { }   starting        */

@media only screen and (min-width: 751px) and (max-width: 800px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 116px; /* Moved 5px further to the right */
        margin-left: 279px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -110.5px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-205px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(7px); /* Moved 5px to the left */

        margin-left: -348px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(-13px); /* Moved 5px to the right */

        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-290px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-76.5px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (11)    tested on = 775px    (min-width: 751px) and (max-width: 800px) { }   ending        */


/*           Smartphone    device # = (12)    tested on = 825px    (min-width: 801px) and (max-width: 850px) { }   starting        */

@media only screen and (min-width: 801px) and (max-width: 850px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 116px; /* Moved 5px further to the right */
        margin-left: 330px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -110.5px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-233px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(2px); /* Moved 5px to the left */


        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(-33.7px); /* Moved 5px to the right */


        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-332px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-97px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }    
    
}

/*           Smartphone    device # = (12)    tested on = 825px    (min-width: 801px) and (max-width: 850px) { }   ending        */


/*           Smartphone    device # = (13)    tested on = 875px    (min-width: 851px) and (max-width: 900px) { }   starting        */

@media only screen and (min-width: 851px) and (max-width: 900px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 116px; /* Moved 5px further to the right */
        margin-left: 380px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -115.5px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-260px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-27.9px); /* Moved 5px to the left */



        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(-53.8px); /* Moved 5px to the right */



        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-361px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-117px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (13)    tested on = 875px    (min-width: 851px) and (max-width: 900px) { }   ending        */


/*           Smartphone    device # = (14)    tested on = 925px    (min-width: 901px) and (max-width: 950px) { }   starting        */

@media only screen and (min-width: 901px) and (max-width: 950px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 125px; /* Moved 5px further to the right */
        margin-left: 422px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -113px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-275px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-49.9px); /* Moved 5px to the left */



        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(-65.8px); /* Moved 5px to the right */



        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-380px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-129px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (14)    tested on = 925px    (min-width: 901px) and (max-width: 950px) { }   ending        */


/*           Smartphone    device # = (15)    tested on = 975px    (min-width: 951px) and (max-width: 1000px) { }   starting        */

@media only screen and (min-width: 951px) and (max-width: 1000px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 125px; /* Moved 5px further to the right */
        margin-left: 472px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -113px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-300px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-80.3px); /* Moved 5px further to the left */




        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(-86px); /* Moved 5px to the right */




        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-418px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-149px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (15)    tested on = 975px    (min-width: 951px) and (max-width: 1000px) { }   ending        */


/*           Smartphone    device # = (16)    tested on = 1025px    (min-width: 1001px) and (max-width: 1050px) { }   starting        */

@media only screen and (min-width: 1001px) and (max-width: 1050px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 175.5px; /* Moved 5px further to the right */
        margin-left: 472px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -113px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-280px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-60.3px); /* Moved 5px further to the left */





        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(-56px); /* Move 5px to the right */





        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-390px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-119.5px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (16)    tested on = 1025px    (min-width: 1001px) and (max-width: 1050px) { }   ending        */


/*           Smartphone    device # = (17)    tested on = 1075px    (min-width: 1051px) and (max-width: 1100px) { }   starting        */

@media only screen and (min-width: 1051px) and (max-width: 1100px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 175.5px; /* Moved 5px further to the right */
        margin-left: 520px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -112px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-300px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-88.3px); /* Moved 5px to the left */






        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(-74px);






        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-425px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-137.5px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (17)    tested on = 1075px    (min-width: 1051px) and (max-width: 1100px) { }   ending        */


/*           Smartphone    device # = (18)    tested on = 1125px    (min-width: 1101px) and (max-width: 1150px) { }   starting        */

@media only screen and (min-width: 1101px) and (max-width: 1150px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 280px; /* Moved 5px further to the right */
        margin-left: 467px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -112px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-225px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-15.3px); /* Moved 5px more to the left */






        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(9px); /* Moved 5px more to the right */






        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-350px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-55px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (18)    tested on = 1125px    (min-width: 1101px) and (max-width: 1150px) { }   ending        */


/*           Smartphone    device # = (19)    tested on = 1175px    (min-width: 1151px) and (max-width: 1200px) { }   starting        */

@media only screen and (min-width: 1151px) and (max-width: 1200px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 329px; /* Moved 5px further to the right */
        margin-left: 467px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -112px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-200px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(4.5px); /* Moved 5px to the left */







        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {

        transform: translateY(-0.5px) translateX(39px); /* Moved 5px more to the right */







        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-335px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-24px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (19)    tested on = 1175px    (min-width: 1151px) and (max-width: 1200px) { }   ending        */


/*           Smartphone    device # = (20)    tested on = 1225px    (min-width: 1201px) and (max-width: 1250px) { }   starting        */

@media only screen and (min-width: 1201px) and (max-width: 1250px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 280px; /* Moved 5px further to the right */
        margin-left: 566px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -112px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-274px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-74.3px); /* Moved 5px more to the left */







        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(-30px); /* Moved 5px to the right */







        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-412px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-94px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (20)    tested on = 1225px    (min-width: 1201px) and (max-width: 1250px) { }   ending        */


/*           Smartphone    device # = (21)    tested on = 1275px    (min-width: 1251px) and (max-width: 1300px) { }   starting        */

@media only screen and (min-width: 1251px) and (max-width: 1300px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 330px; /* Moved 5px further to the right */
        margin-left: 566px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -112px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-248px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-54.2px);
        /* Moved 5px more to the left */







        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(0.5px);
        /* Moved 5px to the right */







        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-392px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-63px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (21)    tested on = 1275px    (min-width: 1251px) and (max-width: 1300px) { }   ending        */


/*           Smartphone    device # = (22)    tested on = 1325px    (min-width: 1301px) and (max-width: 1350px) { }   starting        */

@media only screen and (min-width: 1301px) and (max-width: 1350px) {

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
        left: 372.5px; /* Moved 5px further to the right */
        margin-left: 566px; /* Remains unchanged */
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        padding: 10px 15px; /* Add padding for spacing */
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    

     .is-smartphone #home-btn  {
        position: absolute; 
        left: 124px; /* Moved 5px to the left */
        top: 41.2px; /* Remains unchanged */
        margin-left: -112px; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li {
        margin: 0 0.5em;
    }
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        transform: translate(-221px, -90px); /* Move the button 20px left and 90px up */
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }
            
     .is-smartphone #register-or-profile {
        transform: translateY(-0.5px) translateX(-28.2px);

        /* Moved 5px more to the left */







        margin-left: -374px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block;
        width: 0;
    }    

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          
     .is-smartphone #login-button {
        transform: translateY(-0.5px) translateX(29.5px);

        /* Moved 5px to the right */







        padding: 0.5em 1em;
        margin-left: -116px; /* Adjusted margin-left */
        color: #1E90FF;
        text-decoration: none;
        display: inline-block;
        width: 0;
    }

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    transform: translateY(-0.9px) translateX(-361px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    transform: translateY(-0.9px) translateX(-34px); /* Moved 10px to the right */
    margin-left: -95px; /* Adjusted from -105px to -95px */
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }
    
}

/*           Smartphone    device # = (22)    tested on = 1325px    (min-width: 1301px) and (max-width: 1350px) { }   ending        */

/*           Smartphone    device # = (23)    (min-width: 1351px) { }   starting        */

@media only screen and (min-width: 1351px) {
    /* Your styles for screens wider than 1350px go here */

    body.is-smartphone { /* body.is-smartphone.is-smartphone */
        font-family: Arial, sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw; 
    }
    
    /*.is-smartphone*/ .is-smartphone .navbar-container header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 99.9%;
        /* background-color: #FFFFFF; */ /* White */
/*background-color: #9de98a;*/ /* Light Green */
/*background-color: #B0E0E6;*/ /* Powder Blue */
/*background-color: #DFFFD6;*/ /* Pale Green */
/*background-color: #FFE5B4;*/ /* Light Apricot */
/*background-color: #FFF9C4;*/ /* Light Yellow */
/*background-color: #FFCCCB;*/ /* Light Red */
/*background-color: #84a7b8;*/ /* Light Teal */
background-color: #e7f0f5; /* Light Blue */
color: #333;
border-bottom: 1.4px solid #D0D0D0;
border-top: 1.4px solid #D0D0D0;
        text-align: center;
        z-index: 1000; 
    }

    /*///////////// Menu starting /////////////////*/
    
    .is-smartphone .menu-icon {
        cursor: pointer;
        font-size: 24px; /* Adjust as needed */
        display: block;    
        position: relative; 
    }

    
    /*.is-smartphone*/ .is-smartphone .menu-links {
        display: none; /* Hide links by default */
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin: 0; /* Remove default margin */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links.show {
        display: block; /* Show menu as a block (vertical list) */
        position: absolute;
        bottom: 100%; /* Position the dropdown above the toggle */
        left: 0; /* Align with the toggle element */
        z-index: 1000; /* Ensure it appears above other elements */  
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 1; /* Make it visible */
        width: 100%; /* Optional: Set width to match toggle button */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Lighter black with reduced opacity */
        bottom: calc(100% + 35px); /* Move the dropdown up by 20 pixels */
        background-color: #e7f0f5;
        opacity: 1; /* Ensure the dropdown is fully opaque */
    }
    
    /*.is-smartphone*/ .is-smartphone .menu-links::before {
        content: "Menu"; /* Add the "Menu" text */
        font-weight: bold; /* Make it bold */
        display: block; /* Make it a block element */
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust size as needed */
        color: #333; /* Header text color */
        background-color: rgb(116, 198, 239);
        margin: -16px 0 4px; /* Move the text up by adding a negative top margin */
        padding-bottom: 6.5px; /* Padding below the text */
        padding-top: 6.5px; /* Padding below the text */
    }
      
    /*.is-smartphone*/ .is-smartphone .menu-links.show a {
        display: block; /* Each link takes up full width */
        
        text-decoration: none; /* Remove underline from links */
        color: #333; /* Link color */
        background-color: #e7f0f5;
    }
        
    /*.is-smartphone*/ .is-smartphone .menu-links.show a:hover {
        background-color: #d1d7dc; /* Change background on hover */
    }
        
    /*///////////// Menu ending /////////////////*/
    
    .is-smartphone #home-btn  {
        
        left: 0; /* Moved 5px to the left */
        top: 0; /* Remains unchanged */
        margin-left: 0; /* Remains unchanged */
    }


    /*.is-smartphone*/  .is-smartphone #search_birds_btn  {
        display: none;
    }
            
    /*.is-smartphone*/  .is-smartphone #post-ad-label  {
        display: block;
        white-space: nowrap; /* Use white-space instead of text-wrap */
        position: relative; /* or 'absolute' depending on your layout */
        top: -30px; /* Move up by 60 pixels */
        left: -118px;
    }
            
    /*.is-smartphone*/  .is-smartphone #navbar-heading  {
        font-size: 14.5px; /* Reduced by + 30% */
        text-align: center; /* Center text horizontally */
        transform: translateY(17.4px); /* Move down by 10 pixels */
    }
            
    /* Ensure the  .is-smartphone nav ul is a flex container and prevents wrapping */
    /*.is-smartphone*/  .is-smartphone nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
        
        
    /*.is-smartphone*/  .is-smartphone nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        font-weight: bold; /* Add this line to make the text bold */
    }
        
    /*.is-smartphone*/  .is-smartphone .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
        
    /*.is-smartphone*/  .is-smartphone #buy_birds_btn {
        padding: 10px 20px;
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #sell_birds_btn  {
        padding: 10px 20px; 
        white-space: nowrap;
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form  {
        height: 47px; /* Set the height */
        width: 36px; /* Set the width to maintain a round shape */
        border: none;
        border-radius: 50%; /* 50% makes it round */
        background-color: rgb(183, 52, 57); 
        color: transparent; /* Text color (hidden) */
        font-size: 16px; /* Text size */
        cursor: pointer;
        outline: none; /* Remove outline */
        transition: background-color 0.3s; /* Smooth transition */
        position: absolute; /* Set position for absolute positioning of the pseudo-element */
        
margin: 0 auto;
top: -35px; /* Or adjust this if you want to move it vertically */
display: block;
margin-left: 150px;
        box-shadow: 0 9.5px 10px rgba(0, 0, 0, 0.3); /* Shadow for text background */
        transition: transform 0.3s; /* Smooth transition for text background */
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form::before {
        content: 'Sell Bird'; /* Add plus sign before the text */
        position: absolute; /* Use absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position */
        color: white; /* Color of the plus sign */
        font-size: 15px; /* Adjust size if needed */
        font-weight: bold; /* Make the text bold */
        background-color: rgb(190, 69, 73); 
    }
        
    /*.is-smartphone*/  .is-smartphone #load-form:hover {
        background-color: rgb(183, 52, 57);
        border-color: rgb(122, 18, 21); 
    }

    /*.is-smartphone*/  .is-smartphone #register-or-profile:focus,
    /*.is-smartphone*/  .is-smartphone #register-or-profile:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
          

    /*.is-smartphone*/  .is-smartphone #login-button:focus,
    /*.is-smartphone*/  .is-smartphone #login-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
        
/* .is-smartphone */ 
 .is-smartphone #dashboard-link {
    
    color: #1E90FF;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}


/* .is-smartphone */ 
 .is-smartphone #logout-button {
    
    color: #1E90FF;
    text-decoration: none;
    padding: 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    width: 0px;
}

    

    /*.is-smartphone*/  .is-smartphone #logout-button:focus,
    /*.is-smartphone*/  .is-smartphone #logout-button:active {
        background-color: transparent; /* Or any other color you prefer */
        outline: none; /* Remove the outline, if necessary */
    }
    
    /*.is-smartphone*/  .is-smartphone footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; 
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); 
    }

    .is-smartphone .navbar-container header {
            width: 100%;
            left: 0;
            right: 0;
        }
    
        .is-smartphone nav ul {
            justify-content: center; /* Keep links centered */
            /*background-color: red;*/
        }
 
        .is-smartphone .menu-icon {
            all: unset;
            font-size: 24px;
            display: inline-block;
            padding: 0.5em 1em;
            color: #1E90FF;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        
        
/* Apply explicit order to each nav item */
.is-smartphone #home-btn {
    order: 1;
    margin-right: 100px;
}

.is-smartphone #register-or-profile {
    order: 2;
    margin-right: 100px;
}

.is-smartphone #login-button {
    order: 3;
    margin-right: 100px;
}

.is-smartphone .menu-icon {
    order: 4;
    margin-right: 100px;
}
        
/*/////////////////*/
/* Apply explicit order to each nav item */

.is-smartphone #dashboard-link {
    margin-right: 125px;
}

.is-smartphone #logout-button {
    margin-right: 125px;
}

}

/*           Smartphone    device # = (23)    (min-width: 1351px) { }   ending        */

/* ///////////////////////////////////////////////////////
   saliha Computer Media Queries for Laptop Resolutions (Final Ranges without Height)
//////////////////////////////////////////////////////// */

/*1) (800 * 600 --->  acutal = 800 * 465) */
@media only screen and (min-width: 1px) and (max-width: 800px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(187, 255, 0);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        height: 180px; /* added*/
        /*background-color: lightblue !important;*/
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px; /* changed*/
        /*margin-left: -32.5px; /* changed*/
        /*margin-left: -85.5px; /* changed*/
      
        /*margin-left: -238.5px; /* changed*/
        /* decrese 20px on each*/
        margin-left: -218.5px;
        
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        /*transform: translate(-720px, 49.5px);*/ /* Move the button 200px left and 45px down */
        transform: translate(-640px, 49.5px); /* Move the button 200px left and 45px down */
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        /*transform: translateX(-628px) translateY(45px);*/
        /*transform: translateX(-478px) translateY(45px);*/
        transform: translateX(-407px) translateY(45px);
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        /*transform: translateY(44.5px) translateX(-883px);*/
        /*transform: translateY(44.5px) translateX(-733px);*/
        transform: translateY(44.5px) translateX(-653px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        /*transform: translateY(44.5px) translateX(-923px);*/
        /*transform: translateY(44.5px) translateX(-773px);*/
        transform: translateY(44.5px) translateX(-697px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */
          margin-left: -190.1px; 
          /*transform: translateY(-48px); */
          /*transform: translateY(44.5px) translateX(-869.5px);*/
          /*transform: translateY(44.5px) translateX(-720px);*/
          transform: translateY(44.5px) translateX(-640px);
          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-45px) translateX(-75px);*/
          /*transform: translateY(-48px) translateX(-78.8px);*/
          /*transform: translateY(44.5px) translateX(-940px);*/
          /*transform: translateY(44.5px) translateX(-788px);*/
          /*transform: translateY(44.5px) translateX(-795px);*/
          transform: translateY(44.5px) translateX(-715px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            width: 150px !important; height: auto; margin-left: -65px;
        }
    
}


/*2) (1024 * 768 --->  acutal = 1024 * 633) or also (1280 * 1024 --->  acutal = 1024 * 686) */
@media only screen and (min-width: 801px) and (max-width: 1024px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(255, 204, 102);*/ /* Light Orange (Yellow + Orange mix) */
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        height: 180px; /* added*/
        /*background-color: lightcoral !important;*/
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px; /* changed*/
        /*margin-left: -32.5px; /* changed*/
        /*margin-left: -85.5px; /* changed*/

        /*margin-left: -238.5px; /* changed*/
        /* decrese 20px on each*/
        margin-left: -218.5px;
        
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        /*transform: translateX(-628px) translateY(45px);*/
        transform: translateX(-557px) translateY(45px);
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        /*transform: translateY(44.5px) translateX(-883px);*/
        transform: translateY(44.5px) translateX(-803px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        /*transform: translateY(44.5px) translateX(-923px);*/
        transform: translateY(44.5px) translateX(-843px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */
          margin-left: -190.1px; 
          /*transform: translateY(-48px); */
          /*transform: translateY(44.5px) translateX(-869.5px);*/
          transform: translateY(44.5px) translateX(-789.5px);
          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-45px) translateX(-75px);*/
          /*transform: translateY(-48px) translateX(-78.8px);*/
          /*transform: translateY(44.5px) translateX(-940px);*/
          /*transform: translateY(44.5px) translateX(-943.5px);*/
          transform: translateY(44.5px) translateX(-863.5px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            width: 150px !important; height: auto; margin-left: -65px;
        }
    
}


/*3) (1400 * 1050 --->  acutal = 1120 * 705) */
@media only screen and (min-width: 1025px) and (max-width: 1120px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(083, 0, 255);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightcyan !important;*/
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px; /* changed*/
        /*margin-left: -32.5px; /* changed*/
        /*margin-left: -85.5px; /* changed*/
        margin-left: -238.5px; /* changed*/
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        transform: translate(0px, -4.03px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        transform: translateY(-49.03px) translateX(-13.3px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        transform: translateY(-49.03px) translateX(-53.2px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */
        
          /*margin-left: -190.1px; 
          transform: translateY(-48px);*/
        
          margin-left: -190.1px; 
          transform: translateY(-49.03px);

          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-45px) translateX(-75px);*/
          /*transform: translateY(-48px) translateX(-78.8px);*/
          transform: translateY(-49.03px) translateX(-78.8px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            width: 150px !important; height: auto; margin-left: -65px;
        }
    
}


/*4) (1280 * 720 --->  acutal = 1280 * 585) and 
     (1280 * 768 --->  acutal = 1280 * 633) and
     (1280 * 800 --->  acutal = 1280 * 665) and
     (1280 * 1024 --->  acutal = 1024 * 686) */
@media only screen and (min-width: 1121px) and (max-width: 1280px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(0, 200, 255);*/ /* Light blue, more blue than green */
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightgoldenrodyellow !important;*/
        
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px; /* changed*/
        /*margin-left: -32.5px; /* changed*/
        /*margin-left: -85.5px; /* changed*/
        /*margin-left: -238.5px; /* changed*/
        /*margin-left: -128.5px; /* changed*/
        /*margin-left: -158.5px; /* changed*/
        /*margin-left: -165.5px;*/ /* changed*/
        /*margin-left: -45.5px;*/ /* changed*/
        margin-left: -75.5px; /* changed*/
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        transform: translate(0px, -4.03px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        transform: translateY(-49.03px) translateX(-13.3px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        transform: translateY(-49.03px) translateX(-53.2px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */
        
          /*margin-left: -190.1px; 
          transform: translateY(-48px);*/ 

          margin-left: -190.1px; 
          transform: translateY(-49.03px);

          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-45px) translateX(-75px);*/
          /*transform: translateY(-48px) translateX(-78.8px);*/
          transform: translateY(-49.03px) translateX(-78.8px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            width: 120px !important; height: auto; margin-left: -55px;  margin-top: 20px;
        }
    
}


/*5) (1680 * 1050 --->  acutal = 1344 * 705) */
@media only screen and (min-width: 1281px) and (max-width: 1344px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(183, 0, 255);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightgray !important;*/
        
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px;*/ /* changed*/
        margin-left: -20px; /* changed*/
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        transform: translate(0px, -4.03px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        transform: translateY(-49.03px) translateX(-13.3px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        transform: translateY(-49.03px) translateX(-53.2px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */
          
          /*margin-left: -190.1px; 
          transform: translateY(-48px); */

          margin-left: -190.1px; 
          transform: translateY(-49.03px);

          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-45px) translateX(-75px);*/
          /*transform: translateY(-48px) translateX(-78.8px);*/
          transform: translateY(-49.03px) translateX(-78.8px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            width: 150px !important; height: auto; margin-left: -55px; margin-top: 20px;
        }
    
}


/*6) (1360 * 768 --->  acutal = 1360 * 633) */
@media only screen and (min-width: 1345px) and (max-width: 1360px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(173, 216, 230);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightgreen !important;*/
        
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px; /* changed*/
        /*margin-left: -32.5px; /* changed*/
        /*margin-left: -85.5px; /* changed*/
        /*margin-left: -238.5px; /* changed*/
        /*margin-left: -128.5px;*/ /* changed*/
        margin-left: -23.5px; /* changed*/
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        transform: translate(0px, -4.03px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        transform: translateY(-49.03px) translateX(-13.3px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        transform: translateY(-49.03px) translateX(-53.2px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */
        
          /*margin-left: -190.1px; 
          transform: translateY(-48px);*/ 
        
          margin-left: -190.1px; 
          transform: translateY(-49.03px);

          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-45px) translateX(-75px);*/
          /*transform: translateY(-48px) translateX(-78.8px);*/
          transform: translateY(-49.03px) translateX(-78.8px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            width: 150px !important; height: auto; margin-left: -55px; margin-top: 20px;
        }
    
}


/*7) (1366 * 768 --->  acutal = 1366 * 633) */
@media only screen and (min-width: 1361px) and (max-width: 1366px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(255, 165, 0);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightgrey !important;*/
        
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px; /* changed*/
        /*margin-left: -32.5px; /* changed*/
        /*margin-left: -85.5px; /* changed*/
        /*margin-left: -238.5px; /* changed*/
        /*margin-left: -128.5px;*/ /* changed*/
        margin-left: -23.5px; /* changed*/
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        transform: translate(0px, -4.03px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        transform: translateY(-49.03px) translateX(-13.3px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        transform: translateY(-49.03px) translateX(-53.2px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */

          /*margin-left: -190.1px; 
          transform: translateY(-48px); */

          margin-left: -190.1px; 
          transform: translateY(-49.03px);

          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-45px) translateX(-75px);*/
          /*transform: translateY(-48px) translateX(-78.8px);*/
          transform: translateY(-49.03px) translateX(-78.8px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            width: 150px !important; height: auto; margin-left: -55px; margin-top: 20px;
        }  
    
}


/*8) (1440 * 900 --->  acutal = 1440 * 765) */
@media only screen and (min-width: 1367px) and (max-width: 1440px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(231, 74, 223);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightpink !important;*/
        
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px; /* changed*/
        /*margin-left: -32.5px; /* changed*/
        /*margin-left: -85.5px;*/ /* changed*/
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        transform: translate(0px, -4.03px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        transform: translateY(-49.03px) translateX(-13.3px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        transform: translateY(-49.03px) translateX(-53.2px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */
        
          /*margin-left: -190.1px; 
          transform: translateY(-48px);*/
        
          margin-left: -190.1px; 
          transform: translateY(-49.03px);
        
          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-48px) translateX(-78.8px);*/
          transform: translateY(-49.03px) translateX(-78.8px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            /*logo size changed to actual size on 8th*/
            margin-left: -20px;
            margin-top: 3px;
        }

}


/*9) (1920 * 1080 --->  acutal = 1536 * 730) */
@media only screen and (min-width: 1441px) and (max-width: 1536px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(255, 230, 0);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightsalmon !important;*/
        
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        margin-left: 100px;
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        transform: translate(0px, -4.03px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        transform: translateY(-49.03px) translateX(-13.3px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        transform: translateY(-49.03px) translateX(-53.2px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
        /*margin-left: -190px; 
        transform: translateY(-45px); */

        /*margin-left: -190.1px; 
        transform: translateY(-48px); */
        margin-left: -190.1px; 
        transform: translateY(-49.03px);

        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333;
        font-weight: bold;
        text-align: center; 
        display: inline-block;
        font-size: 14.5px; 
        text-decoration: none;
        transition: background-color 0.3s, border-color 0.3s; 
        padding: 8px 16px;  
        height: 20px;
        /*width: 90px;*/
        width: 80px; /* changed*/
        white-space: nowrap; /* addded*/
        text-align: center;
        }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-75px);*/
        /*transform: translateY(-48px) translateX(-78.8px);*/
        transform: translateY(-49.03px) translateX(-78.8px);
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333;
        font-weight: bold;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }
  
        .is-computer #logo2 {
            /*logo size changed to actual size on 8th*/
            /*margin-left: -20px;*/
            margin-left: 55px;
            margin-top: 3px;
        }

}


/*10) (1600 * 900 --->  acutal = 1600 * 765) */
@media only screen and (min-width: 1537px) and (max-width: 1600px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(131, 74, 223);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        top: 0; /* Aligns the header to the top */
        left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightseagreen !important;*/
        
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 223px; 
        /* position: fixed; */
        /*background-color: red;*/ /*changed */
        /*margin-left: -125px;*/ /* changed*/
        /*margin-left: -32.5px;*/ /* changed*/
        margin-left: 100px;

        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        /*transform: translate(0px, -3px); /* changed */
        transform: translate(0px, -4.03px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        /*transform: translateY(-48px) translateX(-13.8px); /* changed */
        transform: translateY(-49.03px) translateX(-13.3px);
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        /*transform: translateY(-48px) translateX(-52.8px); /* changed*/
        transform: translateY(-49.03px) translateX(-53.2px);
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
          /*margin-left: -190px; 
          transform: translateY(-45px); */
        
          /*margin-left: -190.1px; 
          transform: translateY(-48px); */

          margin-left: -190.1px; 
          transform: translateY(-49.03px);

          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
          }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
          /*transform: translateY(-45px) translateX(-75px);*/
          /*transform: translateY(-48px) translateX(-78.8px);*/
          transform: translateY(-49.03px) translateX(-78.8px);
          border: 1px solid #ccc;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block; 
          font-size: 14.5px; 
          text-decoration: none; 
          transition: background-color 0.3s, border-color 0.3s; 
          }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

        .is-computer #logo2 {
            /*logo size changed to actual size on 8th*/
            /*margin-left: -20px;*/
            margin-left: 55px;
            margin-top: 3px;
        }    
    
}


/*11) (extra 1601 --->  acutal = 1601) */
@media only screen and (min-width: 1601px) {

    body.is-computer {
        font-family: Arial, sans-serif;
        background-color: #F4F4F4;
        color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 110vh;
        min-width: 100vw;   
        
        }
        
        .is-computer .navbar-container header {
        padding: 0.5em 0;
        /*background-color: #FFFFFF;*/
        /*background-color: rgb(255, 230, 0);*/
        color: #333;
        border-bottom: 1px solid #D0D0D0;
        text-align: center;
        width: 100%;
        /* position: fixed; /* Ensure the header stays fixed at the top */
        /*top: 0; /* Aligns the header to the top */
        /*left: 0; /* Ensure it's at the left edge */
        box-sizing: border-box; /* Ensure padding and border are included in width */
        z-index: 1000; /* Keeps it above other content */
        /*background-color: lightskyblue !important;*/
        
        }
        
        /*
        .is-computer #navbar-heading  {    */
        /*font-size: 24px; /* Adjust the font size as needed */
        /*text-align: center; /* Center text horizontally */     
        /*width: fit-content; /* Ensure the heading width fits its content */
        /*position: relative; /* Keep relative positioning */
        /*}*/
        
        /* Ensure the  .is-computer nav ul is a flex container and prevents wrapping */
        .is-computer nav ul {
        /*position: absolute;*/    
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        flex-wrap: nowrap; /* Prevent wrapping */
        }
        
        .is-computer nav ul li {
        margin: 0 0.5em;
        }
        
        .is-computer nav ul li a {
        color: #1E90FF;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: inline-block; 
        }
        
        .is-computer nav ul li a:hover {
        background-color: #E8E8E8;
        }
        
        .is-computer .main-navigation  {
        list-style: none;
        padding: 0;
        margin: 0;
       /* margin-top: 0;*/
        /*margin-bottom: 0;*/
        display: flex;
        /*align-items: center;*/
        justify-content: center;
        /*padding-left: 223px; */
        /* position: fixed; */
        width: 100%;
        margin-left: 220px;
        }
        
        .is-computer #buy_birds_btn{
        padding: 10px 20px;
        white-space: nowrap;
        }
        
        .is-computer #sell_birds_btn {
        padding: 10px 20px; 
        white-space: nowrap;
        }
        
        .is-computer #search_birds_btn  {
        background-color: rgb(52, 183, 57); 
        font-weight: bold;  
        /* Remove these styles */
        /*position: absolute;
        bottom: 20;
        left: 1%;
        transform: translateX(840px);*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        margin-bottom: 10px; 
        border: 1px solid #ccc; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        color: white; 
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #search_birds_btn :hover {
        background-color: rgb(52, 183, 57); 
        border-color:rgb(14, 110, 17); 
        }
        
        .is-computer #load-form 
        {
        background-color: rgb(183, 52, 57); 
        font-weight: bold;
        /*transform: translateX(0px); */
        transform: translate(0px, -3px); /* changed */
        /*position:relative;*/
        padding: 10px 20px; /* Add padding for consistent button size */
        white-space: nowrap; /* Prevent text wrapping inside the button */
        left: -6px;
        width: calc(100% + 35px);  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        .is-computer #load-form:hover {
        background-color:rgb(183, 52, 57);
        border-color:rgb(122, 18, 21); 
        }
        
        .is-computer #register-or-profile {
        display: inline-block;
        margin-left: -145px; 
        border-radius: 4px; 
        /*transform: translateY(-45px) translateX(-15px);*/
        transform: translateY(-48px) translateX(-13.8px); /* changed */
        width: 67px; 
        padding: 8px 16px;  
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333; 
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        height: 20px;
        }
        
        
        .is-computer #login-button {
        display: inline-block;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-52px); */
        transform: translateY(-48px) translateX(-52.8px); /* changed*/
        border: 1px solid #ccc; 
        width: 55px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD; 
        color: #333;
        text-align: center; 
        font-weight: bold;
        font-size: 14.5px;
        transition: background-color 0.3s, border-color 0.3s; 
        /*box-shadow: 2px 4px 8px 2px rgba(189, 202, 223, 0.4);*/
        }
        
        .is-computer #dashboard-link {
        /*margin-left: -190px; 
          transform: translateY(-45px); */
        
          /*margin-left: -190.1px; 
          transform: translateY(-48px); */

          margin-left: -190.1px; 
          transform: translateY(-49.03px);

          border: 1px solid #ccc; 
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
          background-color: #D3E3FD;
          color: #333;
          font-weight: bold;
          text-align: center; 
          display: inline-block;
          font-size: 14.5px; 
          text-decoration: none;
          transition: background-color 0.3s, border-color 0.3s; 
          padding: 8px 16px;  
          height: 20px;
          /*width: 90px;*/
          width: 80px; /* changed*/
          white-space: nowrap; /* addded*/
          text-align: center;
        }
        
        .is-computer #dashboard-link:hover {
        background-color: #D3E3FD;; 
        border-color: #007bff; 
        }
        
        
        .is-computer #logout-button {
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        /*transform: translateY(-45px) translateX(-75px);*/
        transform: translateY(-48px) translateX(-78.8px);
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        background-color: #D3E3FD;
        color: #333;
        font-weight: bold;
        text-align: center; 
        display: inline-block; 
        font-size: 14.5px; 
        text-decoration: none; 
        transition: background-color 0.3s, border-color 0.3s; 
        }
        
        
        .is-computer #logout-button:hover,
        .is-computer #register-or-profile:hover {
        background-color: #D3E3FD; 
        border-color: #007bff; 
        }
        
        /*//////////////////////////////////////*/
        .is-computer footer {                                                      
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        padding: 0; /* Reduced padding to decrease height */
        border-top: 1px solid #D0D0D0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        transform: translateY(7px); /* Move text 3px up (10px - 3px = 7px) */
        z-index: 9999;
        
        }

    /*.is-computer .navbar-container header {*/
        /*background-color: red;*/
        /*background: linear-gradient(135deg, #1E90FF 0%, #ADD8E6 100%);*/
        /*background-color: purple;*/
    /*}*/

    .is-computer #logo2 {
        /*logo size changed to actual size on 8th*/
        /*margin-left: -20px;*/
        margin-left: 55px;
        margin-top: 3px;
    }
    
}