/* ===================================================
HUNAIN DIGITAL STUDIO
PORTFOLIO PAGE CSS
PART 1
GLOBAL + ROOT + CONTAINER
=================================================== */


/* ===================================================
GOOGLE FONT
=================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* ===================================================
RESET
=================================================== */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

    overflow-x:hidden;

}


body{

    font-family:'Poppins',sans-serif;

    background:#f8fbff;

    color:#101828;

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}


/* ===================================================
GLOBAL ELEMENTS
=================================================== */


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


button{

    font-family:inherit;

    border:none;

    outline:none;

    cursor:pointer;

}


ul{

    list-style:none;

}


section{

    position:relative;

    width:100%;

    overflow:hidden;

}


/* ===================================================
ROOT COLORS
=================================================== */

:root{


    /* BRAND COLORS */

    --primary:#0f62fe;

    --primary-dark:#0046c7;

    --primary-light:#2f7cff;


    /* PREMIUM BLUE SHADES */

    --blue-soft:#eaf2ff;

    --blue-gradient:
    linear-gradient(
    135deg,
    #0f62fe,
    #2f7cff
    );


    /* BASIC COLORS */

    --white:#ffffff;

    --black:#000000;

    --light:#f8fbff;

    --dark:#101828;

    --dark-soft:#1d2939;


    /* TEXT COLORS */

    --text:#101828;

    --text-light:#667085;

    --muted:#98a2b3;


    /* BORDER */

    --border:#e4e7ec;

    --border-light:#edf2f7;



    /* EFFECTS */

    --shadow:

    0 20px 60px
    rgba(15,98,254,0.08);



    --shadow-medium:

    0 25px 70px
    rgba(15,98,254,0.12);



    --shadow-hover:

    0 35px 90px
    rgba(15,98,254,0.18);



    /* RADIUS */

    --radius-sm:12px;

    --radius-md:20px;

    --radius-lg:30px;

    --radius-xl:40px;



    /* TRANSITIONS */

    --transition:

    all .35s ease;


}



/* ===================================================
GLOBAL PREMIUM BUTTON BASE
=================================================== */


.btn-primary,
.btn-secondary,
.cta-primary,
.cta-secondary,
.project-btn-primary,
.project-btn-secondary{


    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:15px;

    font-weight:600;

    padding:14px 30px;

    border-radius:50px;

    transition:var(--transition);

}


/* ===================================================
CONTAINER
PREMIUM RESPONSIVE SYSTEM
=================================================== */


.container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding-left:40px;

    padding-right:40px;

}



/* LARGE DESKTOP */


@media(min-width:1800px){


    .container{

        max-width:1600px;

    }


}



/* ULTRA LARGE SCREENS */


@media(min-width:2200px){


    .container{

        max-width:1800px;

    }


}



/* ===================================================
GLOBAL SECTION SPACING
=================================================== */


.section-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}


.section-header h2{


    font-size:48px;

    line-height:1.2;

    font-weight:800;

    color:var(--dark);

    margin-bottom:18px;


}


.section-header p{


    color:var(--text-light);

    font-size:17px;

}



/* ===================================================
SELECTION COLOR
=================================================== */


::selection{

    background:var(--primary);

    color:white;

}



/* ===================================================
SCROLLBAR PREMIUM STYLE
=================================================== */


::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#eef4ff;

}


::-webkit-scrollbar-thumb{

    background:linear-gradient(
    180deg,
    #0f62fe,
    #2f7cff
    );

    border-radius:20px;

}



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


@media(max-width:992px){


    .container{

        padding-left:25px;

        padding-right:25px;

    }


    .section-header h2{

        font-size:38px;

    }


}



@media(max-width:576px){


    .container{

        padding-left:18px;

        padding-right:18px;

    }


    .section-header{

        margin-bottom:45px;

    }


    .section-header h2{

        font-size:30px;

    }


    .section-header p{

        font-size:15px;

    }


}

/* ===================================================
NAVBAR
PREMIUM GLASS STICKY HEADER
=================================================== */


.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:

    rgba(255,255,255,0.88);

    backdrop-filter:

    blur(20px);

    -webkit-backdrop-filter:

    blur(20px);


    border-bottom:

    1px solid rgba(15,98,254,.10);


    transition:

    var(--transition);

}



/* ===================================================
NAV WRAPPER
=================================================== */


.nav-wrapper{


    max-width:1400px;


    margin:0 auto;


    padding:

    16px 40px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:35px;


}



/* ===================================================
NAVBAR SCROLL EFFECT SUPPORT
=================================================== */


.navbar.scrolled{


    background:

    rgba(255,255,255,.96);


    box-shadow:

    0 10px 40px rgba(15,98,254,.10);


}



/* ===================================================
LOGO
=================================================== */


.logo{


    display:flex;


    align-items:center;


    gap:15px;


    flex-shrink:0;


    min-width:max-content;


    transition:

    var(--transition);


}



.logo:hover{


    transform:translateY(-2px);


}



.logo img{


    width:62px;


    height:62px;


    object-fit:contain;


    transition:

    var(--transition);


}



.logo:hover img{


    transform:scale(1.05);


}



.logo-text{


    display:flex;


    flex-direction:column;


    line-height:1.3;


}



.logo-text span{


    color:

    var(--dark);


    font-size:19px;


    font-weight:800;


    letter-spacing:-.3px;


}



.logo-text small{


    color:

    var(--text-light);


    font-size:12px;


    font-weight:500;


}



/* ===================================================
DESKTOP NAV LINKS
=================================================== */


.nav-links{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:30px;


    flex:1;


}



.nav-links a{


    position:relative;


    color:

    var(--dark);


    font-size:15px;


    font-weight:600;


    white-space:nowrap;


    padding:8px 0;


    transition:

    var(--transition);


}



/* UNDERLINE ANIMATION */


.nav-links a::after{


    content:"";


    position:absolute;


    left:0;


    bottom:0;


    width:0;


    height:2px;


    background:

    var(--primary);


    border-radius:10px;


    transition:

    var(--transition);


}



.nav-links a:hover::after,
.nav-links a.active::after{


    width:100%;


}



.nav-links a:hover,
.nav-links a.active{


    color:

    var(--primary);


}



/* ===================================================
NAV CTA BUTTON
=================================================== */


.nav-btn{


    position:relative;


    overflow:hidden;


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:

    14px 30px;


    border-radius:50px;


    background:

    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff
    );


    color:white;


    font-size:15px;


    font-weight:700;


    white-space:nowrap;


    flex-shrink:0;


    box-shadow:

    0 12px 30px rgba(15,98,254,.25);


    transition:

    var(--transition);


}



/* BUTTON SHINE */


.nav-btn::before{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;


    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
    );


    transition:.6s;


}



.nav-btn:hover::before{


    left:100%;


}



