table{
    border: 1px solid #ffffff;
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}

caption{
    font-size: 1.5em;
    font-weight: bold;
    padding:1%;
}



tr:nth-child(odd) {
    background-color: #b7b7e1;
}

/*Style rules for form elements*/

fieldset, input{
    margin-bottom: 2%;
}

fieldset legend{
    font-weight:bold;
    font-size:1.25em;
}

label{
    display:block;
    padding-top: 3%;
}

#submit{
    margin-top: 0;
    margin-bottom:0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 3%;
    background-color: #b6b6b6;
    font-size: 1em;
}

footer{
    margin:0;
    padding:0;
    width:100%;
    height:5em;
    background-color:grey;
}

.footer-info{
    width:100%;
    text-align:center;
        
}

.footer-message{
    margin:0;
    padding:0;
}

.footer-message h5{
    font-weight:lighter;
}


@media(max-width:2500px){
    .desktop-nav-container{
        display:flex;
        flex-direction: column;
        padding:0;
        margin:0;
        background-color: rgba(255, 255, 255, 0.753);
        width:100%;
        height:6rem;
        z-index:20;
    }

    .top-nav{
        background-color:rgb(219, 219, 219);
        height:2.5rem;
        padding:0;
        margin:0;
    }

    .top-nav ul{
        display:flex;
        flex-direction: row;
        gap:1rem;
        margin-right:11%;
        justify-content: end;
        list-style-type: none;
    }

    .logo h1{
        padding:0;
        margin-left:4.5em;
        margin-bottom:0;
        margin-top:0;
        font-size:2rem;
    }

    .total-nav{
        text-align:left;
        border-bottom:solid;
        border-color:rgb(206, 206, 206);
        border-width: 1px;
            
    }

    .total-nav a{
        text-decoration:none;
        color:black;
    }

    .total-nav-ul{
        padding:0;
        margin-top:0;
        margin-bottom:0;
        display:flex;
        flex-direction:row;
        gap:10rem;
        justify-content:center;
        list-style-type:none;
    }

    .nav-item{
        position:relative;
    }


    .product-dropdown,
    .about-us-dropdown{
        display:none;
        flex-direction: column;
        justify-content: space-evenly;
        font-size:1rem;
        text-align:left;
        position:absolute;
        width:10em;
        height:10em;

        background-color:rgb(255, 255, 255);
    }



    .product-dropdown li,
    .about-us-dropdown li{
        list-style-type:none;
    }

    .nav-item:hover .product-dropdown,
    .nav-item:hover .about-us-dropdown{
        display: flex;
    }

    .product-dropdown li:hover,
    .about-us-dropdown li:hover{
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-color:burlywood;
        text-decoration-thickness:2px;
    }


    .mobile-nav-container{
            display:none;
        }


    

    .q-and-a-container {
        margin: 0 auto;
        padding: 1em;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        gap: 1em; 
        align-items: flex-start;
        width: 100vw;
        max-width: 20em;
        background-color: #fff;
    }

    /* All questions share the same style */
    .q-and-a-container > div {
        text-align: center;
        padding:0;
        border-radius: 3em;
        width: 100%;
        background-color: rgb(214, 214, 214);
        transition: background-color 0.3s ease, transform 0.2s ease;
        cursor: pointer;
    }

    /* Add a subtle hover effect for interactivity */
    .q-and-a-container > div:hover {
        background-color: rgb(190, 190, 190);
        transform: scale(1.02);
    }

    .answers{
        display:none;
    }

    #question-one:hover .answers,
    #question-two:hover .answers,
    #question-three:hover .answers,
    #question-four:hover .answers,
    #question-five:hover .answers {
        display:block;
    }
}




@media(max-width:1000px){
    .desktop-nav-container{
        display:none;
    }

    .mobile-nav-container{
        margin:0;
        padding:0;
        height:2em;
        width:100%;
        display:flex;
        flex-direction:row;
        justify-content: flex-end;
        position:relative;
        background-color:rgb(255, 255, 255);
    }

    .total-mobile-nav{
        display:none;
        right:0;
        padding:0;
        position:absolute;
        top:100%;
        width:15rem;
        height:30rem;
        background-color:rgba(255, 255, 255, 0.905);
    }

    

    .visible-nav{
        bottom:2rem;
        padding:0;
        margin:0;
        text-align:left;
    }

    .visible-nav li{
        font-size:1.5rem;
    }

    .total-mobile-nav a{
        text-decoration:none;
        color:black;
    }

    .total-mobile-nav li{
        list-style-type:none;
    }

    

    .hamburger::before{
        content: "☰";
        font-size: 2rem;
        cursor: pointer;
    }

    .mobile-product-dropdown,
    .mobile-about-us-dropdown{
        display:none;
    }

    .mobile-nav-item:hover .mobile-product-dropdown,
    .mobile-nav-item:hover .mobile-about-us-dropdown{
        display:block;
    }

    .mobile-product-dropdown,
    .mobile-about-us-dropdown{
        margin-left:3rem;
        height:auto;
        width:auto;
    }

    .mobile-product-dropdown li:hover,
    .mobile-about-us-dropdown li:hover{
        text-decoration: underline;
        text-decoration-color: orange;
        text-decoration-thickness:2px;
        text-underline-offset: 5px;
    }

/* When checkbox is checked: change to X */
    #menu-toggle:checked + .hamburger::before{
        content: "✕";
    }

    #menu-toggle:checked ~ .total-mobile-nav{
        display:block;
    }
    
    .mobile-logo{
        display:block;
        padding:0;
        margin:0;
        width:100%;
        text-align:center;
        text-decoration:none;
    }

    .mobile-logo h1{
        color:black;
        padding:0;
        margin:0;

    }
}