/* =========================
   GLOBAL TRANSITIONS
========================= */

*{

  transition:
  all 0.35s ease;

}



/* =========================
   NAVBAR HOVER
========================= */

nav a{

  position:relative;

}


nav a::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-6px;

  width:0;

  height:2px;

  background:#9333ea;

}


nav a:hover::after{

  width:100%;

}



/* =========================
   BUTTON EFFECTS
========================= */

.primary-btn,

.demo-btn,

.secondary-btn,

.login-btn,

button{

  position:relative;

  overflow:hidden;

}


.primary-btn:hover,

.demo-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
  0 12px 30px rgba(147,51,234,0.3);

}


.secondary-btn:hover,

.login-btn:hover{

  transform:
  translateY(-3px);

}



/* =========================
   DASHBOARD FLOATING
========================= */

.dashboard-preview{

  animation:
  floating 4s ease-in-out infinite;

}


@keyframes floating{

  0%{

    transform:
    translateY(0);

  }


  50%{

    transform:
    translateY(-15px);

  }


  100%{

    transform:
    translateY(0);

  }

}



/* =========================
   FEATURE CARDS
========================= */

.feature-card{

  cursor:pointer;

}


.feature-card:hover{

  transform:
  translateY(-12px);

  box-shadow:
  0 20px 40px rgba(0,0,0,0.12);

}



/* =========================
   PRICING CARDS
========================= */

.pricing-card:hover{

  transform:
  scale(1.03);

  box-shadow:
  0 20px 45px rgba(0,0,0,0.15);

}



/* =========================
   LOGIN CARDS
========================= */

.login-card:hover{

  transform:
  translateY(-10px);

}



/* =========================
   CONTACT BOX
========================= */

.contact-info-box:hover,

.contact-form-box:hover{

  transform:
  translateY(-8px);

}



/* =========================
   STATS CARDS
========================= */

.stat-card:hover{

  transform:
  scale(1.05);

}



/* =========================
   FADE UP EFFECT
========================= */

.fade-up{

  opacity:0;

  transform:
  translateY(40px);

  animation:
  fadeUp 1s ease forwards;

}


@keyframes fadeUp{

  to{

    opacity:1;

    transform:
    translateY(0);

  }

}



/* =========================
   HERO TEXT EFFECT
========================= */

.hero-content h1{

  animation:
  slideLeft 1s ease;

}


@keyframes slideLeft{

  from{

    opacity:0;

    transform:
    translateX(-60px);

  }


  to{

    opacity:1;

    transform:
    translateX(0);

  }

}



/* =========================
   PAGE BANNER EFFECT
========================= */

.page-banner h1{

  animation:
  zoomIn 1s ease;

}


@keyframes zoomIn{

  from{

    opacity:0;

    transform:
    scale(0.8);

  }


  to{

    opacity:1;

    transform:
    scale(1);

  }

}