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

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

html,
body{
    width:100%;
    height:100%;
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#070b18;
    color:#fff;
    overflow-x:hidden;
    line-height:1.7;
}

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

.hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    padding-top:120px;
    padding-bottom:80px;
    background: #060816;
        /*radial-gradient(circle at top right,#5636ff 0%,transparent 35%),*/
        /*radial-gradient(circle at bottom left,#00d4ff 0%,transparent 30%),*/
        /*linear-gradient(135deg,#050816,#0d1327,#111933);*/
}

/*==================================
GLOWING CIRCLES
===================================*/

.circle{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.25;
    z-index:0;
}

/*.circle.one{
    width:350px;
    height:350px;
    background:#1c7dff;
    background:yellow;
    top:-120px;
    right:-80px;
}*/

.circle.two{
    width:300px;
    height:300px;
    /*background:#7d3cff;*/
    
    bottom:-120px;
    left:-80px;
}

.circle.three{
    width:200px;
    height:200px;
    /*background:#00d9ff;*/
    background:red;
    top:45%;
    left:48%;
}

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

/*.custom-navbar{*/
/*    background:rgba(5,8,22,.55);*/
/*    border:none;*/
/*    backdrop-filter:blur(12px);*/
/*    padding:15px 0;*/
/*    transition:.4s;*/
/*}*/

/*.custom-navbar .container{*/
/*    display:flex;*/
/*    align-items:center;*/
/*}*/

/*.navbar-default .navbar-nav>li>a{*/
/*    color:#d9d9d9;*/
/*    font-size:15px;*/
/*    font-weight:500;*/
/*    padding:18px 18px;*/
/*    transition:.3s;*/
/*}*/

/*.navbar-default .navbar-nav>li>a:hover{*/
/*    color:#00d8ff;*/

/*}*/

/*.navbar-default .navbar-nav>.active>a,*/
/*.navbar-default .navbar-nav>.active>a:hover{*/
/*    background:none;*/
/*    color:#00d8ff;*/

/*}*/

/*.navbar-default{*/
/*    box-shadow:none;*/
/*}*/

/*.navbar-default .navbar-toggle{*/
/*    border:none;*/
/*    background:none !important;*/
/*}*/

/*.navbar-default .navbar-toggle .icon-bar{*/
/*    background:#fff;*/
/*}*/

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

/*.logo{*/
/*    color:#fff !important;*/
/*    font-size:30px;*/
/*    font-weight:700;*/
/*    letter-spacing:1px;*/
/*}*/

/*.logo span{*/
/*    color:#fff;*/
/*}*/

/*.logo .blue{*/
/*    color:#00d8ff;*/
/*}*/

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

/*.hire-btn{*/
/*    margin-top:8px !important;*/
/*    margin-left:20px;*/
/*    border-radius:40px;*/
/*    color:#fff !important;*/
/*    padding:12px 28px !important;*/
/*    background:linear-gradient(135deg,#00c6ff,#5b3fff);*/
/*    transition:.4s;*/
/*}*/

/*.hire-btn:hover{*/
/*    transform:translateY(-3px);*/
/*    box-shadow:0 15px 30px rgba(0,212,255,.35);*/
/*}*/


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

/*.admin-btn{*/
/*    margin-top:8px !important;*/
/*    margin-left:20px;*/
/*    border-radius:40px;*/
/*    color:#fff !important;*/
/*    padding:12px 28px !important;*/
/*    background:linear-gradient(101deg,dodgerblue,#5b3fff);*/
/*    transition:.4s;*/
/*}*/

/*.admin-btn:hover{*/
/*    transform:translateY(-3px);*/
/*    box-shadow:0 15px 30px rgba(0,212,255,.35);*/
/*}*/

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

.custom-navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 75px;

    z-index: 9990;

    background: rgba(6, 8, 22, 0.90);

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

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

}


/* =========================================================
   NAVBAR CONTAINER
========================================================= */

