/*==================================================
  BRIMA Corporate Website
  animation.css - Part 1
  Animation Variables & Keyframes
==================================================*/


/*======================================
  ANIMATION VARIABLES
======================================*/

:root{

    --anim-fast: .25s;

    --anim-normal: .45s;

    --anim-slow: .75s;

    --anim-extra:1.2s;

    --ease-default:cubic-bezier(.4,0,.2,1);

    --ease-bounce:cubic-bezier(.68,-0.55,.27,1.55);

}


/*======================================
  PERFORMANCE
======================================*/

.animate,

.reveal,

.fade-up,

.fade-down,

.fade-left,

.fade-right,

.zoom-in,

.zoom-out,

.rotate-in{

    will-change:transform, opacity;

    backface-visibility:hidden;

    transform:translateZ(0);

}


/*======================================
  FADE
======================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}


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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*======================================
  FADE DOWN
======================================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*======================================
  FADE LEFT
======================================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*======================================
  FADE RIGHT
======================================*/

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*======================================
  ZOOM
======================================*/

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.15);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*======================================
  ROTATE
======================================*/

@keyframes rotateIn{

    from{

        opacity:0;

        transform:rotate(-12deg) scale(.9);

    }

    to{

        opacity:1;

        transform:rotate(0) scale(1);

    }

}


/*======================================
  SCALE
======================================*/

@keyframes scaleUp{

    from{

        transform:scale(.95);

    }

    to{

        transform:scale(1);

    }

}


/*======================================
  FLOAT
======================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


/*======================================
  PULSE
======================================*/

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


/*======================================
  BOUNCE
======================================*/

@keyframes bounce{

    0%,

    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}


/*======================================
  SHAKE
======================================*/

@keyframes shake{

    0%,

    100%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-5px);

    }

    40%{

        transform:translateX(5px);

    }

    60%{

        transform:translateX(-4px);

    }

    80%{

        transform:translateX(4px);

    }

}


/*======================================
  END OF PART 1
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 2
  Animation Utility Classes
==================================================*/


/*======================================
  BASE ANIMATION
======================================*/

.animate{

    animation-duration:var(--anim-normal);

    animation-fill-mode:both;

    animation-timing-function:var(--ease-default);

}


/*======================================
  FADE
======================================*/

.fade-in{

    animation-name:fadeIn;

}

.fade-out{

    animation-name:fadeOut;

}

.fade-up{

    animation-name:fadeUp;

}

.fade-down{

    animation-name:fadeDown;

}

.fade-left{

    animation-name:fadeLeft;

}

.fade-right{

    animation-name:fadeRight;

}


/*======================================
  ZOOM
======================================*/

.zoom-in{

    animation-name:zoomIn;

}

.zoom-out{

    animation-name:zoomOut;

}


/*======================================
  ROTATE
======================================*/

.rotate-in{

    animation-name:rotateIn;

}

.scale-up{

    animation-name:scaleUp;

}


/*======================================
  LOOP ANIMATION
======================================*/

.floating{

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

}

.pulse{

    animation:pulse 2s ease-in-out infinite;

}

.bounce{

    animation:bounce 2s ease infinite;

}

.shake:hover{

    animation:shake .6s;

}


/*======================================
  SPEED
======================================*/

.speed-fast{

    animation-duration:var(--anim-fast);

}

.speed-normal{

    animation-duration:var(--anim-normal);

}

.speed-slow{

    animation-duration:var(--anim-slow);

}

.speed-extra{

    animation-duration:var(--anim-extra);

}


/*======================================
  DELAY
======================================*/

.delay-100{animation-delay:.1s;}

.delay-200{animation-delay:.2s;}

.delay-300{animation-delay:.3s;}

.delay-400{animation-delay:.4s;}

.delay-500{animation-delay:.5s;}

.delay-600{animation-delay:.6s;}

.delay-700{animation-delay:.7s;}

.delay-800{animation-delay:.8s;}

.delay-900{animation-delay:.9s;}

.delay-1000{animation-delay:1s;}

.delay-1200{animation-delay:1.2s;}

.delay-1500{animation-delay:1.5s;}


