/*=================================================
OREON DIGITAL
Premium Web Page
Author : Oreon Digital
==================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#ffffff;
overflow-x:hidden;
color:#222;

}

a{
text-decoration:none;
transition:.4s;
}

ul{
padding:0;
margin:0;
list-style:none;
}

img{
max-width:100%;
display:block;
}

/*==========================
Preloader
==========================*/

#preloader{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:999999;

}

.loader{

width:60px;
height:60px;
border-radius:50%;
border:6px solid #e8e8e8;
border-top:6px solid #2563eb;
animation:loader 1s linear infinite;

}

@keyframes loader{

100%{
transform:rotate(360deg);
}

}

/*==========================
Navbar
==========================*/

.main-header{

padding:0px 0;
transition:.4s;
z-index:9999;

}

.navbar{

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

backdrop-filter:blur(18px);

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

border-radius:0 0 25px 25px;

padding:15px 0;

transition:.4s;

}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(212 99 10);
}
.navbar-brand img{

height:55px;

}

.navbar-nav{

gap:12px;

}

.nav-link{

color:#fff;
font-size:15px;
font-weight:500;
position:relative;
padding:10px 15px;

}

.nav-link:hover{

color:#fff;

}

.nav-link::after{

content:'';
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:#00d4ff;
transition:.4s;

}

.nav-link:hover::after{

width:100%;

}

