/*   RESET   */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Segoe UI', sans-serif;

}



body {

    background: linear-gradient(135deg, #22334b 0%,#1b2a3a 45%,#243b55 100%);

    color: #e5e7eb;

    overflow-x: hidden;

}



/*   GLOBAL   */

section {

    padding: 30px 8%;

}



h2 {

    font-size: 35px;

    margin-bottom: 1rem;

}



h2 span {

    color: #22d3ee;

}



p {

    color: #9ca3af;

    line-height: 1.7;

    padding: 0 0 30px 0;

}



/*   NAVBAR   */

.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.5rem 8%;

    position: sticky;

    top: 0;

    background: rgba(4, 10, 34, 0.7);

    backdrop-filter: blur(10px);

    z-index: 999;

    width: 80%;

    margin: auto;

    transition: 1s ;

}

.navbar.scrolled {

  width: 100%;

  margin: auto;

  border-radius: 0;

}

.logo {

    font-size: 22px;

    font-weight: 700;

}



.logo span {

    color: #22d3ee;

}



.navbar ul {

    display: flex;

    gap: 2.5rem;

    list-style: none;

}



.navbar a {

    text-decoration: none;

    color: #9ca3af;

    position: relative;

    transition: 0.3s;

}



.navbar a::after {

    content: "";

    position: absolute;

    bottom: -6px;

    left: 0;

    width: 0%;

    height: 2px;

    background: #22d3ee;

    transition: 0.3s;

}



.navbar a:hover,

.navbar a.active {

    color: #22d3ee;

}



.navbar a:hover::after {

    width: 100%;

}



/*   HERO   */

.hero {

    min-height: 90vh;

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    align-items: center;

    gap: 3rem;

    padding: 30px 8%;

}



.hero h4 {

    color: #22d3ee;

    margin-bottom: 0.5rem;

}



.hero h1 {

    font-size: 50px;

}



.hero h1 span {

    color: #22d3ee;

}



.hero h3 {

    font-weight: 400;

    margin: 0.7rem 0 1.2rem;

    color: #9ca3af;

}



.buttons {

    display: flex;

    gap: 1rem;

}



/* BUTTONS */

.btn-primary,

.btn-outline {

    padding: 0.8rem 1.8rem;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    transition: all 0.35s ease;

}



.btn-primary {

    background: linear-gradient(135deg, #22d3ee, #0ea5e9);

    color: #022c22;

}



.btn-outline {

    border: 1px solid #22d3ee;

    color: #22d3ee;

}



.btn-primary:hover,

.btn-outline:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 20px rgba(34, 211, 238, 0.45);

}



/* HERO IMAGE */

.hero-img {

    position: relative;

    display: flex;

    justify-content: center;

}



.hero-img img {

    width: 320px;

    border-radius: 50%;

    border: 4px solid #22d3ee;

    z-index: 2;

    transition: 0.6s;

}



.hero-img img:hover {

    transform: scale(1.05) rotate(2deg);

}



.glow {

    position: absolute;

    width: 360px;

    height: 360px;

    background: radial-gradient(circle, #22d3ee55, transparent 70%);

    border-radius: 50%;

    animation: pulse 4s infinite;

}



@keyframes pulse {

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

    50% { transform: scale(1.1); opacity: 1; }

    100% { transform: scale(1); opacity: 0.7; }

}



/*   SERVICES   */

.service-cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 2rem;

    margin-top: 2rem;

}



.card {

    background: rgba(17, 24, 39, 0.6);

    backdrop-filter: blur(10px);

    padding: 2.5rem;

    border-radius: 16px;

    text-align: center;

    transition: 0.4s;

    border: 1px solid transparent;

}



.card i {

    font-size: 32px;

    color: #22d3ee;

    margin-bottom: 1rem;

}



.card:hover {

    transform: translateY(-12px);

    border-color: #22d3ee;

    box-shadow: 0 20px 30px rgba(34, 211, 238, 0.25);

}



.about{

    padding:40px 20px;

}

.container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.about h1{

    font-size:38px;

}

.about p{

    color:#cfcfe6;

    line-height:1.7;

}



/* IMAGE SECTION */