/*======================================
  ITERATION
======================================*/

.once{

    animation-iteration-count:1;

}

.twice{

    animation-iteration-count:2;

}

.infinite{

    animation-iteration-count:infinite;

}


/*======================================
  DIRECTION
======================================*/

.reverse{

    animation-direction:reverse;

}

.alternate{

    animation-direction:alternate;

}

.alternate-reverse{

    animation-direction:alternate-reverse;

}


/*======================================
  PLAY STATE
======================================*/

.paused{

    animation-play-state:paused;

}

.running{

    animation-play-state:running;

}


/*======================================
  HOVER EFFECTS
======================================*/

.hover-lift{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

    box-shadow:0 16px 40px rgba(0,0,0,.12);

}

.hover-scale{

    transition:transform .35s ease;

}

.hover-scale:hover{

    transform:scale(1.04);

}

.hover-rotate{

    transition:transform .35s ease;

}

.hover-rotate:hover{

    transform:rotate(2deg);

}

.hover-opacity{

    transition:opacity .3s ease;

}

.hover-opacity:hover{

    opacity:.85;

}


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

.transition{

    transition:all .35s ease;

}

.transition-fast{

    transition:all .2s ease;

}

.transition-slow{

    transition:all .6s ease;

}


/*======================================
  TRANSFORM ORIGIN
======================================*/

.origin-center{

    transform-origin:center;

}

.origin-top{

    transform-origin:top center;

}

.origin-bottom{

    transform-origin:bottom center;

}

.origin-left{

    transform-origin:left center;

}

.origin-right{

    transform-origin:right center;

}


/*======================================
  VISIBILITY HELPERS
======================================*/

.hidden-before{

    opacity:0;

}

.visible-after{

    opacity:1;

}


/*======================================
  END OF PART 2
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 3
  Hero Section Animation
==================================================*/


/*======================================
  HERO INITIAL STATE
======================================*/

.hero{

    overflow:hidden;

    position:relative;

}

.hero-content>*{

    opacity:0;

}

.hero-image{

    opacity:0;

}


/*======================================
  HERO TITLE
======================================*/

.hero-title{

    animation:
        fadeUp .9s var(--ease-default) forwards;

}

.hero-title span{

    display:inline-block;

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

}


/*======================================
  HERO SUBTITLE
======================================*/

.hero-subtitle{

    animation:
        fadeUp .9s var(--ease-default) .25s forwards;

}


/*======================================
  HERO DESCRIPTION
======================================*/

.hero-description{

    animation:
        fadeUp .9s var(--ease-default) .45s forwards;

}


/*======================================
  HERO BUTTONS
======================================*/

.hero-buttons{

    opacity:0;

    animation:
        fadeUp .9s var(--ease-default) .65s forwards;

}

.hero-buttons .btn{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.hero-buttons .btn:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}


/*======================================
  HERO IMAGE
======================================*/

.hero-image{

    animation:
        zoomIn 1s ease .4s forwards,
        floating 5s ease-in-out 1.6s infinite;

}

.hero-image img{

    width:100%;

    display:block;

}


/*======================================
  HERO BADGE
======================================*/

.hero-badge{

    opacity:0;

    animation:
        fadeRight .8s ease .9s forwards;

}


/*======================================
  HERO SCROLL INDICATOR
======================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    animation:
        bounce 2.5s infinite;

}

.hero-scroll i{

    font-size:28px;

}


/*======================================
  HERO SHAPES
======================================*/

.hero-shape{

    position:absolute;

    pointer-events:none;

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

}

.hero-shape.shape-1{

    top:10%;

    left:6%;

    animation-delay:.2s;

}

.hero-shape.shape-2{

    top:22%;

    right:10%;

    animation-delay:1s;

}

.hero-shape.shape-3{

    bottom:15%;

    left:15%;

    animation-delay:2s;

}

.hero-shape.shape-4{

    bottom:10%;

    right:8%;

    animation-delay:3s;

}


/*======================================
  HERO OVERLAY
======================================*/

.hero-overlay{

    opacity:0;

    animation:
        fadeIn 1.5s ease forwards;

}


