/* Define color variables */
:root {
    --primary-color: #2C3E50; /* Dark blue */
    --secondary-color: #fff; /* Red */
    --accent-color: #3498DB; /* Bright blue */
    --background-color: #ECF0F1; /* Light grey */
    --text-color: #2C3E50; /* Dark blue */
	--rose-brown: #7F5F5C;
    --primary-colora: rgba(44, 62, 80, 0.9); /* Initial background color with alpha */
    --primary-colora-transparent: rgba(44, 62, 80, 0); /* Target background color with alpha */
	
}
@font-face {
    font-family: 'P22';
    src: url('/fonts/P22-Cezanne-Regular.woff2') format('woff2'),
         url('/fonts/P22-Cezanne-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* General Styles */
body{
    font-family: 'Lustria', serif;
    background-color: var(--background-color);
    color: var(--text-color);
  
}
html, body {
    margin: 0;
    padding: 0;
}
/* Headline Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'P22', serif;
	line-height: 1;
}
h1.norm, h2.norm, h3.norm, h4.norm, h5.norm, h6.norm {
    font-family: 'Lustria', serif;
}
#hero {
	
    background-image: url('/img/lydia-kapp-hero-hor.jpg');
    background-size: contain;
    background-position: center;
	background-repeat: no-repeat;
	background-color: var(--primary-color);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/* 16:9 aspect ratio for desktop */
@media (min-width: 769px) {
    #hero {
        padding-top: 56.25%; /* 16:9 aspect ratio */
        background-image: url('/img/lydia-kapp-hero-hor.jpg');
    }
}

/* 9:16 aspect ratio for mobile */
@media (max-width: 768px) {
    #hero {
        padding-top: 177.78%; /* 9:16 aspect ratio */
        background-image: url('/img/lydia-kapp-hero-vert.jpg');
    }
}


/* Navbar Styles */
#navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-colora-transparent);
    padding: 1rem;
    width: 100%;
    z-index: 10;
	color: #fff;
    transition: background-color 0.5s ease-in-out;
	
	 
}
#navbar.sticky-top {
    background-color: var(--primary-colora);a
	top: 0; position: fixed; z-index: 100a;
}

#navbar a {
    color: var(--secondary-color);
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;

}

#navbar a:hover {
    color: var(--accent-color);
}

/* Social Links */
#navbar .social-links {
    display: flex;
    align-items: center;
}

#navbar .social-links a {
    margin: 0 0.5rem;
}
#navbar a.email {
	text-transform: lowercase;
	color: #D5AA87;
}

/* Footer Styles */
footer {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 2rem;
    text-align: center;
}

footer a {
    color: var(--secondary-color);
    text-decoration: none;
}

footer a:hover {
    color: var(--accent-color);
}

/* Section Styles */
section {
    padding: 4rem 0;
}

.section-title {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
    text-align: center;
}

/* Custom Styles for Specific Sections */
#bio {
    background-color: var(--rose-brown);
    color: #fff;
    padding: 4rem 2rem;
    text-align: center;
}
#bio h2 {
	font-size: 3em;
}
#bio p , #bio h3 { text-align: left;}
#bio img {
    border-radius: 50%;
    margin-bottom: 2rem;
}

#testimonials {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 4rem 2rem;
    text-align: center;
}

#testimonials blockquote {
    font-style: italic;
    margin: 2rem auto;
    max-width: 600px;
    padding: 1rem;
    border-left: 5px solid var(--primary-color);
    background-color: var(--secondary-color);
}

#case-studies {
    padding: 5em 0;
}

#case-studies .card {
    box-shadow: 0 .5rem 1rem rgba(0,0,0, .15);
    cursor: pointer;
    transition: all 200ms ease-in-out;
    filter: opacity(70%);
    border: 0;
   
	
}
#case-studies b {
	color: #000;
	font-size: 1.2em;
}
#case-studies h3,#case-studies h4 ,#case-studies h5, #case-studies h6, #case-studies p {
	 font-family: 'Lustria', serif;
	 color: #333;
}