.navbar-container {

    width: 100%;

    max-width: 1200px;

    height: 75px;

    margin: auto;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


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

.navbar-logo {

    display: flex;

    align-items: center;

    gap: 5px;

    color: #fff;

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

    font-size: 24px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

}

.navbar-logo:hover {

    color: #fff;

    text-decoration: none;

}

.code-symbol {

    color: #fff;

}

.blue {

    color: #00c8ff;

    font-size: 29px;

}


/* =========================================================
   DESKTOP MENU
========================================================= */

.desktop-menu {

    display: flex;

    align-items: center;

    gap: 5px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.desktop-menu li a {

    display: flex;

    align-items: center;

    height: 45px;

    padding: 0 15px;

    color: #cfd3e1;

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

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    border-radius: 8px;

    transition: all 0.25s ease;

}

.desktop-menu li a:hover {

    color: #00c8ff;

    background: rgba(0,200,255,0.07);

}

.desktop-menu li.active a {

    color: #00c8ff;

}


/* =========================================================
   DESKTOP ADMIN
========================================================= */

.desktop-menu .admin-btn {

    margin-left: 10px;

    padding: 0 17px;

    border: 1px solid rgba(0,200,255,0.4);

    background: rgba(0,200,255,0.07);

    color: #fff;

}

.desktop-menu .admin-btn:hover {

    background: #00c8ff;

    color: #fff;

}


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

.mobile-menu-btn {

    display: none;

    width: 44px;

    height: 44px;

    padding: 0;

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

    border-radius: 10px;

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

    cursor: pointer;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

}

.mobile-menu-btn span {

    width: 21px;

    height: 2px;

    border-radius: 5px;

    background: #fff;

    transition: all 0.3s ease;

}

.mobile-menu-btn:hover {

    border-color: #00c8ff;

    background: rgba(0,200,255,0.08);

}


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

.mobile-overlay {

    position: fixed;

    inset: 0;

    z-index: 9998;

    background: rgba(0,0,0,0.65);

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

    opacity: 0;

    visibility: hidden;

    transition: 0.3s ease;

}

.mobile-overlay.active {

    opacity: 1;

    visibility: visible;

}


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

.mobile-sidebar {

    position: fixed;

    top: 0;

    right: 0;

    width: 310px;

    max-width: 85vw;

    height: 100vh;

    height: 100dvh;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    background: #080b1c;

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

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

    transform: translateX(100%);

    transition: transform 0.35s cubic-bezier(.4,0,.2,1);

}

.mobile-sidebar.active {

    transform: translateX(0);

}


/* =========================================================
   SIDEBAR HEADER
========================================================= */

.sidebar-header {

    height: 75px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    flex-shrink: 0;

}

.sidebar-logo {

    display: flex;

    align-items: center;

    gap: 4px;

    color: #fff;

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

    font-size: 20px;

    font-weight: 700;

    text-decoration: none;

}

.sidebar-logo:hover {

    color: #fff;

    text-decoration: none;

}

.sidebar-logo .blue {

    font-size: 24px;

}


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

.sidebar-close {

    width: 40px;

    height: 40px;

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

    border-radius: 9px;

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

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    cursor: pointer;

    transition: all 0.25s ease;

}

.sidebar-close:hover {

    color: #00c8ff;

    border-color: #00c8ff;

    transform: rotate(90deg);

}


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

.mobile-navigation {

    flex: 1;

    padding: 20px 15px;

}

.mobile-navigation a {

    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 52px;

    margin-bottom: 6px;

    padding: 0 15px;

    border-radius: 10px;

    color: #cfd3e1;

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

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.25s ease;

}

.mobile-navigation a i {

    width: 20px;

    text-align: center;

    color: #7c849c;

}

.mobile-navigation a:hover {

    color: #00c8ff;

    background: rgba(0,200,255,0.08);

    padding-left: 20px;

}

.mobile-navigation a:hover i {

    color: #00c8ff;

}

.mobile-navigation a.active {

    color: #00c8ff;

    background: rgba(0,200,255,0.10);

}

.mobile-navigation a.active i {

    color: #00c8ff;

}


/* =========================================================
   SIDEBAR BOTTOM
========================================================= */

.sidebar-bottom {

    padding: 18px;

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

}

.mobile-admin {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding: 0 15px;

    border: 1px solid rgba(0,200,255,0.30);

    border-radius: 10px;

    background: rgba(0,200,255,0.07);

    color: #fff;

    text-decoration: none;

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

    font-size: 13px;

    transition: all 0.25s ease;

}

.mobile-admin span {

    flex: 1;

}

.mobile-admin:hover {

    background: #00c8ff;

    color: #fff;

    text-decoration: none;

}


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

@media (max-width: 767px) {

    .custom-navbar {

        height: 65px;

    }

    .navbar-container {

        height: 65px;

        padding: 0 15px;

    }

    .navbar-logo {

        font-size: 20px;

    }

    .navbar-logo .blue {

        font-size: 24px;

    }

    .desktop-menu {

        display: none;

    }

    .mobile-menu-btn {

        display: flex;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .navbar-container {

        padding: 0 12px;

    }

    .navbar-logo {

        font-size: 18px;

    }

    .navbar-logo .blue {

        font-size: 22px;

    }

    .mobile-sidebar {

        width: 285px;

    }

}


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

.hero .row{
    display:flex;
    align-items:center;
}

.hero-left{
    position:relative;
    z-index:2;
}

.small-title{
    color:#00d8ff;
    letter-spacing:3px;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;
}

.hero-left h1{
    font-size:68px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:25px;
}

.hero-left h1 span{
    display:block;
    color:#7bb9ff;
}

.hero-text{
    color:#a6b3d1;
    font-size:18px;
    max-width:500px;
    margin-bottom:40px;
}

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

.hero-buttons{
    margin-bottom:40px;
}

.btn-gradient{
    border:none;
    color:#fff;
    font-weight:600;
    padding:16px 34px;
    border-radius:50px;
    background:linear-gradient(135deg,#00c6ff,#5b3fff);
    transition:.35s;
    margin-right:15px;
}

.btn-gradient:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(0,212,255,.35);
    color:#fff;
}

.btn-outline{
    border:2px solid rgba(255,255,255,.15);
    background:transparent;
    color:#fff;
    border-radius:50px;
    padding:14px 34px;
    transition:.35s;
}

.btn-outline:hover{
    background:#fff;
    color:#111;
}

/*==================================
AVAILABLE
===================================*/

.available p{
    color:#a8b2d1;
    font-size:14px;
    margin-bottom:15px;
    letter-spacing:2px;
}

/*==================================
SOCIAL ICONS
===================================*/

.social-icons a{
    width:45px;
    height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    margin-right:10px;
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.15);
    transition:.35s;
}

.social-icons a:hover{
    background:#00d8ff;
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,216,255,.35);
}

/*==================================
RIGHT SIDE BASE
===================================*/

.hero-right{
    position:relative;
    min-height:650px;
}

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

.code-icon{
    position:absolute;
    top:40px;
    right:450px;
    width:80px;
    height:80px;
   
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:44px;
    font-weight:700;
    color:#00d8ff;
    background:transparent;
    /*border:1px solid rgba(255,255,255,.08);*/
    /*backdrop-filter:blur(15px);
    box-shadow:0 0 30px rgba(0,216,255,.25);*/
    animation:floatIcon 5s ease-in-out infinite;
    z-index:2;
}

/*==================================
LAPTOP CONTAINER
===================================*/

.laptop-box{
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    width:750px;
    z-index:3;
}

.laptop-box img{
    width:100%;
    display:block;
    filter:drop-shadow(0 35px 60px rgba(0,180,255,.35));
}

/*==================================
GLOW BEHIND LAPTOP
===================================*/

/*.laptop-box:before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:#00d8ff;
    filter:blur(120px);
    opacity:.18;
    left:50%;
    top:40%;
    transform:translate(-50%,-50%);
    z-index:-1;
}
*/
/*==================================
EXPERIENCE CARD
===================================*/

.experience-card{
    position:absolute;
    left:400px;
    bottom:170px;
    width:130px;
    padding:15px;
    border-radius:24px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
    z-index:5;
}

.experience-card h2{
    font-size:30px;
    text-align: center;
    font-weight:700;
    color:#00d8ff;
    margin:0;
}

.experience-card p{

    margin-top:8px;
    color:#c7d4ef;
    font-size:12px;
    text-align: center;
    line-height:1.6;
}

/*==================================
GLOBE IMAGE
===================================*/

.globe{
    position:absolute;
    right:20px;
    top:20px;
    width:550px;
    z-index:4;
    
}

.globe img{
    width:100%;
    transform: translateX(280px);
}

/*==================================
COFFEE IMAGE
===================================*/

/*.coffee{
    position:absolute;
    right:90px;
    bottom:130px;
    width:90px;
    z-index:4;
    animation:floatFast 4s ease-in-out infinite;
}

.coffee img{
    width:100%;
}
*/
/*==================================
STATS SECTION
===================================*/

.stats{
    margin-top:120px;
    position:relative;
    z-index:5;
}

.stat-box{
    padding:35px 25px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    transition:.35s;
    margin-bottom:30px;
}

.stat-box:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,212,255,.20);
}

