/* Footer MAin div container to display all the inner divs except cpyright */
.main-div-container {
    display          : flex;
    justify-content  : space-between;
    align-items      : flex-start;
    margin-bottom    : 0px;
    margin-top       : 10px;
    padding          : 2px;
    background-color : black;
    color            : white;
    width            : 100%;
    position         : relative;
}   
/* Position .pages-list at the bottom right */
.pages-list {
    position  : absolute;
    bottom    : 0;
    right     : 0;
    margin    : 10px; /* Adjust as needed */
    display   : flex;
    gap       : 32px;
}

.babyimage, .social-icons, .top-quotes, .right-footer {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    font-family    : Roboto Slab, Times New Roman, serif;
    margin-bottom  : 50px; /* Add margin to create space above the .pages-list */
}

.babyimage img {
    max-width : 100%; /* Adjust as needed */
    margin    : 0 auto;
}

.icons {
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
    margin-top      : 10px;
}

.icons img {
    max-width  : 40px;
    max-height : 40px;
    margin     : 4px;margin-left: 19px;

}

/* For H2 of the three div headings */
.top-quotes h2, .social-icons h2, .right-footer h2 {
    color          : white;
    text-align     : center;
    font-family    : Roboto Slab, Times New Roman, serif;
}

.top-quotes h3 {
    color          : white;
    margin         : 3px;
    padding-bottom : 8px;
    font-family    : Roboto Slab, Times New Roman, serif;
    font-weight    : 500;
    text-align     : center;
}

.copyright {
    text-align       : center;
    background-color : white;
    color            : black;
    margin           : 3px;
}

.copyright p {
    font-family : Roboto Slab, Times New Roman, serif;
    font-weight : 500;
    text-align  : center;
}

.top-quotes-p a{
    color : white;
}
.top-quotes-p{
    color : white;
}
.pages-list{
    display : flex;
    float   : right;
    gap     : 32px;

}
.heading-css{
    color       : white;
    text-align  : center;
    font-family : Roboto Slab, Times New Roman, serif;
    font-size   : 1.75em;
    line-height: 1.2;
    margin: 50px 0 25px;

}

@media (max-width: 767px) {
    .main-div-container {
        flex-direction : column;
        align-items    : center;
    }

    .babyimage, .social-icons, .right-footer {
        width         : 100%;
        margin-bottom : 10px;
    }
    .pages-list {
        position : static;
        margin   : 20px 0 0 0;
        justify-content: center;
    }

    .icons img {
        margin : 10px 0;
    }

    .babyimage img {
        max-width  : 64%; /* Adjust the size as needed */
        height     : auto;   /* Maintain aspect ratio */
        margin-top : 20px;
    }

    .icons {
        flex-direction  : row; /* Change to row for mobile view */
        justify-content : center; /* Center the icons */
        flex-wrap       : wrap; /* Allow wrapping if needed */
    }

    .icons img {
        max-width  : 30px; /* Size for social icons */
        max-height : 30px; /* Size for social icons */
        margin     : 6px; /* Spacing between icons */
    }

    .top-quotes{
        margin-top: -43px;
    }
   
    .pages-list p{
        margin-bottom: 0px;
    }
}