#case-studies h4 {
	color: #999;
}
#case-studies .card:hover { 
    margin-top: -1em;
    box-shadow: 0 1rem 3rem rgba(0,0,0, .175);
    filter: opacity(100%);
}

#case-studies .modal-content {
    padding: 20px;
	color: #ccc;
}

#case-studies .modal-body img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1em;
}


#case-studies {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 4rem 2rem;
}

#case-studies .card {
    background-color: var(--secondary-color);
    color: #333;
    border: none;
    margin-bottom: 2rem;
}

#case-studies .card img {
    border-bottom: 5px solid var(--accent-color);
}

#case-studies .card-title {
    font-size: 1.5rem;
    margin-top: 1rem;
}

#case-studies .card-subtitle {
    font-size: 1rem;
    margin-bottom: 1rem;
}

/*#case-studies .modal {
	display: block;
}*/

/* Responsive Styles */
@media (max-width: 768px) {

    #case-studies .card {
        margin-bottom: 1rem;
    }

    #case-studies .card-title {
        font-size: 1.25rem;
    }

    #case-studies .card-subtitle {
        font-size: 0.875rem;
    }
}


#curiosities {
	background-color: #AE8B6E;
	text-transform: lowercase;
}
#curiosities h2 , #case-studies h2 {
	font-size: 3em;
	text-align: center;
}
#image-scroller {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    white-space: nowrap;
    /*overflow-x: auto;
    overflow-y: hidden;
    */        
    padding: 20px 0;
    cursor: grab;
}

#image-scroller > div {
    margin-bottom: 30px;
}

#image-scroller::-webkit-scrollbar {
    display: none;
}

.display-block {
    display: inline-block;
    position: relative;
    margin-right: 10px; /* Adjust as needed for spacing between blocks */
    text-align: center; /* Center text under each image */
}

#image-scroller img {
    max-height: 300px;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px #0003;
}

.display-block p {
    color: #eadeda; /* Ensure text color is readable, matching the mockup */
    margin: 0; /* Remove default margin */
    padding-top: 0.5em; /* Add spacing between image and text */
    font-size: 1em; /* Adjust font size as needed */
}

@media (max-width: 768px) {
    #image-scroller img {
        max-height: 200px; /* Adjust image size for mobile */
    }
    .display-block p {
        font-size: 0.8em; /* Adjust text size for mobile */
    }
}

@media (min-width: 769px) {
    #image-scroller {
        cursor: grab;
    }
    #image-scroller:active {
        cursor: grabbing;
    }
}
.blockquote-footer {
	background: transparent;
	color: #aaa;
	padding: 0; margin: 0;
}

#kudos {
    position: relative;
    width: 100%;
    padding: 7em 0;
    background: url('../img/kudos-background-hor.jpg') no-repeat center center;
    background-size: cover;
	color: #fff;
}

#kudos blockquote {
	margin: 3em 0;
}

@media (max-width: 767px) {
    #kudos {
        background: url('../img/kudos-background-vert.jpg') no-repeat center center;
        background-size: cover;
    }

    #kudos .row {
        flex-direction: column;
        align-items: center;
    }

    #kudos .col-md-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }
}


/*updated by me start*/


/*------*/

#work-with-me {
    background-color: var(--rose-brown);
    color: #fff;
    padding: 4rem 2rem;
    text-align: center;
}
#work-with-me h2 {
	font-size: 3em;
}
#work-with-me p , #work-with-me h3 { text-align: left;}
#work-with-me img {
    border-radius: 50%;
    margin-bottom: 2rem;
}

#banner{
    background-color: #ae8b6e;
}

.buttonEm{
    height: 40px;
    width: 160px;
    background-color: #D5AA87;
    align-items: center;
    margin: auto;
    padding-top: 10px;
}

.buttonEm a{
    
    text-decoration: none;
    color: #fff;
}

.buttonEm:hover{
    background-color: #3498DB;
}


.mobileview {
    margin: auto;
}

@media only screen and (min-width: 500px) {
    .mobileview  {
        display: none !important;}
    }

@media only screen and (max-width: 501px) {
    .desktopview  {
        display: none !important;}
    }


/*updated by me end*/

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