* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

}



a {

	color: #4080FF;

}



body {

    background-color: #0b0f19;

    color: #e2e8f0;

    line-height: 1.6;

}



/* Navigation */

header {

    background-color: rgba(11, 15, 25, 0.9);

    backdrop-filter: blur(10px);

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom: 1px solid #1e293b;

}



.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

}



.logo {

    font-size: 22px;

    font-weight: 800;

    color: #8490E0;

    letter-spacing: 1px;

}



.nav-links {

    display: flex;

    list-style: none;

    gap: 8px;

}



.nav-links a {

    text-decoration: none;

    padding: 12px 0px;       /* Adds a little breathing room on the sides of the word */

    border-radius: 3px;  /* Optional: rounds the corners of the background */

    color: #94a3c8;

    font-weight: 500;

    transition: color 0.1s;

}



.nav-links a:hover {

    color: #88d8ff;

    background-color: #305080;

}



.highlight-image {

  transition: box-shadow 0.2s ease; 

}

.highlight-image:hover {

  box-shadow: 0 0 15px 5px rgba(120, 160, 255, 0.25);

}



.bottom-space {

  margin-bottom: 5px; 

}



/* Hero Section */

.hero {

    position: relative;

    background: radial-gradient(circle at center, #1e1b4b 0%, #0b0f19 100%);

    padding: 60px 20px 50px;

    text-align: center;

    overflow: hidden;

}



/* Subtle ambient glow behind hero */

.hero::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);

    z-index: 0;

}



.hero-content {

    position: relative;

    max-width: 800px;

    margin: 0 auto;

    z-index: 1;

}



.hero h1 {

    font-size: 52px;

    color: #ffffff;

    margin-bottom: 20px;

    line-height: 1.2;

    font-weight: 800;

}



.hero p {

    font-size: 20px;

    color: #94a3b8;

    margin-bottom: 15px;

}



.btn {

    display: inline-block;

    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);

    color: #fff;

    padding: 14px 35px;

    text-decoration: none;

    border-radius: 30px;

    font-weight: 600;

    letter-spacing: 0.5px;

    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);

    transition: transform 0.2s, box-shadow 0.2s;

}



.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);

}



/* Shows/Animations Section */

.shows-section {

    max-width: 1200px;

    margin: 50px auto;

    padding: 0 20px;

}



.section-title {

    text-align: center;

    font-size: 36px;

    color: #ffffff;

    margin-bottom: 20px;

    font-weight: 700;

}



.section-title2 {

    text-align: center;

    font-size: 28px;

    color: #ffffff;

    margin-bottom: 20px;

    font-weight: 700;

}



.section-subtitle {

    max-width: 800px;

    margin: 0 auto; 

    text-align: center;

    color: #94a3b8;

    margin-bottom: 70px;

    font-size: 18px;

}



.shows-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 40px;

}



.show-card {

    background: #111827;

    border: 1px solid #1f2937;

    border-radius: 12px;

    overflow: hidden;

    transition: transform 0.3s, border-color 0.3s;

}



.show-card:hover {

    transform: translateY(-5px);

    border-color: #3b68d0;

}



/* Placeholder for film poster/trailer screenshot */

.show-visual {

    height: 285px;

    background: #1e293b;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #64748b;

    font-weight: 600;

    position: relative;

    background-size: cover;

    background-position: center;

}





.show-content {

    padding: 30px;

}



.show-title {

    font-size: 24px;

    color: #ffffff;

    margin-bottom: 10px;

}



.show-meta {

    font-size: 14px;

    color: #6380f0;

    margin-bottom: 15px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.show-description {

    color: #94a3b8;

    font-size: 15px;

    margin-bottom: 20px;

    min-height: 72px; /* Keeps buttons aligned */

}



.card-btn {

    display: block;

    text-align: center;

    background: #1f2937;

    color: #f1f5f9;

    padding: 10px;

    text-decoration: none;

    border-radius: 6px;

    font-weight: 500;

    transition: background 0.2s;

    border: 1px solid #334155;

}



.card-btn:hover {

    background: #334155;

    color: #fff;

}



/* Contact / Booking Section */

.booking-section {

    background: #0f172a;

    border-top: 1px solid #1e293b;

    padding: 50px 20px 1px;

}



.form-container {

    max-width: 600px;

    margin: 0 auto;

    background: #111827;

    padding: 40px;

    border-radius: 12px;

    border: 1px solid #1f2937;

}



.form-group {

    margin-bottom: 25px;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

    color: #cbd5e1;

    font-size: 14px;

}



.form-group input, .form-group select, .form-group textarea {

    width: 100%;

    padding: 12px;

    background: #1e293b;

    border: 1px solid #334155;

    border-radius: 6px;

    font-size: 16px;

    color: #fff;

    transition: border-color 0.2s, focus 0.2s;

}



.form-group input:focus, .form-group select:focus, .form-group textarea:focus {

    outline: none;

    border-color: #3b82f6;

}



.form-group textarea {

    resize: vertical;

    height: 120px;

}



.submit-btn {

    width: 100%;

    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);

    color: white;

    padding: 14px;

    border: none;

    border-radius: 6px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: opacity 0.2s;

    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);

}



.submit-btn:hover {

    opacity: 0.9;

}



/* Footer */

footer {

    background-color: #0b0f19;

    color: #64748b;

    text-align: center;

    padding: 30px;

    font-size: 14px;

    border-top: 1px solid #1e293b;

}



.footertext {

  color: #64748b;

  font-size: 14px;

}



.footertext a:link { 

  color: #64748b;

  text-decoration: none;

} 



.footertext a:hover { 

  color: #64748b; 

  text-decoration: underline; 

} 



.footertext a:visited { 

  color: #64748b; 

} 



/* Targets the video element itself when in fullscreen */

video:fullscreen {

  background-color: #000000 !important;

}



/* Vendor prefixes for older or specific mobile browsers (like older Safari/Chrome) */

video:-webkit-full-screen {

  background-color: #000000 !important;

}



video:-ms-fullscreen {

  background-color: #000000 !important;

}



/* Responsive Tweaks */

@media (max-width: 768px) {

    .hero h1 { font-size: 38px; }

    .nav-container { flex-direction: column; gap: 15px; }

    .form-container { padding: 25px; }

}