/* ============================
   General Styles
============================ */

/* ===== General Reset ===== */
* {
  margin: 0; /* Eliminate default margin for all elements */
  padding: 0; /* Eliminate default padding for all elements */
  box-sizing: border-box; /* Include padding and borders in width and height calculations */
}

/* ===== Root Styles ===== */
html {
  scroll-behavior: smooth; /* Enable smooth scrolling for anchor links 
   to enhance navigation and user experience. */
}

/* ===== Body Styles ===== */
body {
  background-color: #111; /* Dark background color */
  font-family: 'Arial', sans-serif; /* Default font */
  padding-bottom: env(safe-area-inset-bottom, 10px);
}

html, body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Fonts */
/* Use Poppins for Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; /* Bold for emphasis */
}

/* Use Playfair Display for Body Text */
body, p {
  font-family: 'Playfair Display', serif;
  font-weight: 400; /* Regular weight for readability */
  line-height: 1.6;
}

/* Optional: Use Poppins for Buttons & Navigation */
button, nav, .menu, .navbar, .navbar-showcase {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

/* ============================
   Door Animation Styles
   - Styles for the door animation effect
============================ */

/* ===== Door Container Styling ===== */
/* The container for the door images, ensuring they fill the viewport */
.door-image-container {
  width: 100vw; /* Full viewport width */
  height: 100svh; /* Full viewport height */
  position: absolute; /* Position relative to the viewport */
  top: 0; /* Align with the top of the screen */
  overflow: hidden; /* Hide content that overflows the container */
  z-index: 3; /* Ensure it appears above most elements */
  /* border: 2px solid red; */
}

/* ===== Door Images Styling ===== */
/* General styles for the door images */
.door-image-container img {
  position: absolute; /* Position the doors absolutely within the container */
  top: 0; /* Align the top of the image with the container */
  height: 100%; /* Stretch image to the full height of the container */
  width: auto; /* Maintain aspect ratio based on height */
  max-width: none; /* Remove the browser's default max-width */
  transition: transform 2s ease-in-out; /* Smooth animation for opening/closing */
  z-index: 3; /* Ensure images stay above background content */
}

/* ===== Left Door Styling ===== */
/* Specific styling for the first (left) door image */
.door-image-container img:first-child {
  left: 0; /* Position the left door at the container's left edge */
  width: calc(50% + 5%); /* Slightly wider than half the container width for overlap */
  transform-origin: right center; /* Pivot animation around the right edge */
}

/* ===== Right Door Styling ===== */
/* Specific styling for the second (right) door image */
.door-image-container img:last-child {
  right: 0; /* Position the right door at the container's right edge */
  width: calc(50% + 5.5%); /* Slightly wider than half the container width for overlap */
  transform-origin: left center; /* Pivot animation around the left edge */
}

/* ===== Door Opening Animations ===== */
/* Animation class for the left door to slide out */
.door-open-left {
  transform: translateX(-105%); /* Move the left door completely off-screen */
}

/* Animation class for the right door to slide out */
.door-open-right {
  transform: translateX(105%); /* Move the right door completely off-screen */
}

/* ============================
   Navbar Styles
   - Styles for the main navigation bar, dropdown menu, and hover effects
============================ */

/* ===== Main Navbar and Showcase Navbar ===== */
/* Styles for the primary navigation bar on the homepage */
.navbar, .navbar-showcase {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #333;
  padding: 1.5vh 2vw; /* Adjusts with screen size */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6vh; /* Navbar height scales with viewport */
  z-index: 1;
  transition: all 0.3s ease-in-out; /* Smooth resizing */
  /* border: 2px solid blue; */
}

.navbar-showcase {
  z-index: 1100;
}

/* ===== Navbar Right Section ===== */
/* Styles for the container holding navigation items */
.nav-right {
  display: flex; /* Arrange items in a row */
  align-items: center; /* Center items vertically */
  gap: 20px; /* Add spacing between items */
}

/* ===== Navbar List ===== */
/* Common styles for unordered lists inside both types of navbars */
.navbar ul,
.navbar-showcase ul {
  list-style: none;
  display: flex;
  gap: 2vw;/* Scales with viewport height */
  padding: 0;
  margin: 0;
}

/* ===== Navbar Links ===== */
/* Common styles for links inside both types of navbars */
.navbar ul li a,
.navbar-showcase ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 3vh;/* Scales with viewport height */
  transition: color 0.3s ease;
}

