@charset "UTF-8";
/* CSS Document */
/* Base styles */
html, body {
    margin: 0;
    padding: 0;
	box-sizing: border-box;
    height: 100%;
    scroll-behavior: smooth;
	overflow-x: hidden;
}

/* Body styling */
body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    /* Background styling */
    background-image: url("img/img2.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
header {
    flex-shrink: 0;  /* Prevents the header from shrinking below its content size */
    padding: 10px 20px 1px;  /* Add padding to ensure content does not touch the edges of the browser */
    box-sizing: border-box;  /* Includes padding in width and height calculations */
    width: 100%;
    z-index: 5;  /*  Ensure all have the same z-index unless needed for specific overlap */
    position: relative;  /* Positions them relative to their normal flow */
	text-align: center;
}
main {
    flex-grow: 1;
    width: 100%;
	box-sizing: border-box;
	padding: 0;
    overflow: auto;
	display: flex;
    flex-direction: column;
	justify-content: flex-start; /* Ensure content starts at the top */
    align-items: center;
    padding-top: 0;
    margin-top: 0;
}
footer {
    width: 100%;
    background-color: rgba(243,234,217,0.85);
    padding: 0px;
    box-sizing: border-box;
    text-align: center;
	position: relative;
    bottom: 0;
    left: 0;
    z-index: 1000;
    flex-shrink: 0;
}
h1, h2, h3, h4, p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #2D461C;
}
p b {
    font-weight: 900;
}
hr {
    height: 4px;
    background-color: #F2BD4A;  /* Use your chosen color */
    border: none;
    width: 90%;  /* Width of the divider */
    margin: 40px auto;  /* Center the divider */
}
hr {
    position: relative;
    z-index: 1;  /* Ensure it's not hidden by other elements */
}

body.films-page, body.albums-page, body.concert-page, body.concert-work-page, body.studio-page, body.contact-page, body.press-page, /*    background-image: url("img/img2.png");  Adjust path as necessary */
body.store-page, body.filmscoreform-page, body.commissionsform-page, body.private-policy-page, body.newsletter-page, body.inquiries-page, /* Styling for the Inquiry Form Page */
body.inquiry-form-page, body.return-policy-page, body.syncform-page, /* Overall engagement page background */
body.engagement-page body.release-page {
    background-attachment: fixed;
    background-image: url("img/img2.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif", serif;
}

body.about-page {
    background-image: url("img/img1.webp"); /* Adjust path as necessary */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
	background-attachment: fixed; /* Optional: keeps the background fixed during scrolling */
}
.orbitron {
  font-family: 'Orbitron', sans-serif;
	font-weight: 900;
    -webkit-text-stroke: 1px darkorange;
}
/* Main Title Styling */
.main-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    color: #002517;
    font-size: 4em;
	letter-spacing: 1px;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-shadow: 10px -6px 15px rgba(0, 0, 0, 0.6); /* Adjusted shadow for light from -130 degrees */
    -webkit-text-stroke: 2px darkorange;
    margin-top: 35px;
    margin-bottom: 5px;
    padding: 0;
    width: 100%;
    display: flex;
}

/* Avatar Styling */
.avatar {
    width: 70px; /* Adjust size as needed */
    margin-right: 10px; /* Space between avatar and title */
    border-radius: 0; /* No circular avatar */
    
    /* Subtle shadow without a visible halo 
    box-shadow: 0px 15px 40px rgba(255, 140, 0, 0.4), 
                -5px -5px 15px rgba(0, 0, 0, 0.4); /* Gentle shadow on both sides */
    
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
}

/* Hover Effect for Avatar */
.avatar:hover {
    box-shadow: 0px 20px 70px rgba(255, 165, 0, 0.6), 
                -10px -10px 50px rgba(0, 0, 0, 0.6); /* Enhanced lighting effect */
    transform: scale(1.05); /* Slight enlargement on hover */
}
.brand-name {
    font-family: 'Imprint MT Shadow', 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;  /* Fallback to Times if Imprint MT isn't available */
    font-size: 5em;  /* Large size for visibility */
    text-shadow: 0px -2px 3px rgba(31,59,22,0.47); /* Adds the upward shadow with an additional shadow for a more 3D effect */  
	color: #213410;  /* Adjust color to fit your design palette */
	position: relative;
    margin: 130px 5px 5px 80px;  /* Remove any default margins */
	align-items: flex-start;
    z-index: 2000;  /* Ensure it's above other elements */
    display: flex;
    flex-direction: column; /* Align children vertically */
    flex-shrink: 0;  /* Prevents the header from shrinking below its content size */
}
.composer-title {
    font-family: 'Imprint MT Shadow', 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;  /* Consistent with the name */
    font-size: 2.9em;  /* Smaller than the name for hierarchy */
    text-shadow: 0px -1px 2px rgba(31,59,22,0.47); /* Adds the upward shadow with an additional shadow for a more 3D effect */  
    color: #213410;  /* Matching color or choose another to differentiate */
    position: relative;
    margin: 1px auto 5px 700px;  /* Remove any default margins */
	align-items: flex-start;
    white-space: nowrap;  /* Prevents wrapping to ensure alignment */
    display: flex;
    flex-direction: column; /* Align children vertically */
    flex-shrink: 0;  /* Prevents the header from shrinking below its content size */
}
.section {
    display: block !important;
    width: 100% !important;
    margin-bottom: 30px !important;
    padding-top: 10px;
    padding-bottom: 10px;

}

.section-title {
    text-align: center;
    font-size: 2em;  /* Slightly larger for emphasis */
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    color: darkorange;
    
    /* Subtle glow or outer stroke effect for connection */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5),   /* Dark subtle shadow */
                 0px 0px 8px rgba(255, 165, 0, 0.8); /* Light glow around text */
    
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #806200; /* Accentuate with the orange color */
    letter-spacing: 1px;
}

/* Optional glow animation to make the title pop slightly */
@keyframes glowing-text {
    0% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 165, 0, 0.5); }
    50% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 165, 0, 0.9); }
    100% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 165, 0, 0.5); }
}

.section-title:hover {
    animation: glowing-text 1.5s infinite ease-in-out; /* Optional glowing effect on hover */
}
/* Contact button styling */
.contact-button {
	background-color: #D97200; /* Primary color */
	color: white;
	border: thick;
	padding: 2px 5px;
	margin: 2px;
	border-radius: 5px;
	cursor: pointer;
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	box-shadow: 1 2px 20px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s, transform 0.3s;
}

.contact-button:hover {
    background-color: #F7D895; /* Secondary color */
    transform: scale(1.05);
}

/* Center the button group in the footer */
.button-group {
    text-align: center;
    margin: 15px 0;
}
.button-group p {
	font: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif";
	color: #0B1207;
	font-size: 1.2em;
	font-weight: 600;
}

/* Style the heading */
.button-group h3 {
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif", serif;
    color: #3D6026;
    margin-top: 2px;
	margin-bottom: 2px;
}

button[type="submit"] {
	background-color: #263C18;
	color: white;
	border: none;
	padding: 10px 20px;
	font-size: 18px;
	border-radius: 4px;
	cursor: pointer;
	display: block;
	width: 100%;
}

button[type="submit"]:hover {
    background-color: #2CDA4F;
}

/* Footer Contact Button Styling */
.footer-button {
    background-color: #1FB13C;
    color: white;
    border: none;
    padding: 5px 5px;
    margin: 1px;
    border-radius: 2px;
    cursor: pointer;
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif", serif;
    font-size: 18px;
    transition: background-color 0.3s, transform 0.3s;
}

.footer-button:hover {
    background-color: #93CD86;
    transform: scale(1.05);
}

/* Studio Page Styling */
.studio-container {
    max-width: 1000px;
    margin: 80px auto 25px;
    padding: 20px;
    background-color: #F9FFFC;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    line-height: 1.6;
    font-size: 16px;
    color: #0D330F;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.studio-container h1, .studio-container h2 {
    color: #4CAF50;
    margin-top: 24px;
    margin-bottom: 16px;
    justify-content: center;
    text-align: center;
    max-width: 60%;
}

.studio-container p {
    margin-bottom: 16px;
    color: #235125;
    max-width: 70%;
}

/* Image Gallery Styling */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
    margin: 20px 0;
}

