html, body {
    margin: 0;
    padding: 0;
    text-align: left;
}

#topRibbonContainer {
    width: 100%;
    overflow: hidden;
    text-align: center;
}

a {
    text-decoration: none;
}

#mainLogoLink {
    float: left;
    position: absolute;
    width: 250px;
    height: auto;
    margin: auto;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}

#mainTopLogo {
    width: 100%;
    margin-bottom: -15px;
    display: inline-block;
}
.topLogoTools {
    width: 25px;
    display: inline-block;
    vertical-align: middle;

}
#mainTitle {
    font-size: xx-large;
    margin: auto;
    color: #000;
    text-decoration: underline;
}

h3 {
    width: 80;
    margin: auto;
    background-color: #f13223;
    color: #ffffff;
    font-size: large;
}

#headerRightSection {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;
    text-align: center;
}

#headerRightSection p {
    display: block;
    text-align: center;
    font-size: xx-large;
    color: #f13223;
}
.mainHeaderIcons {
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    background-color: #f13223;
    border-radius: 5px;
}

#headerRightSection .headerContactLabels {
    font-size: large;
    display: inline-block;
    vertical-align: middle;
    color: #f13223;
}

/* ---tablet screen styling--- */


/* tablet screens */
@media (max-width: 1140px) {

    #phoneNumber {
        margin-left: 100px;
        transition: ease-in-out .5s;
    }
}


@media (max-width: 1015px) {

    #headerRightSection .headerContactLabels {
        display: none;
    }
    #phoneNumber {
        margin-left: 0;
    }
}


@media (max-width: 820px) {

    #topRibbonContainer {
        height: auto;
    }

    #headerRightSection {
        width: 100%;
    }


    #headerRightSection .headerContactLabels {
        display: none;
    }


}


@media (max-width: 767px) and (min-width: 641px) {


}

@media (max-width: 640px) {




    #mainTitle {

        font-size: 4vw;
    }

    #mainTopLogo {
        width: 70%;
    }

    h3 {
        width: 100%;
        font-size: 2vw;
    }

    #headerRightSection {
        overflow: hidden;
        margin-top: -5px;
        background-color: #ffffff;
    }

    #headerRightSection p {
        width: 100%;
        font-size: x-large;
        display: inline-block;
        color: #f13223;
        overflow: hidden;
    }


}

@media (max-width: 600px) {

    #mainLogoLink {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        float: none;
        margin: auto;
        padding: 0;
        background-color: transparent;
        text-align: center;
    }

    #headerRightSection {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 55px;
        background-color: #f13223;
    }    

    #headerRightSection p {
        width: auto;
        padding: 0;
        display: inline-block; /* Hide text on smaller screens */;
        color: #ffffff;
        vertical-align: middle;
    }

    #mainTopLogo {
        width: 30%;
    }

    #mainTitle {
        font-size: 6vw;
        margin: -5px 0 5px 0;
    }

    h3 {
        width: 40%;
        margin: auto auto 5px auto;
        font-size: 3vw;
    }


    .mainHeaderIcons {
        width: 50px;
        height: 50px;
        display: inline-block;
    }

    #phoneNumber {
        margin-left: 0;
    }

}

@media (max-width: 540px) {

    #headerRightSection {
        height: 65px;
    }

}


@media (max-width: 520px) {

    #headerRightSection p {
        padding: 0;
        vertical-align: middle;
    }

}

@media (max-width: 480px) {

    #mainLogoLink {
        margin: auto;
        padding: 0;
    }
    #headerRightSection {
        height: 60px;
        margin: -3px 0 0 0;
    }
    #headerRightSection p {
        font-size: large;
    }
    .mainHeaderIcons {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 430px)  {

    #topRibbonContainer {
        width: 100%;
    }

    #mainTopLogo {
        margin: auto;
        display: block;
    }

    #mainTitle {
        margin: -5px 0 0 0;
        padding: 0;
        color: #000;
        text-decoration: underline;
    }
    .topLogoTools {
        width: 20px;
        display: inline-block;
        vertical-align: middle;
    }

    #headerRightSection p {
        font-size: medium;
        text-decoration: none;
    }
    #headerRightSection a {
        color: #ffffff;
        text-decoration: none;
    }

    .mainHeaderIcons {
        width: 50px;
        height: 50px;
        display: inline-block;
        vertical-align: middle;
    }
    
}

@media (max-width: 414px) {

    #mainTitle {
        margin-left: 0;
    }

    .topLogoTools {
        width: 14px;
        height: 14px;
    }

}

@media (max-width: 390px) {

    .topLogoTools {
        width: 13px;
        height: 13px;
    }

}

/* Responsive Design */
@media (max-width: 375px) {

    #topRibbonContainer {
        height: auto;
    }
    #mainLogoLink {
        margin: auto;
        display: block;
        float: none;
    }

    .topLogoTools {
        width: 15px;
        height: 15px;
    }


    #headerRightSection {
        display: block;
        height: 50px;
    }
}

@media (max-width: 360px) {
    #topRibbonContainer {
        height: auto;
    }
}

@media (max-width: 346px) {


    .topLogoTools {
        width: 10px;
        height: 10px;
    }

    #headerRightSection {
        background-color: #f13223;
    }
    
    #headerRightSection p {
    display: inline-block; /* Hide text on smaller screens */;
    color: #ffffff;
    }

}

@media (min-width: 320px) and (max-width: 345px) {

    

    #headerRightSection {

        height: 50px;
        margin: -3px 0 0 0;
    }

}

@media (max-width: 319px) {

    #mainTopLogo {
        width: 30%;
    }

    #mainTitle {
        font-size: 6vw;
        margin: -5px 0 5px 0;
    }

    h3 {
        width: 40%;
        margin: auto auto 5px auto;
    }
}