/* ===================================================   SERVICE SECTION  =================================================== */
   


/* ===================================================
   WEB SERVICE SECTION CSS
   Prefix: web-ser-
=================================================== */

.web-ser-features{
position:relative;
min-height:85vh;
padding:80px 6%;
display:flex;
align-items:center;
overflow:hidden;
background:#050816;
}

/* =====================================
   BACKGROUND
===================================== */

.web-ser-features-bg{
position:absolute;
inset:-20%;
background: url("../images/grphic2.jpg") center/cover no-repeat;

filter:brightness(.28) saturate(1.25);

transform:scale(1.15);

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

will-change:transform;
}

@keyframes webSerBgZoom{

0%,100%{
transform:scale(1.15);
}

50%{
transform:scale(1.3);
}

}


.web-ser-features-bg1{
position:absolute;
inset:-20%;
background: url("../images/coding.jpg") center/cover no-repeat;

filter:brightness(.28) saturate(1.25);

transform:scale(1.15);

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

will-change:transform;
}

@keyframes webSerBgZoom{

0%,100%{
transform:scale(1.15);
}

50%{
transform:scale(1.3);
}

}

.web-ser-features-bg2{
position:absolute;
inset:-20%;
background: url("../images/animation-background.jpg") center/cover no-repeat;

filter:brightness(.28) saturate(1.25);

transform:scale(1.15);

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

will-change:transform;
}

@keyframes webSerBgZoom{

0%,100%{
transform:scale(1.15);
}

50%{
transform:scale(1.3);
}

}

.web-ser-features-bg3{
position:absolute;
inset:-20%;
background: url("../images/animation-background.jpg") center/cover no-repeat;

filter:brightness(.28) saturate(1.25);

transform:scale(1.15);

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

will-change:transform;
}

@keyframes webSerBgZoom{

0%,100%{
transform:scale(1.15);
}

50%{
transform:scale(1.3);
}

}
.web-ser-features-bg5{
position:absolute;
inset:-20%;
background: url("../images/digital\ marketing.jpg") center/cover no-repeat;

filter:brightness(.28) saturate(1.25);

transform:scale(1.15);

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

will-change:transform;
}

@keyframes webSerBgZoom{

0%,100%{
transform:scale(1.15);
}

50%{
transform:scale(1.3);
}

}
/* =====================================
   OVERLAY
===================================== */

.web-ser-features::before{
content:"";

position:absolute;
inset:0;

background:
radial-gradient(
circle at center,
rgba(212,175,55,.12),
transparent 55%
),

linear-gradient(
180deg,
rgba(5,8,22,.2),
rgba(5,8,22,.92)
);

z-index:1;
}

/* =====================================
   CONTENT WRAPPER
===================================== */

.web-ser-content{
position:relative;
z-index:2;
width:100%;
}

/* =====================================
   TITLE
===================================== */

.web-ser-title{

text-align:center;

margin-bottom:60px;

position:relative;

z-index:2;

opacity:0;

transform:translateY(80px);
}

.web-ser-title h2{

font-size:44px;

font-weight:700;

color:#fff;

letter-spacing:.5px;

margin-bottom:15px;
}

.web-ser-title h2 span{

background:
linear-gradient(
90deg,
#d4af37,
#fff3b0,
#d4af37
);

background-size:200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:webSerShine 6s linear infinite;
}

@keyframes webSerShine{

0%{
background-position:0%;
}

100%{
background-position:200%;
}

}

.web-ser-title p{

max-width:650px;

margin:auto;

line-height:1.8;

font-size:15px;

color:rgba(255,255,255,.65);
}

/* =====================================
   GRID
===================================== */

.web-ser-wrapper{

display:grid;

grid-template-columns:1fr 420px 1fr;

gap:45px;

align-items:center;

position:relative;

z-index:2;
}

/* =====================================
   CENTER IMAGE
===================================== */

.web-ser-center{

position:relative;

display:flex;

align-items:center;

justify-content:center;
}

.web-ser-center::before{

content:"";

position:absolute;

width:340px;
height:340px;

border-radius:50%;

background:#d4af37;

opacity:.15;

filter:blur(120px);

animation:webSerPulseGlow 5s ease-in-out infinite;
}