/* ===== Navbar Link Hover Effect ===== */
/* Change link color when hovered over */
.navbar ul li a:hover,
.navbar-showcase ul li a:hover {
  color: #0D47A1;  /* Dark Navy Blue */
}

/* ===== Dropdown Menu ===== */
/* Styles for dropdown menu containers */
.dropdown {
  position: relative; /* Position dropdown items relative to their parent */
  z-index: 10; /* Ensure dropdown stays above other elements */
}

.dropdown-menu {
  display: none !important; /* Hide the dropdown menu by default */
  position: absolute; /* Position the menu below its trigger */
  top: 100%; /* Align menu directly below the dropdown trigger */
  left: 0; /* Align menu to the left edge of its parent container */
  background-color: #333; /* Match the navbar background color */
  padding: 10px 0; /* Add vertical padding inside the menu */
  list-style: none; /* Remove default list styling */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow for a floating effect */
  z-index: 1050; /* Ensure dropdown menu appears above other elements */
}

/* ===== Dropdown Menu Items ===== */
/* Styles for individual items in the dropdown menu */
.dropdown-menu li {
  padding: 5px 20px; /* Add padding inside each menu item */
}

/* ===== Dropdown Links ===== */
/* Styles for links inside the dropdown menu */
.dropdown-menu li a {
  color: #fff; /* White text color for links */
  text-decoration: none; /* Remove underline from links */
  font-size: 16px; /* Slightly smaller font size for dropdown links */
  display: block; /* Make links span the full width of their container */
  transition: background-color 0.3s ease; /* Smooth background color change on hover */
}

/* ===== Dropdown Hover Effect ===== */
/* Change background and text color on hover */
.dropdown-menu li a:hover {
  color: #0D47A1;  /* Dark Navy Blue */
}

/* ===== Show Dropdown Menu ===== */
/* Display the dropdown menu when its parent is hovered */
.dropdown:hover .dropdown-menu,
.dropdown-menu.show-dropdown {
  display: block; /* Make the dropdown menu visible */
}

/* ===== Programmatic Dropdown Toggle ===== */
/* Ensure the dropdown menu remains visible when toggled via JavaScript */
.dropdown-menu.show-dropdown {
  display: block !important;
}

/* ============================
   Logo Styles
   - Styles for the logo container and individual logo elements
============================ */
.logo-container {
  display: flex;               /* Arrange logos horizontally */
  justify-content: center;     /* Center align logos */
  align-items: center;         /* Vertically center logos */
  gap: 1vw;                    /* Space between logos */
  position: absolute;             /* Keep it fixed while scrolling */
  top: 6vh;                   /* Adjust this value based on your navbar's height */
  left: 0;                  /* Place it directly below the nav bar (nav bar height is 8vw) */
  z-index: 3;                  /* Ensure it appears above other content */
  height: 15vh;                /* Slightly taller than the nav bar */
  width: 100%;                 /* Ensure it spans the full width of the viewport */
  padding: 2vw;             /* Add horizontal padding for spacing */
  /* border: 2px solid pink; */
}

.logo {
  width: 35vw; /* Set logos to occupy 45% of the container's width */
  max-width: 500px; /* Prevent logos from exceeding a maximum width */
  height: auto; /* Maintain aspect ratio for responsive scaling */
}

/* ============================
   Portfolio Section Styles
============================ */

/* Portfolio Section Container */
.portfolio-container {
  width: 100vw; /* Full width */
  height: calc(100dvh - 6vh - 15vh); /* Dynamic viewport height minus navbar and logos */
  position: absolute; /* Similar to door animation */
  top: calc(6vh + 15vh); /* Position it below the navbar and logo */
  left: 0;
  overflow: hidden; /* Prevent scrolling issues */
  z-index: 2; /* Ensure it appears below the doors but above background */
  display: grid;
  gap: 1vw;
  grid-template-columns: repeat(3, 1fr); /* 3 items per row */
  align-items: center;
  justify-content: center;
  padding: 2vw;
  /* border: 2px solid yellow; */
  margin-top: -5vh; /* Moves it up slightly */
}

/* Portfolio Items */
.portfolio-item {
  background-color: #222;
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 30vw; /* Scale width based on viewport */
  max-width: 600px;
  height: auto; /* Ensure they fully fill the space */
  position: relative;
  overflow: hidden;
  margin: auto;
  z-index: 2;
  justify-content: center;
  border: 2px solid #0D47A1;
}

