/* Import the Raleway font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

/* --- Global Reset and Horizontal Scroll Fix (PRIORITIZED) --- */
html, body {
    /*font-family: 'Raleway', sans-serif;*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%; 
    overflow-x: hidden !important; 
}

body {
    height: 100vh; 
    overflow-y: auto; 
}

/* --- CSS Variables for Layout Consistency --- */
:root {
    --sidebar-width: 25%;
    --content-padding-left: 80px;
    --content-padding-top: 50px;
    --transition-duration: 0.6s;
    --transition-timing: cubic-bezier(0.25, 0.8, 0.25, 1);
}

h1, h2 { margin-top: 0; }
i { font-style: normal; }

/* --- Main Page Container (Desktop Fixed) --- */
#main-container { 
    display: flex; 
    height: 100vh; 
    position: fixed; 
    top: 0; left: 0;
    width: 100%;
    z-index: 200;
}

/* ✅ FIX APPLIED: Desktop scrolling allowed */
@media (min-width: 769px) {
  #main-container {
    position: relative;
    height: auto;
    overflow: visible;
  }
}

#left-banner, #right-menu {
    transition: transform var(--transition-duration) var(--transition-timing);
    height: 100%; 
}

/* --- STATE: Main Page is Split and Out of View (DESKTOP) --- */
/* --- DESKTOP DRAWER SPLIT EFFECT --- */
/* --- DESKTOP DRAWER SPLIT EFFECT (TRUE CENTER-OUT ANIMATION) --- */
@media (min-width: 769px) {
  .page-out #left-banner {
    transform: translateX(-100%);
    transition: transform 0.7s ease-in-out;
  }

  .page-out #right-menu {
    transform: translateX(100%);
    transition: transform 0.7s ease-in-out;
  }

  #left-banner, #right-menu {
    transition: transform 0.7s ease-in-out;
    will-change: transform;
  }
}

/* --- DESKTOP DRAWER SPLIT EFFECT --- */
@media (min-width: 769px) {
  .page-out #left-banner {
    transform: translateX(-100%) scale(1);
    opacity: 1;
  }
  .page-out #right-menu {
    transform: translateX(100%) scale(1);
    opacity: 1;
  }

  #left-banner, #right-menu {
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
  }
}

/* --- Main Page Content --- */
#left-banner { 
    flex: 1 1 40%; 
    background-color: white; 
    padding: 60px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
}
#left-banner h1 { font-size: 3.5em; font-weight: 300; margin-bottom: 5px; }
#left-banner h1 strong { color: #d9534f; font-weight: 700; }

/* Menu Tiles Grid (Desktop) */
#right-menu { 
    flex: 1 1 60%; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(2, 1fr); 
    gap: 1px; 
    background-color: #f0f0f0; 
}
.menu-item { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    color: white; 
    font-size: 1.5em; 
    font-weight: 600; 
    cursor: pointer; 
    transition: opacity 0.3s; 
    position: relative; 
    overflow: hidden; 
}
.menu-item:hover { opacity: 0.9; }
.tile-overlay { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.4); 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    box-sizing: border-box; 
}

/* --- 2. The Sliding Full-Screen Content Panels --- */
.content-panel {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; 
    z-index: 100; 
    opacity: 0; 
    visibility: hidden; 
    
    overflow-y: auto; 
    overflow-x: hidden; 
}

.content-panel.open {
    opacity: 1; 
    visibility: visible;
}

/* Mobile Color Strip (Hidden by default on desktop) */
.mobile-color-strip {
    display: none; 
}

/* Global Close Button */
#global-close-btn { 
    position: fixed; 
    top: 30px; 
    right: 30px; 
    font-size: 2em; 
    cursor: pointer !important; 
    color: white; 
    border: none; 
    background: rgba(0, 0, 0, 0.5); 
    width: 45px; 
    height: 45px; 
    line-height: 45px; 
    text-align: center; 
    border-radius: 50%; 
    z-index: 3000; 
    padding: 0; 
    text-shadow: none; 
    display: none; 
    transition: background-color 0.3s;
}

#global-close-btn:hover {
    background-color: rgba(217, 83, 79, 0.8); 
}

/* --- 3. Internal Content Split and Slide-In Animation (Desktop) --- */
.panel-inner-split { 
    display: flex; 
    width: 100%;
    flex-direction: row; 
    padding-bottom: 20px; 
}