.stat-box i{
    font-size:34px;
    color:#00d8ff;
    margin-bottom:18px;
}

.stat-box h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:8px;
}

.stat-box p{
    color:#b6c2de;
    margin:0;
}

/*==================================
GLASS EFFECT
===================================*/

.glass{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border-radius:20px;
}

/*==================================
FLOATING DOTS
===================================*/

.hero:after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    background:#00d8ff;
    border-radius:50%;
    top:25%;
    left:15%;
    box-shadow:
    200px 120px #5b3fff,
    450px -60px #00d8ff,
    700px 160px #5b3fff,
    920px -20px #00d8ff,
    1100px 240px #5b3fff;
    opacity:.6;
}

/*==================================
ANIMATIONS
===================================*/

@keyframes floatSlow{

    0%{
        transform:translateY(0px);
    }

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

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

}

@keyframes floatFast{

    0%{
        transform:translateY(0px);
    }

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

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

}

@keyframes floatIcon{

    0%{
        transform:translateY(0px);
    }

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

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

}

/*==================================
IMAGE HOVER
===================================*/

.laptop-box img,
.coffee img{
    transition:.4s;
}

.laptop-box:hover img{
    transform:scale(1.03);
}


.coffee:hover img{
    transform:rotate(10deg) scale(1.05);
}