.dropdown-menu{

border:none;
border-radius:18px;
padding:12px;
box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.dropdown-item{

padding:12px 15px;
border-radius:10px;
font-weight:500;

}

.dropdown-item:hover{

background:#2563eb;
color:#fff;

}

.quote-btn{

background:linear-gradient(135deg,#2563eb,#00c6ff);
color:#fff;
padding:13px 28px;
border-radius:50px;
font-weight:600;
box-shadow:0 15px 35px rgba(37,99,235,.30);

}

.quote-btn:hover{

transform:translateY(-4px);
color:#fff;

}

/* Sticky */

.sticky{

background:#fff!important;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.sticky .nav-link{

color:#222;

}

.sticky .navbar{

background:#fff;

}

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

.hero-section{

position:relative;
padding-top:180px;
padding-bottom:120px;
overflow:hidden;

background:

linear-gradient(135deg,

#071C4D 0%,

#0E4DCE 45%,

#27B6FF 100%);

}

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

.hero-shape{

position:absolute;
border-radius:50%;

}

.shape1{

width:400px;
height:400px;
background:rgba(255,255,255,.08);

top:-150px;
right:-100px;

}

.shape2{

width:250px;
height:250px;
background:rgba(255,255,255,.05);

left:-120px;
bottom:-80px;

}

.shape3{

width:150px;
height:150px;
background:#00d4ff22;

right:18%;
bottom:20%;

}

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

.sub-title{

display:inline-block;
padding:10px 22px;

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

backdrop-filter:blur(10px);

border-radius:40px;

color:#fff;

font-weight:500;

margin-bottom:25px;

}

.hero-content h1{

font-size:40px;

font-weight:800;

line-height:1.2;

color:#fff;

margin-bottom:20px;

}

.hero-content h1 span{

color:#00d4ff;

}

.hero-content p{

font-size:18px;

line-height:32px;

color:#dbeafe;

max-width:600px;

margin-bottom:35px;

}

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

.hero-btn{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.btn-primary{

background:linear-gradient(135deg,#00c6ff,#2563eb);

border:none;
color:#fff;

padding:15px 35px;

border-radius:60px;

font-weight:600;

box-shadow:0 20px 40px rgba(0,198,255,.30);

}

.btn-primary:hover{

transform:translateY(-5px);

}

.btn-outline-light{

padding:15px 35px;

border-radius:60px;

font-weight:600;

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

}

.btn-outline-light:hover{

background:#fff;

color:#2563eb;

}

/*==========================
Features
==========================*/

.hero-features{

display:flex;

gap:25px;

margin-top:45px;

flex-wrap:wrap;

}

.hero-features div{

color:#fff;

font-size:15px;

font-weight:500;

}

.hero-features i{

margin-right:8px;

color:#00ff9d;

}

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

.hero-image{

position:relative;

text-align:center;

}

.hero-image img{

max-width:100%;

filter:drop-shadow(0 35px 60px rgba(0,0,0,.25));

}

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

.floating-card{

position:absolute;

background:#fff;

padding:14px 18px;

border-radius:18px;

box-shadow:0 18px 45px rgba(0,0,0,.18);

font-size:14px;

font-weight:600;

display:flex;

align-items:center;

gap:10px;

}

.floating-card i{

font-size:18px;

color:#2563eb;

}

.card1{

top:8%;
left:-40px;

}

.card2{

top:25%;
right:-40px;

}

.card3{

bottom:30%;
left:-30px;

}

.card4{

bottom:5%;
right:-20px;

}

.card5{

top:60%;
right:25%;

}

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

.floating-icons i{

position:absolute;

font-size:34px;

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

}

.fb{

left:5%;
top:35%;

}

.insta{

top:18%;
left:16%;

}

.li{

right:10%;
top:30%;

}

.g{

top:18%;
right:18%;

}

.chart{

left:8%;
bottom:22%;

}

.horn{

right:6%;
bottom:18%;

}

.search{

left:48%;
top:12%;

}

.trend{

right:40%;
bottom:8%;

}

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

@media(max-width:991px){

.hero-section{

padding-top:150px;

text-align:center;

}

.hero-content h1{

font-size:42px;

}

.hero-btn{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.hero-image{

margin-top:70px;

}

.floating-card{

display:none;

}

.navbar{

padding:12px;

}

.quote-btn{

margin-top:20px;

display:inline-block;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:16px;

line-height:28px;

}

.sub-title{

font-size:14px;

}

.btn-primary,

.btn-outline-light{

width:100%;

}

}

/*=========================================
PART 1B-2
Premium Animation Effects
=========================================*/


/*==============================
Animated Gradient Background
==============================*/

.hero-section{

background:linear-gradient(-45deg,
#071C4D,
#0E4DCE,
#1788ff,
#00BFFF);

background-size:400% 400%;

animation:gradientMove 15s ease infinite;

}

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}


/*==============================
Glass Blur Circles
==============================*/

.hero-section::before{

content:'';

position:absolute;

width:500px;

height:500px;

left:-180px;

top:-180px;

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

backdrop-filter:blur(25px);

border-radius:50%;

filter:blur(30px);

animation:blobOne 12s infinite ease-in-out;

}

.hero-section::after{

content:'';

position:absolute;

width:420px;

height:420px;

right:-160px;

bottom:-150px;

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

border-radius:50%;

filter:blur(40px);

animation:blobTwo 15s infinite ease-in-out;

}


@keyframes blobOne{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(40px);

}

100%{

transform:translateY(0px);

}

}

@keyframes blobTwo{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-45px);

}

100%{

transform:translateY(0px);

}

}



/*==============================
Navbar Hover
==============================*/

.nav-link{

transition:.35s;

}

.nav-link:hover{

transform:translateY(-3px);

color:#00D4FF;

}



/*==============================
Logo Animation
==============================*/

.navbar-brand img{

transition:.5s;

}

.navbar-brand:hover img{

transform:rotate(-3deg) scale(1.05);

}



/*==============================
Quote Button Glow
==============================*/

.quote-btn{

position:relative;

overflow:hidden;

}

.quote-btn::before{

content:'';

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

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

transform:skewX(-25deg);

transition:.8s;

}

.quote-btn:hover::before{

left:140%;

}

.quote-btn:hover{

box-shadow:

0 10px 30px rgba(0,212,255,.45),

0 0 20px rgba(0,212,255,.35);

}



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

.hero-btn .btn{

transition:.4s;

}

.hero-btn .btn:hover{

transform:translateY(-6px) scale(1.04);

}



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

.hero-image img{

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

}

@keyframes heroFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}



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

.floating-card{

animation:cardFloat 4s ease-in-out infinite;

transition:.35s;

}

.floating-card:hover{

transform:scale(1.08);

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

}

.card1{

animation-delay:0s;

}

.card2{

animation-delay:1s;

}

.card3{

animation-delay:2s;

}

.card4{

animation-delay:3s;

}

.card5{

animation-delay:1.5s;

}

@keyframes cardFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}



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

.floating-icons i{

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

}

.floating-icons i:nth-child(2){

animation-delay:1s;

}

.floating-icons i:nth-child(3){

animation-delay:2s;

}

.floating-icons i:nth-child(4){

animation-delay:3s;

}

.floating-icons i:nth-child(5){

animation-delay:4s;

}

.floating-icons i:nth-child(6){

animation-delay:5s;

}

.floating-icons i:nth-child(7){

animation-delay:6s;

}

.floating-icons i:nth-child(8){

animation-delay:7s;

}

@keyframes iconFloat{

0%{

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

}

50%{

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

}

100%{

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

}

}



/*==============================
Hero Text Animation
==============================*/

.hero-content h1{

animation:titleFade 1.2s ease;

}

.hero-content p{

animation:textFade 1.6s ease;

}

@keyframes titleFade{

0%{

opacity:0;

transform:translateY(50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes textFade{

0%{

opacity:0;

transform:translateY(70px);

}

100%{

opacity:1;

transform:translateY(0);

}

}



/*==============================
Features Hover
==============================*/

.hero-features div{

transition:.35s;

cursor:pointer;

}

.hero-features div:hover{

transform:translateY(-6px);

color:#00D4FF;

}



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

.scroll-indicator{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

}

.scroll-indicator span{

display:block;

width:28px;

height:45px;

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

border-radius:30px;

position:relative;

}

.scroll-indicator span::before{

content:'';

position:absolute;

left:50%;

top:8px;

width:6px;

height:6px;

background:#fff;

border-radius:50%;

transform:translateX(-50%);

animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

0%{

top:8px;

opacity:1;

}

100%{

top:26px;

opacity:0;

}

}



/*==============================
Hero Bottom Wave
==============================*/

.hero-wave{

position:absolute;

left:0;

bottom:-2px;

width:100%;

line-height:0;

}

.hero-wave svg{

display:block;

width:100%;

height:120px;

fill:#ffffff;

}



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

::selection{

background:#00BFFF;

color:#fff;

}



/*==============================
Custom Scrollbar
==============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf2ff;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#003dbb;

}


/*==================================================
SECTION 2A - FEATURES
PART 2C-1
Premium CSS
===================================================*/

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

.features-section{
    position:relative;
    padding:120px 0;
    background:#f7fbff;
    overflow:hidden;
}

.features-section::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    background:rgba(37,99,235,.05);
    border-radius:50%;
    top:-220px;
    left:-220px;
    filter:blur(25px);
}

.features-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(0,191,255,.08);
    border-radius:50%;
    right:-180px;
    bottom:-180px;
    filter:blur(30px);
}

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

.section-title{
    margin-bottom:60px;
}

.section-title .sub-heading{

    display:inline-block;

    padding:10px 25px;

    border-radius:50px;

    background:#e8f2ff;

    color:#2563eb;

    font-weight:600;

    margin-bottom:20px;

}

.section-title h2{

    font-size:35px;

    font-weight:800;

    color:#0b1c39;

    line-height:1.25;

    margin-bottom:25px;

}

.section-title p{

    color:#6b7280;

    font-size:17px;

    line-height:32px;

    max-width:760px;

    margin:auto;

}

/*==========================
Feature Card
==========================*/

.feature-card{

    position:relative;

    background:#fff;

    padding:45px 35px;

    border-radius:25px;

    overflow:hidden;

    transition:.45s;

    border:1px solid #edf2ff;

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

    height:100%;

}

.feature-card:hover{

    transform:translateY(-15px);

    box-shadow:0 25px 60px rgba(37,99,235,.15);

}

/* Top Gradient */

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#2563eb,#00c6ff);

}

/*==========================
Feature Icon
==========================*/

.feature-icon{

    width:90px;

    height:90px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    color:#fff;

    font-size:34px;

    transition:.45s;

}

.feature-card:hover .feature-icon{

    transform:rotate(-10deg) scale(1.12);

}

.feature-icon.blue{
    background:linear-gradient(135deg,#1e3a8a,#3b82f6);
}

.feature-icon.orange{
    background:linear-gradient(135deg,#ff8c00,#ffb347);
}

.feature-icon.green{
    background:linear-gradient(135deg,#00b894,#2ecc71);
}

.feature-icon.purple{
    background:linear-gradient(135deg,#7c3aed,#a855f7);
}

.feature-icon.red{
    background:linear-gradient(135deg,#ef4444,#ff6b6b);
}

/*==========================
Title
==========================*/

.feature-card h4{

    font-size:24px;

    font-weight:700;

    color:#0b1c39;

    margin-bottom:18px;

}

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

.feature-card p{

    color:#6b7280;

    line-height:30px;

    margin-bottom:28px;

}

/*==========================
Read More
==========================*/

.feature-card a{

    color:#2563eb;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.feature-card:hover a{

    gap:16px;

}

/*==========================
Hover Background
==========================*/

.feature-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    right:-80px;

    bottom:-80px;

    transition:.45s;

}

.feature-card:hover::after{

    transform:scale(1.6);

}

/*==========================
CTA
==========================*/

.feature-cta{

    background:linear-gradient(135deg,#0d4fc8,#00bfff);

    border-radius:30px;

    padding:55px;

    color:#fff;

    box-shadow:0 20px 60px rgba(13,79,200,.25);

    overflow:hidden;

    position:relative;

}

.feature-cta::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    right:-90px;

    top:-90px;

}

.feature-cta h3{

    font-size:34px;

    font-weight:700;

}

.feature-cta p{

    color:#eaf4ff;

    margin-top:10px;

}

.feature-cta .btn{

    padding:16px 21px;

    border-radius:60px;

    font-weight:600;

}

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

@media(max-width:991px){

.section-title h2{

font-size:36px;

}

.feature-card{

padding:35px 25px;

}

.feature-cta{

text-align:center;

padding:40px 25px;

}

.feature-cta .btn{

margin-top:20px;

}

}

@media(max-width:767px){

.features-section{

padding:80px 0;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:16px;

line-height:28px;

}

.feature-icon{

width:75px;

height:75px;

font-size:28px;

}

.feature-card h4{

font-size:21px;

}

.feature-cta h3{

font-size:26px;

}

}

/*==================================================
SECTION 2B - ABOUT
PART 2C-2
Premium CSS
==================================================*/

.about-section{
    position:relative;
    padding:120px 0;
    background:#ffffff;
    overflow:hidden;
}

/*=========================
Background Shapes
=========================*/

.about-shape{
    position:absolute;
    border-radius:50%;
    z-index:0;
}

.shape-one{
    width:450px;
    height:450px;
    left:-180px;
    top:-120px;
    background:rgba(37,99,235,.05);
    filter:blur(30px);
}

.shape-two{
    width:320px;
    height:320px;
    right:-120px;
    bottom:-100px;
    background:rgba(0,191,255,.08);
    filter:blur(35px);
}

.shape-three{
    width:180px;
    height:180px;
    right:25%;
    top:12%;
    background:rgba(37,99,235,.08);
    filter:blur(20px);
}

/*=========================
Image Wrapper
=========================*/

.about-image-wrapper{
    position:relative;
    z-index:2;
}

.about-main-image{

    width:100%;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 35px 70px rgba(0,0,0,.12);

    transition:.5s;

}

.about-main-image:hover{

    transform:scale(1.03);

}

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

.experience-card{

    position:absolute;

    left:-25px;

    top:40px;

    background:#2563eb;

    color:#fff;

    padding:22px 30px;

    border-radius:20px;

    box-shadow:0 20px 45px rgba(37,99,235,.35);

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

}

.experience-card h2{

    font-size:42px;

    font-weight:700;

    margin:0;

}

.experience-card span{

    font-size:15px;

}

.project-card,
.client-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:18px;

    background:#fff;

    padding:18px 24px;

    border-radius:18px;

    box-shadow:0 20px 40px rgba(0,0,0,.10);

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

}

.project-card{

    right:-30px;

    top:90px;

}

.client-card{

    right:-20px;

    bottom:40px;

}

.project-card i,
.client-card i{

    width:60px;

    height:60px;

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    color:#fff;

    font-size:24px;

}

.project-card h4,
.client-card h4{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#0b1c39;

}

.project-card p,
.client-card p{

    margin:0;

    color:#6b7280;

    font-size:14px;

}

/*=========================
About Content
=========================*/

.about-content{
    position:relative;
    z-index:2;
}

.about-content h2{

    font-size:35px;

    font-weight:800;

    line-height:1.25;

    margin:20px 0;

    color:#0b1c39;

}

.about-content p{

    font-size:17px;

    color:#6b7280;

    line-height:32px;

}

/*=========================
Feature List
=========================*/

.about-list{

    margin-top:35px;

}

.about-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    font-weight:600;

    color:#0b1c39;

}

.about-item i{

    color:#00b894;

    font-size:22px;

}

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

.mission-box{

    background:#fff;

    border-radius:22px;

    padding:30px;

    margin-top:20px;

    border:1px solid #edf2ff;

    box-shadow:0 18px 40px rgba(0,0,0,.05);

    transition:.4s;

    height:100%;

}

.mission-box:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(37,99,235,.12);

}

.mission-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    margin-bottom:20px;

}

.mission-box h5{

    font-size:24px;

    font-weight:700;

    margin-bottom:15px;

}

.mission-box p{

    font-size:15px;

    line-height:28px;

}

/*=========================
Counters
=========================*/

.counter-box{

    background:#fff;

    border-radius:20px;

    padding:25px 15px;

    border:1px solid #edf2ff;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    transition:.4s;

}

.counter-box:hover{

    transform:translateY(-8px);

}

.counter-box h3{

    font-size:40px;

    color:#2563eb;

    font-weight:800;

}

.counter-box p{

    margin:0;

    color:#6b7280;

}

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

.about-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.about-buttons .btn{

    padding:16px 36px;

    border-radius:50px;

    font-weight:600;

}

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

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

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

@media(max-width:991px){

.about-section{

text-align:center;

padding:90px 0;

}

.about-content h2{

font-size:36px;

}

.project-card,
.client-card,
.experience-card{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin:20px auto;

max-width:320px;

}

.about-buttons{

justify-content:center;

}

}

@media(max-width:767px){

.about-content h2{

font-size:30px;

}

.about-content p{

font-size:16px;

line-height:28px;

}

.about-item{

justify-content:center;

}

.mission-box{

padding:25px;

}

.counter-box{

margin-bottom:20px;

}

.about-buttons .btn{

width:100%;

}

}

/*==================================================
SECTION 2
PART 2C-3
Advanced Premium Effects
Oreon Digital
==================================================*/


/*====================================
Premium Gradient Animation
====================================*/

.features-section,
.about-section{

background-size:300% 300%;

animation:gradientBG 15s ease infinite;

}

@keyframes gradientBG{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/*====================================
Glass Morphism Cards
====================================*/

.feature-card,
.mission-box,
.counter-box{

backdrop-filter:blur(18px);

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

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

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

}


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

.feature-card:hover,
.mission-box:hover,
.counter-box:hover{

box-shadow:

0 20px 60px rgba(37,99,235,.20),

0 0 25px rgba(0,191,255,.18);

}


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

.about-image-wrapper{

overflow:hidden;

border-radius:30px;

}

.about-image-wrapper::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

z-index:3;

transition:1s;

}

.about-image-wrapper:hover::before{

left:150%;

}


/*====================================
Image Zoom
====================================*/

.about-main-image{

transition:1s;

}

.about-image-wrapper:hover .about-main-image{

transform:scale(1.06);

}


/*====================================
Feature Icon Animation
====================================*/

.feature-icon{

position:relative;

overflow:hidden;

}

.feature-icon::before{

content:"";

position:absolute;

width:180%;

height:180%;

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

left:-150%;

top:-40%;

transform:rotate(35deg);

transition:.8s;

}

.feature-card:hover .feature-icon::before{

left:120%;

}


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

.feature-card{

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

}

.feature-card:nth-child(2){

animation-delay:1s;

}

.feature-card:nth-child(3){

animation-delay:2s;

}

.feature-card:nth-child(4){

animation-delay:3s;

}

.feature-card:nth-child(5){

animation-delay:4s;

}

.feature-card:nth-child(6){

animation-delay:5s;

}

@keyframes floatFeature{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*====================================
Counter Animation Style
====================================*/

.counter-box h3{

background:linear-gradient(

90deg,

#2563eb,

#00bfff

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


/*====================================
Mission Icon Rotate
====================================*/

.mission-box:hover .mission-icon{

transform:rotate(360deg);

transition:1s;

}


/*====================================
Button Glow
====================================*/

.about-buttons .btn-primary{

position:relative;

overflow:hidden;

}

.about-buttons .btn-primary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:50%;

height:100%;

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

transform:skewX(-25deg);

transition:.9s;

}

.about-buttons .btn-primary:hover::before{

left:140%;

}


/*====================================
Animated Border
====================================*/

.feature-card::before{

background:

linear-gradient(

90deg,

#2563eb,

#00d4ff,

#2563eb

);

background-size:200%;

animation:borderMove 5s linear infinite;

}

@keyframes borderMove{

100%{

background-position:200%;

}

}


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

.features-section .circle1,
.features-section .circle2,
.about-section .circle3{

position:absolute;

border-radius:50%;

filter:blur(40px);

z-index:0;

}

.circle1{

width:220px;

height:220px;

background:#00bfff25;

left:5%;

top:20%;

animation:blob1 9s infinite;

}

.circle2{

width:260px;

height:260px;

background:#2563eb18;

right:8%;

bottom:10%;

animation:blob2 12s infinite;

}

.circle3{

width:180px;

height:180px;

background:#6c63ff20;

left:45%;

top:12%;

animation:blob3 10s infinite;

}

@keyframes blob1{

50%{

transform:translateY(-40px);

}

}

@keyframes blob2{

50%{

transform:translateX(-30px);

}

}

@keyframes blob3{

50%{

transform:translateY(35px);

}

}


/*====================================
Section Divider
====================================*/

.section-divider{

position:absolute;

left:0;

bottom:0;

width:100%;

line-height:0;

}

.section-divider svg{

display:block;

width:100%;

height:100px;

fill:#fff;

}


/*====================================
Smooth Transition
====================================*/

.feature-card,
.about-main-image,
.mission-box,
.counter-box,
.feature-icon,
.mission-icon{

transition:.45s ease;

}


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

@media(max-width:991px){

.feature-card{

animation:none;

}

.about-image-wrapper::before{

display:none;

}

}

@media(max-width:576px){

.feature-card,
.mission-box,
.counter-box{

border-radius:20px;

}

.section-title h2{

font-size:28px;

}

.about-content h2{

font-size:28px;

}

}

/*==================================================
SECTION 3A - SERVICES
PART 3C
Premium CSS
==================================================*/

.services-section{
    position:relative;
    padding:120px 0;
    background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
    overflow:hidden;
}

/*=========================
Background Shapes
=========================*/

.service-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(45px);
    z-index:0;
}

.service-shape.shape-one{
    width:420px;
    height:420px;
    left:-180px;
    top:-120px;
    background:rgba(37,99,235,.08);
}

.service-shape.shape-two{
    width:300px;
    height:300px;
    right:-100px;
    bottom:-80px;
    background:rgba(0,191,255,.08);
}

.service-shape.shape-three{
    width:180px;
    height:180px;
    right:30%;
    top:10%;
    background:rgba(59,130,246,.08);
}

/*=========================
Service Card
=========================*/

.service-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    padding:40px 35px;

    overflow:hidden;

    height:100%;

    transition:.45s;

    border:1px solid #edf2ff;

    box-shadow:0 20px 45px rgba(0,0,0,.06);

    z-index:2;

}

.service-card:hover{

    transform:translateY(-15px);

    box-shadow:0 30px 60px rgba(37,99,235,.15);

}

/*=========================
Animated Border
=========================*/

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#2563eb,#00c6ff,#2563eb);

    background-size:200%;

    animation:serviceBorder 5s linear infinite;

}