.nav-btn:hover{


    transform:

    translateY(-4px);


    box-shadow:

    0 20px 45px rgba(15,98,254,.35);


}



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


@media(max-width:1200px){


    .nav-wrapper{


        padding-left:25px;

        padding-right:25px;


    }



    .nav-links{


        gap:20px;


    }



    .nav-links a{


        font-size:14px;


    }


}




@media(max-width:992px){


    .nav-links,
    .nav-btn{


        display:none;


    }



    .nav-wrapper{


        padding:

        14px 25px;


    }



    .logo img{


        width:55px;

        height:55px;


    }



    .logo-text span{


        font-size:17px;


    }


}



@media(max-width:576px){


    .nav-wrapper{


        padding:

        12px 18px;


    }



    .logo{


        gap:10px;


    }



    .logo img{


        width:48px;

        height:48px;


    }



    .logo-text span{


        font-size:15px;


    }



    .logo-text small{


        display:none;


    }


}

/* ===================================================
MENU BUTTON
MOBILE TOGGLE
=================================================== */


.menu-toggle{


    display:none;


    width:45px;


    height:45px;


    border-radius:50%;


    background:

    rgba(15,98,254,.08);


    color:

    var(--primary);


    font-size:20px;


    align-items:center;


    justify-content:center;


    transition:

    var(--transition);


}



.menu-toggle:hover{


    background:

    var(--primary);


    color:white;


    transform:rotate(5deg);


}





/* ===================================================
PORTFOLIO HERO
PREMIUM INTRO SECTION
=================================================== */


.portfolio-hero{


    position:relative;


    min-height:95vh;


    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


    overflow:hidden;


    background:


    linear-gradient(

    180deg,

    #ffffff 0%,

    #f8fbff 45%,

    #eef5ff 100%

    );


    padding-top:190px;


    padding-bottom:130px;


}





/* ===================================================
BACKGROUND FLOATING SHAPES
=================================================== */


.hero-shape{


    position:absolute;


    border-radius:50%;


    z-index:1;


    pointer-events:none;


    filter:blur(1px);


}



.hero-shape-1{


    width:600px;


    height:600px;


    background:


    rgba(15,98,254,.08);


    top:-280px;


    left:-230px;


    animation:

    heroFloat 10s infinite alternate;


}



.hero-shape-2{


    width:500px;


    height:500px;


    background:


    rgba(47,124,255,.10);


    right:-180px;


    bottom:-200px;


    animation:

    heroFloat 12s infinite alternate-reverse;


}



.hero-shape-3{


    width:300px;


    height:300px;


    background:


    rgba(15,98,254,.06);


    left:50%;


    top:120px;


    transform:translateX(-50%);


}





@keyframes heroFloat{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(35px);

    }


}





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


.portfolio-hero-content{


    position:relative;


    z-index:5;


    max-width:1050px;


    margin:auto;


}





/* ===================================================
HERO BADGE
=================================================== */


.portfolio-badge{


    display:inline-flex;


    align-items:center;


    gap:12px;


    padding:

    14px 28px;


    border-radius:999px;


    background:


    rgba(15,98,254,.08);


    color:

    var(--primary);


    font-size:14px;


    letter-spacing:.5px;


    font-weight:700;


    margin-bottom:35px;


    border:


    1px solid rgba(15,98,254,.15);


    box-shadow:


    0 10px 30px rgba(15,98,254,.08);


}





.portfolio-badge i{


    font-size:16px;


}





/* ===================================================
HERO HEADING
=================================================== */


.portfolio-hero h1{


    font-size:

    clamp(42px,5vw,72px);


    line-height:1.15;


    font-weight:800;


    color:

    var(--dark);


    margin-bottom:25px;


    letter-spacing:-1.5px;


}



.portfolio-hero h1 span{


    display:block;


    background:


    linear-gradient(

    135deg,

    #0f62fe,

    #2f7cff

    );


    -webkit-background-clip:text;


    background-clip:text;


    color:transparent;


}





/* ===================================================
HERO DESCRIPTION
=================================================== */


.portfolio-hero p{


    max-width:850px;


    margin:

    0 auto 40px;


    font-size:18px;


    color:

    var(--text-light);


}





/* ===================================================
HERO BUTTONS
=================================================== */


.hero-buttons{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:18px;


    flex-wrap:wrap;


}





.hero-buttons .btn-primary{


    background:


    var(--blue-gradient);


    color:white;


    box-shadow:


    0 15px 35px rgba(15,98,254,.25);


}



.hero-buttons .btn-primary:hover{


    transform:translateY(-5px);


    box-shadow:


    0 25px 50px rgba(15,98,254,.35);


}





.hero-buttons .btn-secondary{


    background:white;


    color:

    var(--primary);


    border:


    2px solid rgba(15,98,254,.15);


}



.hero-buttons .btn-secondary:hover{


    background:

    var(--primary);


    color:white;


    transform:translateY(-5px);


}





/* ===================================================
PORTFOLIO HERO STATS
=================================================== */


.portfolio-stats{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


    margin-top:70px;


}





.stat-card{


    background:white;


    border-radius:

    var(--radius-lg);


    padding:35px 25px;


    box-shadow:

    var(--shadow);


    border:


    1px solid var(--border-light);


    transition:

    var(--transition);


}





.stat-card:hover{


    transform:translateY(-10px);


    box-shadow:

    var(--shadow-hover);


}





.stat-card h3{


    font-size:42px;


    font-weight:800;


    color:

    var(--primary);


}





.stat-card span{


    color:

    var(--text-light);


    font-weight:600;


}





/* ===================================================
FREE CONSULTATION / SUPPORT CTA
NEW SECTION SUPPORT
=================================================== */


.free-consultation{


    padding:

    100px 0;


    background:

    linear-gradient(

    135deg,

    #0f62fe,

    #0046c7

    );


}





.consultation-box{


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:40px;


    padding:55px;


    border-radius:

    35px;


    background:

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


    backdrop-filter:

    blur(15px);


    border:

    1px solid rgba(255,255,255,.2);


}





.consultation-box h2{


    color:white;


    font-size:42px;


    font-weight:800;


}





.consultation-box p{


    color:

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


}





.consultation-call-btn{


    display:inline-flex;


    align-items:center;


    gap:12px;


    padding:

    16px 35px;


    border-radius:50px;


    background:white;


    color:

    var(--primary);


    font-weight:700;


    transition:

    var(--transition);


}



.consultation-call-btn:hover{


    transform:translateY(-5px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.2);


}





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


@media(max-width:992px){


    .menu-toggle{


        display:flex;


    }



    .portfolio-stats{


        grid-template-columns:1fr;


    }



    .consultation-box{


        flex-direction:column;


        text-align:center;


        padding:35px;


    }


}



@media(max-width:576px){


    .portfolio-hero{


        padding-top:150px;


    }



    .portfolio-hero p{


        font-size:15px;


    }



    .hero-buttons a{


        width:100%;


    }



    .consultation-box h2{


        font-size:30px;


    }


}