.image-gallery .form-col {
    flex: 1 1 calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.image-gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.studio-page .contact-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 20px;
    margin: 30px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-page .contact-button:hover {
    background-color: #367c39;
}

/* Studio Page Styling */
.studio-container {
    max-width: 1000px; /* Sets a maximum width for the content box */
    margin: 80px auto 25px; /* Centers the box horizontally and adds vertical spacing */
    padding: 20px; /* Adds padding inside the box */
    background-color: #F9FFFC; /* Optional: sets a background color for the box */
    border-radius: 8px; /* Optional: rounds the corners of the box */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optional: adds a subtle shadow for depth */
    line-height: 1.6; /* Improves readability by increasing line spacing */
    font-size: 16px; /* Sets an appropriate font size for reading */
    color: #0D330F; /* Sets a darker color for better contrast against the background */
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Styles for headings within the Studio Page to differentiate sections */
.studio-container h1, .studio-container h2 {
    color: #4CAF50; /* Adds a thematic color to headings */
    margin-top: 24px;
    margin-bottom: 16px;
	justify-content: center;
	text-align: center;
	max-width: 60%;
}

/* Ensures paragraphs have sufficient spacing for readability */
.studio-container p {
    margin-bottom: 16px;
    color: #235125; /* Adds a thematic color to headings */	
	max-width: 70%;
}
.studio-page .contact-button {
    background-color: #4CAF50;  /* Green background */
    color: white;  /* White text */
    border: none;
    border-radius: 20px;  /* Rounded corners */
	margin: 30px;
    padding: 10px 20px;  /* Padding inside the button */
    font-size: 16px;  /* Font size for readability */
    cursor: pointer;
    transition: background-color 0.3s;  /* Smooth color transition on hover */
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.studio-page .contact-button:hover {
    background-color: #367c39;  /* Darker green when hovered */
}

.studio-container .image-gallery {
    display: flex;  /* Establishes a flex container */
    justify-content: space-around;  /* Distributes space around images evenly */
    align-items: stretch;  /* Stretches items to fill the container height */
    padding: 20px 0;  /* Padding above and below the image row */
    margin: 0 -10px;  /* Negative margin to counteract the image margin for full width usage */
}

.studio-container .image-gallery img {
    flex: 1;  /* Allows each image to grow and fill the space */
    margin: 0 10px;  /* Adds horizontal space between images */
    object-fit: cover;  /* Ensures images cover their frame without distorting */
    height: 250px;  /* Fixed height for all images */
}

/* Privacy Policy Styling */
.privacy-container {
    max-width: 800px; /* Sets a maximum width for the content box */
    margin: 80px auto; /* Centers the box horizontally and adds vertical spacing */
    padding: 20px; /* Adds padding inside the box */
    background-color: #F9FFFC; /* Optional: sets a background color for the box */
    border-radius: 8px; /* Optional: rounds the corners of the box */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optional: adds a subtle shadow for depth */
    line-height: 1.6; /* Improves readability by increasing line spacing */
    font-size: 16px; /* Sets an appropriate font size for reading */
    color: #0D330F; /* Sets a darker color for better contrast against the background */
}

/* Styles for headings within the privacy policy to differentiate sections */
.privacy-container h1, .privacy-container h2 {
    color: #4CAF50; /* Adds a thematic color to headings */
    margin-top: 24px;
    margin-bottom: 16px;
}

/* Ensures paragraphs have sufficient spacing for readability */
.privacy-container p {
    margin-bottom: 16px;
}
.contact-page main {
    flex-grow: 0;  /* Prevents the main from expanding beyond its content size */
    justify-content:center;  /* Aligns all content to the top of the main element */
}

/* Styles specifically for the contact page */
.contact-page .contact-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Defines a three-column layout */
    gap: 20px;  /* Space between buttons */
    justify-content: center;
    align-items: center;
    padding: 20px;
    max-width: 700px;
    margin: auto;
}

.contact-page .contact-button {
    background-color: #4CAF50;  /* Green background */
    color: white;  /* White text */
    border: none;
    border-radius: 20px;  /* Rounded corners */
    padding: 10px 20px;  /* Padding inside the button */
    font-size: 16px;  /* Font size for readability */
    cursor: pointer;
    transition: background-color 0.3s;  /* Smooth color transition on hover */
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-page .contact-content {
    min-height: 70vh;  /* Ensures the container takes up at least 70% of the viewport height */
	display: flex;
    height: auto; /* Adjust height as needed */
	width: 100%;
	box-sizing: border-box;
}

.contact-page p {
    margin-top: 20px;  /* Adjusts space above the paragraph */
    font-size: 20px; /* Larger text for better readability */
    color: #1C3727; /* Darker text for better contrast */
    margin: 15px 0; /* Adequate spacing around paragraphs */
}

/* Link styling */
.contact-page p a {
    color: #174389; /* Standard blue for links */
    text-decoration: underline; /* Ensures links are underlined */
}

.contact-page p a:hover {
    color: #007bff; /* Darker blue on hover */
}

.contact-page .contact-button:hover {
    background-color: #367c39;  /* Darker green when hovered */
}

.album-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    margin: 20px 0;  /* Adds vertical spacing between album sections */
}

.album {
    width: 30vw; /* This makes each album take up 20% of the viewport width */
    padding-top: 30vw; /* Padding-top to match width for maintaining square aspect */
    position: relative;
    overflow: hidden;
    margin: 1vw; /* Margins to ensure some spacing around items */
}

.album img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area nicely */
}

.release1 {
    color: black; /* Initial color */
    transition: color 0.3s ease;
}

.release1:hover {
    color: blue; /* Color when hovered */
    text-decoration: underline;
}

.release, .release1 {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	margin-top: 30px;
	color: #2E481C;
	background-color: #DCFFCF;
	width: 60%;
	border-radius: 100px;
	padding: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.content-wrapper {
    display: flex;
    flex-direction: row;  /* Ensures content-left and content-right are side by side */
    justify-content: space-around;  /* Ensures even spacing around content items */
    align-items: stretch;  /* Aligns items to the top of their container */
    width: 100%;
    margin-bottom: 20px;  /* Space between each pair */
}

.content-left, .content-right {
    flex: 1 1 50%;  /* Each takes up half the space of their container */
    padding: 20px;
    box-sizing: border-box;
}

.content-right iframe {
    width: 100%;
    height: 600px;  /* Adjust height automatically based on content */
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(211,233,226,0.70);
}

/* Specific styling for images within content-left */
.content-left img {
    width: 100%;  /* Full width to fit its container */
    height: 500px;  /* Maintain aspect ratio */
	object-fit: contain; /*100%;  */ 
}

.content-left a img {
    transition: opacity 0.3s ease-in-out; /* Smooth transition for the hover effect */
}

/* Specific content-wrapper for "Para Allison & Perseus" */
.content-wrapper-para {
    display: flex;
    flex-direction: row;  /* Side by side layout */
    justify-content: space-around;  /* Space around elements for balance */
    align-items: flex-start;  /* Align at the top */
    width: 100%;  /* Take full width */
    margin-bottom: 20px;  /* Keep spacing consistent */
}

.content-left-para {
    flex: 0 1 45%;  /* Around 45% width, keeps room for both sides */
    padding: 20px;
    box-sizing: border-box;
    text-align: center;  /* Center the image */
}


.content-left-para img {
    width: 100%;  /* Full width for the image container */
    height: auto;  /* Maintain aspect ratio */
    max-height: 500px;  /* Match the max height of the iframe */
    object-fit: contain;  /* Ensure the image fits without stretching */
}

.content-right-para {
    flex: 0 1 45%;  /* Around 45% width */
    padding: 20px;
    box-sizing: border-box;
}

.content-right-para iframe {
    width: 100%;  /* Full width for iframe */
    height: 600px;  /* Ensure height consistency with the image */
    border-radius: 8px;  /* Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Subtle shadow for emphasis */
}
/*.content-left, .content-right {
    flex: 1 1 45%;  /* Each takes up half the space of their container 
    padding: 20px;
    box-sizing: border-box;
	max-width: 600px
}*/

/*.content-right iframe {
  	flex: 0 1 40%;
	width: 100%;
	padding: 20px;
    height: 600px;  
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(233,226,211,0.70);
}

/* Specific styling for images within content-left 
.content-left img {
    width: 100%;  
    height: 500px;  
	object-fit: contain;
}*/
.streaming-buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    background-color: transparent;
	    text-align: center;
    margin-top: 10px;
    margin-bottom: 1px; /* Helps with vertical spacing */
}
.streaming-button {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.streaming-button:hover {
    transform: scale(1.1);
}
.music-icon {
    height: 38px;
    width: 38px;
    margin: 0 10px;
    vertical-align: middle;
    object-fit: contain; /* ensures aspect ratio */
}
.divider {
    border: none;
    border-top: 2px solid #f2a93f; /* or your preferred highlight color */
    margin: 0px auto;
    width: 90%;
    max-width: 600px;
    opacity: 0.8;
}
@media (max-width: 600px) {
  .streaming-buttons-container {
    margin-bottom: 25px;
  }

  .music-icon {
    height: 32px;
    width: 32px;
    margin: 0 6px;
  }
}
.content-left a img {
    transition: opacity 0.3s ease-in-out; /* Smooth transition for the hover effect */
}

.content-left a:hover img {
    opacity: 0.5; /* Slightly reduce opacity on hover */
}
/* Default styles for caption inside content-left */
.content-left p {
	background-color: rgba(255,244,223,0.87);
    border-radius: 8px; /* Optional: rounds the corners of the box */
	font-size: 1.1em;  /* Default font size for larger screens */
	font-stretch: extra-expanded;
	font-style: normal;  
	padding: 5px;
	color: #2D200C;
	font-weight: 400; 
    padding-bottom: 20px;  /* Adds space below the caption */
    margin-bottom: 20px;  /* Additional space to push down anything below */
}
.content-left p b{
	font-weight: 900; 
}
.divider {
    height: 4px;  /* Thickness of the line */
    background-color: #F2BD4A;  /* Dark green color */
    border: none;  /* Remove any default border styling */
    width: 90%;  /* Width relative to its container, adjust as needed */
    margin: 40px auto;  /* Center it horizontally and add space above and below */
}
.section:last-child .content-wrapper {
    display: flex;
    flex-direction: row; /* Force last section to be in row format */
}

.logo-link {
    position: fixed;  /* Ensures the logo stays in place while scrolling */
    top: 3px;  /* Distance from the top of the viewport */
    left: 20px;  /* Distance from the left of the viewport */
    z-index: 17000;  /* Keeps the logo above other elements */
}

.logo-link img {
    height: 35px;  /* Adjust based on your desired size */
	width: 35px;
    transition: opacity 0.3s ease;  /* Smooth transition for the hover effect */
}

.logo-link:hover img {
    opacity: 0.7;  /* Lightens the logo on hover */
}

.navbar {
    z-index: 10000; /* Ensure the navbar stays above everything */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Adjust the height according to your design */
    background-color: rgba(255,230,182,0.96); /* Slight transparency for aesthetics */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Radjhani', 'Imprint MT Shadow', serif; /* Or use your preferred font */

}
.menu-icon {
    display: block; /* Initially hidden on larger screens */
    position: relative;
	align-items: flex-end; 
	margin: 70px 20px 40px; 
	padding: 10px 0px 40px 0px;
    z-index: 4000; /* Higher than anything else in navigation components */
    cursor: pointer;
    font-size: 30px; /* Large enough to be easily clickable */
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%; /* Ensure nav links use full width for centering */
    height: 100%; /* Full height of navbar */
	z-index: 5000;
}
.nav-links li {
    padding: 10px 15px;
}
.nav-links a {
    text-decoration: none;
    color: #233810; /* Initial color */
    font-size: 1.4em; /* Adjust size as needed */
    transition: color 0.3s, font-weight 2s; /* Smooth transition for hover and active effects */
}
.nav-links a:nth-child(2n) {
    color: #434700; /* Alternating color for even links */
}

.nav-links a:hover {
    color: #D1AC16; /* Color change on hover */
}
.nav-links a.active {
    color: #0E2807; /* Keeps the current color */
    font-size: 1.6em; /* Adjust size as needed */
	padding-top: 20px;
    font-weight: bolder; /* Keeps the bold font weight */
    text-shadow: 0px -3px 5px rgba(31,59,22,0.47), 0px 3px 2px rgba(0, 0, 0, 0.2); /* Adds the upward shadow with an additional shadow for a more 3D effect */
    transform: translateY(4px); /* Moves the link down slightly */
    transition: transform 0.2s ease-in-out, text-shadow 0.2s ease-in-out; /* Adds a smooth transition */
	z-index: 5000;
}
.social-media-icons {
    display: flex;  /* Ensures that icons are aligned in a row */
	justify-content: center;  /* Centers icons horizontally */
    align-items: center;  /* Aligns icons vertically in the middle */
    padding: 10px 15px;  /* Top and bottom padding */
    flex-wrap: wrap;  /* Allows icons to wrap to the next line if not enough space */
}
/* General styling for social media icons */
.social-media-icons a {
    margin: 5px;  /* Reduces margin around icons to bring them closer */
    color: #9F6C2B;  /* Inherits color from parent, adjust as needed */
    font-size: 1.8em;  /* Adjust size as needed, smaller might fit better */
    transition: color 0.3s ease;  /* Smooth transition for hover effects */
	padding: 10px;
	z-index: 200000;
}
.hero-message {
    position: relative;
    width: 50%;  /* Adjust width as needed */
    text-align: center;
	color: #002517; /* Dark green color for visibility */
    font-family: 'Lucida Bright', sans-serif;
    background: rgba(236,248,236,0.86); /* Semi-transparent background */
    padding: 10px;
    box-sizing: border-box;
	z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    /* Removed positioning offsets and transform */
    margin: 20px auto; /* Centers the hero-message horizontally within its container */
    justify-content: center; /* Aligns children vertically in the center if needed */
	border-radius: 1%;
	box-shadow: 1px 16px 18px 20px rgba(137,164,132,0.10);
}
.hero-message h4 {
	color: #053F29; /* Dark green color for visibility */
    font-size: 2em; /* Adjust base font size if necessary */
    margin: 0 auto; /* or -bottom: 15px; */
	padding: 5px;
}
.hero-message h2 {
	font-size: 2.5em; /* Adjust base font size if necessary */
	font-style: italic;
	color: #3B6217;
}
.hero-message p {
    font-size: 1.2em;
    line-height: 2;
	margin: 0 auto;
	padding: 10px;
	max-width: 95%;
	align-content: center;
	width: 95%; /* Set the width to 50% of the parent container */
	text-align: center; /* Optional: Center the text inside the paragraph */
}
/* Style for the section containing pricing */
.pricing-section {
    display: flex;
    flex-direction: column; /* Ensure elements stack neatly */
    justify-content: center;
    align-items: flex-start; /* Aligns text to the left */
    padding: 20px;
    box-sizing: border-box;
	margin-bottom: 30px;
}

/* Style for the bullet points */
.pricing-section ul {
    padding-left: 20px; /* Adds some space between the bullet points and the text */
    margin-bottom: 15px; /* Ensure space between each pricing section */
    list-style-position: inside; /* Ensure bullet points are closer to the text */
}
/* Align content to the left */
.pricing-content p, .pricing-content ul {
    text-align: left; /* Ensure everything is left-aligned */
    margin-bottom: 15px;
}

.pricing-section li {
    margin-bottom: 10px; /* Adds spacing between list items */
    font-size: 1.2em; /* Ensures readability */
}

.pricing-section h2 {
    font-size: 1.5em; /* Size for the headers */
    text-align: left; /* Align the headers */
}
.content-box {
    margin: 80px auto; /* Centers the box horizontally */
    color: #325214; /* Olive color */
    font-family: 'Montserrat', sans-serif; /* Serif font */
    z-index: 1; /* Lower the content box so it scrolls under the navbar */
    position: relative;
    background-color: rgba(255,213,166,0.81);
    max-width: 1200px; /* Maximum width for larger screens */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    word-wrap: break-word; /* Prevents text from spilling out */
    box-sizing: border-box; /* Includes padding in the box model */
    padding: 35px;

}
/* General structure */
.composition-section {
    margin: 1.5rem auto; /* Center the section horizontally */
    padding: 2rem; /* Padding inside each section */
    color: #325214; /* Olive color */
    font-family: 'Georgia', serif;
    z-index: 1;
    position: relative;
    background-color: rgba(244, 255, 244, 0.81); /* Light background for each section */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    word-wrap: break-word;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Optional: Add light border for clarity */
    padding-bottom: 1rem; /* Add some padding at the bottom */
    max-width: 1000px; /* Fixed maximum width for larger screens */
    width: 90%; /* Makes the sections wider */
}
.composition-section h2 {
	font-size: 2.5em;
}
/* Group related information by reducing the space between them */
.composition-title {
    font-weight: bold;
    font-size: 1.3em; /* Slightly larger font size */
    margin-bottom: 0.2rem; /* Closer to the duration */
}

.composition-duration {
    margin-left: 2rem; /* Indent the difficulty rating block */
	margin-top: 0.1em;
	margin-bottom: 0.1rem; /* Closer to the instrumentation */
    font-size: 1.1em; /* Ensure consistent font size */
}

.composition-instrumentation {
    margin-left: 2rem; /* Indent the difficulty rating block */
	margin-top: 0.1em;
    margin-bottom: 0.1rem; /* Closer to the difficulty rating */
    font-size: 1em;
}

.composition-difficulty {
    margin-left: 2rem; /* Indent the difficulty rating block */
	margin-top: 0.1em;
    font-size: 1em;
    margin-bottom: 1.5rem; /* Add some space between the rating and the next piece */
}

.composition-difficulty ul {
    list-style-type: circle; /* Use circles for the bullet points */
	margin-top: 0.1em;
    margin-left: 1.5rem; /* Indent the bullet points */
}

.composition-section + .composition-section {
    margin-top: 2.5rem; /* Adds more space between compositions */
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Optional top border between sections */
}

/* Styling the "Learn More" button */
.cta-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.2em;
    color: white;
    background-color: #D97200;
    text-decoration: none;
    border-radius: 5px;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}
.cta-button-wrapper {
    display: flex;
    justify-content: center; /* This centers the button horizontally */
    margin-bottom: 20px;
}
.cta-button:hover {
    background-color: #F7D895;
}
/* Add more padding to make the individual works distinct */
.composition-piece {
    margin-bottom: 2.5rem; /* Adds space between pieces */
}
/* Ensure it adapts to mobile */
@media only screen and (max-width: 767px) {
    .composition-section {
        width: 95%; /* Full width for mobile */
    }
}

.content-box h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #2D461C;
}