/*==================================
BUTTON ICON SPACING
===================================*/

.btn i{
    margin-left:8px;
}








/*====================================
    SERVICES SECTION
====================================*/

.services-section{
    background:#060816;
    padding:100px 0;
    color:#fff;
}

/* Heading */

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

.section-subtitle{

    color:#8f5dff;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    display:block;
    margin-bottom:10px;

}

.section-heading h2{

    font-size:42px;
    font-weight:700;
    margin-top:0;
    margin-bottom:0;

}

.section-description{

    color:#9fa8c6;
    font-size:16px;
    line-height:30px;
    margin-top:18px;

}

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

.service-card{

    background:#0d1228;
    border:1px solid rgba(120,140,255,.18);
    border-radius:18px;
    padding:35px 28px;
    transition:.35s;
    
    position:relative;
    overflow:hidden;
    margin-bottom:30px;

}

/* Glow */

.service-card:before{

    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:#7c3aed;
    filter:blur(80px);
    opacity:0;
    top:-60px;
    right:-60px;
    transition:.4s;

}

.service-card:hover:before{

    opacity:.18;

}

.service-card:hover{

    transform:translateY(-12px);
    border-color:#6f5cff;
    box-shadow:0 20px 45px rgba(0,0,0,.45);

}

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

.service-icon{

    width:70px;
    height:70px;
    border-radius:16px;

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

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

    border:1px solid rgba(122,92,255,.25);

    margin-bottom:30px;

}

.service-icon i{

    color:#8f5dff;
    font-size:34px;

}

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

.service-card h3{

    font-size:28px;
    font-weight:600;
    margin-bottom:15px;

}

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

.service-card p{

    color:#aab2d5;
    line-height:30px;
    font-size:16px;
    margin-bottom:30px;

}

/*========================
LINK
========================*/

.service-card a{

    color:#8f5dff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;

}

.service-card a i{

    margin-left:8px;
    transition:.3s;

}

.service-card:hover a{

    color:#b58cff;

}

.service-card:hover a i{

    transform:translateX(8px);

}

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

@media(max-width:991px){

.section-heading{

text-align:center;

}

.section-description{

margin-top:20px;

}

}

@media(max-width:767px){

.services-section{

padding:70px 0;

}

.section-heading h2{

font-size:34px;

}

.service-card{

padding:30px;

}

.service-card h3{

font-size:24px;

}

}







/*==============================
    SKILLS SECTION
===============================*/

.skills-section{
    background:#06081d;
    padding:100px 0;
    color:#fff;
    overflow:hidden;
    position:relative;
}

.skills-section:before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(92,57,255,.15);
    filter:blur(120px);
    top:-150px;
    left:-150px;
}

.skills-section:after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(0,132,255,.10);
    filter:blur(120px);
    bottom:-180px;
    right:-180px;
}

.skills-section .container{
    position:relative;
    z-index:2;
}

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