/*======================================
  HERO GRADIENT
======================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.08;

    background:
        radial-gradient(circle at top left,
        rgba(255,255,255,.45),
        transparent 55%);

    pointer-events:none;

}


/*======================================
  HERO CLIENT LOGOS
======================================*/

.hero-clients{

    opacity:0;

    animation:
        fadeUp .8s ease 1s forwards;

}

.hero-clients img{

    transition:
        transform .3s ease,
        opacity .3s ease;

}

.hero-clients img:hover{

    transform:scale(1.08);

    opacity:1;

}


/*======================================
  HERO STATISTICS
======================================*/

.hero-stats{

    opacity:0;

    animation:
        fadeUp .8s ease 1.15s forwards;

}

.hero-stats .stat{

    transition:
        transform .3s ease;

}

.hero-stats .stat:hover{

    transform:translateY(-5px);

}


/*======================================
  HERO BACKGROUND PARALLAX
======================================*/

.hero-bg{

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

    transform-origin:center;

}


/*======================================
  END OF PART 3
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 4
  Section Animation
==================================================*/


/*======================================
  ABOUT SECTION
======================================*/

.about-content{

    animation:fadeLeft .9s var(--ease-default);

}

.about-image{

    animation:fadeRight .9s var(--ease-default);

}

.about-image img{

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}

.about-image:hover img{

    transform:scale(1.03);

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}


/*======================================
  SECTION TITLE
======================================*/

.section-title{

    position:relative;

}

.section-title::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin:14px auto 0;

    border-radius:20px;

    background:var(--primary);

    animation:scaleUp .8s ease;

}


/*======================================
  SECTION HEADER
======================================*/

.section-header{

    animation:fadeUp .8s ease;

}


/*======================================
  VISION & MISSION
======================================*/

.vision-card,

.value-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.vision-card:hover,

.value-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.vision-card i,

.value-card i{

    transition:
        transform .4s ease;

}

.vision-card:hover i,

.value-card:hover i{

    transform:rotate(8deg) scale(1.15);

}


/*======================================
  BUSINESS UNIT
======================================*/

.business-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.business-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

    box-shadow:0 20px 55px rgba(0,0,0,.14);

}

.business-card .icon{

    transition:
        transform .35s ease;

}

.business-card:hover .icon{

    transform:scale(1.15);

}


/*======================================
  SERVICE BOX
======================================*/

.service-box{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.service-box:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.service-box i{

    transition:
        transform .35s ease,
        color .35s ease;

}

.service-box:hover i{

    transform:scale(1.15);

}


/*======================================
  STATISTICS
======================================*/

.stats-box{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.stats-box:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,0,0,.10);

}

.stats-box h2{

    animation:pulse 3s ease-in-out infinite;

}


/*======================================
  ICON FLOAT
======================================*/

.icon-float{

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

}


/*======================================
  IMAGE HOVER
======================================*/

.img-hover{

    overflow:hidden;

}

.img-hover img{

    transition:
        transform .6s ease;

}

.img-hover:hover img{

    transform:scale(1.08);

}


/*======================================
  STAGGER SUPPORT
======================================*/

.stagger>*{

    opacity:0;

    animation:fadeUp .7s forwards;

}

.stagger>*:nth-child(1){animation-delay:.1s;}
.stagger>*:nth-child(2){animation-delay:.2s;}
.stagger>*:nth-child(3){animation-delay:.3s;}
.stagger>*:nth-child(4){animation-delay:.4s;}
.stagger>*:nth-child(5){animation-delay:.5s;}
.stagger>*:nth-child(6){animation-delay:.6s;}
.stagger>*:nth-child(7){animation-delay:.7s;}
.stagger>*:nth-child(8){animation-delay:.8s;}


/*======================================
  DIVIDER ANIMATION
======================================*/

.section-divider{

    transform:scaleX(0);

    transform-origin:center;

    animation:scaleUp .9s forwards;

}


/*======================================
  END OF PART 4
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 5
  Portfolio, Product & Card Animations
==================================================*/


/*======================================
  PORTFOLIO CARD
======================================*/

.portfolio-item{

    position:relative;

    overflow:hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}

.portfolio-item:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 55px rgba(0,0,0,.18);

}