.content-box p {
	color: #0D1205; /* Apply your dark green color */
    font-size: 1.2em; /* Adjust font size */
    line-height: 1.5; /* Line height for readability */
	padding: 20px; /* Adds padding around the text */
}
content-box ul {
    margin-left: 25px; /* Adjust this value to control the level of indentation */
    list-style-type: disc; /* Ensures a different list style (disc) for the nested list */
}
.content-box ul ul {
    margin-left: 25px; /* Adjust this value to control the level of indentation */
    list-style-type: circle; /* Ensures a different list style (disc) for the nested list */
}
.testimonial-quote {
	font-family: 'Georgia', serif;
	font-size: 1.2em;
	line-height: 1.6;
	color: #1C3C1C;
	padding-bottom: 1.5em;
}

.testimonial-reviewer {
	font-family: 'Georgia', serif;
	font-size: 1em;
	font-style: italic;
	color: #315E2E;
	text-align: right; /* Optional, aligns the reviewer name to the right */
	margin-top: .5em; /* This controls the space above the reviewer */
	margin-bottom: 1.5em; /* This controls the space below the reviewer */
	padding-top: .5em;
}

.next-page-arrow {
    position: fixed; /* Fixed position to keep the arrow visible while scrolling */
    right: 20px; /* Distance from the right edge of the viewport */
    bottom: 5px; /* Distance from the bottom edge of the viewport */
    font-size: 4em; /* Size of the arrow */
    color: darkorange; /* Adjusted color */
    z-index: 1500; /* Ensure the arrow is above other elements */
}
.next-page-arrow:hover {
    color: orange; /* Change color on hover #38571a*/
    cursor: pointer; /* Change the cursor to indicate it's clickable */
}

#scrollTopBtn {
    position: fixed;  /* Keeps the button fixed during scrolling */
    left: 20px;  /* Position from the left */
    bottom: 100px;  /* Position from the bottom, make sure it does not overlap with the footer */
    display: block;  /* Hidden initially */
    padding: 10px 15px;
    font-size: 24px;
    z-index: 6000;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    opacity: 0.7;
}

#scrollTopBtn:hover {
    opacity: 1; /* Solid color on hover */
}

.footer-contact {
    width: 100%;
    background-color: rgba(214,242,215,0.56);  /* Light grey with increased transparency */
    padding: 1px;
    box-sizing: border-box;
    text-align: center;
    bottom: 0;
    left: 0;
    z-index: 1000;
    flex-shrink: 0; /* Prevents the footer from shrinking */
	margin-bottom: 10px;
}

.email-signup {
    max-width: 450px;
    margin: auto;
}

.email-signup h3 {
    color: #18561E;
    margin-bottom: 5px;  /* Reduced vertical space */
}

.email-signup p {
    margin-top: 0;
    margin-bottom: 2px;  /* Maintain some space before the input field */
}

.email-signup input[type="email"] {
    width: 70%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.email-signup button {
    padding: 10px 20px;
    background-color: #439B48;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.email-signup button:hover {
    color: #c3d117; /* Lighter color on hover */
    cursor: pointer; /* Change the cursor to indicate it's clickable */
}

.testimonial-section {
    color: #325214; /* Olive color */
    font-family: 'Lucida Bright', sans-serif;
	background-color: rgba(251,255,251,0.60);
    padding: 30px;
    margin: 80px auto; /* Centers the box horizontally */
    max-width: 800px; /* Or any max-width that fits your design */
    width: 90%; /* Responsive width */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
	z-index: 1000;
}

.testimonial-section h2 {
    color: #2D461C;
	padding-top: 30px;
}

.testimonial-section blockquote {
	color: #030500; /* Apply your dark green color */
	padding-bottom: 35px;
}

/* General styling for the instrument categories */
.instrument-categories {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.instrument-category {
    flex: 1 1 20%; /* Each category takes up 20% of the row */
    margin: 10px;
    text-align: center;
}

.instrument-category h3 {
    font-size: 1.2em;
    color: #2D461C; /* Dark green */
    margin-bottom: 10px;
}

.instrument-category a {
    display: block;
    margin-bottom: 5px;
    font-size: 1em;
    color: #002517; /* Dark green */
    text-decoration: none;
}

.instrument-category a:hover {
    text-decoration: underline;
    color: #0F2D0C; /* Slightly lighter green */
}

.main-score-link {
    text-align: center;
    font-size: 1.8em;
    color: #002517;
    margin-bottom: 20px;
}

.main-score-link a {
    color: #002517;
    text-decoration: none;
}

.main-score-link a:hover {
    text-decoration: underline;
    color: #0F2D0C;
}

/* Main container and PDF viewer styling */
.container {
    display: block;
    margin: 20px auto;
    max-width: 1000px;
    width: 100%;
}
/* Adjust the columns for instruments */
.parts-columns {
    display: flex;
    justify-content: center; /* Evenly space out the columns */
    margin: 10px auto; /* Center the columns and add spacing above and below */
}

.parts-columns .column {
    flex: 1 1 25%; /* Ensures all columns take up equal width */
    margin: 0 15px; /* Adds space between the columns */
    text-align: center; /* Centers the instrument names */
    width: 22%; /* Each column will take up 25% of the available width */		
	min-width: 175px;
}

.parts-columns .column ul {
    padding-left: 0; /* Removes default padding */
}

.parts-columns .column ul li {
    list-style: none; /* Removes bullet points */
    margin: 5px 0; /* Adds spacing between instrument names */
    font-size: 1.1em; /* Slightly increases font size for readability */
}

/* Instrument headings style */
.parts-columns h4 {
	color: #002517; /* Matches the theme color */
    font-size: 1.4em; /* Larger font for section headings */
    margin-bottom: 10px; /* Add spacing below headings */
}
.parts-section h3 {
	color: #002517; /* Matches the theme color */
    font-size: 1.6em; /* Larger font for section headings */
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif", serif;
}
.parts-section p {
	color: #002517; /* Matches the theme color */
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif", serif;
    font-size: 1em; /* Ensures it's readable */
}


.full-score-link {
	z-index: 6000;
	position: relative;
	text-align: center;
	margin-bottom: 20px; /* Adjust space between the link and columns */
	font-size: 1.8em; /* Make the link larger */
	font-weight: bold; /* Make the text thicker */
	background-color: rgba(211,233,226,0.70); /* Light semi-transparent background */
	padding: 5px 10px; /* Add padding for visibility */
	border-radius: 5px; /* Rounded corners */
}

.video-section {
    text-align: center;
    margin-bottom: 50px;
}

/* Update the Watch the Score Video title */
.video-section h2 {
	text-align: center;
	color: #002517; /* Matches the website title color */
	font-family: 'Imprint MT Shadow', serif; /* Consistent with your branding */
}

/* Update the Composer's Note section */
.composer-note h2 {
    color: #185B0A; /* Enforce the darker color */
    font-size: 1.8em; /* Larger size for emphasis */
    text-shadow: 3px 3px 6px rgba(80,92,74,0.80); /* Stronger shadow */
    font-weight: bold;
    font-family: 'Imprint MT Shadow', serif; /* Ensure consistent typography */
	background-color: rgba(217, 239, 232, 0.70); /* Adjusted background for readability */
    /*background-color: rgba(230,255,230,0.80); /* Light background for visibility */
    padding: 10px;
    border-radius: 8px;
	margin: 0 auto;
	align-items: center;
	width: 90%;
}
.composer-note p {
	max-width: 900px;
	    text-align: center;
	color: #002517; /* Matches the theme color */
	background-color: rgba(217, 239, 232, 0.70); /* Adjusted background for readability */
    padding: 10px; /* Added padding for better readability */
    border-radius: 5px; /* Slight rounding for a polished look */
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif", serif;
    font-size: 1em; /* Ensures it's readable */
	margin: 0 auto 20px;
    /*margin-bottom: 20px; /* Adds space below */
	width: 90%;
}
	.albums-page .composer-note {
		font-size: 1em;
		margin: 0 auto;
		align-items: center;
		align-content: center;
		font-style: oblique;
		background-color: rgba(243,255,243,0.54);
		width: 70%;
		padding: 20px;
	}

/* Styling for the descriptive text below Watch the Score Video */
.video-section p {
	max-width: 1000px;
	color: #002517; /* Matches the theme color */
	background-color: rgba(217, 239, 232, 0.70); /* Adjusted background for readability */
    padding: 10px; /* Added padding for better readability */
    border-radius: 5px; /* Slight rounding for a polished look */
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif", serif;
    font-size: 1em; /* Ensures it's readable */
    margin-bottom: 20px; /* Adds space below */
}

.video-thumbnail {
    width: 60%;
    max-width: 600px;
    transition: transform 0.3s ease;
}

.video-thumbnail:hover {
    transform: scale(1.05);
}

.full-score-section {
	max-width: 90vh;
    background-color: rgba(223, 255, 237, 0.85); /* Light background to match the theme */
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
    text-align: center;
}

.full-score-section h2 {
    color: #002517; /* Dark green, same as the main title */
    margin-bottom: 10px;
    font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", "serif", serif;
}

.full-score-section p {
    color: #002517; /* A darker green for readability */
    font-size: 1.1em;
    margin-bottom: 15px;
	text-align: left;
}

.full-score-section .contact-button:hover {
    background-color: #93CD86; /* Slightly lighter green on hover */
}
	
.video-section iframe {
    width: 100%; /* Full width of the container */
    height: 650px; /* Maximum height as viewport height */
    object-fit: contain; /* Ensures the video fits within the container */
    border: 10px solid #04361B; /* Dark green border for window-like effect */
    box-shadow: 0 14px 18px rgba(0, 0, 0, 0.2); /* Subtle shadow for a floating effect */

}

/* Wrapper for centering the PDF Viewer */
.pdf-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    width: 85%; /* Adjust width to 85% of viewport */
    max-width: 85%; /* Ensure it doesn't exceed 85% */
    height: 73vh; /* Adjust height to fit content */
    z-index: 1000; /* Make sure it's above other elements */
}

/* Styling for the PDF Viewer */
.pdf-viewer {
    border: 10px solid #04361B; /* Dark green border for window-like effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for a floating effect */
    background-color: #fff; /* White background inside the viewer */
    overflow-y: auto; /* Ensure PDF viewer can scroll vertically */
    width: 100%; /* Set width to fill the wrapper */
    height: 100%; /* Set the height to 100% of the wrapper's height */
    min-height: 68vh; /* Fallback minimum height to prevent collapse */
    max-width: 85%; /* Ensure it doesn't exceed 85% */	
}
.signup-container {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
    margin: 30px auto;
    max-width: 500px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.release-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
#fan-signup-form h2 {
    margin-top: 0;
    color: #fff;
    font-size: 22px;
    margin-bottom: 15px;
}

#fanbase-form label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    text-align: left;
    color: #fff;
    font-weight: 600;
}

