/*==================================================
        FUTURETEQ HERO CSS
        PART - 1
===================================================*/

:root{

    --primary:#f15a29;
    --secondary:#ffb000;
    --dark:#08111f;
    --dark2:#111827;
    --white:#ffffff;
    --text:#cbd5e1;

}

/*=================================
Hero Section
==================================*/

.hero-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:120px 0;

    background:
    radial-gradient(circle at 15% 20%,rgba(241,90,41,.18),transparent 35%),
    radial-gradient(circle at 85% 15%,rgba(255,176,0,.18),transparent 30%),
    linear-gradient(135deg,#08111f,#0d1b2a,#14213d);

}

/*=================================
Grid Overlay
==================================*/

.hero-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:55px 55px;

    opacity:.35;

    z-index:1;

}

/*=================================
Container
==================================*/

.hero-section .container{

    position:relative;

    z-index:5;

}

/*=================================
Glow Shapes
==================================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    animation:glowMove 10s linear infinite alternate;

}

/* Left */

.shape-1{

    width:350px;

    height:350px;

    background:#f15a29;

    left:-120px;

    top:-120px;

    opacity:.25;

}

/* Right */

.shape-2{

    width:280px;

    height:280px;

    background:#ff9800;

    right:-80px;

    top:100px;

    opacity:.25;

}

/* Bottom */

.shape-3{

    width:260px;

    height:260px;

    background:#ff5722;

    bottom:-80px;

    left:40%;

    opacity:.18;

}

/*=================================
Glow Animation
==================================*/

@keyframes glowMove{

0%{

transform:translate(0,0);

}

100%{

transform:translate(60px,-40px);

}

}

/*=================================
Mouse Glow
==================================*/

.hero-light{

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(255,170,0,.16);

    filter:blur(120px);

    pointer-events:none;

    z-index:2;

}

/*=================================
Floating Particles
==================================*/

.particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:2;

}

.particles span{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#ffb000;

    opacity:.18;

    animation:particleMove linear infinite;

}

/* Individual Positions */

.particles span:nth-child(1){

left:8%;

animation-duration:16s;

animation-delay:0s;

}

.particles span:nth-child(2){

left:20%;

animation-duration:20s;

animation-delay:2s;

}

.particles span:nth-child(3){

left:34%;

animation-duration:15s;

animation-delay:1s;

}

.particles span:nth-child(4){

left:48%;

animation-duration:22s;

}

.particles span:nth-child(5){

left:62%;

animation-duration:17s;

}

.particles span:nth-child(6){

left:75%;

animation-duration:20s;

}

.particles span:nth-child(7){

left:88%;

animation-duration:18s;

}

.particles span:nth-child(8){

left:96%;

animation-duration:15s;

}

/* Animation */

@keyframes particleMove{

0%{

transform:translateY(110vh);

opacity:0;

}

20%{

opacity:.35;

}

80%{

opacity:.35;

}

100%{

transform:translateY(-100px);

opacity:0;

}

}

/*=================================
Row Alignment
==================================*/

.hero-section .row{

    position:relative;

    z-index:10;

}

/*=================================
Selection
==================================*/

.hero-section::selection{

background:var(--primary);

color:#fff;

}

/*=================================
Prevent Overflow
==================================*/

.hero-image,
.hero-content{

position:relative;

z-index:20;

}
/*==================================================
        HERO LEFT CONTENT
        PART - 2
===================================================*/

/*==============================
Hero Content
==============================*/

.hero-content{

    position:relative;

    z-index:20;

}

/*==============================
Hero Tag
==============================*/

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 26px;

    border-radius:50px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    color:#fff;

    font-size:15px;

    font-weight:500;

    letter-spacing:.5px;

    margin-bottom:30px;

    transition:.4s;

}

.hero-tag:hover{

    background:rgba(241,90,41,.18);

    border-color:#f15a29;

}

/*==============================
Main Heading
==============================*/

.hero-content h1{

    color:#fff;

    font-size:68px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

    letter-spacing:-1px;

}

/* Gradient Text */

.gradient-text{

    background:linear-gradient(
    90deg,
    #f15a29,
    #ff9800,
    #ffd54f
    );

    background-size:300%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:gradientText 6s linear infinite;

}

@keyframes gradientText{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

/*==============================
Typing
==============================*/

.typing-text{

    min-height:42px;

    color:#ffb000;

    font-size:28px;

    font-weight:600;

    margin-bottom:25px;

}

#typed::after{

    content:"|";

    animation:blink .8s infinite;

    margin-left:4px;

}

@keyframes blink{

0%,100%{

opacity:1;

}

50%{

opacity:0;

}

}

/*==============================
Paragraph
==============================*/