.section-tag{
    display:block;
    color:#8c5cff;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

.section-title{
    font-size:42px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:45px;
}

/*==============================
SKILLS
===============================*/

.skill-item{
    margin-bottom:22px;
}

.skill-info{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
    font-size:15px;
}

.skill-info span:first-child{
    font-weight:500;
}

.skill-icon{
    width:20px;
    margin-right:8px;
}

.html{
    color:#ff6b3d;
}

.css{
    color:#4aa3ff;
}

.js{
    color:#ffd54d;
}

.php{
    color:#9b8cff;
}

.mysql{
    color:#4db8ff;
}

.wp{
    color:#4aa3ff;
}

.skill-progress{
    height:7px;
    background:#23274d;
    border-radius:30px;
    overflow:hidden;
    margin-bottom:0;
    box-shadow:none;
}

.progress-bar{
    border-radius:30px;
    background:linear-gradient(90deg,#a855f7,#3b82f6);
    box-shadow:0 0 12px rgba(111,79,255,.8);
}

/*==============================
CODE WINDOW
===============================*/

.code-window{
    background:rgba(18,22,55,.80);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    backdrop-filter:blur(20px);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    overflow:hidden;
    transition:.4s;
}

.code-window:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(78,56,255,.30);
}

.window-top{
    height:55px;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    background:rgba(255,255,255,.02);
}

.window-buttons{
    display:flex;
    align-items:center;
}

.dot{
    width:11px;
    height:11px;
    border-radius:50%;
    display:inline-block;
    margin-right:8px;
}

.red{
    background:#ff5f56;
}

.yellow{
    background:#ffbd2e;
}

.green{
    background:#27c93f;
}

.file-name{
    color:#8f95be;
    font-size:13px;
}

.code-content{
    background:transparent;
    border:none;
    color:#d4d4d4;
    font-size:15px;
    line-height:1.8;
    font-family:Consolas, monospace;
    padding:30px;
    margin:0;
    white-space:pre-wrap;
}

/*==============================
FEATURES
===============================*/

.feature-box{
    display:flex;
    margin-bottom:35px;
    transition:.3s;
}

.feature-box:hover{
    transform:translateX(8px);
}

.feature-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:rgba(126,88,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:18px;
    border:1px solid rgba(146,98,255,.25);
    box-shadow:0 0 20px rgba(115,84,255,.25);
}

.feature-icon i{
    font-size:24px;
    color:#8b5cf6;
}

.feature-content h4{
    margin-top:3px;
    margin-bottom:8px;
    font-size:20px;
    font-weight:600;
}

.feature-content p{
    color:#a8accf;
    line-height:1.8;
    margin:0;
    font-size:14px;
}

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

@media(max-width:991px){

.section-title{
    font-size:34px;
}

.code-window{
    margin:50px 0;
}

.feature-box{
    margin-bottom:30px;
}

}

@media(max-width:767px){

.skills-section{
    padding:70px 0;
    text-align:center;
}

.skill-info{
    font-size:14px;
}

.feature-box{
    display:block;
    text-align:center;
}

.feature-icon{
    margin:0 auto 20px;
}

.code-content{
    font-size:13px;
    padding:20px;
}

.section-title{
    font-size:30px;
    margin-bottom:35px;
}

}

@media(max-width:480px){

.section-title{
    font-size:26px;
}

.file-name{
    display:none;
}

.code-content{
    font-size:12px;
}

}
/*=========================================
        RECENT WORK SECTION - MY WORK
 ==========================================*/
.my-work{
    background:#060816;
    padding:80px 0;
}
.my-work .container h2{
     font-size:42px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:45px;
    color:white;
}
.project-card{
    background:#161b22;

    overflow:hidden;
    transition:.3s;
    height:500px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/*.project-card:hover{
    transform:translateY(-8px);
}
*/
.project-img{
    width:100%;
    height:300px;
    /*object-fit:cover;*/
}

.project-content{
    padding:25px;
    text-align:center;
}

.project-content h3{
    color:#fff;
    font-size:24px;
    margin-bottom:20px;
    font-weight:600;
}

.project-content .btn{
    border-radius:50px;
    padding:10px 30px;
}

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

.work-cta{

    margin-top:40px;

    padding:35px 40px;

    border-radius:20px;

    background:linear-gradient(90deg,#4324cb,#5c29ff,#2d7dff);

    overflow:hidden;

    position:relative;

}

.work-cta:before{

    content:'';

    position:absolute;

    width:300px;

    height:300px;

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

    border-radius:50%;

    left:-120px;

    top:-150px;

}

.cta-left{

    display:flex;

    align-items:center;

}

.cta-icon{

    width:75px;

    height:75px;

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

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-right:25px;

    backdrop-filter:blur(10px);

}

.cta-icon i{

    color:#fff;

    font-size:34px;

}

.cta-text h3{

    margin:0 0 8px;

    color:#fff;

    font-size:32px;

    font-weight:600;

}

.cta-text p{

    margin:0;

    color:#ddd;

    font-size:16px;

}

.cta-btn{

    display:inline-block;

    margin-top:18px;

    padding:18px 45px;

    border-radius:14px;

    background:linear-gradient(90deg,#d96dff,#4ba3ff);

    color:#fff;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    transition:.4s;

    box-shadow:0 15px 35px rgba(70,90,255,.35);

}

.cta-btn:hover{

    color:#fff;

    text-decoration:none;

}

.cta-btn i{

    margin-left:10px;

}


/*==================================================
        ANIMATIONS & HOVER EFFECTS
==================================================*/

.project-card{
    position:relative;
    transition:all .45s ease;
}

.project-card:hover{

    transform:translateY(-12px);

    border-color:rgba(125,95,255,.45);

    box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 35px rgba(93,70,255,.22);

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-card:hover .project-overlay{

    opacity:1;

}

.project-overlay a{

    transform:scale(.7);

    transition:.35s;

}

.project-card:hover .project-overlay a{

    transform:scale(1);

}

.project-overlay a:hover{

    background:#6c4cff;

    color:#fff;

}

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

.section-subtitle{

    position:relative;

    display:inline-block;

}

.section-subtitle:after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:40px;

    height:2px;

    background:#7b5cff;

}

/*======================================
Project Text
======================================*/

.project-info h4{

    transition:.3s;

}

.project-card:hover h4{

    color:#8f74ff;

}

.project-info p{

    transition:.3s;

}

.project-card:hover p{

    color:#d3d7ff;

}

/*======================================
View All Button
======================================*/

.view-projects{

    transition:.35s;

}

.view-projects:hover{

    letter-spacing:1px;

}

.view-projects:hover i{

    transform:translateX(6px);

}

.view-projects i{

    transition:.35s;

}

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

.work-cta{

    transition:.4s;

}

.work-cta:hover{

    transform:translateY(-6px);

    box-shadow:

    0 20px 55px rgba(90,70,255,.35);

}

.cta-icon{

    transition:.35s;

}

.work-cta:hover .cta-icon{

    transform:rotate(-15deg);

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

}

.cta-btn{

    transition:.35s;

}

.cta-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 20px 45px rgba(90,120,255,.45);

}

.cta-btn:hover i{

    transform:translateX(8px);

}

.cta-btn i{

    transition:.35s;

}

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

.project-card{

    animation:fadeUp .9s ease forwards;

}

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

    animation-delay:.15s;

}

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

    animation-delay:.30s;

}

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

    animation-delay:.45s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media (max-width:1200px){

.work-heading h2{

    font-size:38px;

}

.cta-text h3{

    font-size:28px;

}

.cta-btn{

    padding:16px 38px;

}

}

/*==============================*/

@media (max-width:991px){

.recent-work{

    padding:80px 0;

}

.work-heading{

    text-align:center;

}

.text-right{

    text-align:center !important;

}

.view-projects{

    margin-top:20px;

    display:inline-block;

}

.project-card{

    margin-bottom:30px;

}

.work-cta{

    padding:35px;

    text-align:center;

}

.cta-left{

    display:block;

}

.cta-icon{

    margin:0 auto 20px;

}

.cta-text{

    margin-bottom:25px;

}

}

/*==============================*/

@media (max-width:767px){

.recent-work{

    padding:70px 0;

}

.section-subtitle{

    font-size:12px;

}

.work-heading h2{

    font-size:32px;

}

.project-info{

    padding:18px;

}

.project-info h4{

    font-size:18px;

}

.project-info p{

    font-size:14px;

}

.work-cta{

    padding:30px 25px;

}

.cta-text h3{

    font-size:24px;

}

.cta-text p{

    font-size:15px;

}

.cta-btn{

    width:100%;

    padding:16px;

    margin-top:10px;

}

}

/*==============================*/

@media (max-width:575px){

.project-card{

    margin-bottom:25px;

}

.work-heading{

    margin-bottom:30px;

}

.work-heading h2{

    font-size:28px;

}

.project-info h4{

    font-size:17px;

}

.cta-icon{

    width:65px;

    height:65px;

}

.cta-icon i{

    font-size:28px;

}

.cta-text h3{

    font-size:22px;

}

}

/*==============================*/

@media (max-width:480px){

.recent-work{

    padding:60px 0;

}

.section-subtitle{

    letter-spacing:1px;

}

.work-heading h2{

    font-size:25px;

}

.project-info{

    padding:15px;

}

.project-info h4{

    font-size:16px;

}

.project-info p{

    font-size:13px;

}

.work-cta{

    border-radius:15px;

    padding:25px 18px;

}

.cta-text h3{

    font-size:20px;

}

.cta-text p{

    font-size:14px;

}

.cta-btn{

    font-size:16px;

}

}

/*======================================
Smooth Scrolling
======================================*/

html{

    scroll-behavior:smooth;

}

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

::selection{

    background:#6d4cff;

    color:#fff;

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#050818;

}

::-webkit-scrollbar-thumb{

    background:#6d4cff;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8a63ff;

}





/*=====================================
        FUTURISTIC FOOTER
======================================*/

.footer-section{
    position:relative;
    background:#06091b;
    padding:70px 0 40px;
    border-top:1px solid rgba(255,255,255,.06);
    overflow:hidden;
}

.footer-section:before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    left:-200px;
    bottom:-250px;
    background:rgba(108,76,255,.12);
    border-radius:50%;
    filter:blur(140px);
}

