/* =========================================
   PORTFOLIO / PAGES
========================================= */

/* HERO */

.portfolio-hero {
    padding-top: 180px;
    padding-bottom: 100px;
    text-align: center;
}

.portfolio-hero-content {
    max-width: 860px;
    margin: 0 auto;
}

.portfolio-badge {
    display: inline-block;
    margin-bottom: 24px;
    padding: 10px 18px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;

    background: rgba(255,255,255,0.03);

    font-size: 0.85rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.72);

    backdrop-filter: blur(10px);
}

.portfolio-hero h1 {
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: 1.1;
    margin-bottom: 24px;

    font-family: "Special Elite", monospace;

    background: linear-gradient(90deg, #ffffff, #b9d8ff);
    -webkit-background-clip: text;
    color: transparent;
}

.portfolio-hero p {
    max-width: 760px;
    margin: 0 auto;

    font-size: 1.15rem;
    line-height: 1.8;

    color: rgba(255,255,255,0.72);
}

/* SECTIONS */

.portfolio-section,
.featured-project,
.portfolio-cta {
    padding: 80px 0;
}

/* SECTION HEADINGS */

.portfolio-section h2,
.featured-project h2,
.portfolio-cta h2 {
    margin-bottom: 40px;

    font-size: 2.3rem;
    text-align: center;

    font-family: "Special Elite", monospace;

    background: linear-gradient(90deg, #41b4ff, #8f43ff);
    -webkit-background-clip: text;
    color: transparent;
}

/* FEATURED CARD */

.featured-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;

    overflow: hidden;

    backdrop-filter: blur(10px);

    transition: 0.3s ease;
}

.featured-card:hover {
    transform: translateY(-6px);
    border-color: rgba(65,180,255,0.35);
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.featured-content {
    padding: 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-category {
    display: inline-block;
    margin-bottom: 18px;

    color: #41b4ff;

    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.featured-content h3 {
    margin-bottom: 20px;

    font-size: 2rem;

    font-family: "Special Elite", monospace;
}

.featured-content p {
    margin-bottom: 28px;

    line-height: 1.8;

    color: rgba(255,255,255,0.74);
}

/* GRID */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

/* CARDS */

.portfolio-card {
    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;

    overflow: hidden;

    backdrop-filter: blur(10px);

    transition: 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    border-color: rgba(65,180,255,0.3);
}

.portfolio-image img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

.portfolio-content {
    padding: 28px;
}

.portfolio-content h3 {
    margin-bottom: 16px;

    font-size: 1.4rem;

    font-family: "Special Elite", monospace;
}

.portfolio-content p {
    margin-bottom: 24px;

    line-height: 1.7;

    color: rgba(255,255,255,0.72);
}

/* TAGS */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-tags span {
    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);

    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
}

/* BUTTON */

.project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 32px;

    padding: 14px 26px;

    border-radius: 12px;

    background: linear-gradient(90deg, #41b4ff, #8f43ff);

    color: #000;
    text-decoration: none;
    font-weight: 700;

    transition: 0.25s ease;
}

.project-btn:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

/* CTA */

.portfolio-cta {
    text-align: center;
}

.portfolio-cta p {
    max-width: 720px;
    margin: 0 auto;

    line-height: 1.8;

    color: rgba(255,255,255,0.72);
}

/* RESPONSIVE */

@media (max-width: 900px) {

    .featured-card {
        grid-template-columns: 1fr;
    }

    .featured-content {
        padding: 32px;
    }

}

@media (max-width: 768px) {

    .portfolio-hero {
        padding-top: 160px;
        padding-bottom: 70px;
    }

    .portfolio-section,
    .featured-project,
    .portfolio-cta {
        padding: 60px 0;
    }

    .portfolio-section h2,
    .featured-project h2,
    .portfolio-cta h2 {
        font-size: 2rem;
    }

    .featured-content h3 {
        font-size: 1.7rem;
    }

}

@media (max-width: 480px) {

    .portfolio-badge {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }

    .portfolio-hero p {
        font-size: 1rem;
    }

    .portfolio-content {
        padding: 24px;
    }

    .featured-content {
        padding: 24px;
    }

}


.portfolio-content h3 a {
    color: inherit;
    text-decoration: none;
    transition: 0.25s ease;
}

.portfolio-content h3 a:hover {
    color: #41b4ff;
}

/* =========================================================
DEV2LAB — SERVICES PAGE
pages.css
========================================================= */

/* HERO */

.services-hero{
position: relative;
padding: 220px 0 140px;
z-index: 2;
}

.services-hero-content{
max-width: 900px;
text-align: center;
}

/* BADGES */

.services-badge{
display: inline-block;
padding: 10px 22px;
border: 1px solid rgba(120,170,255,0.18);
border-radius: 999px;
background: rgba(120,170,255,0.06);
color: #b7d4ff;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 32px;
backdrop-filter: blur(10px);
}

.services-hero h1{
font-size: clamp(3rem, 7vw, 6rem);
line-height: 1.04;
margin-bottom: 28px;
font-weight: 800;
color: #fff;
letter-spacing: -0.03em;
}

.services-hero p{
max-width: 760px;
margin: 0 auto;
font-size: 1.18rem;
line-height: 1.9;
color: rgba(255,255,255,0.72);
}

.services-hero-buttons{
display: flex;
justify-content: center;
gap: 18px;
margin-top: 50px;
flex-wrap: wrap;
}

.secondary-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 34px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.03);
color: #fff;
text-decoration: none;
font-weight: 600;
transition: 0.3s ease;
backdrop-filter: blur(12px);
}

.secondary-btn:hover{
border-color: rgba(120,170,255,0.35);
background: rgba(120,170,255,0.08);
transform: translateY(-3px);
}

/* SECTIONS */

.services-section{
position: relative;
padding: 120px 0;
z-index: 2;
}

.services-section h2{
text-align: center;
font-size: clamp(2.2rem,5vw,4rem);
margin-bottom: 32px;
color: #fff;
font-weight: 400;
letter-spacing: 0.04em;
font-family: 'Special Elite', cursive;
line-height: 1.2;
}

/* SERVICES GRID */

.services-grid{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
gap: 34px;
}

.service-card,
.pricing-card,
.support-card,
.infrastructure-box{
position: relative;
padding: 42px;
border-radius: 34px;

background: rgba(255,255,255,0.025);

border: 1px solid rgba(255,255,255,0.07);

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

box-shadow:
0 8px 30px rgba(0,0,0,0.22);

overflow: hidden;
transition: 0.35s ease;
}


.service-card::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at top,
rgba(120,160,255,0.10),
transparent 60%);
opacity:0;
transition:0.4s ease;
}

