/* Global reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    .profile {
    text-align: center;
    margin-top: 20px;
}
/* Body styles */
body {
    /* Styles for the entire page */
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a); /* Base dark gradient */
    background: #0a0a0a; 
    background-size: 200% 200%; /* Set the background size for animation */
    animation: waveFlow 10s ease-in-out infinite; /* Animation for smooth background effect */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Start at the top of the page */
    align-items: center;
    min-height: 100vh; /* Ensure the body stretches the entire viewport height */
    margin: 0;
    padding-top: 50px; /* Prevent overlap with the fixed notch */
    color: rgba(255, 255, 255, 0.85); /* Text color */
    overflow-y: auto; /* Enable vertical scrolling */
}


.animated-bg {
    background: 
        linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        linear-gradient(135deg, crimson, firebrick);
    background-size: 400% 400%, 200% 200%;
    animation: waveFlow 5s infinite ease-in-out, waveFlowReverse 10s infinite ease-in-out;
}

@keyframes waveFlowReverse {
    0% { background-position: 100% 100%; }
    50% { background-position: 0% 50%; }
    100% { background-position: 100% 100%; }
}
.social-link {
    text-decoration: none; /* Remove default underline */
    display: block; /* Make the entire box clickable */
    margin: 10px auto; /* Maintain spacing */
}

.social-link:hover .social-box {
    transform: scale(1.05); /* Retain hover effect from the box */
}
.profile {
    text-align: center;
    margin-top: 20px;
}
.tagline {
    display: inline-block;
    padding: 2px 10px; /* Tiny rectangle dimensions */
    background-color: rgba(255, 0, 0, 0.2); /* Subtle red background */
    color: darkred;
    border: 1px solid darkred; /* Thin border */
    border-radius: 10px; /* Curved edges */
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem; /* Small text */
    font-weight: 500;
    margin-top: 5px;
    position: relative;
    left: -87px; /* Align to the left of the name */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    transition: transform 0.3s ease;
}
.tagline:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}
/* Profile Section */
.profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

/* Circular Profile Picture with Glow Effect */
.profile-picture {
    width: 300px; /* Size of the profile picture */
    height: 300px;
    border-radius: 50%; /* Circular shape */
    border: 0.5px solid red; /* Base red border */
    overflow: hidden; /* Ensures the image stays within the circle */
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.8); /* Red glow with a subtle white tint */
    animation: glow-effect 2s infinite alternate ease-in-out; /* Pulsating glow effect */
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps the image proportions correct */
}
/* Gradient Name */
.profile-name {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: 20px;
    position: relative;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.profile-name::before {
    content: 'Pratham Gurav';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, darkred, crimson, black);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: darkred-gradient-shift 5s infinite ease-in-out;
}

@keyframes darkred-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* Notch styles */
.notch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(139, 0, 0, 0.6);  /* Dark red with translucent effect */
    backdrop-filter: blur(10px);  /* Glass-like effect */
    display: flex;
    justify-content: flex-start;  /* Align text to the left */
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    z-index: 10;  /* Ensure it's above other content */
}
/* Styles for desktop only */
@media (min-width: 768px) {

    .social-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(139, 0, 0, 0.6);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
        border-radius: 15px;
        padding: 10px 20px;
        margin: 15px auto;
        width: 700px; /* Adjusted for larger screens */
        height: 60px;
    }

    /* Additional desktop-specific styles */
    .container {
        justify-content: flex-start;
        padding-top: 50px;
    }
    
}
@media (min-width: 768px) {
    
    .profile-section {
        flex-direction: row; /* Arrange elements horizontally on desktop */
        justify-content: center; /* Center items horizontally */
        gap: 20px; /* More space between image and text */
    }

    /* Ensure Name and Tagline stay in the correct order */
    .profile-name {
        font-size: 48px; /* Larger font size for the name */
    }

   /* Adjust tagline position on larger screens */
    .tagline {
        font-size: 24px;
        top: 57px; /* Adjust the Y position for desktop */
         transform: translateX(-155%); /* Keep it horizontally centered at 60% */
         
    }
    .tagline:hover {
     none
    }
}

/* Adjusting the position of the menu button */
.menu-button {
    position: absolute;
    right: 20px;  /* Adjusts the position to the right */
    font-size: 2rem;
    color: white;
    cursor: pointer;
}

