/*────────────────────────────────────
  Biz-Consult – Custom Theme (Glasmorphism + Hyper-real Pastel)
  Bulma 0.9.x enhancer | Author: …
────────────────────────────────────*/

/*==============================
=  1. CSS VARIABLES            =
==============================*/
:root{
  /* Brand palette – Pastel & vivid accents */
  --clr-primary       : #8FB6FF; /* pastel blue */
  --clr-primary-dark  : #7096e0;
  --clr-secondary     : #FFC7C7; /* pastel rose */
  --clr-secondary-dark: #E6ABAB;
  --clr-accent        : #B8FFE6; /* pastel mint */
  --clr-accent-dark   : #9BE0C7;
  --clr-bg            : #F7F9FD;
  --clr-surface       : rgba(255,255,255,0.55); /* glass */
  --clr-border        : rgba(255,255,255,0.35);
  --clr-text          : #2A2A2A;
  --clr-text-light    : #FFFFFF;
  --gradient-main     : linear-gradient(135deg,var(--clr-primary),var(--clr-secondary));
  --gradient-dark     : linear-gradient(135deg,var(--clr-primary-dark),var(--clr-secondary-dark));

  /* Elevation & Radius */
  --radius-lg  : 22px;
  --radius-md  : 14px;
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.15);

  /* Typography */
  --font-head : 'Oswald', sans-serif;
  --font-body : 'Nunito', sans-serif;

  /* Animation durations */
  --fast  : .25s;
  --slow  : .8s;
}

/*==============================
=  2. GLOBAL RESETS & TYPO     =
==============================*/
html{scroll-behavior:smooth;}
body{
  background:var(--clr-bg);
  color:var(--clr-text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:600;letter-spacing:.5px;}
.section{padding-top:4rem;padding-bottom:4rem;}
img{max-width:100%;display:block;}
a{color:var(--clr-primary-dark);text-underline-offset:3px;transition:color var(--fast);}
a:hover{color:var(--clr-secondary-dark);}

/*==============================
=  3. UTILITY CLASSES          =
==============================*/
.text-center{text-align:center!important;}
.glass{
  background:var(--clr-surface);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glass);
}
.parallax-bg{
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed;
  position:relative;
  isolation:isolate;
}
.parallax-bg::before{
  content:"";
  position:absolute;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:-1;
}

/*==============================
=  4. BUTTONS (.btn)           =
==============================*/
.btn,
button,
input[type='submit']{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.75rem;
  font-family:var(--font-head);
  font-size:1.05rem;
  letter-spacing:.6px;
  border:none;
  border-radius:var(--radius-md);
  color:var(--clr-text-light);
  background:var(--gradient-main);
  cursor:pointer;
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translateY(-2px) scale(1.03) rotateX(12deg);
  box-shadow:0 10px 24px rgba(0,0,0,0.2);
}
.btn:active{transform:translateY(0) scale(.98);}

/*==============================
=  5. NAVBAR & HEADER          =
==============================*/
.navbar{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.45);
  border-bottom:1px solid var(--clr-border);
}
.navbar-item.is-active,
.navbar-item:focus,
.navbar-item:hover{color:var(--clr-secondary-dark)!important;}

/*==============================
=  6. HERO SECTION             =
==============================*/
.hero{
  min-height:85vh;
  position:relative;
  display:flex;
  align-items:center;
}
.hero .title,
.hero .subtitle{color:var(--clr-text-light);text-shadow:1px 1px 4px rgba(0,0,0,.7);}
.hero .button{margin-top:1.5rem;}

@keyframes heroTilt{
  0%{transform:rotateX(0deg) rotateY(0deg);}
  50%{transform:rotateX(3deg) rotateY(-3deg);}
  100%{transform:rotateX(0deg) rotateY(0deg);}
}
.hero-body>.container{
  animation:heroTilt 10s ease-in-out infinite alternate;
}