.profile-wrap{

    position:relative;

}

.profile-card{

    background:#fff;

    padding:10px;

    border-radius:12px;

    max-width:320px;

}

.profile-card img{

    width:100%;

    border-radius:10px;

}

.overlay-img{

    position:absolute;

    bottom:-30px;

    left:-40px;

    width:200px;

    background:#fff;

    padding:8px;

    border-radius:12px;

}

.overlay-img img{

    width:100%;

    border-radius:10px;

}



/* EXPERIENCE */

.exp-box{

    margin-top:20px;

    display:flex;

    align-items:center;

    gap:15px;

}

.exp-box h2{

    font-size:48px;

    color:#00c6ff;

}

.exp-box span{

    font-size:16px;

    color:#cfcfe6;

}



/* INFO GRID */

.info-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:20px;

}

.info-box{
      

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

    padding:15px;

    border-radius:10px;

}

.info-box h4{

    font-size:14px;

    color:#aaa;

}

.info-box p{

    font-size:15px;

    color:#fff;

    padding: 0;

}



/* BUTTON */

.btn{

    display:inline-block;

    margin-top:30px;

    padding:12px 28px;

    background:#00c6ff;

    color:#000;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

}



/* RESPONSIVE */

@media(max-width:900px){

    .container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .profile-wrap{

        justify-self:center;

    }

    .overlay-img{

        left:50%;

        transform:translateX(-50%);

    }

    .info-grid{

        grid-template-columns:1fr;

    }

}



/*   PROJECTS   */

        .portfolio-tabs {



            display: flex;



            justify-content: center;



            gap: 15px;



            margin-bottom: 50px;



            flex-wrap: wrap;



        }







        .tab-btn {



            padding: 12px 30px;



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



            border: 1px solid rgba(0, 243, 255, 0.2);



            border-radius: 50px;



            color: var(--light);



            cursor: pointer;



            transition: var(--transition);



            font-weight: 600;



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



            position: relative;



            overflow: hidden;



        }







        .tab-btn::before {



            content: '';



            position: absolute;



            top: 0;



            left: -100%;



            width: 100%;



            height: 100%;



            background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.2), transparent);



            transition: 0.5s;



        }







        .tab-btn:hover::before {



            left: 100%;



        }







        .tab-btn.active,



        .tab-btn:hover {



            background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));



            color: var(--space-blue);



            box-shadow: 0 10px 20px rgba(0, 243, 255, 0.3);



        }







        .portfolio-grid {



            display: flex;



            flex-wrap: wrap;



            justify-content: space-between;

            gap: 20px;

            width: 100%;



        }







        .portfolio-item {

            width: 48.5%;

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



            border-radius: 20px;



            overflow: hidden;



            border: 1px solid rgba(0, 243, 255, 0.2);



            transition: 0.4s;

            



        }







        .portfolio-item:hover {



            transform: translateY(-10px);



            border-color: var(--neon-blue);



            box-shadow: 0 20px 40px rgba(0, 243, 255, 0.3);



        }







        .portfolio-image {



            height: 250px;



            overflow: hidden;



            position: relative;



        }







        .portfolio-image::after {



            content: '';



            position: absolute;



            top: 0;



            left: 0;



            width: 100%;



            height: 100%;



            background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));



            opacity: 0;



            transition: var(--transition);



        }







        .portfolio-item:hover .portfolio-image::after {



            opacity: 1;



        }







        .portfolio-image img {



            width: 100%;



            height: 100%;



            object-fit: cover;



            transition: transform 0.5s;



        }







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



            transform: scale(1.1);



        }







        .portfolio-info {



            padding: 25px;



        }







        .portfolio-info h3 {



            font-size: 1.5rem;



            margin-bottom: 10px;



            color: var(--light);



        }







        .portfolio-info p {



            color: var(--gray);



            margin-bottom: 15px;



        }







        .portfolio-tags {



            display: flex;



            flex-wrap: wrap;



            gap: 10px;



        }



@media(max-width:768px){

    .portfolio-grid{

        gap: 18px;

    }

}