@keyframes webSerPulseGlow{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.35);
}

}

.web-ser-center img{

width:100%;

max-width:420px;

position:relative;
z-index:2;

opacity:0;

transform:
translateY(180px)
scale(.75);

filter:
drop-shadow(0 30px 60px rgba(0,0,0,.5))
drop-shadow(0 0 40px rgba(212,175,55,.2));

will-change:transform;
}

/* =====================================
   LEFT / RIGHT START STATES
===================================== */

.web-ser-left .web-ser-box{

opacity:0;

transform:
translateX(-180px)
rotateY(25deg);
}

.web-ser-right .web-ser-box{

opacity:0;

transform:
translateX(180px)
rotateY(-25deg);
}

/* =====================================
   CARD
===================================== */

.web-ser-box{

position:relative;

overflow:hidden;

padding:24px;

margin-bottom:22px;

border-radius:20px;

cursor:pointer;

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

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

backdrop-filter:blur(18px);

transition:
all .5s ease;

transform-style:preserve-3d;

will-change:transform;
}

/* =====================================
   SHINE EFFECT
===================================== */

.web-ser-box::before{

content:"";

position:absolute;

top:0;
left:-180%;

width:90%;
height:100%;

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

transform:skewX(-25deg);

transition:1s;
}

.web-ser-box:hover::before{
left:200%;
}

/* =====================================
   CARD HOVER
===================================== */

.web-ser-box:hover{

border-color:
rgba(212,175,55,.35);

box-shadow:

0 15px 45px rgba(212,175,55,.12),

0 0 70px rgba(212,175,55,.08);

transform:
translateY(-12px)
scale(1.03);
}

/* =====================================
   ICON
===================================== */

.web-ser-icon{

width:50px;
height:50px;

display:flex;

align-items:center;
justify-content:center;

border-radius:14px;

background:
linear-gradient(
135deg,
#d4af37,
#fff3b0
);

color:#050816;

font-size:18px;

margin-bottom:14px;

box-shadow:
0 10px 25px rgba(212,175,55,.25);
}

/* =====================================
   TEXT
===================================== */

.web-ser-box h3{

font-size:18px;

font-weight:600;

margin-bottom:8px;

color:#fff;
}

.web-ser-box p{

font-size:14px;

line-height:1.7;

color:
rgba(255,255,255,.65);
}

/* =====================================
   CARD BORDER GLOW
===================================== */

.web-ser-box::after{

content:"";

position:absolute;

inset:0;

border-radius:20px;

padding:1px;

background:
linear-gradient(
135deg,
rgba(212,175,55,.25),
transparent,
rgba(212,175,55,.15)
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;
mask-composite:exclude;

pointer-events:none;
}

/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:1200px){

.web-ser-wrapper{
grid-template-columns:1fr 350px 1fr;
}

}

@media(max-width:992px){

.web-ser-wrapper{

grid-template-columns:1fr;

text-align:center;
}

.web-ser-center{

order:-1;

margin-bottom:30px;
}

.web-ser-title h2{
font-size:38px;
}

}

@media(max-width:768px){

.web-ser-features{
padding:70px 20px;
}

.web-ser-title h2{
font-size:32px;
}

.web-ser-title p{
font-size:14px;
}

.web-ser-center img{
max-width:320px;
}

.web-ser-box{
padding:20px;
}

}

@media(max-width:480px){

.web-ser-title h2{
font-size:28px;
}

.web-ser-center img{
max-width:280px;
}

.web-ser-icon{
width:45px;
height:45px;
}

}



/* =====================================
   PORTFOLIO SECTION
===================================== */

.portfolio-section{

position:relative;

max-width:1200px;

margin:auto;
margin-top: 80px;
min-height:420px;

border-radius:40px;

overflow:hidden;

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

padding:80px 40px;

background:
radial-gradient(circle at center,
rgba(212,175,55,.12),
transparent 40%),

linear-gradient(
180deg,
#070b1a,
#0b1430
);

border:1px solid rgba(212,175,55,.15);

box-shadow:
0 30px 80px rgba(0,0,0,.35);
}