.footer-section:after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    right:-180px;
    top:-180px;
    background:rgba(0,162,255,.10);
    border-radius:50%;
    filter:blur(140px);
}

.footer-section .container{
    position:relative;
    z-index:2;
}

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

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

.footer-logo a{
    color:#fff;
    font-size:38px;
    font-weight:700;
    text-decoration:none;
}

.footer-logo i{
    color:#4fa3ff;
    margin-right:10px;
    transition:.4s;
}

.logo-color{
    color:#8a63ff;
}

.footer-logo:hover i{
    transform:rotate(-15deg);
}

.copyright{
    color:#8d93b6;
    font-size:15px;
    margin-top:25px;
    line-height:28px;
}

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

.footer-widget h4{
    color:#fff;
    font-size:22px;
    font-weight:600;
    margin-bottom:25px;
}

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

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

.footer-widget ul li a{
    color:#9aa2c6;
    text-decoration:none;
    transition:.35s;
    font-size:15px;
}

.footer-widget ul li a:hover{
    color:#8a63ff;
    padding-left:8px;
}

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

.contact-info li{
    color:#c9d0f0;
    font-size:15px;
    margin-bottom:15px;
}

.contact-info i{
    color:#8a63ff;
    width:22px;
}

.country{
    font-size:18px !important;
    font-weight:600;
    color:#fff !important;
}

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