.hero-content p{

    color:#cbd5e1;

    font-size:18px;

    line-height:34px;

    max-width:620px;

    margin-bottom:40px;

}

/*==============================
Buttons
==============================*/

.hero-btn-group{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:50px;

}

/* Primary */

.btn-primary-custom{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:18px 38px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:linear-gradient(
    90deg,
    #f15a29,
    #ff9800
    );

    transition:.35s;

}

.btn-primary-custom:hover{

    color:#fff;

    transform:translateY(-5px);

    box-shadow:0 25px 50px rgba(241,90,41,.35);

}

/* Shine Effect */

.btn-primary-custom::before{

    content:"";

    position:absolute;

    width:40px;

    height:180%;

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

    transform:rotate(25deg);

    left:-80px;

    top:-30px;

    transition:.8s;

}

.btn-primary-custom:hover::before{

    left:130%;

}

/* Outline */

.btn-outline-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:50px;

    border:2px solid rgba(255,255,255,.15);

    color:#fff;

    text-decoration:none;

    transition:.35s;

    backdrop-filter:blur(10px);

}

.btn-outline-custom:hover{

    background:#fff;

    color:#111;

    transform:translateY(-5px);

}

/*==============================
Counter
==============================*/

.hero-trust{

    display:flex;

    gap:55px;

    flex-wrap:wrap;

}

.hero-trust>div{

    position:relative;

}

.hero-trust>div::after{

    content:"";

    position:absolute;

    right:-28px;

    top:10px;

    width:1px;

    height:45px;

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

}

.hero-trust>div:last-child::after{

    display:none;

}

.hero-trust h3{

    font-size:40px;

    color:#fff;

    margin-bottom:5px;

    font-weight:700;

}

.hero-trust span{

    color:#94a3b8;

    font-size:15px;

    letter-spacing:.5px;

}

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

@media(max-width:991px){

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:46px;

}

.typing-text{

font-size:22px;

}

.hero-content p{

margin:auto;

margin-bottom:35px;

}

.hero-btn-group{

justify-content:center;

flex-wrap:wrap;

}

.hero-trust{

justify-content:center;

gap:30px;

}

.hero-trust>div::after{

display:none;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:36px;

line-height:1.25;

}

.hero-tag{

font-size:13px;

padding:10px 18px;

}

.typing-text{

font-size:18px;

}

.hero-content p{

font-size:16px;

line-height:30px;

}

.btn-primary-custom,

.btn-outline-custom{

width:100%;

justify-content:center;

}

}
/*==================================================
        HERO RIGHT
        PART - 3
===================================================*/

/*==========================
Hero Image
===========================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

    min-height:650px;

}

/*==========================
Laptop
===========================*/

.laptop-box{

    position:relative;

    width:100%;

    max-width:620px;

    border-radius:22px;

    overflow:hidden;

    background:#fff;

    box-shadow:

    0 40px 100px rgba(0,0,0,.35),

    0 0 50px rgba(241,90,41,.15);

    transition:.5s ease;

}

.laptop-box:hover{

    transform:

    translateY(-12px)

    rotateX(4deg)

    rotateY(-4deg)

    scale(1.02);

}

.laptop-box img{

    width:100%;

    display:block;

}

/*==========================
Laptop Glow
===========================*/

.laptop-box::before{

    content:"";

    position:absolute;

    inset:-3px;

    border-radius:25px;

    background:linear-gradient(
    90deg,
    #f15a29,
    #ff9800,
    #ffd54f,
    #f15a29
    );

    background-size:300%;

    z-index:-1;

    animation:borderMove 8s linear infinite;

}

@keyframes borderMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

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

.floating-card{

    position:absolute;

    min-width:170px;

    padding:18px;

    border-radius:18px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    text-align:center;

    box-shadow:

    0 20px 45px rgba(0,0,0,.25);

    transition:.4s;

}

.floating-card:hover{

    transform:translateY(-10px);

    background:rgba(241,90,41,.20);

}

.floating-card i{

    font-size:30px;

    color:#ff9800;

    margin-bottom:12px;

}

.floating-card h6{

    margin:0;

    font-size:16px;

    font-weight:600;

    color:#fff;

}

/*==========================
Position
===========================*/

.card-1{

    left:-30px;

    top:40px;

}

.card-2{

    right:-20px;

    top:120px;

}

.card-3{

    left:-40px;

    bottom:100px;

}

.card-4{

    right:0;

    bottom:30px;

}

/*==========================
Floating Animation
===========================*/

.card-1{

animation:float1 5s ease-in-out infinite;

}

.card-2{

animation:float2 6s ease-in-out infinite;

}

.card-3{

animation:float3 5.5s ease-in-out infinite;

}

.card-4{

animation:float4 6.5s ease-in-out infinite;

}