.notch-text {
    font-family: 'Dancing Script', cursive;  /* Cursive font */
    font-size: 2rem;
    font-weight: bold;
    color: white;
    letter-spacing: 2px;
}

/* Menu Box Styling */
.menu {
    position: fixed; /* Fixed in place while scrolling */
    top: 60px; /* Adjust based on notch height */
    right: 16px; /* Default position (aligned to the right) */
    transform: translateX(100%); /* Start off-screen to the right */
    background: rgba(0, 0, 0, 0.1); /* Semi-transparent background to allow blur */
    backdrop-filter: blur(22px); /* Stronger blur for a glassier effect */
    border-radius: 15px;
    border: 2px solid rgba(139, 0, 0, 0.7); /* Semi-transparent border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); /* Enhanced shadow for depth */
    z-index: 10; /* Ensure the menu stays on top */
    width: 250px;
    padding: 15px;
    opacity: 0; /* Start invisible */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for slide and fade */
}

/* When menu is active, display it with animation */
.menu.active {
    transform: translateX(0); /* Slide into view */
    opacity: 1; /* Fully visible */
}

/* Menu List Styling */
.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    margin-bottom: 0; /* Remove bottom margin for a cleaner look */
    padding: 10px 0;
    text-align: center;
    border-bottom: 2px solid rgba(139, 0, 0, 0.7); /* Dark red border to divide items */
}

.menu ul li:last-child {
    border-bottom: none; /* Remove border from last item to avoid extra line */
}

.menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    display: block;
    padding: 8px;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.menu ul li a:hover {
    background: rgba(255, 0, 0, 0.5); /* Red hover effect */
}

/* Keyframes for Slide-in and Slide-out */
@keyframes slideIn {
    0% {
        transform: translateX(100%); /* Start off-screen */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* Fully visible */
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0); /* Fully visible */
        opacity: 1;
    }
    100% {
        transform: translateX(100%); /* Move off-screen */
        opacity: 0;
    }
}
/* Main content styles */
.container {
    text-align: center;
    z-index: 5; /* Ensure it's above the background */
    height: 100vh;  /* Full screen height */
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size: 3rem;
    letter-spacing: 2px;
    transition: transform 0.3s ease;
    text-align: center;
}

h1:hover {
    transform: scale(1.1);
}

/* About Me Section */
.about-me {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px; /* Extra spacing below About Me */
    padding: 20px;
    z-index: 5; /* Ensure it's above the background */
}

.about-me h2 {
    font-family: 'Dancing Script', cursive;  /* Cursive font for About Me heading */
    font-size: 2.5rem;
    color: darkred;
    animation: fadeInUp 1.5s ease; /* Heading animation */
}

.about-me p {
    font-family: 'Arial', sans-serif;
    font-size: 1.2rem;
    background: linear-gradient(to right, grey, lightgrey);
    -webkit-background-clip: text;
    color: transparent;
    line-height: 1.8;
    letter-spacing: 1px;
}

/* Pics Section */
.pics-section {
    width: 100%;
    margin-top: 30px;
    padding: 10px 20px; /* Padding for better alignment */
}

.pics-section h2 {
    font-family: 'Dancing Script', cursive; /* Cursive font for Pics heading */
    font-size: 2.5rem;
    color: darkred;
    text-align: center;
    margin-bottom: 20px;
}

/* Container for images */
.pics-container {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Spacing between images */
    overflow-x: auto; /* Enable horizontal scrolling */
    padding: 10px 0; /* Space around the images */
    scrollbar-width: thin; /* Firefox scrollbar */
}

.pics-container img {
    width: 250px; /* Fixed width for uniform size */
    height: 180px; /* Fixed height for uniform size */
    object-fit: cover; /* Ensure the image fits without distortion */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Add some depth */
    flex-shrink: 0; /* Prevent images from shrinking */
}

/* Custom scrollbar for horizontal scrolling */
.pics-container::-webkit-scrollbar {
    height: 8px; /* Smaller scrollbar for horizontal scrolling */
}

.pics-container::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 0, 0.7); /* Red scrollbar */
    border-radius: 10px;
}