.portfolio-item img{

    transition:
        transform .7s ease,
        filter .5s ease;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

.portfolio-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.65),
        transparent
    );

    opacity:0;

    transition:opacity .35s ease;

    z-index:1;

}

.portfolio-item:hover::before{

    opacity:1;

}

.portfolio-caption{

    position:absolute;

    left:25px;

    right:25px;

    bottom:20px;

    color:#fff;

    opacity:0;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:2;

}

.portfolio-item:hover .portfolio-caption{

    opacity:1;

    transform:translateY(0);

}


/*======================================
  PRODUCT CARD
======================================*/

.product-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.product-card img{

    transition:transform .45s ease;

}

.product-card:hover img{

    transform:scale(1.05);

}


/*======================================
  CLIENT LOGO
======================================*/

.client-logo{

    transition:
        transform .35s ease,
        opacity .35s ease,
        filter .35s ease;

    opacity:.8;

    filter:grayscale(100%);

}

.client-logo:hover{

    opacity:1;

    filter:grayscale(0);

    transform:scale(1.08);

}


/*======================================
  TESTIMONIAL CARD
======================================*/

.testimonial-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:0 16px 40px rgba(0,0,0,.12);

}

.testimonial-avatar{

    transition:transform .35s ease;

}

.testimonial-card:hover .testimonial-avatar{

    transform:rotate(5deg) scale(1.08);

}


/*======================================
  TEAM CARD
======================================*/

.team-card{

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.team-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.team-card img{

    transition:transform .6s ease;

}

.team-card:hover img{

    transform:scale(1.08);

}


/*======================================
  SOCIAL ICONS
======================================*/

.team-social a{

    transition:
        transform .3s ease,
        background .3s ease;

}

.team-social a:hover{

    transform:translateY(-4px);

}


/*======================================
  GALLERY
======================================*/

.gallery-item{

    overflow:hidden;

    position:relative;

}

.gallery-item img{

    transition:
        transform .6s ease,
        filter .4s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

    filter:brightness(.88);

}


/*======================================
  IMAGE SHINE
======================================*/

.gallery-item::after,

.portfolio-item::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-120%;

    width:50%;

    height:250%;

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

    transform:rotate(25deg);

    transition:left .8s ease;

}

.gallery-item:hover::after,

.portfolio-item:hover::after{

    left:160%;

}


/*======================================
  FEATURE CARD
======================================*/

.feature-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}


/*======================================
  HOVER GLOW
======================================*/

.hover-glow{

    transition:
        box-shadow .35s ease;

}

.hover-glow:hover{

    box-shadow:
        0 0 30px rgba(0,120,255,.18);

}


/*======================================
  CARD BORDER ANIMATION
======================================*/

.animated-border{

    position:relative;

    overflow:hidden;

}

.animated-border::before{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    transition:border-color .35s ease;

}

.animated-border:hover::before{

    border-color:var(--primary);

}


/*======================================
  END OF PART 5
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 6
  CTA, Button & Navigation Animations
==================================================*/


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

.cta{

    position:relative;

    overflow:hidden;

}

.cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.08),
        transparent 70%);

    animation:pulse 8s infinite;

}

.cta-content{

    position:relative;

    z-index:2;

    animation:fadeUp .9s ease both;

}


/*======================================
  BUTTONS
======================================*/

.btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 35px rgba(0,0,0,.15);

}

.btn:active{

    transform:scale(.98);

}


/*======================================
  RIPPLE EFFECT
======================================*/

.btn::after{

    content:"";

    position:absolute;

    width:20px;

    height:20px;

    border-radius:50%;

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

    transform:scale(0);

    opacity:0;

    pointer-events:none;

}

.btn:active::after{

    animation:ripple .55s ease-out;

}

@keyframes ripple{

    from{

        transform:scale(0);

        opacity:.7;

    }

    to{

        transform:scale(18);

        opacity:0;

    }

}


/*======================================
  NAVIGATION
======================================*/

nav ul li a{

    position:relative;

    transition:
        color .3s ease;

}

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:currentColor;

    transition:width .3s ease;

}

nav ul li a:hover::after,

