/*=====================================================
 DIGITAL BRANDING & ONLINE PRESENCE HERO
 PART 1 - HERO LAYOUT
======================================================*/

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

:root{

    --primary:#2563eb;
    --secondary:#1d4ed8;
    --accent:#06b6d4;

    --dark:#081229;
    --dark2:#0f172a;

    --white:#ffffff;
    --text:#e2e8f0;

    --glass:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.16);

    --shadow:
        0 20px 60px rgba(0,0,0,.35);

    --radius:28px;

    --transition:.45s ease;

}


/*=========================
 Reset
=========================*/

.digital-branding-hero *,
.digital-branding-hero *::before,
.digital-branding-hero *::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


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

.digital-branding-hero{

    position:relative;

    overflow:hidden;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:120px 7%;

    isolation:isolate;

    background:linear-gradient(
        -45deg,
        #071329,
        #102c72,
        #2563eb,
        #0ea5e9,
        #06b6d4
    );

    background-size:400% 400%;

    animation:heroGradient 18s ease infinite;

}


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

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        radial-gradient(
            circle at top left,
            rgba(255,255,255,.18),
            transparent 38%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(6,182,212,.20),
            transparent 42%
        ),

        rgba(2,8,23,.45);

}


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

.hero-container{

    position:relative;

    z-index:20;

    width:100%;

    max-width:1400px;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*=========================
 Glass Card
=========================*/

.hero-content{

    position:relative;

    width:100%;

    max-width:1150px;

    padding:70px 80px;

    border-radius:var(--radius);

    background:var(--glass);

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

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:var(--shadow);

    overflow:hidden;

    text-align:center;

    transition:var(--transition);

}


/*=========================
 Shine Effect
=========================*/

.hero-content::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:180px;

    height:320%;

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

    transform:rotate(28deg);

    filter:blur(3px);

    animation:glassShine 9s linear infinite;

}


/*=========================
 Soft Glow
=========================*/

.hero-content::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    box-shadow:

        inset 0 0 60px rgba(255,255,255,.05),

        0 0 80px rgba(37,99,235,.12);

}


/*=========================
 Decorative Blur
=========================*/

.hero-glow{

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(37,99,235,.22);

    filter:blur(140px);

    top:-180px;

    right:-150px;

    z-index:0;

}


/*=========================
 Background Grid
=========================*/

.hero-grid{

    position:absolute;

    inset:0;

    z-index:0;

    opacity:.12;

    pointer-events:none;

    background-image:

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

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

    background-size:60px 60px;

}


/*=========================
 Animations
=========================*/

@keyframes heroGradient{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}


@keyframes glassShine{

    0%{

        left:-35%;

    }

    100%{

        left:135%;

    }

}

/*=====================================================
 DIGITAL BRANDING & ONLINE PRESENCE HERO
 PART 2 - TYPOGRAPHY, CONTENT & BUTTONS
======================================================*/


/*=========================
 Hero Badge
=========================*/

.hero-tag{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:12px 26px;

    margin-bottom:30px;

    border-radius:100px;

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

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

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    backdrop-filter:blur(12px);

    transition:.4s ease;

}

.hero-tag:hover{

    transform:translateY(-4px);

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

    box-shadow:0 10px 30px rgba(6,182,212,.25);

}


/*=========================
 Hero Heading
=========================*/

.hero-content h1{

    font-size:clamp(42px,6vw,72px);

    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

    color:#ffffff;

    margin-bottom:28px;

    max-width:1000px;

    margin-left:auto;

    margin-right:auto;

    text-wrap:balance;

    text-shadow:

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

}


/*=========================
 Gradient Text
=========================*/

.hero-content h1 span{

    background:linear-gradient(
        90deg,
        #ffffff,
        #7dd3fc,
        #22d3ee
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}


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

.hero-content p{

    max-width:850px;

    margin:0 auto 50px;

    color:#dbe7ff;

    font-size:20px;

    line-height:1.9;

    font-weight:400;

}


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

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    flex-wrap:wrap;

}


/*=========================
 Shared Button
=========================*/