/* ===================================================
TITLE
UPDATED PORTFOLIO HERO TYPOGRAPHY
=================================================== */

.portfolio-hero h1{

    font-size:clamp(3rem,7vw,6rem);

    line-height:1.05;

    font-weight:850;

    letter-spacing:-2px;

    color:var(--dark);

    margin-bottom:28px;

}


.portfolio-hero h1 span{

    background:
    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff,
        #4da3ff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}


.portfolio-hero p{

    max-width:880px;

    margin:auto;

    color:var(--gray);

    font-size:1.18rem;

    line-height:1.9;

    margin-bottom:45px;

}


/* ===================================================
HERO BUTTONS
=================================================== */

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


.btn-primary{

    position:relative;

    overflow:hidden;

    padding:18px 36px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:
    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff
    );

    color:#fff;

    border-radius:18px;

    text-decoration:none;

    font-weight:700;

    border:none;

    box-shadow:

    0 20px 45px rgba(15,98,254,.25);

    transition:.35s ease;

}


.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.5s;

}


.btn-primary:hover::before{

    left:100%;

}


.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:

    0 30px 60px rgba(15,98,254,.35);

}



.btn-secondary{

    padding:18px 36px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:18px;

    text-decoration:none;

    background:#fff;

    color:#111827;

    font-weight:700;

    border:

    1px solid var(--border);

    transition:.35s ease;

}


.btn-secondary:hover{

    transform:translateY(-6px);

    border-color:#0f62fe;

    color:#0f62fe;

    box-shadow:

    0 20px 45px rgba(15,98,254,.12);

}



/* ===================================================
GET FREE CONSULTATION BUTTON
NEW PREMIUM CTA
=================================================== */


.consultation-btn{

    margin-top:35px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:17px 34px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    background:

    linear-gradient(
        135deg,
        #0046c7,
        #0f62fe
    );

    box-shadow:

    0 20px 50px rgba(15,98,254,.30);

    transition:.35s ease;

}


.consultation-btn i{

    font-size:18px;

}


.consultation-btn:hover{

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

    box-shadow:

    0 30px 70px rgba(15,98,254,.40);

}


/* ===================================================
STATS
=================================================== */


.portfolio-stats{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

    margin-top:85px;

}



.stat-card{

    position:relative;

    overflow:hidden;

    background:

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

    backdrop-filter:blur(15px);

    border-radius:30px;

    padding:38px 30px;

    box-shadow:

    var(--shadow);

    border:

    1px solid rgba(15,98,254,.10);

    transition:.35s ease;

}



.stat-card::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:

    rgba(15,98,254,.08);

    top:-50px;

    right:-50px;

}



.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:

    var(--shadow-hover);

}



.stat-card h3{

    position:relative;

    font-size:2.7rem;

    font-weight:800;

    color:#0f62fe;

    margin-bottom:12px;

}



.stat-card span{

    position:relative;

    color:var(--gray);

    font-weight:500;

}



/* ===================================================
LARGE SCREEN OPTIMIZATION
=================================================== */


@media(min-width:1600px){


    .portfolio-hero-content{

        max-width:1200px;

    }


    .portfolio-hero h1{

        font-size:6.5rem;

    }


    .portfolio-hero p{

        max-width:1000px;

    }

}



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


@media(max-width:1100px){


    .nav-links,
    .nav-btn{

        display:none;

    }


    .menu-toggle{

        display:block;

    }


}



@media(max-width:992px){


    .portfolio-stats{

        grid-template-columns:1fr;

    }


}



@media(max-width:768px){


    .container{

        padding-left:20px;

        padding-right:20px;

    }


    .portfolio-hero{

        padding-top:150px;

        padding-bottom:90px;

    }


    .portfolio-hero h1{

        letter-spacing:-1px;

    }


    .hero-buttons{

        flex-direction:column;

        width:100%;

    }


    .btn-primary,
    .btn-secondary,
    .consultation-btn{

        width:100%;

    }


}


@media(max-width:480px){


    .portfolio-hero h1{

        font-size:2.6rem;

    }


    .portfolio-hero p{

        font-size:1rem;

    }


    .stat-card{

        padding:30px 20px;

    }


}


/* ===================================================
PORTFOLIO INTRO
IMPROVED PREMIUM VERSION
=================================================== */

.portfolio-intro{

    padding:140px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 100%
    );

    position:relative;

    overflow:hidden;

}


/* DECORATIVE BACKGROUND */

.portfolio-intro::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
    rgba(15,98,254,.05);

    top:-180px;

    right:-150px;

}


.portfolio-intro-wrapper{

    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}


/* BADGE */

.intro-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 26px;

    border-radius:999px;

    background:
    rgba(15,98,254,.08);

    border:
    1px solid rgba(15,98,254,.12);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:28px;

}



/* TITLE */

.portfolio-intro-left h2{

    font-size:
    clamp(2.5rem,5vw,3.6rem);

    line-height:1.15;

    font-weight:800;

    color:var(--dark);

    margin-bottom:28px;

}



.portfolio-intro-left h2::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin-top:20px;

    border-radius:10px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}



/* TEXT */

.portfolio-intro-left p{

    color:var(--gray);

    font-size:17px;

    line-height:1.9;

    margin-bottom:20px;

}



/* RIGHT FEATURE GRID */

.portfolio-intro-right{

    display:grid;

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

    gap:28px;

}



/* FEATURE CARD */

.intro-feature-card{

    position:relative;

    background:#fff;

    padding:38px 30px;

    border-radius:28px;

    text-align:center;

    overflow:hidden;

    border:

    1px solid rgba(15,98,254,.08);

    box-shadow:

    0 20px 50px rgba(15,98,254,.08);

    transition:
    .45s ease;

}



.intro-feature-card::before{

    content:"";

    position:absolute;

    width:100px;
    height:100px;

    border-radius:50%;

    background:
    rgba(15,98,254,.06);

    top:-40px;

    right:-40px;

}



.intro-feature-card:hover{

    transform:
    translateY(-12px);

    box-shadow:

    0 35px 80px rgba(15,98,254,.18);

}



/* ICON */

.feature-icon{

    width:85px;

    height:85px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    background:

    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff
    );

    box-shadow:

    0 15px 35px rgba(15,98,254,.25);

}



.feature-icon i{

    font-size:34px;

    color:#fff;

}



.intro-feature-card h3{

    font-size:20px;

    color:var(--dark);

    font-weight:700;

    position:relative;

}



/* ===================================================
SECTION HEADER
=================================================== */


.section-header{

    text-align:center;

    max-width:950px;

    margin:

    0 auto 90px;

}



.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 26px;

    border-radius:999px;

    background:

    rgba(15,98,254,.08);

    border:

    1px solid rgba(15,98,254,.12);

    color:var(--primary);

    font-weight:700;

    margin-bottom:25px;

}