#fanbase-form input[type="text"],
#fanbase-form input[type="email"],
#fanbase-form select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: 14px;
	border: 1px solid #333;
}

#fanbase-form input:focus,
#fanbase-form select:focus {
    outline: none;
    box-shadow: 0 0 5px #1DB954;
    border: 1px solid #1DB954;
}

#fanbase-form select[multiple] {
    height: 100px;
}

#fanbase-form .consent {
    margin-top: 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #fff;
}

#fanbase-form .join-button {
    margin-top: 20px;
    padding: 12px 25px;
    background-color: #1DB954;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#fanbase-form .join-button:hover {
    background-color: #1AA34A;
}
.spotify-presave {
  display: inline-flex;
  align-items: center;
  background-color: black;
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 30px;
  transition: background-color 0.3s ease;
}
.spotify-presave:hover {
  background-color: #1DB954; /* Spotify green */
  color: black;
}
.scroll-note {
  font-size: 1.45rem;
  color: darkorange;
  text-align: center;
  margin-top: 1em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.scroll-down-arrow {
  display: block;
  text-align: center;
  font-size: 2.5rem;
  margin-top: 0.25em;
  animation: bounce 2s infinite;
  color: darkorange;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;	
}
.scroll-down-arrow:hover {
  transform: scale(1.2) rotate(15deg);
  color: #ffa500; /* or any SailSki orange hue */
  cursor: pointer;
}

.artist-quote {
  background: rgba(80, 120, 90, 0.40); /* slightly deeper soft green tint */
  padding: 1.7em 2em;
  border-radius: 10px;
  font-size: 2em; /* bumped up for better readability */
  font-style: italic;
  text-align: center;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  max-width: 750px;
  margin: 3em auto 2em auto;
  line-height: 1.7;
  position: relative;
  z-index: 2;
}
.artist-quote cite {
  display: block;
  margin-top: 0.75em;
  font-size: 1em;
  font-style: normal;
  color: #ffe7aa; /* lighter warm gold */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* 🎯 Quote Section with Background */
.section-blurb blockquote {
  position: relative;
  margin-top: 2em;
  font-style: italic;
  font-size: 1.1em;
  text-align: center;
  color: #eee;
  padding: 1.5em 2em;
  line-height: 1.6;
}

/* ✨ Watermark background behind quote */
.section-blurb blockquote::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("img/SailSki-Avatar1.png"); /* Replace with your actual path */
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
  opacity: 0.08;
  z-index: 0;
}

/* ✍️ Signature fade effect */
.section-blurb .signature {
  display: block;
  text-align: center;
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 1em;
  color: #ffcc80; /* soft gold */
  opacity: 0.9;
  margin-top: 0.5em;
  z-index: 2;
  position: relative;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}
.artist-quote:hover {
  text-shadow: 2px 2px 6px rgba(255,255,255,0.3);
  transform: scale(1.01);
  transition: all 0.3s ease;
}
.platform-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px; /* spacing between logos */
  margin: 20px auto;
}

.platform-badges a img {
  height: 50px;
  max-width: 140px;
  object-fit: contain;
  padding: 5px;
  transition: transform 0.3s ease;
}
@media (max-width: 600px) {
  .platform-badges a img {
    height: 40px;
    max-width: 100px;
  }
}