.portfolio-section{

opacity:0;

transform:translateY(100px);

will-change:transform,opacity;
}

.portfolio-section{
opacity:0;
transform:translateY(100px);
}

.portfolio-label,
.portfolio-title,
.portfolio-description,
.portfolio-btn{
opacity:0;
transform:translateY(40px);
}
.portfolio-content > *{

opacity:0;

transform:translateY(40px);
}

/* =====================================
   BIG BACKGROUND TEXT
===================================== */

.portfolio-bg-text{

position:absolute;
left:50%;
top:50%;

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

font-family:'Cinzel',serif;

font-size:clamp(90px,12vw,180px);

font-weight:900;

letter-spacing:5px;

width:100%;

text-align:center;

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

white-space:nowrap;
}

/* =====================================
   GLOW EFFECTS
===================================== */

.glow{

position:absolute;

width:700px;
height:700px;

background:#d4af37;

border-radius:50%;

filter:blur(180px);

opacity:.12;

z-index:1;

animation:glowMove 8s ease-in-out infinite;
}

@keyframes glowMove{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.25);
}

}

.light{

position:absolute;

border-radius:50%;

background:#d4af37;

filter:blur(60px);

opacity:.25;

z-index:1;
}

.light1{

width:160px;
height:160px;

top:10%;
left:10%;

animation:float1 8s ease-in-out infinite;
}

.light2{

width:120px;
height:120px;

right:10%;
bottom:10%;

animation:float2 10s ease-in-out infinite;
}

@keyframes float1{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-40px);
}
}

@keyframes float2{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(40px);
}
}

/* =====================================
   CONTENT
===================================== */

.portfolio-content{

position:relative;

z-index:5;

text-align:center;

max-width:850px;
}

.portfolio-label{

display:inline-block;

font-size:13px;

font-weight:700;

letter-spacing:4px;

color:#d4af37;

margin-bottom:20px;
}

.portfolio-title{

font-family:'Cinzel',serif;

font-size:clamp(60px,9vw,140px);

font-weight:900;

line-height:1.1;

letter-spacing:4px;

text-transform:uppercase;

display:inline-block;

background:
linear-gradient(
90deg,
#d4af37,
#fff3b0,
#173d6d,
#d4af37,
#fff6ca
);

background-size:300% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:portfolioGoldFlow 6s linear infinite;

position:relative;

margin-bottom:20px;
}

/* Moving Gold + Navy Shine */

@keyframes portfolioGoldFlow{

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

100%{
background-position:300% center;
}

}.portfolio-description{

max-width:700px;

margin:auto;

font-size:16px;

line-height:1.9;

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

margin-bottom:35px;
}

/* =====================================
   BUTTON
===================================== */

.portfolio-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 36px;

border-radius:14px;

text-decoration:none;

font-weight:700;

font-size:15px;

color:#050816;

background:
linear-gradient(
135deg,
#d4af37,
#fff3b0
);

transition:.4s;

box-shadow:
0 10px 30px rgba(212,175,55,.25);
}

.portfolio-btn:hover{

transform:translateY(-6px);

box-shadow:
0 20px 50px rgba(212,175,55,.4);
}

.portfolio-btn::after{
content:"→";
}

 @media (max-width:1200px){

     .portfolio-label{
        display:block;
     }
     .portfolio-section{
        margin: 30px;
     }
 }
   
 @media (max-width:768px){

.portfolio-section{
min-height:320px;
padding:40px 20px;
margin:40px 15px;
border-radius:25px;
}

.portfolio-bg-text{
font-size:20vw;
letter-spacing:0;
}

.portfolio-title{
font-size:clamp(40px,12vw,70px);
letter-spacing:2px;
}

.portfolio-description{
font-size:14px;
line-height:1.7;
}

}

