/*!
Theme Name: flexonics
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: flexonics
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

flexonics is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html, body {
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

.single-portfolio .portfolio-banner {
    position: relative;
    padding: 135px 0px 40px 0px;
    text-align: center;
    overflow: hidden;
    color: #fff;
    background: url('./images/portfolio-banner.jpg') center center / cover no-repeat;
}
.single-portfolio .portfolio-banner h1 {
    font-size: 3rem;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    font-family: "Space Grotesk", sans-serif;
}
.single-portfolio .portfolio-banner .meta {
    font-size: 0.95rem;
    color: #777;
}

.single-portfolio .portfolio-single-wrapper {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 40px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    position: relative;
}

.single-portfolio .portfolio-single-wrapper::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(#ddd 1px, transparent 1px);
    background-size: 30px 30px;
    animation: moveDots 20s linear infinite;
    z-index: 0;
}
@keyframes moveDots {
    from { background-position: 0 0; }
    to { background-position: 60px 60px; }
}

.single-portfolio .portfolio-single-wrapper > * {
    position: relative;
    z-index: 1;
}

.single-portfolio .project-details {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.single-portfolio .project-details h3 {
    margin-bottom: 20px;
    border-bottom: 2px solid #e97522;
    padding-bottom: 8px;
}
.single-portfolio .project-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.single-portfolio .project-details li {
    margin-bottom: 12px;
    font-size: 0.95rem;
}
.single-portfolio .project-details strong {
    color: #333;
}

.single-portfolio .portfolio-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.single-portfolio .portfolio-image img {
    width: 100%;
    height: 250px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}


.single-portfolio .portfolio-content {
    max-width: 1140px;
    margin: 60px auto;
    padding: 0 20px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}
.single-portfolio .portfolio-content h2 {
    margin-top: 40px;
}

.single-portfolio .portfolio-nav {
    display: flex;
    justify-content: space-between;
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}
.single-portfolio .portfolio-nav a {
    background-color: #e97522;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.3s ease;
}
.single-portfolio .portfolio-nav a:hover {
    background-color: #1ea3b1;
}
/* ===== Portfolio Banner ===== */
.post-type-archive-portfolio .portfolio-banner {
    position: relative;
    padding: 135px 0px 40px 0px;
    text-align: center;
    overflow: hidden;
    color: #fff;
    background: url('./images/portfolio-banner.jpg') center center / cover no-repeat;
    z-index: 1;
}

.post-type-archive-portfolio .portfolio-banner h1 {
    font-size: 3rem;
    font-weight: 500;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    transition: transform 0.3s ease;
}


.post-type-archive-portfolio .portfolio-banner p {
    margin-top: 10px;
    color: #fff;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== Wrapper & Grid ===== */
.post-type-archive-portfolio .portfolio-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

.post-type-archive-portfolio .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

/* ===== Item ===== */
.post-type-archive-portfolio .portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    cursor: pointer;
    background: #000;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    perspective: 1000px;
}

.post-type-archive-portfolio .portfolio-item:hover {
    transform: scale(1.02); /* Slight zoom */
    box-shadow: 0 12px 25px rgba(10, 10, 15, 0.4); /* Matches overlay tone */
}

.post-type-archive-portfolio .portfolio-item:hover .portfolio-overlay {
    background: linear-gradient(
        to bottom,
        rgba(15, 15, 22, 0.05) 0%,   /* light at top */
        rgba(10, 10, 15, 0.25) 40%,  /* medium mid */
        rgba(25, 25, 32, 0.4) 100%   /* darker at bottom */
    );
}


/* ===== Image ===== */
.post-type-archive-portfolio .portfolio-image {
    position: relative;
}

.post-type-archive-portfolio .portfolio-image img {
    width: 100%;
    height: 235px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.post-type-archive-portfolio .portfolio-item:hover img {
    transform: scale(1.1);
}

/* ===== Overlay ===== */
.post-type-archive-portfolio .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: linear-gradient(
	  to bottom,
	  rgba(10, 10, 15, 0.1) 0%,
	  rgba(10, 10, 15, 0.4) 40%,
	  rgba(15, 15, 21, 0.8) 100%
	);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px;
    transition: background 0.4s ease;
    overflow: hidden;
}


/* Futuristic glowing sweep on hover */
.post-type-archive-portfolio .portfolio-overlay::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: rotate(25deg);
    opacity: 0; /* hidden by default */
    transition: transform 0.6s ease, opacity 0.4s ease;
}

/* Shine visible on hover */
.post-type-archive-portfolio .portfolio-item:hover .portfolio-overlay::before {
    transform: translate(50%, 50%) rotate(25deg);
    opacity: 1;
}
/* ===== Title ===== */
.post-type-archive-portfolio .portfolio-overlay h3 {
    color: #fff;
    font-size: 1.3rem;
    margin: 35px;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

@media (max-width: 768px) {
    .post-type-archive-portfolio .portfolio-overlay h3 {
        opacity: 1;
        transform: translateY(0);
        transition: none; /* Removes hover delay */
    }
}

.post-type-archive-portfolio .portfolio-item:hover .portfolio-overlay h3 {
    opacity: 1;
    transform: translateY(0);
}

.post-type-archive-portfolio .portfolio-overlay .portfolio-link:hover {
    background: #264570;
    color: #fff;
    box-shadow: 0 0 10px #264570, 0 0 20px #264570, 0 0 40px #264570;
}

/* ===== Pagination ===== */
.post-type-archive-portfolio .portfolio-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px auto;
    max-width: fit-content;
}