.service-card:hover,
.pricing-card:hover,
.support-card:hover,
.infrastructure-box:hover{
transform: translateY(-6px);

background: rgba(255,255,255,0.04);

border-color: rgba(120,170,255,0.22);

box-shadow:
0 14px 40px rgba(0,0,0,0.32),
0 0 24px rgba(65,180,255,0.10);
}

.service-card:hover::before{
opacity:1;
}

.featured-service{
border-color: rgba(140,170,255,0.24);
box-shadow: 0 0 45px rgba(90,120,255,0.08);
}

.service-icon{
font-size: 2.6rem;
margin-bottom: 24px;
}

.service-card h3{
font-size: 2rem;
margin-bottom: 20px;
color: #fff;
font-weight: 400;
font-family: 'Special Elite', cursive;
letter-spacing: 0.03em;
line-height: 1.25;
}

.service-card p{
color: rgba(255,255,255,0.7);
line-height: 1.85;
margin-bottom: 28px;
}

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

.service-card ul li{
position: relative;
padding-left: 24px;
margin-bottom: 16px;
color: rgba(255,255,255,0.82);
line-height: 1.6;
}

.service-card ul li::before{
content:"";
position:absolute;
left:0;
top:11px;
width:8px;
height:8px;
border-radius:50%;
background:linear-gradient(135deg,#7ecbff,#8f6dff);
box-shadow:0 0 10px rgba(120,160,255,0.35);
}

/* INDUSTRIES */

.industries-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
}