nav ul li.active a::after{

    width:100%;

}


/*======================================
  DROPDOWN MENU
======================================*/

.dropdown-menu{

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/*======================================
  HAMBURGER MENU
======================================*/

.menu-toggle{

    transition:transform .3s ease;

}

.menu-toggle:hover{

    transform:rotate(90deg);

}

.menu-toggle i{

    transition:transform .3s ease;

}

.menu-open .menu-toggle i{

    transform:rotate(180deg);

}


/*======================================
  WHATSAPP FLOAT
======================================*/

.whatsapp-float{

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

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.whatsapp-float:hover{

    transform:scale(1.1);

    box-shadow:0 15px 40px rgba(37,211,102,.35);

}


/*======================================
  BACK TO TOP
======================================*/

.back-to-top{

    transition:
        transform .3s ease,
        opacity .3s ease;

}

.back-to-top:hover{

    transform:translateY(-5px);

}

.back-to-top.show{

    animation:fadeUp .4s ease;

}


/*======================================
  ICONS
======================================*/

.icon-spin:hover{

    animation:spin .8s linear;

}

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

.icon-bounce:hover{

    animation:bounce .8s;

}


/*======================================
  LINK ANIMATION
======================================*/

.link-animated{

    position:relative;

}

.link-animated::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    height:2px;

    background:currentColor;

    transform:scaleX(0);

    transform-origin:right;

    transition:transform .3s ease;

}

.link-animated:hover::after{

    transform:scaleX(1);

    transform-origin:left;

}


/*======================================
  BUTTON LOADING
======================================*/

.btn.loading{

    pointer-events:none;

    opacity:.8;

}

.btn.loading::before{

    content:"";

    display:inline-block;

    width:16px;

    height:16px;

    margin-right:8px;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

    vertical-align:middle;

}


/*======================================
  END OF PART 6
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 7
  Counter, Progress & Loading Animation
==================================================*/


/*======================================
  COUNTER
======================================*/

.counter,

.stats-box h2,

.counter-number{

    display:inline-block;

    animation:
        fadeUp .8s ease both;

}

.counter-highlight{

    animation:
        pulse 3s ease-in-out infinite;

}


/*======================================
  PROGRESS BAR
======================================*/

.progress{

    position:relative;

    width:100%;

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:#e5e7eb;

}

.progress-bar{

    width:0;

    height:100%;

    border-radius:inherit;

    transition:width 1.5s ease;

    animation:
        progressFill 2s ease forwards;

}

@keyframes progressFill{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}


/*======================================
  STRIPED PROGRESS
======================================*/

.progress-striped .progress-bar{

    background-image:
        linear-gradient(
            45deg,
            rgba(255,255,255,.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255,255,255,.15) 50%,
            rgba(255,255,255,.15) 75%,
            transparent 75%,
            transparent
        );

    background-size:40px 40px;

    animation:
        progressFill 2s ease forwards,
        progressMove 1.5s linear infinite;

}

@keyframes progressMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:40px 0;

    }

}


/*======================================
  TIMELINE
======================================*/

.timeline-item{

    opacity:0;

    animation:
        fadeUp .8s ease forwards;

}

.timeline-item:nth-child(1){animation-delay:.1s;}
.timeline-item:nth-child(2){animation-delay:.2s;}
.timeline-item:nth-child(3){animation-delay:.3s;}
.timeline-item:nth-child(4){animation-delay:.4s;}
.timeline-item:nth-child(5){animation-delay:.5s;}
.timeline-item:nth-child(6){animation-delay:.6s;}

.timeline-dot{

    animation:
        pulse 2.5s infinite;

}


/*======================================
  PROCESS STEP
======================================*/

