/*
Theme Name: Imraan Portfolio
Theme URI: 
Author: Imraan Alam
Author URI: 
Description: Portfolio theme for imraan alam
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imraan-portfolio
Tags: 
*/
html {
  scroll-behavior: smooth;
}
h1,
h2 {
  color: var(--wp--preset--color--custom-t-1) !important;
}
h3,
h4 {
  color: var(--wp--preset--color--custom-t-2) !important;
}
h5,
h6 {
  color: var(--wp--preset--color--custom-t-3) !important;
}
header:has(> .is-position-sticky) {
  position: fixed;
  margin: 0 auto;
  width: 100%;
  z-index: 999;
  transition: top 0.8s ease, opacity 0.7s ease;
}
header:has(> .is-position-sticky).hide-on-scroll {
  top: -100px;
  opacity: 0;
}
.nav-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* for Safari */
}
.hero-section {
  position: relative;
}
.hero-image {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: subtleFloat 10s ease-in-out infinite;
}

@keyframes subtleFloat {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    transform: translate(-51%, -50%) scale(1.05);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  75% {
    transform: translate(-49%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.cta-footer {
  background: linear-gradient(
    -15deg,
    rgb(38, 39, 38) 0%,
    rgb(0, 86, 57) 25%,
    rgb(0, 61, 44) 50%,
    rgb(38, 39, 38) 75%,
    rgb(25, 26, 26) 100%
  );
  background-size: 150% 100%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  animation: animateLinearGradient 20s ease-in-out infinite;
}
@keyframes animateLinearGradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.custom-tags a {
  border: 1px solid var(--wp--preset--color--custom-l-4);
  border-radius: 999px;
  padding-top: var(--wp--preset--spacing--1);
  padding-right: var(--wp--preset--spacing--4);
  padding-bottom: var(--wp--preset--spacing--1);
  padding-left: var(--wp--preset--spacing--4);
  font-size: var(--wp--preset--font-size--bodysmall) !important;
  color: var(--wp--preset--color--custom-t-4) !important;
  background-color: var(--wp--preset--color--custom-l-3);
}
@media (max-width: 720px) {
  .hero-image {
    display: none;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service-grid > * {
    grid-column: span 1 !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}