.social-icons{
    margin-top:20px;
}

.social-icons a{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    margin-right:10px;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
}

.social-icons a:hover{
    background:#6c4cff;
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(108,76,255,.45);
}

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

.footer-image{
    text-align:right;
}

.footer-image img{
    max-width:220px;
    animation:floatImage 5s ease-in-out infinite;
    filter:
        drop-shadow(0 0 20px rgba(90,120,255,.5))
        drop-shadow(0 0 45px rgba(110,80,255,.4));
}

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

@keyframes floatImage{

    0%{
        transform:translateY(0px);
    }

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

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

}

/*=========================
Hover Effects
=========================*/

.footer-widget ul li{
    transition:.3s;
}

.footer-widget ul li:hover{
    transform:translateX(6px);
}

.footer-widget h4{
    position:relative;
}

.footer-widget h4:after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:40px;

    height:2px;

    background:#7d5cff;

}

.footer-logo{
    transition:.4s;
}

.footer-logo:hover{
    transform:translateY(-4px);
}

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

@media(max-width:1199px){

.footer-logo a{
    font-size:34px;
}

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

.footer-image img{
    max-width:190px;
}

}

@media(max-width:991px){

.footer-section{
    text-align:center;
    padding:60px 0;
}

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

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

.footer-image{
    text-align:center;
    margin-top:40px;
}

.footer-image img{
    max-width:180px;
}

.social-icons{
    text-align:center;
}

}

@media(max-width:767px){

.footer-section{
    padding:55px 0;
}

.footer-logo a{
    font-size:30px;
}

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

.footer-widget ul li a{
    font-size:14px;
}

.contact-info li{
    font-size:14px;
}

.footer-image{
    display:none;
}

}

@media(max-width:480px){

.footer-section{
    padding:45px 0;
}

.footer-logo a{
    font-size:28px;
}

.copyright{
    font-size:13px;
}

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

.social-icons a{
    width:38px;
    height:38px;
    margin-right:6px;
}

}

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

.footer-section *{
    transition:.3s ease;
}

/*=============================
   Parallux
===============================*/
.parallax-section{

    position:relative;

    min-height:600px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:url("../images/parallux.png") center/cover fixed no-repeat;

}

.parallax-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(2px);

}

.parallax-section .container{

    position:relative;

    z-index:2;

}

.parallax-tag{

    display:inline-block;

    padding:8px 20px;

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

    border-radius:40px;

    color:#00e5ff;

    letter-spacing:3px;

    margin-bottom:25px;

    font-size:14px;

}

.parallax-title{

    color:#fff;

    font-size:60px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:25px;

}

.parallax-text{

    color:#d8d8d8;

    font-size:20px;

    line-height:1.8;

    max-width:850px;

    margin:auto;

}

.parallax-section .btn{

    padding:15px 40px;

    border-radius:50px;

    font-weight:600;

    transition:.4s;

}

.parallax-section .btn-primary{

    background:#00bfff;

    border:none;

}