@keyframes serviceBorder{

100%{

background-position:200%;

}

}

/*=========================
Service Number
=========================*/

.service-number{

    position:absolute;

    top:22px;

    right:25px;

    font-size:48px;

    font-weight:800;

    color:rgba(37,99,235,.08);

    line-height:1;

}

/*=========================
Service Icon
=========================*/

.service-icon{

    width:90px;

    height:90px;

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

    margin-bottom:30px;

    transition:.45s;

}

.service-card:hover .service-icon{

    transform:rotate(-10deg) scale(1.1);

}

.service-icon.seo{
    background:linear-gradient(135deg,#2563eb,#00c6ff);
}

.service-icon.ads{
    background:linear-gradient(135deg,#1d4ed8,#3b82f6);
}

.service-icon.web{
    background:linear-gradient(135deg,#ff9800,#ffc107);
}

.service-icon.social{
    background:linear-gradient(135deg,#7c3aed,#a855f7);
}

.service-icon.content{
    background:linear-gradient(135deg,#00b894,#2ecc71);
}

.service-icon.email{
    background:linear-gradient(135deg,#ef4444,#ff6b6b);
}

/*=========================
Title
=========================*/

.service-card h3{

    font-size:26px;

    font-weight:700;

    color:#0b1c39;

    margin-bottom:18px;

}

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

.service-card p{

    color:#6b7280;

    line-height:30px;

    margin-bottom:25px;

}

/*=========================
Tags
=========================*/

.service-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;

}

.service-tags span{

    background:#eef6ff;

    color:#2563eb;

    padding:8px 16px;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

}

/*=========================
Link
=========================*/

.service-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#2563eb;

    font-weight:700;

    transition:.35s;

}

.service-card:hover a{

    gap:16px;

}

/*=========================
Hover Circle
=========================*/

.service-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

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

    transition:.5s;

}

.service-card:hover::after{

    transform:scale(1.8);

}

/*=========================
Bottom CTA
=========================*/

.services-bottom-box{

    position:relative;

    background:linear-gradient(135deg,#0d4fc8,#00bfff);

    color:#fff;

    border-radius:28px;

    padding:55px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(13,79,200,.25);

}

.services-bottom-box::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    top:-100px;

    right:-80px;

}

.services-bottom-box h3{

    font-size:34px;

    font-weight:700;

    margin-bottom:15px;

}

.services-bottom-box p{

    color:#eaf4ff;

    margin:0;

}

.services-bottom-box .btn{

    padding:16px 36px;

    border-radius:50px;

    font-weight:600;

}

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

@media(max-width:991px){

.services-section{

padding:90px 0;

}

.service-card{

padding:35px 28px;

}

.services-bottom-box{

text-align:center;

padding:40px 30px;

}

.services-bottom-box .btn{

margin-top:20px;

}

}

@media(max-width:767px){

.service-card{

padding:30px 22px;

}

.service-card h3{

font-size:22px;

}

.service-icon{

width:75px;

height:75px;

font-size:28px;

}

.service-number{

font-size:36px;

}

.services-bottom-box h3{

font-size:26px;

}

}

/*==================================================
SECTION 3B - WHY CHOOSE US
PART 3D
Premium CSS
==================================================*/

.why-choose-section{
    position:relative;
    padding:120px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

/*=========================
Background Shapes
=========================*/

.why-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(45px);
    z-index:-1;
}

.why-shape-one{
    width:420px;
    height:420px;
    left:-180px;
    top:-150px;
    background:rgba(37,99,235,.06);
}

.why-shape-two{
    width:300px;
    height:300px;
    right:-120px;
    bottom:-120px;
    background:rgba(0,191,255,.08);
}

.why-shape-three{
    width:180px;
    height:180px;
    top:40%;
    left:45%;
    background:rgba(124,58,237,.07);
}

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

.why-image-wrapper{
    position:relative;
}

.why-main-image{
    width:100%;
    border-radius:30px;
    display:block;
    box-shadow:0 30px 70px rgba(0,0,0,.12);
    transition:.5s;
}

.why-main-image:hover{
    transform:scale(1.03);
}

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

.why-exp-card,
.why-client-card,
.why-success-card{

    position:absolute;

    background:#fff;

    border-radius:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.10);

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

}

.why-exp-card{

    top:30px;

    left:-25px;

    padding:22px 28px;

    background:#2563eb;

    color:#fff;

}

.why-exp-card h2{

    font-size:40px;

    margin:0;

    font-weight:800;

}

.why-exp-card span{

    font-size:15px;

}

.why-client-card,
.why-success-card{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

}

.why-client-card{

    right:-25px;

    top:90px;

}

.why-success-card{

    right:-20px;

    bottom:40px;

}

.why-client-card i,
.why-success-card i{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

    background:linear-gradient(135deg,#2563eb,#00bfff);

}

.why-client-card h4,
.why-success-card h4{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#0b1c39;

}

.why-client-card p,
.why-success-card p{

    margin:0;

    color:#6b7280;

}

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

.why-content h2{

    font-size:35px;

    font-weight:800;

    color:#0b1c39;

    line-height:1.25;

    margin:20px 0;

}

.why-content p{

    color:#6b7280;

    font-size:17px;

    line-height:32px;

}

/*=========================
Benefits
=========================*/

.why-item{

    display:flex;

    align-items:center;

    gap:15px;

    background:#fff;

    border:1px solid #edf2ff;

    border-radius:16px;

    padding:18px 20px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.04);

}

.why-item:hover{

    transform:translateX(8px);

    box-shadow:0 18px 35px rgba(37,99,235,.12);

}

.why-item i{

    color:#22c55e;

    font-size:22px;

}

.why-item span{

    font-weight:600;

    color:#0b1c39;

}

/*=========================
Progress Bars
=========================*/

.progress-box{

    margin-bottom:28px;

}

.progress-box span{

    font-weight:600;

    color:#0b1c39;

}

.progress{

    height:10px;

    border-radius:30px;

    background:#edf2ff;

    margin-top:10px;

    overflow:hidden;

}

.progress-bar{

    width:0;

    border-radius:30px;

    background:linear-gradient(90deg,#2563eb,#00bfff);

    transition:2s ease;

}

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

.why-content .btn{

    padding:16px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.why-content .btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(37,99,235,.25);

}

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

@keyframes whyFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

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

@media(max-width:991px){

.why-choose-section{

padding:90px 0;

text-align:center;

}

.why-content h2{

font-size:36px;

}

.why-exp-card,
.why-client-card,
.why-success-card{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin:20px auto;

max-width:320px;

}

}

@media(max-width:767px){

.why-content h2{

font-size:30px;

}

.why-content p{

font-size:16px;

line-height:28px;

}

.why-item{

justify-content:center;

text-align:center;

}

.why-content .btn{

width:100%;

}

}


/*==================================================
SECTION 4A - PORTFOLIO
PART 4B
Premium CSS
==================================================*/

.portfolio-section{
    position:relative;
    padding:120px 0;
    background:#f8fbff;
    overflow:hidden;
    z-index:1;
}

/*=========================
Portfolio Filter
=========================*/

.portfolio-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.portfolio-filter button{

    border:none;

    outline:none;

    padding:14px 30px;

    border-radius:50px;

    background:#ffffff;

    color:#0b1c39;

    font-weight:600;

    transition:.4s;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.portfolio-filter button:hover,
.portfolio-filter button.active{

    color:#fff;

    background:linear-gradient(135deg,#2563eb,#00bfff);

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(37,99,235,.25);

}

/*=========================
Portfolio Card
=========================*/

.portfolio-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.45s;

}

.portfolio-card:hover{

    transform:translateY(-10px);

}

.portfolio-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.7s;

    display:block;

}

.portfolio-card:hover img{

    transform:scale(1.12);

}

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

.portfolio-overlay{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(to top,
    rgba(7,25,68,.95),
    rgba(7,25,68,.15));

    opacity:0;

    transition:.45s;

}

.portfolio-card:hover .portfolio-overlay{

    opacity:1;

}

.portfolio-overlay span{

    color:#00d4ff;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}

.portfolio-overlay h4{

    color:#fff;

    font-size:26px;

    font-weight:700;

    margin:12px 0 20px;

}

/*=========================
Arrow Button
=========================*/

.portfolio-overlay a{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    color:#2563eb;

    transition:.35s;

}

.portfolio-overlay a:hover{

    background:#00bfff;

    color:#fff;

    transform:rotate(45deg);

}

/*=========================
Image Shine
=========================*/

.portfolio-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

    z-index:2;

    transition:1s;

}

.portfolio-card:hover::before{

    left:150%;

}

/*=========================
Bottom CTA
=========================*/

.portfolio-cta{

    position:relative;

    overflow:hidden;

    padding:60px;

    border-radius:30px;

    color:#fff;

    background:linear-gradient(135deg,#0d4fc8,#00bfff);

    box-shadow:0 25px 60px rgba(13,79,200,.22);

}

.portfolio-cta::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

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

    border-radius:50%;

    right:-100px;

    top:-100px;

}

.portfolio-cta h3{

    font-size:34px;

    font-weight:700;

    margin-bottom:12px;

}

.portfolio-cta p{

    color:#edf6ff;

    margin:0;

}

.portfolio-cta .btn{

    border-radius:50px;

    padding:16px 36px;

    font-weight:600;

}

/*=========================
Floating Glow
=========================*/

.portfolio-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-90px;

    bottom:-90px;

    border-radius:50%;

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

    transition:.5s;

}

.portfolio-card:hover::after{

    transform:scale(1.7);

}

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

.portfolio-item{

    transition:.5s;

}

.portfolio-item.hide{

    opacity:0;

    transform:scale(.9);

    pointer-events:none;

}

.portfolio-item.show{

    opacity:1;

    transform:scale(1);

}

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

@media(max-width:991px){

.portfolio-section{

padding:90px 0;

}

.portfolio-cta{

text-align:center;

padding:40px 25px;

}

.portfolio-cta .btn{

margin-top:20px;

}

}

@media(max-width:767px){

.portfolio-card img{

height:250px;

}

.portfolio-overlay{

padding:25px;

}

.portfolio-overlay h4{

font-size:22px;

}

.portfolio-filter{

gap:10px;

}

.portfolio-filter button{

padding:12px 20px;

font-size:14px;

}

.portfolio-cta h3{

font-size:28px;

}

}


/*==================================================
SECTION 5 - OUR PROCESS
PART 5B
Premium CSS
==================================================*/

.process-section{
    position:relative;
    padding:120px 0;
    background:#f8fbff;
    overflow:hidden;
    z-index:1;
}

/*==============================
Background Shapes
==============================*/

.process-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(45px);
    z-index:-1;
}

.process-shape.shape-one{
    width:420px;
    height:420px;
    background:rgba(37,99,235,.08);
    left:-180px;
    top:-150px;
}

.process-shape.shape-two{
    width:320px;
    height:320px;
    background:rgba(0,191,255,.08);
    right:-120px;
    bottom:-120px;
}

.process-shape.shape-three{
    width:180px;
    height:180px;
    background:rgba(124,58,237,.08);
    top:45%;
    left:45%;
}

/*==============================
Timeline
==============================*/

.process-timeline{
    position:relative;
    max-width:1200px;
    margin:80px auto;
}

.timeline-line{

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    transform:translateX(-50%);

    background:linear-gradient(
    to bottom,
    #2563eb,
    #00bfff,
    #2563eb);

    border-radius:50px;

}

/*==============================
Timeline Item
==============================*/

.process-item{

    position:relative;

    width:50%;

    margin-bottom:70px;

}

.process-item.left{

    left:0;

    padding-right:70px;

}

.process-item.right{

    left:50%;

    padding-left:70px;

}

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

.process-card{

    position:relative;

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

    backdrop-filter:blur(20px);

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

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

    border-radius:28px;

    padding:45px;

    transition:.45s;

    overflow:hidden;

    box-shadow:0 20px 55px rgba(0,0,0,.06);

}

.process-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 65px rgba(37,99,235,.18);

}

/*==============================
Top Border
==============================*/

.process-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
    90deg,
    #2563eb,
    #00bfff,
    #2563eb);

    background-size:200%;

    animation:processBorder 6s linear infinite;

}