.pics-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3); /* Dark track */
    border-radius: 10px;
}
/* Fallback scrollbar styling */
.pics-container {
    scrollbar-color: rgba(255, 0, 0, 0.7) rgba(0, 0, 0, 0.3); /* Thumb color, Track color */
    scrollbar-width: thick; /* Makes the scrollbar smaller in non-WebKit browsers */
}
@media (min-width: 768px) 
{
    .pics-container {
        display: flex; /* Ensure a horizontal layout */
        flex-wrap: nowrap; /* Prevent wrapping to a new row */
        overflow-x: auto; /* Enable horizontal scrolling */
        gap: 20px; /* Space between images */
        padding: 20px;
        justify-content: flex-start; /* Align items to the left */
    }

    .pics-container img {
        width: 360px; /* Larger size for desktop */
        height: 264px;
        flex-shrink: 0; /* Prevent images from shrinking */
    }

    /* Optional: Styling the scrollbar for better UI */
    .pics-container::-webkit-scrollbar {
        height: 10px; /* Horizontal scrollbar height */
    }

    .pics-container::-webkit-scrollbar-thumb {
        background: rgba(255, 0, 0, 0.7); /* Scrollbar color */
        border-radius: 10px;
    }

    .pics-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.2); /* Track color */
    }
}
/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 20px;
    height: 20px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 0, 0.7);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    transition: background 0.3s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 0, 0, 0.9);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}


/* My Socials Section */
.my-socials {
    text-align: center;
    margin: 50px 0;
    padding: 20px;
}

.my-socials h2 {
    font-family: 'Dancing Script', cursive; /* Same style as About Me heading */
    font-size: 2.5rem;
    color: darkred;
    animation: fadeInUp 1.5s ease; /* Fade-in animation */
    margin-bottom: 20px;
}

.social-box {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align content to the left */
    background: rgba(255, 255, 255, 0.1); /* Glassy effect */
    backdrop-filter: blur(10px); /* Blurry glass effect */
    border: 2px solid rgba(139, 0, 0, 0.6); /* Dark red border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); /* Shadow for depth */
    border-radius: 15px; /* Curvy edges */
    padding: 10px 100px; /* Adjust padding as desired */
    margin: 15px auto; /* Increased space between boxes */
    width: 700px; /* Box width */
    height: 60px; /* Box height */
    position: relative; /* Relative positioning for finer control */
    transition: transform 0.3s ease, background 0.3s ease;
}

.social-box img {
    width: 35px; /* Logo size */
    height: 35px;
    position: absolute; /* Absolute positioning */
    left: 20px; /* Move to the left side of the box */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Align perfectly in the center vertically */
    object-fit: contain;
}

.social-box span {
    margin-left: 0px; /* Space between logo and text */
    font-size: 1.2rem; /* Slightly smaller text */
    font-family: 'Poppins', sans-serif; /* Cool modern font */
    color: rgba(255, 255, 255, 0.9); /* Slightly lighter text for better contrast */
    letter-spacing: 0.5px;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .social-box {
        width: 90%; /* Full width for mobile */
        height: 50px; /* Shorter height */
    }

    .social-box img {
        width: 30px;
        height: 30px;
        left: 15px; /* Adjust for smaller screens */
    }

    .social-box span {
        font-size: 1rem; /* Smaller text for mobile */
    }
}

.social-box img {
    width: 35px; /* Logo size */
    height: 35px;
    margin-right: 10px; /* Space between logo and text */
    object-fit: contain;
}

.social-box span {
    font-size: 1.2rem; /* Slightly smaller text */
    font-family: 'Poppins', sans-serif; /* Cool modern font */
    color: rgba(255, 255, 255, 0.9); /* Slightly lighter text for better contrast */
    letter-spacing: 0.5px;
}

.social-box:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    background: rgba(255, 0, 0, 0.3); /* Red tint on hover */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .social-box {
        width: 90%; /* Full screen width for mobile */
        height: 50px; /* Shorter height */
    }

    .social-box img {
        width: 30px;
        height: 30px;
    }

    .social-box span {
        font-size: 1rem; /* Smaller text for mobile */
    }
}

/* Responsive Design for Desktop */
@media (min-width: 769px) {
    .social-box {
        width: 100%; /* Slightly longer for desktop */
        height: 60px; /* Maintain proportional height */
    }
}
/* General Styling for My Projects Section */
#my-projects {
  padding: 80px 20px;
  text-align: center;
}

#my-projects h2 {
  font-family: "Lucida Handwriting", Cursive, sans-serif;
  font-size: 3rem;
  color: darkred;
  margin-bottom: 40px;
}