@media (max-width:480px){

.portfolio-title{
font-size:36px;
}

.portfolio-btn{
padding:14px 24px;
font-size:14px;
}

}




 .timeline-section {
            padding: 120px 20px;
            position: relative
        }

        .timeline-title {
            text-align: center;
            margin-bottom: 90px
        }

        .timeline-title h2 {
            font-size: 56px;
            font-weight: 800
        }

        .timeline-title span {
            color: #d4af37
        }

        .timeline-title p {
            max-width: 760px;
            margin: 15px auto 0;
            color: #64748b;
            line-height: 1.8
        }

        .timeline-wrapper {
            max-width: 1100px;
            margin: auto;
            position: relative
        }

        .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            width: 4px;
            height: 100%;
            transform: translateX(-50%);
            background: linear-gradient(#d4af37, #f5dfa0, #d4af37);
            border-radius: 20px;
        }

        .timeline-step {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin: 80px 0;
        }

        .timeline-step.right {
            flex-direction: row-reverse
        }

        .timeline-card {
            width: 48%;
            position: relative;
            overflow: hidden;

            padding: 35px;

            border-radius: 30px;

           background:linear-gradient(145deg,#0b1430,#070b1a);

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

            box-shadow:
                0 15px 50px rgba(0, 0, 0, .12);

            transition: .6s cubic-bezier(.22, 1, .36, 1);

            isolation: isolate;
        }

        /* MOVING GOLD SHINE */
        .timeline-card::before {
            content: "";

            position: absolute;
            top: 0;
            left: -200%;

            width: 80%;
            height: 100%;

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

            transform: skewX(-25deg);

            animation: timelineShine 6s linear infinite;

            z-index: 1;
        }

        @keyframes timelineShine {

            0% {
                left: -220%;
            }

            100% {
                left: 250%;
            }

        }

        /* HOVER SWEEP */
        .timeline-card::after {
            content: "";

            position: absolute;
            inset: 0;

            background:
                linear-gradient(120deg,
                    transparent,
                    rgba(255, 255, 255, .08),
                    transparent);

            transform: translateX(-150%);

            transition: .9s;

            z-index: 1;
        }

        .timeline-card:hover::after {
            transform: translateX(150%);
        }

        /* PREMIUM HOVER */
        .timeline-card:hover {

            transform:
                translateY(-15px) scale(1.03);

            border-color:
                rgba(212, 175, 55, .5);

            box-shadow:
                0 30px 90px rgba(212, 175, 55, .25);

        }
        .timeline-card {
    opacity: 1;
    transform: none;
}
.timeline-step .timeline-card {
    will-change: transform, opacity;
}
.timeline-section,
.timeline-wrapper,
.timeline-step,
.timeline-card {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

        .timeline-number {
            position: absolute;
            right: 20px;
            top: 8px;
            font-size: 90px;
            font-weight: 800;
            color: rgba(255, 255, 255, .08);
        }

        .timeline-icon{

width:80px;
height:80px;

border-radius:22px;

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

background:
linear-gradient(
135deg,
#d4af37,
#fff3b0
);

color:#071C3C;

font-size:34px;

box-shadow:
0 15px 40px rgba(212,175,55,.35);

margin-bottom:20px;

position:relative;
z-index:2;

transition:.7s;
}

.timeline-card:hover .timeline-icon{

transform:
rotateY(180deg)
scale(1.12);

}
        .timeline-card h3 {
            font-size: 28px;
            margin-bottom: 10px;
            color: #fff;
        
        }

        .timeline-card p {
            line-height: 1.8;
            color: rgba(255, 255, 255, .78)
        }

        .timeline-dot{

position:absolute;

left:50%;
top:50%;

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

width:28px;
height:28px;

border-radius:50%;

background:#d4af37;

z-index:5;

box-shadow:
0 0 25px rgba(212,175,55,.8),
0 0 70px rgba(212,175,55,.4);

}

.timeline-dot::before{

content:"";

position:absolute;

inset:-12px;

border-radius:50%;

border:2px solid rgba(212,175,55,.5);

animation:
timelinePulse 2s infinite;

}

@keyframes timelinePulse{

0%{
transform:scale(.8);
opacity:1;
}

100%{
transform:scale(1.8);
opacity:0;
}

}


        @media(max-width:991px) {
            .timeline-line {
                left: 24px
            }

            .timeline-step,
            .timeline-step.right {
                flex-direction: row
            }

            .timeline-dot {
                left: 24px
            }

            .timeline-card {
                width: calc(100% - 85px);
                margin-left: 85px
            }

            .timeline-title h2 {
                font-size: 38px
            }
        }