/* =====================================================
   Dial Dynamic Ltd Enterprise V6
   HERO CSS
   Part 1
======================================================*/

/* =====================================================
   HERO SECTION
======================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:180px 0 120px;

    background:

    radial-gradient(circle at top right,
    rgba(109,92,255,.18),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(47,214,255,.14),
    transparent 35%),

    #040816;

}

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

.hero-bg{

    position:absolute;

    inset:0;

    z-index:0;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,.05),

        rgba(0,0,0,.35)

    );

    z-index:1;

}

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

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

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

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

    background-size:60px 60px;

    opacity:.4;

    z-index:1;

}

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

.hero .container{

    position:relative;

    z-index:10;

}

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

.hero-content{

    max-width:640px;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

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

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

    color:#F5C542;

    font-weight:600;

    margin-bottom:28px;

    backdrop-filter:blur(18px);

}

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

.hero-badge i{

    color:#FFD76A;

}

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

.hero-title{

    font-size:72px;

    font-weight:800;

    line-height:1.05;

    margin-bottom:30px;

    color:#fff;

}

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

.gradient-text{

    background:

    linear-gradient(

        90deg,

        #F5C542,

        #2FD6FF

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

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

.hero-description{

    font-size:18px;

    line-height:1.9;

    color:#AEB9D5;

    margin-bottom:40px;

    max-width:560px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

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

.hero-trust{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

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

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:#D8E3FF;

    font-size:15px;

    font-weight:600;

}

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

.trust-item i{

    color:#2FD6FF;

}

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

.hero-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

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

.stat-card{

    padding:26px;

    border-radius:22px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

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

.stat-card:hover{

    transform:translateY(-10px);

    border-color:#2FD6FF;

}

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

.stat-card h2{

    font-size:34px;

    margin-bottom:8px;

    color:#F5C542;

}

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

.stat-card span{

    color:#AEB9D5;

    font-size:15px;

}


/* =====================================================
   Dial Dynamic Ltd Enterprise V6
   HERO CSS
   Part 2
======================================================*/

/* =========================================
   Hero Right Side
========================================= */

.hero-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:760px;

    z-index:5;

}

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

#globe-container{

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    z-index:3;

}

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

.hero-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(109,92,255,.35),

        rgba(47,214,255,.12),

        transparent

    );

    filter:blur(45px);

    z-index:1;

}

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

.hero-logo{

    position:absolute;

    z-index:8;

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-logo img{

    width:180px;

    height:auto;

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

    filter:

    drop-shadow(0 15px 35px rgba(0,0,0,.45));

}

/* =========================================
   Orbit Rings
========================================= */

.orbit{

    position:absolute;

    border-radius:50%;

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

    animation:rotateOrbit linear infinite;

}

.orbit-1{

    width:340px;

    height:340px;

    animation-duration:15s;

}

.orbit-2{

    width:470px;

    height:470px;

    animation-duration:25s;

}

.orbit-3{

    width:610px;

    height:610px;

    animation-duration:35s;

}

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

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:14px;

    min-width:240px;

    padding:18px 20px;

    border-radius:18px;

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

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

    backdrop-filter:blur(20px);

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

    transition:.35s;

    z-index:10;

}

.floating-card:hover{

    transform:translateY(-10px);

    border-color:#2FD6FF;

}

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

.floating-card i{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:linear-gradient(

        135deg,

        #6D5CFF,

        #2FD6FF

    );

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}

.floating-card h5{

    margin:0;

    font-size:15px;

    color:#fff;

}

.floating-card small{

    display:block;

    margin-top:4px;

    color:#AEB9D5;

    font-size:13px;

}

/* =========================================
   Card Positions
========================================= */

.card-ai{

    top:60px;

    left:-40px;

}

.card-cloud{

    top:140px;

    right:-30px;

}

.card-security{

    bottom:150px;

    left:-20px;

}

.card-fintech{

    bottom:70px;

    right:-30px;

}

/* =========================================
   Floating Icons
========================================= */

.floating-icon{

    position:absolute;

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

    backdrop-filter:blur(18px);

    color:#F5C542;

    font-size:22px;

    z-index:11;

}

.icon-1{

    top:30px;

    left:130px;

}

.icon-2{

    top:90px;

    right:90px;

}

.icon-3{

    bottom:110px;

    left:110px;

}

.icon-4{

    bottom:40px;

    right:120px;

}




/* =====================================================
   Dial Dynamic Ltd Enterprise V6
   HERO CSS
   Part 3
======================================================*/

/* =========================================
   Hero Blobs
========================================= */

.hero-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.35;

    pointer-events:none;

    z-index:0;

}

.hero-blob-1{

    width:340px;

    height:340px;

    background:#6D5CFF;

    top:-100px;

    left:-100px;

    animation:blobMove1 18s ease-in-out infinite;

}