/*==============================
=  7. STATISTICS BLOCK         =
==============================*/
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2rem;
  margin-top:2.5rem;
}
.stat-item{
  @extend .glass; /* Bulma won’t parse, so write class instead */
}
.stat-item{
  padding:2rem 1rem;
  text-align:center;
}
.stat-item .number{
  font-family:var(--font-head);
  font-size:2.5rem;
  color:var(--clr-primary-dark);
  margin-bottom:.25rem;
}

/*==============================
=  8. CARD /STUDIES, AWARDS    =
==============================*/
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glass);
  transition:transform var(--fast),box-shadow var(--fast);
}
.card:hover{transform:translateY(-6px) rotateX(6deg);}
.image-container{
  width:100%;
  height:210px;
  overflow:hidden;
  border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg);
}
.image-container img{
  width:100%;height:100%;
  object-fit:cover;
  margin:0 auto;
}
.card-content{padding:1.5rem;}
.read-more{
  display:inline-block;
  margin-top:1rem;
  font-weight:600;
  color:var(--clr-accent-dark);
  position:relative;
  transition:color var(--fast);
}
.read-more::after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:0;height:2px;background:var(--clr-accent-dark);
  transition:width var(--fast);
}
.read-more:hover{color:var(--clr-secondary-dark);}
.read-more:hover::after{width:100%;}

/*==============================
=  9. BEHIND THE SCENES        =
==============================*/
.behind-scene-img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glass);
}

/*==============================
= 10. MEDIA & EVENTS           =
==============================*/
.media-mentions p,
.events p{max-width:720px;margin-inline:auto;}

/*==============================
= 11. CONTACT FORM             =
==============================*/
#contactForm .field:not(:last-child){margin-bottom:1.25rem;}
#contactForm .input,
#contactForm .textarea{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  box-shadow:inset 0 0 6px rgba(0,0,0,.05);
  transition:border var(--fast),box-shadow var(--fast);
}
#contactForm .input:focus,
#contactForm .textarea:focus{
  border-color:var(--clr-primary-dark);
  box-shadow:0 0 0 3px rgba(143,182,255,.25);
}

/*==============================
= 12. FOOTER                   =
==============================*/
.footer{
  padding:3rem 1rem 4rem;
  background:var(--gradient-dark);
  color:var(--clr-text-light);
}
.footer a{color:var(--clr-text-light);font-weight:600;margin:0 .25rem;}
.footer a:hover{color:var(--clr-accent);}
.footer p{margin:.25rem 0;}

/*==============================
= 13. SOCIAL ICONS (TEXT)      =
==============================*/
.social-link{
  display:inline-block;
  padding:.35rem .75rem;
  border-radius:var(--radius-md);
  font-weight:600;
  background:rgba(255,255,255,0.18);
  transition:background var(--fast) ease;
}
.social-link:hover{background:rgba(255,255,255,0.3);}

/*==============================
= 14. PAGE SPECIFICS           =
==============================*/
.page-success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-main);
  color:var(--clr-text-light);
  text-align:center;
}
.legal-page{padding-top:100px;} /* privacy, terms */

/*==============================
= 15. ANIMATIONS / 3D EFFECTS  =
==============================*/
@keyframes floatCard{
  0%{transform:translateY(0) rotateX(0deg) rotateY(0deg);}
  50%{transform:translateY(-8px) rotateX(6deg) rotateY(-6deg);}
  100%{transform:translateY(0) rotateX(0deg) rotateY(0deg);}
}
.card:hover{animation:floatCard 1.8s ease-in-out infinite;}
/* Smooth fade-in on scroll via ScrollReveal or GSAP */
.reveal{opacity:0;transform:translateY(30px);}
.reveal.animated{opacity:1;transform:none;transition:all var(--slow) ease-out;}

/*==============================
= 16. RESPONSIVE TWEAKS        =
==============================*/
@media (max-width:768px){
  .hero{min-height:70vh;}
  .navbar-menu{backdrop-filter:none;background:var(--clr-bg);}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .btn{font-size:.95rem;padding:.6rem 1.4rem;}
}