@keyframes processBorder{

100%{

background-position:200%;

}

}

/*==============================
Step Number
==============================*/

.step-number{

    position:absolute;

    top:25px;

    right:25px;

    font-size:46px;

    font-weight:800;

    color:rgba(37,99,235,.08);

}

/*==============================
Icon
==============================*/

.process-icon{

    width:90px;

    height:90px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:linear-gradient(
    135deg,
    #2563eb,
    #00bfff);

    color:#fff;

    font-size:34px;

    transition:.45s;

}

.process-card:hover .process-icon{

    transform:rotate(-10deg)
              scale(1.1);

}

/*==============================
Typography
==============================*/

.process-card h4{

    font-size:28px;

    font-weight:700;

    color:#0b1c39;

    margin-bottom:18px;

}

.process-card p{

    color:#6b7280;

    line-height:30px;

    margin:0;

}

/*==============================
Timeline Dot
==============================*/

.process-item::after{

    content:"";

    position:absolute;

    top:58px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#00bfff;

    border:6px solid #ffffff;

    box-shadow:0 0 0 8px rgba(37,99,235,.12);

}

.process-item.left::after{

    right:-13px;

}

.process-item.right::after{

    left:-13px;

}

/*==============================
CTA
==============================*/

.process-cta{

    background:linear-gradient(
    135deg,
    #0d4fc8,
    #00bfff);

    border-radius:30px;

    padding:70px;

    color:#fff;

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(13,79,200,.22);

}

.process-cta::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

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

    right:-120px;

    top:-120px;

}

.process-cta h3{

    font-size:36px;

    font-weight:700;

    margin-bottom:18px;

}

.process-cta p{

    color:#eef5ff;

    max-width:650px;

    margin:0 auto 35px;

}

.process-cta .btn{

    padding:16px 40px;

    border-radius:50px;

    font-weight:600;

}

/*==============================
Hover Glow
==============================*/

.process-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

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

    transition:.5s;

}

