/*==============================
Variables
==============================*/

:root{
--bg:#161616;
--bg2:#1d1d1d;
--orange:#ef5935;
--blue:#4285ff;
--white:#fff;
--text:#c8c8c8;
--border:#2d2d2d;
}


/*==============================
General
==============================*/

body{
    background:var(--bg);
    color:white;
    font-family:Inter,sans-serif;
	font-size: 18px;
}

@font-face{
font-family:'Sora-Regular';
src:url('../fonts/Sora-Regular.ttf') format('truetype');
font-weight:400;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:'Sora-Bold';
src:url('../fonts/Sora-Bold.ttf') format('truetype');
font-weight:700;
font-style:normal;
font-display:swap;
}

h1,h2,h3,h4,h5,h6{
font-family:'Sora-Bold',sans-serif;
}
h1{
    font-size:72px;
    font-weight:800;
    line-height:1;
    margin-bottom:12px;
}
.subtitle {
	font-size: 20px;
}
.orange { color:#ef5935; }
.gradient-text{
    background:linear-gradient(
        120deg,
        #c9230c 0%,
        #fa5e48 25%,
        #ffd2c9 50%,
        #fa5e48 75%,
        #c9230c 100%
    );
    background-size:250% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;
    animation:gradientShimmer 3.5s linear infinite;
}

@keyframes gradientShimmer{
    from{
        background-position:0% center;
    }
    to{
        background-position:250% center;
    }
}

section{
    padding:90px 0;
}

img{
    max-width:100%;
}

a{
    text-decoration:none;
}

/*==============================
Announcement
==============================*/

.announcement-bar{
    background:#cf3c20;
    padding:10px 0;
}

.announcement-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/*==============================
Header
==============================*/
.hero-section{
    position:relative;
    background:#161616;
    overflow:hidden;
    padding-top:0;
}

.hero-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../images/hero-top.jpg") no-repeat;
    background-position:80% center;
    background-size:contain;
    animation:heroFloat 6s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
}

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

.hero-overlay{
position:absolute;
inset:0;
z-index:1;
}

.site-header{
position:relative;
z-index:10;
padding:0;
}

.hero-row{
position:relative;
z-index:10;
min-height:600px;
align-items:center;
}

.hero-content{
max-width:560px;
}

.logo-top{
width:150px;
}

.hero-title{
font-size:69px;
line-height:1;
margin-bottom:25px;
letter-spacing:-2px;
}

.hero-title span{
color:var(--orange);
}

.hero-subtitle{
color:#fff;
line-height:1.6;
margin-bottom:30px;
}

.hero-features{
list-style:none;
padding:0;
margin:0 0 35px;
}

.hero-features li{
display:flex;
align-items:center;
margin-bottom:18px;
font-size:18px;
}

.feature-icon{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(239,89,53,.15);
border:1px solid rgba(239,89,53,.25);
color:var(--orange);
border-radius:50%;
margin-right:15px;
flex-shrink:0;
}

.hero-badge{
margin-top:25px;
font-size:14px;
}

@media(max-width:991px){

.hero-section{
background-position:center top;
background-size:cover;
min-height:auto;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg,#161616 0%,rgba(22,22,22,.65) 60%,rgba(22,22,22,.05) 100%);
z-index:1;
}

.hero-row{
min-height:auto;
padding:40px 0;
}

.hero-content{
text-align:center;
max-width:100%;
}

.hero-features li{
justify-content:center;
}

.hero-buttons{
justify-content:center;
}

}
.btn-small{
	font-size: 16px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 30px;
background:var(--orange);
color:#fff;
border-radius:100px;
font-weight:700;
text-decoration:none;
transition:.3s;
box-shadow:0 8px 30px rgba(239,89,53,.35);
}

.btn-small:hover{
background:#ff6b49;
color:#fff;
transform:translateY(-3px);
box-shadow:0 12px 40px rgba(239,89,53,.45);
}

.btn-main{
	font-size: 20px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 30px;
background:var(--orange);
color:#fff;
border-radius:100px;
font-weight:700;
text-decoration:none;
transition:.3s;
box-shadow:0 8px 30px rgba(239,89,53,.35);
}