.hero-buttons a{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:60px;

    padding:0 36px;

    border-radius:60px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.45s ease;

}


/*=========================
 Primary Button
=========================*/

.btn-primary{

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    box-shadow:

        0 18px 35px rgba(37,99,235,.35);

}

.btn-primary:hover{

    transform:translateY(-8px);

    box-shadow:

        0 28px 45px rgba(6,182,212,.45);

}


/*=========================
 Animated Shine
=========================*/

.btn-primary::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;

}

.btn-primary:hover::before{

    left:150%;

}


/*=========================
 Secondary Button
=========================*/

.btn-secondary{

    color:#ffffff;

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

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

    backdrop-filter:blur(12px);

}

.btn-secondary:hover{

    background:#ffffff;

    color:#0f172a;

    transform:translateY(-8px);

}


/*=========================
 Button Active
=========================*/

.hero-buttons a:active{

    transform:scale(.96);

}


/*=========================
 Fade Up Animation
=========================*/

.hero-content>*{

    opacity:0;

    transform:translateY(35px);

    animation:fadeUp .8s ease forwards;

}

.hero-tag{

    animation-delay:.2s;

}

.hero-content h1{

    animation-delay:.4s;

}

.hero-content p{

    animation-delay:.6s;

}

.hero-buttons{

    animation-delay:.8s;

}


/*=========================
 Keyframes
=========================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================================
 DIGITAL BRANDING & ONLINE PRESENCE HERO
 PART 3 - FLOATING OBJECTS, GRID, GLOW & ANIMATIONS
======================================================*/


/*=========================
 Floating Circles
=========================*/

.hero-circle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:2;

    filter:blur(2px);

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

}


/* Large Circle */

.circle-1{

    width:320px;

    height:320px;

    top:-110px;

    right:-120px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.35),
        rgba(6,182,212,.15)
    );

    box-shadow:

        0 0 120px rgba(37,99,235,.40);

}


/* Medium Circle */

.circle-2{

    width:220px;

    height:220px;

    bottom:70px;

    left:-70px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        rgba(6,182,212,.18)
    );

    animation-delay:2s;

}


/* Small Circle */

.circle-3{

    width:120px;

    height:120px;

    right:18%;

    bottom:12%;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.30),
        rgba(37,99,235,.20)
    );

    animation-delay:4s;

}


/*=========================
 Animated Grid
=========================*/

.hero-grid{

    position:absolute;

    inset:0;

    opacity:.10;

    pointer-events:none;

    z-index:1;

    background-image:

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

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

    background-size:60px 60px;

    animation:gridMove 18s linear infinite;

}


/*=========================
 Background Glow
=========================*/

.hero-glow{

    position:absolute;

    width:600px;

    height:600px;

    top:-250px;

    left:-150px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(37,99,235,.28),
            transparent 70%
        );

    filter:blur(140px);

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

}


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

.hero-content:hover{

    transform:translateY(-8px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.35),

        0 0 70px rgba(37,99,235,.20);

}


/*=========================
 Decorative Border
=========================*/

.hero-content::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.25),
        rgba(255,255,255,0),
        rgba(6,182,212,.30)
    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}


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

.hero-content::before{

    transition:.5s ease;

}


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

@keyframes floatAnimation{

    0%{

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

    }

    25%{

        transform:
            translateY(-18px)
            translateX(10px)
            rotate(2deg);

    }

    50%{

        transform:
            translateY(-35px)
            translateX(-12px)
            rotate(-2deg);

    }

    75%{

        transform:
            translateY(-18px)
            translateX(8px)
            rotate(2deg);

    }

    100%{

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

    }

}


/*=========================
 Grid Movement
=========================*/

@keyframes gridMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:60px 60px;

    }

}


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

@keyframes pulseGlow{

    0%{

        transform:scale(1);

        opacity:.45;

    }

    50%{

        transform:scale(1.15);

        opacity:.85;

    }

    100%{

        transform:scale(1);

        opacity:.45;

    }

}


/*=========================
 Hero Floating Effect
=========================*/

@keyframes heroFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-content{

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

}