.process-step{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.process-step:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.process-step-number{

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

}


/*======================================
  LOADER
======================================*/

.loader{

    width:48px;

    height:48px;

    border-radius:50%;

    border:4px solid rgba(0,0,0,.12);

    border-top-color:var(--primary);

    animation:
        spin .8s linear infinite;

}


/*======================================
  SKELETON
======================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#ececec;

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.6),
            transparent
        );

    animation:
        skeletonLoading 1.5s infinite;

}

@keyframes skeletonLoading{

    to{

        transform:translateX(100%);

    }

}


/*======================================
  CIRCULAR PROGRESS
======================================*/

.circular-progress{

    animation:
        rotateCircle 2s linear infinite;

}

@keyframes rotateCircle{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}


/*======================================
  SUCCESS ICON
======================================*/

.success-icon{

    animation:
        zoomIn .45s ease both,
        pulse 2.5s infinite;

}


/*======================================
  WARNING SHAKE
======================================*/

.warning{

    animation:
        shake .5s ease;

}


/*======================================
  STATUS BADGE
======================================*/

.status-badge{

    animation:
        fadeIn .5s ease;

}

.status-badge.live{

    animation:
        pulse 2s infinite;

}


/*======================================
  END OF PART 7
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 8
  Background & Decorative Animations
==================================================*/


/*======================================
  ANIMATED GRADIENT
======================================*/

.animated-gradient{

    background-size:300% 300%;

    animation:
        gradientFlow 12s ease infinite;

}

@keyframes gradientFlow{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}


/*======================================
  FLOATING SHAPES
======================================*/

.shape{

    position:absolute;

    pointer-events:none;

    animation:
        floatingShape 10s ease-in-out infinite;

}

.shape.circle{

    border-radius:50%;

}

.shape.square{

    border-radius:12px;

}

.shape.triangle{

    clip-path:polygon(
        50% 0%,
        0% 100%,
        100% 100%
    );

}

@keyframes floatingShape{

    0%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    50%{

        transform:
            translateY(-25px)
            rotate(12deg);

    }

    100%{

        transform:
            translateY(0)
            rotate(0deg);

    }

}


/*======================================
  FLOATING BUBBLES
======================================*/

.bubble{

    position:absolute;

    border-radius:50%;

    opacity:.15;

    animation:
        bubbleFloat 15s linear infinite;

}

@keyframes bubbleFloat{

    from{

        transform:
            translateY(100px)
            scale(.6);

        opacity:0;

    }

    20%{

        opacity:.25;

    }

    to{

        transform:
            translateY(-120vh)
            scale(1.2);

        opacity:0;

    }

}


/*======================================
  BLOB
======================================*/

.blob{

    animation:
        blobMorph 14s ease-in-out infinite;

}

@keyframes blobMorph{

    0%{

        border-radius:
        40% 60% 60% 40% /
        40% 40% 60% 60%;

    }

    25%{

        border-radius:
        60% 40% 50% 50% /
        50% 60% 40% 50%;

    }

    50%{

        border-radius:
        50% 50% 40% 60% /
        60% 40% 60% 40%;

    }

    75%{

        border-radius:
        45% 55% 60% 40% /
        40% 60% 50% 50%;

    }

    100%{

        border-radius:
        40% 60% 60% 40% /
        40% 40% 60% 60%;

    }

}


/*======================================
  WAVE
======================================*/

.wave{

    animation:
        waveMotion 8s ease-in-out infinite;

    transform-origin:center bottom;

}

@keyframes waveMotion{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-40px);

    }

    100%{

        transform:translateX(0);

    }

}


/*======================================
  PARALLAX
======================================*/

.parallax-bg{

    animation:
        parallaxMove 20s ease-in-out infinite;

}

@keyframes parallaxMove{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-30px);

    }

    100%{

        transform:translateY(0);

    }

}


/*======================================
  ROTATING DECORATION
======================================*/