/* Projects Container */
.projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 40px;
  justify-items: center;
  border-radius: 12px;
}

/* Project Card */
.project-card {
  border: 2px solid transparent;
  border-image: linear-gradient(to bottom right, #ff3333, #770000) 1;
  border-radius: 16px;
  padding: 30px;
  width: 320px;
  height: 220px;
  position: relative;
  cursor: pointer;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: none;
}

.project-card:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px #ff3333, 0 0 24px #770000;
}

.project-card h3 {
  color: #ff4444;
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-shadow: 0 0 4px #ff3333;
}

.project-card p {
  color: #e0e0e0;
  font-size: 1rem;
  line-height: 1.5;
}

.project-card .tag {
  position: absolute;
  bottom: 20px;
  right: 20px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.9rem;
  color: #cccccc;
  text-shadow: none;
}
/* Add glowing effect for when the card is near the center */
.project-card.in-view {
  transform: scale(1.1);
  box-shadow: 0 0 16px #ff3333, 0 0 24px #770000;
}

/* Responsiveness */
@media (max-width: 768px) {
  #my-projects h2 {
    font-size: 2.5rem;
  }

  .project-card {
    width: 280px;
    height: 200px;
  }

  .project-card h3 {
    font-size: 1.3rem;
  }

  .project-card p {
    font-size: 0.9rem;
  }
}
/* Prevent Horizontal Overflow */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent unwanted horizontal scrolling */
}

/* Scroll Animation */
.scroll-hidden {
  opacity: 0;
  transform: translateY(40px); /* Subtle vertical translation for animation */
  transition: opacity 5s ease-out, transform 5s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth and slow animation */
}

.scroll-visible {
  opacity: 1;
  transform: translateY(0); /* Reset to original position */
}

/* Modal */
#project-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: opacity 0.5s ease;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  text-align: left;
  position: relative;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.modal-content h3 {
  color: #ff4444;
}

.modal-content p {
  margin: 20px 0;
  color: #e0e0e0;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1.5rem;
  color: #ff4444;
  cursor: pointer;
}

#view-project {
  background: transparent; /* No background color */
  color: #ff3333; /* Dark red text color */
  border: 2px solid #ff3333; /* Dark red border */
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

#view-project:hover {
  background: #ff3333; /* Dark red background on hover */
  color: #fff; /* White text on hover */
  border-color: #ff6666; /* Lighter red border on hover */
}