.section-header h2{

    font-size:

    clamp(2.5rem,5vw,3.5rem);

    line-height:1.15;

    font-weight:800;

    color:var(--dark);

    margin-bottom:22px;

}



.section-header p{

    color:var(--gray);

    font-size:17px;

    line-height:1.9;

}



/* ===================================================
PORTFOLIO CATEGORIES
=================================================== */


.portfolio-categories,
.portfolio-categories-continued{

    padding:140px 0;

    background:

    linear-gradient(
        180deg,
        #f8fbff,
        #eef5ff
    );

}



.portfolio-categories-continued{

    padding-top:0;

}



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


.portfolio-grid{

    display:grid;

    grid-template-columns:

    repeat(4,minmax(260px,1fr));

    gap:35px;

}



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


.portfolio-card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    text-decoration:none;

    display:flex;

    flex-direction:column;

    min-height:520px;

    border:

    1px solid rgba(15,98,254,.08);

    box-shadow:

    0 20px 60px rgba(15,98,254,.08);

    transition:

    .45s ease;

}



.portfolio-card:hover{

    transform:

    translateY(-15px);

    box-shadow:

    0 40px 90px rgba(15,98,254,.2);

}



/* IMAGE */

.portfolio-image{

    height:270px;

    overflow:hidden;

    position:relative;

}



.portfolio-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        to top,
        rgba(0,0,0,.2),
        transparent
    );

}



.portfolio-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform .7s ease;

}



.portfolio-card:hover 
.portfolio-image img{

    transform:

    scale(1.1);

}



/* CONTENT */

.portfolio-card-content{

    padding:32px;

    flex:1;

    display:flex;

    flex-direction:column;

}



.portfolio-card-content h3{

    font-size:24px;

    line-height:1.35;

    font-weight:750;

    color:var(--dark);

    margin-bottom:15px;

}



.portfolio-card-content p{

    font-size:15.5px;

    color:var(--gray);

    line-height:1.85;

}



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


@media(max-width:1200px){

    .portfolio-grid{

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

    }

}



@media(max-width:992px){


    .portfolio-intro-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }


    .portfolio-grid{

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

    }

}



@media(max-width:600px){


    .portfolio-intro{

        padding:90px 0;

    }


    .portfolio-intro-right{

        grid-template-columns:1fr;

    }


    .portfolio-grid{

        grid-template-columns:1fr;

    }


    .portfolio-card{

        min-height:auto;

    }


}

/* ===================================================
LARGE SCREEN OPTIMIZATION
=================================================== */

@media(min-width:1800px){

    .portfolio-grid{

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

        gap:45px;

    }


    .portfolio-card{

        min-height:560px;

    }


    .featured-project-card{

        padding:45px;

        gap:80px;

    }


    .featured-project-image{

        height:520px;

    }

}



/* ===================================================
TABLET LANDSCAPE
=================================================== */

@media(max-width:1200px){


    .portfolio-grid{

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

        gap:28px;

    }


    .featured-project-card{

        gap:35px;

    }


    .featured-project-image{

        height:380px;

    }


    .featured-project-content h3{

        font-size:2rem;

    }

}



/* ===================================================
TABLET
=================================================== */

@media(max-width:992px){


    .portfolio-grid{

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

    }


    .portfolio-intro-wrapper{

        grid-template-columns:1fr;

    }


    .featured-project-card{

        grid-template-columns:1fr;

        padding:30px;

    }


    .featured-project-card.reverse{

        direction:ltr;

    }


    .featured-project-image{

        height:400px;

    }


}



/* ===================================================
MOBILE
=================================================== */

@media(max-width:768px){


    .portfolio-intro,
    .portfolio-categories,
    .portfolio-categories-continued,
    .featured-projects,
    .more-featured-projects{

        padding:90px 0;

    }


    .portfolio-grid{

        grid-template-columns:1fr;

    }


    .section-header{

        margin-bottom:55px;

    }


    .section-header h2,
    .portfolio-intro-left h2{

        font-size:2.2rem;

    }


    .featured-project-card{

        border-radius:25px;

        padding:20px;

    }


    .featured-project-image{

        height:280px;

        border-radius:22px;

    }


    .featured-project-content h3{

        font-size:1.8rem;

    }


    .featured-project-content p{

        font-size:15px;

    }


    .project-buttons{

        flex-direction:column;

    }


    .project-btn-primary,
    .project-btn-secondary{

        width:100%;

        text-align:center;

    }

}



/* ===================================================
SMALL MOBILE
=================================================== */

@media(max-width:480px){


    .portfolio-intro-right{

        grid-template-columns:1fr;

    }


    .intro-feature-card{

        padding:30px 20px;

    }


    .featured-project-image{

        height:230px;

    }


}



/* ===================================================
FEATURED PROJECTS
PREMIUM INDUSTRIAL STYLE
=================================================== */


.featured-projects,
.more-featured-projects{

    padding:140px 0;

    background:

    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7faff 100%
    );

    position:relative;

    overflow:hidden;

}


.featured-projects::before,
.more-featured-projects::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    rgba(15,98,254,.05);

    top:-200px;

    right:-150px;

}



.more-featured-projects{

    padding-top:0;

}



/* ===================================================
FEATURED WRAPPER
=================================================== */


.featured-projects-wrapper{

    display:flex;

    flex-direction:column;

    gap:70px;

}



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


.featured-project-card{

    display:grid;

    grid-template-columns:

    1fr 1fr;


    gap:60px;

    align-items:center;


    background:#ffffff;


    border-radius:40px;


    padding:40px;


    border:

    1px solid rgba(15,98,254,.08);


    box-shadow:

    0 25px 70px rgba(15,98,254,.09);


    transition:

    .45s ease;


    position:relative;

    overflow:hidden;

}



.featured-project-card::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    border-radius:50%;

    background:

    rgba(15,98,254,.05);


    top:-50px;

    right:-50px;

}



.featured-project-card:hover{

    transform:

    translateY(-15px);


    box-shadow:

    0 45px 100px rgba(15,98,254,.18);

}



.featured-project-card.reverse{

    direction:rtl;

}


.featured-project-card.reverse 
.featured-project-content{

    direction:ltr;

}



/* ===================================================
FEATURED IMAGE
=================================================== */


.featured-project-image{

    height:460px;

    border-radius:32px;

    overflow:hidden;

    position:relative;

}



.featured-project-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        to top,
        rgba(0,0,0,.18),
        transparent
    );

}



.featured-project-image img{


    width:100%;

    height:100%;


    object-fit:cover;


    transition:

    transform .8s ease;


}



.featured-project-card:hover 
.featured-project-image img{


    transform:

    scale(1.1);

}



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