/*=========================
 Scroll Indicator (Optional)
=========================*/

.hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:32px;

    height:55px;

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

    border-radius:30px;

    z-index:5;

}

.hero-scroll::before{

    content:"";

    position:absolute;

    top:8px;

    left:50%;

    width:6px;

    height:10px;

    background:#ffffff;

    border-radius:10px;

    transform:translateX(-50%);

    animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

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

    }

}

/*=====================================================
 DIGITAL BRANDING & ONLINE PRESENCE HERO
 PART 4 - RESPONSIVE DESIGN
======================================================*/


/*========================================
 Large Desktop (1600px)
========================================*/

@media (min-width:1600px){

.hero-container{

    max-width:1500px;

}

.hero-content{

    max-width:1250px;

    padding:90px 110px;

}

.hero-content h1{

    font-size:76px;

}

.hero-content p{

    font-size:22px;

    max-width:900px;

}

}



/*========================================
 Laptop (1200px)
========================================*/

@media (max-width:1200px){

.digital-branding-hero{

    padding:110px 6%;

}

.hero-content{

    max-width:1000px;

    padding:60px;

}

.hero-content h1{

    font-size:56px;

}

.hero-content p{

    font-size:19px;

}

.circle-1{

    width:260px;

    height:260px;

}

.circle-2{

    width:180px;

    height:180px;

}

}



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

@media (max-width:992px){

.digital-branding-hero{

    min-height:auto;

    padding:90px 35px;

}

.hero-content{

    padding:50px 40px;

}

.hero-content h1{

    font-size:46px;

    line-height:1.15;

}

.hero-content p{

    font-size:18px;

    line-height:1.8;

}

.hero-buttons{

    justify-content:center;

}

.hero-buttons a{

    min-width:210px;

}

.circle-1{

    width:220px;

    height:220px;

}

.circle-2{

    width:160px;

    height:160px;

}

.circle-3{

    width:90px;

    height:90px;

}

}



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

@media (max-width:768px){

.digital-branding-hero{

    padding:80px 25px;

    text-align:center;

}

.hero-content{

    padding:40px 28px;

    border-radius:22px;

}

.hero-tag{

    font-size:13px;

    padding:10px 20px;

    margin-bottom:24px;

}

.hero-content h1{

    font-size:38px;

    line-height:1.2;

    letter-spacing:-1px;

}

.hero-content p{

    font-size:17px;

    margin-bottom:35px;

}

.hero-buttons{

    flex-direction:column;

    gap:16px;

    width:100%;

}

.hero-buttons a{

    width:100%;

    max-width:340px;

}

.circle-1{

    opacity:.18;

}

.circle-2{

    opacity:.15;

}

.circle-3{

    display:none;

}

.hero-grid{

    opacity:.05;

}

}



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

@media (max-width:576px){

.digital-branding-hero{

    padding:70px 18px;

}

.hero-content{

    padding:35px 22px;

}

.hero-tag{

    font-size:12px;

    padding:9px 18px;

}

.hero-content h1{

    font-size:32px;

    line-height:1.25;

}

.hero-content p{

    font-size:16px;

    line-height:1.75;

}

.hero-buttons a{

    height:56px;

    font-size:15px;

}

.circle-1{

    width:170px;

    height:170px;

}

.circle-2{

    display:none;

}

.hero-glow{

    width:320px;

    height:320px;

}

}



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

@media (max-width:420px){

.digital-branding-hero{

    padding:60px 15px;

}

.hero-content{

    padding:30px 18px;

}

.hero-content h1{

    font-size:28px;

}

.hero-content p{

    font-size:15px;

}

.hero-tag{

    font-size:11px;

    letter-spacing:.5px;

}

.hero-buttons a{

    min-width:100%;

    height:54px;

}

}



/*========================================
 Accessibility
========================================*/

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}



/*========================================
 Touch Devices
========================================*/

@media (hover:none){

.hero-content:hover{

    transform:none;

}

.btn-primary:hover,
.btn-secondary:hover{

    transform:none;

}

.hero-tag:hover{

    transform:none;

}

}