.platform-badges a img:hover {
  transform: scale(1.1);
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
/* ----------Print Styles------------------- */
@media print {
    body {
        font-size: 12pt;
    }
    nav, footer, button, a {
        display: none;  /* Hides elements that are not necessary for a printed document */
    }
    main {
        margin: 0;
        padding: 0;
        width: 100%;
    }
}

/* ----------End Print Styles------------------- */


@font-face {
    font-display: swap;
}
/* -----------------------------------------Styles for Monitor Screens------------------- */
/* Ultra-wide monitors (e.g., 21:9 aspect ratio) */
@media only screen and (min-width: 1920px) {
    .album {
        width: 20vw;
        padding-top: 20vw;
    }
    /* Styles for ultra-wide desktop monitors */
}

/* 27" Monitors (typically between 1440px and higher) */
@media only screen and (min-width: 1800px) and (max-width: 2000px) {
  	body.about-page {
		background-size: 100% 100%;
	} 
   .nav-links a {
        padding: 10px 15px 10px;
        font-size: 1.5em; 
    }
	.nav-links a.active {
		font-size: 1.8em;	
		padding: 10px;
	}
	.social-media-icons a {
		font-size: 1.5em;
    }
    .brand-name {
        font-size: 4.5em; 
        padding: 5px;       
	    margin: 120px 5px 5px 80px; 
    }
    .composer-title {
     	font-size: 2.5em;   
        margin: 1px auto 1px 660px;  
        align-items: flex-start;
	}
	.hero-message {
		width: 50%;  
		padding: 10px;
	}
	.hero-message h1 {
		font-size: 2.1em; 
		margin: 0 auto;
		padding: 5px;
	}
	.hero-message h2 {
		font-size: 2.5em; 
	}
	.hero-message p {
		font-size: 1.2em;
		line-height: 2;
		margin: 0 auto;
		padding: 10px;
		max-width: 95%;
		width: 95%; 
		text-align: center; 
	}	
}
/* 24" Monitors (1920px wide) */
@media only screen and (min-width: 1740px) and (max-width: 1799px) {
 	body.about-page {
		background-size: 100% 100%;
	} 
  .nav-links a {
        padding: 10px 15px 10px; 
        font-size: 1.4em;
    }
 	.nav-links a.active {
		font-size: 1.7em;	
	}
	.social-media-icons a {
		font-size: 1.5em;
    }
     .brand-name {
        font-size: 4.5em;  
        padding: 5px;       
	    margin: 120px 5px 5px 80px;  
    }
    .composer-title {
     	font-size: 2.5em;    
        margin: 1px auto 1px 665px;  
        align-items: flex-start;
	}
	.hero-message {
		width: 50%;  
		padding: 10px;
	}
	.hero-message h1 {
		font-size: 2.1em;
		margin: 0 auto; 
		padding: 5px;
	}
	.hero-message h2 {
		font-size: 2.5em; 
	}
	.hero-message p {
		font-size: 1.2em;
		line-height: 2;
		margin: 0 auto;
		padding: 10px;
		max-width: 95%;
		width: 95%;
		text-align: center; 
	}
    .album {
        width: 30vw;
        padding-top: 30vw;
    }
	.content-box {
		margin: 80px auto; 
		padding: 30px;
		max-width: 860px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
}

/* For smaller desktop monitors 21" screensor large laptops between 1280px and 1439px */
@media only screen and (min-width: 1500px) and (max-width: 1739px) {
 	body.about-page {
		background-size: 100% 100%;
	} 
	.nav-links a {
        padding: 10px 10px 10px 10px; 
        font-size: 1.3em; 
    }
 	.nav-links a.active {
		font-size: 1.6em;	
	}
	.social-media-icons a {
		font-size: 1.5em;
    }
   .brand-name {
        font-size: 4em;  
        padding: 5px;       
	    margin: 120px 5px 5px 80px;  
    }
    .composer-title {
     	font-size: 2.5em;    
        margin: 1px auto 1px 540px; 
        align-items: flex-start;
	}
	.hero-message {
		width: 50%;  
		padding: 10px;
	}
	.hero-message h1 {
		font-size: 2.1em;
		margin: 0 auto;
		padding: 5px;
	}
	.hero-message h2 {
		font-size: 2.5em; 
	}
	.hero-message p {
		font-size: 1.2em;
		line-height: 2;
		margin: 0 auto;
		padding: 10px;
		max-width: 95%;
		width: 95%; 
		text-align: center; 
	}
    .album {
        width: 30vw;
        padding-top: 30vw;
    }    
	.button-group p {
		font-size: 1.1em;
	}
	.content-box {
		margin: 80px auto;
		padding: 30px;
		max-width: 860px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
}
/* For smaller desktop monitors 19" screens  */
@media only screen and (min-width: 1371px) and (max-width: 1499px) {
		body.about-page {
			background-size: 100% 100%;
		} 
	  .nav-links a {
			padding: 10px 5px 10px; 
			font-size: 1.3em; 
		}
		.nav-links a.active {
			font-size: 1.5em;	
		}
		.social-media-icons a {
			font-size: 1.6em;
		}
		.brand-name {
			font-size: 3em;  
			padding: 5px;       
			margin: 100px 5px 5px 80px;  
		}
		.composer-title {
			font-size: 2.5em;    
			margin: 1px auto 1px 270px;  
			align-items: flex-start;
		}
		.hero-message {
			width: 50%;  
			padding: 10px;
		}
		.hero-message h1 {
			font-size: 2em; 
			margin: 0 auto; 
			padding: 5px;
		}
		.hero-message h2 {
			font-size: 2.3em;
		}
		.hero-message p {
			font-size: 1.2em;
			line-height: 2;
			margin: 0 auto;
			padding: 10px;
			max-width: 95%;
			width: 95%; 
			text-align: center;
		}
		.button-group p {
			font-size: 1.1em;
		}
	.content-box {
		margin: 80px auto; 
		padding: 30px;
		max-width: 800px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
		.release {
		padding: 40px;
	}
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
}
/* For smaller desktop monitors 17" screens 
@media only screen and (min-width: 1371px) and (max-width: 1499px) {
		body.about-page {
			background-size: 100% 100%;
		} 
	 .nav-links a {
			padding: 10px 4px 10px; 
			font-size: 1.2em; 
		}
		.nav-links a.active {
			font-size: 1.4em;	
		}
		.social-media-icons a {
			font-size: 1.4em;
		}
	
		.brand-name {
			font-size: 3.5em;  
			padding: 5px;      
			margin: 90px 5px 5px 80px;  
		}
		.composer-title {
			font-size: 2.5em;    
			margin: 1px auto 1px 450px;  
			align-items: flex-start;
		}
		.hero-message {
			width: 50%;  
			padding: 10px;
		}
		.hero-message h1 {
			font-size: 1.5em;
			margin: 0 auto;
			padding: 5px;
		}
		.hero-message h2 {
			font-size: 1.8em;
		}
		.hero-message p {
			font-size: 1em;
			line-height: 2;
			margin: 0 auto;
			padding: 10px;
			max-width: 95%;
			width: 95%;
			text-align: center; 
		} 
		.button-group p {
			font-size: 0.9em;
		}
    .content-box {
        max-width: 95%; /* Make the box fit within the screen
        margin: 20px auto; /* Reduce the margin for smaller screens
        padding: 30px; /* Reduce padding so it doesn't spill 
    }

    .content-box p {
        font-size: 1em; /* Decrease font size for better fit 
        padding: 5px; /* Adjust padding for smaller screens 
		line-height: 1.4;
    }

    .content-box h1, .content-box h2, .content-box h3 {
        font-size: 1.3em; /* Scale down heading sizes 
    }
	.release {
		padding: 40px;
	}
}

/* For smaller desktop monitors 16" screens  */
@media only screen and (min-width: 1281px) and (max-width: 1359px) {
		body.about-page {
			background-size: 100% 100%;
		} 
	 .nav-links a {
			padding: 10px 4px 10px; 
			font-size: 1.1em;
		}
		.nav-links a.active {
			font-size: 1.3em;	
		}
		.social-media-icons a {
			font-size: 1.2em;
		}
		.brand-name {
			font-size: 1.8em;  
			padding: 5px;      
			margin: 80px 5px 5px 80px;
		}
		.composer-title {
			font-size: 1.8em;  
			margin: 1px auto 1px 390px; 
			align-items: flex-start;
		}
		.hero-message {
			width: 50%; 
			padding: 10px;
		}
		.hero-message h1 {
			font-size: 1.5em; 
			margin: 0 auto;
			padding: 5px;
		}
		.hero-message h2 {
			font-size: 1.8em; 
		}
		.hero-message p {
			font-size: 1em;
			line-height: 2;
			margin: 0 auto;
			padding: 10px;
			max-width: 95%;
			width: 95%; 
			text-align: center;
		}
		.button-group p {
			font-size: 0.9em;
		}
    .content-box {
        max-width: 95%; /* Make the box fit within the screen */
        margin: 20px auto; /* Reduce the margin for smaller screens */
        padding: 30px; /* Reduce padding so it doesn't spill */
    }

    .content-box p {
        font-size: 1em; /* Decrease font size for better fit */
        padding: 5px; /* Adjust padding for smaller screens */
		line-height: 1.4;
    }

    .content-box h1, .content-box h2, .content-box h3 {
        font-size: 1.3em; /* Scale down heading sizes */
    }
	.release {
		padding: 40px;
	}
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
}
/* For smaller desktop monitors 15" screens */
@media only screen and (min-width: 1031px) and (max-width: 1280px) {
		body.about-page {
			background-size: 100% 100%;
		} 
		.nav-links a {
			padding: 10px 1px 10px; 
			font-size: 1em; 
		}
		.nav-links a.active {
			font-size: 1.1em;	
		}
		.social-media-icons a {
			font-size: 1.0em;
		}
		.logo-link img {
			height: 40px;  
			width: 40px;
			transition: opacity 0.3s ease;  
		}
		.brand-name {
			font-size: 2em;  
			padding: 5px;      
			margin: 70px 5px 5px 80px; 
		}
		.composer-title {
			font-size: 1.5em;   
			margin: 1px auto 1px 390px; 
			align-items: flex-start;
		}
		.hero-message {
			width: 55%;  
			padding: 10px;
		}
		.hero-message h1 {
			font-size: 1.4em; 
			margin: 0 auto; 
			padding: 5px;
		}
		.hero-message h2 {
			font-size: 1.6em; 
		}
		.release {
			padding: 40px;
		}
		.hero-message p {
			font-size: 1em;
			line-height: 2;
			margin: 0 auto;
			padding: 10px;
			max-width: 95%;
			width: 95%; 
			text-align: center; 
		}
		.button-group p {
			font-size: 0.9em;
		}
		.content-box {
			max-width: 95%; /* Make the box fit within the screen */
			margin: 20px auto; /* Reduce the margin for smaller screens */
			padding: 30px; /* Reduce padding so it doesn't spill */
		}

		.content-box p {
			font-size: 1em; /* Decrease font size for better fit */
			padding: 5px; /* Adjust padding for smaller screens */
			line-height: 1.4;
		}

		.content-box h1, .content-box h2, .content-box h3 {
			font-size: 1.3em; /* Scale down heading sizes */
		}
		.concert-work-page .main-title {
			font-size: 1.35em;
		}
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

}
/* For smaller desktop monitors 14" screens  */
@media only screen and (min-width: 995px) and (max-width: 1019px) {
		body.about-page {
			background-size: 100% 100%;
		} 
		.nav-links a {
			padding: 10px 1px 10px; 
			font-size: 1em; 
		}
		.nav-links a.active {
			font-size: 1.em;	
		}
		.social-media-icons a {
			font-size: 1.0em;
		}
		.logo-link img {
			height: 40px;  
			width: 40px;
			transition: opacity 0.3s ease;  
		}
		.brand-name {
			font-size: 2.4em;  
			padding: 5px;       
			margin: 70px 5px 5px 80px; 
		}
		.composer-title {
			font-size: 1.4em;    
			margin: 1px auto 1px 390px;  
			align-items: flex-start;
		}
		.concert-work-page .main-title {
			color: #010301;
			font-size: 1.41em;
			font-weight: bolder;	
			padding: 0px 0px 10px 0;
			text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
		}
	
		.hero-message {
			width: 56%;  
			padding: 10px;
		}
		.hero-message h1 {
			font-size: 1.3em; 
			margin: 0 auto; 
			padding: 5px;
		}
		.hero-message h2 {
			font-size: 1.5em; 
		}
		.hero-message p {
			font-size: 1em;
			line-height: 2;
			margin: 0 auto;
			padding: 10px;
			max-width: 95%;
			width: 95%; 
			text-align: center; 
		}
		.button-group p {
			font-size: 0.9em;
		}
    .content-box {
        max-width: 95%; /* Make the box fit within the screen */
        margin: 20px auto; /* Reduce the margin for smaller screens */
        padding: 30px; /* Reduce padding so it doesn't spill */
    }

    .content-box p {
        font-size: 1em; /* Decrease font size for better fit */
        padding: 5px; /* Adjust padding for smaller screens */
		line-height: 1.4;
    }

    .content-box h1, .content-box h2, .content-box h3 {
        font-size: 1.3em; /* Scale down heading sizes */
    }
	.release {
		padding: 40px;
	}
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
}
/* For smaller desktop monitors 14" screens */
@media only screen and (min-width: 841px) and (max-width: 994px) {
		body.about-page {
			background-size: 100% 100%;
		} 

		.nav-links a {
			padding: 10px 0 10px; 
			font-size: .9em; 
		}
		.nav-links a.active {
			font-size: .9em;	
		}
		.social-media-icons a {
			font-size: 1.0em;
		}
		.logo-link img {
			height: 40px; 
			width: 40px;
			transition: opacity 0.3s ease;  
		}
		.brand-name {
			font-size: 2em;  
			padding: 5px;      
			margin: 80px auto;  
			align-items: center;
		}
		.composer-title {
			font-size: 1.3em;   
			margin: auto;  
			align-items: center;
		}
		.concert-work-page .main-title {
			color: #010301;
			font-size: 1.41em;
			font-weight: bolder;	
			padding: 0px 0px 10px 0;
			text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
		}
		.hero-message {
			width: 56%;  
			padding: 10px;
		}
		.hero-message h1 {
			font-size: 1.3em; 
			margin: 0 auto; 
			padding: 5px;
		}
		.hero-message h2 {
			font-size: 1.8em;
		}
		.hero-message p {
			font-size: 1em;
			line-height: 2;
			margin: 0 auto;
			padding: 10px;
			max-width: 95%;
			width: 95%;
			text-align: center; 
		}
	.release {
		padding: 40px;
	}
	.button-group p {
			font-size: 0.9em;
		}
    .content-box {
        max-width: 95%; /* Make the box fit within the screen */
        margin: 20px auto; /* Reduce the margin for smaller screens */
        padding: 30px; /* Reduce padding so it doesn't spill */
    }

    .content-box p {
        font-size: 1em; /* Decrease font size for better fit */
        padding: 5px; /* Adjust padding for smaller screens */
		line-height: 1.4;
    }

    .content-box h1, .content-box h2, .content-box h3 {
        font-size: 1.3em; /* Scale down heading sizes */
    }

	.next-page-arrow {
		display: none;
    }
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
}
/* For smaller desktop  screens  */
@media only screen and (min-width: 790px) and (max-width: 829px) {
		body.about-page {
			background-size: 100% 100%;
		} 
		 .nav-links a {
				padding: 10px 0 10px; 
				font-size: .8em; 
			}	
		.nav-links a.active {
			font-size: .7em;	
		}
		.social-media-icons a {
			font-size: 0.9em;
		}
		.logo-link img {
			height: 35px;  
			width: 35px;
			transition: opacity 0.3s ease;  
		}
		.brand-name {
			font-size: 2.3em; 
			padding: 5px;     
			margin: 80px 5px 5px 80px;  
		}
		.composer-title {
			font-size: 1.3em;   
			margin: 1px auto 1px 380px; 
			align-items: flex-start;
		}
		.concert-work-page .main-title {
			color: #010301;
			font-size: 1.41em;
			font-weight: bolder;	
			padding: 0px 0px 10px 0;
			text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
		}
		.hero-message {
			width: 56%;  
			padding: 10px;
		}
		.hero-message h1 {
			font-size: 1.3em;
			margin: 0 auto; 
			padding: 5px;
		}
		.hero-message h2 {
			font-size: 1.8em; 
		}
		.hero-message p {
			font-size: 1em;
			line-height: 2;
			margin: 0 auto;
			padding: 10px;
			max-width: 95%;
			width: 95%; 
			text-align: center;
		}
		.button-group p {
			font-size: 0.9em;
		}
		.button-group p {
			font-size: 0.9em;
		}
    .content-box {
        max-width: 95%; /* Make the box fit within the screen */
        margin: 20px auto; /* Reduce the margin for smaller screens */
        padding: 30px; /* Reduce padding so it doesn't spill */
    }
	.release {
		padding: 40px;
	}
    .content-box p {
        font-size: 1em; /* Decrease font size for better fit */
        padding: 5px; /* Adjust padding for smaller screens */
		line-height: 1.4;
    }

    .content-box h1, .content-box h2, .content-box h3 {
        font-size: 1.3em; /* Scale down heading sizes */
    }

	.next-page-arrow {
		display: none;
    }
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
}

/* For smaller desktop  screens  */
@media only screen and (min-width: 451px) and (max-width: 765px) {
		body.about-page {
			background-size: 100% 100%;
		} 
    .nav-links.active {
        right: 0; 
		z-index: 10000;
    }

	.nav-links li {
        width: 100%; 
    }
    .nav-links {
        position: fixed;
        right: -100%; 
        top: 0;
        width: 250px; 
        height: 100vh;
        background-color: #B5D5B4;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center; 
        padding-top: 40px; 
        transition: right 0.3s ease; 
		overflow-y: auto;
    }
		 .nav-links a {
				padding: 10px 0 10px; 
				font-size: .7em; 
			}	
		.nav-links a.active {
			font-size: .6em;	
		}
		.social-media-icons a {
			font-size: 0.8em;
		}
	
	.menu-icon {
		display: flex; 
		position: relative;
		align-items: flex-end; 
		margin: 70px 20px 40px; 
		padding: 10px 0px 40px 0px;
		z-index: 10000; 
		cursor: pointer;
		font-size: 35px;
	}
    .social-media-icons {
        order: 1;  
        width: 100%;  
        justify-content: center;  
        margin-top: auto;  
        margin-bottom: 145px;
        padding: 0px 6px;  
    }
	
		.logo-link img {
			height: 35px;  
			width: 35px;
			transition: opacity 0.3s ease;  
		}
		.brand-name {
			font-size: 2.3em; 
			padding: 5px;     
			margin: 80px 5px 5px 60px;  
		}
		.composer-title {
			font-size: 1.3em;    
			margin: 1px auto 1px 380px; 
			align-items: flex-start;
		}
		.concert-work-page .main-title {
			color: #010301;
			font-size: 1.41em;
			font-weight: bolder;	
			padding: 0px 0px 10px 0;
			text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
		}
	.testimonial-reviewer {
		font-family: 'Georgia', serif;
		font-size: 1em;
		font-style: italic;
		color: #315E2E;
		text-align: right; /* Optional, aligns the reviewer name to the right */
		margin-top: 1em; /* This controls the space above the reviewer */
		margin-bottom: 1.5em; /* This controls the space below the reviewer */
		padding-top: 2.0em;
	}	
		.hero-message {
			width: 56%;  
			padding: 10px;
		}
		.hero-message h1 {
			font-size: 1.1em; 
			margin: 0 auto; 
			padding: 5px;
		}
		.hero-message h2 {
			font-size: 1.3em; 
		}
		.hero-message p {
			font-size: 1em;
			line-height: 1.8;
			margin: 0 auto;
			padding: 10px;
			max-width: 95%;
			width: 95%; 
			text-align: center;
		}	
	.release {
		padding: 40px;
	}
		.parts-columns {
			display: grid;
			grid-template-columns: repeat(2, 1fr); /* Create two equal-width columns */
			gap: 15px; /* Add space between columns */
		}
		.parts-columns .column {
			width: 100%; /* Ensure full width within each grid column */
		}
		.button-group p {
			font-size: 0.9em;
		}
		.button-group p {
			font-size: 0.9em;
		}
		.content-box {
			max-width: 95%; /* Make the box fit within the screen */
			margin: 20px auto; /* Reduce the margin for smaller screens */
			padding: 30px; /* Reduce padding so it doesn't spill */
		}
	.concert-page .hero-message {
		padding: 65px;
		border-radius: 550px;
		border-style: groove;
		box-shadow: 10px 36px 38px 50px rgba(137,164,132,0.10);
	}
	
		.content-box p {
			font-size: 1em; /* Decrease font size for better fit */
			padding: 5px; /* Adjust padding for smaller screens */
			line-height: 1.4;
		}

		.content-box h1, .content-box h2, .content-box h3 {
			font-size: 1.3em; /* Scale down heading sizes */
		}

	.next-page-arrow {
		display: none;
    }
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

}

/*==================================================================LAPTOPS STYLING============================================================*/
/* 17" screen monitor (1920px - 3072px width, 1200px - 1920px height) */
@media only screen and (min-width: 1920px) and (max-width: 3072px) and (min-height: 900px) and (max-height: 1920px) {
		body.about-page {
			background-size: 100% 100%;
		}
		body.about-page {
			background-size: 100% 100%;
		}
    .nav-links a {
        padding: 10px 15px 10px; 
        font-size: 1.5em; 
    }
	.nav-links a.active {
		font-size: 1.8em;	
		padding: 10px;
	}
	.social-media-icons a {
		font-size: 1.5em;
    }
    .brand-name {
        font-size: 4.5em; 
        padding: 5px;       
	    margin: 120px 5px 5px 80px;  
    }
    .composer-title {
     	font-size: 2.5em;   
        margin: 1px auto 1px 660px;  
        align-items: flex-start;
	}
	.hero-message {
		width: 50%;  
		padding: 10px;
	}
	.hero-message h1 {
		font-size: 2.1em; 
		margin: 0 auto; 
		padding: 5px;
	}
	.hero-message h2 {
		font-size: 2.5em; 
	}
	.hero-message p {
		font-size: 1.2em;
		line-height: 2;
		margin: 0 auto;
		padding: 10px;
		max-width: 95%;
		width: 95%; 
		text-align: center; 
	}	
	.release {
		padding: 40px;
	}
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

}

/*=================================================================================iPad Styling=====================================================================*/
/* ************************************************iPad Pro 12.9" in landscape (1366px wide) */
/*@media only screen 
  and (min-width: 1366px) 
  and (max-height: 1024px) 
  and (hover: none) 
  and (pointer: coarse) {
  * {
  outline: 1px solid red;
}*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
		body.about-page {
			background-size: 100% 100%;
		}
	
	.films-page .nav-links a.active {
				font-size: 1em;
	}
		 .nav-links a {
				padding: 10px 0 10px; 
				font-size: 1.5em; 
			}	
		.nav-links a.active {
			font-size: 1.6em;	
		}
		.social-media-icons a {
			font-size: 1.5em;
		}
	.films-page .next-page-arrow {
		font-size: 3em; 
		bottom: 27px; 
	}
		.logo-link img {
		height: 45px;  
		width: 45px;
	}
    .brand-name {
        margin-top: 75px; 
        font-size: 2.5em;  
		color: #16230A;
		text-shadow: 0px -10px 10px rgba(77,146,54,0.47);
    }

    .composer-title {
        margin-top: 1px; 
        font-size: 2em;
        margin: 1px auto 1px 260px; 
		color: #16230A;
		font-weight: 600;
		text-shadow: 0px -5px 8px rgba(77,146,54,0.50);
    }
	.concert-page .hero-message {
		padding: 65px;
		border-radius: 550px;
		border-style: groove;
		box-shadow: 10px 36px 38px 50px rgba(137,164,132,0.10);
	}
    .hero-message {
        margin-top: 10px; 
        width: 50%;       
        font-size: 1em; 
    }

    .hero-message h1 {
        font-size: 1.7em;  
    }
    .hero-message h2 {
        font-size: 2em;  
    }
	.release {
		padding: 40px;
	}
	.button-group p {
		font-size: 1.4em;
		max-width: 100%;
		align-content: center;
		width: 60%; 
		margin: 0 auto; 
		text-align: center; 
	}
    .next-page-arrow {
		font-size: 4em;
        bottom: 75px; 
    }
	.about-page .next-page-arrow {
		font-size: 3em;
        bottom: 65px; 
    }
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	  }	
		/*	.artist-quote {
			  font-size: 2.5em; /* bumped up for better readability */
			}*/
}
/* **************************************************iPad Pro 12.9" in portrait (1024px wide) */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
	/* {
  outline: 1px solid red;
}*/
	body {
	background-size: 100% 100%;
	}
		body.about-page {
			background-size: 100% 100%;
			
		}
	.nav-links a {
        font-size: 0.8em;
    }
	.nav-links a.active {
		font-size: .8em;
	}
	.social-media-icons a {
		font-size: 0.9em;
	}

	.logo-link img {
		height: 40px;  
		width: 40px;
		padding: 0;
	}
    .brand-name {
        margin-top: 75px; 
        font-size: 2.5em;  
		color: #16230A;
		text-shadow: 0px -10px 10px rgba(77,146,54,0.47);
    }

    .composer-title {
        margin-top: 1px; 
        font-size: 2em;
        margin: 1px auto 1px 260px; 
		color: #16230A;
		font-weight: 600;
		text-shadow: 0px -5px 8px rgba(77,146,54,0.50);
    }

    .hero-message {
        margin-top: 10px; 
        width: 50%;       
        font-size: 1em; 
    }

    .hero-message h1 {
        font-size: 1.7em;  
    }
    .hero-message h2 {
        font-size: 2em;  
    }

    .hero-message p {
        font-size: 1.4em; 
    }
	.concert-page .hero-message {
		color: #5F933B; /* Dark green color for visibility */
		font-family: 'Lucida Bright', sans-serif;
		font-style: oblique;
		background: rgba(236,248,236,0.86); /* Semi-transparent background */
		padding: 65px;
		z-index: 1;
		margin: 20px auto; /* Centers the hero-message horizontally within its container */
		border-radius: 550px;
		border-style: groove;
		box-shadow: 10px 36px 38px 50px rgba(137,164,132,0.10);
	}
	.release {
		padding: 40px;
	}
	.concert-page .hero-message h1 {
		font-size: 1.8em; /* Adjust base font size if necessary */
		margin: 0 auto; /* or -bottom: 15px; */
		padding: 5px;
		text-shadow: 10px 36px 38px 50px rgba(93,147,83,0.54);
	}
	.concert-page .hero-message p {
		font-style: italic;
		font-size: 1em;
	}

	
	.about-page .content-box {
		    background-color: rgba(243,255,243,0.54);
		padding: 50px;
	}
	.concert-work-page .main-title {
		color: #010301;
		font-size: 1.8em;
		font-weight: bolder;	
		padding: 0px 0px 10px 0;
	    text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
	}	
	.button-group h3 {
		font-size: 1.1em;
		margin-top: 1px;
		margin-bottom: 2px;
	}
	.button-group p {
		font-size: 1.4em;
		max-width: 100%;
		align-content: center;
		width: 90%; 
		margin: 0 auto; 
		text-align: center; 
	}
    .about-page .next-page-arrow {
        font-size: 3em; 
        bottom: 47px; 
    }
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
		/*	.artist-quote {
			  font-size: 2.5em; /* bumped up for better readability */
			}*/

}
/* ***********************************************iPad 9.7" in landscape */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
	body {
	background-size: 130% 140%; 
	}
    .nav-links a {
        font-size: .8em;
    }
	.nav-links a.active {
		font-size: .8em;
	}
	.films-page .nav-links a.active {
		font-size: .8em;
	}
	.social-media-icons a {
		font-size: 1em;
	}

	.logo-link img {
		height: 40px;  
		width: 40px;
		left: 0px;
		margin-left: 0;
	}
    .brand-name {
        margin-top: 60px; 
		padding: 0 0 0 5px;
        font-size: 1.6em;   
		text-shadow: 0px -20px 10px rgba(77,146,54,0.47);
    }
    .composer-title {
        margin: 0 0 0 85px;
		padding: 0;
        font-size: 1.4em; 
		text-shadow: 0px -10px 8px rgba(77,146,54,0.50);
    }
	.films-page .main-title {
		padding: 0;
		font-size: 2em;
	}
	.concert-work-page .main-title {
		color: #010301;
		font-size: 1.8em;
		font-weight: bolder;	
		padding: 0px 0px 10px 0;
	    text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
	}	
	.films-page .section-title {
		font-size: 1.5em;
	}
    .hero-message {
        margin-top: 10px; 
        width: 58%;       
        font-size: 1.1em; 
    }
    .hero-message h1 {
        font-size: 1.3em;  
    }
    .hero-message h2 {
        font-size: 1.4em; 
    }
    .hero-message p {
        font-size: 1em;  
		line-height: 1.2;
    }
	.concert-page .hero-message {
		color: #5F933B; /* Dark green color for visibility */
		font-family: 'Lucida Bright', sans-serif;
		font-style: oblique;
		background: rgba(236,248,236,0.86); /* Semi-transparent background */
		padding: 55px;
		z-index: 1;
		margin: 20px auto; /* Centers the hero-message horizontally within its container */
		border-radius: 250px;
		border-style: groove;
		box-shadow: 10px 36px 38px 50px rgba(137,164,132,0.10);
	}
	.concert-page .hero-message h1 {
		font-size: 2em; /* Adjust base font size if necessary */
		margin: 0 auto; /* or -bottom: 15px; */
		padding: 5px;
		text-shadow: 10px 36px 38px 50px rgba(93,147,83,0.54);
	}
	.concert-page .hero-message p {
		font-style: italic;
		font-size: 1em;
	}


	.about-page .content-box {
		    background-color: rgba(243,255,243,0.54);
	}
	.release {
		border-radius: 20px;
		padding: 40px;
	}
	.button-group h3 {
		font-size: 1.1em;
		margin-top: 1px;
		margin-bottom: 2px;
	}
	.button-group p {
		font-size: 1em;
		max-width: 70%;
		align-content: center;
		width: 70%; 
		margin: 0 auto;
		text-align: center; 
	}
    .next-page-arrow {
        font-size: 3em; 
        bottom: 27px; 
    }

	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
}

