/*======================================================

AXIS SOLUTIONS LLC
components.css

Interactive Components

======================================================*/


/*======================================================

HEADER STICKY

======================================================*/

.header.sticky{

    background:#ffffff;

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

    animation:headerSlide .35s ease;

}

@keyframes headerSlide{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}


/*======================================================

ACTIVE MENU

======================================================*/

.menu a.active{

    color:var(--primary);

}

.menu a.active::after{

    width:100%;

}


/*======================================================

MOBILE MENU

======================================================*/

@media(max-width:992px){

.menu{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    background:#fff;

    flex-direction:column;

    padding:40px;

    transition:.35s;

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

}

.menu.open{

    left:0;

}

.mobile-menu.active{

    color:var(--primary-dark);

}

}


/*======================================================

BACK TO TOP

======================================================*/

.back-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

    font-size:20px;

    box-shadow:var(--shadow-md);

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

.back-top:hover{

    background:var(--primary-dark);

    transform:translateY(-5px);

}


/*======================================================

REVEAL

======================================================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

    transition:.8s ease;

}


/*======================================================

BUTTON RIPPLE

======================================================*/

.btn,

.btn-header,

.btn-outline{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

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

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}


/*======================================================

TOAST

======================================================*/

.toast-message{

    position:fixed;

    top:25px;

    right:25px;

    min-width:300px;

    padding:18px 25px;

    color:#fff;

    border-radius:10px;

    opacity:0;

    transform:translateX(100px);

    transition:.35s;

    z-index:99999;

    font-weight:600;

}

.toast-message.show{

    opacity:1;

    transform:translateX(0);

}

.toast-message.success{

    background:#16a34a;

}

.toast-message.error{

    background:#dc2626;

}


/*======================================================

PAGE LOADER

======================================================*/

.page-loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.loader-spinner{

    width:70px;

    height:70px;

    border:6px solid #ececec;

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:spin .8s linear infinite;

    margin-bottom:20px;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/*======================================================

SCROLL PROGRESS

======================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0;

    background:var(--primary);

    z-index:999999;

}


/*======================================================

IMAGE EFFECTS

======================================================*/

.project-card img{

    transition:.45s;

}

.project-card:hover img{

    transform:scale(1.06);

}

.hero-image img{

    transition:.5s;

}

.hero-image:hover img{

    transform:scale(1.03);

}


/*======================================================

HOVER EFFECTS

======================================================*/

.service-card,

.feature-card,

.project-card,

.technology-item,

.step{

    transition:.35s;

}

.service-card:hover,

.feature-card:hover,

.project-card:hover,

.technology-item:hover,

.step:hover{

    transform:translateY(-10px);

}


/*======================================================

FORM

======================================================*/

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:15px;

    border:1px solid var(--border);

    border-radius:8px;

    font-family:inherit;

    font-size:15px;

    transition:.3s;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:var(--primary);

    outline:none;

    box-shadow:0 0 0 3px rgba(200,16,46,.12);

}


/*======================================================

SECTION TRANSITIONS

======================================================*/

section{

    transition:.35s;

}


/*======================================================

SELECTION

======================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*======================================================

SCROLLBAR

======================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:10px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}


/*======================================================

END OF FILE

Axis Solutions LLC

components.css

======================================================*/