.rotate-slow{

    animation:
        rotateSlow 30s linear infinite;

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*======================================
  GLOW
======================================*/

.glow{

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

}

@keyframes glowPulse{

    0%{

        filter:drop-shadow(0 0 0 rgba(255,255,255,.1));

    }

    50%{

        filter:drop-shadow(0 0 20px rgba(255,255,255,.45));

    }

    100%{

        filter:drop-shadow(0 0 0 rgba(255,255,255,.1));

    }

}


/*======================================
  STAR TWINKLE
======================================*/

.star{

    animation:
        twinkle 3s ease-in-out infinite;

}

@keyframes twinkle{

    0%{

        opacity:.2;

        transform:scale(.9);

    }

    50%{

        opacity:1;

        transform:scale(1.15);

    }

    100%{

        opacity:.2;

        transform:scale(.9);

    }

}


/*======================================
  BACKGROUND FADE
======================================*/

.bg-fade{

    animation:
        fadeIn 1.5s ease both;

}


/*======================================
  END OF PART 8
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 9
  Text & Typography Animations
==================================================*/


/*======================================
  TEXT REVEAL
======================================*/

.text-reveal{

    opacity:0;

    overflow:hidden;

    animation:fadeUp .8s ease forwards;

}

.text-reveal span{

    display:inline-block;

    animation:fadeUp .7s ease both;

}


/*======================================
  LETTER STAGGER
======================================*/

.letter-animation span{

    display:inline-block;

    opacity:0;

    animation:fadeUp .5s ease forwards;

}

.letter-animation span:nth-child(1){animation-delay:.05s;}
.letter-animation span:nth-child(2){animation-delay:.10s;}
.letter-animation span:nth-child(3){animation-delay:.15s;}
.letter-animation span:nth-child(4){animation-delay:.20s;}
.letter-animation span:nth-child(5){animation-delay:.25s;}
.letter-animation span:nth-child(6){animation-delay:.30s;}
.letter-animation span:nth-child(7){animation-delay:.35s;}
.letter-animation span:nth-child(8){animation-delay:.40s;}
.letter-animation span:nth-child(9){animation-delay:.45s;}
.letter-animation span:nth-child(10){animation-delay:.50s;}
.letter-animation span:nth-child(11){animation-delay:.55s;}
.letter-animation span:nth-child(12){animation-delay:.60s;}


/*======================================
  TYPING EFFECT
======================================*/

.typing{

    width:0;

    overflow:hidden;

    white-space:nowrap;

    border-right:3px solid currentColor;

    animation:
        typing 4s steps(40,end) forwards,
        cursorBlink .8s step-end infinite;

}

@keyframes typing{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes cursorBlink{

    50%{

        border-color:transparent;

    }

}


/*======================================
  GRADIENT TEXT
======================================*/

.gradient-text{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--primary)
    );

    background-size:300% auto;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:gradientFlow 8s linear infinite;

}


/*======================================
  SHINE EFFECT
======================================*/

.text-shine{

    position:relative;

    display:inline-block;

    overflow:hidden;

}

.text-shine::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.75),

        transparent

    );

    transform:skewX(-20deg);

}

.text-shine:hover::after{

    animation:textShine 1s ease;

}

@keyframes textShine{

    to{

        left:140%;

    }

}


/*======================================
  UNDERLINE ANIMATION
======================================*/

.underline-animation{

    position:relative;

    display:inline-block;

}

.underline-animation::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:currentColor;

    transition:width .35s ease;

}

.underline-animation:hover::after{

    width:100%;

}


/*======================================
  TEXT FLOAT
======================================*/

.text-float{

    display:inline-block;

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

}


/*======================================
  TEXT PULSE
======================================*/

.text-pulse{

    animation:pulse 2.5s ease-in-out infinite;

}


/*======================================
  BLOCKQUOTE
======================================*/

.quote{

    opacity:0;

    animation:fadeLeft .8s ease forwards;

}

.quote cite{

    display:block;

    margin-top:12px;

    opacity:.75;

    animation:fadeUp .8s ease .3s forwards;

}


/*======================================
  MARQUEE
======================================*/

.marquee{

    overflow:hidden;

    white-space:nowrap;

}

.marquee-content{

    display:inline-block;

    animation:marqueeMove 18s linear infinite;

}

@keyframes marqueeMove{

    from{

        transform:translateX(100%);

    }

    to{

        transform:translateX(-100%);

    }

}


/*======================================
  HIGHLIGHT
======================================*/

.text-highlight{

    position:relative;

}

.text-highlight::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:35%;

    background:rgba(255,215,0,.25);

    z-index:-1;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.text-highlight:hover::before{

    transform:scaleX(1);

}


/*======================================
  END OF PART 9
======================================*/
/*==================================================
  BRIMA Corporate Website
  animation.css - Part 10
  Performance, Accessibility & Final Utilities
==================================================*/