.btn-main:hover{
background:#ff6b49;
color:#fff;
transform:translateY(-3px);
box-shadow:0 12px 40px rgba(239,89,53,.45);
}

.hero-buttons{
display:flex;
gap:15px;
margin-bottom:30px;
}
/*==============================
END HERO SECTION
==============================*/


/*==============================
Cards
==============================*/

.feature-card,
.review-card,
.ugc-card{
    padding:10px;
}

/*==============================
Sections
==============================*/

#banner{

    background:#181818;

}

#bottom-cta{

    background:#181818;

}

/*==============================
Responsive
==============================*/

@media(max-width:991px){
h1{
    font-size:40px;
}
.hero-content{

text-align:center;

margin-bottom:40px;

}

.hero-content h1{
font-size:50px;
}

}


/*==============================
Featured
==============================*/
.feat-img { width: 60%;}
.featured {
	padding: 40px 0px;
	background-color: #060606;
}
.feature-news{
text-align:center;
color:#fff;
}
/*==============================
Power Section
==============================*/
.center-pill:hover{
    animation:pillSpin 10s linear infinite;
}

@keyframes pillSpin{
    from{
        transform:rotate(0deg) scale(1.05);
    }
    to{
        transform:rotate(-360deg) scale(1.05);
    }
}
.center-pill2{
    display:block;
    margin:0 auto;
    transition:transform .35s ease;
    transform-origin:center;
}

.center-pill2:hover{
    transform:scale(1.08);
}
.power-section{
background:#151515;
padding:90px 0;
}
.power-top-section{
background:#151515;
padding:90px 0;
}


.section-heading{
margin-bottom:70px;
}

.section-title{
font-size:68px;
line-height:1;
margin-bottom:20px;
font-family:'Sora-Bold';
}

.section-title span{
color:#ef5935;
}

.section-subtitle{
font-size:24px;
color:#d2d2d2;
margin:0;
}

.power-card{
    position:relative;
    height:520px;
    border-radius:20px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:.35s ease;
}

.power-card::before{
    content:"";
    position:absolute;
    inset:0;
}

.power-card::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:3px;
    background:#ef5935;
    transform:translateX(-50%);
    transition:width .35s ease;
    z-index:3;
}

.power-card:hover::after{
    width:100%;
}

.power-card:hover{
    transform:translateY(-6px);
}

.power-content{
    position:relative;
    z-index:2;
    width:100%;
    padding:28px;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(2px);
    text-align:left;
}

.power-card h4{
    color:#fff;
    font-size:20px;
    margin-bottom:12px;
    font-family:'Sora-Bold';
}

.power-card p{
    color:#e2e2e2;
    font-size:18px;
    line-height:1.6;
    margin:0;
    max-width:none;
}

@media(max-width:991px){

    .power-card{
        margin-bottom:20px;
    }

    .power-content{
        padding:20px;
    }

    .power-card h4{
        font-size:22px;
    }

    .power-card p{
        font-size:15px;
        line-height:1.5;
    }

}

.feature-card{
    min-height:275px;
    border-radius:24px;
    padding:55px 35px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition:all .35s ease;
}