/* Media Box (Video & Image Wrapper) */
.media-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Videos & Images */
.media-box video,
.media-box img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease-in-out;
  border: 2px solid #333;
  border-radius: 8px;
  object-fit: contain;
  padding: 5px;
}

/* Ensure Video is Playing */
.media-box video {
  opacity: 1;
  z-index: 1;
}

/* Initially Hide Static Image */
.media-box img {
  opacity: 0;
  z-index: 2;
}

.media-box a {
    display: flex; /* Use flexbox to align content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100%; /* Ensure it takes full width */
    height: 100%; /* Ensure it takes full height */
    text-align: center;
}

/* TV Static Effect */
.tv-snow {
  width: 100%; /* Ensures it takes the full width of the container */
  height: auto; /* Maintains aspect ratio */
  max-height: 100%; /* Prevents it from being too tall */
  object-fit: contain; /* Ensures full video is visible without cropping */
  position: absolute; /* Keeps it inside the .media-box */
  top: 50%; /* Moves it down by 50% */
  left: 50%; /* Moves it right by 50% */
  transform: translate(-50%, -50%); /* Perfect centering */
  z-index: 1; /* Ensure it's behind the image overlay */
}

/* Show Static Image After Animation */
.portfolio-item.show-image .static-image {
  opacity: 1;
}

/* Hide TV Snow When Static Image Shows */
.portfolio-item.show-image .tv-snow {
  opacity: 0;
}

/* Media Text Styling */
.media-text {
  font-size: 2.5vh; /* Adjust based on screen size */
  color: #fff; /* Keep text visible */
  text-align: center;
  z-index: 2;
  position: relative;
  margin-top: 5px;
  white-space: normal; /* Allows text to wrap */
  overflow: visible; /* Ensures text is fully displayed */
  text-overflow: clip; /* Avoids cutting off text */
  width: 100%; /* Makes sure it fits within the box */
  word-wrap: break-word; /* Breaks long words to fit */
}

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

.media-text a:hover {
  color: #0D47A1;  /* Dark Navy Blue */
}

/* ============================
   Portfolio Showcase Styles
============================ */
.portfolio-showcase {
  width: 100vw; /* Reduce width so it fits inside the yellow border */
  height: calc(100dvh - 6vh); /* Dynamic viewport height minus navbar and logos */
  position: absolute;
  top: 6vh; /* Below the navbar */
  left: 50%;
  transform: translateX(-50%); /* Center the entire showcase */
  overflow: hidden;
  z-index: 2;
  display: grid;
  gap: 1vw;
  grid-template-columns: repeat(3, 1fr); /* Ensure 3 items per row */
  justify-content: center; /* Center grid items horizontally */
  align-items: center; /* Center grid items vertically */
  padding: 0 25vw;
  /*border: 2px solid yellow;*/
}

/* Portfolio Showcase Item */
.portfolio-showcase-item {
  width: 20vw; /* Keep items smaller for spacing */
  max-width: 400px; /* Prevent excessive scaling */
  height: 20vw; /* Match height to width for a perfect square */
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  border: 2px solid #333;
  border-radius: 8px;
  margin: auto;
  position: relative; /* Ensure proper positioning */
  overflow: visible; /* Allow image to extend outside */
}

.portfolio-showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the full image is visible */
  border: 2px solid #0D47A1;
  border-radius: 8px;
  overflow: visible;
  transition: transform 0.3s ease-in-out; /* Smooth zoom effect */
  padding: 5px;
}

.portfolio-showcase-item:hover img {
  transform: scale(1.1);
  border: 2px solid #0D47A1; /* Dark Navy Blue */
  border-radius: 8px;
  transition: transform 0.3s ease-in-out; /* Smooth transition */
  z-index: 10; /* Bring image to the front */
}

/* ===========================
   About Section Styles
=========================== */

.about-container {
  max-width: 900px; /* Prevents text from stretching too wide */
  margin: auto; /* Centers the content */
  padding: 5vw;
}

/* Profile Image with Circular Shape */
.about-image {
  float: left; /* Moves image to the right */
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 3px solid #0D47A1;
  box-shadow: 0px 4px 12px rgba(240, 219, 79, 0.5);
  object-fit: cover;
  shape-outside: circle(50%); /* Makes text wrap naturally around a circle */
  -webkit-shape-outside: circle(50%);
  clip-path: circle(50%); /* Ensures clipping matches the shape */
  margin: 10px 15px 10px 0; /* Adds space between text and image */
}

/* About Text */
.about-text {
  text-align: justify; /* Ensures clean, natural text wrapping */
  color: #fff;
  line-height: 2;
  font-size: 1.8rem;
}

