:root
{
    --primary-color: #0077FE !important;
    --secondary-color: #000000 !important;
    --linear-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
    --font-color: #fff !important;
}

/*---------------- Font Family -----------------*/

/*------------- End of Font Family -------------*/


/*--------------- Splash Screen ----------------*/
body::before
{
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid var(--secondary-color) !important;
    background: #fff url(https://media.zid.store/cdn-cgi/image/w=240,q=90,f=auto/https://media.zid.store/a2bdc743-afed-4524-b8cd-81937f40d4bb/c62e437d-5070-4e36-b457-8b9a44140aa2.png);
    position: fixed;
    z-index: 999999;
    transform: scale(0);
    background-size: 12%;
    background-repeat: no-repeat;
    background-position: center center;
  
    animation: heartbeat 1.5s;
    animation-duration: 2.5s;
}

@keyframes heartbeat
{
    0%
    {
      transform: scale(1);
      opacity: 1;
    }
    50%
    {
      transform: scale(1.2);
      opacity: 1;
    }
    90%
    {
      opacity: 1;
    }
    100%
    {
      transform: scale(1);
      opacity: 0;
    }
}
/*------------ End of Splash Screen ------------*/

/*------------------ Header --------------------*/
.text-primary-foreground
{
    color: var(--font-color);
    background: var(--primary-color);
    font-weight: 700;
}

.text-primary-foreground p
{
    font-size: 16px !important;
}

#main-navbar
{
      padding: calc(var(--spacing)*2);
}

.logo-main img
{
    max-height: 120px !important;
    max-width: 300px;
    height: 80px !important;
    animation: bounce 3s infinite;
    transition-duration: 500ms;
}
/*--------------- End of Header ----------------*/


/*------------------- Banner -------------------*/
.hss-auto .hss-slide
{
    position: relative;
    animation: up-down 6s ease infinite;
}

.hss-link:hover .hss-img
{
    transform: scale(1) !important;
}

@property --a 
{
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.gallery-item a::after
{
    content: "";
    position: absolute;
    inset: 2px;
    background: #fff;
    z-index: -1;
    border-radius: 12px;
}

.gallery-item a
{
    position: relative;
    z-index: 9;
    background: repeating-conic-gradient(from var(--a), var(--primary-color) 0%, var(--primary-color) 5%, transparent 5%, transparent 40%, var(--primary-color) 50%);
    animation: animate 5s linear infinite;
    border-radius: 12px;
    width: 90%;
}

/* @keyframes animate
{
  0%
  {
      --a: 0deg;
  }
  
  100%
  {
      --a: 360deg;
  }
} */
/*--------------- End of Banner ----------------*/


/*----------------- Categories -----------------*/
.swiper-backface-hidden .swiper-slide
{
    margin-left: 0px !important;
}
/*------------ End of Categories ---------------*/


/*------------------ Products ------------------*/
.md\:py-16
{
    padding: calc(var(--spacing)*5);
}

.theme-title-primary
{
    color: var(--font-color) !important;
    font-size: 18px !important;
    font-weight: 700;
    background: var(--secondary-color) !important;
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    width: 20% !important;
    margin: 10px auto;
    padding: 5px 0;
}

.btn-primary-hosam
{
    color: var(--font-color);
    font-size: 18px;
    font-weight: 600;
    background-color: var(--primary-color);
    border-radius: 40px;
}
/*-------------- End of Products ---------------*/


/*-------------- Products Details --------------*/

/*---------- End of Products Details -----------*/


/*------------------- Cart ---------------------*/

/*---------------- End of Cart -----------------*/


/*--------------- Testemonials -----------------*/

/*------------ End of Testemonials -------------*/


/*----------------- Features -------------------*/

/*-------------- End of Features ---------------*/


/*------------------ Footer --------------------*/
/* footer#footer::before
{
  content: "";
  background-image: url(https://d.top4top.io/p_39615rd3a1.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  width: 100%;
  height: 80px;
  margin: -40px 0 0 0;
} */

footer#footer
{
    color: var(--footer-text-color) !important;
    background-color: var(--primary-color) !important;
    padding: calc(var(--spacing)*5);
    width: 96%;
    margin: auto;
    border-radius: 40px;
    border-top: 8px solid var(--secondary-color);
    border-bottom: 6px solid var(--secondary-color);
}

footer .md\:block
{
    max-height: 120px !important;
    max-width: 300px;
    height: 85px !important;
    width: 85px;

    animation: scale 1.4s linear infinite;
}

footer#footer h3
{
    color: var(--font-color) !important;
    font-size: 18px;
    font-weight: 700;
    background: var(--secondary-color) !important;
    border: 2px solid var(--font-color);
    border-radius: 15px;
    width: 22%;
    margin: 10px auto;
    padding: 4px 0;
}

footer#footer p,
footer#footer a,
footer#footer li,
footer#footer span,
footer#footer div
{
    color: var(--font-color) !important;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}
/*--------------- End of Footer ----------------*/


/*-------------- Mobile Screens ----------------*/
@media only screen and (max-width: 767px)
{
    /*--------------- Header ----------------*/
    .home-page::before
    {
        background-size: 15%;
    }
    
    /*--------------- Banner ----------------*/

    /*------------- Categories --------------*/
    
    /*-------------- Products ---------------*/

    /*---------- Products Details -----------*/

    /*---------------- Cart -----------------*/

    /*------------ Testemonials -------------*/
    
    /*-------------- Features ---------------*/
    
    /*--------------- Footer ----------------*/
}
/*---------- End of Mobile Screens -------------*/


/*---------------- Animations ------------------*/
@keyframes bounce
{
    0%, 100%
    {
        opacity: 1;
        transform: rotateY(0);
    }
    
    50%
    {
        opacity: 0.5;
        transform: rotateY(180deg);
    }
}

@keyframes up-down
{
    0%, 100%
    {
        top: 0;
    }
    50%
    {
        top: -25px;
    }
}

@keyframes scale
{
    0%,100%
    {
        transform: scale(1);
        opacity: 1;
    }
    50%
    {
        transform: scale(.9);
        opacity: .7;
    }
}
/*-------------- End of Animations -------------*/