.industry-box{
padding: 34px;
text-align:center;
border-radius: 26px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color:#fff;
font-weight:700;
font-size:1.05rem;
transition:0.3s ease;
backdrop-filter: blur(10px);
}

.industry-box:hover{
transform:translateY(-5px);
border-color:rgba(120,160,255,0.28);
background:rgba(120,160,255,0.06);
}

/* PRICING */

.pricing-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:34px;
}

.pricing-card{
position:relative;
padding:48px 40px;
border-radius:36px;
border:1px solid rgba(255,255,255,0.08);
overflow:hidden;
transition:0.35s ease;
}

.pricing-card:hover{
transform:translateY(-8px);
border-color:rgba(120,160,255,0.24);
box-shadow:0 0 45px rgba(90,120,255,0.10);
}

.featured-card{
border-color: rgba(120,160,255,0.24);
box-shadow: 0 0 45px rgba(90,120,255,0.08);
}

.premium-card{
border-color: rgba(145,120,255,0.24);
}


.pricing-card h3{
font-size:2.1rem;
color:#fff;
margin-bottom:20px;
font-weight:400;
font-family:'Special Elite', cursive;
letter-spacing:0.03em;
line-height:1.25;
}

.price{
font-size:1.4rem;
color:#9fc3ff;
font-weight:400;
margin-bottom:20px;
font-family:'Special Elite', cursive;
letter-spacing:0.04em;
line-height:1.3;
}

.price-note{
color:rgba(255,255,255,0.7);
line-height:1.8;
margin-bottom:30px;
}

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

.pricing-card ul li{
position:relative;
padding-left:24px;
margin-bottom:16px;
color:rgba(255,255,255,0.82);
line-height:1.6;
}

.pricing-card ul li::before{
content:"";
position:absolute;
left:0;
top:11px;
width:8px;
height:8px;
border-radius:50%;
background:linear-gradient(135deg,#7ecbff,#8f6dff);
}

/* SUPPORT */

.support-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:34px;
}

.support-card{
position:relative;
padding:44px 38px;
border-radius:34px;
border:1px solid rgba(255,255,255,0.08);
transition:0.35s ease;
}

.support-card:hover{
transform:translateY(-8px);
border-color:rgba(120,160,255,0.24);
}

.featured-support{
border-color:rgba(120,160,255,0.24);
box-shadow:0 0 45px rgba(90,120,255,0.08);
}


.support-card h3{
font-size:2rem;
color:#fff;
margin-bottom:20px;
font-weight:400;
font-family:'Special Elite', cursive;
letter-spacing:0.03em;
line-height:1.25;
}

.support-card p{
color:rgba(255,255,255,0.7);
line-height:1.8;
margin-bottom:28px;
}

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

.support-card ul li{
position:relative;
padding-left:24px;
margin-bottom:16px;
color:rgba(255,255,255,0.82);
line-height:1.6;
}

