/* @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
    font-family: 'Lato', sans-serif;
}


.page-header h1 {
    padding-left: 15px;
    position: relative;
    top: -3px;
}

.h1-font-1 {
    color: #fbf8d8;
    /* font-family: 'Roboto', sans-serif;  */
}

/* .font-6 { font-family: 'Comfortaa', sans-serif; } */

.montserrat {
font-family: 'Montserrat', sans-serif;
}


.header-six {
    background-color: #587673;
    display: flex;
    align-items: center;
    /* padding: 20px; */
}

.logo-header-wrapper {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust spacing between the image and the text */
  }
  

.rounded-image {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    overflow: hidden; 
}

.rounded-image img {
width: 150px;
height: 150px;}

.page-header {
    /* background-color: #E7DECC; */
    height: 150px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

/* .horizontal-bg {
    background-image: url('header-background.png');
    background-repeat: repeat-x;
    background-size: auto; 
} */

main.content {
    margin: 20px;
    padding: 20px;
    /* display: flex;
    flex-direction: row; */
    /* background-color: #f5f5dc; */
}


/* 992px, 768px, 600px, 480px, 320px */
@media (max-width: 992px) {
    .logo-header-wrapper {
        gap: 5px;
    }
    .page-header h1  {
        font-size: 1.6em;
        padding-left: 0px;
    }
}
/* 992px, 768px, 600px, 480px, 320px */
@media (max-width: 768px) {
    /* .page-header h1  {
        font-size: 2em;
        padding-left: 10px;
    } */
}


/* 992px, 768px, 600px, 480px, 320px */
@media (max-width: 600px) {
   /*  .page-header h1  {
        font-size: 2em;
        padding-left: 10px;
    } */
}


/* 992px, 768px, 600px, 480px, 320px */
@media (max-width: 480px) {
    .page-header h1  {
        font-size: 1.2em;
        /* padding-left: 0px; */
    }

    .rounded-image {
        /* border-radius: 50%; */
        width: 120px;
        height: 120px;
       /*  overflow: hidden;  */
    }
    
    .rounded-image img {
    width: 120px;
    height: 120px;}
    
    .page-header {
        /* background-color: #E7DECC; */
        height: 120px;}
}

@media (max-width: 375px) {
    .page-header h1  {
        display: none;
    }
    main.content {
        margin: 0;
    }
}




/* 992px, 768px, 600px, 480px, 320px */
/* @media (max-width: 320px) {
    .page-header h1  {
        font-size: 2em;
        padding-left: 10px;
    }
} */