/*==================================================
ORIQO FOODS
style.css
Page 3C
Animations & Utilities
==================================================*/

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

#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#ffffff;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.5s;
}

.loader-circle{
width:70px;
height:70px;
border:6px solid #eeeeee;
border-top:6px solid var(--secondary);
border-radius:50%;
animation:spin 1s linear infinite;
}

.loader-hide{
opacity:0;
visibility:hidden;
}

@keyframes spin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

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

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

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

.zoom{

opacity:0;

transform:scale(.9);

transition:.7s;

}

.zoom.show{

opacity:1;

transform:scale(1);

}

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

.float{

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

}

@keyframes float{

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

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}

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

.hover-scale{

transition:.4s;

}

.hover-scale:hover{

transform:scale(1.05);

}

/*==========================
CUSTOM SCROLLBAR
==========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#c89d1b;

}

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

.back-top{

position:fixed;

bottom:95px;

right:25px;

width:55px;

height:55px;

background:var(--secondary);

color:#111;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:24px;

text-decoration:none;

box-shadow:0 10px 25px rgba(0,0,0,.2);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.back-top.active{

opacity:1;

visibility:visible;

}

.back-top:hover{

transform:translateY(-5px);

}

/*==========================
WHATSAPP BUTTON
==========================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:#fff;

text-decoration:none;

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

z-index:999;

animation:pulse 2s infinite;

}

.whatsapp:hover{

transform:scale(1.08);

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.6);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

/*==========================
UTILITY CLASSES
==========================*/

.text-center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mt-50{

margin-top:50px;

}

.mb-20{

margin-bottom:20px;

}

.mb-40{

margin-bottom:40px;

}

.py-100{

padding:100px 0;

}

.shadow{

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

}

.rounded{

border-radius:20px;

}

/*==========================
IMAGE EFFECT
==========================*/

.image-box{

overflow:hidden;

border-radius:20px;

}

.image-box img{

transition:.5s;

}

.image-box:hover img{

transform:scale(1.08);

}

/*==========================
GRADIENT BACKGROUND
==========================*/

.bg-gradient{

background:linear-gradient(135deg,var(--primary),#15734a);

color:#fff;

}

/*==========================
SELECTION COLOR
==========================*/

::selection{

background:var(--secondary);

color:#111;

}

/*==========================
SMALL DEVICES
==========================*/

@media(max-width:768px){

.whatsapp{

width:55px;

height:55px;

font-size:28px;

right:18px;

bottom:18px;

}

.back-top{

width:50px;

height:50px;

right:18px;

bottom:85px;

}

.py-100{

padding:70px 0;

}

}

/*==========================
EXTRA SMALL DEVICES
==========================*/

@media(max-width:480px){

.whatsapp{

width:50px;

height:50px;

font-size:26px;

}

.back-top{

width:45px;

height:45px;

font-size:20px;

}

}