.hero-blob-2{

    width:300px;

    height:300px;

    background:#2FD6FF;

    bottom:-100px;

    right:-80px;

    animation:blobMove2 20s ease-in-out infinite;

}

.hero-blob-3{

    width:220px;

    height:220px;

    background:#F5C542;

    top:40%;

    right:25%;

    opacity:.18;

    animation:blobMove3 16s ease-in-out infinite;

}

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

.mouse-glow{

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(109,92,255,.22),

    transparent 70%);

    filter:blur(35px);

    pointer-events:none;

    z-index:2;

    transition:

    left .15s linear,

    top .15s linear;

}

/* =========================================
   Hero Bottom Gradient
========================================= */

.hero-bottom-gradient{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    background:

    linear-gradient(

    to bottom,

    transparent,

    #040816);

    z-index:2;

}

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

.scroll-down{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;

    z-index:30;

    animation:scrollFloat 2.5s ease-in-out infinite;

}

.scroll-down span{

    color:#AEB9D5;

}

.scroll-down i{

    font-size:18px;

    color:#F5C542;

}

/* =========================================
   Trusted Section
========================================= */

.trusted-section{

    position:relative;

    padding:120px 0;

    background:#07101F;

}

.trusted-header{

    text-align:center;

    margin-bottom:60px;

}

.trusted-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:25px;

}

.trusted-item{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    border-radius:20px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.trusted-item:hover{

    transform:translateY(-10px);

    border-color:#2FD6FF;

    box-shadow:

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

}

.trusted-item img{

    max-width:150px;

    max-height:60px;

    filter:grayscale(100%);

    opacity:.7;

    transition:.35s;

}

.trusted-item:hover img{

    filter:none;

    opacity:1;

    transform:scale(1.05);

}

/* =========================================
   Glass Hover
========================================= */

.hero .glass,

.hero .stat-card,

.hero .floating-card{

    transition:

    transform .35s,

    box-shadow .35s,

    border-color .35s;

}

.hero .glass:hover,

.hero .stat-card:hover,

.hero .floating-card:hover{

    box-shadow:

    0 20px 50px rgba(0,0,0,.35);

}

/* =========================================
   Hero Utilities
========================================= */

.hero *{

    position:relative;

}

.hero img{

    user-select:none;

    -webkit-user-drag:none;

}

.hero a{

    text-decoration:none;

}

.hero button{

    border:none;

    outline:none;

}


/* =====================================================
   Dial Dynamic Ltd Enterprise V6
   HERO CSS
   Part 4 (Final)
======================================================*/

/* =========================================
   Hero Float Animation
========================================= */

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/* =========================================
   Orbit Rotation
========================================= */

@keyframes rotateOrbit{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

@keyframes floatingCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.card-ai{

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

}

.card-cloud{

    animation:floatingCard 7s ease-in-out infinite;

    animation-delay:1s;

}

.card-security{

    animation:floatingCard 8s ease-in-out infinite;

    animation-delay:2s;

}

.card-fintech{

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

    animation-delay:3s;

}

/* =========================================
   Floating Icons
========================================= */

@keyframes floatingIcon{

    0%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-10px) rotate(8deg);

    }

    100%{

        transform:translateY(0) rotate(0deg);

    }

}

.floating-icon{

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

}

.icon-2{

    animation-delay:1s;

}

.icon-3{

    animation-delay:2s;

}

.icon-4{

    animation-delay:3s;

}

/* =========================================
   Blob Animation
========================================= */

@keyframes blobMove1{

    0%{

        transform:translate(0,0);

    }

    50%{

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

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes blobMove2{

    0%{

        transform:translate(0,0);

    }

    50%{

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

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes blobMove3{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}

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

@keyframes scrollFloat{

    0%{

        transform:translate(-50%,0);

        opacity:.5;

    }

    50%{

        transform:translate(-50%,10px);

        opacity:1;

    }

    100%{

        transform:translate(-50%,0);

        opacity:.5;

    }

}

/* =========================================
   Hero Entrance
========================================= */

.hero-content{

    animation:heroFadeLeft 1.2s ease both;

}

.hero-visual{

    animation:heroFadeRight 1.4s ease both;

}

@keyframes heroFadeLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroFadeRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* =========================================
   Premium Hover
========================================= */

.hero-buttons .btn-primary:hover,

.hero-buttons .btn-secondary:hover{

    transform:translateY(-5px);

}

.hero-logo:hover{

    transform:scale(1.06);

    transition:.35s;

}

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

.hero,

.hero *{

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

    transform-style:preserve-3d;

}

#globe-container{

    will-change:transform;

}

.hero-logo img,

.orbit,

.hero-blob,

.floating-card,

.floating-icon{

    will-change:transform;

}

/* =========================================
   End
========================================= */