/* Content Wrapper (Left) */
.main-content-wrapper {
    flex: 1; 
    padding: var(--content-padding-top) 20px 20px var(--content-padding-left); 
    margin-right: var(--sidebar-width); 
    
    height: auto; 
    overflow-y: visible; 
    overflow-x: hidden;
    
    transform: translateX(calc(-100% + var(--content-padding-left))); 
    opacity: 0; 
    transition: opacity 0.4s ease-in, transform var(--transition-duration) var(--transition-timing); 
}

.main-content-area {
    padding-right: 10px;
}

/* Sidebar (Right) */
.stylized-sidebar {
    width: var(--sidebar-width); 
    flex-shrink: 0; 
    background-size: cover; 
    background-position: center;
    background-color: #34495e; 
    
    height: auto; 
    min-height: 100vh; 
    position: relative; 
    
    transform: translateX(var(--sidebar-width)); 
    opacity: 0; 
    transition: opacity 0.4s ease-in, transform var(--transition-duration) var(--transition-timing); 
    z-index: 999; 
}

.about-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
}

/* Final (Open) State */
.content-loaded .main-content-wrapper { transform: translateX(0); opacity: 1; }
.content-loaded .stylized-sidebar { transform: translateX(0); opacity: 1; }

/* Vertical Text Styling */
.vertical-text { 
    position: sticky; 
    top: 200px; 
    z-index: 3;
    left: 50px; 
    color: white; 
    font-size: 5em; 
    font-weight: 700; 
    transform: rotate(90deg) translateY(-50%); 
    white-space: nowrap; 
    text-shadow: 4px 4px 8px rgba(0,0,0,1); 
}