.project-category{


    display:inline-flex;


    align-items:center;


    padding:10px 22px;


    border-radius:999px;


    background:

    rgba(15,98,254,.08);


    border:

    1px solid rgba(15,98,254,.15);


    color:

    var(--primary);


    font-weight:700;


    font-size:14px;


    margin-bottom:22px;

}



.featured-project-content h3{


    font-size:

    clamp(2rem,4vw,2.8rem);


    font-weight:800;


    line-height:1.2;


    color:

    var(--dark);


    margin-bottom:22px;


}



.featured-project-content p{


    color:

    var(--gray);


    font-size:17px;


    line-height:1.9;


    margin-bottom:35px;


}



/* ===================================================
PROJECT BUTTONS
=================================================== */


.project-buttons{


    display:flex;

    flex-wrap:wrap;

    gap:16px;

}



.project-btn-primary{


    padding:

    16px 32px;


    border-radius:18px;


    background:

    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff
    );


    color:#fff;


    text-decoration:none;


    font-weight:700;


    box-shadow:

    0 15px 35px rgba(15,98,254,.25);


    transition:.35s;

}



.project-btn-primary:hover{


    transform:

    translateY(-6px);

}



.project-btn-secondary{


    padding:

    16px 32px;


    border-radius:18px;


    background:#fff;


    color:var(--dark);


    border:

    1px solid #d0d5dd;


    text-decoration:none;


    font-weight:700;


    transition:.35s;

}



.project-btn-secondary:hover{


    transform:

    translateY(-6px);


    border-color:

    var(--primary);


    color:

    var(--primary);

}

/* ===================================================
PREMIUM ACHIEVEMENTS SECTION
=================================================== */

.portfolio-achievements{

    padding:130px 0;

    position:relative;

    background:

    linear-gradient(
        180deg,
        #f8fbff 0%,
        #eef5ff 100%
    );

    overflow:hidden;

}


.portfolio-achievements::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    rgba(15,98,254,.06);

    top:-250px;

    left:-200px;

}



.achievements-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

}



.achievement-card{

    background:

    rgba(255,255,255,.9);


    backdrop-filter:

    blur(15px);


    padding:

    45px 25px;


    text-align:center;


    border-radius:30px;


    border:

    1px solid rgba(15,98,254,.1);


    box-shadow:

    0 25px 60px rgba(15,98,254,.08);


    transition:

    .45s ease;


    position:relative;

    overflow:hidden;

}



.achievement-card::before{

    content:"";


    position:absolute;


    width:90px;


    height:90px;


    border-radius:50%;


    background:

    rgba(15,98,254,.06);


    right:-30px;


    top:-30px;

}



.achievement-card:hover{


    transform:

    translateY(-12px);


    box-shadow:

    0 35px 80px rgba(15,98,254,.18);

}



.achievement-card h3{


    position:relative;


    z-index:2;


    font-size:

    3rem;


    font-weight:800;


    color:

    var(--primary);


    margin-bottom:12px;

}



.achievement-card span{


    position:relative;


    z-index:2;


    color:

    var(--gray);


    font-size:16px;


    font-weight:600;

}



/* ===================================================
PREMIUM CTA SECTION
=================================================== */


.portfolio-cta{


    padding:150px 0;


    position:relative;


    overflow:hidden;


    background:


    linear-gradient(
        135deg,
        #0f62fe,
        #0046c7
    );

}



.portfolio-cta::before{


    content:"";


    position:absolute;


    width:600px;


    height:600px;


    border-radius:50%;


    background:

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


    right:-250px;


    top:-250px;


}



.portfolio-cta::after{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    border-radius:50%;


    background:

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


    left:-200px;


    bottom:-150px;


}



.portfolio-cta-box{


    position:relative;


    z-index:2;


    display:grid;


    grid-template-columns:


    1.2fr .8fr;


    gap:70px;


    align-items:center;

}



/* LEFT */


.portfolio-cta-left{


    color:#fff;

}



.cta-badge{


    display:inline-flex;


    align-items:center;


    gap:10px;


    padding:

    12px 24px;


    border-radius:999px;


    background:

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


    border:

    1px solid rgba(255,255,255,.25);


    font-weight:700;


    margin-bottom:30px;

}



.portfolio-cta-left h2{


    font-size:

    clamp(2.5rem,5vw,3.8rem);


    line-height:1.15;


    font-weight:800;


    margin-bottom:25px;

}



.portfolio-cta-left p{


    font-size:18px;


    line-height:1.9;


    max-width:650px;


    opacity:.95;


    margin-bottom:40px;

}



/* CTA BUTTONS */


.cta-buttons{


    display:flex;


    flex-wrap:wrap;


    gap:18px;

}



.cta-primary{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    padding:

    18px 35px;


    background:#fff;


    color:

    var(--primary);


    border-radius:18px;


    text-decoration:none;


    font-weight:800;


    transition:.35s;


    box-shadow:

    0 15px 35px rgba(0,0,0,.15);

}



.cta-primary:hover{


    transform:

    translateY(-6px);

}



.cta-secondary{


    display:inline-flex;


    align-items:center;


    gap:10px;


    padding:

    18px 35px;


    border-radius:18px;


    text-decoration:none;


    color:#fff;


    font-weight:700;


    background:

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


    border:

    1px solid rgba(255,255,255,.3);


    transition:.35s;

}



.cta-secondary:hover{


    transform:

    translateY(-6px);


    background:

    rgba(255,255,255,.22);

}



/* ===================================================
CTA FEATURE CARDS
=================================================== */


.portfolio-cta-right{


    display:grid;


    grid-template-columns:


    repeat(2,1fr);


    gap:25px;

}



.cta-mini-card{


    padding:

    40px 25px;


    text-align:center;


    color:#fff;


    border-radius:28px;


    background:

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


    backdrop-filter:

    blur(18px);


    border:

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


    transition:.4s;

}



.cta-mini-card:hover{


    transform:

    translateY(-10px);


    background:

    rgba(255,255,255,.2);

}



.cta-mini-card i{


    font-size:

    38px;


    margin-bottom:18px;


}



.cta-mini-card h4{


    font-size:19px;


    font-weight:700;

}



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


@media(max-width:1200px){


    .portfolio-cta-box{


        grid-template-columns:1fr;

        text-align:center;

    }



    .portfolio-cta-left p{

        margin-left:auto;

        margin-right:auto;

    }



    .cta-buttons{

        justify-content:center;

    }


}



@media(max-width:992px){


    .achievements-grid{


        grid-template-columns:

        repeat(2,1fr);

    }



    .portfolio-cta-right{


        max-width:600px;

        margin:auto;

    }


}



@media(max-width:768px){


    .portfolio-achievements,
    .portfolio-cta{


        padding:90px 0;

    }



    .achievements-grid{


        grid-template-columns:1fr;

    }



    .portfolio-cta-right{


        grid-template-columns:1fr;

    }



    .portfolio-cta-left h2{


        font-size:2.3rem;

    }


}



