/* ==========================================
   ANIMATIONS.CSS
   Nandkishore Steel & Pipe Distributor
========================================== */


/* Smooth Scrolling */

html{
    scroll-behavior:smooth;
}


/* General Animation */

*{
    transition:all .35s ease;
}


/* ===============================
      Fade Up
================================ */

.fade-up{
    opacity:0;
    transform:translateY(50px);
    animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{

0%{
    opacity:0;
    transform:translateY(50px);
}

100%{
    opacity:1;
    transform:translateY(0);
}

}


/* ===============================
      Fade Left
================================ */

.fade-left{

    opacity:0;
    transform:translateX(-60px);
    animation:fadeLeft .9s forwards;

}

@keyframes fadeLeft{

0%{

opacity:0;
transform:translateX(-60px);

}

100%{

opacity:1;
transform:translateX(0);

}

}


/* ===============================
      Fade Right
================================ */

.fade-right{

opacity:0;
transform:translateX(60px);
animation:fadeRight .9s forwards;

}

@keyframes fadeRight{

0%{

opacity:0;
transform:translateX(60px);

}

100%{

opacity:1;
transform:translateX(0);

}

}


/* ===============================
      Zoom In
================================ */

.zoom{

animation:zoom .8s ease;

}

@keyframes zoom{

0%{

opacity:0;
transform:scale(.8);

}

100%{

opacity:1;
transform:scale(1);

}

}


/* ===============================
      Hero Animation
================================ */

.hero h4{

animation:heroFade 1s;

}

.hero h1{

animation:heroFade 1.4s;

}

.hero p{

animation:heroFade 1.8s;

}

.hero-buttons{

animation:heroFade 2.2s;

}

@keyframes heroFade{

0%{

opacity:0;
transform:translateY(40px);

}

100%{

opacity:1;
transform:translateY(0);

}

}


/* ===============================
      Navbar Hover
================================ */

nav ul li a{

position:relative;

}

nav ul li a::after{

content:"";
position:absolute;

left:0;
bottom:-8px;

width:0%;
height:2px;

background:#d4a017;

transition:.35s;

}

nav ul li a:hover::after{

width:100%;

}


/* ===============================
      Buttons
================================ */

.btn{

position:relative;
overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

left:-120%;
top:0;

width:100%;
height:100%;

background:rgba(255,255,255,.3);

transform:skewX(-30deg);

transition:.5s;

}

.btn:hover::before{

left:130%;

}


/* ===============================
      Product Cards
================================ */

.product-card{

transition:.35s;

}

.product-card:hover{

transform:translateY(-15px);

box-shadow:

0 20px 45px rgba(0,0,0,.15);

}


/* ===============================
      Brand Cards
================================ */

.brand-card{

transition:.35s;

}

.brand-card:hover{

transform:translateY(-12px);

box-shadow:

0 20px 45px rgba(0,0,0,.15);

}


/* ===============================
      Image Hover
================================ */

img{

transition:.5s;

}

.brand-card img:hover{

transform:scale(1.08);

}

.about-home img:hover{

transform:scale(1.03);

}


/* ===============================
      Gallery Hover
================================ */

.gallery img{

transition:.4s;

cursor:pointer;

}

.gallery img:hover{

transform:scale(1.08);

}


/* ===============================
      Counter
================================ */

.counter-grid div{

transition:.35s;

}

.counter-grid div:hover{

transform:translateY(-10px);

}


/* ===============================
      Icons
================================ */

i{

transition:.35s;

}

.product-card:hover i{

transform:rotate(10deg) scale(1.2);

color:#d4a017;

}

.why-grid div:hover i{

transform:scale(1.2);

}


/* ===============================
      Footer Links
================================ */

footer a{

transition:.35s;

}

footer a:hover{

padding-left:8px;

color:#d4a017;

}


/* ===============================
      CTA
================================ */

.cta{

animation:fadeUp 1s;

}


/* ===============================
      Floating Effect
================================ */

.float{

animation:floating 3s ease infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


/* ===============================
      Pulse
================================ */

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}


/* ===============================
      Rotate
================================ */

.rotate{

animation:rotate 10s linear infinite;

}

@keyframes rotate{

100%{

transform:rotate(360deg);

}

}


/* ===============================
      Loader
================================ */

.loader{

width:60px;
height:60px;

border-radius:50%;

border:5px solid #eee;

border-top:5px solid #0f2747;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


/* ===============================
      Scroll Reveal
================================ */

.reveal{

opacity:0;
transform:translateY(80px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}


/* ===============================
      Fade Delay
================================ */

.delay-1{

animation-delay:.2s;

}

.delay-2{

animation-delay:.4s;

}

.delay-3{

animation-delay:.6s;

}

.delay-4{

animation-delay:.8s;

}


/* ===============================
      Selection
================================ */

::selection{

background:#0f2747;
color:white;

}


/* ===============================
      Scrollbar
================================ */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#efefef;

}

::-webkit-scrollbar-thumb{

background:#0f2747;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#d4a017;

}