.process-card:hover::after{

    transform:scale(1.7);

}

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

@media(max-width:991px){

.timeline-line{

left:25px;

}

.process-item{

width:100%;

left:0 !important;

padding-left:70px;

padding-right:0;

margin-bottom:50px;

}

.process-item::after{

left:13px !important;

}

.process-section{

padding:90px 0;

}

.process-cta{

padding:45px 25px;

}

.process-cta h3{

font-size:30px;

}

}

@media(max-width:576px){

.process-card{

padding:30px;

}

.process-icon{

width:75px;

height:75px;

font-size:28px;

}

.process-card h4{

font-size:24px;

}

.process-card p{

font-size:15px;

line-height:28px;

}

.process-cta h3{

font-size:26px;

}

.process-cta .btn{

width:100%;

}

}












































/*=========================================
SECTION 18 - PREMIUM FOOTER CSS
Oreon Digital
==========================================*/

.footer-section{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#04142f,#072b67,#0d4fc8,#0a8cff);
    color:#fff;
    padding-top:0;
}

/*==============================
Animated Background
==============================*/

.footer-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-220px;
    left:-180px;
    filter:blur(30px);
    animation:footerBlob1 15s infinite ease-in-out;
}

.footer-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(0,212,255,.08);
    right:-150px;
    bottom:-150px;
    filter:blur(35px);
    animation:footerBlob2 18s infinite ease-in-out;
}