@media(max-width:576px){


    .cta-buttons{


        flex-direction:column;

    }



    .cta-primary,
    .cta-secondary{


        width:100%;

    }


}

/* ===================================================
PORTFOLIO CSS
PART 4
PREMIUM JOURNEY SECTION
FAQ SECTION
=================================================== */


/* ===================================================
FOLLOW OUR JOURNEY SECTION
=================================================== */


.portfolio-journey{

    padding:150px 0;

    background:

    linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );

    position:relative;

    overflow:hidden;

}



.portfolio-journey::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:

    rgba(15,98,254,.05);

    top:-300px;

    left:-250px;

}



.portfolio-journey::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    rgba(47,124,255,.06);

    right:-250px;

    bottom:-200px;

}



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


.journey-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

    position:relative;

    z-index:2;

}



/* ===================================================
JOURNEY SOCIAL CARD
=================================================== */


.journey-card{

    background:#ffffff;

    border-radius:35px;

    padding:50px 30px;

    text-align:center;

    border:

    1px solid rgba(15,98,254,.09);

    box-shadow:

    0 25px 60px rgba(15,98,254,.08);

    transition:

    .45s ease;

    position:relative;

    overflow:hidden;

}



.journey-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;


    background:

    linear-gradient(
        90deg,
        #0f62fe,
        #2f7cff
    );

}



.journey-card:hover{

    transform:

    translateY(-15px);


    box-shadow:

    0 40px 90px rgba(15,98,254,.18);

}



/* ===================================================
SOCIAL ICON BOX
=================================================== */


.journey-icon{

    width:95px;

    height:95px;


    margin:0 auto 28px;


    border-radius:28px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff
    );


    color:#fff;


    font-size:38px;


    transition:.4s;


    box-shadow:

    0 20px 45px rgba(15,98,254,.25);

}



.journey-card:hover .journey-icon{

    transform:

    scale(1.1) rotate(5deg);

}



/* ===================================================
REAL SOCIAL BRAND COLORS ON HOVER
=================================================== */


/* INSTAGRAM */

.journey-card.instagram:hover .journey-icon{

    background:

    linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
    );

}



/* YOUTUBE */

.journey-card.youtube:hover .journey-icon{

    background:#ff0000;

}



/* LINKEDIN */

.journey-card.linkedin:hover .journey-icon{

    background:#0a66c2;

}



/* FACEBOOK */

.journey-card.facebook:hover .journey-icon{

    background:#1877f2;

}



.journey-card h3{


    font-size:

    1.6rem;


    font-weight:800;


    color:

    var(--dark);


    margin-bottom:15px;


}



.journey-card p{


    color:

    var(--gray);


    line-height:1.8;


    font-size:15px;


    margin-bottom:20px;


}



.journey-card span{


    display:inline-block;


    color:

    var(--primary);


    font-weight:700;


    font-size:14px;


}





/* ===================================================
FAQ SECTION
=================================================== */


.portfolio-faq{


    padding:150px 0;


    background:#ffffff;


    position:relative;


}



.portfolio-faq-wrapper{


    max-width:950px;


    margin:auto;


}



/* ===================================================
FAQ ITEM
=================================================== */


.portfolio-faq-item{


    background:#fff;


    border-radius:28px;


    margin-bottom:22px;


    border:


    1px solid rgba(15,98,254,.1);


    box-shadow:


    0 20px 50px rgba(15,98,254,.06);


    overflow:hidden;


    transition:.4s ease;


}



.portfolio-faq-item:hover{


    transform:

    translateY(-5px);


    box-shadow:


    0 30px 70px rgba(15,98,254,.12);


}



.portfolio-faq-item.active{


    border-color:

    rgba(15,98,254,.25);


}



/* ===================================================
FAQ QUESTION
=================================================== */


.faq-question{


    width:100%;


    padding:

    28px 35px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    background:none;


    border:none;


    cursor:pointer;


    font-size:18px;


    font-weight:700;


    color:

    var(--dark);


    text-align:left;


}



.faq-question i{


    width:38px;


    height:38px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    rgba(15,98,254,.08);


    color:

    var(--primary);


    transition:.35s;


}



.portfolio-faq-item.active 
.faq-question i{


    transform:

    rotate(45deg);


    background:

    var(--primary);


    color:#fff;


}



/* ===================================================
FAQ ANSWER
=================================================== */


.faq-answer{


    max-height:0;


    overflow:hidden;


    transition:

    max-height .45s ease;


}



.portfolio-faq-item.active .faq-answer{


    max-height:300px;


}



.faq-answer p{


    padding:

    0 35px 30px;


    color:

    var(--gray);


    line-height:1.9;


    font-size:16px;


}



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


@media(max-width:1200px){


    .journey-grid{


        grid-template-columns:

        repeat(2,1fr);


    }


}



@media(max-width:992px){


    .portfolio-journey,
    .portfolio-faq{


        padding:100px 0;


    }


}



@media(max-width:768px){


    .journey-grid{


        grid-template-columns:1fr;


    }



    .journey-card{


        padding:40px 25px;


    }



    .faq-question{


        padding:

        22px;


        font-size:16px;


    }



    .faq-answer p{


        padding:

        0 22px 25px;


    }


}



@media(max-width:480px){


    .journey-icon{


        width:80px;


        height:80px;


        font-size:32px;


    }


}


/* ===================================================
PORTFOLIO CSS
PART 4 FINAL
FOLLOW OUR JOURNEY + FAQ SECTION
=================================================== */


/* ===================================================
FOLLOW OUR JOURNEY SECTION
=================================================== */

.portfolio-journey{

    padding:150px 0;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );

}


.portfolio-journey::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:

    rgba(15,98,254,.05);

    top:-300px;

    left:-250px;

}


.portfolio-journey::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    rgba(47,124,255,.06);

    bottom:-220px;

    right:-220px;

}



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


.journey-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

    position:relative;

    z-index:2;

}



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


.journey-card{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    border-radius:32px;

    padding:45px 30px;

    text-align:center;

    border:

    1px solid rgba(15,98,254,.09);


    box-shadow:

    0 25px 60px rgba(15,98,254,.08);


    transition:

    .45s ease;

}


.journey-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;


    background:

    linear-gradient(
        90deg,
        #0f62fe,
        #2f7cff
    );

}



.journey-card:hover{

    transform:

    translateY(-12px);


    box-shadow:

    0 35px 80px rgba(15,98,254,.18);

}



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


.journey-icon{

    width:95px;

    height:95px;


    margin:

    0 auto 25px;


    border-radius:28px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff
    );


    color:#ffffff;


    font-size:36px;


    box-shadow:

    0 20px 45px rgba(15,98,254,.25);


    transition:.4s ease;

}



.journey-card:hover .journey-icon{

    transform:

    scale(1.1) rotate(5deg);

}



