/* :root {
    --heading-font: 'Arial', sans-serif;
    --body-font: 'Arial', sans-serif;
    --heading-color: #FFBE98;
    --text-color: #626D70;
    --primary-bg: #f0f0f0;
    --secondary-bg: #D3DAC2;
    }
    */ 

body {
    font-family: 'Arial', sans-serif;
    padding-top: 56px; /* Adjust this based on your navbar's height */
}

h2 {
    font-family: var(--heading-font);
    font-weight: bold;
    color: #FFBE98;
    padding-bottom: 1rem;
}

p {
    color: #626D7;
}

.navbar-brand {
    font-family: var(--heading-font);
    font-weight: bold;
}

footer {
    background-color: #D3DAC2;
    color: #626D7;
}

/* Adjust section backgrounds */
section:nth-child(odd) {
    background-color: #B2EAD3;
}

section:nth-child(even) {
    background-color: #D3DAC2;
}

#featured {
    background-color: #F5F1ED; /* Slightly different background to distinguish from the CV section */
    color: #333; /* Ensuring good readability */
}

#featured h2 {
    margin-bottom: 1rem;
    color: #007bff; /* A touch of color to highlight the title */
}

#featured p.lead {
    font-size: 1.1rem; /* Slightly larger font for emphasis */
    max-width: 800px; /* Constrain the width of the text for readability */
    margin: auto; /* Center the paragraph within the section */
}
 
 
/* About Kitty Section */
#about {
    padding: 4rem 0;
    text-align: left; /* Aligns content to the left, adjust as needed */
    background-color: #B2EAD3; /* White background */
}
#about img {
    border-radius: 50%; /* Makes the image circular */
    float: left; /* Aligns the image to the left */
    margin-right: 20px; /* Adds spacing between the image and the text */
    width: 150px; /* Adjust based on your image size */
    height: 150px; /* Ensure this matches the width for a perfect circle */
}

/* Artist's CV Section */
#cv {
    padding: 4rem 0;
    background-color: #F5F1ED; /* Light grey background */
    color: #626D7;
    text-align: center; /* Centers the content */
}

/* My Work as an Art Teacher Section */
#teaching {
    padding: 4rem 0;
    background-color: #B2EAD3; /* White background */
    color: #626D7;
    text-align: center; /* Centers the content */
}

/* Portfolio Section */
#portfolio {
    padding: 4rem 0;
    background-color: #F5F1ED; /* Light grey background */
    color: #626D7;
    text-align: center; /* Centers the content */
}

/* Where to Find Me/Contact Section */
#contact {
    padding: 4rem 0;
    background-color: #B2EAD3; /* White background */
    color: #626D7;
    text-align: center; /* Centers the content */
}

/* Clearfix for floated elements */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Responsive Adjustments for About Section */
@media (max-width: 768px) {
    #about img {
        float: none; /* Prevents image from floating on smaller screens */
        display: block; /* Centers the image above the text */
        margin: 0 auto 20px; /* Adds bottom margin for spacing */
    }
    #about {
        text-align: center; /* Centers text on smaller screens */
    }
}

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}