.parallax-section .btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(0,191,255,.4);

}

.parallax-section .btn-outline-light:hover{

    background:#fff;

    color:#000;

}

/*===============responsive for parallux===============*/
@media(max-width:991px){

.parallax-title{

    font-size:42px;

}

.parallax-text{

    font-size:18px;

}

}

@media(max-width:767px){

.parallax-section{

    min-height:500px;

    background-attachment:scroll;

}

.parallax-title{

    font-size:32px;

}

.parallax-text{

    font-size:16px;

}

.parallax-section .btn{

    display:block;

    width:100%;

    margin:10px 0;

}

}

/*==================responsive=======================*/

@media(max-width:320px){


.hero-left h1{
    font-size: 32px;
}

.hero-left h1 span{
    font-size: 26px;
}

.hero-text{
    font-size: 12px;
}

.hero-buttons{
    width:349px;
    position: relative;
    margin-bottom: 50px;

}
.hero-buttons .btn{
  font-weight: 500;
}
.hero-buttons i{
    display: none;
}
.hero-text{
    width:250px;
}

.hero-buttons .btn-gradient{
    float: left;
    min-width: 120px;
}
.hero-buttons .btn-outline{
    float: right;
    min-width: 120px;
    margin-right: 50px;
}

.laptop-box img{
    display: none;
}

.available p {
 font-size: 14px;
 letter-spacing: 0px;
transform: translate(-70px, 20px);
}

.hero-right{
    display: none;
}

/*----------------stats-----------*/

.stats{
    margin-top:30px;
}

/*------------------services-------------------*/

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



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

@media (max-width: 767px) {

    .custom-navbar {
        background: rgba(6, 8, 22, 0.96);
    }

    /* Logo */

    .custom-navbar .navbar-brand {

        height: 65px;
        line-height: 65px;

        font-size: 21px;
    }

    .blue {
        font-size: 25px;
    }


    /* Hamburger */

    .custom-navbar .navbar-toggle {

        margin-top: 15px;
    }


    /* Mobile menu */

    .custom-navbar .navbar-collapse {

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

        padding: 10px 0 18px;

        box-shadow: none;
    }


    .custom-navbar .navbar-nav {

        margin: 0;
    }


    .custom-navbar .navbar-nav > li > a {

        height: auto;

        line-height: normal;

        padding: 14px 15px;

        font-size: 14px;

        border-radius: 7px;

        margin: 2px 0;
    }


    /* Remove desktop underline */

    .custom-navbar .navbar-nav > li > a::after {

        display: none;
    }


    /* Mobile hover */

    .custom-navbar .navbar-nav > li > a:hover {

        color: #00c8ff;

        background: rgba(0, 200, 255, 0.06);
    }


    /* Active */

    .custom-navbar .navbar-nav > .active > a,
    .custom-navbar .navbar-nav > .active > a:hover {

        color: #00c8ff;

        background: rgba(0, 200, 255, 0.08);
    }


    /* Admin */

    .custom-navbar .admin-menu {

        margin: 8px 0 0;
    }

    .custom-navbar .navbar-nav > li > a.admin-btn {

        display: block;

        margin: 5px 0 0;

        padding: 12px 15px;

        text-align: center;
    }

}


/* ==========================================
   425px RESPONSIVE
========================================== */

@media (max-width: 425px) {

    .custom-navbar .container {

        padding-left: 15px;
        padding-right: 15px;
    }


    /* Logo */

    .custom-navbar .navbar-brand {

        font-size: 19px;

        height: 62px;
        line-height: 62px;
    }

    .code-symbol {
        margin-right: 4px;
    }

    .blue {
        font-size: 23px;
    }


    /* Hamburger */

    .custom-navbar .navbar-toggle {

        margin-top: 14px;

        padding: 8px 9px;

        border-radius: 6px;
    }

    .custom-navbar .navbar-toggle .icon-bar {

        width: 21px;
        height: 2px;
    }


    /* Menu */

    .custom-navbar .navbar-collapse {

        padding: 8px 0 15px;
    }


    .custom-navbar .navbar-nav > li > a {

        padding: 13px 12px;

        font-size: 13px;
    }


    .custom-navbar .navbar-nav > li > a.admin-btn {

        padding: 11px 12px;

        font-size: 13px;
    }


}


/* ==========================================
   VERY SMALL DEVICES
========================================== */

@media (max-width: 360px) {

    .custom-navbar .navbar-brand {

        font-size: 17px;
    }

    .blue {
        font-size: 21px;
    }

    .custom-navbar .navbar-toggle .icon-bar {

        width: 19px;
    }

}