@keyframes footerBlob1{
    50%{
        transform:translateY(60px);
    }
}

@keyframes footerBlob2{
    50%{
        transform:translateY(-50px);
    }
}

/*==============================
Newsletter
==============================*/

.footer-top{
    position:relative;
    padding:90px 0;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.footer-newsletter h2{
    font-size:35px;
    font-weight:700;
    line-height:1.3;
    margin:20px 0;
}

.footer-newsletter p{
    color:#d5e7ff;
    line-height:30px;
}

.footer-tag{
    display:inline-block;
    padding:10px 25px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(15px);
    color:#fff;
    font-size:14px;
}

/*==============================
Newsletter Form
==============================*/

.newsletter-form{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:70px;
    padding:8px;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.newsletter-form input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    padding:18px 25px;
    font-size:15px;
}

.newsletter-form button{
    border:none;
    color:#fff;
    padding:18px 35px;
    border-radius:60px;
    background:linear-gradient(135deg,#00c6ff,#2563eb);
    transition:.4s;
    font-weight:600;
}

.newsletter-form button:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,198,255,.35);
}

/*==============================
Footer Widgets
==============================*/

.footer-widget{
    position:relative;
    margin-top:80px;
}

.footer-logo{
    width:180px;
    margin-bottom:25px;
}