/* Sidebar backgrounds */
.about-sidebar { background-image: url('src/img/about.jpg'); background-color: #34495e; }
.service-sidebar { background-image: url('src/img/service.jpg'); background-color: #34495e; }
.portfolio-sidebar { background-image: url('src/img/portfolio.jpg'); background-color: #34495e; }
.gallery-sidebar { background-image: url('src/img/gallery.jpg'); background-color: #34495e; }
.faq-sidebar { background-image: url('src/img/faq.jpg'); background-color: #34495e; }
.contact-sidebar { background-image: url('src/img/contact.jpg'); background-color: #34495e; }

/* Icons */
.fa-user:before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: url('src/img/about.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: brightness(0) invert(1);
  vertical-align: middle;
}
.fa-cogs:before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: url('src/img/service.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: brightness(0) invert(1);
  vertical-align: middle;
}
.fa-briefcase:before { 
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: url('src/img/portfolio.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: brightness(0) invert(1);
  vertical-align: middle;
}
.fa-image:before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: url('src/img/gallery.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: brightness(0) invert(1);
  vertical-align: middle;
} 
.fa-question:before { 
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: url('src/img/faq.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: brightness(0) invert(1);
  vertical-align: middle;
} 
.fa-phone:before { 
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: url('src/img/contact.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: brightness(0) invert(1);
  vertical-align: middle;
}

#about-us-tile { background-image: url('src/img/about.jpg'); background-color: #02462F; background-size: cover; background-position: center; }
#services-tile { background-image: url('src/img/service.jpg'); background-color: #5bc0de; background-size: cover; background-position: center; }
#portfolio-tile { background-image: url('src/img/portfolio.jpg'); background-color: #5bc0de; background-size: cover; background-position: center; }
#gallery-tile { background-image: url('src/img/gallery.jpg'); background-color: #5bc0de; background-size: cover; background-position: center; }
#faq-tile { background-image: url('src/img/faq.jpg'); background-color: #5bc0de; background-size: cover; background-position: center; }
#contact-tile { background-image: url('src/img/contact.jpg'); background-color: #5bc0de; background-size: cover; background-position: center; }

/* ------------------------------------------- */
/* --- Mobile Responsiveness --- */
/* ------------------------------------------- */
@media (max-width: 768px) {

    #main-container { 
        position: fixed; 
        height: 100vh; 
        width: 100%; 
        flex-direction: column; 
        z-index: 200; 
    }
    
    .page-out-mobile #left-banner { transform: translateX(-100%); }
    .page-out-mobile #right-menu { transform: translateX(100%); }

    #left-banner { padding: 20px; }
    #right-menu { 
        padding: 0; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 0; 
    }

    .tile-overlay {
        padding: 20px 0; 
        padding-top: 50px; 
        position: relative; 
        height: auto;
        min-height: 250px !important; 
        text-align: center;
    }

    .content-panel { 
        position: fixed; 
        width: 100%;
        height: 100%; 
        top: 0;
        left: 0;
        opacity: 0; 
        visibility: hidden; 
        transform: none; 
        z-index: 50;
        overflow-y: auto; 
        overflow-x: hidden; 
    }

    .content-panel.open {
        opacity: 1; 
        visibility: visible;
    }
    
    .stylized-sidebar { display: none !important; }

    .mobile-color-strip {
        display: block; 
        position: fixed; 
        top: 0;
        left: 0;
        width: 100%;
        height: 50px; 
        z-index: 1001; 
    }
    
    .main-content-wrapper { 
        padding: 70px 20px 20px 20px !important; 
        margin-right: 0; 
        height: auto !important; 
        overflow-y: visible !important; 
        transform: translateX(calc(-100% + 20px)); 
        opacity: 0; 
    }
    
    .content-panel.content-loaded .main-content-wrapper {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    #global-close-btn { 
        color: #555; 
        background: rgba(255, 255, 255, 0.7); 
        top: 10px; 
        right: 10px; 
    } 
    
    .vertical-text { display: none; }
}

/* ====== Smooth Scrolling Fixes ====== */

html, body, #main-container, .content-panel, .main-content-wrapper, .main-content-area {
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior: contain;
}

.content-panel {
  position: fixed !important;
  top: 0; left: 0; width: 100%; height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  z-index: 9999;
}

.main-content-wrapper, .main-content-area {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#main-container {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100vh;
  overflow: hidden;
}

.mobile-color-strip, #global-close-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body[style*="overflow: hidden"] .content-panel {
  pointer-events: auto;
}

/* ====== Desktop Sidebar Fix ====== */
@media (min-width: 769px) {
  .stylized-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100vh;
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    z-index: 900;
  }

  .panel-inner-split {
    flex-direction: row;
  }

  .main-content-wrapper {
    margin-right: var(--sidebar-width);
  }

  .stylized-sidebar .vertical-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    color: #fff;
    font-size: 3.5em;
    font-weight: 700;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
    opacity: 0.95;
    pointer-events: none;
  }
}

/* Drawer Split Animation */
.page-out #left-banner { transform: translateX(-100%); transition: transform 0.6s ease-in-out; }
.page-out #right-menu { transform: translateX(100%); transition: transform 0.6s ease-in-out; }

@media (max-width: 768px) {
  #left-banner, #right-menu { transition: all 0.6s ease-in-out; }

  .page-out-mobile #left-banner { transform: translateX(-100%); opacity: 0; }
  .page-out-mobile #right-menu { transform: translateX(100%); opacity: 0; }

  #main-container:not(.page-out-mobile) #left-banner { transform: translateX(0); opacity: 1; }
  #main-container:not(.page-out-mobile) #right-menu { transform: translateX(0); opacity: 1; }

  .page-out-mobile ~ .content-panel {
    transition: opacity 0.4s ease 0.4s, visibility 0s linear 0.4s;
  }
}

/* Vertical text adjustment */
@media (min-width: 769px) {
  .stylized-sidebar .vertical-text {
    left: 30%;
    transform: translate(-50%, -50%) rotate(-270deg);
  }
}

/* Divider */
.hr-title {
  width: 100%;
  height: 8px;
  background-image: url('src/img/img-divider.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  margin: 20px 0;
  opacity:1 !important;
}

/* Typography */
p { text-align: justify; }


/* --- FINAL CLOSE BUTTON FIX --- */
/* --- FIX: Close button must be above panels but hidden by default --- */
#global-close-btn {
    z-index: 10000 !important;   /* Always above content-panel */
}

/* --- Prevent sidebar from covering scrollbar --- */
@media (min-width: 769px) {
  .stylized-sidebar {
      right: 15px;   /* moves sidebar slightly left */
  }
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: #000;
    line-height: 1.2;
}

h1 { font-weight: 400; }
h2 { font-weight: 300; }

/* --- FINAL FIX: enable home scroll on small devices --- */
@media (max-width: 768px) {
    #main-container {
        position: relative !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    body {
        height: auto !important;
        overflow-y: auto !important;
    }
}
/* ========= HOME DRAWER ANIMATIONS ========= */

/* Start CLOSED (initial position before animation-in) */
#left-banner,
#right-menu {
    opacity: 0;
    transform: translateX(0);
}

@media (min-width: 769px) {
    #left-banner { transform: translateX(-100%); }
    #right-menu { transform: translateX(100%); }
}

@media (max-width: 768px) {
    #left-banner { transform: translateX(-100%); }
    #right-menu { transform: translateX(100%); }
}

/* ======== ANIMATION: DRAWER OPEN (INWARD) ======== */
.page-in #left-banner,
.page-in #right-menu {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.7s ease-in-out, opacity 0.4s ease-in-out;
}

/* ======== ANIMATION: DRAWER CLOSE (OUTWARD) ======== */
.page-out #left-banner {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.6s ease-in-out, opacity 0.3s ease-in-out;
}