/* Blue Card */
.blue-card{
    border:1px solid #1b8cff;
    background:radial-gradient(circle at center,#0a3252 0%,#07131d 100%);
    box-shadow:0 0 18px rgba(0,140,255,.18);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .45s ease;
}

.blue-card:hover{
    background:radial-gradient(circle at center,#07131d 0%,#0a3252 100%);
    transform:translateY(-8px) scale(1.02);
    border-color:#4eb3ff;
    box-shadow:
        0 0 25px rgba(0,140,255,.35),
        0 0 55px rgba(0,140,255,.25),
        0 0 90px rgba(0,140,255,.18);
}

/* Red Card */
.red-card{
    border:1px solid #ff5b3d;
    background:radial-gradient(circle at center,#5b1307 0%,#1b0605 100%);
    box-shadow:0 0 18px rgba(255,91,61,.18);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .45s ease;
}

.red-card:hover{
    background:radial-gradient(circle at center,#1b0605 0%,#5b1307 100%);
    transform:translateY(-8px) scale(1.02);
    border-color:#ff8a72;
    box-shadow:
        0 0 25px rgba(255,91,61,.35),
        0 0 55px rgba(255,91,61,.25),
        0 0 90px rgba(255,91,61,.18);
}

/* Text */
.feature-small,
.feature-card h2,
.feature-card {
    transition:all .35s ease;
}

.feature-small{
    font-size:26px;
    font-weight:700;
    margin-bottom:12px;
}

.blue-card .feature-small{
    color:#2b8dfd;
}

.red-card .feature-small{
    color:#ff6546;
}

.feature-card{
    font-size:36px;
    font-weight:400;
    line-height:1.05;
    margin-bottom:18px;
}

.feature-card p{
    font-size:20px;
    color:#f0f0f0;
    line-height:1.5;
    margin:0;
}

/* Shine Effect */
.feature-card::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-70%;
    width:45%;
    height:300%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );
    transform:rotate(25deg);
    transition:.8s ease;
    pointer-events:none;
}

.feature-card:hover::before{
    left:140%;
}

/* Hover Animation */
.feature-card:hover{
    transform:translateY(-8px) scale(1.05);
}

.feature-card:hover .feature-small{
    transform:translateY(-2px);
}

.feature-card:hover h2{
    transform:translateY(-3px);
}

.feature-card:hover p{
    opacity:.95;
}

.blue-card:hover{
    border-color:#4eb3ff;
    box-shadow:
        0 0 25px rgba(0,140,255,.35),
        0 0 55px rgba(0,140,255,.25),
        0 0 90px rgba(0,140,255,.18);
}

.red-card:hover{
    border-color:#ff8a72;
    box-shadow:
        0 0 25px rgba(255,91,61,.35),
        0 0 55px rgba(255,91,61,.25),
        0 0 90px rgba(255,91,61,.18);
}

/*==============================
Power Section
==============================*/


.ugc-slider{
display:flex;
gap:25px;
overflow-x:auto;
scroll-behavior:smooth;
padding-bottom:10px;
scrollbar-width:none;
}

.ugc-slider::-webkit-scrollbar{
display:none;
}

.ugc-card{
    position:relative;
    flex:0 0 300px;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .3s ease, box-shadow .3s ease;
}

.ugc-card:hover{
    transform:translateY(-6px) scale(1.03);
}


.ugc-placeholder{
width:100%;
aspect-ratio:3/4;
background:#2a2a2a;
border:1px solid #333;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-family:'Sora-Bold';
color:#777;
}

.ugc-label{
position:absolute;
right:18px;
bottom:18px;
color:#fff;
font-size:18px;
font-family:'Sora-Bold';
text-shadow:0 2px 8px rgba(0,0,0,.6);
}

@media(max-width:991px){

.ugc-card{
flex:0 0 220px;
}

}

@media(max-width:576px){

.ugc-card{
flex:0 0 180px;
}

}

.trusted-section{
background:#161616;
padding:90px 0;
}

.trustedSwiper{
padding-bottom:55px;
}

.swiper-slide{
    width: 400px !important; /* adjust size */
    height: auto;
}

.ugc-card{
position:relative;
overflow:hidden;
cursor:pointer;
}

.ugc-placeholder{
aspect-ratio:3/4;
background:#2d2d2d;
display:flex;
align-items:center;
justify-content:center;
color:#777;
font-size:24px;
font-family:'Sora-Bold';
}

.ugc-label{
position:absolute;
right:18px;
bottom:18px;
color:#fff;
font-size:18px;
font-family:'Sora-Bold';
text-shadow:0 2px 8px rgba(0,0,0,.5);
}

.swiper-pagination-bullet{
background:#777;
opacity:1;
}

.swiper-pagination-bullet-active{
background:var(--orange);
}

/*==============================
Performance Banner
==============================*/

.performance-section{
    background:#161616;
}

.performance-banner{
    min-height:560px;
    background:url("../images/hero-testi.jpg") center center no-repeat;
    background-size:cover;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.performance-title{
    font-family:"Sora-Bold";
    font-size:72px;
    line-height:.95;
    margin:0;
    font-weight:700;
}

.text-orange{
    color:#ef5935;
}

.performance-product{
    max-width:650px;
    width:100%;
    transition:.4s ease;
}

.performance-product:hover{
    transform:scale(1.05) rotate(-4deg);
}

/*==============================
Responsive
==============================*/

@media (max-width:991px){

    .performance-banner{
        min-height:auto;
        padding:70px 0;
    }

    .performance-title{
        font-size:48px;
        margin-bottom:30px;
    }

    .performance-product{
        max-width:420px;
        margin-bottom:30px;
    }

}

@media (max-width:576px){

    .performance-title{
        font-size:20px;
    }

    .performance-product{
        max-width:320px;
    }

}

.verified-buyer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    width:100%;
    color:#ef5935;
    font-size:16px;
    font-weight:400;
}

.verified-buyer i{
    font-size:16px;
    line-height:1;
}

/*==============================
Testimonials
==============================*/

.testi-card{
    min-height:275px;
    border-radius:24px;
    padding:55px 35px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition:all .35s ease;
}
/*==============================
Steps
==============================*/
.steps{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.step-item{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.step-number{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:50%;
    background:#ef5935;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    font-weight:700;
}

@media (max-width:768px){

    .steps{
        gap:35px;
    }

    .step-item{
        gap:20px;
    }

}


/* FOOTER */

.footer-banner{
    position:relative;
    background:#000;
    overflow:hidden;
}

.footer-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../images/hero-bottom.jpg") no-repeat right center;
    background-size:fit;
    opacity:.50; /* Adjust 0-1 */
    z-index:0;
}

.footer-banner > *{
    position:relative;
    z-index:1;
}

/* Mobile */

@media (max-width:768px){

    .footer-banner::before{
        background-position:center center;
        background-size:contain;
    }

}

.footer-content{
    min-height:420px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}



/* FAQ */
/* ==========================
   FAQ
========================== */

.faq-section{
    background:#161616;
}

.faq-wrapper{
    max-width:950px;
    margin:auto;
}

.accordion{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.accordion-item{
    background:#1b1b1b;
    border:1px solid #ef5935;
    border-radius:20px;
    overflow:hidden;
}

/* Remove Bootstrap borders */
.accordion-item,
.accordion-header,
.accordion-button{
    border:none;
}

.accordion-button{
    background:#1b1b1b;
    color:#fff;
    font-size:20px;
    font-weight:700;
    padding:24px 30px;
    box-shadow:none;
    border-radius:20px;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-button:not(.collapsed){
    background:#1b1b1b;
    color:#fff;
    box-shadow:none;
    border-radius:20px 20px 0 0;
}

.accordion-collapse{
    border:none;
}

.accordion-body{
    background:#1b1b1b;
    color:#cfcfcf;
    font-size:18px;
    line-height:1.8;
    padding:0 30px 30px;
}

/* Chevron */

.accordion-button::after{
    background-image:none;
    width:14px;
    height:14px;
    border-right:3px solid #ef5935;
    border-bottom:3px solid #ef5935;
    transform:rotate(45deg);
    transition:.3s;
}

.accordion-button:not(.collapsed)::after{
    transform:rotate(-135deg);
}

/* IMPORTANT: Prevent Bootstrap from removing borders */
.accordion-item:first-of-type,
.accordion-item:last-of-type,
.accordion-item:not(:first-of-type){
    border:1px solid #ef5935 !important;
    border-radius:20px !important;
}

.accordion-item:first-of-type .accordion-button,
.accordion-item:last-of-type .accordion-button{
    border-radius:20px;
}

/* ==========================
   Smooth Accordion Animation
========================== */

.accordion-collapse{
    transition:height .45s ease;
}


.accordion-collapse.show .accordion-body{
    opacity:1;
    transform:translateY(0);
}

.accordion-button::after{
    transition:transform .35s ease;
}

.accordion-button{
    transition:background-color .3s ease;
}

/* Mobile */

@media (max-width:768px){

    .accordion-button{
        font-size:20px;
        padding:20px;
    }

    .accordion-body{
        font-size:16px;
        padding:0 20px 20px;
    }

}

/* Pull Up Animation */

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform;
}

.reveal.show{
    opacity:1;
    transform:translateY(0);
}


/*==============================
Footer 2
==============================*/

.footer2{
    background:#010101;
    padding:60px 0;
}

.footer2-links{
    gap:50px;
    margin:0;
    padding:0;
}

.footer2-links li{
    list-style:none;
}

.footer2-links a{
    color:#fff;
    font-size:18px;
    font-weight:400;
    text-decoration:none;
    transition:.3s;
}

.footer2-links a:hover{
    color:#ef5935;
}

.footer2-copy{
    color:#fff;
    font-size:16px;
    text-align:center;
    margin-bottom:30px;
}

.footer2-logo{
    width:250px;
    max-width:100%;
}
.footer2-logo2{
    width:100px;
    max-width:100%;
	padding-top: 10px;
}

/*==============================
Mobile
==============================*/

@media (max-width:991px){

    .footer2{
        padding:50px 0;
    }

    .footer2-links{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .footer2-links a{
        font-size:18px;
    }

    .footer2-copy{
        font-size:18px;
        line-height:1.6;
        margin:35px 0 30px;
    }

    .footer2-logo{
        width:220px;
    }

}

/* ==========================
   Logo Slider
========================== */

.logo-slider{
    background:#161616;
    overflow:hidden;
    position:relative;
}

.logo-track{
    display:flex;
    width:max-content;
    animation:scrollLogos 25s linear infinite;
}

.logo-slide{
    display:flex;
    align-items:center;
    gap:70px;
    padding-right:70px;
}

.logo-slide img{
    height:50px;
    width:auto;
    opacity:.7;
    transition:.3s ease;
    filter:grayscale(100%);
}

.logo-slide img:hover{
    opacity:1;
    filter:none;
    transform:scale(1.08);
}

@keyframes scrollLogos{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* Fade edges */

.logo-slider::before,
.logo-slider::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.logo-slider::before{
    left:0;
    background:linear-gradient(to right,#161616,transparent);
}

.logo-slider::after{
    right:0;
    background:linear-gradient(to left,#161616,transparent);
}

/* Mobile */

@media (max-width:768px){

.logo-slide{
    gap:40px;
    padding-right:40px;
}

.logo-slide img{
    height:35px;
}

.logo-slider::before,
.logo-slider::after{
    width:50px;
}
}
/* Sticky Bottom CTA */

.sticky-cta{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#fff;
    padding:5px 0;
    border-top:1px solid #ececec;
    z-index:9999;
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
}

.sticky-product{
    width:58px;
    height:auto;
    object-fit:contain;
}

.sticky-cta h5{
    font-size:1rem;
    font-weight:700;
    line-height:1;
    margin:0;
}

.sticky-cta small{
    display:block;
    font-size:1rem;
    color:#fa5125;
    line-height:1.1;
}

.sticky-btn{
    background:#fa5125;
    color:#fff;
    border-radius:50px;
    padding:10px 20px;
    font-weight:700;
    transition:.25s;
}

.sticky-btn:hover{
    background:#e54a21;
    color:#fff;
}
.sticky-cta{
    transform:translateY(100%);
    transition:transform .35s ease;
}

.sticky-cta.show{
    transform:translateY(0);
}

@media (max-width:768px){

    .sticky-cta{
        padding:10px 0;
    }

    .sticky-product{
        width:46px;
    }

    .sticky-cta h5{
        font-size:1.1rem;
    }

    .sticky-cta small{
        font-size:.8rem;
    }

    .sticky-btn{
        padding:10px 18px;
        font-size:.9rem;
    }
}

/* Power card top */

.power-card-top{
    position:relative;
    margin-bottom:10px;
    padding-bottom:15px;
    text-align:center;
}

.power-card-top::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:2px;
    background:#ef5935;
    transform:translateX(-50%);
    transition:width .35s ease;
}

.power-card-top:hover::after{
    width:100%;
}

.power-card-top h3{
    font-size:30px;
    color:#ef5935;
    margin-bottom:6px;
    font-family:'Sora-Bold';
}

.power-card-top h4{
    font-size:20px;
    margin-bottom:15px;
    font-family:'Sora-Bold';
}

.power-card-top p{
    font-size:18px;
    line-height:1.7;
    color:#d0d0d0;
    margin:0 auto;
    max-width:280px;
}

@media (max-width:991px){
	.power-card-top h3{
        font-size:24px;
    }

    .power-card-top h4{
        font-size:18px;
    }

    .power-card-top p{
        font-size:15px;
        line-height:1.6;
    }

}