/* Headings */
.about-text h1 {
  font-size: 1.8rem;
  margin-top: 2.5vh;
}

/* ============================
   Contact Page Styles
============================ */

/* ===== Contact Container ===== */
/* Main container for the Contact page */
.contact-container {
  max-width: 800px; /* Set maximum width */
  margin: 6vh auto auto auto; /* Center horizontally */
  padding: 10px; /* Add internal spacing */
  text-align: center; /* Center-align text */
  color: #fff; /* White text color */
  display: flex; /* Enable Flexbox for vertical centering */
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center items vertically */
  min-height: calc(100vh - 6vh); /* Full viewport height minus navbar */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* border: 2px solid yellow; */
}

/* The inner card wrapper gives the header and form a rounded border */
.contact-card {
  width: 100%;
  background-color: #2b2b2b;
  border: 2px solid #0D47A1;  /* Optional: a border color for extra emphasis */
  border-radius: 15px;         
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #111;
  padding: 20px 30px;
}

/* ===== Contact Header ===== */
/* Styling for the Contact page heading */
.contact-header h1 {
  font-size: 2rem;
  color: #0D47A1;
  text-shadow: 0 0 10px #0D47A1;
  margin-bottom: 15px;
  line-height: 1.2; /* Improve readability */
}

.contact-header p {
  max-width: 700px; /* Allow a slightly wider text area */
  margin: 0 auto 20px; /* Ensure alignment and spacing */
  font-size: 1.1rem; /* Adjusted font size for readability */
  line-height: 1.6; /* Better spacing for longer paragraphs */
  color: #ddd; /* Slightly lighter text for contrast */
}

.contact-header a {
  color: #0D47A1;
  text-decoration: none;
  font-weight: bold; /* Emphasize links */
}

.contact-header a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* ===== Contact Form ===== */
.contact-form {
  max-width: 100%; /* Ensure it fits within the container */
  margin: 0; /* Center-align form */
}

/* ===== Form Group ===== */
.form-group {
  margin-bottom: 20px; /* Add more spacing for better separation */
}

.form-group label {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 8px; /* Slightly larger spacing below labels */
  display: block; /* Ensure labels are above inputs */
}

/* Styling for input and textarea fields */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px; /* Increase padding for better usability */
  font-size: 1rem;
  color: #111; /* Dark text color for contrast */
  background-color: #f9f9f9; /* Lighter background for inputs */
  border: 1px solid #444;
  border-radius: 4px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Focus effect for input and textarea fields */
.form-group input:focus,
.form-group textarea:focus {
  border-color: #f0db4f;
  box-shadow: 0 0 5px rgba(240, 219, 79, 0.5);
  background-color: #fff; /* Slightly highlight the background on focus */
}

/* ===== Contact Button ===== */
.contact-button {
  font-size: 1rem;
  padding: 12px 20px; /* Increase padding for better visibility */
  background-color: #f0db4f;
  color: #111; /* Dark text color for contrast */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
  font-weight: bold; /* Make the button text stand out */
}

.contact-button:hover {
  background-color: #e0c842; /* Slightly darker yellow on hover */
  transform: scale(1.05); /* Add a hover effect */
}

/* =============================
  Responsive Sizing Adjustments  
=============================== */

/* ========== Ultra Small Screens (≤ 400px) ========== */
/* Very small devices like iPhone SE, compact Android phones */
@media (max-width: 400px) { 
  /* Adjustments for ultra-small screens */
}

/* ========== Extra Small Screens (≤ 575px) ========== */
/* Standard smartphones (iPhone, Galaxy, Pixel) */
@media (max-width: 575px) { 
  /* Adjustments for mobile layout */
}

/* Portrait Mode (≤ 575px) */
@media (max-width: 575px) and (orientation: portrait) { 
  /* Adjustments for portrait mode */
}

/* Landscape Mode (≤ 575px) */
@media (max-width: 575px) and (orientation: landscape) { 
  /* Adjustments for landscape mode */
}