@media(max-width:425px){

    .portfolio-item{

        width: 100%;

    }}

        .tag {



            padding: 5px 15px;



            background: rgba(0, 243, 255, 0.1);



            border-radius: 20px;



            font-size: 0.9rem;



            color: var(--neon-blue);



        }

        .section-title h2 {



                font-size: 2.5rem;



            }

            .port-container {



            width: 100%;



            max-width: 1400px;



            margin: 0 auto;



            padding: 0 20px;



        }

            .about-content {



            display: grid;



            grid-template-columns: 1fr 1fr;



            gap: 60px;



            align-items: center;



        }







        .about-text h3 {



            font-size: 2.5rem;



            margin-bottom: 20px;



            color: var(--neon-blue);



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



        }







        .about-text p {



            font-size: 18px;



            margin-bottom: 25px;



            color: var(--gray);



            line-height: 1.8;



        }







        .skills-container {



            margin-top: 30px;



        }







        .skill-item {



            margin-bottom: 20px;



        }







        .skill-name {



            display: flex;



            justify-content: space-between;



            margin-bottom: 8px;



            color: var(--light);



            font-weight: 500;



        }







        .skill-bar {



            height: 10px;



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



            border-radius: 5px;



            overflow: hidden;



        }







        .skill-progress {



            height: 100%;



            background: linear-gradient(to right, var(--neon-blue), var(--neon-purple));



            border-radius: 5px;



            width: 0;



            transition: width 1.5s ease;



        }







        .about-image {



            position: relative;



            border-radius: 20px;



            overflow: hidden;



            border: 3px solid var(--neon-blue);



            box-shadow: 0 20px 50px rgba(0, 243, 255, 0.3);



            transform: perspective(1000px) rotateY(-5deg);



            transition: var(--transition);



        }



        .about-image img {



            width: 100%;



            height: auto;



            display: block;



            transition: transform 0.5s;



        }

.skills-page{

    padding:80px 20px;

}

.container-page{

    max-width:1200px;

    margin:auto;

}

.title-page{

    text-align:center;

    margin-bottom:60px;

}

.title h1{

    font-size:40px;

}

.skill-grid-page{

    display:flex;

    justify-content: space-between;

}

.skill-box h2{

    margin-bottom:25px;

}



/* PROGRESS BAR */

.progress{

    margin-bottom:25px;

}

.progress label{

    display:block;

    margin-bottom:8px;

}

.bar{

    background:#2f3842;

    border-radius:20px;

    /* overflow:hidden; */

    position:relative;

    height:10px;

}

.bar span{

    height:100%;

    display:block;

    background:linear-gradient(90deg,#2ef2c2,#1cc7a0);

    border-radius:20px;

}

.percent{

    position: absolute;

    right: 0;

    top: -13px;

    background: #1cc7a0;

    color: #000;

    font-size: 12px;

    padding: 8px 5px;

    border-radius: 20px;

}

.skill-box-page{
    width: 45%;
}

/* RESPONSIVE */

@media(max-width:900px){

    .skill-grid{

        grid-template-columns:1fr;

    }

}

        .contact{

    padding:80px 20px;

}

@media(max-width:425px){

    .portfolio-item{

        width: 100%;

    }

    .skill-grid-page{

        flex-direction: column;

    }
    .skill-box-page{
    width: 100%;
}

}

.container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}



/* LEFT SIDE */

.contact h6{

    color:#22d3ee;

    letter-spacing:2px;

    margin-bottom:10px;

}

.contact h1{

    font-size:40px;

    margin-bottom:15px;

}

.contact p{

    color:#bbb;

    line-height:1.7;

    max-width:450px;

}

.social{

    margin:30px 0;

}

.social a{

    display:inline-block;

    margin-right:12px;

    width:40px;

    height:40px;

    background:#1c1c24;

    border-radius:50%;

    text-align:center;

    line-height:40px;

    color:#fff;

    transition:0.3s;

}

.social a:hover{

    background:#22d3ee;

}

.info-box{


    gap:15px;

    padding: 20px 15px;

    margin-bottom:15px;

    background: rgba(17, 24, 39, 0.6);

    backdrop-filter: blur(10px);

    border-radius: 16px;

    transition: 0.4s;

    border: 1px solid transparent;

}