.page-out #right-menu {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.6s ease-in-out, opacity 0.3s ease-in-out;
}

/* ============================================================
   UNIVERSAL DRAWER ANIMATION (NON-DESTRUCTIVE VERSION)
   Works with all your existing theme + drawer CSS
   ============================================================ */

/* --- Initial CLOSED state (before animation-in) --- */
#left-banner,
#right-menu {
    opacity: 0;
}

@media (min-width: 769px) {
    #left-banner { transform: translateX(-100%); }
    #right-menu { transform: translateX(100%); }
}

@media (max-width: 768px) {
    #left-banner { transform: translateX(-100%); }
    #right-menu { transform: translateX(100%); }
}

/* --- Drawer OPEN (page loads) --- */
.page-in #left-banner,
.page-in #right-menu {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform 0.7s ease-in-out, opacity 0.4s ease-in-out !important;
}

/* --- Drawer CLOSE (on link click) --- */
.page-out #left-banner {
    opacity: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.6s ease-in-out, opacity 0.3s ease-in-out !important;
}

.page-out #right-menu {
    opacity: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.6s ease-in-out, opacity 0.3s ease-in-out !important;
}

/* Ensure mobile does not override it */
@media (max-width: 768px) {
    #left-banner,
    #right-menu {
        transition: transform 0.7s ease !important;
    }
}

/* ================================================
   FIX: ENABLE DRAWER-IN ANIMATION ON MOBILE
   ================================================ */

/* Mobile must start CLOSED, not open */
@media (max-width: 768px) {
    #left-banner,
    #right-menu {
        opacity: 0 !important;
        transform: translateX(-100%) !important;
    }

    #right-menu {
        transform: translateX(100%) !important;
    }

    /* OPEN animation on mobile */
    .page-in #left-banner,
    .page-in #right-menu {
        opacity: 1 !important;
        transform: translateX(0) !important;
        transition: transform 0.7s ease-in-out, opacity 0.4s ease-in-out !important;
    }

    /* CLOSE animation on mobile */
    .page-out #left-banner {
        opacity: 0 !important;
        transform: translateX(-100%) !important;
    }
    .page-out #right-menu {
        opacity: 0 !important;
        transform: translateX(100%) !important;
    }
}



/* Gallery ===========================*/
/* --- Gallery Specific Styles --- */

/* Filter Controls */
.filter-controls {
    text-align: center;
    margin: 20px 0 30px;
}

.filter-btn {
    background-color: #f0f0f0;
    color: #333;
    border: none;
    padding: 10px 15px;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 10px; /* Responsive stacking */
}

.filter-btn:hover {
    background-color: #5bc0de;
    color: white;
}

.filter-btn.active {
    background-color: #0275d8; /* Primary blue color */
    color: white;
}

/* Responsive Grid */
.responsive-gallery-grid {
    display: grid;
    /* Default: 3 columns on desktop, auto-fit ensures responsiveness */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px;
    padding: 10px;
}

/* Gallery Items */
.gallery-item {
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    
    /* Transition for filtering effect */
    transition: all 0.5s ease;
    transform: scale(1);
    opacity: 1;
    will-change: transform, opacity;
}

.gallery-item:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.gallery-image {
    width: 100%;
    height: auto;
    display: block;
}

.item-info {
    padding: 10px;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    color: #333;
    background-color: #f9f9f9;
}

/* --- Mobile Specific Grid Adjustments (max-width: 768px) --- */
@media (max-width: 768px) {
    .responsive-gallery-grid {
        /* On mobile, use 2 columns or even 1 for very small screens */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
        gap: 15px;
    }
    
    .filter-controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .filter-btn {
        flex: 1 1 auto; /* Allows buttons to spread evenly */
        margin: 5px;
    }
}