/* *************************************************iPad 9.7" in portrait */
@media only screen and (min-width: 766px) and (max-width: 769px) and (orientation: portrait) {
	body {
	background-size: 125% 140%; 
		overflow-x: hidden;
	}
	    main {
        width: 100%; /* Ensure main container takes full width */
        overflow-x: hidden; /* Prevent horizontal scrolling within main */
        padding: 0; /* Remove any padding that might cause overflow */
        box-sizing: border-box;
    }

    .nav-links.active {
        right: 0;
        z-index: 10000;
    }
    .nav-links {
        position: fixed;
        right: -100%;
        top: 0;
        width: 250px;
        height: 100vh;
        background-color: #B5D5B4;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 45px;
        transition: right 0.3s ease;
        overflow-y: auto;
    }
     .nav-links.active a {
        padding: 10px 15px 10px; 
        font-size: 2em; 
        color: #204A15;
    }
	.nav-links a.active {
        padding: 10px 15px 10px; 
		font-size: 2em; 
	}
	.menu-icon {
		display: flex; 
		position: relative;
		align-items: flex-end; 
		margin: 70px 20px 40px; 
		padding: 10px 0px 40px 0px;
		z-index: 10000; 
		cursor: pointer;
		font-size: 35px; 
	}
    .social-media-icons {
        order: 1; 
        width: 100%;  
        justify-content: center; 
        margin-top: auto;  
        margin-bottom: 260px;
        padding: 0px 6px; 
    }
	.logo-link img {
		height: 40px; 
		width: 40px;
	    left: 0px; 
	}
    .brand-name {
        margin-top: 70px; 
		padding: 0 0 0 5px;
        font-size: 1.5em;   
		text-shadow: 0px -20px 10px rgba(77,146,54,0.47);
    }

    .composer-title {
        margin: 0 0 0 85px;
		padding: 0;
        font-size: 1.3em;
		text-shadow: 0px -15px 8px rgba(77,146,54,0.50);
    }
	.about-page .content-box {
		    background-color: rgba(243,255,243,0.54);
	}
	.content-box {
			margin: 80px auto; 
			padding: 30px;
			max-width: 675px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}
	.concert-work-page .content-box h2 {
		font-size: 1.3em;
	}
	.concert-work-page .content-box h3 {
		font-size: 1.2em;
	}
	.concert-work-page .content-box h4 {
		font-size: 1.1em;
	}
	.concert-work-page .content-box .parts-columns .column ul li {
		margin: 1px 0; /* Adds spacing between instrument names */
		font-size: 1em; /* Slightly increases font size for readability */
	}
    .hero-message {
        margin-top: 10px; 
        width: 58%;      
        font-size: 1em; 
    }
	.concert-page .hero-message {
		color: #5F933B; /* Dark green color for visibility */
		font-family: 'Lucida Bright', sans-serif;
		font-style: oblique;
		background: rgba(236,248,236,0.86); /* Semi-transparent background */
		padding: 55px;
		z-index: 1;
		margin: 20px auto; /* Centers the hero-message horizontally within its container */
		border-radius: 250px;
		border-style: groove;
		box-shadow: 10px 36px 38px 50px rgba(137,164,132,0.10);
	}
	.concert-page .hero-message h1 {
		font-size: 2em; /* Adjust base font size if necessary */
		margin: 0 auto; /* or -bottom: 15px; */
		padding: 5px;
		text-shadow: 10px 36px 38px 50px rgba(93,147,83,0.54);
	}
	.concert-page .hero-message p {
		font-style: italic;
		font-size: 1em;
	}

	
	.films-page .main-title {
		padding: 0;
		font-size: 1.8em;
	}
	.concert-page .main-title {
		font-size: 1.6em;
	}
	.concert-work-page .main-title {
		color: #010301;
		font-size: 1.4em;
		font-weight: bolder;	
		padding: 0px 0px 10px 0;
	    text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
	}
	.films-page .section-title {
		font-size: 1.3em;
		width: 60%;
		text-align: center; 
		margin: 0 auto; 
	}
	.release {
		border-radius: 20px;
		padding: 40px;
	}
    .hero-message h1 {
        font-size: 1.3em; 
    }
    .hero-message h2 {
        font-size: 1.6em; 
    }

    .hero-message p {
        font-size: 1.2em; 
    }
	.button-group h3 {
		font-size: 1.1em;
		margin-top: 1px;
		margin-bottom: 2px;
	}
	.button-group p {
		font-size: 1em;
		max-width: 100%;
		align-content: center;
		width: 85%;
		margin: 0 auto; 
		text-align: center; 
	}
    .about-page .next-page-arrow {
        font-size: 3em; 
        bottom: 47px; 
    }
		  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 48px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
}