.support-card ul li::before{
content:"";
position:absolute;
left:0;
top:11px;
width:8px;
height:8px;
border-radius:50%;
background:linear-gradient(135deg,#7ecbff,#8f6dff);
}

/* INFRASTRUCTURE */

.infrastructure-box{
max-width:900px;
margin:0 auto;
text-align:center;
padding:70px 60px;
border-radius:40px;
border:1px solid rgba(120,160,255,0.14);
box-shadow:0 0 60px rgba(90,120,255,0.06);
}

.infrastructure-badge{
display:inline-block;
padding:10px 18px;
margin-bottom:28px;
border-radius:999px;
background:rgba(120,160,255,0.08);
border:1px solid rgba(120,160,255,0.18);
color:#bdd6ff;
font-size:0.75rem;
font-weight:700;
letter-spacing:0.18em;
}

.infrastructure-box h2{
margin-bottom:28px;
font-family:'Special Elite', cursive;
font-weight:400;
letter-spacing:0.04em;
line-height:1.2;
}

.infrastructure-box p{
color:rgba(255,255,255,0.72);
line-height:1.9;
font-size:1.08rem;
}

.infrastructure-features{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
margin-top:40px;
}

.infrastructure-features span{
padding:14px 22px;
border-radius:999px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(120,160,255,0.12);
color:#fff;
font-size:0.92rem;
}

.infrastructure-price{
font-size:1.4rem;
color:#9fc3ff;
font-weight:400;
margin-bottom:20px;
font-family:'Special Elite', cursive;
letter-spacing:0.04em;
line-height:1.3;
}

/* CTA */

.portfolio-cta{
position:relative;
z-index:2;
padding:140px 0;
}

.portfolio-cta h2{
font-size:clamp(2.6rem,6vw,5rem);
margin-bottom:28px;
color:#fff;
font-weight:400;
font-family:'Special Elite', cursive;
letter-spacing:0.04em;
line-height:1.2;
}

.portfolio-cta p{
max-width:760px;
margin:0 auto 44px;
color:rgba(255,255,255,0.72);
line-height:1.9;
font-size:1.1rem;
}

/* RESPONSIVE */

@media(max-width:768px){

.services-hero{  
    padding:140px 0 50px;  
}  

.services-hero h1{  
    font-size: clamp(2.5rem,12vw,4rem);  
}  

.services-hero p{  
    font-size:1rem;  
    line-height:1.8;  
}  

.services-section{  
    padding:48px 0;  
}  

.service-card,  
.pricing-card,  
.support-card{  
    padding:36px 28px;  
}  

.service-card h3,  
.pricing-card h3,  
.support-card h3{  
    font-size:1.7rem;  
}  

.infrastructure-box{  
    padding:54px 30px;  
}  

.portfolio-cta{  
    padding:110px 0;  
}

}


.featured-badge,
.premium-badge,
.support-badge{
display:inline-flex !important;
width:auto !important;
max-width:max-content;
flex:none;

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

padding:10px 18px;
border-radius:20px;
font-size:0.7rem;
font-weight:800;
letter-spacing:0.14em;
text-transform:uppercase;

background:linear-gradient(135deg,#7ecbff,#8f6dff);
color:#fff;

line-height:1;
margin-bottom:24px;

box-shadow:0 0 18px rgba(0,255,255,0.3);
}

.hosting-note{
margin-top:40px;
padding:22px 24px;

border-radius:24px;

background:
linear-gradient(
180deg,
rgba(120,170,255,0.08),
rgba(120,170,255,0.03)
);

border:1px solid rgba(120,170,255,0.16);

color:#bcd6ff;

font-size:1rem;
line-height:1.8;

box-shadow:
0 0 24px rgba(80,120,255,0.08);

backdrop-filter:blur(10px);
}

.hosting-note::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;

width:28px;
height:28px;

margin-right:14px;

border-radius:50%;

background:linear-gradient(135deg,#7ecbff,#8f6dff);

color:#fff;
font-weight:700;

box-shadow:
0 0 16px rgba(120,160,255,0.35);
}

/* ==========================
D2L FEATURED GALLERY FIX
========================== */

.project-gallery{

position:relative;

overflow:hidden;

border-radius:28px;

background:#05070f;

aspect-ratio:16/9;

min-height:260px;

}

.project-gallery img{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:contain; /* cover -> contain */

object-position:center;

opacity:0;

transition:opacity .6s ease;

}

.project-gallery img.active{

opacity:1;

}

@media(max-width:768px){

.project-gallery{

aspect-ratio:16/11;

min-height:220px;

}

}