.footer-widget p{
    color:#d8e7ff;
    line-height:30px;
}

.footer-widget h4{
    font-size:22px;
    margin-bottom:28px;
    position:relative;
    font-weight:700;
}

.footer-widget h4::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:55px;
    height:3px;
    background:#00d4ff;
    border-radius:30px;
}

/*==============================
Links
==============================*/

.footer-widget ul li{
    margin-bottom:15px;
}

.footer-widget ul li a{
    color:#d8e7ff;
    transition:.35s;
    position:relative;
}

.footer-widget ul li a:hover{
    color:#00d4ff;
    padding-left:10px;
}

.footer-widget ul li a::before{
    content:"➜";
    opacity:0;
    margin-right:0;
    transition:.3s;
}

.footer-widget ul li a:hover::before{
    opacity:1;
    margin-right:8px;
}

/*==============================
Social Icons
==============================*/

.footer-social{
    display:flex;
    gap:15px;
    margin-top:35px;
}

.footer-social a{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(15px);
    transition:.4s;
}

.footer-social a:hover{
    transform:translateY(-8px) rotate(360deg);
    background:#00bfff;
    box-shadow:0 15px 35px rgba(0,212,255,.45);
}

/*==============================
Contact
==============================*/

.footer-contact div{
    display:flex;
    gap:15px;
    margin-bottom:20px;
    align-items:flex-start;
}