.post-type-archive-portfolio .portfolio-pagination .page-numbers {
    display: inline-block;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    background-color: #fff;
    border-radius: 30px;
    border: 1px solid #ddd;
    text-decoration: none;
    transition: all 0.3s ease;
}

.post-type-archive-portfolio .portfolio-pagination .page-numbers:hover {
    background-color: #e97522;
    color: #fff;
    border-color: #e97522;
}

.post-type-archive-portfolio .portfolio-pagination .page-numbers.current {
    background-color: #1ea3b1;
    color: #fff;
    border-color: #1ea3b1;
}

.sub-page h1.wp-block-heading:first-of-type {
    margin-top: 100px;
    padding-bottom: 30px;
}

.sub-page {
    line-height: 35px;
    padding-bottom: 50px;
}
.sub-page h2{
    margin-top: 10px;
    margin-bottom: 10px;
}
.sub-page ul {
  list-style: disc;
  list-style-position: outside;
  margin: 0 0 1em 1.5em;
  padding-left: 1.2em;
}
.sub-page h3{
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
}
.sub-page p{
    margin: 0%;
}
* {
    -webkit-tap-highlight-color: transparent;
}

/* ==== Partnership Page ==== */
.partnership-section:first-child {
  margin-top: 120px;
}

.partnership-title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
}

.partnership-subtitle {
  text-align: center;
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto 50px;
  color: #333;
}

.partnership-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.partnership-image {
  flex: 1;
  min-width: 300px;
}

.partnership-image img {
  width: 100%;
  border-radius: 10px;
}

.partnership-content {
  flex: 1;
  min-width: 300px;
}

.partnership-content h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
}

.partnership-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 15px;
}

/* ==== Honeycomb Hexagon Layout ==== */
.honeycomb-section {
  text-align: center;
  padding: 60px 20px;
}

.honeycomb-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
}

.honeycomb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
}

.hex {
  position: relative;
  width: 180px;
  height: 208px;
  background: #ddd;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1;
}

/* === Dark overlay (default) === */
.hex::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 15, 0.6) 0%,   
    rgba(10, 10, 15, 0.45) 40%,
    rgba(10, 10, 15, 0.25) 100%
  );
  clip-path: inherit; /* keeps overlay inside hex */
  transition: background 0.4s ease;
  z-index: 2;
}

/* === Sweep Shine Effect (Clipped to Hex) === */
.hex::before {
  content: "";
  position: absolute;
  top: -120%; 
  left: -120%;
  width: 240%;
  height: 240%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,0.25) 50%,
    transparent 60%
  );
  transform: rotate(25deg);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.4s ease;
  clip-path: inherit; /* ensures shine follows hexagon shape */
  z-index: 3;
  pointer-events: none;
}

/* === Hover Effects === */
.hex:hover {
  transform: scale(1.05);
}

.hex:hover::after {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 15, 0.3) 0%,   
    rgba(10, 10, 15, 0.2) 40%,
    rgba(10, 10, 15, 0.05) 100%
  );
}

.hex:hover::before {
  transform: translate(50%, 50%) rotate(25deg);
  opacity: 1;
}


.hex img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  clip-path: inherit;
}

.hex span {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
}


.hex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Caption below hex */
.hex-caption {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}
.hex-item:nth-child(odd) {
  margin-top: 50px;
}

.service h2 {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 24px;
}

.service p {
  font-size: 14px;
  margin: 0%;
}

.service ul {
    list-style: disc;
    list-style-position: outside;
    margin: 0 0 1em 1.5em;
    padding-left: 1.2em;
    padding-top: 12px;
}

.service h3 {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .hex {
        width: 140px;
        height: 160px;
    }
    .hex:nth-child(odd) {
        margin-top: 35px;
    }
  .partnership-row {
    flex-direction: column;
  }

  .partnership-content h3 {
    text-align: center;
  }

  .partnership-content p {
    text-align: center;
  }
  .portfolio-single-wrapper {
        grid-template-columns: 100% !important;
    }
  .partnership-section:first-child {
        margin-top: 60px;
  }
  .honeycomb{
    gap: 30px;
  }
  .honeycomb-section {
    text-align: center;
    padding: 0px 20px;
  }
  .hex-item:nth-child(odd) {
      margin-top: 0px;
  }
  .honeycomb:nth-child(odd){
    margin-bottom: 35px;
  }
}

@media (max-width: 900px) {
    .portfolio-single-wrapper {
        grid-template-columns: 100% !important;
    }
}