/*=================================================================================iPhone Styling=====================================================================*/
/* iPhone 12 Pro Max in landscape */
@media only screen and (min-width: 830px) and (max-width: 840px) and (orientation: landscape) {
	 html, body {
    margin: 0;  /* Remove all default margins */
    padding: 0;  /* Remove all default padding */
    height: 100%;  /* Full height for the viewport */
		overflow-x: hidden; /* Prevent horizontal scrolling */
	}
	footer {
        position: static;  /* Ensure the footer appears after the content */
        width: 100%;
        background-color: rgba(217,243,218,0.85);
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        flex-shrink: 0;  /* Prevent shrinking */
		margin: 0;
    }

    main {
        flex-grow: 1;
		box-sizing: border-box;
		overflow-y: auto; /* Allow vertical scrolling */
		scroll-behavior: smooth; /* Smooth scrolling to encourage address bar hiding */
        width: 100%;
		margin: 0;
		padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        overflow-x: hidden; /* Prevent horizontal scrolling within main */
        min-height: calc(100vh - 100px);  /* Ensure content takes up the full screen minus the footer height */
    }
	  .main-title {
			font-size: 3em;
		  }

    .nav-links.active {
        right: 0;
        z-index: 10000;
    }
    .nav-links {
        position: fixed;
        right: -100%;
        top: 0;
        width: 250px;
        height: 100vh;
        background-color: #B5D5B4;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 45px;
        transition: right 0.3s ease;
        overflow-y: auto;
    }
     .nav-links.active a {
        padding: 10px 15px 10px;
        font-size: 2em; 
        color: #204A15;
    }
	.nav-links a.active {
        padding: 10px 15px 10px; 
		font-size: 2em; 
	}
	.menu-icon {
		display: flex; 
		position: relative;
		align-items: flex-end; 
		margin: 20px 160px 0 0; 
		padding: 10px 0px 40px 0px;
		z-index: 10000; 
		cursor: pointer;
		font-size: 35px; 
	}
    .social-media-icons {
        order: 1;  
        width: 100%;
        justify-content: center;  
        margin-top: auto; 
        margin-bottom: 260px;
        padding: 0px 6px;  
    }
	.logo-link img {
		height: 40px;  
		width: 40px;
	    left: 0px;  
	}
    .brand-name {
        margin: 70px 1px 1px 1px; 
		padding: 0;
        font-size: .9em; 
		text-shadow: 0px -20px 20px rgba(77,146,54,0.47);
		text-align: center
    }
    .composer-title {
		padding: 0;
        font-size: .7em; 
		text-shadow: 0px -15px 8px rgba(77,146,54,0.50);
		position: relative;
    	margin: 1px auto;
		font-weight: 600;
	}
	.films-page .main-title {
		padding: 0;
		font-size: 1.8em;
	}
	.concert-work-page .main-title {
		color: #010301;
		font-size: 1.43em;
		font-weight: bolder;	
		padding: 0px 0px 10px 0;
	    text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
	}
	.films-page .section-title {
		font-size: 1.3em;
		width: 60%; 
		text-align: center; 
		margin: 0 auto; 
	}
    .hero-message {
        width: 70vw;  /* 80% of the viewport width */
        margin-left: 0;  /* Align it with the left margin */
        margin-right: auto;  /* Center alignment on right */
    }
    .hero-message h1 {
        font-size: 1em;  
    }
    .hero-message h2 {
        font-size: 1.3em;  
    }
    .hero-message p {
        font-size: 1em;  
		line-height: 1;
    }
	.about-page .content-box {
		    background-color: rgba(243,255,243,0.54);
	}
	.about-page .content-box p {
		line-height: 1.3;
	}
	.content-wrapper {
        flex-direction: column;  
    }
    .content-left, .content-right {
        width: 100%;  
    }
	.content-box {
		/*margin: 80px auto; 
		padding: 30px;*/
		width: 100vw; /* 100% of the viewport width */
		box-sizing: border-box; /* Include padding and border in the element's width and height */
		/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
	}
	.release {
		border-radius: 20px;
	}
    .album {
        width: 45vw;
        padding-top: 45vw;
    }
    .section:last-of-type .content-wrapper {
        flex-direction: column; 
        align-items: center;
    }
    .section:last-of-type .content-left, .section:last-of-type .content-right {
        width: 100%; 
        max-height: none; 
    }
    .section:last-of-type .content-right iframe {
        height: 600px; 
        width: 100%;
    }
	.button-group h3 {
		font-size: 1.1em;
		margin-top: 1px;
		margin-bottom: 2px;
	}
	.button-group p {
		font-size: 1em;
		max-width: 100%;
		align-content: center;
		width: 85%; 
		margin: 0 auto; 
		text-align: center; 
	}
	.about-page .next-page-arrow {
		font-size: 2.8em;
		bottom: 70px;
	}
	.next-page-arrow {
		font-size: 2.8em;
		bottom: 50px;
	}
}