/* ========== Small Screens (576px – 767px) ========== */
/* Large smartphones & small tablets */
@media (max-width: 767px) { 
  /* Adjustments for small screens */
  .navbar, .navbar-showcase {
    justify-content: center;
  }

  .navbar ul, .navbar-showcase ul {
    display: flex;           /* Make the nav links a flex container */
    flex-direction: row;  /* Stack items vertically */
    align-items: center;     /* Center items horizontally */
    text-align: center;      /* Ensure text is centered */
    width: 100%; 
    gap: 1vw;            /* Full width */
  }

  .navbar ul li, .navbar-showcase ul li {
    width: 100%;             /* Each item takes full width */
    padding: 8px 0;          /* Add padding for touch accessibility */
  }

  .navbar ul li a, .navbar-showcase ul li a {
    font-size: 1rem;       /* Adjust font size for smaller screens */
    display: block;          /* Ensure full clickable area */
    width: 100%;             /* Full width for tap-friendly links */
  }

  .logo-container {
    height: 10vh;
  }

  .logo {
    width: 45vw;
  }

  .portfolio-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items */
    gap: 2vh; /* Add spacing between items */
    height: calc(100dvh - 6vh - 10vh);
  }

  .portfolio-item {
    width: 63%; /* Makes items smaller on mobile */
    max-width: 400px; /* Prevents excessive scaling */
    margin: 0 auto; /* Centers the items */
  }

  .media-box video,
  .media-box img {
    object-fit: contain;
    width: auto;
    height: 100%;
}

.portfolio-showcase {
  grid-template-columns: repeat(2, 1fr);
}

  .portfolio-showcase-item {
    width: 45vw;
    height: 45vw;
  }

  .about-container {
    margin-top: 1.8vh;
  }

  .about-text {
    line-height: 1;
    font-size: 1.1rem;
    text-align: center;
  }

  .about-text h1 {
    font-size: 1.3rem;
    margin-bottom: .2vh;
  }

  .about-image {
    width: 175px;
    height: 175px;
    margin: 0 10px 0 0;
  }

   .contact-container {
    max-width: 90vw; /* Reduce width for smaller screens */
    padding: 15px;
  }

  .contact-card {
    padding: 20px;
    border-radius: 10px;
  }

  .contact-header h1 {
    font-size: 1.5rem;
  }

  .contact-header p {
    font-size: 1rem;
    line-height: 1.4;
  }

  .form-group label {
    font-size: 0.9rem;
  }

  .form-group input,
  .form-group textarea {
    font-size: 1rem;
    padding: 10px;
  }

  .contact-button {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
  }

@media (max-width: 767px) and (orientation: landscape) {
  .navbar, .navbar-showcase {
    height: 10vh;
  }

  .logo-container {
    top: 10vh;
    height: 20vh;
  }

  .portfolio-container, .portfolio-showcase {
    top: calc(10vh + 25vh);
    height: calc(100vh - 10vh - 20vh);
  }

  .portfolio-container {
    display: flex; /* Arrange items in a row */
    justify-content: center; /* Center them horizontally */
    align-items: center; /* Align them vertically */
    gap: 2vw; /* Add spacing between items */
    flex-wrap: wrap; /* Allow wrapping if needed */
  }

  .portfolio-item {
    width: 32%; /* Adjust width for 3 items in a row */
    max-width: 400px; /* Prevent excessive stretching */
    height: auto;
    display: flex;
    flex-direction: column; /* Keep internal elements stacked */
    align-items: center;
    justify-content: center;
    margin-top: -5px;
  }

  .media-text {
    font-size: 4vh;
  }

  .portfolio-showcase {
    top: 10vh;
    height: calc(100vh - 10vh);
    grid-template-columns: repeat(3, 1fr);
  }

  .portfolio-showcase-item {
    width: 22vw;
    height: 22vw;
  }
}

/* ========== Medium Screens (768px – 991px) ========== */
/* Tablets (iPad, Galaxy Tab, etc.) */
@media (max-width: 991px) { 
  /* Adjustments for tablets */
}

/* ========== Large Screens (992px – 1199px) ========== */
/* Small desktops & landscape tablets */
@media (max-width: 1199px) { 
  /* Adjustments for large screens */
}

/* ========== iPad Mini (6th Gen) (744px – 830px) ========== */
@media (min-width: 744px) and (max-width: 830px) { 
  /* Adjustments for iPad Mini */
}

/* ========== iPad Pro 11" (810px – 1194px) ========== */
@media (min-width: 810px) and (max-width: 1194px) { 
  /* Adjustments for iPad Pro 11-inch */
}

/* ========== iPad Pro 12.9" (1024px – 1366px) ========== */
@media (min-width: 1024px) and (max-width: 1366px) { 
  /* Adjustments for iPad Pro 12.9-inch */
}

/* ========== Extra Large Screens (≥ 1200px) ========== */
/* Large desktops, TVs (No media query needed unless adjustments required) */