/* formatting for the outermost container */
.site-container {
    max-width: 1000px;   /* maximum width for large screens */
    margin: 0 auto;      /* center horizontally */
    padding: 0 1rem;     /* reduced horizontal padding */
    box-sizing: border-box;
  }
  
  /* Responsive adjustments for tablets */
  @media (max-width: 768px) {
    .site-container {
      padding: 0 0.8rem;  /* slightly smaller padding */
    }
  }
  
  /* Responsive adjustments for mobile */
  @media (max-width: 480px) {
    .site-container {
      padding: 0 0.5rem;  /* minimal padding for phones */
    }
  }

  /* formatting for the outermost container end */

  body {
    background-color: #1A2A3A;  /* a nice blue; you can change the hex code */
    color: #F5F5F5;               /* optional: make default text white for contrast */
    font-family: Arial, sans-serif; /* keep font consistent */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
/* ============================= */
/* Header Section */
/* ============================= */

    header h1 {
        font-family: 'Great Vibes', cursive;
        font-size: 2.2rem;      /* adjust as needed */
        color: white;
    }
  
    header nav a {
        font-family: 'Arial', sans-serif; /* keep nav readable */
        margin-left: 1.5rem;
        text-decoration: underline;
        color: white;
    }

    header {
        /* background-color: #FFD700; */
        color: #F5F5F5;
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
/*   
  header nav a {
    color: #FFFFFF;
    margin-left: 1rem;
    text-decoration: none;
  } */
  
 /* ============================= */
/* Hero Wrapper (Background & Overlay) */
/* ============================= */
#hero-wrapper {
    background-image: url('images/vertical\ picture.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
  }
  
  /* Overlay for readability */
  #hero-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 0;
  }
  
  /* ============================= */
  /* Header (Transparent over image) */
  /* ============================= */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: relative;  /* above overlay */
    z-index: 1;
  }
  
  header h1 {
    margin: 0;
    font-size: 3.2rem;
  }
  
  header nav a {
    color: white;
    margin-left: 1.5rem;
    text-decoration: none;
    font-weight: 500;
    text-decoration: underline; 
  }
  
  header nav a:hover {
    color: #FF4D6D;  /* accent hover */
  }
  
  /* ============================= */
  /* Hero Section Content */
  /* ============================= */
  #hero {
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1; /* above overlay */
  }
  
  #hero .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  #hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  #hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }
  
  #hero button {
    background: #FF4D6D;
    border: none;
    padding: 1rem 2rem;
    color: #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.3s ease;
  }
  
  #hero button:hover {
    background: #E03E5C;
  }
  
  /* ============================= */
  /* Responsive Adjustments */
  /* ============================= */
  @media (max-width: 768px) {
    header h1 {
      font-size: 1.5rem;
    }
  
    #hero h2 {
      font-size: 2rem;
    }
  
    #hero p {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    header {
      flex-direction: column;
      align-items: center;
    }
  
    header nav a {
      margin: 0.5rem;
    }
  
    #hero h2 {
      font-size: 1.5rem;
    }
  
    #hero p {
      font-size: 0.95rem;
    }
  }

/* ============================= */
/* Services page */
/* ============================= */
/* ============================= */
/* Services Wrapper (Background & Overlay) */
/* ============================= */
#services-wrapper {
    background-image: url('images/Sangeet\ night\ sign.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
  }
  
  /* Overlay for readability */
  #services-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 0;
  }
#services {
    color:#F5F5F5;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;   /* nicer spacing */
    min-height: 70vh;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
  }

  #services .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  #services h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  #services p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }

/* Make service list items larger */
#services ul {
    padding-left: 1.5rem;   /* ensures bullets are indented properly */
  }
  
  #services li {
    font-size: 1.5rem;       /* keeps text size larger */
    margin-bottom: 0 rem;   /* smaller spacing between items */
    line-height: 1.5;        /* optional: slightly tighter line spacing */
    list-style-position: outside;
  }
  
  #services li::marker {
    font-size: 1.5rem;       /* optional: keeps bullets larger */
  }

  /* Optional: Make button bigger to match */
#services button {
    padding: 1.2rem 2rem;
    font-size: 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    background-color: #FF4D6D;
    color: white;
    border: none;
    transition: background 0.3s ease;
  }
  
  #services button:hover {
    background-color: #E03E5C;
  }

/* ============================= */
/* Portfolio page */
/* ============================= */
/* ============================= */
/* Portfolio Wrapper (Background & Overlay) */
/* ============================= */
#portfolio-wrapper {
    background-image: url('images/reception\ night\ picture.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
  }
  
  /* Overlay for readability */
  #portfolio-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 0;
  }
#portfolio {
    color:#F5F5F5;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;   /* nicer spacing */
    min-height: 70vh;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
  }

  #portfolio .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  #portfolio h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  #portfolio p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }

  .youtube-thumbnail {
    display: block;
    max-width: 600px;   /* still controls size */
    margin: 2rem 0;     /* top/bottom spacing only, no auto-centering */
    text-decoration: none;
  }
  
  .thumbnail-wrapper {
    position: relative;
    width: 100%;
  }
  
  .youtube-thumbnail img {
    width: 100%;              /* makes it scale with container */
    height: auto;             /* keeps proportions */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: block;
  }
  
  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;                /* bigger play button */
    color: white;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 1rem 1.5rem;
    pointer-events: none; /* keeps click going to the link */
  }

  #portfolio button {
    padding: 1.2rem 2rem;
    font-size: 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    background-color: #FF4D6D;
    color: white;
    border: none;
    transition: background 0.3s ease;
  }
  
  #portfolio button:hover {
    background-color: #E03E5C;
  }

/* ============================= */
/* Contact Form Inputs */
/* ============================= */
/* ============================= */
/* Contact page */
/* ============================= */
/* ============================= */
/* Contact Wrapper (Background & Overlay) */
/* ============================= */
#contact-wrapper {
    background-image: url('images/IMG_1376_Original.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
  }
  
  /* Overlay for readability */
  #contact-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 0;
  }
#contact {
    color:#F5F5F5;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;   /* nicer spacing */
    min-height: 70vh;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
  }

  #contact .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  #contact h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  #contact p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }

  #contact input,
#contact textarea {
  width: 100%;              /* full width */
  padding: 1.5rem;          /* bigger inside spacing */
  font-size: 1.2rem;        /* larger text */
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;      /* spacing between fields */
  box-sizing: border-box;
}

/* Textarea height */
#contact textarea {
  min-height: 220px;        /* taller for longer messages */
  resize: vertical;         /* allow vertical resize */
}

/* Optional: Make button bigger to match */
#contact button {
  padding: 1.2rem 2rem;
  font-size: 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  background-color: #FF4D6D;
  color: white;
  border: none;
  transition: background 0.3s ease;
}

#contact button:hover {
  background-color: #E03E5C;
}