.fadingEffect-old {
    /* position:absolute; */
    top:0; bottom:0; right:0;
    width:100%;
    /* background:white; */
    transition: transform 0.5s ease;
    -moz-animation: showHide 1.5s ease-in alternate; /* Firefox */
    -webkit-animation: showHide 1.5s ease-in alternate; /* Safari and Chrome */
    -ms-animation: showHide 1.5s ease-in alternate; /* IE10 */
    -o-animation: showHide 1.5s ease-in alternate; /* Opera */
    animation: showHide 1.5s ease-in alternate;
}



.fadingEffect {
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    /* clip-path: inset(0 100% 0 0); */
    /* transition: transform 0.5s ease; */
    animation: showHide 1s ease-in-out alternate;
    /* transform: scaleX(0);
    transform-origin: left;
    animation: showHide 1.5s ease-in-out forwards; */
}

@-webkit-keyframes showHide { /* Chrome, Safari */
    0% { clip-path: inset(0 100% 0 0); }
    20% { clip-path: inset(0 80% 0 0); }
    50% { clip-path: inset(0 50% 0 0); }
    80% { clip-path: inset(0 20% 0 0); }
    100% { clip-path: inset(0 0% 0 0); }
}
@-moz-keyframes showHide { /* FF */
    0% {width:0%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-ms-keyframes showHide { /* IE10 */
    0% {width:0%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-o-keyframes showHide { /* Opera */
    0% {width:0%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@keyframes showHide {
    0% { clip-path: inset(0 100% 0 0); }

    /* 20% { clip-path: inset(0 80% 0 0); } */
    /* 50% { clip-path: inset(0 35% 0 0); } */
    /* 80% { clip-path: inset(0 20% 0 0); } */
    100% { clip-path: inset(0 0% 0 0); }
    /* 0% { transform: scaleX(0); }
    100% { transform: scaleX(1); } */
}



.fadingEffect-right-old {
    top:0; bottom:0; right:0;
    -moz-animation: showHideRight 2s ease-in alternate; /* Firefox */
    -webkit-animation: showHideRight 2s ease-in alternate; /* Safari and Chrome */
    -ms-animation: showHideRight 2s ease-in alternate; /* IE10 */
    -o-animation: showHideRight 2s ease-in alternate; /* Opera */
    animation: showHideRight 2s ease-in alternate;
}

.fadingEffect-right {
    top: 0;
    bottom: 0;
    /* right: 0; */
    /* width: 85%; */
    /* clip-path: inset(0 100% 0 0); */
    /* transition: transform 0.5s ease; */
    /* visibility: hidden; */
    animation: showHideRight 2s ease-in-out alternate;
    /* animation-delay: 0.7s; */
    /* transform: scaleX(0);
    transform-origin: left;
    animation: showHide 1.5s ease-in-out forwards; */
}

@-webkit-keyframes showHideRight { /* Chrome, Safari */
    0% {width:0%}
    40% {width:0%}
    60% {width:0%;}
    100% {width: 85%;}
}
@-moz-keyframes showHideRight { /* FF */
    0% {width:0%}
    40% {width:0%}
    60% {width:0%;}
    100% {width: 85%;}
}
@-ms-keyframes showHideRight { /* IE10 */
    0% {width:0%}
    40% {width:0%}
    60% {width:0%;}
    100% {width: 85%;}
}
@-o-keyframes showHideRight { /* Opera */
    0% {width:0%}
    40% {width:0%}
    60% {width:0%;}
    100% {width: 85%;}
}
@keyframes showHideRight {
    0% { opacity: 0;  clip-path: inset(0 0 0 100%); }

    30% { opacity: 0; clip-path: inset(0 0 0 100%); }
    /* 50% { clip-path: inset(0 35% 0 0); } */
    /* 80% { clip-path: inset(0 20% 0 0); } */
    100% { opacity: 1; clip-path: inset(0 0% 0 0); }
    /* 0% { transform: scaleX(0); }
    100% { transform: scaleX(1); } */
}

@keyframes hideRight {
    0% { opacity: 1;  clip-path: inset(0 0 0 0); }

    30% { opacity: 1; clip-path: inset(0 0 0 0); }
    /* 50% { clip-path: inset(0 35% 0 0); } */
    80% { opacity: 1; }
    100% { opacity: 0; clip-path: inset(0 0 0 100%); }
    /* 0% { transform: scaleX(0); }
    100% { transform: scaleX(1); } */
}
/* @keyframes showHideRight {
    0% {width:0%}
    40% {width:0%}
    60% {width:0%;}
    100% {width: 85%;}
} */

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
 }
 
 @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
 }
 
 .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 1.5s;
 }
 .navigation-section-animation{
    background-image: url("https://paragmilkfoods.agentc.in/assets/images/homepage/header-expand.png");
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

 .fadingEffect-company-name {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 1.8s;
}

span
{
    transform: translate3d(0px, 9.26562px, 0px);
}

.offset-header-odd{
    display: inline-block;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: myAnimation 1s ease-out forwards;
    animation-delay:1.2s ;
}
.offset-header-even{
    display: inline-block;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: myAnimation 1s ease-out forwards;
    animation-delay:1.3s ;
}

.animate{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    opacity: 1;
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: fadeup 3s ease-out forwards;
}
.animate-delay{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    opacity: 1;
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: fadeup 3s ease-out forwards;
    /* animation-delay: 0.5s; */
}

/* .offset-header-brands{
    opacity: 0;
    will-change: transform;
    opacity: 1;
    animation: brandheading 1s ease-out forwards;
    animation-delay:2.5s ;
} */

.animate-delay-right{
    
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    animation: fadeside 3s ease-out forwards;
}

.our-team-heading-1{
    display: inline-block;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    opacity: 1;
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: myAnimation 1s ease-out forwards;
}
.our-team-heading-2{
    display: inline-block;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    opacity: 1;
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: myAnimation 1.5s ease-out forwards;
}
.our-team-heading-3{
    display: inline-block;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    opacity: 1;
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: myAnimation 2s ease-out forwards;
}
.our-team-heading-4{
    display: inline-block;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    opacity: 1;
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: myAnimation 2.5s ease-out forwards;
}


@keyframes myAnimation {
    from {
        transform: translateX(-30px) translateY(30px) rotate(14deg);
        opacity: 0;
    }
    to {
        transform: translate(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
}

  .brand-image-1{
    
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: scrollup 0.7s ease-out forwards;
  }
  .brand-image-2{
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: scrollup 1s ease-out forwards;
    animation-delay: 1s;
  }
  .brand-image-3{
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: scrollup 1s ease-out forwards;
    animation-delay: 1.5s;
  }
  .brand-image-4{
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: scrollup 1s ease-out forwards;
    animation-delay: 2s;
  }

  /* @keyframes brandheading{
    from {
        transform: translateY(0px) rotate(0deg);
        opacity: 0;
    }
    to {
        transform: translateY(240px) translateX(160%) rotate(-90deg);
        opacity: 1;
    }
  } */

  /* transform: translateY(486%); */
  
  @keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
  }

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


  @keyframes fadeside {
    0% {
        transform: translateX(40px) rotateZ(270deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotateZ(270deg);
        opacity: 1;
    }
  }





  /* Header section - animations - start */

.header-expanded-1-animation{
    opacity: 1;
    animation: showHideLeft 1s ease-in-out alternate;    
}

.header-expanded-1-animation-reverse{
    opacity: 0;
    animation: hideLeft 1s ease-in-out alternate;    
}

.address-section-animation{
    opacity: 1;
    animation: showHideRight 1s ease-in-out alternate;
}
.address-section-animation-reverse{
    opacity: 0;
    animation: hideRight 1s ease-in-out alternate;
}
.menu-list-div-animation{
    opacity: 1;
    animation: showHideTop 1s ease-in-out alternate;
}

.menu-list-div-animation-reverse{
    opacity: 0;
    animation: hideTop 2s ease-in-out alternate;
}

.list-item-1{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimation 0.5s ease-out forwards;
    animation-delay:0.1s ;
}
.list-item-2{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimation 0.5s ease-out forwards;
    animation-delay:0.3s ;
}
.list-item-3{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimation 0.5s ease-out forwards;
    animation-delay:0.5s ;
}
.list-item-4{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimation 0.5s ease-out forwards;
    animation-delay:0.7s ;
}
.list-item-5{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimation 0.5s ease-out forwards;
    animation-delay:0.9s ;
}
.list-item-6{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 0;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimation 0.5s ease-out forwards;
    animation-delay:1.1s ;
}

.list-item-1-reverse{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimationReverse 0.5s ease-out forwards;
    animation-delay:1.0s ;
}
.list-item-2-reverse{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimationReverse 0.5s ease-out forwards;
    animation-delay:0.8s ;
}
.list-item-3-reverse{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimationReverse 0.5s ease-out forwards;
    animation-delay:0.6s ;
}
.list-item-4-reverse{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimationReverse 0.5s ease-out forwards;
    animation-delay:0.4s ;
}
.list-item-5-reverse{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimationReverse 0.5s ease-out forwards;
    animation-delay:0.2s ;
}
.list-item-6-reverse{
    /* display: inline-block; */
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
    will-change: transform;
    /* opacity: 1; */
    /* transform: translateY(10px) rotate(18deg);
    transform: translateY(10px) rotate(18deg); */
    animation: menuHeadingAnimationReverse 0.5s ease-out forwards;
    /* animation-delay:1.5s ; */
}

@keyframes showHideLeft {
    0% { opacity: 0;  clip-path: inset(0 100% 0 0); }

    30% { opacity: 1; clip-path: inset(0 100% 0 0); }
    /* 50% { clip-path: inset(0 35% 0 0); } */
    /* 80% { clip-path: inset(0 20% 0 0); } */
    100% { opacity: 1; clip-path: inset(0 0% 0 0); }
    /* 0% { transform: scaleX(0); }
    100% { transform: scaleX(1); } */
}

@keyframes hideLeft {
    0% { opacity: 1;  clip-path: inset(0 0% 0 0); }

    30% { opacity: 1; clip-path: inset(0 0% 0 0); }
    /* 50% { clip-path: inset(0 35% 0 0); } */
    80% { opacity:1; }
    100% { opacity: 0; clip-path: inset(0 100% 0 0); }
    /* 0% { transform: scaleX(0); }
    100% { transform: scaleX(1); } */
}



@keyframes showHideTop {
    0% { opacity: 0;  clip-path: inset(100% 0 0 0); }

    30% { opacity: 0; clip-path: inset(100% 0 0 0); }
    /* 50% { clip-path: inset(0 35% 0 0); } */
    /* 80% { clip-path: inset(0 20% 0 0); } */
    100% { opacity: 1; clip-path: inset(0 0% 0 0); }
    /* 0% { transform: scaleX(0); }
    100% { transform: scaleX(1); } */
}

@keyframes hideTop {
    0% { opacity: 1;  clip-path: inset(0 0 0 0); }

    30% { opacity: 1; clip-path: inset(0 0 0 0); }
    /* 50% { clip-path: inset(0 35% 0 0); } */
    80% { opacity: 1; }
    100% { opacity: 0; clip-path: inset(100% 0 0 0); }
    /* 0% { transform: scaleX(0); }
    100% { transform: scaleX(1); } */
}

@keyframes showHideBottom {
    0% { opacity: 0;  clip-path: inset(0 100% 0 0); }

    30% { opacity: 0; clip-path: inset(0 100% 0 0); }
    /* 50% { clip-path: inset(0 35% 0 0); } */
    /* 80% { clip-path: inset(0 20% 0 0); } */
    100% { opacity: 1; clip-path: inset(0 0% 0 0); }
    /* 0% { transform: scaleX(0); }
    100% { transform: scaleX(1); } */
}

@keyframes menuHeadingAnimation {
    from {
        transform: translateX(-30px) translateY(30px) rotate(14deg);
        opacity: 0;
    }
    to {
        transform: translate(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes menuHeadingAnimationReverse{
    from {
        transform: translate(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: translateX(-30px) translateY(30px) rotate(14deg);
        opacity: 0;
    }
}

  /* Header section - animations - end */