/*======================================
  GLOBAL ANIMATION CONTROL
======================================*/

.no-animation,

.no-animation *{

    animation:none !important;

    transition:none !important;

}


/*======================================
  GPU OPTIMIZATION
======================================*/

.gpu-animation{

    transform:translateZ(0);

    backface-visibility:hidden;

    perspective:1000px;

    will-change:transform, opacity;

}


/*======================================
  REVEAL ON SCROLL SUPPORT
======================================*/

.reveal-scroll{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}


.reveal-scroll.active{

    opacity:1;

    transform:translateY(0);

}


/*======================================
  FADE MASK
======================================*/

.mask-reveal{

    overflow:hidden;

}

.mask-reveal > *{

    transform:translateY(100%);

    animation:

        maskReveal .8s ease forwards;

}


@keyframes maskReveal{

    to{

        transform:translateY(0);

    }

}


/*======================================
  IMAGE REVEAL
======================================*/

.image-reveal{

    overflow:hidden;

}


.image-reveal img{

    transform:scale(1.15);

    animation:

        imageReveal 1s ease forwards;

}


@keyframes imageReveal{

    to{

        transform:scale(1);

    }

}


/*======================================
  STAGGER GRID
======================================*/

.stagger-grid{

    display:grid;

}


.stagger-grid > *{

    opacity:0;

    animation:

        fadeUp .7s ease forwards;

}


.stagger-grid > *:nth-child(1){

    animation-delay:.1s;

}


.stagger-grid > *:nth-child(2){

    animation-delay:.2s;

}


.stagger-grid > *:nth-child(3){

    animation-delay:.3s;

}


.stagger-grid > *:nth-child(4){

    animation-delay:.4s;

}


.stagger-grid > *:nth-child(5){

    animation-delay:.5s;

}


.stagger-grid > *:nth-child(6){

    animation-delay:.6s;

}


/*======================================
  LOADING DOTS
======================================*/

.loading-dots{

    display:flex;

    gap:6px;

}


.loading-dots span{

    width:8px;

    height:8px;

    border-radius:50%;

    animation:

        loadingDots 1.2s infinite;

}


.loading-dots span:nth-child(2){

    animation-delay:.2s;

}


.loading-dots span:nth-child(3){

    animation-delay:.4s;

}


@keyframes loadingDots{

    0%,

    80%,

    100%{

        transform:scale(.5);

        opacity:.5;

    }


    40%{

        transform:scale(1);

        opacity:1;

    }

}


/*======================================
  PAGE TRANSITION
======================================*/

.page-transition{

    animation:

        pageEnter .6s ease;

}


@keyframes pageEnter{

    from{

        opacity:0;

        transform:translateY(15px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*======================================
  HOVER BORDER GLOW
======================================*/

.border-glow{

    transition:

        box-shadow .35s ease;

}


.border-glow:hover{

    box-shadow:

        0 0 0 3px rgba(255,255,255,.1),

        0 0 25px rgba(0,120,255,.25);

}


/*======================================
  ACCESSIBILITY
======================================*/


@media (prefers-reduced-motion:reduce){


    *,

    *::before,

    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }


}


/*======================================
  PRINT MODE
======================================*/

@media print{


    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

    }


}


/*======================================
  MOBILE PERFORMANCE
======================================*/

@media(max-width:768px){


    .floating,

    .parallax-bg,

    .rotate-slow{

        animation-duration:12s;

    }


    .hero-shape,

    .bubble{

        display:none;

    }


}


/*======================================
  FINAL ANIMATION CLASSES
======================================*/


.animate-hover{

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}


.animate-hover:hover{

    transform:translateY(-5px);

}


/* Smooth appearance */

.appear{

    animation:

        fadeIn .8s ease forwards;

}


/* Soft zoom */

.soft-zoom{

    animation:

        zoomIn 1s ease forwards;

}


/* Premium entrance */

.premium-enter{

    animation:

        fadeUp 1s var(--ease-default) forwards;

}


/*======================================
  END OF ANIMATION.CSS
  BRIMA CORPORATE WEBSITE
==================================================*/