/* *******************==============================iPhone 13 Pro Max in portrait */
@media only screen and (min-width: 100px) and (max-width: 450px) and (orientation: portrait) {
    .nav-links.active {
        right: 0;
        z-index: 10000;
    }
	 html, body {
    margin: 0;  /* Remove all default margins */
    padding: 0;  /* Remove all default padding */
    height: 100%;  /* Full height for the viewport */
		overflow-x: hidden; /* Prevent horizontal scrolling */
		 align-items: center;
		 flex-direction: column;
		 width: 100%;
		 box-sizing: border-box;
		 max-width: 100vw;
		   background-color: #fafafa !important;

	}
	footer {
        position: static;  /* Ensure the footer appears after the content */
        width: 100%;
        background-color: rgba(217,243,218,0.85);
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        flex-shrink: 0;  /* Prevent shrinking */
		margin: 0;
    }

    main {
        flex-grow: 1;
		box-sizing: border-box;
		overflow-y: auto; /* Allow vertical scrolling */
		scroll-behavior: smooth; /* Smooth scrolling to encourage address bar hiding */
        width: 100%;
		max-width: 100vw;
		margin: 0;
		padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        overflow-x: hidden; /* Prevent horizontal scrolling within main */
        min-height: calc(100vh - 100px);  /* Ensure content takes up the full screen minus the footer height */
    }
/* {
  outline: 1px solid red;
}*/	
	footer {
        position: static;  /* Ensure the footer appears after the content */
        width: 100%;
        background-color: rgba(217,243,218,0.85);
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        flex-shrink: 0;  /* Prevent shrinking */
		margin: 0;
    }
.main-title {
/*  display: flex;*/
  flex-direction: column;
/*  align-items: center;*/
/*  justify-content: center;*/
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
	max-width: 100%;
box-sizing: border-box;
  font-size: 1.6em;
/*  text-align: center;
  line-height: 1.1;*/
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);

/*  margin: 0 auto;*/
	margin-top: 60px;
 /* padding: 12px 8px 0; /* ⬅️ Push down from navbar */
/* max-width: 100%;
  width: 100%;*/

/*  position: relative;
  box-sizing: border-box;
  z-index: 1;*/
}
  .main-title img.avatar {
    width: 60px;
    height: auto;
    /*margin: 0 auto;
    display: block;*/
	  margin-bottom: 10px;
  }
  .release-container {
/*    width: 100%;             /* Full width of screen */
  /*  max-width: 100%;         /* Prevent overflow */
	  width:100vw;
	  max-width: 100vw;
    padding: 0 2vw;         /* Nice mobile padding */
    box-sizing: border-box; /* Include padding in width */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

	.nav-links {
        position: fixed;
        right: -100%;
        top: 0;
        width: 250px;
        height: 100vh;
        background-color: #B5D5B4;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 45px;
        transition: right 0.3s ease;
        overflow-y: auto;
    }
     .nav-links.active a {
        padding: 10px 15px 10px;
        font-size: 2em; 
        color: #204A15;
    }
	.nav-links a.active {
        padding: 10px 15px 10px; 
		font-size: 2em; 
	}
	.menu-icon {
		display: flex; 
		position: relative;
		align-items: flex-end; 
		margin: 20px 160px 0 0; 
		padding: 10px 0px 40px 0px;
		z-index: 10000; 
		cursor: pointer;
		font-size: 35px; 
	}
    .social-media-icons {
        order: 1;  
        width: 100%;
        justify-content: center;  
        margin-top: auto; 
        margin-bottom: 260px;
        padding: 0px 6px; 
    }
	.logo-link img {
		height: 40px;  
		width: 40px;
	    left: 0px;  
	}
    .brand-name {
        margin: 70px 1px 1px 1px; 
		padding: 0;
        font-size: .9em; 
		text-shadow: 0px -20px 20px rgba(77,146,54,0.47);
		text-align: center
    }
    .composer-title {
		padding: 0;
        font-size: .7em; 
		text-shadow: 0px -15px 8px rgba(77,146,54,0.50);
		position: relative;
    	margin: 1px auto;
		font-weight: 600;
	}
	.films-page, .main-title {
		padding: 0;
		font-size: 1.2em;
	}
	.albums-page .main-title{
		font-size: 1.4em;
	    text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
	}
	.concert-page .main-title {
		font-size: 1.4em;
		line-height: 1.2;
		padding: 0;
	}
	.concert-work-page .main-title {
		color: #010301;
		font-size: 1.43em;
		font-weight: bolder;	
		padding: 0px 0px 10px 0;
	    text-shadow: 3px 3px 5px rgba(101,238,90,0.52); /* Add a shadow for visibility */
	}
	.testimonial-section blockquote {
		color: #030500; /* Apply your dark green color */
		padding-bottom: 30px;
	}
	.concert-page .content-box p{
		font-size: 1em;
		padding: 9;
	}
	.films-page .section-title {
		font-size: 1em;
		width: 60%; 
		text-align: center; 
		margin: 0 auto; 
	}
	.albums-page .composer-note h2 {
		font-size: 1em;
		margin: 0 auto;
		align-items: center;
		font-style: oblique;
		background-color: rgba(243,255,243,0.54);
		width: 70%;
		padding: 20px;
	}
	.release, .release1, .release2, .release3, .release4 h2 {
		font-size: 1em;
		border-radius: 20px;
	}
    .hero-message {
        margin-top: 10px; 
        width: 99%;       
        font-size: 1em;  
    }
    .hero-message h1 {
        font-size: 1em;  
    }
    .hero-message h2 {
        font-size: 1.3em;  
    }
    .hero-message p {
        font-size: 1em;  
		line-height: 1;
    }
	 .concert-page .hero-message h1 {
        font-size: 2em;  
    }

	.about-page .content-box {
		    background-color: rgba(243,255,243,0.54);
	}
	.about-page .content-box p {
		line-height: 1.3;
	}
	.concert-page, .films-page .content-box p {
		font-size: .9em;
		line-height: 1;
		padding: 9;
	}
	.concert-work-page .content-box h2 {
		font-size: 1.2em;
	}
	.concert-work-page .content-box h3 {
		font-size: 1.1em;
	}
	.concert-work-page .content-box h4 {
		font-size: 1em;
	}
	
	.concert-page .content-box .large-ensemble p {
		font-size: .9em;
		line-height: 1;
		padding-top: 0;
		padding-bottom: 0;
	}
	.concert-work-page .content-box h2 {
		font-size: 1.2em;
	}
	.concert-work-page .content-box h3 {
		font-size: 1.1em;
	}
	.concert-work-page .content-box h4 {
		font-size: 1em;
	}
	.concert-work-page .content-box .parts-columns .column ul li {
		margin: .9px 0; /* Adds spacing between instrument names */
		font-size: 1em; /* Slightly increases font size for readability */
	}
	.content-box {
		/*margin: 80px auto; 
		padding: 30px;*/
		width: 100vw; /* 100% of the viewport width */
		box-sizing: border-box; /* Include padding and border in the element's width and height */
		/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
	}
	.testimonial-reviewer {
		font-family: 'Georgia', serif;
		font-size: 1em;
		font-style: italic;
		color: #315E2E;
		text-align: right; /* Optional, aligns the reviewer name to the right */
		margin-top: 1.5em; /* This controls the space above the reviewer */
		margin-bottom: 1.5em; /* This controls the space below the reviewer */
		padding-top: 2.0em;
	}	
	.content-wrapper {
        flex-direction: column;  
    }
    .content-left, .content-right {
        width: 100%;  
    }
    .album {
        width: 45vw;
        padding-top: 45vw;
    }
    .section:last-of-type .content-wrapper {
        flex-direction: column; 
        align-items: center;
    }
    .section:last-of-type .content-left, .section:last-of-type .content-right {
        width: 100%; 
        max-height: none; 
    }
    .section:last-of-type .content-right iframe {
        height: 600px; 
        width: 100%;
    }
    .parts-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Create two equal-width columns */
        gap: 15px; /* Add space between columns */
    }
    .parts-columns .column {
        width: 100%; /* Ensure full width within each grid column */
    }
	.composition-section h2 {
		font-size: 1.6em;
	}
	.button-group h3 {
		font-size: 1.1em;
		margin-top: 1px;
		margin-bottom: 2px;
	}
	.button-group p {
		font-size: 1em;
		max-width: 100%;
		align-content: center;
		width: 85%; 
		margin: 0 auto; 
		text-align: center; 
	}
	.about-page .next-page-arrow {
		font-size: 2.8em;
		bottom: 70px;
	}
	.next-page-arrow {
		font-size: 2.8em;
		bottom: 50px;
	}
	  .streaming-links img {
		max-width: 80px;
	  }
	  .reelcrafter iframe {
		height: 420px !important;
	  }
	  #scrollTopBtn {
		bottom: 30px;
		left: 15px;
	  }
	  .platform-badges img {
		height: 50px !important;
		margin: 10px auto;
		display: block;
	  }

	  .platform-badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	  }
}

/* iPhone 13/12 in portrait
@media only screen and (min-width: 375px) and (max-width: 400px) and (orientation: portrait) {
    .nav-links.active {
        right: 0;
        z-index: 10000;
    }
	 html, body {
    margin: 0; 
    padding: 0;
	height: 100%;  
	overflow-x: hidden; 
	}
	footer {
        position: static;  
        width: 100%;
        background-color: rgba(217,243,218,0.85);
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        flex-shrink: 0; 
		margin: 0;
    }

    main {
        flex-grow: 1;
		box-sizing: border-box;
		overflow-y: auto; 
		scroll-behavior: smooth; 
        width: 100%;
		margin: 0;
		padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        overflow-x: hidden; 
        min-height: calc(100vh - 100px); 
    }
	
	footer {
        position: static;  
        width: 100%;
        background-color: rgba(217,243,218,0.85);
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        flex-shrink: 0; 
		margin: 0;
    }
	
    .nav-links {
        position: fixed;
        right: -100%;
        top: 0;
        width: 250px;
        height: 100vh;
        background-color: #B5D5B4;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 45px;
        transition: right 0.3s ease;
        overflow-y: auto;
    }
     .nav-links.active a {
        padding: 10px 15px 10px;
        font-size: 2em; 
        color: #204A15;
    }
	.nav-links a.active {
        padding: 10px 15px 10px; 
		font-size: 2em; 
	}
	.menu-icon {
		display: flex; 
		position: relative;
		align-items: flex-end; 
		margin: 20px 160px 0 0; 
		padding: 10px 0px 40px 0px;
		z-index: 10000; 
		cursor: pointer;
		font-size: 35px; 
	}
    .social-media-icons {
        order: 1;  
        width: 100%;
        justify-content: center;  
        margin-top: auto; 
        margin-bottom: 260px;
        padding: 0px 6px; 
    }
	.logo-link img {
		height: 40px;  
		width: 40px;
	    left: 0px;  
	}
    .brand-name {
        margin: 70px 1px 1px 1px; 
		padding: 0;
        font-size: .9em; 
		text-shadow: 0px -20px 20px rgba(77,146,54,0.47);
		text-align: center
    }
    .composer-title {
		padding: 0;
        font-size: .7em; 
		text-shadow: 0px -15px 8px rgba(77,146,54,0.50);
		position: relative;
    	margin: 1px auto;
		font-weight: 600;
	}
	.films-page, .main-title {
		padding: 0;
		font-size: 1.2em;
	}
	.albums-page .main-title{
		font-size: 1.4em;
	    text-shadow: 3px 3px 5px rgba(101,238,90,0.52); 
	}
	.concert-page .main-title {
		font-size: 1.4em;
		line-height: 1.2;
		padding: 0;
	}
	.concert-work-page .main-title {
		color: #010301;
		font-size: 1.43em;
		font-weight: bolder;	
		padding: 0px 0px 10px 0;
	    text-shadow: 3px 3px 5px rgba(101,238,90,0.52); 
	}

	.concert-page .content-box p{
		font-size: 1em;
		padding: 9;
	}
	.films-page .section-title {
		font-size: 1em;
		width: 60%; 
		text-align: center; 
		margin: 0 auto; 
	}
	.albums-page .composer-note h2 {
		font-size: 1em;
		margin: 0 auto;
		align-items: center;
		font-style: oblique;
		background-color: rgba(243,255,243,0.54);
		width: 70%;
		padding: 20px;
	}
	.release, .release1, .release2, .release3, .release4 h2 {
		font-size: 1em;
		border-radius: 20px;
	}
    .hero-message {
        margin-top: 10px; 
        width: 99%;       
        font-size: 1em;  
    }
    .hero-message h1 {
        font-size: 1em;  
    }
    .hero-message h2 {
        font-size: 1.3em;  
    }
    .hero-message p {
        font-size: 1em;  
		line-height: 1;
    }
	 .concert-page .hero-message h1 {
        font-size: 2em;  
    }

	.about-page .content-box {
		    background-color: rgba(243,255,243,0.54);
	}
	.about-page .content-box p {
		line-height: 1.3;
	}
	.concert-page, .films-page .content-box p {
		font-size: .9em;
		line-height: 1;
		padding: 9;
	}
	.concert-work-page .content-box h2 {
		font-size: 1.2em;
	}
	.concert-work-page .content-box h3 {
		font-size: 1.1em;
	}
	.concert-work-page .content-box h4 {
		font-size: 1em;
	}
	
	.concert-page .content-box .large-ensemble p {
		font-size: .9em;
		line-height: 1;
		padding-top: 0;
		padding-bottom: 0;
	}
	.concert-work-page .content-box h2 {
		font-size: 1.2em;
	}
	.concert-work-page .content-box h3 {
		font-size: 1.1em;
	}
	.concert-work-page .content-box h4 {
		font-size: 1em;
	}
	.concert-work-page .content-box .parts-columns .column ul li {
		margin: .9px 0; 
		font-size: 1em; 
	}
	.content-box {

		width: 100vw; 
		box-sizing: border-box; 
	}
	.content-wrapper {
        flex-direction: column;  
    }
    .content-left, .content-right {
        width: 100%;  
    }
    .album {
        width: 45vw;
        padding-top: 45vw;
    }
    .section:last-of-type .content-wrapper {
        flex-direction: column; 
        align-items: center;
    }
    .section:last-of-type .content-left, .section:last-of-type .content-right {
        width: 100%; 
        max-height: none; 
    }
    .section:last-of-type .content-right iframe {
        height: 600px; 
        width: 100%;
    }
    .parts-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
    }
    .parts-columns .column {
        width: 100%;
    }
	.composition-section h2 {
		font-size: 1.6em;
	}
	.button-group h3 {
		font-size: 1.1em;
		margin-top: 1px;
		margin-bottom: 2px;
	}
	.button-group p {
		font-size: 1em;
		max-width: 100%;
		align-content: center;
		width: 85%; 
		margin: 0 auto; 
		text-align: center; 
	}
	.about-page .next-page-arrow {
		font-size: 2.8em;
		bottom: 70px;
	}
	.next-page-arrow {
		font-size: 2.8em;
		bottom: 50px;
	}
}



/* iPhone 13/12 in portrait 
@media only screen and (min-width: 375px) and (max-width: 400px) and (orientation: portrait) {
    /* Styles for iPhone 13/12 in portrait 
}
/* iPhone SE in landscape 
@media only screen and (min-width: 667px) and (max-width: 750px) and (orientation: landscape) {
    /* Styles for iPhone SE in landscape 
}
/* iPhone SE in portrait 
@media only screen and (min-width: 320px) and (max-width: 375px) and (orientation: portrait) {
    /* Styles for iPhone SE in portrait 
}
/* 14" Laptops (1920px - 2560px width, 1080px - 1440px height) 
@media only screen and (min-width: 1920px) and (max-width: 2560px) and (min-height: 1080px) and (max-height: 1440px) {
    /* Styles for 14" laptops need to test 
}
/* 13" Laptops (1280px - 2560px width, 800px - 1600px height) 
@media only screen and (min-width: 1280px) and (max-width: 2560px) and (min-height: 800px) and (max-height: 1600px) {
    /* Styles for 13" laptops need to test }