:root{
  --teal:#55d0be;
  --light:#bae2e2;
  --dark:#000;
  --white:#fff;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  color:#000;
  overflow-x:hidden;
}

/* TOP BAR */
.top-bar{
  background:#000;
  color:#fff;
  padding:10px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
}
.top-bar a{color:var(--teal);text-decoration:none;margin-left:10px;}
.socials img{
  width:30px;
  height:30px;
  margin-left:10px;
}

/* HEADER */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 30px;
}
.logo-placeholder{
  width:300px;
  height:120px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#ffffff;
}

/* MENU */
.nav-links{
  list-style:none;
  display:flex;
  gap:15px;
}
.nav-links a{
  padding:10px 20px;
  border-radius:30px;
  background:var(--light);
  color:#000;
  text-decoration:none;
  transition:.3s;
}
.nav-links a:hover,
.nav-links a.active{
  background:var(--teal);
  color:#fff;
}
.menu-toggle{display:none;font-size:2rem;cursor:pointer;}

/* SLIDER */
.slider{
  position:relative;
  height:calc(100vh - 150px);
  min-height: 700px;
  overflow:hidden;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0.3;
  transition:opacity 1s ease;
}
.slide.active{opacity:1;z-index:1;}

.caption{
  position:absolute;
  bottom:28%;
  left:10%;
  max-width:470px;
  color:#ffffff;
  background: rgba(0, 0, 0, 0.1); /* Dark overlay for legibility */
  backdrop-filter:blur(1px); /* Soft glass effect */
  opacity: 0.95;
}
.caption h1{
  font-family:'Pacifico',cursive;
  font-size:3rem;
  opacity:0;
  transform:translateX(-40px);
}
.caption p{
  opacity:0;
  transform:translateX(-40px);
  font-size:1.2rem;
  font-weight: 600;
}

/* SECTION BASE */
section{
  scroll-margin-top:150px;
}
.section-wrap{
  min-height:80vh;
  padding:35px 30px;
  position:relative;
}
h2{
  font-family:'Pacifico',cursive;
  font-size:2.8rem;
  text-align:center;
  margin-bottom:20px;
  overflow:hidden;
}

.word span{
  opacity:0;
  display:inline-block;
  transform:translateY(20px);
}

/* CONFETTI */
.confetti::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("https://www.transparenttextures.com/patterns/confetti.png");
  opacity:.18;
  pointer-events:none;
}

/* EXPERIENCES */
.experiences{
  background-image: url("../img/experiences.webp");
  margin-bottom: 20px;
}



h2 #experiences{
  color:#fff;
}

h2 #experiences, .exp{
  background:#fff;
  padding:20px 0px;
  border-radius:25px;
  border-style: dotted;
  border-color: #000;
  text-align: center;
}


.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}
.card{
  background:#fff;
  padding:100px 30px;
  border-radius:25px;
  border-style: dotted;
  border-color: #000;
  text-align:center;
  font-family:'Pacifico',cursive;
  font-size:x-large;
  animation:ripple 4s infinite ease-in-out;
}
.card:nth-child(2){animation-delay:.3s}
.card:nth-child(3){animation-delay:.6s}
.card:nth-child(4){animation-delay:.9s}
@keyframes ripple{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(10px)}
}

/* PROCESS */
/* Creative Process Section */
#creative-process {
  background: #55d0be;
  padding: 50px 30px;
}

/* Title */
.process-title {
  text-align: center;
  font-family: 'Pacifico', cursive;
  font-size: 2.8rem;
  color: #000;
  margin-bottom: 30px;
}

/* Cards Layout */
.process-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  align-items: stretch;
}

/* Individual Card */
.process-card {
  background: #ffffff;
  padding: 35px 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.process-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 45px rgba(0,0,0,0.12);
}

/* Icons */
.process-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  display: inline-block;
}

/* Card Titles */
.process-card h3 {
  font-family: 'Pacifico', cursive;
  font-size: 1.5rem;
  color: #000;
  margin-bottom: 15px;
}

/* Card Text */
.process-card p {
  font-family: 'Poppins', sans-serif;
  color: #000;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: justify;
}

/* Animations */
.pulse {
  animation: pulse 2s infinite;
}

.bounce {
  animation: bounce 2s infinite;
}

.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* ================================
   ISOLATED BUTTONS
================================ */
.isolated-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.isolated-buttons button {
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.isolated-buttons button:hover {
  background-color: #bae2e2;
  color: #000000;
  transform: translateY(-2px);
}

/* ================================
   VIDEO LIGHTBOX
================================ */
.video-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.9);
  z-index: 9999;
}

.video-lightbox.active {
  display: flex;
}

.video-lightbox video {
  max-width: 90%;
  max-height: 90%;
}

.video-close {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
}


/* Fade-in on scroll */
/*
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
*/




/* CONTACT */
.contact{background:var(--teal);}
form{
  max-width:600px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}
#contactForm input[type="tel"] {
  letter-spacing: 0.5px;
}

input,textarea{
  padding:25px;
  border-radius:35px;
  border:none;
  font-size:1.1rem;
}
.contact-form button{
  padding:18px;
  border-radius:40px;
  border:none;
  background:#000;
  color:#fff;
  font-size:1.2rem;
  cursor:pointer;
  transition:.3s;
}
.contact-form button:hover{
  background:#bae2e2;
  color:#000000;
}

/* FOOTER */
footer{
  background:#000;
  color:#fff;
  padding:30px;
  text-align:center;
}

/* RESPONSIVE */
@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;}
  .nav-links.active{display:flex;}
  .menu-toggle{display:block;}
}

/*WhatsApp*/
.whatsapp-btn {
  margin-top: 20px;
  background: #25D366;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}


/* ================================
   FLOATING WHATSAPP BUTTON
================================ */

.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: whatsappPulse 2.5s infinite;
  transition: transform 0.3s ease;
}

.whatsapp-float img {
  width: 32px;
  height: 32px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

/* Pulse animation */
@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 20px;
    right: 20px;
  }
}


/*Autohide  whatsapp during portfolio lightbox*/
body.lightbox-open .whatsapp-float {
  display: none;
}