.masterpiece-heading {
    font-family: 'Dancing Script', cursive;
    color: darkred;
    text-align: center;
    font-size: 40px; /* Font size remains the same */
    margin-bottom: 30px; /* Spacing remains the same */
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.masterpiece-image {
    width: 350px; /* Slightly smaller width */
    height: 350px; /* Slightly smaller height (1:1 ratio) */
    border: 4px solid darkred; /* Border remains the same */
    border-radius: 25px; /* Curved edges remain the same */
    transition: box-shadow 0.3s ease-in-out;
}

.masterpiece-image:hover {
    box-shadow: 0 0 20px darkred; /* Glow effect remains the same */
    cursor: pointer;
}
.masterpiece-art {
        font-family: 'Arial', sans-serif;
    font-size: 1.2rem;
    background: grey;
    opacity: 0.25;
    -webkit-background-clip: text;
    color: transparent;
    line-height: 1.8;
    letter-spacing: 1px
}

/* Transition Overlay */
.transition-overlay {
  position: fixed;
  bottom: 0; /* Start at the bottom of the screen */
  left: 50%; /* Center horizontally */
  width: 0;
  height: 0;
  background: #330000; /* Very dark red */
  border-radius: 50% 50% 0 0; /* Top part is a circle, bottom is flat */
  transform: translateX(-50%); /* Center horizontally */
  z-index: 9999;
  transition: 
    width 4s cubic-bezier(0.25, 1, 0.5, 1),  /* Slower transition */
    height 4s cubic-bezier(0.25, 1, 0.5, 1),
    bottom 4s cubic-bezier(0.25, 1, 0.5, 1);  /* Increased duration */
}

/* Active State */
.transition-overlay.active {
  bottom: 0; /* Stay fixed at the bottom */
  width: 300vmax; /* Ensure it grows enough to cover the screen */
  height: 200vmax; /* Expand upwards */
  border-radius: 50% 50% 0 0; /* Maintain hybrid shape */
}

/* Reverse Animation (Page Entry) */
.transition-overlay.reverse {
  bottom: 0;
  width: 300vmax;
  height: 200vmax;
  animation: shrinkHybrid 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* Reduced to 1.5 seconds */
}

/* Shrinking Animation */
@keyframes shrinkHybrid {
  0% {
    width: 300vmax;
    height: 200vmax;
  }
  100% {
    width: 0;
    height: 0;
  }
}
.faq-section {
    max-width: 800px;
    margin: 50px auto;
    padding: 0 20px;
}

.faq-heading {
    text-align: center;
    color: darkred;
    font-family: 'Dancing Script', cursive; 
    margin-bottom: 40px;
    font-size: 38px;
}

.faq-item {
    cursor: pointer;
    padding: 15px 10px;
    position: relative;
}

.faq-question {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    color: darkgrey;
}

.faq-question .arrow {
    margin-right: 15px;
    transition: transform 0.3s ease;
    color: darkred;
    font-size: 24px;
}

.faq-answer {
    margin-top: 20px; /* Added more space between question and answer */
    font-size: 16px;
    background: linear-gradient(to right, #7f7f7f, #bfbfbf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.8;
    display: none;
    overflow: hidden;
    padding-left: 30px; /* Indent the answer for better readability */
    animation: expand 0.3s ease;
}
/* Media query for desktop screens */
@media (min-width: 768px) {
    .faq-answer {
        font-size: 10px; /* Smaller font size for desktop */
        line-height: 1.4; /* Adjust line height accordingly */
    }
}

/* Expanded animation for the answer */
@keyframes expand {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 300px; /* Enough space to show full answer */
        opacity: 1;
    }
}

hr {
    border: 0;
    height: 1px;
    background: darkred;
    margin: 10px 0;
}

/* Animation for arrow and answer */
.faq-item.active .arrow {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    display: block;
}
/* Feedback Section Styles */
.feedback-section {
    text-align: center;
    margin: 50px 0;
    padding: 20px;
}

.feedback-heading {
    font-family: 'Dancing Script', cursive; 
    font-size: 35px;
    color: darkred;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.char-count {
    text-align: right;
    font-size: 14px;
    margin-bottom: 5px;
    color: darkred;
}

textarea {
    width: 90%;
    max-width: 600px; /* Limit the maximum width */
    height: 150px; /* Default height */
    max-height: 300px; /* Limit maximum height to allow scrolling */
    padding: 10px; /* Add inner spacing for better readability */
    border: 2px solid darkred; /* Dark red border */
    border-radius: 8px; /* Rounded corners */
    font-size: 16px; /* Comfortable font size */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: none; /* Disable resizing to prevent layout issues */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    background: transparent; /* Plain background for better readability */
    color: darkgrey; /* Text color */
    box-sizing: border-box; /* Include padding in the dimensions */
    outline: none; /* Remove focus outline */
}
textarea::-webkit-scrollbar {
    width: 8px; /* Set the width of the scrollbar */
}

textarea::-webkit-scrollbar-track {
    background: transparent; /* Background of the scrollbar track */
    border-radius: 8px; /* Rounded corners for the track */
}

textarea::-webkit-scrollbar-thumb {
    background: darkred; /* Color of the scrollbar thumb */
    border-radius: 8px; /* Rounded corners for the thumb */
}

textarea::-webkit-scrollbar-thumb:hover {
    background: #b30000; /* Darker red when hovered */
}
/* Name Section Styling */
.name-section {
    margin-bottom: 15px;
}

.name-section label {
    font-size: 16px;
    color: darkred;
    margin-right: 10px;
}

.name-section input {
    padding: 10px;
    border: 2px solid darkred;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: darkgrey;
    outline: none;
    background-color: transparent;
    width: 90%;
    max-width: 600px;
}
textarea:focus {
    border-color: #990000;
    box-shadow: 0 0 8px rgba(153, 0, 0, 0.5);
}

.send-button {
    background: transparent; /* No background color */
  color: #ff3333; /* Dark red text color */
  border: 2px solid Darkred; /* Dark red border */
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.send-button:hover {
  background: Darkred; /* Dark red background on hover */
  color: #fff; /* White text on hover */
  border-color: Darkred; /* Lighter red border on hover */
}
.copyright {
    font-size: 12px;
    margin-top: 30px;
    color: gray;
}