:root{
	--page_color:#FF5A5A;
	--primary: #ba7b27;
}


/* RIBBON */

.service-ribbon{

overflow:hidden;

background: var(--page_color);

padding:12px 0;

white-space:nowrap;

}



.ribbon-track{

display:inline-flex;

gap:50px;

animation:ribbonMove 30s linear infinite;

}



.ribbon-track span{

font-weight:600;

opacity:.8;

}



@keyframes ribbonMove{

from{

transform:translateX(0);

}

to{

transform:translateX(-50%);

}

}



/* HERO */

.subbrand-hero{

padding:120px 0;

background:url('hero.webp');

background-size:cover;

background-position:center;

}



.subbrand-hero-content{

max-width:800px;

}



.subbrand-hero h1{

font-size:clamp(3rem,8vw,6rem);

margin-bottom:20px;

}



.subbrand-hero p{

font-size:1.1rem;

max-width:700px;

line-height:1.8;

margin-bottom:40px;

}



/* SEARCH */

.subbrand-search{

width:100%;

padding:20px 30px;

font-size:1.1rem;

border-radius: 0 10px;

border: 2px solid var(--page_color);

}



/* PRODUCTS */

.product-grid{

	display:grid;
    grid-template-columns:repeat(
        auto-fill,
        minmax(250px, 250px)
    );
    gap:30px;

    justify-content:center;

}



.product-card{

display:block;

text-decoration:none;

color:inherit;

overflow:hidden;

border-radius:25px;

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

transition:.3s;

}



.product-card:hover{

transform:translateY(-8px);

}



.product-card img{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

display:block;

}



.product-card h3{

padding:20px 20px 10px;

}



.product-card p{

padding:0 20px 20px;

opacity:.7;

}





/**************** FOOTER *************/

.footer{

position:relative;

overflow:hidden;

padding:

100px 0 40px;

text-align:center;

}



.footer::before{

content:"";

position:absolute;

top:-200px;

left:50%;

transform:translateX(-50%);

width:600px;

height:600px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(

90,

170,

255,

0.08

),

transparent

);

pointer-events:none;

}



.footer-top{

position:relative;

z-index:2;

}



.footer-logo{

width:90px;

opacity:.9;

}



.footer-top h2{

font-size:

clamp(

2rem,

5vw,

4rem

);

margin-top:20px;

}



.footer-tagline{

margin-top:15px;

font-weight:600;

opacity:.8;

}



.footer-subtag{

margin-top:10px;

opacity:.55;

}



.footer-grid{

margin-top:80px;

display:grid;

grid-template-columns:

repeat(

3,

1fr

);

gap:50px;

text-align:left;

}



.footer-grid h4{

margin-bottom:20px;

}



.footer-grid a{

text-decoration:none;

color:inherit;

opacity:.75;

line-height:2;

transition:.3s;

}



.footer-grid a:hover{

opacity:1;

padding-left:8px;

}



.footer-divider{

width:100%;

height:1px;

margin:

60px 0 30px;

background:

linear-gradient(

90deg,

transparent,

currentColor,

transparent

);

opacity:.15;

}



.copyright{

opacity:.55;

line-height:2;

}



/*=============================
               Scroll Bar

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

/* Chrome, Edge, Opera */

::-webkit-scrollbar{

width:14px;

}



::-webkit-scrollbar-track{

background:

linear-gradient(

180deg,

#07111b,

#0b2435,

#07111b

);

}



::-webkit-scrollbar-thumb{

border-radius:999px;

border:3px solid transparent;

background-clip:padding-box;

background:

linear-gradient(

180deg,

#8de5ff,

#4aa8ff,

#1f6fff

);

}



::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(

180deg,

#bff7ff,

#70c9ff,

#3388ff

);

}



/* Firefox */

*{

scrollbar-width:thin;

scrollbar-color:

#d7b16f

#121212;

}


.gallery-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fill,minmax(120px,1fr));
    gap:15px;
    margin-top:20px;
}

.gallery-thumb{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:12px;
    transition:.3s;
}

.gallery-thumb:hover{
    transform:scale(1.05);
}

/*********************************
 *         PRODUCT LOADING
 * ****************************/

.loading-products{
    display:none;
    text-align:center;
    padding:40px 0;
}

.loader{
    width:42px;
    height:42px;
    margin:0 auto 15px;

    border:4px solid rgba(255,255,255,.15);
    border-top:4px solid var(--primary);

    border-radius:50%;

    animation: swim 6s ease-in-out infinite;
}

@keyframes swim {
  0% {
    left: 0%;
    transform: scaleX(1); /* Facing right */
  }
  49% {
    transform: scaleX(1); /* Still facing right */
  }
  50% {
    left: calc(100% - 50px);
    transform: scaleX(-1); /* Turn around and face left */
  }
  99% {
    transform: scaleX(-1); /* Still facing left */
  }
  100% {
    left: 0%;
    transform: scaleX(1); /* Turn around and face right */
  }
}

.loading-products p{
    opacity:.8;
    font-size:.95rem;
}


.loading-logo{
    width:60px;
    animation:
        floatLogo 2s ease-in-out infinite,
        spin 8s linear infinite;
}

@keyframes floatLogo{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}