.footer-contact i{
    color:#00d4ff;
    font-size:18px;
    margin-top:5px;
}

.footer-contact span{
    color:#d8e7ff;
    line-height:28px;
}

/*==============================
Awards
==============================*/

.footer-awards{
    padding:70px 0;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-top:70px;
}

.award-box{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    border-radius:20px;
    padding:35px 20px;
    transition:.4s;
}

.award-box i{
    font-size:38px;
    color:#00d4ff;
    margin-bottom:18px;
}

.award-box h5{
    font-size:18px;
    margin:0;
}

.award-box:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,.15);
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}

/*==============================
Bottom
==============================*/

.footer-bottom{
    padding:30px 0;
}

.footer-bottom p{
    margin:0;
    color:#d8e7ff;
}

.footer-bottom a{
    margin-left:25px;
    color:#d8e7ff;
    transition:.3s;
}

.footer-bottom a:hover{
    color:#00d4ff;
}

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

@media(max-width:991px){

.footer-newsletter{
    text-align:center;
    margin-bottom:40px;
}

.newsletter-form{
    flex-direction:column;
    border-radius:25px;
}

.newsletter-form input{
    width:100%;
}

.newsletter-form button{
    width:100%;
    margin-top:10px;
}

.footer-widget{
    margin-top:50px;
}

.footer-bottom{
    text-align:center;
}

.footer-bottom a{
    margin:10px;
    display:inline-block;
}

}

@media(max-width:767px){

.footer-newsletter h2{
    font-size:30px;
}

.footer-widget h4{
    font-size:20px;
}

.footer-awards .col{
    flex:0 0 100%;
    margin-bottom:20px;
}

.footer-social{
    justify-content:center;
}

.footer-widget{
    text-align:left;
}

.footer-widget h4::after{
    right:40%;
    transform:translateX(-50%);
}

.footer-contact div{
    justify-content:center;
    text-align:left;
}

}


/* Scroll To Top Button */
#topBtn{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    border: none;
    outline: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #00c6ff);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    transition: all .35s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    z-index: 9999;
}

/* Show Button */
#topBtn.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover Effect */
#topBtn:hover{
    background: linear-gradient(135deg, #0056d6, #0099ff);
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 12px 30px rgba(13,110,253,.45);
}

/* Click Effect */
#topBtn:active{
    transform: scale(.92);
}

/* Icon Animation */
#topBtn i{
    transition: transform .3s ease;
}

#topBtn:hover i{
    transform: translateY(-3px);
}

/* Mobile */
@media (max-width:768px){
    #topBtn{
        width:48px;
        height:48px;
        right:20px;
        bottom:20px;
        font-size:18px;
    }
}


/*====================================
Reveal Animation
====================================*/

.reveal-item{

opacity:0;

transform:translateY(50px);

transition:.8s ease;

}

.active-reveal{

opacity:1;

transform:translateY(0);

}

/*====================================
Ripple Effect
====================================*/

.btn{

position:relative;

overflow:hidden;

}

.btn-ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:rippleEffect .6s linear;

pointer-events:none;

}

@keyframes rippleEffect{

to{

transform:scale(4);

opacity:0;

}

}

/*====================================
Portfolio Reveal
====================================*/

.portfolio-hidden{

opacity:0;

transform:translateY(60px);

transition:.8s;

}

.portfolio-active{

opacity:1;

transform:translateY(0);

}

/*====================================
Portfolio Float
====================================*/

@keyframes portfolioFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/*====================================
Ripple
====================================*/

.portfolio-filter button{

position:relative;

overflow:hidden;

}

.portfolio-ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:portfolioRipple .6s linear;

pointer-events:none;

}

@keyframes portfolioRipple{

100%{

transform:scale(4);

opacity:0;

}

}




/*=========================================
Section 5 JavaScript Support CSS
=========================================*/

.process-hidden{

opacity:0;

transform:translateY(60px);

transition:.8s ease;

}

.process-show{

opacity:1;

transform:translateY(0);

}

.process-item.active-step .process-card{

border:1px solid rgba(37,99,235,.25);

box-shadow:0 25px 60px rgba(37,99,235,.15);

}

.process-ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:processRipple .7s linear;

pointer-events:none;

}

@keyframes processRipple{

100%{

transform:scale(4);

opacity:0;

}

}

@keyframes processFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.icon-pulse{

animation:iconPulse .8s ease;

}

@keyframes iconPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.18);

}

100%{

transform:scale(1);

}

}