/* ===================================================
SOCIAL BRAND HOVER COLORS
=================================================== */


.journey-card.instagram:hover .journey-icon{

    background:

    linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
    );

}



.journey-card.youtube:hover .journey-icon{

    background:#ff0000;

}



.journey-card.linkedin:hover .journey-icon{

    background:#0a66c2;

}



.journey-card.facebook:hover .journey-icon{

    background:#1877f2;

}




.journey-card h3{

    color:var(--dark);

    font-size:1.5rem;

    font-weight:800;

    margin-bottom:15px;

}



.journey-card p{

    color:var(--gray);

    font-size:15px;

    line-height:1.8;

    margin-bottom:20px;

}



.journey-card span{

    color:var(--primary);

    font-size:14px;

    font-weight:700;

}



/* ===================================================
FAQ SECTION
=================================================== */


.portfolio-faq{

    padding:150px 0;

    background:#ffffff;

}



/* WRAPPER */


.portfolio-faq-wrapper{

    max-width:950px;

    margin:auto;

}



/* ===================================================
FAQ ITEM
=================================================== */


.portfolio-faq-item,
.faq-item{


    background:#ffffff;


    border-radius:26px;


    margin-bottom:22px;


    overflow:hidden;


    border:

    1px solid rgba(15,98,254,.1);


    box-shadow:

    0 20px 50px rgba(15,98,254,.06);


    transition:.4s ease;


}



.portfolio-faq-item:hover,
.faq-item:hover{


    transform:

    translateY(-5px);


    box-shadow:

    0 30px 70px rgba(15,98,254,.12);

}



.portfolio-faq-item.active,
.faq-item.active{


    border-color:

    rgba(15,98,254,.25);

}



/* ===================================================
FAQ QUESTION
=================================================== */


.portfolio-faq-question,
.faq-question{


    width:100%;


    border:none;


    background:none;


    padding:

    28px 30px;


    cursor:pointer;


    display:flex;


    align-items:center;


    justify-content:space-between;


    text-align:left;


    font-size:18px;


    font-weight:700;


    color:var(--dark);

}



.portfolio-faq-question i,
.faq-question i{


    width:38px;


    height:38px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(15,98,254,.08);


    color:var(--primary);


    transition:.35s ease;

}



.portfolio-faq-item.active 
.portfolio-faq-question i,
.faq-item.active 
.faq-question i{


    transform:

    rotate(45deg);


    background:

    var(--primary);


    color:#ffffff;

}



/* ===================================================
FAQ ANSWER
=================================================== */


.portfolio-faq-answer,
.faq-answer{


    max-height:0;


    overflow:hidden;


    transition:

    max-height .45s ease;

}



.portfolio-faq-answer p,
.faq-answer p{


    padding:

    0 30px 30px;


    color:var(--gray);


    font-size:16px;


    line-height:1.9;

}



.portfolio-faq-item.active 
.portfolio-faq-answer,
.faq-item.active 
.faq-answer{


    max-height:300px;

}



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


@media(max-width:1200px){


    .journey-grid{

        grid-template-columns:

        repeat(2,1fr);

    }


}



@media(max-width:768px){


    .portfolio-journey,
    .portfolio-faq{

        padding:90px 0;

    }



    .journey-grid{

        grid-template-columns:1fr;

        gap:20px;

    }



    .journey-card{

        padding:35px 25px;

    }



    .journey-icon{

        width:75px;

        height:75px;

        font-size:28px;

    }



    .portfolio-faq-question,
    .faq-question{

        padding:22px;

        font-size:16px;

    }



    .portfolio-faq-answer p,
    .faq-answer p{

        padding:

        0 22px 22px;

        font-size:15px;

    }


}



@media(max-width:480px){


    .journey-card{

        border-radius:24px;

    }



    .portfolio-faq-item,
    .faq-item{

        border-radius:18px;

    }


}

/* ===================================================
FAQ SECTION
PREMIUM VERSION
=================================================== */


.portfolio-faq{

    padding:150px 0;

    background:

    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 100%
    );

    position:relative;

    overflow:hidden;

}



.portfolio-faq::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    rgba(15,98,254,.05);

    top:-250px;

    right:-200px;

}



.portfolio-faq-wrapper{

    max-width:950px;

    margin:auto;

    position:relative;

    z-index:2;

}



/* ===================================================
FAQ ITEM
=================================================== */


.portfolio-faq-item,
.faq-item{

    background:#ffffff;

    border-radius:28px;

    margin-bottom:22px;

    border:

    1px solid rgba(15,98,254,.1);


    box-shadow:

    0 20px 50px rgba(15,98,254,.06);


    overflow:hidden;


    transition:

    .4s ease;

}



.portfolio-faq-item:hover,
.faq-item:hover{

    transform:

    translateY(-5px);


    box-shadow:

    0 35px 80px rgba(15,98,254,.12);

}



.portfolio-faq-item.active,
.faq-item.active{

    border-color:

    rgba(15,98,254,.25);


    box-shadow:

    0 30px 70px rgba(15,98,254,.15);

}



/* ===================================================
FAQ QUESTION
=================================================== */


.portfolio-faq-question,
.faq-question{


    width:100%;


    border:none;


    background:transparent;


    padding:

    28px 32px;


    cursor:pointer;


    display:flex;


    justify-content:space-between;


    align-items:center;


    text-align:left;


    color:

    var(--dark);


    font-size:18px;


    font-weight:700;


    transition:.3s ease;

}



.portfolio-faq-question:hover,
.faq-question:hover{

    color:

    var(--primary);

}



.portfolio-faq-question i,
.faq-question i{


    width:40px;


    height:40px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(15,98,254,.08);


    color:

    var(--primary);


    font-size:16px;


    transition:

    .35s ease;

}



.portfolio-faq-item.active 
.portfolio-faq-question i,
.faq-item.active 
.faq-question i{


    transform:

    rotate(45deg);


    background:

    var(--primary);


    color:#ffffff;

}



/* ===================================================
FAQ ANSWER
=================================================== */


.portfolio-faq-answer,
.faq-answer{


    max-height:0;


    overflow:hidden;


    transition:

    max-height .45s ease;

}



.portfolio-faq-answer p,
.faq-answer p{


    padding:

    0 32px 32px;


    color:

    var(--gray);


    font-size:16px;


    line-height:1.9;

}



.portfolio-faq-item.active 
.portfolio-faq-answer,
.faq-item.active 
.faq-answer{


    max-height:300px;

}



/* ===================================================
FAQ ICON ANIMATION
=================================================== */


.portfolio-faq-item.active
.portfolio-faq-question i,
.faq-item.active
.faq-question i{


    animation:

    faqRotate .35s ease;

}



@keyframes faqRotate{

    from{

        transform:rotate(0);

    }


    to{

        transform:rotate(45deg);

    }

}



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