@keyframes float1{

50%{

transform:translateY(-16px);

}

}

@keyframes float2{

50%{

transform:translateY(16px);

}

}

@keyframes float3{

50%{

transform:translateY(-12px);

}

}

@keyframes float4{

50%{

transform:translateY(14px);

}

}

/*==========================
Rating Badge
===========================*/

.hero-badge{

    position:absolute;

    top:-20px;

    right:70px;

    padding:14px 24px;

    border-radius:40px;

    background:#fff;

    color:#111;

    font-weight:700;

    box-shadow:

    0 20px 40px rgba(0,0,0,.18);

    animation:badgeFloat 3s ease-in-out infinite;

}

@keyframes badgeFloat{

50%{

transform:translateY(-10px);

}

}

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

@media(max-width:991px){

.hero-image{

margin-top:70px;

min-height:auto;

}

.laptop-box{

max-width:100%;

}

.floating-card{

display:none;

}

.hero-badge{

display:none;

}

}
/*==================================================
        HERO CSS
        PART - 4
===================================================*/

/*==============================
Hero Divider
==============================*/

.hero-divider{

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    line-height:0;

    z-index:5;

}

.hero-divider svg{

    width:100%;

    height:90px;

    display:block;

}

/*==============================
Scroll Down
==============================*/

.scroll-down{

    position:absolute;

    bottom:90px;

    left:50%;

    transform:translateX(-50%);

    text-align:center;

    color:#fff;

    z-index:30;

}

.scroll-down span{

    display:block;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:12px;

    color:#cbd5e1;

}

.scroll-down i{

    font-size:24px;

    color:#ff9800;

    animation:scrollAnimation 1.6s infinite;

}

@keyframes scrollAnimation{

0%{

transform:translateY(0);

opacity:1;

}

50%{

transform:translateY(12px);

opacity:.4;

}

100%{

transform:translateY(0);

opacity:1;

}

}

/*==============================
Mouse Light
==============================*/

.hero-light{

    transition:left .15s linear,

               top .15s linear;

}

/*==============================
Hero Hover Effect
==============================*/

.hero-section:hover .shape-1{

transform:scale(1.08);

}

.hero-section:hover .shape-2{

transform:scale(1.05);

}

.hero-section:hover .shape-3{

transform:scale(1.12);

}

/*==============================
Button Pulse
==============================*/

.btn-primary-custom{

animation:pulseButton 3s infinite;

}

@keyframes pulseButton{

0%{

box-shadow:0 0 0 rgba(241,90,41,.35);

}

50%{

box-shadow:0 0 35px rgba(241,90,41,.45);

}

100%{

box-shadow:0 0 0 rgba(241,90,41,.35);

}

}

/*==============================
Hero Image Shadow
==============================*/

.hero-image::before{

content:"";

position:absolute;

width:480px;

height:90px;

background:rgba(0,0,0,.25);

filter:blur(40px);

bottom:10px;

left:50%;

transform:translateX(-50%);

border-radius:50%;

z-index:-1;

}

/*==============================
Image Animation
==============================*/

.laptop-box{

animation:laptopFloat 5s ease-in-out infinite;

}

@keyframes laptopFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*==============================
Hero Section Fade
==============================*/

.hero-content{

animation:heroFade .8s ease;

}

@keyframes heroFade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==============================
Tablet
==============================*/

@media(max-width:1199px){

.hero-content h1{

font-size:56px;

}

.hero-image{

margin-top:30px;

}

}

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

@media(max-width:991px){

.hero-section{

padding:130px 0 90px;

min-height:auto;

}

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:42px;

}

.hero-content p{

max-width:100%;

}

.hero-btn-group{

justify-content:center;

}

.hero-trust{

justify-content:center;

}

.hero-image{

margin-top:60px;

}

.scroll-down{

display:none;

}

.hero-divider svg{

height:60px;

}

}

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

@media(max-width:576px){

.hero-section{

padding:110px 0 70px;

}

.hero-content h1{

font-size:34px;

line-height:1.35;

}

.hero-tag{

font-size:12px;

padding:10px 18px;

}

.typing-text{

font-size:18px;

}

.hero-content p{

font-size:15px;

line-height:28px;

}

.hero-btn-group{

flex-direction:column;

gap:15px;

}

.btn-primary-custom,

.btn-outline-custom{

width:100%;

justify-content:center;

}

.hero-trust{

gap:18px;

}

.hero-trust h3{

font-size:28px;

}

.hero-trust span{

font-size:13px;

}

}

/*==============================
Large Desktop
==============================*/

@media(min-width:1400px){

.hero-content h1{

font-size:74px;

}

.laptop-box{

max-width:680px;

}

}

/*==============================
Smooth Rendering
==============================*/

.hero-section *{

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}