/* This file is intentionally left empty as its contents have been refactored into modular CSS files in the css/ directory. */


/* Please refer to:
    - css/base.css
    - css/header.css
    - css/sections.css
    - css/components.css
    - css/forms.css
    - css/responsive.css 
*/


/* Container Layout */

.floating-boxes-container-wrapper {
    padding: 2rem;
}

.floating-boxes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}


/* Flip Box Outer Wrapper */

.flappable-box {
    width: 260px;
    height: 340px;
    perspective: 1000px;
    /* Enables 3D flipping */
}


/* Flip Inner Area */

.flappable-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s ease-in-out;
}


/* Flip on Hover */

.flappable-box:hover .flappable-box-inner {
    transform: rotateY(180deg);
}


/* Front and Back Shared Styles */

.flappable-box-front,
.flappable-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* Back Side Flipped */

.flappable-box-back {
    transform: rotateY(180deg);
    background-color: #f9f9f9;
}


/* Front Icon Styling */

.flappable-box-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
}


/* Button Styling */

.learn-more-box-btn {
    margin-top: 1rem;
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.learn-more-box-btn:hover {
    background-color: #0056b3;
}
/* Flip Box Styles */
.flippable-box {
  perspective: 1000px;
}
.flippable-box-inner {
  position: relative;
  width: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flippable-box:hover .flippable-box-inner {
  transform: rotateY(180deg);
}
.flippable-box-front, .flippable-box-back {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
}
.flippable-box-back {
  transform: rotateY(180deg);
}

/* Static Gallery Layout */
#project-gallery {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 20px;
  overflow-y: auto;
}
#project-gallery.visible {
  display: flex;
}
#project-gallery-title {
  color: white;
  font-size: 24px;
  margin-bottom: 20px;
}
#project-gallery-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}
.gallery-img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.gallery-img:hover {
  transform: scale(1.05);
}
#close-gallery {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 20px;
  right: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
}