.info-box:hover{

    transform: translateY(-12px);

    border-color: #22d3ee;

    box-shadow: 0 20px 30px rgba(34, 211, 238, 0.25);

}

.info-box i{

    color:#22d3ee;

    font-size:20px;

}

.btn{

    transition: .5s;

}

.btn:hover{

    transform: translateY(-5px);

    box-shadow: 0 15px 20px rgba(34, 211, 238, 0.45);

}



/* RIGHT FORM */

.form-box{

    background:#172234;

    padding:30px;

    border-radius:15px;

}

.form-box input,

.form-box textarea{

    width:100%;

    background:transparent;

    border-color: #22d3ee69;

    padding:12px;

    color:#fff;

    border-radius:6px;

    margin-bottom:15px;

}

.form-box textarea{

    height:120px;

    resize:none;

}

.form-box button{

    background:#22d3ee;

    border:none;

    padding:12px 25px;

    color:#fff;

    font-weight:600;

    border-radius:6px;

    cursor:pointer;

}

.form-box button:hover{

    opacity:0.9;

}



/* RESPONSIVE */

@media(max-width:900px){

    .container{

        grid-template-columns:1fr;

    }

}

/*   FOOTER   */

/*   ATTRACTIVE FOOTER   */

.footer {

    background: linear-gradient(180deg, #020617, #020617f5);

    padding: 4rem 8% 1.5rem;

    margin-top: 4rem;

}



.footer-container {

    display: grid;

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

    gap: 2.5rem;

}



/* FOOTER BOX */

.footer-box h3 {

    font-size: 32px;

}



.footer-box h3 span {

    color: #22d3ee;

}



.footer-box h4 {

    margin-bottom: 1rem;

    color: #22d3ee;

}



.footer-box p {

    color: #9ca3af;

    line-height: 1.6;

}



.footer-box ul {

    list-style: none;

}



.footer-box ul li {

    margin-bottom: 0.6rem;

    color: #9ca3af;

    transition: 0.3s;

}



.footer-box ul li a {

    color: inherit;

    text-decoration: none;

}



.footer-box ul li:hover {

    color: #22d3ee;

    transform: translateX(6px);

}



/* SOCIAL ICONS */

.footer-socials {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.footer-socials a {

    width: 40px;

    height: 40px;

    background: rgba(34, 211, 238, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #22d3ee;

    transition: 0.4s;

}



.footer-socials a:hover {

    background: #22d3ee;

    color: #020617;

    transform: translateY(-6px);

    box-shadow: 0 10px 20px rgba(34, 211, 238, 0.4);

}



/* BOTTOM */

.footer-bottom {

    border-top: 1px solid #1f2937;

    margin-top: 3rem;

    padding-top: 1.2rem;

    text-align: center;

    color: #6b7280;

    font-size:18px;

}



/*   RESPONSIVE   */

@media (max-width:1024px) {

    .footer-container {

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

    }

}



@media (max-width:420px) {

    .footer-container {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .footer-socials {

        justify-content: center;

        flex-wrap: wrap;

    }

}



/*    ==

   RESPONSIVE BREAKPOINTS

   == */



/* 1440px */

@media (max-width:1440px) {

    h2 { font-size: 40px; }

}



/* 1024px */

@media (max-width:1024px) {

    .hero {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .buttons {

        justify-content: center;

    }



    .about-stats {

        gap: 2rem;

    }

}



/* 768px */

@media (max-width:768px) {

    section {

        padding: 30px 8%;

    }



    .navbar ul {

        display: none;

    }



    .hero h1 {

        font-size: 45px;

    }



    .about-stats {

        flex-direction: column;

        gap: 2rem;

    }

}



/* 420px */

@media (max-width:420px) {

    section {

        padding: 3rem 5%;

    }



    .hero h1 {

        font-size: 40px;

    }



    .hero-img img {

        width: 240px;

    }

}



/* 325px */

@media (max-width:325px) {

    .hero h1 {

        font-size:35px;

    }



    .btn-primary,

    .btn-outline {

        padding: 0.7rem 1.3rem;

        font-size: 16px;

    }

}