@media(max-width:1200px){


    .portfolio-faq{

        padding:120px 0;

    }

}



@media(max-width:768px){


    .portfolio-faq{

        padding:90px 0;

    }



    .portfolio-faq-question,
    .faq-question{


        padding:

        22px;


        font-size:16px;

    }



    .portfolio-faq-question i,
    .faq-question i{


        width:34px;

        height:34px;

    }



    .portfolio-faq-answer p,
    .faq-answer p{


        padding:

        0 22px 25px;


        font-size:15px;

    }


}



@media(max-width:480px){


    .portfolio-faq-item,
    .faq-item{


        border-radius:20px;

    }



    .portfolio-faq-question,
    .faq-question{


        gap:15px;

    }


}

/* ===================================================
PORTFOLIO CSS
PART 5 FINAL UPDATED
PREMIUM FOOTER
SOCIAL FOLLOW SECTION
FLOATING WHATSAPP
BACK TO TOP
SCROLLBAR
ULTRA RESPONSIVE FIXES
=================================================== */


/* ===================================================
SOCIAL FOLLOW JOURNEY SECTION
=================================================== */

.social-section{

    padding:140px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f5f9ff
    );

}


.social-grid{

    display:grid;

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

    gap:30px;

}


.social-card{

    background:#ffffff;

    border-radius:28px;

    padding:40px 25px;

    text-align:center;

    text-decoration:none;

    color:var(--dark);

    border:
    1px solid rgba(15,98,254,.08);

    box-shadow:
    0 20px 50px rgba(15,98,254,.08);

    transition:.4s ease;

}


.social-card i{

    font-size:45px;

    margin-bottom:20px;

}


.social-card h3{

    font-size:22px;

    margin-bottom:10px;

}


.social-card span{

    font-weight:600;

    color:var(--gray);

}


.social-card:hover{

    transform:
    translateY(-12px);

    color:#fff;

}


.social-card:hover span{

    color:#fff;

}


/* REAL BRAND COLORS */

.youtube-card:hover{

    background:#ff0000;

}


.instagram-card:hover{

    background:
    linear-gradient(
        45deg,
        #F58529,
        #DD2A7B,
        #8134AF,
        #515BD4
    );

}


.linkedin-card:hover{

    background:#0077B5;

}


.facebook-card:hover{

    background:#1877F2;

}



/* ===================================================
PREMIUM FOOTER
=================================================== */


.footer{

    background:
    linear-gradient(
        135deg,
        #08111f,
        #0b1220
    );

    color:#fff;

    padding-top:100px;

    position:relative;

    overflow:hidden;

}



.footer::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    background:
    rgba(15,98,254,.12);

    top:-300px;
    right:-300px;

}



.footer::after{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

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

    bottom:-200px;
    left:-200px;

}



.footer-grid{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr;

    gap:70px;

    padding-bottom:60px;

    position:relative;

    z-index:2;

}



/* LOGO */


.footer-logo{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}


.footer-logo img{

    width:70px;

    height:70px;

    object-fit:contain;

}



.footer-logo h3{

    font-size:22px;

    margin-bottom:5px;

}



.footer-logo p{

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

    font-size:14px;

}



.footer-description{

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

    max-width:450px;

    line-height:1.9;

    font-size:15px;

}




/* FOOTER COLUMNS */


.footer-column h4{

    font-size:21px;

    margin-bottom:25px;

}



.footer-column ul{

    list-style:none;

    padding:0;

}



.footer-column li{

    margin-bottom:15px;

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

}



.footer-column a{

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

    text-decoration:none;

    transition:.3s ease;

}



.footer-column a:hover{

    color:#fff;

    padding-left:8px;

}



/* FOOTER BOTTOM */


.footer-bottom{

    border-top:
    1px solid rgba(255,255,255,.12);

    padding:30px 0;

    text-align:center;

    position:relative;

    z-index:2;

}



.footer-bottom p{

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

}



/* ===================================================
FLOATING WHATSAPP
=================================================== */


.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:70px;

    height:70px;

    border-radius:50%;


    background:#25D366;


    display:flex;

    align-items:center;

    justify-content:center;


    color:#fff;

    font-size:34px;

    text-decoration:none;


    z-index:9999;


    box-shadow:

    0 20px 50px rgba(37,211,102,.35);


    animation:
    whatsappPulse 3s infinite;


    transition:.35s ease;

}



.floating-whatsapp:hover{

    transform:
    translateY(-8px)
    scale(1.1);

}



@keyframes whatsappPulse{


    0%{

        box-shadow:
        0 0 0 0 rgba(37,211,102,.5);

    }


    70%{

        box-shadow:
        0 0 0 20px rgba(37,211,102,0);

    }


    100%{

        box-shadow:
        0 0 0 0 rgba(37,211,102,0);

    }

}



/* ===================================================
BACK TO TOP
=================================================== */


#backToTop{

    position:fixed;


    right:25px;

    bottom:115px;


    width:60px;

    height:60px;


    border:none;


    border-radius:18px;


    background:

    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff
    );


    color:#fff;


    font-size:20px;


    cursor:pointer;


    opacity:0;

    visibility:hidden;


    z-index:9998;


    transition:.35s ease;

}



#backToTop.show{

    opacity:1;

    visibility:visible;

}



#backToTop:hover{

    transform:
    translateY(-8px);

}



/* ===================================================
CUSTOM SCROLLBAR
=================================================== */


::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#edf3ff;

}



::-webkit-scrollbar-thumb{

    background:

    linear-gradient(
        180deg,
        #0f62fe,
        #2f7cff
    );


    border-radius:50px;

}



/* ===================================================
ULTRA WIDE SCREENS
=================================================== */


@media(min-width:1600px){


    .container{

        max-width:1500px;

    }


}



@media(min-width:1920px){


    .container{

        max-width:1700px;

    }


}



/* ===================================================
TABLET
=================================================== */


@media(max-width:1200px){


    .social-grid{

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

    }


}




@media(max-width:992px){


    .footer-grid{

        grid-template-columns:

        1fr 1fr;

    }


}



/* ===================================================
MOBILE
=================================================== */


@media(max-width:768px){


    .social-section{

        padding:90px 0;

    }



    .social-grid{

        grid-template-columns:1fr;

    }



    .footer{

        padding-top:80px;

    }



    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }



    .footer-logo{

        justify-content:center;

        text-align:center;

    }



    .footer-description{

        text-align:center;

        max-width:100%;

    }



    .footer-column{

        text-align:center;

    }



    .floating-whatsapp{

        width:60px;

        height:60px;

        right:18px;

        bottom:18px;

        font-size:28px;

    }



    #backToTop{

        width:55px;

        height:55px;

        right:18px;

        bottom:90px;

    }


}




@media(max-width:480px){


    .social-card{

        padding:35px 20px;

    }


    .footer-logo img{

        width:55px;

        height:55px;

    }


}